diff --git a/src/lib/ListItem.svelte b/src/lib/ListItem.svelte
index 527235e..2df45c8 100644
--- a/src/lib/ListItem.svelte
+++ b/src/lib/ListItem.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import { pinned_list, type List } from "$lib/stores.svelte";
+  import { deleteList, pinList } from "./utils";
+  import { pinned_list, type List } from "./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">
@@ -16,12 +13,24 @@
     <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 class="grid grid-cols-2 gap-1">
+    <button onclick={() => pinList(list.id)} class="bg-white rounded-xl flex items-center justify-center">
+      <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>
+
+    <button 
+      onclick={() => deleteList(list.id)}
+      class="p-2 bg-red-500 rounded-xl text-white w-fit h-full"
+    >
+      <img
+        src="/trash-line.svg"
+        alt="Delete list button"
+        class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
+      />
+    </button>
+  </div>
 </div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 5487926..aff15d6 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,7 @@
-import { alphabet, generateRandomString } from "oslo/crypto";
-import { local_lists } from "./stores.svelte";
 import { goto } from "$app/navigation";
+import toast from "svelte-french-toast";
+import { local_lists, pinned_list, type List } from "./stores.svelte";
+import { alphabet, generateRandomString } from "oslo/crypto";
 
 export function generateId() {
   return generateRandomString(10, alphabet("a-z", "0-9"));
@@ -29,5 +30,18 @@ export function createList() {
   };
 
   local_lists.current!.push(new_list);
-  goto(`/${new_list.id}`);
+  return { id: new_list.id };
+}
+
+export function deleteList(id: string) {
+  if (pinned_list.current === id) {
+    toast.error("Cannot delete pinned list");
+    return;
+  }
+
+  local_lists.current = local_lists.current.filter((l) => l.id !== id);
+}
+
+export function pinList(id: string) {
+  pinned_list.current = id;
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ec86dbd..1114f00 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
   import ListItem from "$lib/ListItem.svelte";
   import { createList } from "$lib/utils";
   import { user_preferences, local_lists } from "$lib/stores.svelte";
+    import { goto } from "$app/navigation";
 </script>
 
 <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">
@@ -11,7 +12,7 @@
       {#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">
+      <button onclick={() => { const { id } = createList(); goto(`/${id}`); }} 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>
diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
index 88a8399..dcd7021 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 { createList, generateId } from "$lib/utils";
+  import { createList, deleteList, generateId, pinList } from "$lib/utils";
   import { local_lists, pinned_list, type List } from "$lib/stores.svelte";
   import TaskItem from "$lib/TaskItem.svelte";
 
@@ -32,26 +32,6 @@
       list.tasks = list.tasks.filter((t) => t.id !== id);
     }
   }
-
-  function switchToList(id: string) {
-    list = local_lists.current!.find((l) => l.id === id);
-    goto(`/${list!.id}`);
-  }
-
-  function pinList(id: string) {
-    pinned_list.current = id;
-  }
-
-  function deleteList() {
-    if (pinned_list.current === page.params.id) {
-      toast.error("Cannot delete pinned list");
-      return;
-    }
-
-    local_lists.current = local_lists.current!.filter((l) => l.id !== page.params.id);
-    list = local_lists.current.find((l) => l.id === pinned_list.current);
-    goto(`/${list!.id}`);
-  }
 </script>
 
 <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">
@@ -72,7 +52,7 @@
             class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
           />
         </button>
-        <button onclick={deleteList}>
+        <button onclick={() => deleteList(page.params.id!)}>
           <img
             src="/trash-line.svg"
             alt="Delete list button"
@@ -86,7 +66,7 @@
           {#each user_lists as user_list : List (user_list.id)}
             <button
               onclick={() => {
-                switchToList(user_list.id)
+                goto(`/${user_list.id}`);
                 is_menu_open = false;
               }}
               class="flex gap-2 justify-between text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"