diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..d9af94a
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "optimal-human"
+  }
+}
diff --git a/.github/workflow/main.yaml b/.github/workflow/main.yaml
deleted file mode 100644
index c14ce73..0000000
--- a/.github/workflow/main.yaml
+++ /dev/null
@@ -1,33 +0,0 @@
-name: Daily Timebox App CI
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout Repository
-      uses: actions/checkout@v2
-
-    - name: Set up Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: '16'
-
-    - name: Install Dependencies
-      run: npm install
-
-    - name: Run Linter
-      run: npm run lint
-
-    - name: Run Tests
-      run: npm test
-
-    - name: Build Project
-      run: npm run build
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
new file mode 100644
index 0000000..c66ea87
--- /dev/null
+++ b/.github/workflows/firebase-hosting-merge.yml
@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_OPTIMAL_HUMAN }}
+          channelId: live
+          projectId: optimal-human
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
new file mode 100644
index 0000000..0f06456
--- /dev/null
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -0,0 +1,21 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+on: pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+jobs:
+  build_and_preview:
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_OPTIMAL_HUMAN }}
+          projectId: optimal-human
diff --git a/.gitignore b/.gitignore
index 615d092..1f41c93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .env
-TODO
\ No newline at end of file
+TODO
+.firebase
\ No newline at end of file
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 0000000..93fb369
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/index.html b/index.html
deleted file mode 100644
index c3166c6..0000000
--- a/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Daily Timebox</title>
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
-    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
-</head>
-<body class="bg-yellow-50 min-h-screen flex justify-center items-center p-4">
-    <div class="relative w-full max-w-4xl">
-        <div id="currentTimebox" class="bg-white p-6 shadow-lg relative transition-transform duration-600 backface-hidden">
-            <div id="scheduleHeader" class="font-bold text-sm mb-2">OPTIMAL HUMAN</div>
-            <h1 class="text-xl font-bold mb-4">DAILY TIMEBOX</h1>
-            <div class="mb-4 flex items-center">
-                <input type="text" id="dateInput" placeholder="DATE: / /" class="w-full border-b border-gray-300 pb-1 focus:outline-none focus:border-gray-600">
-                <button id="prevDate" class="ml-2 px-2 py-1 bg-gray-200 rounded">&lt;</button>
-                <button id="nextDate" class="ml-2 px-2 py-1 bg-gray-200 rounded">&gt;</button>
-            </div>
-            <div class="flex flex-col lg:flex-row gap-6">
-                <div class="flex-grow lg:w-1/2">
-                    <div class="mb-6">
-                        <h2 class="text-sm font-bold mb-1">3 TOP TASKS</h2>
-                        <p class="text-xs text-gray-600 mb-2">What can you accomplish today to meet your weekly outcomes?</p>
-                        <ul class="space-y-2">
-                            <li class="flex items-center border-b border-gray-200">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full py-1 focus:outline-none" placeholder="Enter top task 1">
-                            </li>
-                            <li class="flex items-center border-b border-gray-200">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full py-1 focus:outline-none" placeholder="Enter top task 2">
-                            </li>
-                            <li class="flex items-center border-b border-gray-200">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full py-1 focus:outline-none" placeholder="Enter top task 3">
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="mb-6">
-                        <h2 class="text-sm font-bold mb-1">SECONDARY TASKS</h2>
-                        <ul class="space-y-2">
-                            <li class="flex items-center border-b border-gray-200">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full py-1 focus:outline-none" placeholder="Enter secondary task 1">
-                            </li>
-                            <li class="flex items-center border-b border-gray-200">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full py-1 focus:outline-none" placeholder="Enter secondary task 2">
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="border border-gray-300 p-4">
-                        <h2 class="text-sm font-bold mb-1">Task Brain Dump</h2>
-                        <p class="text-xs text-gray-600 mb-2">Dump all of the tasks that you want to complete</p>
-                        <div id="brainDumpLines" class="space-y-2">
-                            <div class="flex items-center">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none" placeholder="Enter task">
-                            </div>
-                            <div class="flex items-center">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none" placeholder="Enter task">
-                            </div>
-                            <div class="flex items-center">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none" placeholder="Enter task">
-                            </div>
-                            <div class="flex items-center">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none" placeholder="Enter task">
-                            </div>
-                            <div class="flex items-center">
-                                <input type="checkbox" class="mr-2">
-                                <input type="text" class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none" placeholder="Enter task">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="lg:w-1/2">
-                    <div class="grid grid-cols-2 gap-1">
-                        <div class="text-xs text-gray-600 text-right pr-2">3am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                        <div class="text-xs text-gray-600 text-right pr-2">4am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                        <div class="text-xs text-gray-600 text-right pr-2">5am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                        <div class="text-xs text-gray-600 text-right pr-2">6am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                        <div class="text-xs text-gray-600 text-right pr-2">7am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                        <div class="text-xs text-gray-600 text-right pr-2">8am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                        <div class="text-xs text-gray-600 text-right pr-2">9am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                        <div class="text-xs text-gray-600 text-right pr-2">10am</div><input type="text" class="text-xs border-b border-gray-200 focus:outline-none">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script src="script.js"></script>
-</body>
-</html>
-
-
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..1a8d4c4
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Daily Timebox</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
+</head>
+
+<body class="bg-yellow-50 min-h-screen flex justify-center items-center p-4">
+    <div class="relative w-full max-w-4xl">
+        <div id="currentTimebox"
+            class="bg-white p-6 shadow-lg relative transition-transform duration-600 backface-hidden">
+            <div id="scheduleHeader" class="font-bold text-sm mb-2">OPTIMAL HUMAN</div>
+            <h1 class="text-xl font-bold mb-4">DAILY TIMEBOX</h1>
+            <div class="mb-4 flex items-center">
+                <input type="text" id="dateInput" placeholder="DATE: / /"
+                    class="w-full border-b border-gray-300 pb-1 focus:outline-none focus:border-gray-600">
+                <button id="prevDate" class="ml-2 px-2 py-1 bg-gray-200 rounded">&lt;</button>
+                <button id="nextDate" class="ml-2 px-2 py-1 bg-gray-200 rounded">&gt;</button>
+            </div>
+            <div class="flex flex-col lg:flex-row gap-6">
+                <div class="flex-grow lg:w-1/2">
+                    <div class="mb-6">
+                        <h2 class="text-sm font-bold mb-1">3 TOP TASKS</h2>
+                        <p class="text-xs text-gray-600 mb-2">What can you accomplish today to meet your weekly
+                            outcomes?</p>
+                        <ul class="space-y-2">
+                            <li class="flex items-center border-b border-gray-200">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text" class="w-full py-1 focus:outline-none"
+                                    placeholder="Enter top task 1">
+                            </li>
+                            <li class="flex items-center border-b border-gray-200">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text" class="w-full py-1 focus:outline-none"
+                                    placeholder="Enter top task 2">
+                            </li>
+                            <li class="flex items-center border-b border-gray-200">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text" class="w-full py-1 focus:outline-none"
+                                    placeholder="Enter top task 3">
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mb-6">
+                        <h2 class="text-sm font-bold mb-1">SECONDARY TASKS</h2>
+                        <ul class="space-y-2">
+                            <li class="flex items-center border-b border-gray-200">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text" class="w-full py-1 focus:outline-none"
+                                    placeholder="Enter secondary task 1">
+                            </li>
+                            <li class="flex items-center border-b border-gray-200">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text" class="w-full py-1 focus:outline-none"
+                                    placeholder="Enter secondary task 2">
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="border border-gray-300 p-4">
+                        <h2 class="text-sm font-bold mb-1">Task Brain Dump</h2>
+                        <p class="text-xs text-gray-600 mb-2">Dump all of the tasks that you want to complete</p>
+                        <div id="brainDumpLines" class="space-y-2">
+                            <div class="flex items-center">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text"
+                                    class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none"
+                                    placeholder="Enter task">
+                            </div>
+                            <div class="flex items-center">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text"
+                                    class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none"
+                                    placeholder="Enter task">
+                            </div>
+                            <div class="flex items-center">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text"
+                                    class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none"
+                                    placeholder="Enter task">
+                            </div>
+                            <div class="flex items-center">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text"
+                                    class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none"
+                                    placeholder="Enter task">
+                            </div>
+                            <div class="flex items-center">
+                                <input type="checkbox" class="mr-2">
+                                <input type="text"
+                                    class="w-full border-b border-gray-200 py-1 text-xs focus:outline-none"
+                                    placeholder="Enter task">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <div class="grid grid-cols-2 gap-1">
+                        <div class="text-xs text-gray-600 text-right pr-2">3am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                        <div class="text-xs text-gray-600 text-right pr-2">4am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                        <div class="text-xs text-gray-600 text-right pr-2">5am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                        <div class="text-xs text-gray-600 text-right pr-2">6am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                        <div class="text-xs text-gray-600 text-right pr-2">7am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                        <div class="text-xs text-gray-600 text-right pr-2">8am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                        <div class="text-xs text-gray-600 text-right pr-2">9am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                        <div class="text-xs text-gray-600 text-right pr-2">10am</div><input type="text"
+                            class="text-xs border-b border-gray-200 focus:outline-none">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const dateInput = document.getElementById('dateInput');
+            const prevDateBtn = document.getElementById('prevDate');
+            const nextDateBtn = document.getElementById('nextDate');
+            const scheduleHeader = document.getElementById('scheduleHeader');
+            const topTasks = document.querySelectorAll('#currentTimebox ul:first-of-type input[type="text"]');
+            const topTasksCheckboxes = document.querySelectorAll('#currentTimebox ul:first-of-type input[type="checkbox"]');
+            const secondaryTasks = document.querySelectorAll('#currentTimebox ul:nth-of-type(2) input[type="text"]');
+            const secondaryTasksCheckboxes = document.querySelectorAll('#currentTimebox ul:nth-of-type(2) input[type="checkbox"]');
+            const brainDumpTasks = document.querySelectorAll('#brainDumpLines input[type="text"]');
+            const brainDumpCheckboxes = document.querySelectorAll('#brainDumpLines input[type="checkbox"]');
+            const timeboxInputs = document.querySelectorAll('#currentTimebox .grid input[type="text"]');
+
+            let currentDate = new Date();
+
+            // Initialize Flatpickr
+            const fp = flatpickr(dateInput, {
+                dateFormat: "m/d/Y",
+                onChange: function (selectedDates, dateStr, instance) {
+                    currentDate = selectedDates[0];
+                    updateSchedule();
+                }
+            });
+
+            function formatDate(date) {
+                return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
+            }
+
+            function updateSchedule() {
+                const formattedDate = formatDate(currentDate);
+                dateInput.value = formattedDate;
+                loadFromLocalStorage(formattedDate);
+                updateHeaderColor();
+            }
+
+            function updateHeaderColor() {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                currentDate.setHours(0, 0, 0, 0);
+
+                if (currentDate.getTime() === today.getTime()) {
+                    scheduleHeader.classList.add('text-green-500');
+                    scheduleHeader.classList.remove('text-blue-500', 'text-orange-500');
+                } else if (currentDate > today) {
+                    scheduleHeader.classList.add('text-blue-500');
+                    scheduleHeader.classList.remove('text-green-500', 'text-orange-500');
+                } else {
+                    scheduleHeader.classList.add('text-orange-500');
+                    scheduleHeader.classList.remove('text-green-500', 'text-blue-500');
+                }
+            }
+
+            function loadFromLocalStorage(date) {
+                const savedData = JSON.parse(localStorage.getItem(`dailyTimeboxData_${date}`)) || {};
+
+                topTasks.forEach((task, index) => task.value = savedData.topTasks?.[index] || '');
+                topTasksCheckboxes.forEach((checkbox, index) => checkbox.checked = savedData.topTasksCheckboxes?.[index] || false);
+                secondaryTasks.forEach((task, index) => task.value = savedData.secondaryTasks?.[index] || '');
+                secondaryTasksCheckboxes.forEach((checkbox, index) => checkbox.checked = savedData.secondaryTasksCheckboxes?.[index] || false);
+                brainDumpTasks.forEach((task, index) => task.value = savedData.brainDumpTasks?.[index] || '');
+                brainDumpCheckboxes.forEach((checkbox, index) => checkbox.checked = savedData.brainDumpCheckboxes?.[index] || false);
+                timeboxInputs.forEach((input, index) => input.value = savedData.timeboxInputs?.[index] || '');
+            }
+
+            function saveToLocalStorage() {
+                const formattedDate = formatDate(currentDate);
+                const dataToSave = {
+                    topTasks: Array.from(topTasks).map(task => task.value),
+                    topTasksCheckboxes: Array.from(topTasksCheckboxes).map(checkbox => checkbox.checked),
+                    secondaryTasks: Array.from(secondaryTasks).map(task => task.value),
+                    secondaryTasksCheckboxes: Array.from(secondaryTasksCheckboxes).map(checkbox => checkbox.checked),
+                    brainDumpTasks: Array.from(brainDumpTasks).map(task => task.value),
+                    brainDumpCheckboxes: Array.from(brainDumpCheckboxes).map(checkbox => checkbox.checked),
+                    timeboxInputs: Array.from(timeboxInputs).map(input => input.value)
+                };
+                localStorage.setItem(`dailyTimeboxData_${formattedDate}`, JSON.stringify(dataToSave));
+            }
+
+            prevDateBtn.addEventListener('click', () => {
+                currentDate.setDate(currentDate.getDate() - 1);
+                updateSchedule();
+            });
+
+            nextDateBtn.addEventListener('click', () => {
+                currentDate.setDate(currentDate.getDate() + 1);
+                updateSchedule();
+            });
+
+            // Load saved data on page load
+            updateSchedule();
+
+            // Save data when inputs change
+            [dateInput, ...topTasks, ...topTasksCheckboxes, ...secondaryTasks, ...secondaryTasksCheckboxes, ...brainDumpTasks, ...brainDumpCheckboxes, ...timeboxInputs].forEach(input => {
+                input.addEventListener('input', saveToLocalStorage);
+                input.addEventListener('change', saveToLocalStorage);
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
