diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..6e008a1
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"command": "bun run dev",
+			"name": "Run development server",
+			"request": "launch",
+			"type": "node-terminal"
+		},
+		{
+			"type": "chrome",
+			"request": "launch",
+			"name": "Launch Chrome against localhost",
+			"url": "http://localhost:5173",
+			"webRoot": "${workspaceFolder}"
+		}
+	]
+}
diff --git a/bun.lockb b/bun.lockb
index 8b3679c..b74f1da 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 0000000..986e271
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = "./happydom.ts"
\ No newline at end of file
diff --git a/essays/setup/1. google-auth.md b/essays/setup/1. google-auth.md
index e010901..cc4d25b 100644
--- a/essays/setup/1. google-auth.md	
+++ b/essays/setup/1. google-auth.md	
@@ -3,3 +3,7 @@
 1. [Google oauth screen](https://console.cloud.google.com/apis/credentials/oauthclient/866296044896-9eb9a2762g9m1kcuqbevqppc4ukdbnbn.apps.googleusercontent.com?project=read-to-remember)
 
 2. [update env variables](https://vercel.com/sanyam-jains-projects-1b330221/remfo/settings/domains)
+
+3. update REDIRECT_URI
+
+4. [check domains preview/production setting](https://vercel.com/sanyam-jains-projects-1b330221/remfo/settings/domains)
\ No newline at end of file
diff --git a/essays/things-you-will-learn.md b/essays/things-you-will-learn.md
new file mode 100644
index 0000000..669458b
--- /dev/null
+++ b/essays/things-you-will-learn.md
@@ -0,0 +1,17 @@
+## Frontend
+
+- svelte
+
+## Backend
+
+- designing RESTful APIs
+- working with databases
+
+## System Design
+
+## DSA
+
+## Programming
+
+- best practices
+- testing & code-quality
diff --git a/happydom.ts b/happydom.ts
new file mode 100644
index 0000000..7f712d0
--- /dev/null
+++ b/happydom.ts
@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();
diff --git a/package.json b/package.json
index d6e8c6b..d9b0b59 100644
--- a/package.json
+++ b/package.json
@@ -4,64 +4,78 @@
   "private": true,
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "bun run test && vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "generate": "npx drizzle-kit generate",
     "migrate": "npx drizzle-kit migrate"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.214",
+    "@happy-dom/global-registrator": "^14.12.3",
+    "@iconify/json": "^2.2.230",
     "@iconify/types": "^2.0.0",
-    "@libsql/client": "0.6.0",
+    "@libsql/client": "0.7.0",
     "@lucia-auth/adapter-postgresql": "3.1.2",
-    "@lucia-auth/adapter-sqlite": "3.0.1",
-    "@sveltejs/adapter-auto": "3.2.1",
-    "@sveltejs/adapter-vercel": "5.3.0",
-    "@sveltejs/enhanced-img": "^0.2.1",
-    "@sveltejs/kit": "2.5.10",
-    "@sveltejs/vite-plugin-svelte": "3.1.0",
+    "@lucia-auth/adapter-sqlite": "3.0.2",
+    "@sveltejs/adapter-auto": "3.2.2",
+    "@sveltejs/adapter-vercel": "5.4.1",
+    "@sveltejs/enhanced-img": "^0.3.0",
+    "@sveltejs/kit": "2.5.18",
+    "@sveltejs/vite-plugin-svelte": "3.1.1",
     "@tailwindcss/typography": "0.5.13",
-    "@types/eslint": "8.56.10",
-    "@typescript-eslint/eslint-plugin": "7.10.0",
-    "@typescript-eslint/parser": "7.10.0",
+    "@testing-library/jest-dom": "^6.4.7",
+    "@testing-library/svelte": "^5.2.0",
+    "@types/eslint": "9.6.0",
+    "@typescript-eslint/eslint-plugin": "7.17.0",
+    "@typescript-eslint/parser": "7.17.0",
     "@vercel/analytics": "^1.3.1",
-    "@vite-pwa/sveltekit": "^0.5.0",
-    "arctic": "1.9.0",
+    "@vite-pwa/sveltekit": "^0.6.0",
+    "@vitest/coverage-v8": "^2.0.4",
+    "@vitest/ui": "^2.0.4",
+    "@zerodevx/svelte-toast": "^0.9.5",
+    "arctic": "1.9.2",
     "autoprefixer": "10.4.19",
     "cal-heatmap": "^4.2.4",
-    "cypress": "^13.12.0",
+    "cypress": "^13.13.1",
     "date-fns": "3.6.0",
     "dotenv": "16.4.5",
-    "drizzle-kit": "0.21.4",
-    "drizzle-orm": "0.30.10",
-    "eslint": "8.57.0",
+    "drizzle-kit": "0.23.0",
+    "drizzle-orm": "0.32.0",
+    "eslint": "9.7.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-svelte": "2.39.0",
+    "eslint-plugin-svelte": "2.43.0",
     "lucia": "3.2.0",
-    "openai": "4.47.1",
-    "postcss": "8.4.38",
+    "msw": "^2.3.5",
+    "openai": "4.53.0",
+    "postcss": "8.4.39",
     "postgres": "3.4.4",
-    "posthog-js": "^1.141.4",
-    "prettier": "3.2.5",
-    "prettier-plugin-svelte": "3.2.3",
-    "prettier-plugin-tailwindcss": "0.5.14",
-    "svelte": "5.0.0-next.142",
-    "svelte-check": "3.7.1",
-    "sveltekit-device-detector": "^1.1.2",
-    "sveltekit-superforms": "2.14.0",
-    "tailwindcss": "3.4.3",
-    "tslib": "2.6.2",
-    "typescript": "5.4.5",
+    "posthog-js": "^1.148.2",
+    "prettier": "3.3.3",
+    "prettier-plugin-svelte": "3.2.6",
+    "prettier-plugin-tailwindcss": "0.6.5",
+    "svelte": "5.0.0-next.195",
+    "svelte-check": "3.8.4",
+    "sveltekit-device-detector": "^1.1.3",
+    "sveltekit-superforms": "2.16.1",
+    "tailwindcss": "3.4.6",
+    "tslib": "2.6.3",
+    "typescript": "5.5.4",
     "unplugin-icons": "^0.19.0",
-    "vite": "5.2.11",
+    "vite": "5.3.4",
     "vite-plugin-pwa": "^0.20.0",
     "vitest": "1.6.0",
     "zod": "3.23.8"
   },
-  "type": "module"
+  "type": "module",
+  "msw": {
+    "workerDirectory": [
+      "static"
+    ]
+  }
 }
\ No newline at end of file
diff --git a/src/lib/components/Cards/Card.svelte b/src/lib/components/Cards/Card.svelte
new file mode 100644
index 0000000..dd281f9
--- /dev/null
+++ b/src/lib/components/Cards/Card.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { CardRevisePage } from '$lib/types/Card';
+	import { formatDistanceToNow } from 'date-fns';
+	import Trash from '~icons/arcticons/trashcan';
+	import ReviewOptions from './ReviewOptions.svelte';
+	import { enhance } from '$app/forms';
+
+	export let card: CardRevisePage;
+	export let customEnhance;
+	export let modifyingCardId: string;
+</script>
+
+<div class="group relative rounded-md border border-gray-100 bg-white sm:h-96">
+	<div class={`flex h-full w-full flex-col ${modifyingCardId === card.id ? 'blur-sm' : ''}`}>
+		<div
+			class="flex h-fit min-h-16 max-h-48 w-full justify-center overflow-y-auto rounded-md border-input ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+			id="question"
+		>
+			<div class="w-full whitespace-break-spaces p-6">
+				{card.front}
+			</div>
+		</div>
+
+		<div class="relative flex grow min-h-48 border-t border-dashed">
+			<form
+				class="absolute -top-5 right-0 z-10 bg-white"
+				method="post"
+				action="?/delete"
+				use:enhance={customEnhance}
+			>
+				<input type="hidden" hidden name="cardId" value={card.id} />
+				<button
+					class="flex items-center space-x-1 rounded-md border px-4 py-2 hover:bg-accent hover:text-accent-foreground hover:outline disabled:pointer-events-none disabled:opacity-50"
+					disabled={modifyingCardId === card.id}
+					type="submit"
+					title="move to trash"
+					data-testid="trash"
+				>
+					<Trash style="stroke-width:2px;" /><span></span>
+				</button>
+			</form>
+			<div
+				class="h-full w-full items-center overflow-y-auto whitespace-break-spaces p-6 ring-offset-background blur-md placeholder:text-muted-foreground hover:filter-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+				id="answer"
+			>
+				{card.back}
+			</div>
+		</div>
+		<div class="w-full">
+			<ReviewOptions cardId={card.id} {customEnhance} />
+		</div>
+	</div>
+</div>
+<div class="p-2 text-right text-sm text-gray-200" title={String(card.createdAt)}>
+	added {formatDistanceToNow(card.createdAt)} ago
+</div>
diff --git a/src/lib/components/Cards/CardGroup.svelte b/src/lib/components/Cards/CardGroup.svelte
new file mode 100644
index 0000000..f7e2d26
--- /dev/null
+++ b/src/lib/components/Cards/CardGroup.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { CardRevisePage } from '$lib/types/Card';
+	import { humanReadableDate } from '$lib/common.util';
+	import Card from './Card.svelte';
+
+	export let date: string;
+	export let cards: CardRevisePage[];
+	export let customEnhance;
+	export let modifyingCardId: string;
+	export let firstCardId: string;
+</script>
+
+<div class="relative">
+	<div
+		class="mb-2 flex h-10 w-16 items-center justify-center rounded-full border border-gray-100 text-center text-gray-400"
+		title={date}
+	>
+		{humanReadableDate(cards[0].nextPractice)}
+	</div>
+	<div class="absolute left-8 top-10 -z-10 h-full border-r border-gray-100"></div>
+	{#each cards as card (card.id)}
+		<div class="{`mb-16 ${card.id === firstCardId ? 'first:min-h-screen' : ''}`}}">
+			<Card {card} {customEnhance} {modifyingCardId}></Card>
+		</div>
+	{/each}
+</div>
diff --git a/src/lib/components/Cards/CardReview.svelte b/src/lib/components/Cards/CardReview.svelte
new file mode 100644
index 0000000..88d59c8
--- /dev/null
+++ b/src/lib/components/Cards/CardReview.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { CardRevisePage } from '$lib/types/Card';
+	import type { ActionResult } from '@sveltejs/kit';
+	import { format } from 'date-fns';
+	import CardGroup from './CardGroup.svelte';
+	import ReviewProgress from './ReviewProgress.svelte';
+	import { toast } from '@zerodevx/svelte-toast';
+
+	export let cards: CardRevisePage[];
+	let groupedCards: { [key: string]: CardRevisePage[] } = {};
+	let dates: string[] = [];
+	let revisedCards: string[] = [];
+	let remainingCards: CardRevisePage[] = [];
+	let firstCardId = '';
+
+	$: {
+		remainingCards = cards.filter((card) => !revisedCards.includes(card.id));
+		groupedCards = groupCards(remainingCards);
+		dates = Object.keys(groupedCards).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+		firstCardId = groupCards(remainingCards)[dates[0]]?.[0]?.id;
+	}
+
+	let modifyingCardId = '';
+
+	const customEnhance = ({ formData }: { formData: FormData }) => {
+		const id = formData.get('cardId') as string;
+		revisedCards = [...revisedCards, id];
+		modifyingCardId = id;
+		return ({ result }: { result: ActionResult }) => {
+			modifyingCardId = '';
+			if (result.type === 'error' || result.type === 'failure') {
+				toast.push('Failed to perform that action', {
+					theme: {
+						'--toastColor': 'white',
+						'--toastBackground': 'rgba(220,53,69,0.9)',
+						'--toastBarBackground': '#C53030'
+					}
+				});
+			}
+		};
+	};
+
+	function groupCards(cards: CardRevisePage[]): { [key: string]: CardRevisePage[] } {
+		return cards.reduce((groups: { [key: string]: CardRevisePage[] }, card) => {
+			const date = format(card.nextPractice, 'P');
+			if (!groups[date]) {
+				groups[date] = [];
+			}
+			groups[date].push(card);
+			return groups;
+		}, {});
+	}
+</script>
+
+<div class="relative mx-auto mt-10 max-w-lg space-y-4 rounded-lg">
+	<ReviewProgress {remainingCards} {revisedCards} {cards} />
+
+	<div class="mx-4 mt-10">
+		{#if cards.length > 0}
+			{#each dates as date (date)}
+				<CardGroup
+					{firstCardId}
+					{date}
+					cards={groupedCards[date]}
+					{customEnhance}
+					{modifyingCardId}
+				/>
+			{/each}
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/Cards/ReviewOptions.svelte b/src/lib/components/Cards/ReviewOptions.svelte
new file mode 100644
index 0000000..56a2826
--- /dev/null
+++ b/src/lib/components/Cards/ReviewOptions.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	export let cardId: string;
+	export let customEnhance;
+
+	const options = [
+		{ value: 'Easy', text: 'super easy' },
+		{ value: 'Good', text: 'easy' },
+		{ value: 'Hard', text: 'difficult' },
+		{ value: 'Challenging', text: 'super difficult' }
+	];
+</script>
+
+<form method="post" action="?/review" use:enhance={customEnhance}>
+	<input type="hidden" hidden name="cardId" value={cardId} />
+	<div
+		class="flex w-full flex-col border-t border-gray-100 sm:flex-row sm:rounded-bl-md sm:rounded-br-md"
+	>
+		{#each options as { value, text } (value)}
+			<button
+				class="w-full whitespace-nowrap border-b border-gray-100 bg-background px-4 py-4 text-center -outline-offset-2 ring-offset-background transition-colors last:rounded-b-sm hover:bg-accent hover:text-accent-foreground hover:outline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:border-b-0 sm:border-l sm:first:rounded-bl-sm sm:first:border-l-0 sm:last:rounded-bl-none sm:last:rounded-br-sm"
+				name="difficulty"
+				{value}
+			>
+				<span>{text}</span>
+			</button>
+		{/each}
+	</div>
+</form>
diff --git a/src/lib/components/Cards/ReviewProgress.svelte b/src/lib/components/Cards/ReviewProgress.svelte
new file mode 100644
index 0000000..f25d2d6
--- /dev/null
+++ b/src/lib/components/Cards/ReviewProgress.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { CardRevisePage } from '$lib/types/Card';
+
+	export let cards: CardRevisePage[];
+	export let revisedCards: string[];
+	export let remainingCards: CardRevisePage[];
+	let reviseCards = 5;
+</script>
+
+{#if remainingCards.length === 0}
+	<div class="text-center">
+		You have revised all the cards. Go to <a href="/record" class="underline">Record</a> to create more
+	</div>
+{:else if revisedCards.length > 0 && revisedCards.length % reviseCards === 0}
+	<div class="text-center text-lg text-gray-500">
+		Hurray. You revised {revisedCards.length} cards. Take a break or keep going.
+	</div>
+{:else}
+	<div class="text-center text-lg text-gray-400">
+		cards reviewed: {revisedCards.length}/{cards.length}
+	</div>
+{/if}
diff --git a/src/lib/components/Cards/Structure.drawio b/src/lib/components/Cards/Structure.drawio
new file mode 100644
index 0000000..dfef129
--- /dev/null
+++ b/src/lib/components/Cards/Structure.drawio
@@ -0,0 +1,31 @@
+<mxfile host="65bd71144e">
+    <diagram id="BpHc-Y5u9V5LaRtW-_PX" name="Page-1">
+        <mxGraphModel dx="756" dy="471" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="2" value="" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="200" y="50" width="380" height="230" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="260" y="80" width="260" height="180" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="ReviewProgress" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="277" y="100" width="226" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="5" value="CardReview" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="340" y="60" width="90" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="6" value="CardGroup&lt;br&gt;&lt;br&gt;&lt;br&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="277" y="150" width="223" height="100" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" value="Card" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="300" y="200" width="190" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="8" value="/review" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="290" y="25" width="60" height="30" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
\ No newline at end of file
diff --git a/src/lib/components/PrimaryNav.svelte b/src/lib/components/PrimaryNav.svelte
index 52d0f80..52c4d47 100644
--- a/src/lib/components/PrimaryNav.svelte
+++ b/src/lib/components/PrimaryNav.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <header
-	class="fixed bottom-0 z-10 flex w-full flex-col border-r bg-white shadow-lg sm:top-0 sm:h-screen sm:w-48"
+	class="fixed bottom-0 z-20 flex w-full flex-col border-r bg-white shadow-lg sm:top-0 sm:h-screen sm:w-48"
 >
 	<a class="hidden items-center p-2 text-gray-900 sm:flex md:mb-0" href="/">
 		<enhanced:img
@@ -64,11 +64,11 @@
 				</span>
 			</div>
 		</summary>
-		<nav class="flex w-screen sm:mt-8 sm:w-48 sm:flex-col sm:space-y-2">
+		<nav class="flex w-screen sm:mt-8 sm:w-48 sm:flex-col">
 			{#each links as link (link.href)}
 				<a
 					target={link.href.includes('https://') ? '_blank' : ''}
-					class={`${$page.url.pathname === link.href ? 'bg-gray-100' : ''} flex w-1/3 flex-col items-center whitespace-nowrap p-1 px-4 text-xs ring-offset-background transition-colors hover:bg-gray-200  hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:h-10 sm:w-full sm:flex-row sm:gap-2 sm:py-6 sm:text-base `}
+					class={`${$page.url.pathname === link.href ? 'bg-gray-100' : ''} border-r flex w-1/3 flex-col items-center whitespace-nowrap p-1 px-4 text-xs ring-offset-background transition-colors hover:bg-gray-200  hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:h-10 sm:w-full sm:flex-row sm:gap-2 sm:py-6 sm:text-base `}
 					href={link.href}
 				>
 					<svelte:component
diff --git a/src/lib/db/tables/card.table.ts b/src/lib/db/tables/card.table.ts
index bdb6206..b45855a 100644
--- a/src/lib/db/tables/card.table.ts
+++ b/src/lib/db/tables/card.table.ts
@@ -42,12 +42,12 @@ export const getCardsOrderByCreated = async (userId: string) => {
 // 	return data
 // }
 
-// export const getCardsGroupedByUpdated = async (userId: string) => {
-// 	console.time('getCardsGroupedByUpdated')
-// 	const data = await db.select({ date: sql`DATE(${activityTable.createdAt}, 'unixepoch')`, count: count() }).from(activityTable).where(and(eq(activityTable.userId, userId), eq(activityTable.action, 'UPDATE'))).groupBy(sql`DATE(${activityTable.createdAt}, 'unixepoch')`)
-// 	console.timeEnd('getCardsGroupedByUpdated')
-// 	return data
-// }
+export const getCardsGroupedByUpdated = async (userId: string) => {
+	console.time('getCardsGroupedByUpdated')
+	const data = await db.select({ date: sql`DATE(${activityTable.createdAt}, 'unixepoch')`, count: count() }).from(activityTable).where(and(eq(activityTable.userId, userId), eq(activityTable.action, 'UPDATE'))).groupBy(sql`DATE(${activityTable.createdAt}, 'unixepoch')`)
+	console.timeEnd('getCardsGroupedByUpdated')
+	return data
+}
 
 export const getCardsGroupedByActivityDate = async (userId: string) => {
 	console.time('getCardsGroupedByActivityDate')
diff --git a/src/mocks/browser.ts b/src/mocks/browser.ts
new file mode 100644
index 0000000..7b009b1
--- /dev/null
+++ b/src/mocks/browser.ts
@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
+
+export const worker = setupWorker(...handlers);
\ No newline at end of file
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
new file mode 100644
index 0000000..91a8a4b
--- /dev/null
+++ b/src/mocks/handlers.ts
@@ -0,0 +1,14 @@
+import { http, HttpResponse } from 'msw'
+
+export const handlers = [
+	http.post('/review', () => {
+		return HttpResponse.json({ success: true });
+	}),
+	http.post('/delete', () => {
+		return HttpResponse.json({ success: true });
+	}),
+	// http.post('/v2/pipeline', (data) => {
+	// 	console.log('http.post ~ data:', data)
+	// 	return HttpResponse.json({ success: true });
+	// }),
+]
\ No newline at end of file
diff --git a/src/mocks/mockData.ts b/src/mocks/mockData.ts
new file mode 100644
index 0000000..df18663
--- /dev/null
+++ b/src/mocks/mockData.ts
@@ -0,0 +1,99 @@
+export const mockCards = [
+	{ id: '1', front: 'Question 1', back: 'Answer 1', nextPractice: new Date(), createdAt: new Date() },
+	{ id: '2', front: 'Question 2', back: 'Answer 2', nextPractice: new Date(), createdAt: new Date() },
+];
+
+
+export const reviseMockCards = [
+	{
+		id: '576f1074-747c-4c44-9932-0e63ee8919c5',
+		front: `1. arr.filter(callbackfn)
+2. callbackfn is basically a test (word.length>0)
+3. parameter for callbackfn => (element, index)
+4. truthy values are included
+
+arr.filter((word) => word.length>4) // o/p will be array with words of length greater than 4`,
+		back: `1. arr.filter(callbackfn)
+2. callbackfn is basically a test (word.length>0)
+3. parameter for callbackfn => (element, index)
+4. truthy values are included
+
+arr.filter((word) => word.length>4) // o/p will be array with words of length greater than 4
+1. arr.filter(callbackfn)
+2. callbackfn is basically a test (word.length>0)
+3. parameter for callbackfn => (element, index)
+4. truthy values are included
+
+arr.filter((word) => word.length>4) // o/p will be array with words of length greater than 4`,
+		createdAt: '2024-08-08T22:28:26.000Z',
+		nextPractice: '2024-08-08T22:28:26.000Z'
+	},
+	{
+		id: 'ac08fc73-dc65-4577-9eb5-680e9ab1c143',
+		front: 'as',
+		back: `1. arr.filter(callbackfn)
+2. callbackfn is basically a test (word.length>0)
+3. parameter for callbackfn => (element, index)
+4. truthy values are included
+
+arr.filter((word) => word.length>4) // o/p will be array with words of length greater than 4`,
+		createdAt: '2024-08-08T22:34:46.000Z',
+		nextPractice: '2024-08-08T22:34:46.000Z'
+	},
+	{
+		id: '35d59579-2b46-4128-a3bd-e0c6e913fdf3',
+		front: 'as',
+		back: 'as',
+		createdAt: '2024-08-08T22:36:17.000Z',
+		nextPractice: '2024-08-08T22:36:17.000Z'
+	},
+	{
+		id: '6ed86d20-4e9d-40f4-9db2-1ccac098a98d',
+		front: 'as',
+		back: 'sa',
+		createdAt: '2024-08-08T22:38:31.000Z',
+		nextPractice: '2024-08-08T22:38:31.000Z'
+	},
+	{
+		id: 'fc19c145-c2db-4c0e-bbfb-fbcad4fc2de9',
+		front: 'a',
+		back: 's',
+		createdAt: '2024-08-08T22:39:26.000Z',
+		nextPractice: '2024-08-08T22:39:26.000Z'
+	},
+	{
+		id: '576f1074-747c-4c44-9932-0e63ee8919c1',
+		front: 'sanya',
+		back: 'as',
+		createdAt: '2024-08-08T22:28:26.000Z',
+		nextPractice: '2024-08-08T22:28:26.000Z'
+	},
+	{
+		id: 'ac08fc73-dc65-4577-9eb5-680e9ab1c142',
+		front: 'as',
+		back: 'sa',
+		createdAt: '2024-08-08T22:34:46.000Z',
+		nextPractice: '2024-08-10T22:34:46.000Z'
+	},
+	{
+		id: '35d59579-2b46-4128-a3bd-e0c6e913fda3',
+		front: 'as',
+		back: 'as',
+		createdAt: '2024-08-08T22:36:17.000Z',
+		nextPractice: '2024-08-08T22:36:17.000Z'
+	},
+	{
+		id: '6ed86d20-4e9d-40f4-9db2-1ccac098a18d',
+		front: 'as',
+		back: 'sa',
+		createdAt: '2024-08-08T22:38:31.000Z',
+		nextPractice: '2024-08-10T22:38:31.000Z'
+	},
+	{
+		id: 'fc19c145-c2db-4c0e-bbfb-fbcad4fcade9',
+		front: 'a',
+		back: 's',
+		createdAt: '2024-08-08T22:39:26.000Z',
+		nextPractice: '2024-08-08T22:39:26.000Z'
+	}
+]
diff --git a/src/mocks/node.ts b/src/mocks/node.ts
new file mode 100644
index 0000000..abbedd7
--- /dev/null
+++ b/src/mocks/node.ts
@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)
\ No newline at end of file
diff --git a/src/routes/(protected)/record/AddNewCard.svelte b/src/routes/(protected)/record/AddNewCard.svelte
index 73610e4..9c38550 100644
--- a/src/routes/(protected)/record/AddNewCard.svelte
+++ b/src/routes/(protected)/record/AddNewCard.svelte
@@ -76,6 +76,13 @@
 								disabled={loading}
 								{...$constraints.back}
 							></textarea>
+							<div class="flex justify-end sm:hidden">
+								<button
+									class="flex items-center space-x-1 rounded-md border bg-gray-800 px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50"
+									disabled={loading}
+									type="submit"><Save style="stroke-width:2px;" /><span>save</span></button
+								>
+							</div>
 							{#if $errors.back}<div class="text-red-800">{$errors.back}</div>{/if}
 						</div>
 					</div>
diff --git a/src/routes/(protected)/record/NewCards.svelte b/src/routes/(protected)/record/NewCards.svelte
index 5869515..97321e5 100644
--- a/src/routes/(protected)/record/NewCards.svelte
+++ b/src/routes/(protected)/record/NewCards.svelte
@@ -79,14 +79,24 @@
 								>
 									{card.back}
 								</div>
+								<div class="flex justify-end px-2 sm:hidden">
+									<form method="post" action="?/delete" use:enhance={customEnhance}>
+										<input type="hidden" hidden name="cardId" value={card.id} />
+										<button
+											class="flex items-center space-x-1 rounded-md border px-4 py-2 text-gray-900 disabled:pointer-events-none disabled:opacity-50"
+											disabled={modifyingCardId === card.id}
+											type="submit"><Trash style="stroke-width:2px;" /></button
+										>
+									</form>
+								</div>
 							</div>
 						</div>
 					</div>
 					<div
-						class="absolute -right-28 bottom-0 flex h-full flex-col-reverse px-2 opacity-0 group-hover:opacity-100"
+						class="absolute -right-28 bottom-0 hidden h-full flex-col-reverse px-2 opacity-0 group-hover:opacity-100 sm:flex"
 					>
 						<form method="post" action="?/delete" use:enhance={customEnhance}>
-							<input type="hidden" name="cardId" value={card.id} />
+							<input type="hidden" hidden name="cardId" value={card.id} />
 							<button
 								class="flex items-center space-x-1 rounded-md border bg-gray-800 px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50"
 								disabled={modifyingCardId === card.id}
diff --git a/src/routes/(protected)/revise/+page.server.ts b/src/routes/(protected)/revise/+page.server.ts
index 9a000aa..eb172ae 100644
--- a/src/routes/(protected)/revise/+page.server.ts
+++ b/src/routes/(protected)/revise/+page.server.ts
@@ -7,7 +7,7 @@ import { ROUTES } from "$lib/routes.util.js";
 import { cardReviewSchema } from "$lib/schemas.js";
 import { sessionExists } from "$lib/common.util.js";
 import { deleteAction, reviewAction } from "$lib/actions/card.action.js";
-import { getCardsOrderByNextPractice } from "$lib/db/tables/card.table.js";
+import { getCardsGroupedByUpdated, getCardsOrderByNextPractice } from "$lib/db/tables/card.table.js";
 
 
 export async function load({ locals }) {
@@ -17,12 +17,12 @@ export async function load({ locals }) {
 
 	const reviewForm = superValidate(zod(cardReviewSchema));
 	const cards = getCardsOrderByNextPractice(locals.user.id)
-	// const groupedInfo = getCardsGroupedByUpdated(locals.user.id)
+	const groupedInfo = getCardsGroupedByUpdated(locals.user.id)
 
 	return {
 		reviewForm,
 		cards,
-		// groupedInfo
+		groupedInfo
 	};
 }
 
diff --git a/src/routes/(protected)/revise/+page.svelte b/src/routes/(protected)/revise/+page.svelte
index 3346e4a..0924246 100644
--- a/src/routes/(protected)/revise/+page.svelte
+++ b/src/routes/(protected)/revise/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import Heatmap from '$lib/components/Heatmap/Heatmap.svelte';
-	import ReviseCards from './ReviseCards.svelte';
+	import CardReview from '$lib/components/Cards/CardReview.svelte';
 	export let data;
 </script>
 
 {#await data.cards then cards}
-	<ReviseCards {cards} />
+	<CardReview {cards} />
 {/await}
 
 {#await data.groupedInfo then groupedInfo}
diff --git a/src/routes/(protected)/revise/CardReview.test.ts b/src/routes/(protected)/revise/CardReview.test.ts
new file mode 100644
index 0000000..b08258e
--- /dev/null
+++ b/src/routes/(protected)/revise/CardReview.test.ts
@@ -0,0 +1,125 @@
+import { render, fireEvent, screen } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import CardReview from '$lib/components/Cards/CardReview.svelte';
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { server } from '../../../mocks/node';
+import { http, HttpResponse } from 'msw';
+import { mockCards } from '../../../mocks/mockData';
+
+
+beforeAll(() => server.listen());
+afterAll(() => server.close());
+afterEach(() => server.resetHandlers());
+
+describe('CardReview', () => {
+	describe('Rendering', () => {
+		it('renders correctly with cards', async () => {
+			render(CardReview, { cards: mockCards });
+
+			expect(screen.getByText('cards reviewed: 0/2')).toBeInTheDocument();
+			expect(screen.getByText('Question 1')).toBeInTheDocument();
+			expect(screen.getByText('Question 2')).toBeInTheDocument();
+		});
+
+		it('shows "all cards reviewed" message when no cards remain', async () => {
+			render(CardReview, { cards: [] });
+
+			expect(screen.getByText(/You have revised all the cards/)).toBeInTheDocument();
+		});
+	})
+
+	describe('Card Review Functionality', () => {
+		it('sends correct requestBody when a card is reviewed', async () => {
+			const requestPromise = new Promise((resolve) => {
+				server.use(
+					http.post('?/review', async ({ request }) => {
+						const formData = await request.formData();
+						const requestBody = Object.fromEntries(formData)
+						resolve(requestBody);
+					})
+				);
+			});
+			render(CardReview, { cards: mockCards });
+			const easyButton = screen.getAllByText('super easy')[0];
+			await fireEvent.click(easyButton);
+			await tick()
+
+			const requestBody = await requestPromise;
+			expect(requestBody).toEqual({
+				cardId: '1',
+				difficulty: 'Easy'
+			});
+		})
+
+		it('updates revised cards count when a card is reviewed', async () => {
+			render(CardReview, { cards: mockCards });
+
+			const easyButton = screen.getAllByText('super easy')[0];
+			await fireEvent.click(easyButton);
+
+			expect(screen.getByText('cards reviewed: 1/2')).toBeInTheDocument();
+			expect(screen.queryByText('Question 1')).not.toBeInTheDocument();
+			expect(screen.getByText('Question 2')).toBeInTheDocument();
+		});
+
+		it('shows break message after reviewing 5 cards', async () => {
+			const manyCards = Array(6).fill(null).map((_, i) => ({
+				id: String(i),
+				front: `Question ${i}`,
+				back: `Answer ${i}`,
+				nextPractice: new Date(),
+				createdAt: new Date()
+			}));
+
+			render(CardReview, { cards: manyCards });
+
+			const easyButtons = screen.getAllByText('super easy');
+			for (let i = 0; i < 5; i++) {
+				await fireEvent.click(easyButtons[i]);
+				await tick();
+			}
+
+			expect(screen.getByText(/Hurray. You revised 5 cards. Take a break or keep going./)).toBeInTheDocument();
+		});
+	})
+
+
+
+	describe('Card Deletion', () => {
+		it('deletes a card and updates UI correctly', async () => {
+			render(CardReview, { cards: mockCards });
+
+			const deleteButton = screen.getAllByTestId('trash')[0];
+			await fireEvent.click(deleteButton);
+
+			// Assertions for UI updates after deletion
+			expect(screen.getByText('cards reviewed: 1/2')).toBeInTheDocument();
+			expect(screen.queryByText('Question 1')).not.toBeInTheDocument();
+			expect(screen.getByText('Question 2')).toBeInTheDocument();
+		});
+
+		it('sends correct delete request', async () => {
+			const requestPromise = new Promise((resolve) => {
+				server.use(
+					http.post('?/delete', async ({ request }) => {
+						const formData = await request.formData();
+						const requestBody = Object.fromEntries(formData);
+						resolve(requestBody);
+						return new HttpResponse(null, { status: 200 });
+					})
+				);
+			});
+
+			render(CardReview, { cards: mockCards });
+
+			const deleteButton = screen.getAllByTestId('trash')[0];
+			await fireEvent.click(deleteButton);
+
+			const requestBody = await requestPromise;
+
+			expect(requestBody).toEqual({
+				cardId: '1'
+			});
+		});
+	})
+});
\ No newline at end of file
diff --git a/src/routes/(protected)/revise/ReviseCards.svelte b/src/routes/(protected)/revise/ReviseCards.svelte
deleted file mode 100644
index 92b4e21..0000000
--- a/src/routes/(protected)/revise/ReviseCards.svelte
+++ /dev/null
@@ -1,168 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { humanReadableDate } from '$lib/common.util';
-	import type { CardRevisePage } from '$lib/types/Card';
-	import type { ActionResult } from '@sveltejs/kit';
-	import { format, formatDistanceToNow } from 'date-fns';
-	import MyStar from '~icons/arcticons/mykyivstar';
-	import Trash from '~icons/arcticons/trashcan';
-
-	export let cards: CardRevisePage[];
-	let groupedCards: { [key: string]: CardRevisePage[] } = {};
-	let dates: string[] = [];
-	let revisedCards: string[] = [];
-	let remainingCards: CardRevisePage[] = [];
-
-	$: {
-		remainingCards = cards.filter((card) => !revisedCards.includes(card.id));
-		groupedCards = remainingCards.reduce((groups: { [key: string]: CardRevisePage[] }, card) => {
-			const date = format(card.nextPractice, 'P');
-
-			if (!groups[date]) {
-				groups[date] = [];
-			}
-
-			groups[date].push(card);
-
-			return groups;
-		}, {});
-
-		dates = Object.keys(groupedCards).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
-
-		console.log(revisedCards);
-	}
-
-	let modifyingCardId = '';
-
-	const customEnhance = ({ formData }: { formData: FormData }) => {
-		const id = formData.get('cardId') as string;
-		revisedCards = [...revisedCards, id];
-		modifyingCardId = id;
-		return ({ result }: { result: ActionResult }) => {
-			modifyingCardId = '';
-			if (result.type === 'error' || result.type === 'failure') {
-				alert('unable to perform that action.');
-			}
-		};
-	};
-
-	const options = [
-		{
-			value: 'Easy',
-			text: 'super easy'
-			// icon: CheckCircleOutline
-		},
-		{
-			value: 'Good',
-			text: 'easy'
-			// icon: CheckOutline
-		},
-		{
-			value: 'Hard',
-			text: 'difficult'
-			// icon: Exclamation
-		},
-		{
-			value: 'Challenging',
-			text: 'super difficult'
-			// icon: AlertCircleOutline
-		}
-	];
-
-	let reviseCards = 5;
-</script>
-
-<div class="relative mx-auto mt-10 max-w-lg space-y-4 rounded-lg">
-	{#if remainingCards.length === 0}
-		You have revised all the cards. Go to <a href="/record" class="underline">Record</a> to create more
-	{:else if revisedCards.length > 0 && revisedCards.length % reviseCards === 0}
-		<div class="text-center text-lg text-gray-500">
-			Hurray. You revised {revisedCards.length} cards. Take a break or keep going.
-		</div>
-	{:else}
-		<div class="text-center text-lg text-gray-400">
-			cards revised: {revisedCards.length}/{cards.length}
-		</div>
-	{/if}
-	<div class="mt-10">
-		{#if cards.length > 0}
-			{#each dates as date (date)}
-				<div class="absolute -left-14 z-10 w-12 bg-white py-2" title={date}>
-					{humanReadableDate(groupedCards[date][0].nextPractice)}
-				</div>
-				<div class="absolute -left-8 h-full border-r"></div>
-				<div>
-					{#each groupedCards[date] as card (card.id)}
-						<div class="mb-8 first:min-h-screen">
-							<div
-								class="group relative min-h-16 rounded-sm border border-dashed px-8 py-6 hover:border-gray-200"
-							>
-								<div class={` ${modifyingCardId === card.id ? 'blur-sm' : ''}`}>
-									<div class="flex space-x-2">
-										<div>
-											<MyStar style="" />
-										</div>
-										<div class="flex w-full flex-col">
-											<div
-												class="mb-2 flex w-full whitespace-break-spaces rounded-md border-input ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-												id="question"
-												placeholder="Capital of Paris?"
-												data-gramm="false"
-											>
-												{card.front}
-											</div>
-											<div class="border border-dashed">
-												<div
-													class="flex w-full whitespace-break-spaces rounded-md p-2 pb-10 pt-8 ring-offset-background blur-sm placeholder:text-muted-foreground hover:filter-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-													id="answer"
-													placeholder="France"
-													data-gramm="false"
-												>
-													{card.back}
-												</div>
-											</div>
-										</div>
-									</div>
-									<form
-										method="post"
-										action="?/review"
-										class="mt-2 flex w-full space-x-2"
-										use:enhance={customEnhance}
-									>
-										<input type="hidden" name="cardId" value={card.id} />
-
-										{#each options as { value, text } (value)}
-											<button
-												class="w-full whitespace-nowrap rounded-md border border-input bg-background px-4 py-4 text-center ring-offset-background transition-colors hover:border-solid hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-												name="difficulty"
-												{value}
-											>
-												<!-- <svelte:component this={icon} /> -->
-												<span>{text}</span>
-											</button>
-										{/each}
-									</form>
-								</div>
-								<div
-									class="absolute -right-28 bottom-0 flex h-full flex-col-reverse px-2 opacity-0 group-hover:opacity-100"
-								>
-									<form method="post" action="?/delete" use:enhance={customEnhance}>
-										<input type="hidden" name="cardId" value={card.id} />
-										<button
-											class="flex items-center space-x-1 rounded-md border bg-gray-800 px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50"
-											disabled={modifyingCardId === card.id}
-											type="submit"><Trash style="stroke-width:2px;" /><span>delete</span></button
-										>
-									</form>
-								</div>
-							</div>
-							<div class=" text-right text-sm text-gray-200" title={String(card.createdAt)}>
-								added {formatDistanceToNow(card.createdAt)} ago
-							</div>
-						</div>
-					{/each}
-				</div>
-			{/each}
-		{/if}
-	</div>
-</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 32e0894..db24f22 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import PrimaryNav from '$lib/components/PrimaryNav.svelte';
 	import '../app.css';
 	import { dev, browser } from '$app/environment';
@@ -71,3 +72,4 @@
 		}
 	</script>
 </svelte:head>
+<SvelteToast />
diff --git a/static/mockServiceWorker.js b/static/mockServiceWorker.js
new file mode 100644
index 0000000..15751fa
--- /dev/null
+++ b/static/mockServiceWorker.js
@@ -0,0 +1,284 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = '2.3.5'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const responseClone = response.clone()
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseClone.body,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseClone.body],
+      )
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+
+  function passthrough() {
+    const headers = Object.fromEntries(requestClone.headers.entries())
+
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
+  })
+}
+
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
diff --git a/tsconfig.json b/tsconfig.json
index 0ef499e..af25489 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-		"types": ["unplugin-icons/types/svelte"]
+		"types": ["unplugin-icons/types/svelte", "@testing-library/jest-dom"]
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
diff --git a/vite.config.ts b/vite.config.ts
index 80bdeee..3c6fd5d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,17 +3,21 @@ import { defineConfig } from 'vitest/config';
 import Icons from 'unplugin-icons/vite'
 import { enhancedImages } from '@sveltejs/enhanced-img';
 import { SvelteKitPWA } from '@vite-pwa/sveltekit'
+import { svelteTesting } from '@testing-library/svelte/vite'
 
 export default defineConfig({
 	plugins: [
 		enhancedImages(),
 		sveltekit(),
+		svelteTesting(),
 		Icons({
 			compiler: 'svelte',
 		}),
-		SvelteKitPWA({/* pwa options */ })
+		SvelteKitPWA({/* pwa options */ }),
 	],
 	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}']
+		environment: 'happy-dom',
+		include: ['src/**/*.{test,spec}.{js,ts}'],
+		setupFiles: ['./vitest-setup.ts'],
 	}
 });
diff --git a/vitest-setup.ts b/vitest-setup.ts
new file mode 100644
index 0000000..e8ee517
--- /dev/null
+++ b/vitest-setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
\ No newline at end of file