diff --git a/packages/svelte-todo/package.json b/packages/svelte-todo/package.json
index 676673d..0d7fa42 100644
--- a/packages/svelte-todo/package.json
+++ b/packages/svelte-todo/package.json
@@ -26,6 +26,7 @@
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.14",
+    "date-fns": "^2.30.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.30.0",
diff --git a/packages/svelte-todo/pnpm-lock.yaml b/packages/svelte-todo/pnpm-lock.yaml
index 8f7a4c9..8670ab0 100644
--- a/packages/svelte-todo/pnpm-lock.yaml
+++ b/packages/svelte-todo/pnpm-lock.yaml
@@ -32,6 +32,9 @@ devDependencies:
   autoprefixer:
     specifier: ^10.4.14
     version: 10.4.14(postcss@8.4.27)
+  date-fns:
+    specifier: ^2.30.0
+    version: 2.30.0
   eslint:
     specifier: ^8.28.0
     version: 8.46.0
@@ -98,6 +101,13 @@ packages:
       '@jridgewell/trace-mapping': 0.3.18
     dev: true
 
+  /@babel/runtime@7.22.10:
+    resolution: {integrity: sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.0
+    dev: true
+
   /@esbuild/android-arm64@0.18.18:
     resolution: {integrity: sha512-dkAPYzRHq3dNXIzOyAknYOzsx8o3KWaNiuu56B2rP9IFPmFWMS58WQcTlUQi6iloku8ZyHHMluCe5sTWhKq/Yw==}
     engines: {node: '>=12'}
@@ -998,6 +1008,13 @@ packages:
     hasBin: true
     dev: true
 
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.22.10
+    dev: true
+
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -2025,6 +2042,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /regenerator-runtime@0.14.0:
+    resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
+    dev: true
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
diff --git a/packages/svelte-todo/src/lib/components/Todo.svelte b/packages/svelte-todo/src/lib/components/Todo.svelte
index c577aa9..097840e 100644
--- a/packages/svelte-todo/src/lib/components/Todo.svelte
+++ b/packages/svelte-todo/src/lib/components/Todo.svelte
@@ -6,10 +6,10 @@
   export let todo: Todo;
 </script>
 
-<div class="flex flex-col p-5 rounded-full shadow-lg shadow-gray-400">
-  <div class="text-left text-lg">{todo.title}</div>
+<div class="flex flex-col p-5 m-4 rounded-md shadow-sm bg-white shadow-gray-400">
+  <div class="text-left text-lg font-semibold">{todo.title}</div>
   <div class="flex flex-row">
-    <span class="flex-1 basis-10/12 pt-5"
+    <span class="flex-1 basis-10/12 pt-5 text-sm"
       >{formatRelative(subDays(new Date(), 6), todo.createdAt)}</span
     >
     <span
diff --git a/packages/svelte-todo/src/routes/+page.svelte b/packages/svelte-todo/src/routes/+page.svelte
index 13d4440..fb21ce7 100644
--- a/packages/svelte-todo/src/routes/+page.svelte
+++ b/packages/svelte-todo/src/routes/+page.svelte
@@ -40,10 +40,10 @@
   <button on:click={generateToSelectedUser} disabled={!selected}>Generate</button>
 </div>
 
-<div class="flex flex-col md:flex-row">
-  <div class="basis-1/3 border-red-500 border">
+<div class="flex flex-col md:flex-row bg-white m-4 gap-4">
+  <div class="basis-1/3 border bg-[#ECECEF]">
     <div class="flex flex-col">
-      <h1 class="text-center">Pending</h1>
+      <h1 class="p-4">Pending</h1>
     </div>
     <div>
       {#each $todosPending as todo}
@@ -51,9 +51,9 @@
       {/each}
     </div>
   </div>
-  <div class="basis-1/3 border-red-500 border">
+  <div class="basis-1/3 border bg-[#ECECEF]">
     <div class="flex flex-col">
-      <h1 class="text-center">In Progress</h1>
+      <h1 class="p-4">In Progress</h1>
     </div>
     <div>
       {#each $todosInProgress as todo}
@@ -61,9 +61,9 @@
       {/each}
     </div>
   </div>
-  <div class="basis-1/3 border-red-500 border">
+  <div class="basis-1/3 border bg-[#ECECEF]">
     <div class="flex flex-col">
-      <h1 class="text-center">Done</h1>
+      <h1 class="p-4">Done</h1>
     </div>
     <div>
       {#each $todosDone as todo}
@@ -72,7 +72,6 @@
     </div>
   </div>
 </div>
-
 <p>
   Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
 </p>