diff --git a/packages/core/plugins.ts b/packages/core/plugins.ts
index 65ff7bbf..a2f8bba5 100644
--- a/packages/core/plugins.ts
+++ b/packages/core/plugins.ts
@@ -2,7 +2,7 @@ import plugin from 'tailwindcss/plugin';
 import type { OptionalConfig } from 'tailwindcss/types/config';
 
 export const plugins = [
-  plugin(({ addUtilities, matchUtilities, theme }) => {
+  plugin(({ addUtilities, matchUtilities, theme, addComponents }) => {
     addUtilities({
       '.scrollbar-thin': {
         'scrollbar-width': 'thin',
@@ -317,5 +317,30 @@ export const plugins = [
       },
       { values: theme('cursor') }
     );
+
+    /* Table style guide with custom classes */
+    addComponents({
+      '.grid-container': {
+        '@apply w-full min-w-[1200px] border border-b-0 border-light text-sm':
+          {},
+      },
+      '.table-header': {
+        '@apply h-8 bg-light text-xs': {},
+      },
+      '.table-header-cell': {
+        '@apply h-8 min-h-0 content-center items-center border-b border-light p-2 text-subtle-1 whitespace-normal break-words':
+          {},
+      },
+      '.table-cell': {
+        '@apply min-h-12 content-center items-center border-b border-light p-2 whitespace-normal break-words':
+          {},
+      },
+      '.table-cell-link': {
+        '@apply flex h-full w-full items-center hover:underline': {},
+      },
+      '.table-cell-flex': {
+        '@apply flex items-center gap-2 flex-wrap': {},
+      },
+    });
   }),
 ] satisfies OptionalConfig['plugins'];
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index 3fbe6f95..9eeec169 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -26,12 +26,6 @@ import {
   RestrictedTextInput,
   SliderInput,
   VectorInput,
-  Table,
-  TableBody,
-  TableCell,
-  TableHeaderCell,
-  TableHeader,
-  TableRow,
   ToastBanner,
   ToastContainer,
   ToastVariant,
@@ -537,6 +531,7 @@ const onHoverDelayMsInput = (event: Event) => {
   <Breadcrumbs crumbs={['Chocolate Chip', 'Oatmeal Raisin']} />
 
   <!-- Progress -->
+  <h1 class="text-2xl">Progress</h1>
   <Progress size="small" />
   <Progress size="medium" />
   <Progress size="large" />
@@ -544,13 +539,13 @@ const onHoverDelayMsInput = (event: Event) => {
   <!-- Button -->
   <h1 class="text-2xl">Button</h1>
 
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <Button on:click={() => (buttonClickedTimes += 1)}>
       Clicked {buttonClickedTimes} times!
     </Button>
   </div>
 
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <Button>Primary</Button>
     <Button
       disabled
@@ -568,7 +563,7 @@ const onHoverDelayMsInput = (event: Event) => {
     <Button variant="outline-danger">Outline Danger</Button>
   </div>
 
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <Button icon="camera-outline">Primary</Button>
     <Button
       disabled
@@ -916,7 +911,7 @@ const onHoverDelayMsInput = (event: Event) => {
     />
   </div>
 
-  <!-- Restricted Text Input -->
+  <!-- Restricted Text Input: TO BE REMOVED -->
   <h2 class="text-xl">Restricted Text Input</h2>
 
   <div class="flex gap-4">
@@ -1045,7 +1040,7 @@ const onHoverDelayMsInput = (event: Event) => {
 
   <!-- Label -->
   <h1 class="text-2xl">Label</h1>
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <Label>
       Default
       <Input
@@ -1168,7 +1163,7 @@ const onHoverDelayMsInput = (event: Event) => {
 
   <!-- Pill -->
   <h1 class="text-2xl">Pill</h1>
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <Pill />
     <Pill value="Foo" />
     <Pill
@@ -1591,36 +1586,550 @@ const onHoverDelayMsInput = (event: Event) => {
     </Switch>
   </div>
 
-  <!-- Table -->
+  <!-- table using <ul> -->
   <h1 class="text-2xl">Table</h1>
-  <Table cols={['10%', '90%']}>
-    <TableHeader>
-      <TableHeaderCell
-        >headerheaderheader (mario underwater theme)</TableHeaderCell
+  <div class="max-w-full overflow-x-auto">
+    <ul
+      role="table"
+      class="grid-container grid gap-0"
+    >
+      <!-- Header Row -->
+      <li
+        role="row"
+        class="table-header grid grid-cols-[16%_13%_10%_16%_20%_20%_auto]"
+      >
+        <span
+          role="columnheader"
+          class="table-header-cell">Text w/ link</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Text w/o link</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Mono text</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Pill</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Tag</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Breadcrumbs</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Icon</span
+        >
+      </li>
+
+      <!-- Data Row 1 -->
+      <li
+        role="row"
+        class=" grid grid-cols-[16%_13%_10%_16%_20%_20%_auto]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="a link">machine-name</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell">1/22/2025</span
+        >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="font-roboto-mono text-link">0.3.4</span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <Pill
+            value="my-machine-123"
+            icon="multiplication-box"
+            removable={false}
+          />
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="table-cell-flex">
+            <Pill
+              value="something.txt"
+              removable={true}
+            />
+            <Pill
+              value="labels.txt"
+              removable={true}
+            />
+          </span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <Breadcrumbs crumbs={['module']} />
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <IconButton
+            label="close"
+            icon="close"
+          />
+        </span>
+      </li>
+
+      <!-- Data Row 2 -->
+      <li
+        role="row"
+        class=" grid grid-cols-[16%_13%_10%_16%_20%_20%_auto]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="a link">machine-name</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell">viam-dev</span
+        >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="font-roboto-mono text-link">0.3.4</span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <Pill
+            value="my-machine-123"
+            icon="multiplication-box"
+            removable={false}
+          />
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="table-cell-flex">
+            <Pill
+              value="something.txt"
+              removable={false}
+            />
+            <Pill
+              value="another.txt"
+              removable={false}
+            />
+          </span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="table-cell-flex">
+            <Breadcrumbs crumbs={['encoder']} />
+            <Breadcrumbs crumbs={['camera']} />
+          </span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <IconButton
+            label="dots-horizontal"
+            icon="dots-horizontal"
+          />
+        </span>
+      </li>
+      <li
+        role="row"
+        class=" grid grid-cols-[16%_13%_10%_16%_20%_20%_auto]"
       >
-      <TableHeaderCell>Another header</TableHeaderCell>
-    </TableHeader>
-    <TableBody cx="text-center">
-      <TableRow>
-        <TableCell
-          >the mitochondria is the powerhouse of the tablecell</TableCell
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="a link">machine-name</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell">viam-dev</span
+        >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="font-roboto-mono text-link">0.3.4</span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          testing
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
         >
-        <TableCell>stuffs</TableCell>
-      </TableRow>
-      <TableRow variant="success">
-        <TableCell>stuff</TableCell>
-        <TableCell>stuffs</TableCell>
-      </TableRow>
-      <TableRow variant="error">
-        <TableCell>stuff</TableCell>
-        <TableCell>stuffs</TableCell>
-      </TableRow>
-      <TableRow variant="disabled">
-        <TableCell>stuff</TableCell>
-        <TableCell>stuffs</TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+          <span class="table-cell-flex"> min </span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="table-cell-flex"> width </span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- example table design guide for all machines dashboard -->
+  <h1 class="text-xl">Example: All machines dashboard</h1>
+
+  <div class="max-w-full overflow-x-auto">
+    <ul
+      role="table"
+      class="grid-container grid gap-0"
+    >
+      <!-- header row -->
+      <li
+        role="row"
+        class=" table-header grid grid-cols-[11%_12%_12%_12.5%_15%_12.5%_12.5%_12.5%]"
+      >
+        <span
+          role="columnheader"
+          class="table-header-cell">Location</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Machine</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Part</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Fragments</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Status</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Viam server version</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Viam agent version</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Architecture</span
+        >
+      </li>
+
+      <!-- data row 1 -->
+      <li
+        role="row"
+        class="grid grid-cols-[11%_12%_12%_12.5%_15%_12.5%_12.5%_12.5%]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <Pill
+            value="officetemp"
+            icon="domain"
+            removable={false}
+          />
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <Pill
+            value="1"
+            icon="broadcast"
+            removable={false}
+          />
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <Pill
+            value="1-main"
+            icon="multiplication-box"
+            removable={false}
+          />
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <Pill
+            value="microtemp"
+            icon="viam-fragment"
+            removable={false}
+          />
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            href="/"
+            class="group flex items-center gap-1 hover:underline"
+          >
+            <span class="shrink-0"><Icon name="broadcast" /> </span>
+            <span> Awaiting setup </span>
+            <Icon
+              name="open-in-new"
+              cx="shrink-0 text-gray-6 group-hover:text-gray-7"
+            />
+          </a>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <span class="font-roboto-mono text-link">0.3.4</span>
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          -
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          Darwin > Arm64
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- example table design guide for all machines dashboard -->
+  <h1 class="text-xl">Example: Teleop workspaces</h1>
+
+  <div class="max-w-full overflow-x-auto">
+    <ul
+      role="table"
+      class="grid-container grid gap-0"
+    >
+      <!-- header row -->
+      <li
+        role="row"
+        class=" table-header grid grid-cols-[60%_1fr_auto]"
+      >
+        <span
+          role="columnheader"
+          class="table-header-cell">Name</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell">Last edited</span
+        >
+        <span
+          role="columnheader"
+          class="table-header-cell"
+        ></span>
+      </li>
+
+      <!-- data row 1 -->
+      <li
+        role="row"
+        class="grid grid-cols-[60%_1fr_auto]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="https://app.viam.com/teleop/679a5a2df41212a99dec7168"
+            >av-pi4-beye</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          1/29/2025
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <IconButton
+            label="dots-horizontal"
+            icon="dots-horizontal"
+          />
+        </span>
+      </li>
+
+      <!-- data row 2 -->
+      <li
+        role="row"
+        class="grid grid-cols-[60%_1fr_auto]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="https://app.viam.com/teleop/679a5a2df41212a99dec7168"
+            >1900 Broadway 6 Floor Temperature Sensors</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          1/22/2025
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <IconButton
+            label="dots-horizontal"
+            icon="dots-horizontal"
+          />
+        </span>
+      </li>
+
+      <!-- data row 3 -->
+      <li
+        role="row"
+        class="grid grid-cols-[60%_1fr_auto]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="https://app.viam.com/teleop/679a5a2df41212a99dec7168"
+            >bend air quality</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          1/22/2025
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <IconButton
+            label="dots-horizontal"
+            icon="dots-horizontal"
+          />
+        </span>
+      </li>
+
+      <!-- data row 4 -->
+      <li
+        role="row"
+        class="grid grid-cols-[60%_1fr_auto]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="https://app.viam.com/teleop/679a5a2df41212a99dec7168"
+            >untitled-workspace 5</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          1/22/2025
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <IconButton
+            label="dots-horizontal"
+            icon="dots-horizontal"
+          />
+        </span>
+      </li>
+
+      <!-- data row 5 -->
+      <li
+        role="row"
+        class="grid grid-cols-[60%_1fr_auto]"
+      >
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <a
+            class="table-cell-link"
+            href="https://app.viam.com/teleop/679a5a2df41212a99dec7168"
+            >🚢 air quality</a
+          >
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          1/22/2025
+        </span>
+        <span
+          role="cell"
+          class="table-cell"
+        >
+          <IconButton
+            label="dots-horizontal"
+            icon="dots-horizontal"
+          />
+        </span>
+      </li>
+    </ul>
+  </div>
 
   <!-- Tabs -->
   <h1 class="text-2xl">Tabs</h1>
@@ -1683,7 +2192,7 @@ const onHoverDelayMsInput = (event: Event) => {
   <!-- Toast Banner -->
   <h1 class="text-2xl">Toast Banner</h1>
 
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <ToastBanner
       message="Test Message"
       variant={ToastVariant.Success}
@@ -1720,7 +2229,7 @@ const onHoverDelayMsInput = (event: Event) => {
       }}
     />
   </div>
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <ToastBanner
       message="Test Message"
       variant={ToastVariant.Success}
@@ -1791,7 +2300,7 @@ const onHoverDelayMsInput = (event: Event) => {
   <!-- Toast Container -->
   <h1 class="text-2xl">Toast Container</h1>
 
-  <div class="flex gap-4">
+  <div class="flex max-w-full gap-4 overflow-x-auto">
     <ToastContainer />
     <div>
       <Button
@@ -1834,7 +2343,7 @@ const onHoverDelayMsInput = (event: Event) => {
   <!-- Toggle Buttons -->
   <h1 class="text-2xl">Toggle Buttons</h1>
 
-  <div class="flex items-end gap-4">
+  <div class="flex max-w-full items-end gap-4 overflow-x-auto">
     <ToggleButtons
       options={['Opt 1', 'Opt 2', 'Opt 3']}
       selected={toggleButtonSelecteds[0]}
@@ -1870,7 +2379,7 @@ const onHoverDelayMsInput = (event: Event) => {
 
   <!-- Tooltip -->
   <h1 class="text-2xl">Tooltip</h1>
-  <div class="flex flex-wrap items-start gap-4">
+  <div class="flex max-w-full flex-wrap items-start gap-4 overflow-x-auto">
     <Tooltip let:tooltipID>
       <p aria-describedby={tooltipID}>This element has a top tooltip.</p>
       <p slot="description">