diff --git a/server/todos.db b/server/todos.db
index 8fb7ad4..dd750f2 100644
Binary files a/server/todos.db and b/server/todos.db differ
diff --git a/src/App.css b/src/App.css
index e69de29..13d68e8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,11 @@
+.loading-spinner {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.loading-spinner .spinner-border {
+  width: 2rem;
+  height: 2rem;
+}
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
index 8cb3b22..8cf06a6 100644
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -3,6 +3,7 @@ import useTodoStore from "../stores/todoStore";
 import useAuthStore from "../stores/authStore";
 import { Table, Button, Spinner, Alert, Badge } from "react-bootstrap";
 import { BsCheckSquare, BsSquare } from "react-icons/bs";
+import '../App.css';
 
 function TaskList() {
   const {
@@ -26,9 +27,7 @@ function TaskList() {
   // Don't render if not authenticated
   if (!user) return null;
 
-  if (isLoading) {
-    return <Spinner animation="border" role="status" />;
-  }
+  // Loading state handled in main return
 
   if (error) {
     return <Alert variant="danger">Error: {error}</Alert>;
@@ -49,6 +48,11 @@ function TaskList() {
 
   return (
     <>
+      {isLoading && (
+        <div className="loading-spinner">
+          <Spinner animation="border" role="status" />
+        </div>
+      )}
       <Table bordered hover>
         <thead>
           <tr>