diff --git a/src/lib/ListItem.svelte b/src/lib/ListItem.svelte
new file mode 100644
index 0000000..527235e
--- /dev/null
+++ b/src/lib/ListItem.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { pinned_list, type List } from "$lib/stores.svelte";
+
+  const { list = $bindable() }: { list: List } = $props();
+
+  let completed = $derived(list.tasks.filter((t) => t.completed).length);
+
+  function pinList() {
+    pinned_list.current = list.id;
+  }
+</script>
+
+<div class="border p-4 flex justify-between">
+  <div class="flex flex-col">
+    <a href={`/${list.id}`} class="text-xl hover:underline">{list.title}</a>
+    <p class="text-base">{completed}/{list.tasks.length}</p>
+  </div>
+
+  
+  <button onclick={pinList} class="bg-white rounded-xl">
+    <img
+      src={pinned_list.current === list.id ? "/pin.svg" : "/pin-line.svg"}
+      alt="Pin list button"
+      class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
+    />
+  </button>
+</div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b403f00..5487926 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,6 @@
 import { alphabet, generateRandomString } from "oslo/crypto";
+import { local_lists } from "./stores.svelte";
+import { goto } from "$app/navigation";
 
 export function generateId() {
   return generateRandomString(10, alphabet("a-z", "0-9"));
@@ -18,3 +20,14 @@ export function formatSecondsToDuration(seconds: number = 0) {
 
   return hrs + ':' + mins + ':' + secs ;
 }
+
+export function createList() {
+  const new_list = {
+    id: generateId(),
+    title: "",
+    tasks: []
+  };
+
+  local_lists.current!.push(new_list);
+  goto(`/${new_list.id}`);
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 79547b9..ec86dbd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,27 @@
 <script lang="ts">
-  import { user_preferences } from "$lib/stores.svelte";
+  import ListItem from "$lib/ListItem.svelte";
+  import { createList } from "$lib/utils";
+  import { user_preferences, local_lists } from "$lib/stores.svelte";
 </script>
 
-<label for="openPinOnLoad">
-  <input id="openPinOnLoad" type="checkbox" bind:checked={user_preferences.current.openPinOnLoad} />
-  Open pinned list on load
-</label>
+<main class="flex flex-col w-full px-2 pt-8 pb-28 lg:px-4 lg:pt-4  gap-8 text-xl lg:text-3xl">
+  <section class="flex flex-col gap-4">
+    <h2 class="font-bold">Your Lists</h2>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+      {#each local_lists.current as list}
+        <ListItem {list} /> 
+      {/each}
+      <button onclick={createList} aria-label="Create New List" class="flex justify-center items-center border bg-white">
+        <img src="/basil--plus-solid.svg" alt="Plus" class="size-8 text-white" />
+      </button>
+    </div>
+  </section>
+  <hr />
+  <section class="flex flex-col gap-4">
+    <h2 class="font-bold">Settings</h2>
+    <label for="openPinOnLoad" class="flex gap-2 text-base">
+      <input id="openPinOnLoad" type="checkbox" bind:checked={user_preferences.current.openPinOnLoad} />
+      Open pinned list on load
+    </label>
+  </section>
+</main>
diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
index f4c97f0..88a8399 100644
--- a/src/routes/[id]/+page.svelte
+++ b/src/routes/[id]/+page.svelte
@@ -2,7 +2,7 @@
   import { page } from "$app/state";
   import { goto } from "$app/navigation";
   import toast from "svelte-french-toast";
-  import { generateId } from "$lib/utils";
+  import { createList, generateId } from "$lib/utils";
   import { local_lists, pinned_list, type List } from "$lib/stores.svelte";
   import TaskItem from "$lib/TaskItem.svelte";
 
@@ -11,9 +11,6 @@
   let task_input = $state("");
   let user_lists = $derived(local_lists.current) as List[];
 
-  // since list points to something inside local_lists,
-  // it will run when list state changes
-
   function addTask() {
     if (task_input.length === 0) {
       toast.error("Enter a task to add");
@@ -36,18 +33,6 @@
     }
   }
 
-  function createList() {
-    const new_list = {
-      id: generateId(),
-      title: "",
-      tasks: []
-    };
-
-    local_lists.current!.push(new_list);
-    list = local_lists.current!.find((l) => l.id === new_list.id);
-    goto(`/${list!.id}`);
-  }
-
   function switchToList(id: string) {
     list = local_lists.current!.find((l) => l.id === id);
     goto(`/${list!.id}`);