diff --git a/src/App.tsx b/src/App.tsx
index 18daf2e..e0b1353 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,11 @@
+
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
+import JobDetails from "./pages/JobDetails";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -16,6 +18,7 @@ const App = () => (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/:jobId" element={<JobDetails />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>
diff --git a/src/components/JobCard.tsx b/src/components/JobCard.tsx
index 3a45dcd..d6bff32 100644
--- a/src/components/JobCard.tsx
+++ b/src/components/JobCard.tsx
@@ -1,9 +1,10 @@
+
 import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
-import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Package, Wrench, Check } from 'lucide-react';
+import { Calendar, Factory, TrendingUp, TrendingDown, Clock, Import, Export, Wrench, Check } from 'lucide-react';
 import { formatISK } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
 import { Input } from '@/components/ui/input';
@@ -21,7 +22,6 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
   const [isEditingProduced, setIsEditingProduced] = useState(false);
   const [producedValue, setProducedValue] = useState(job.produced?.toString() || '0');
   const [copyingBom, setCopyingBom] = useState(false);
-  const [copyingConsumed, setCopyingConsumed] = useState(false);
   const { toast } = useToast();
 
   // Sort transactions by date descending
@@ -87,9 +87,49 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     }
   };
 
-  const copyBillOfMaterials = async () => {
-    if (!job.billOfMaterials?.length) return;
-    
+  const importBillOfMaterials = async () => {
+    try {
+      const clipboardText = await navigator.clipboard.readText();
+      const lines = clipboardText.split('\n').filter(line => line.trim());
+      let importedCount = 0;
+      
+      for (const line of lines) {
+        const parts = line.trim().split(/\s+/);
+        if (parts.length >= 2) {
+          const name = parts.slice(0, -1).join(' ');
+          const quantity = parseInt(parts[parts.length - 1]);
+          if (name && !isNaN(quantity)) {
+            importedCount++;
+          }
+        }
+      }
+      
+      toast({
+        title: "Import Preview",
+        description: `Found ${importedCount} items to import. This is just a preview - actual import functionality needs to be connected.`,
+        duration: 3000,
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to read from clipboard",
+        variant: "destructive",
+        duration: 2000,
+      });
+    }
+  };
+
+  const exportBillOfMaterials = async () => {
+    if (!job.billOfMaterials?.length) {
+      toast({
+        title: "Nothing to Export",
+        description: "No bill of materials found for this job",
+        variant: "destructive",
+        duration: 2000,
+      });
+      return;
+    }
+
     const text = job.billOfMaterials
       .map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
       .join('\n');
@@ -98,7 +138,7 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
       await navigator.clipboard.writeText(text);
       setCopyingBom(true);
       toast({
-        title: "Copied!",
+        title: "Exported!",
         description: "Bill of materials copied to clipboard",
         duration: 2000,
       });
@@ -113,32 +153,6 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     }
   };
 
-  const copyConsumedMaterials = async () => {
-    if (!job.consumedMaterials?.length) return;
-    
-    const text = job.consumedMaterials
-      .map(item => `${item.name}\t${item.quantity.toLocaleString()}`)
-      .join('\n');
-    
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopyingConsumed(true);
-      toast({
-        title: "Copied!",
-        description: "Consumed materials copied to clipboard",
-        duration: 2000,
-      });
-      setTimeout(() => setCopyingConsumed(false), 1000);
-    } catch (err) {
-      toast({
-        title: "Error",
-        description: "Failed to copy to clipboard",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
   const handleProducedClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (job.status !== 'Closed') {
@@ -156,6 +170,16 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
     onDelete(job.id);
   };
 
+  const handleImportClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    importBillOfMaterials();
+  };
+
+  const handleExportClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    exportBillOfMaterials();
+  };
+
   return (
     <Card className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''}`}>
       <CardHeader className="flex-shrink-0">
@@ -166,41 +190,31 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               <Badge className={`${getStatusColor(job.status)} text-white flex-shrink-0`}>
                 {job.status}
               </Badge>
-              {job.billOfMaterials && job.billOfMaterials.length > 0 && (
-                <HoverCard>
-                  <HoverCardTrigger asChild>
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
-                      className="p-1 h-6 w-6 relative group flex-shrink-0"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        copyBillOfMaterials();
-                      }}
-                    >
-                      {copyingBom ? (
-                        <Check className="w-4 h-4 text-green-400 absolute transition-opacity" />
-                      ) : (
-                        <Package className="w-4 h-4 text-blue-400" />
-                      )}
-                      <span className="sr-only">Copy bill of materials</span>
-                    </Button>
-                  </HoverCardTrigger>
-                  <HoverCardContent className="w-80 bg-gray-800 border-gray-600 text-white">
-                    <div className="space-y-2">
-                      <h4 className="text-sm font-semibold text-blue-400">Bill of Materials (click to copy)</h4>
-                      <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
-                        {job.billOfMaterials.map((item, index) => (
-                          <div key={index} className="flex justify-between">
-                            <span>{item.name}</span>
-                            <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </HoverCardContent>
-                </HoverCard>
-              )}
+              <div className="flex gap-1 flex-shrink-0">
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  className="p-1 h-6 w-6"
+                  onClick={handleImportClick}
+                  title="Import BOM from clipboard"
+                >
+                  <Import className="w-4 h-4 text-blue-400" />
+                </Button>
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  className="p-1 h-6 w-6"
+                  onClick={handleExportClick}
+                  disabled={!job.billOfMaterials?.length}
+                  title="Export BOM to clipboard"
+                >
+                  {copyingBom ? (
+                    <Check className="w-4 h-4 text-green-400" />
+                  ) : (
+                    <Export className="w-4 h-4 text-blue-400" />
+                  )}
+                </Button>
+              </div>
             </div>
             <p className="text-gray-400 text-sm">
               Quantity: {job.outputQuantity.toLocaleString()}
@@ -282,6 +296,29 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete, onUpdateProduc
               )}
             </div>
           )}
+
+          {job.billOfMaterials && job.billOfMaterials.length > 0 && (
+            <HoverCard>
+              <HoverCardTrigger asChild>
+                <div className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400">
+                  BOM: {job.billOfMaterials.length} items (hover to view)
+                </div>
+              </HoverCardTrigger>
+              <HoverCardContent className="w-80 bg-gray-800 border-gray-600 text-white">
+                <div className="space-y-2">
+                  <h4 className="text-sm font-semibold text-blue-400">Bill of Materials</h4>
+                  <div className="text-xs space-y-1 max-h-48 overflow-y-auto">
+                    {job.billOfMaterials.map((item, index) => (
+                      <div key={index} className="flex justify-between">
+                        <span>{item.name}</span>
+                        <span className="text-gray-300">{item.quantity.toLocaleString()}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </HoverCardContent>
+            </HoverCard>
+          )}
         </div>
 
         <div className="flex-1" />
diff --git a/src/components/JobForm.tsx b/src/components/JobForm.tsx
index 093cb8d..5de39df 100644
--- a/src/components/JobForm.tsx
+++ b/src/components/JobForm.tsx
@@ -8,8 +8,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { IndJobStatusOptions, IndJobRecordNoId } from '@/lib/pbtypes';
 import { IndJob } from '@/lib/types';
 import { parseISKAmount } from '@/utils/priceUtils';
-import { Import, Upload } from 'lucide-react';
-import { useToast } from '@/components/ui/use-toast';
 
 interface JobFormProps {
   job?: IndJob;
@@ -18,7 +16,6 @@ interface JobFormProps {
 }
 
 const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
-  const { toast } = useToast();
   const [formData, setFormData] = useState({
     outputItem: job?.outputItem || '',
     outputQuantity: job?.outputQuantity || 0,
@@ -51,70 +48,6 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
     });
   };
 
-  const handleImportBOM = async () => {
-    try {
-      const clipboardText = await navigator.clipboard.readText();
-      const lines = clipboardText.split('\n').filter(line => line.trim());
-      let importedCount = 0;
-      
-      for (const line of lines) {
-        const parts = line.trim().split(/\s+/);
-        if (parts.length >= 2) {
-          const name = parts.slice(0, -1).join(' ');
-          const quantity = parseInt(parts[parts.length - 1]);
-          if (name && !isNaN(quantity)) {
-            importedCount++;
-          }
-        }
-      }
-      
-      toast({
-        title: "Import Preview",
-        description: `Found ${importedCount} items to import. This is just a preview - actual import functionality needs to be connected.`,
-        duration: 3000,
-      });
-    } catch (err) {
-      toast({
-        title: "Error",
-        description: "Failed to read from clipboard",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
-  const handleExportBOM = async () => {
-    if (!job?.billOfMaterials?.length) {
-      toast({
-        title: "Nothing to Export",
-        description: "No bill of materials found for this job",
-        variant: "destructive",
-        duration: 2000,
-      });
-      return;
-    }
-
-    const text = job.billOfMaterials
-      .map(item => `${item.name} ${item.quantity}`)
-      .join('\n');
-    
-    try {
-      await navigator.clipboard.writeText(text);
-      toast({
-        title: "Exported!",
-        description: "Bill of materials copied to clipboard",
-        duration: 2000,
-      });
-    } catch (err) {
-      toast({
-        title: "Error",
-        description: "Failed to copy to clipboard",
-        variant: "destructive",
-        duration: 2000,
-      });
-    }
-  };
-
   const statusOptions = Object.values(IndJobStatusOptions);
 
   return (
@@ -262,40 +195,6 @@ const JobForm: React.FC<JobFormProps> = ({ job, onSubmit, onCancel }) => {
             </div>
           </div>
 
-          {job && (
-            <div className="space-y-4 pt-4 border-t border-gray-700">
-              <Label className="text-gray-300">Bill of Materials</Label>
-              <div className="flex gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={handleImportBOM}
-                  className="border-gray-600 hover:bg-gray-800"
-                >
-                  <Import className="w-4 h-4 mr-2" />
-                  Import BOM
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={handleExportBOM}
-                  className="border-gray-600 hover:bg-gray-800"
-                  disabled={!job?.billOfMaterials?.length}
-                >
-                  <Export className="w-4 h-4 mr-2" />
-                  Export BOM
-                </Button>
-              </div>
-              {job.billOfMaterials && job.billOfMaterials.length > 0 && (
-                <div className="text-sm text-gray-400 max-h-32 overflow-y-auto">
-                  {job.billOfMaterials.map((item, index) => (
-                    <div key={index}>{item.name}: {item.quantity.toLocaleString()}</div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
           <div className="flex gap-2 pt-4">
             <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700">
               {job ? 'Update Job' : 'Create Job'}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 3862573..fc61f1b 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,19 +1,20 @@
+
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Plus, Factory, TrendingUp, Briefcase, FileText } from 'lucide-react';
-import { IndTransactionRecordNoId, IndJobRecordNoId, IndJobStatusOptions, IndTransactionRecord } from '@/lib/pbtypes';
+import { IndTransactionRecordNoId, IndJobRecordNoId, IndJobStatusOptions } from '@/lib/pbtypes';
 import { formatISK } from '@/utils/priceUtils';
 import JobCard from '@/components/JobCard';
 import JobForm from '@/components/JobForm';
-import TransactionForm from '@/components/TransactionForm';
-import TransactionTable from '@/components/TransactionTable';
 import { IndJob } from '@/lib/types';
 import { Badge } from '@/components/ui/badge';
 import BatchTransactionForm from '@/components/BatchTransactionForm';
-import { useJobs, useJob } from '@/hooks/useDataService';
+import { useJobs } from '@/hooks/useDataService';
 
 const Index = () => {
+  const navigate = useNavigate();
   const {
     jobs,
     loading,
@@ -21,22 +22,17 @@ const Index = () => {
     createJob,
     updateJob,
     deleteJob,
-    createMultipleTransactions,
-    updateTransaction,
-    deleteTransaction
+    createMultipleTransactions
   } = useJobs();
 
   const [showJobForm, setShowJobForm] = useState(false);
   const [editingJob, setEditingJob] = useState<IndJob | null>(null);
-  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
   const [showBatchForm, setShowBatchForm] = useState(false);
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
     const saved = localStorage.getItem('jobGroupsCollapsed');
     return saved ? JSON.parse(saved) : {};
   });
 
-  const selectedJob = useJob(selectedJobId);
-
   if (loading) {
     return (
       <div className="min-h-screen bg-gray-950 p-6 flex items-center justify-center">
@@ -132,45 +128,12 @@ const Index = () => {
     if (confirm('Are you sure you want to delete this job?')) {
       try {
         await deleteJob(jobId);
-        if (selectedJobId === jobId) {
-          setSelectedJobId(null);
-        }
       } catch (error) {
         console.error('Error deleting job:', error);
       }
     }
   };
 
-  const handleTransactionsAdded = async (transactions: IndTransactionRecordNoId[], type: 'expenditure' | 'income') => {
-    if (!selectedJobId) return;
-
-    try {
-      await createMultipleTransactions(selectedJobId, transactions, type);
-    } catch (error) {
-      console.error('Error adding transactions:', error);
-    }
-  };
-
-  const handleUpdateTransaction = async (transactionId: string, updates: Partial<IndTransactionRecord>) => {
-    if (!selectedJobId) return;
-
-    try {
-      await updateTransaction(selectedJobId, transactionId, updates);
-    } catch (error) {
-      console.error('Error updating transaction:', error);
-    }
-  };
-
-  const handleDeleteTransaction = async (transactionId: string) => {
-    if (!selectedJobId) return;
-
-    try {
-      await deleteTransaction(selectedJobId, transactionId);
-    } catch (error) {
-      console.error('Error deleting transaction:', error);
-    }
-  };
-
   const handleUpdateProduced = async (jobId: string, produced: number) => {
     try {
       await updateJob(jobId, { produced });
@@ -204,6 +167,10 @@ const Index = () => {
     }
   };
 
+  const handleJobCardClick = (jobId: string) => {
+    navigate(`/${jobId}`);
+  };
+
   if (showJobForm) {
     return (
       <div className="min-h-screen bg-gray-950 p-6">
@@ -221,58 +188,6 @@ const Index = () => {
     );
   }
 
-  if (selectedJob) {
-    return (
-      <div className="min-h-screen bg-gray-950 p-6">
-        <div className="max-w-7xl mx-auto space-y-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-white">Job Details</h1>
-              <p className="text-gray-400">{selectedJob.outputItem}</p>
-            </div>
-            <Button
-              variant="outline"
-              onClick={() => setSelectedJobId(null)}
-              className="border-gray-600 hover:bg-gray-800"
-            >
-              Back to Jobs
-            </Button>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <JobCard
-              job={selectedJob}
-              onEdit={handleEditJob}
-              onDelete={handleDeleteJob}
-              onUpdateProduced={handleUpdateProduced}
-            />
-            <TransactionForm
-              jobId={selectedJob.id}
-              onTransactionsAdded={handleTransactionsAdded}
-            />
-          </div>
-
-          <div className="space-y-6">
-            <TransactionTable
-              title="Expenditures"
-              transactions={selectedJob.expenditures}
-              type="expenditure"
-              onUpdateTransaction={handleUpdateTransaction}
-              onDeleteTransaction={handleDeleteTransaction}
-            />
-            <TransactionTable
-              title="Income"
-              transactions={selectedJob.income}
-              type="income"
-              onUpdateTransaction={handleUpdateTransaction}
-              onDeleteTransaction={handleDeleteTransaction}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="container mx-auto p-4 space-y-4">
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -359,7 +274,7 @@ const Index = () => {
               {!collapsedGroups[status] && (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {statusJobs.map(job => (
-                    <div key={job.id} onClick={() => setSelectedJobId(job.id)} className="cursor-pointer">
+                    <div key={job.id} onClick={() => handleJobCardClick(job.id)} className="cursor-pointer">
                       <JobCard
                         job={job}
                         onEdit={handleEditJob}
@@ -394,7 +309,7 @@ const Index = () => {
           {!collapsedGroups['Tracked'] && (
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {trackedJobs.map(job => (
-                <div key={job.id} onClick={() => setSelectedJobId(job.id)} className="cursor-pointer">
+                <div key={job.id} onClick={() => handleJobCardClick(job.id)} className="cursor-pointer">
                   <JobCard
                     job={job}
                     onEdit={handleEditJob}
diff --git a/src/pages/JobDetails.tsx b/src/pages/JobDetails.tsx
new file mode 100644
index 0000000..1abca2a
--- /dev/null
+++ b/src/pages/JobDetails.tsx
@@ -0,0 +1,170 @@
+
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import JobCard from '@/components/JobCard';
+import TransactionForm from '@/components/TransactionForm';
+import TransactionTable from '@/components/TransactionTable';
+import JobForm from '@/components/JobForm';
+import { IndTransactionRecordNoId, IndJobRecordNoId, IndTransactionRecord } from '@/lib/pbtypes';
+import { useJobs, useJob } from '@/hooks/useDataService';
+import { useState } from 'react';
+import { IndJob } from '@/lib/types';
+
+const JobDetails = () => {
+  const { jobId } = useParams<{ jobId: string }>();
+  const navigate = useNavigate();
+  const [showJobForm, setShowJobForm] = useState(false);
+  const [editingJob, setEditingJob] = useState<IndJob | null>(null);
+
+  const {
+    createMultipleTransactions,
+    updateTransaction,
+    deleteTransaction,
+    updateJob,
+    deleteJob
+  } = useJobs();
+
+  const job = useJob(jobId || null);
+
+  if (!jobId) {
+    navigate('/');
+    return null;
+  }
+
+  if (!job) {
+    return (
+      <div className="min-h-screen bg-gray-950 p-6 flex items-center justify-center">
+        <div className="text-white">Job not found</div>
+      </div>
+    );
+  }
+
+  const handleEditJob = (job: IndJob) => {
+    setEditingJob(job);
+    setShowJobForm(true);
+  };
+
+  const handleUpdateJob = async (jobData: IndJobRecordNoId) => {
+    if (!editingJob) return;
+
+    try {
+      await updateJob(editingJob.id, jobData);
+      setShowJobForm(false);
+      setEditingJob(null);
+    } catch (error) {
+      console.error('Error updating job:', error);
+    }
+  };
+
+  const handleDeleteJob = async (jobId: string) => {
+    if (confirm('Are you sure you want to delete this job?')) {
+      try {
+        await deleteJob(jobId);
+        navigate('/');
+      } catch (error) {
+        console.error('Error deleting job:', error);
+      }
+    }
+  };
+
+  const handleTransactionsAdded = async (transactions: IndTransactionRecordNoId[], type: 'expenditure' | 'income') => {
+    try {
+      await createMultipleTransactions(jobId, transactions, type);
+    } catch (error) {
+      console.error('Error adding transactions:', error);
+    }
+  };
+
+  const handleUpdateTransaction = async (transactionId: string, updates: Partial<IndTransactionRecord>) => {
+    try {
+      await updateTransaction(jobId, transactionId, updates);
+    } catch (error) {
+      console.error('Error updating transaction:', error);
+    }
+  };
+
+  const handleDeleteTransaction = async (transactionId: string) => {
+    try {
+      await deleteTransaction(jobId, transactionId);
+    } catch (error) {
+      console.error('Error deleting transaction:', error);
+    }
+  };
+
+  const handleUpdateProduced = async (jobId: string, produced: number) => {
+    try {
+      await updateJob(jobId, { produced });
+    } catch (error) {
+      console.error('Error updating produced quantity:', error);
+    }
+  };
+
+  if (showJobForm) {
+    return (
+      <div className="min-h-screen bg-gray-950 p-6">
+        <div className="max-w-4xl mx-auto">
+          <JobForm
+            job={editingJob || undefined}
+            onSubmit={handleUpdateJob}
+            onCancel={() => {
+              setShowJobForm(false);
+              setEditingJob(null);
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950 p-6">
+      <div className="max-w-7xl mx-auto space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-white">Job Details</h1>
+            <p className="text-gray-400">{job.outputItem}</p>
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => navigate('/')}
+            className="border-gray-600 hover:bg-gray-800"
+          >
+            Back to Jobs
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <JobCard
+            job={job}
+            onEdit={handleEditJob}
+            onDelete={handleDeleteJob}
+            onUpdateProduced={handleUpdateProduced}
+          />
+          <TransactionForm
+            jobId={job.id}
+            onTransactionsAdded={handleTransactionsAdded}
+          />
+        </div>
+
+        <div className="space-y-6">
+          <TransactionTable
+            title="Expenditures"
+            transactions={job.expenditures}
+            type="expenditure"
+            onUpdateTransaction={handleUpdateTransaction}
+            onDeleteTransaction={handleDeleteTransaction}
+          />
+          <TransactionTable
+            title="Income"
+            transactions={job.income}
+            type="income"
+            onUpdateTransaction={handleUpdateTransaction}
+            onDeleteTransaction={handleDeleteTransaction}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JobDetails;