diff --git a/TASKS.md b/TASKS.md
index 6382954..55fb826 100644
--- a/TASKS.md
+++ b/TASKS.md
@@ -21,6 +21,8 @@ If you want to use emojis for visibility, here's some I have used:
 ### To Do
 
 ### In Progress
+* `[🧑‍🔧]` **2.0: CSS Refactor & Styling:** Improve the general look and feel of the application pages.
+* `[🧑‍🔧]` **2.1: Dashboard UI:** Create `dashboard.html` (only for logged-in users).
 
 ### Done
 * `[✔️]` **1.0: Project Skeleton** - @ramforth
@@ -38,8 +40,8 @@ If you want to use emojis for visibility, here's some I have used:
 * **Goal:** Allow logged-in users to see a dashboard, get their overlay URL, and save settings. Now that Phase 1 is done, these tasks are ready to be worked on.
 
 ### To Do
-* `[ ]` **2.0: CSS Refactor & Styling:** Improve the general look and feel of the application pages.
-* `[ ]` **2.1: Dashboard UI:** Create `dashboard.html` (only for logged-in users).
+
+* `[ ]` **2.4: Create Logo and Favicon:** The project should have a logo and a favicon. Someone with designing skills could look at this
 * `[ ]` **2.2: Config API:** Create API endpoints (`GET`, `POST`) for `/api/settings` to save/load user preferences (e.g., custom CSS).
 * `[ ]` **2.3: Overlay URL:** Generate and display the unique overlay URL for the user (e.g., `/overlay/{user_id}`).
 
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..e69de29
diff --git a/templates/main.css b/static/css/main.css
similarity index 85%
rename from templates/main.css
rename to static/css/main.css
index d12bbd4..d620292 100644
--- a/templates/main.css
+++ b/static/css/main.css
@@ -1,8 +1,7 @@
-/* 
+/*
  * Dark and Purple Theme
  * Includes a modern CSS reset for cross-browser consistency.
  */
- 
 /* Box-sizing reset */
 *,
 *::before,
@@ -25,7 +24,7 @@ dl,
 dd {
   margin: 0;
 }
- 
+
 /* Basic body styling */
 body {
   min-height: 100vh;
@@ -33,8 +32,10 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol";
-  background-color: #1a1a2e; /* Dark blue/purple background */
-  color: #e0e0e0; /* Light text color for contrast */
+  background-color: #1a1a2e;
+  /* Dark blue/purple background */
+  color: #e0e0e0;
+  /* Light text color for contrast */
   display: grid;
   place-items: center;
 }
@@ -57,7 +58,8 @@ picture {
   max-width: 400px;
   margin: 0 auto;
   padding: 2.5rem;
-  background-color: #16213e; /* Slightly lighter dark blue */
+  background-color: #16213e;
+  /* Slightly lighter dark blue */
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   text-align: center;
@@ -100,7 +102,8 @@ picture {
   padding: 0.75rem;
   border: none;
   border-radius: 6px;
-  background-color: #7f5af0; /* Bright purple accent */
+  background-color: #7f5af0;
+  /* Bright purple accent */
   color: #ffffff;
   font-size: 1.1rem;
   font-weight: bold;
@@ -109,7 +112,8 @@ picture {
 }
 
 .btn-primary:hover {
-  background-color: #6a48d7; /* Darker purple on hover */
+  background-color: #6a48d7;
+  /* Darker purple on hover */
 }
 
 .login-footer {