diff --git a/web-interface/bun.lock b/web-interface/bun.lock
index b37b8a5..92b083d 100644
--- a/web-interface/bun.lock
+++ b/web-interface/bun.lock
@@ -9,6 +9,7 @@
         "@tanstack/react-router": "latest",
         "@tanstack/react-router-devtools": "latest",
         "@tanstack/router-plugin": "^1.132.0",
+        "date-fns": "^4.1.0",
         "lucide-react": "^0.545.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -511,6 +512,8 @@
 
     "data-urls": ["data-urls@7.0.0", "", { "dependencies": { "whatwg-mimetype": "^5.0.0", "whatwg-url": "^16.0.0" } }, "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA=="],
 
+    "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
+
     "dayjs": ["dayjs@1.11.20", "", {}, "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
diff --git a/web-interface/package.json b/web-interface/package.json
index b9e0451..a423092 100644
--- a/web-interface/package.json
+++ b/web-interface/package.json
@@ -20,6 +20,7 @@
     "@tanstack/react-router": "latest",
     "@tanstack/react-router-devtools": "latest",
     "@tanstack/router-plugin": "^1.132.0",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.545.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
diff --git a/web-interface/src/components/Buttons.tsx b/web-interface/src/components/Buttons.tsx
index 1225fc8..aa655b2 100644
--- a/web-interface/src/components/Buttons.tsx
+++ b/web-interface/src/components/Buttons.tsx
@@ -14,8 +14,7 @@ const fontSizeStyles = {
   base: 'text-base',
   lg: 'text-lg',
   xl: 'text-xl',
-};
-
+}
 
 type ButtonVariant = keyof typeof variantStyles
 type ButtonFontSize = keyof typeof fontSizeStyles
@@ -34,7 +33,7 @@ export function Button({
   return (
     <button
       onClick={onClick}
-      className={`flex items-center gap-1.5 px-3 py-1 ${fontSizeStyles[fontSize]} rounded ${variantStyles[variant]}`}
+      className={`flex items-center gap-1.5 px-3 py-1 ${fontSizeStyles[fontSize]} rounded ${variantStyles[variant]} ${variant === 'disabled' ? 'cursor-not-allowed' : 'cursor-pointer'}`}
       disabled={variant === 'disabled'}
     >
       {children}
diff --git a/web-interface/src/components/Card.tsx b/web-interface/src/components/Card.tsx
index 6715c1b..2c5d9fc 100644
--- a/web-interface/src/components/Card.tsx
+++ b/web-interface/src/components/Card.tsx
@@ -5,16 +5,18 @@ export function CardInfoField({
   label,
   value,
   link,
+  hash,
 }: {
   label: string
   value: string
   link?: string
+  hash?: string
 }) {
   return (
     <div>
       <div className="text-xs text-gray-500 font-medium">{label}</div>
       {link ? (
-        <Link to={link} className="text-sm text-accent underline">
+        <Link to={link} hash={hash} className="text-sm text-accent underline">
           {value}
         </Link>
       ) : (
@@ -24,16 +26,25 @@ export function CardInfoField({
   )
 }
 
+const headerStyles = {
+  default: '',
+  error: 'text-red-500',
+}
+
 export function CardHeader({
   header,
+  headerStyle,
   children,
 }: {
   header: string
+  headerStyle: keyof typeof headerStyles
   children: ReactNode
 }) {
   return (
     <div className="flex items-center justify-between mb-4">
-      <h2 className="text-lg font-bold">{header}</h2>
+      <h2 className={`text-lg font-bold ${headerStyles[headerStyle]}`}>
+        {header}
+      </h2>
       <div className="flex gap-2">
         {/* Actions */}
         {children}
@@ -42,6 +53,16 @@ export function CardHeader({
   )
 }
 
-export default function Card({ children }: { children: ReactNode }) {
-  return <div className="border border-gray-200 rounded-xl p-5">{children}</div>
+export default function Card({
+  children,
+  id,
+}: {
+  children: ReactNode
+  id?: string
+}) {
+  return (
+    <div id={id} className="border border-gray-200 rounded-xl p-5">
+      {children}
+    </div>
+  )
 }
diff --git a/web-interface/src/components/Chart.tsx b/web-interface/src/components/Chart.tsx
index e51da0b..21ce225 100644
--- a/web-interface/src/components/Chart.tsx
+++ b/web-interface/src/components/Chart.tsx
@@ -1,19 +1,15 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react'
-import type { UsageData } from '#/routes/jobs.tsx'
+import { useState } from 'react'
+import type { UsageData } from '#/types/job.ts'
+
+export default function Chart({ data }: { data: UsageData[] }) {
+  const [index, setIndex] = useState(0)
+  const numComponents = data.length
+
+  const handlePrev = () =>
+    setIndex((i) => (i - 1 + numComponents) % numComponents)
+  const handleNext = () => setIndex((i) => (i + 1) % numComponents)
 
-export default function Chart({
-  data,
-  index,
-  numComponents,
-  onPrev,
-  onNext,
-}: {
-  data: UsageData
-  index: number
-  numComponents: number
-  onPrev: () => void
-  onNext: () => void
-}) {
   const max = 100
   const width = 600
   const height = 180
@@ -24,8 +20,8 @@ export default function Chart({
   const chartW = width - padLeft - padRight
   const chartH = height - padTop - padBottom
 
-  const points = data.observations.map((val, i) => {
-    const x = padLeft + (i / (data.observations.length - 1)) * chartW
+  const points = data[index].observations.map((val, i) => {
+    const x = padLeft + (i / (data[index].observations.length - 1)) * chartW
     const y = padTop + chartH - (val / max) * chartH
     return `${x},${y}`
   })
@@ -58,11 +54,11 @@ export default function Chart({
   return (
     <div className="mt-4">
       <h3 className="text-center font-semibold text-sm mb-1">
-        {data.component}
+        {data[index].component}
       </h3>
       <div className="flex items-center gap-2">
         <button
-          onClick={onPrev}
+          onClick={handlePrev}
           className="text-gray-400 hover:text-main p-1"
           aria-label="Previous Component"
         >
@@ -121,7 +117,7 @@ export default function Chart({
           />
         </svg>
         <button
-          onClick={onNext}
+          onClick={handleNext}
           className="text-gray-400 hover:text-main p-1"
           aria-label="Next Component"
         >
diff --git a/web-interface/src/routes/jobs.tsx b/web-interface/src/routes/jobs.tsx
index 20292b1..627bafe 100644
--- a/web-interface/src/routes/jobs.tsx
+++ b/web-interface/src/routes/jobs.tsx
@@ -1,19 +1,163 @@
 import { createFileRoute } from '@tanstack/react-router'
 import Card, { CardHeader, CardInfoField } from '#/components/Card.tsx'
-import { useState } from 'react'
 import { Button } from '#/components/Buttons.tsx'
 import Chart from '#/components/Chart.tsx'
+import type { Job, UsageData } from '#/types/job.ts'
+import { format } from 'date-fns'
 
 export const Route = createFileRoute('/jobs')({
   component: JobsPage,
+  loader: loadJobs,
 })
 
-export type UsageData = {
-  component: string // Component that we observe. E.g. GPU, CPU, etc.
-  observations: number[]
+function loadJobs(): Job[] {
+  const jobs: Job[] = [
+    {
+      id: 'f3xkcd',
+      created: new Date('2026-03-01T22:32:00'),
+      accessed: new Date('2026-03-05T11:01:00'),
+      machine: {
+        id: 'tenstorrent_1',
+        purpose: 'Inference',
+        isAvailable: true,
+        gpu: 'TT-Blackhole',
+        cpu: 'TT-Ascalon',
+        diskUsage: '70GB/128GB (55%)',
+        cpuUsage: '95%',
+        ramUsage: '16.7GB/32GB (52%)',
+        network: {
+          down: '1.2 GB/s',
+          up: '340 MB/s',
+        },
+        ip: '11.22.33.44',
+        usageHistory: [
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+        ],
+      },
+      dockerImage: 'utmist/mpt-3.5-turbo',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'a1b2c3',
+      created: new Date('2026-03-01T22:32:00'),
+      accessed: new Date('2026-03-05T11:01:00'),
+      machine: {
+        id: 'tenstorrent_1',
+        purpose: 'Inference',
+        isAvailable: true,
+        gpu: 'TT-Blackhole',
+        cpu: 'TT-Ascalon',
+        diskUsage: '70GB/128GB (55%)',
+        cpuUsage: '95%',
+        ramUsage: '16.7GB/32GB (52%)',
+        network: {
+          down: '1.2 GB/s',
+          up: '340 MB/s',
+        },
+        ip: '11.22.33.44',
+        usageHistory: [
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+        ],
+      },
+      dockerImage: 'utmist/mpt-3.5-turbo',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'x9y8z7',
+      created: new Date('2026-03-01T22:32:00'),
+      accessed: new Date('2026-03-05T11:01:00'),
+      machine: {
+        id: 'tenstorrent_3',
+        purpose: 'Inference',
+        isAvailable: true,
+        gpu: 'TT-Blackhole',
+        cpu: 'TT-Ascalon',
+        diskUsage: '70GB/128GB (55%)',
+        cpuUsage: '95%',
+        ramUsage: '16.7GB/32GB (52%)',
+        network: {
+          down: '1.2 GB/s',
+          up: '340 MB/s',
+        },
+        ip: '11.22.33.44',
+        usageHistory: [
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+        ],
+      },
+      dockerImage: 'utmist/mpt-3.5-turbo',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'm4n5p6',
+      created: new Date('2026-03-01T22:32:00'),
+      accessed: new Date('2026-03-05T11:01:00'),
+      machine: {
+        id: 'tenstorrent_3',
+        purpose: 'Inference',
+        isAvailable: true,
+        gpu: 'TT-Blackhole',
+        cpu: 'TT-Ascalon',
+        diskUsage: '70GB/128GB (55%)',
+        cpuUsage: '95%',
+        ramUsage: '16.7GB/32GB (52%)',
+        network: {
+          down: '1.2 GB/s',
+          up: '340 MB/s',
+        },
+        ip: '11.22.33.44',
+        usageHistory: [
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+          generateSampleUsageData(),
+        ],
+      },
+      dockerImage: 'utmist/mpt-3.5-turbo',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+  ]
+
+  return jobs
 }
 
-function generateSampleUsageData(): UsageData {
+export function generateSampleUsageData(): UsageData {
   const components = ['GPU', 'CPU', 'RAM']
 
   return {
@@ -28,114 +172,6 @@ function generateSampleUsageData(): UsageData {
   }
 }
 
-export type Job = {
-  id: string
-  name: string
-  created: string
-  accessed: string
-  machine: string
-  gpu: string
-  cpu: string
-  dockerImage: string
-  ip: string
-  ram: string
-  diskUsage: string
-  cpuUtilization: string
-  networkIO: { down: string; up: string }
-  usageHistory: UsageData[]
-}
-
-const sampleJobs: Job[] = [
-  {
-    id: 'job-1',
-    name: 'f3xkcd',
-    created: '2026-03-01 10:32 PM',
-    accessed: '2026-03-05 11:01 AM',
-    machine: 'Tenstorrent_1',
-    gpu: 'TT-Blackhole',
-    cpu: 'TT-Ascalon',
-    dockerImage: 'utmist/mpt-3.5-turbo',
-    ip: '101.101.123.456',
-    ram: '32GB',
-    diskUsage: '70GB/128GB (55%)',
-    cpuUtilization: '95%',
-    networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
-    usageHistory: [
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-    ],
-  },
-  {
-    id: 'job-2',
-    name: 'f3xkcd',
-    created: '2026-03-01 10:32 PM',
-    accessed: '2026-03-05 11:01 AM',
-    machine: 'Tenstorrent_1',
-    gpu: 'TT-Blackhole',
-    cpu: 'TT-Ascalon',
-    dockerImage: 'utmist/mpt-3.5-turbo',
-    ip: '101.101.123.456',
-    ram: '32GB',
-    diskUsage: '70GB/128GB (55%)',
-    cpuUtilization: '95%',
-    networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
-    usageHistory: [
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-    ],
-  },
-  {
-    id: 'job-3',
-    name: 'f3xkcd',
-    created: '2026-03-01 10:32 PM',
-    accessed: '2026-03-05 11:01 AM',
-    machine: 'Tenstorrent_1',
-    gpu: 'TT-Blackhole',
-    cpu: 'TT-Ascalon',
-    dockerImage: 'utmist/mpt-3.5-turbo',
-    ip: '101.101.123.456',
-    ram: '32GB',
-    diskUsage: '70GB/128GB (55%)',
-    cpuUtilization: '95%',
-    networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
-    usageHistory: [
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-    ],
-  },
-  {
-    id: 'job-4',
-    name: 'f3xkcd',
-    created: '2026-03-01 10:32 PM',
-    accessed: '2026-03-05 11:01 AM',
-    machine: 'Tenstorrent_1',
-    gpu: 'TT-Blackhole',
-    cpu: 'TT-Ascalon',
-    dockerImage: 'utmist/mpt-3.5-turbo',
-    ip: '101.101.123.456',
-    ram: '32GB',
-    diskUsage: '70GB/128GB (55%)',
-    cpuUtilization: '95%',
-    networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
-    usageHistory: [
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-      generateSampleUsageData(),
-    ],
-  },
-]
-
 type JobCardProps = {
   job: Job
   onStart: (id: string) => void
@@ -151,17 +187,9 @@ function JobCard({
   onRestart,
   onDelete,
 }: JobCardProps) {
-  const [componentIndex, setComponentIndex] = useState(0)
-  const totalComponents = job.usageHistory.length
-
-  const prevComponent = () =>
-    setComponentIndex((i) => (i - 1 + totalComponents) % totalComponents)
-  const nextComponent = () =>
-    setComponentIndex((i) => (i + 1) % totalComponents)
-
   return (
-    <Card>
-      <CardHeader header={job.name}>
+    <Card id={job.id}>
+      <CardHeader header={job.id} headerStyle="default">
         <Button onClick={() => onStart(job.id)} variant="success" fontSize="xs">
           Start
         </Button>
@@ -186,30 +214,35 @@ function JobCard({
 
       {/* Info grid */}
       <div className="grid grid-cols-3 gap-x-6 gap-y-3">
-        <CardInfoField label="Created" value={job.created} />
-        <CardInfoField label="Machine" value={job.machine} link="#" />
-        <CardInfoField label="Disk Usage" value={job.diskUsage} />
-        <CardInfoField label="Accessed" value={job.accessed} />
-        <CardInfoField label="GPU" value={job.gpu} />
-        <CardInfoField label="CPU Utilization" value={job.cpuUtilization} />
+        <CardInfoField
+          label="Created"
+          value={format(job.created, 'yyyy-MM-dd hh:mm a')}
+        />
+        <CardInfoField
+          label="Machine"
+          value={job.machine.id}
+          link="/machines"
+          hash={job.machine.id}
+        />
+        <CardInfoField label="Disk Usage" value={job.machine.diskUsage} />
+        <CardInfoField
+          label="Accessed"
+          value={format(job.accessed, 'yyyy-MM-dd hh:mm a')}
+        />
+        <CardInfoField label="GPU" value={job.machine.gpu} />
+        <CardInfoField label="CPU Utilization" value={job.machine.cpuUsage} />
         <CardInfoField label="Docker Image" value={job.dockerImage} link="#" />
-        <CardInfoField label="CPU" value={job.cpu} />
+        <CardInfoField label="CPU" value={job.machine.cpu} />
         <CardInfoField
           label="Network I/O"
-          value={`↓ ${job.networkIO.down}  ↑ ${job.networkIO.up}`}
+          value={`↓ ${job.machine.network.down}  ↑ ${job.machine.network.up}`}
         />
-        <CardInfoField label="IP" value={job.ip} />
-        <CardInfoField label="RAM" value={job.ram} />
+        <CardInfoField label="IP" value={job.machine.ip} />
+        <CardInfoField label="RAM" value={job.machine.ramUsage} />
       </div>
 
       {/* Component Usage Chart */}
-      <Chart
-        data={job.usageHistory[componentIndex]}
-        index={componentIndex}
-        numComponents={totalComponents}
-        onPrev={prevComponent}
-        onNext={nextComponent}
-      />
+      <Chart data={job.usageHistory} />
     </Card>
   )
 }
@@ -235,10 +268,12 @@ function handleDelete(id: string) {
 }
 
 function JobsPage() {
+  const jobs = Route.useLoaderData()
+
   return (
     <div className="px-16 py-8">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
-        {sampleJobs.map((job) => (
+        {jobs.map((job) => (
           <JobCard
             key={job.id}
             job={job}
diff --git a/web-interface/src/routes/machines.tsx b/web-interface/src/routes/machines.tsx
index 90f219c..fe47a00 100644
--- a/web-interface/src/routes/machines.tsx
+++ b/web-interface/src/routes/machines.tsx
@@ -1,9 +1,479 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'
+import type { Machine } from '#/types/machine.ts'
+import Card, { CardHeader, CardInfoField } from '#/components/Card.tsx'
+import { Button } from '#/components/Buttons.tsx'
+import Chart from '#/components/Chart.tsx'
+import { generateSampleUsageData } from '#/routes/jobs.tsx'
+import { format } from 'date-fns'
 
 export const Route = createFileRoute('/machines')({
   component: RouteComponent,
+  loader: loadMachines,
 })
 
+function loadMachines(): Machine[] {
+  // TODO: Implement actual API calling. For now we just return sample data
+
+  const machines: Machine[] = [
+    {
+      id: 'tenstorrent_1',
+      purpose: 'Inference',
+      isAvailable: true,
+      gpu: 'TT-Blackhole',
+      cpu: 'TT-Ascalon',
+      jobs: [
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+      ],
+      diskUsage: '70GB/128GB (55%)',
+      cpuUsage: '95%',
+      ramUsage: '16.7GB/32GB (52%)',
+      network: {
+        down: '1.2 GB/s',
+        up: '340 MB/s',
+      },
+      ip: '11.22.33.44',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'tenstorrent_2',
+      purpose: 'Inference',
+      isAvailable: true,
+      gpu: 'TT-Blackhole',
+      cpu: 'TT-Ascalon',
+      jobs: [],
+      diskUsage: '23GB/128GB (55%)',
+      cpuUsage: '5%',
+      ramUsage: '6.7GB/32GB (52%)',
+      network: {
+        down: '5 GB/s',
+        up: '32 MB/s',
+      },
+      ip: '11.22.33.45',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'tenstorrent_3',
+      purpose: 'Inference',
+      isAvailable: true,
+      gpu: 'TT-Blackhole',
+      cpu: 'TT-Ascalon',
+      jobs: [
+        {
+          id: 'm4n5p6',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'x9y8z7',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+      ],
+      diskUsage: '70GB/128GB (55%)',
+      cpuUsage: '95%',
+      ramUsage: '16.7GB/32GB (52%)',
+      network: {
+        down: '1.2 GB/s',
+        up: '340 MB/s',
+      },
+      ip: '11.22.33.44',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'tenstorrent_4',
+      purpose: 'Training',
+      isAvailable: false,
+      gpu: 'TT-Blackhole',
+      cpu: 'TT-Ascalon',
+      jobs: [
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+      ],
+      diskUsage: '70GB/128GB (55%)',
+      cpuUsage: '95%',
+      ramUsage: '16.7GB/32GB (52%)',
+      network: {
+        down: '1.2 GB/s',
+        up: '340 MB/s',
+      },
+      ip: '11.22.33.44',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'tenstorrent_5',
+      purpose: 'Training',
+      isAvailable: true,
+      gpu: 'TT-Blackhole',
+      cpu: 'TT-Ascalon',
+      jobs: [
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+      ],
+      diskUsage: '70GB/128GB (55%)',
+      cpuUsage: '95%',
+      ramUsage: '16.7GB/32GB (52%)',
+      network: {
+        down: '1.2 GB/s',
+        up: '340 MB/s',
+      },
+      ip: '11.22.33.44',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+    {
+      id: 'tenstorrent_6',
+      purpose: 'Inference',
+      isAvailable: false,
+      gpu: 'TT-Blackhole',
+      cpu: 'TT-Ascalon',
+      jobs: [
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+        {
+          id: 'f3xkcd',
+          created: new Date('2026-03-01T22:32:00'),
+          accessed: new Date('2026-03-05T11:01:00'),
+          dockerImage: 'utmist/mpt-3.5-turbo',
+          usageHistory: [
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+            generateSampleUsageData(),
+          ],
+        },
+      ],
+      diskUsage: '70GB/128GB (55%)',
+      cpuUsage: '95%',
+      ramUsage: '16.7GB/32GB (52%)',
+      network: {
+        down: '1.2 GB/s',
+        up: '340 MB/s',
+      },
+      ip: '11.22.33.44',
+      usageHistory: [
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+        generateSampleUsageData(),
+      ],
+    },
+  ]
+
+  return machines
+}
+
+function MachineCard({
+  machine,
+  onProvision,
+}: {
+  machine: Machine
+  onProvision: (machineId: string) => void
+}) {
+  return (
+    <Card id={machine.id}>
+      <CardHeader
+        header={machine.id}
+        headerStyle={machine.isAvailable ? 'default' : 'error'}
+      >
+        <Button
+          onClick={() => onProvision(machine.id)}
+          variant="normal"
+          fontSize="xs"
+        >
+          Provision
+        </Button>
+      </CardHeader>
+
+      {/* Info grid */}
+      <div className="grid grid-cols-3">
+        <div className="grid grid-rows-4 gap-y-3">
+          <CardInfoField label="Purpose" value={machine.purpose} />
+          <CardInfoField label="GPU" value={machine.gpu} />
+          <CardInfoField label="CPU" value={machine.cpu} />
+          <CardInfoField
+            label="Number of Jobs"
+            value={machine.jobs.length.toString()}
+          />
+        </div>
+        <div className="grid grid-rows-4 gap-y-3">
+          <CardInfoField label="CPU Utilization" value={machine.cpuUsage} />
+          <CardInfoField label="RAM" value={machine.ramUsage} />
+          <CardInfoField label="Disk Usage" value={machine.diskUsage} />
+          <CardInfoField
+            label="Network I/O"
+            value={`↓ ${machine.network.down}  ↑ ${machine.network.up}`}
+          />
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex flex-col">
+            <h3 className="m-auto">Jobs</h3>
+
+            <div className="overflow-y-auto flex-1">
+              <table className="table-fixed w-full">
+                <thead>
+                  <tr className="border-b-gray-400 border-b">
+                    <th className="text-sm text-left py-1">ID</th>
+                    <th className="text-sm text-left py-1">Accessed</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {machine.jobs.map((job) => (
+                    <tr key={job.id} className="border-b-gray-400 border-b">
+                      <td className="text-sm py-1">
+                        <Link
+                          to="/jobs"
+                          hash={job.id}
+                          className="text-accent underline"
+                        >
+                          {job.id}
+                        </Link>
+                      </td>
+                      <td className="text-sm py-1">
+                        {format(job.accessed, 'yyyy-MM-dd')}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Component Usage Chart */}
+      <Chart data={machine.usageHistory} />
+    </Card>
+  )
+}
+
 function RouteComponent() {
-  return <div>Hello "/machines"!</div>
+  function handleProvision(machineId: string) {
+    // TODO: Implement
+    console.log(`Provisioned ${machineId}`)
+  }
+
+  const machines = Route.useLoaderData()
+
+  return (
+    <div className="px-16 py-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
+        {machines.map((machine) => (
+          <MachineCard
+            key={machine.id}
+            machine={machine}
+            onProvision={handleProvision}
+          />
+        ))}
+      </div>
+    </div>
+  )
 }
diff --git a/web-interface/src/types/job.ts b/web-interface/src/types/job.ts
new file mode 100644
index 0000000..4737778
--- /dev/null
+++ b/web-interface/src/types/job.ts
@@ -0,0 +1,16 @@
+import type { BaseMachine } from '#/types/machine.ts'
+
+export type BaseJob = {
+  id: string
+  created: Date
+  accessed: Date
+  dockerImage: string
+  usageHistory: UsageData[] // the usage of the resources of the machine allocated to this specific job
+}
+
+export type UsageData = {
+  component: string // Component that we observe. E.g. GPU, CPU, etc.
+  observations: number[]
+}
+
+export type Job = BaseJob & { machine: BaseMachine }
diff --git a/web-interface/src/types/machine.ts b/web-interface/src/types/machine.ts
new file mode 100644
index 0000000..78d92ea
--- /dev/null
+++ b/web-interface/src/types/machine.ts
@@ -0,0 +1,17 @@
+import type { BaseJob, UsageData } from '#/types/job.ts'
+
+export type BaseMachine = {
+  id: string
+  isAvailable: boolean
+  purpose: string
+  gpu: string
+  cpu: string
+  diskUsage: string
+  ramUsage: string
+  cpuUsage: string
+  network: { down: string; up: string }
+  ip: string
+  usageHistory: UsageData[] // the usage of the total machine resources
+}
+
+export type Machine = BaseMachine & { jobs: BaseJob[] }