diff --git a/package-lock.json b/package-lock.json
index 7ecbed8684..e7e847b45b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "temporal-ui",
       "version": "0.0.1",
       "dependencies": {
+        "@sveltejs/svelte-virtual-list": "^3.0.1",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "date-fns": "^2.23.0",
         "json-beautify": "^1.1.1",
@@ -1294,6 +1295,11 @@
         "svelte": "^3.44.0"
       }
     },
+    "node_modules/@sveltejs/svelte-virtual-list": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
+      "integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ=="
+    },
     "node_modules/@sveltejs/vite-plugin-svelte": {
       "version": "1.0.0-next.30",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.30.tgz",
@@ -10649,6 +10655,11 @@
         "vite": "^2.6.10"
       }
     },
+    "@sveltejs/svelte-virtual-list": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
+      "integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ=="
+    },
     "@sveltejs/vite-plugin-svelte": {
       "version": "1.0.0-next.30",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.30.tgz",
diff --git a/package.json b/package.json
index cf0cfd8c9f..d8dbc15fe3 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "cypress:open": "TEMPORAL_API_HOST=http://localhost:3000 cypress open"
   },
   "dependencies": {
+    "@sveltejs/svelte-virtual-list": "^3.0.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "date-fns": "^2.23.0",
     "json-beautify": "^1.1.1",
diff --git a/src/routes/namespaces/[namespace]/workflows/_workflows-summary-row.svelte b/src/routes/namespaces/[namespace]/workflows/_workflows-summary-row.svelte
index 0484b08b2c..b4a694850c 100644
--- a/src/routes/namespaces/[namespace]/workflows/_workflows-summary-row.svelte
+++ b/src/routes/namespaces/[namespace]/workflows/_workflows-summary-row.svelte
@@ -2,9 +2,7 @@
   import type { WorkflowExecution } from '$lib/models/workflow-execution';
 
   import { namespace } from '$lib/stores/namespace';
-  import { page } from '$app/stores';
   import { getWorkflowExecutionUrl } from '$lib/utilities/get-workflow-execution-url';
-  import { pathMatches } from '$lib/utilities/path-matches';
   import Time from '$lib/components/workflow-time.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
 
@@ -12,73 +10,42 @@
   export let timeFormat: string;
 
   $: href = getWorkflowExecutionUrl($namespace, workflow);
-  $: isActive = pathMatches(href, $page.path);
 </script>
 
-<tr class:active={isActive}>
-  <td class="">
-    <a sveltekit:noscroll {href}>
+<a sveltekit:noscroll {href}>
+  <article class="row flex flex-row border-b-2">
+    <div class="links w-3/12 text-left">
+      {workflow.id}
+    </div>
+    <div class="links w-3/12 text-left">
       <h3>
         {workflow.name}
       </h3>
-    </a>
-  </td>
-  <td>
-    <a sveltekit:noscroll {href}>
-      <p>
-        {workflow.id}
-        <!-- / <span class="run-id">{workflow.runId}</span> -->
-      </p></a
-    >
-  </td>
-  <td>
-    <a sveltekit:noscroll {href}>
-      <div class={`flex justify-center  `}>
+    </div>
+    <div class="w-3/12 text-left">
+      <div>
         <WorkflowStatus status={workflow.status} />
       </div>
-    </a>
-  </td>
-  <td>
-    <a sveltekit:noscroll {href} class="font-mono text-right">
+    </div>
+    <div class="w-2/12 text-left">
       <Time time={workflow.startTime} {timeFormat} />
-    </a>
-  </td>
-  <td>
-    <a sveltekit:noscroll {href} class="font-mono text-right">
+    </div>
+    <div class="w-2/12 text-left">
       <Time time={workflow.endTime} {timeFormat} />
-    </a>
-  </td>
-</tr>
+    </div>
+  </article>
+</a>
 
 <style lang="postcss">
-  p {
-    @apply m-0 text-gray-500 text-sm;
+  .row {
+    @apply w-full h-full flex no-underline p-2;
   }
 
-  tr {
-    @apply bg-gray-50;
+  .row:hover {
+    @apply bg-green-100;
   }
 
-  tr:hover {
-    @apply bg-gray-100;
-  }
-
-  td {
-    @apply p-0;
-  }
-
-  a {
-    @apply w-full h-full block no-underline p-2;
-  }
-
-  .active {
-    @apply bg-yellow-200;
-  }
-
-  .active:hover {
-    @apply bg-yellow-200;
-  }
-  .run-id {
-    font-size: 0.5rem;
+  .row:hover .links {
+    @apply underline text-blue-500;
   }
 </style>
diff --git a/src/routes/namespaces/[namespace]/workflows/_workflows-summary-table.svelte b/src/routes/namespaces/[namespace]/workflows/_workflows-summary-table.svelte
index 6f8f70c2d6..8c0696871d 100644
--- a/src/routes/namespaces/[namespace]/workflows/_workflows-summary-table.svelte
+++ b/src/routes/namespaces/[namespace]/workflows/_workflows-summary-table.svelte
@@ -1,18 +1,20 @@
-<table class="border-collapse w-full">
-  <thead>
-    <tr class="bg-gray-200">
-      <th class="w-3/12 text-left ">Workflow Name</th>
-      <th class="w-3/12 text-left">Workflow ID</th>
-      <th class="w-1/12">Status</th>
-      <th class="w-2/12 text-right">Started</th>
-      <th class="w-2/12 text-right">Ended</th>
-    </tr>
-  </thead>
-  <slot name="rows" />
-</table>
+<section
+  class="workflow-table border-collapse border-2 border-gray-300 overflow-hidden w-full rounded-lg"
+>
+  <div class="bg-gray-200 flex flex-row p-2">
+    <div class="w-3/12 text-left">Workflow ID</div>
+    <div class="w-3/12 text-left">Type</div>
+    <div class="w-3/12 text-left">Status</div>
+    <div class="w-2/12 text-left">Started</div>
+    <div class="w-2/12 text-left">End</div>
+  </div>
+  <slot />
+</section>
 
+<!--  this style is mainly for keeping the height a certain level so the scroll
+will feel more natural | may need revisions -->
 <style lang="postcss">
-  th {
-    @apply bg-gray-200 text-gray-500 text-xs h-6 m-0 p-3 uppercase table-fixed;
+  .workflow-table {
+    height: calc(100vh - 25%);
   }
 </style>
diff --git a/src/routes/namespaces/[namespace]/workflows/index.svelte b/src/routes/namespaces/[namespace]/workflows/index.svelte
index fae9904194..4077607c11 100644
--- a/src/routes/namespaces/[namespace]/workflows/index.svelte
+++ b/src/routes/namespaces/[namespace]/workflows/index.svelte
@@ -29,6 +29,7 @@
   import WorkflowFilters from './_workflow-filters.svelte';
   import WorkflowsEmptyState from './_workflows-empty.svelte';
   import WorkflowsLoadingState from './_workflows-loading.svelte';
+  import VirtualList from '@sveltejs/svelte-virtual-list';
 
   export let namespace: string;
   export let initialData: ReturnType<typeof fetchAllWorkflows>;
@@ -48,11 +49,9 @@
   {:then { workflows }}
     {#if workflows.length}
       <WorkflowsSummaryTable>
-        <tbody slot="rows">
-          {#each workflows as workflow}
-            <WorkflowsSummaryRow {workflow} {timeFormat} />
-          {/each}
-        </tbody>
+        <VirtualList items={workflows} let:item>
+          <WorkflowsSummaryRow workflow={item} {timeFormat} />
+        </VirtualList>
       </WorkflowsSummaryTable>
     {:else}
       <WorkflowsEmptyState />