diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..85a4eeae
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "svelteSortOrder": "options-styles-scripts-markup",
+  "svelteStrictMode": true,
+  "svelteBracketNewLine": false,
+  "svelteAllowShorthand": false,
+  "svelteIndentScriptAndStyle": false
+}
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 01c0070f..00000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-    "recommendations": [
-        "2gua.rainbow-brackets",
-        "christian-kohler.npm-intellisense",
-        "remimarsal.prettier-now",
-        "svelte.svelte-vscode",
-        "lokalise.i18n-ally",
-        "fivethree.vscode-svelte-snippets",
-        "voorjaar.windicss-intellisense"
-    ],
-    "unwantedRecommendations": [
-        "antfu.i18n-ally"
-    ]
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index bc4024db..dde8cc58 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,13 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"devDependencies": {
-		"check-password-strength": "2.0.2",
 		"@odit/lfk-client-js": "0.10.1",
 		"@odit/license-exporter": "0.0.11",
 		"@sveltejs/vite-plugin-svelte": "1.0.0-next.5",
 		"@types/html-minifier": "4.0.0",
 		"auto-changelog": "2.2.1",
 		"autoprefixer": "10.2.5",
+		"check-password-strength": "2.0.2",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
 		"html-minifier": "4.0.0",
@@ -28,6 +28,7 @@
 		"svelte-i18n": "3.3.9",
 		"svelte-preprocess": "4.7.0",
 		"svelte-select": "3.17.0",
+		"svelte-tiny-virtual-list": "^1.1.5",
 		"tailwindcss": "2.0.4",
 		"tinro": "0.6.1",
 		"toastify-js": "1.10.0",
@@ -52,5 +53,8 @@
 		"hooks": {
 			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.html && node order.js  && git add src/locales"
 		}
+	},
+	"dependencies": {
+		"svelte-infinite-loading": "^1.3.6"
 	}
 }
diff --git a/src/components/cards/CardsOverview.svelte b/src/components/cards/CardsOverview.svelte
index d5cabea8..48433970 100644
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
+  import InfiniteLoading from 'svelte-infinite-loading';
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
@@ -11,11 +12,20 @@
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
+  $: filtered_cards = current_cards.filter(function (c) {
+    if (
+      c.code.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      c.runner?.firstname.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      c.runner?.middlename.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      c.runner?.lastname.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      should_display_based_on_id(c.id)
+    ) {
+      return true;
+    }
+  });
   $: searchvalue = "";
   $: active_deletes = [];
-  $: cards_show = current_cards.some(
-    (r) => r.is_selected === true
-  );
+  $: cards_show = current_cards.some((r) => r.is_selected === true);
   $: generate_cards = current_cards.filter((r) => r.is_selected === true);
   const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
     (val) => {
@@ -46,8 +56,39 @@
     original_data = Object.assign(original_data, card);
     edit_modal_open = true;
   }
+// -----------------
+  export let wrapperHeight = "500px";
+  export let wrapperWidth = "1000px";
+  let scrollTop = 0;
+  $: rendered = filtered_cards;
+  let innerHeight = 0;
+  let ele;
+  $: updateSlice(scrollTop);
+  $: innerHeight = `${filtered_cards.length * 25}px`;
+  $: if (ele) updateSlice();
+  function updateSlice() {
+    const height = ele ? parseInt(ele.clientHeight) : 100;
+    const init = scrollTop / 25;
+    const end = Math.ceil((scrollTop + height) / 25);
+    rendered = filtered_cards.slice(init, end + 15);
+  }
+  function updateScroll($event) {
+    scrollTop = $event.target.scrollTop;
+  }
 </script>
 
+<style>
+  .virtual-wrapper {
+    overflow-y: scroll;
+    margin: 0 auto;
+  }
+  .inner-wrapper {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+</style>
+
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
   <CardDetailModal
     bind:current_cards
@@ -80,6 +121,7 @@
             bind:cards_show
             bind:generate_cards />
         </div>
+        {rendered.length}
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
@@ -122,106 +164,115 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each current_cards as card}
-              {#if card.code
-                .toLowerCase()
-                .includes(
-                  searchvalue.toLowerCase()
-                ) || card.runner?.firstname
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || card.runner?.middlename
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || card.runner?.lastname
-                  .toLowerCase()
-                  .includes(
-                    searchvalue.toLowerCase()
-                  ) || should_display_based_on_id(card.id)}
-                <tr data-rowid="card_{card.id}">
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <input
-                      bind:checked={card.is_selected}
-                      type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">{card.code}</div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      {#if card.runner}
-                        <a
-                          href="../runners/{card.runner.id}"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
-                          {card.runner.middlename || ''}
-                          {card.runner.lastname}</a>
-                      {:else}{$_('non-blanko')}{/if}
-                    </div>
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    <div class="flex items-center">
-                      {#if card.enabled}
-                        <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
-                      {:else}
-                        <span
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
-                      {/if}
-                    </div>
-                  </td>
+            <!-- //// -->
+            <div
+  class="virtual-wrapper"
+  on:scroll={updateScroll}
+  style="height: {wrapperHeight}; width: {wrapperWidth}"
+  bind:this={ele}>
+  <div class="inner-wrapper" style="height: {innerHeight}">
+    {#each filtered_cards as card, index}
+    {#if card.code
+      .toLowerCase()
+      .includes(
+        searchvalue.toLowerCase()
+      ) || card.runner?.firstname
+        .toLowerCase()
+        .includes(
+          searchvalue.toLowerCase()
+        ) || card.runner?.middlename
+        .toLowerCase()
+        .includes(
+          searchvalue.toLowerCase()
+        ) || card.runner?.lastname
+        .toLowerCase()
+        .includes(
+          searchvalue.toLowerCase()
+        ) || should_display_based_on_id(card.id)}
+      <tr data-rowid="card_{card.id}">
+        <td class="px-6 py-4 whitespace-nowrap">
+          <input
+            bind:checked={card.is_selected}
+            type="checkbox"
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap">
+          <div class="flex items-center">{card.code}</div>
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap">
+          <div class="flex items-center">
+            {#if card.runner}
+              <a
+                href="../runners/{card.runner.id}"
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
+                {card.runner.middlename || ''}
+                {card.runner.lastname}</a>
+            {:else}{$_('non-blanko')}{/if}
+          </div>
+        </td>
+        <td class="px-6 py-4 whitespace-nowrap">
+          <div class="flex items-center">
+            {#if card.enabled}
+              <span
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
+            {:else}
+              <span
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
+            {/if}
+          </div>
+        </td>
 
-                  {#if active_deletes[card.id] === true}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          active_deletes[card.id] = false;
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-                      <button
-                        on:click={() => {
-                          RunnerCardService.runnerCardControllerRemove(card.id, false).then(
-                            (resp) => {
-                              current_cards = current_cards.filter(
-                                (obj) => obj.id !== card.id
-                              );
-                              Toastify({
-                                text: $_('card-deleted'),
-                                duration: 500,
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            }
-                          );
-                        }}
-                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-                    </td>
-                  {:else}
-                    <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                      <button
-                        on:click={() => {
-                          open_edit_modal(card);
-                        }}
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
-                        <button
-                          on:click={() => {
-                            active_deletes[card.id] = true;
-                          }}
-                          tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-                      {/if}
-                    </td>
-                  {/if}
-                </tr>
-              {/if}
-            {/each}
+        {#if active_deletes[card.id] === true}
+          <td
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <button
+              on:click={() => {
+                active_deletes[card.id] = false;
+              }}
+              tabindex="0"
+              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+            <button
+              on:click={() => {
+                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                  (resp) => {
+                    current_cards = current_cards.filter(
+                      (obj) => obj.id !== card.id
+                    );
+                    Toastify({
+                      text: $_('card-deleted'),
+                      duration: 500,
+                      backgroundColor:
+                        'linear-gradient(to right, #00b09b, #96c93d)',
+                    }).showToast();
+                  }
+                );
+              }}
+              tabindex="0"
+              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+          </td>
+        {:else}
+          <td
+            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <button
+              on:click={() => {
+                open_edit_modal(card);
+              }}
+              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
+            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
+              <button
+                on:click={() => {
+                  active_deletes[card.id] = true;
+                }}
+                tabindex="0"
+                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+            {/if}
+          </td>
+        {/if}
+      </tr>
+    {/if}
+    {/each}
+  </div>
+</div>
           </tbody>
         </table>
       </div>