diff --git a/frontend/src/components/CompanyList.js b/frontend/src/components/CompanyList.js
index 686905e..1e8714c 100644
--- a/frontend/src/components/CompanyList.js
+++ b/frontend/src/components/CompanyList.js
@@ -5,6 +5,7 @@
 function CompanyList() {
     const [companies, setCompanies] = useState([]);
     const [error,setError]=useState(null);
+    const [selectedCompany, setSelectedCompany] = useState(null);
 
     useEffect(() => {
         apiGet('/api/companies')
@@ -34,6 +35,7 @@
                 <thead className='table-dark'>
                     <tr>
                         <th>Company Name</th>
+                        <th>Company URL</th>
                         <th>Actions</th>
                     </tr>
                 </thead>
@@ -41,16 +43,28 @@
                     {companies.map(company => (
                         <tr key={company.id}>
                             <td>{company.name}</td>
+                            <td><a href={company.website} target="_blank" rel="noopener noreferrer">WebSite</a></td>
                             <td>
                                 <Link to={`/companies/${company.id}/edit`} className="btn btn-sm btn-warning me-2">Edit</Link>
                                 <button onClick={() => handleDelete(company.id)} className="btn btn-sm btn-danger">Delete</button>
                                 <Link to={`/companies/${company.id}/jobs`} className="btn btn-sm btn-info ms-2">Jobs</Link>
+                                <button onClick={() => setSelectedCompany(company)} className="btn btn-sm btn-secondary ms-2">...</button>
                             </td>
                         </tr>
                     ))}
                 </tbody>
-            </table>           
-            
+            </table>
+            {selectedCompany && (
+                <div className="mt-4 p-3 border rounded">
+                    <div className="d-flex justify-content-between align-items-center mb-3">
+                        <h4>Details for {selectedCompany.name}</h4>
+                        <button onClick={() => setSelectedCompany(null)} className="btn btn-sm btn-secondary">Hide Details</button>
+                    </div>
+                    {selectedCompany.website && <p><strong>Website:</strong> <a href={selectedCompany.website} target="_blank" rel="noopener noreferrer">{selectedCompany.website}</a></p>}
+                    {selectedCompany.notes && <p><strong>Notes:</strong> {selectedCompany.notes}</p>}
+                </div>
+            )}
+
         </div>
         );
 }
diff --git a/frontend/src/components/JobList.js b/frontend/src/components/JobList.js
index 5bb1640..9cd596e 100644
--- a/frontend/src/components/JobList.js
+++ b/frontend/src/components/JobList.js
@@ -5,6 +5,7 @@
 function JobList() {
     const [jobs, setJobs] = React.useState([]);
     const [error,setError]=React.useState(null);
+    const [selectedJob, setSelectedJob] = React.useState(null);
 
     React.useEffect(() => {
         apiGet('/api/jobs')
@@ -36,6 +37,7 @@
                         <th>Role</th>
                         <th>Company</th>
                         <th>Status</th>
+                        <th>Job Url</th>
                         <th>Actions</th>
                     </tr>
                 </thead>
@@ -45,15 +47,31 @@
                             <td>{job.role}</td>
                             <td>{job.company?.name || "-"}</td>
                             <td>{job.status}</td>
+                            <td>{job.jobUrl ? <a href={job.jobUrl} target="_blank" rel="noopener noreferrer" className="text-decoration-none">Job Url</a> : '-'}</td>
                             <td>
                                 <Link to={`/jobs/${job.id}/edit`} className="btn btn-sm btn-warning me-2">Edit</Link>
                                 <button onClick={() => handleDelete(job.id)} className="btn btn-sm btn-danger">Delete</button>
+                                <button onClick={() => setSelectedJob(job)} className="btn btn-sm btn-info ms-2">...</button>
                             </td>
                         </tr>
                     ))}
                 </tbody>
-            </table>            
-        </div>
+            </table>
+            {selectedJob && (
+                <div className="mt-4 p-3 border rounded">
+                    <div className="d-flex justify-content-between align-items-center mb-3">
+                        <h4>Details for {selectedJob.role}</h4>
+                        <button onClick={() => setSelectedJob(null)} className="btn btn-sm btn-secondary">Hide Details</button>
+                    </div>
+                    <p><strong>Role:</strong> {selectedJob.role}</p>
+                    <p><strong>Company:</strong> {selectedJob.company?.name || '-'}</p>
+                    <p><strong>Status:</strong> {selectedJob.status}</p>
+                    <p><strong>Location:</strong> {selectedJob.location || '-'}</p>
+                    <p><strong>Job Url:</strong> {selectedJob.jobUrl ? <a href={selectedJob.jobUrl} target="_blank" rel="noopener noreferrer" className="text-decoration-none">{selectedJob.jobUrl}</a> : '-'}</p>
+                    {selectedJob.notes && <p><strong>Notes:</strong> {selectedJob.notes}</p>}
+                </div>
+            )}
+            </div>
     );  
 }