diff --git a/web/index.html b/web/index.html
index 11603f8..791426e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
-  <body>
+  <body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/web/src/App.vue b/web/src/App.vue
index 3a3f3de..5c97623 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -28,7 +28,7 @@ export default defineComponent({
 
 <template>
     <div class="box-border w-full">
-        <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
+        <div class="flex bg-gray-400 dark:bg-gray-600 p-4 m-2 rounded-lg">
             <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
             <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
 
diff --git a/web/src/components/Card.vue b/web/src/components/Card.vue
index 0d42921..6464848 100644
--- a/web/src/components/Card.vue
+++ b/web/src/components/Card.vue
@@ -2,7 +2,7 @@
 </script>
 
 <template>
-    <div class="flex flex-row items-center bg-gray-300 rounded-lg">
+    <div class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
         <slot></slot>
     </div>
 </template>
\ No newline at end of file
diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
index d5f2fff..231b4a1 100644
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@@ -46,12 +46,12 @@ function getStatusSymbol() {
 
 <template>
     <tr v-if="dateChanged()" class="table-row md:hidden">
-        <td class="bg-gray-200 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td>
+        <td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td>
     </tr>
     <tr
         v-if="!edit"
         class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
-        :class="[index % 6 < 3 ? 'md:bg-gray-300' : 'md:bg-gray-100']"
+        :class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
     >
         <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
         <td class="hidden md:block">{{ formatDate(TX.Date) }}</td>
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 7d27884..6e14d9b 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -68,7 +68,7 @@ function createReconcilationTransaction() {
             </span>
         </div>
 
-        <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
+        <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 dark:bg-gray-800 rounded-lg p-2">
             Is
             <Currency :value="transactions.ReconcilingBalance" />your current balance?
             <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 1f08803..e9125e4 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -24,12 +24,12 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       <router-link to="/dashboard">⌂</router-link>
       {{CurrentBudgetName}}
     </span>
-    <span class="bg-orange-200 rounded-lg m-1 p-1 px-3 flex flex-col">
+    <span class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3 flex flex-col">
       <router-link :to="'/budget/'+CurrentBudgetID+'/budgeting'">Budget</router-link><br />
       <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
       <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
     </span>
-    <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
+    <li class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>On-Budget Accounts</span>
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
@@ -39,7 +39,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
       </div>
     </li>
-    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
+    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Off-Budget Accounts</span>
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
@@ -49,7 +49,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
         <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
       </div>
     </li>
-    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
+    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Closed Accounts</span>
       </div>
@@ -57,10 +57,10 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
     <!--<li>
       <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
     </li>-->
-    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
+    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
       + Add Account
     </li>
-    <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
+    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
       <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
     </li>
     <!--<li><router-link to="/admin">Admin</router-link></li>-->
