diff --git a/src/App.css b/src/App.css
index e0d3f61..68730af 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,37 +1,3 @@
-@media (prefers-color-scheme: dark) {
-  * {
-    --textcolor: #f8f8f2;
-    --bgcolor: #21222c;
-    --lightbgcolor: #282a36;
-    --highlight: #50fa7b;
-    --red: #ff5555;
-    --orange: #ffb86c;
-    --yellow: #f1fa8c;
-    --purple: #bd93f9;
-    --cyan: #8be9fd;
-    --pink: #ff79c6;
-    --selection: #44475a;
-    --comment: #6272a4;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  * {
-    --bgcolor: #eaebf9;
-    --lightbgcolor: #f8f8f2;
-    --textcolor: #282a36;
-    --highlight: #008504;
-    --red: #d82f39;
-    --orange: #a0651b;
-    --yellow: #6c7908;
-    --purple: #855fbf;
-    --cyan: #007e90;
-    --pink: #c13f8e;
-    --selection: #c5c8de;
-    --comment: #7e8ec2;
-  }
-}
-
 body {
   background: var(--bgcolor);
   color: var(--textcolor);
@@ -47,100 +13,6 @@ a:hover {
   color: var(--cyan);
 }
 
-.accordion-button:after,
-.accordion-button:not(.collapsed):after {
-  filter: invert(58%) sepia(93%) saturate(2284%) hue-rotate(322deg)
-    brightness(95%) contrast(112%);
-}
-
-.modal-header {
-  border-bottom: 0;
-}
-
-.accordion-button,
-.accordion-button:after,
-.accordion-button:not(.collapsed):after,
-.accordion-flush,
-.accordion-item,
-.modal-item {
-  border-radius: 0.375rem;
-}
-
-.card,
-.dropdown,
-.dropdown-item,
-.dropdown-item:focus,
-.dropdown-item.disabled,
-.dropdown-item:disabled,
-.dropdown-item:hover {
-  background: var(--lightbgcolor);
-  color: var(--textcolor);
-}
-
-.navbar,
-.offcanvas-body,
-.offcanvas-header {
-  background: var(--bgcolor);
-  color: var(--textcolor);
-}
-
-.accordion,
-.accordion-button,
-.accordion-button:focus,
-.accordion-item,
-.accordion-item:focus,
-.dropdown-menu,
-.dropdown-menu.show {
-  background: var(--lightbgcolor);
-  border: 0 solid var(--comment);
-  border-radius: 0.375rem;
-  color: var(--textcolor);
-}
-
-.accordion-button:focus,
-.accordion-item:focus {
-  border-radius: 0.375rem;
-  box-shadow: 0 0 0 0.2rem rgba(189, 147, 249, 0.25);
-}
-
-.form-control,
-.input-group-text,
-.modal-content,
-.modal-item,
-input .input-group-text,
-input.form-control,
-input.text-end.form-control {
-  background: var(--lightbgcolor);
-  border: 1px solid var(--comment);
-  color: var(--textcolor);
-}
-
-.dropdown-item:focus,
-.dropdown-item:focus-visible,
-.dropdown-item:hover,
-.form-control:focus,
-input.text-end.form-control:focus {
-  background: var(--lightbgcolor);
-  border: 1px solid var(--pink);
-  box-shadow: 0 0 0;
-  color: var(--textcolor);
-}
-.straight-corners {
-  border-radius: 0;
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-inner-spin-button,
-input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
 .btn:focus-visible {
   background-color: var(--comment);
   box-shadow: none !important;
@@ -155,68 +27,12 @@ input[type="number"] {
 
 .btn-close,
 .btn-currency,
-.btn-delete,
-.btn-outline-secondary,
-.btn-text {
+.btn-outline-secondary {
   background-color: var(--lightbgcolor);
   border: 1px solid var(--comment);
   border-radius: 0.375rem;
 }
 
-.btn-delete {
-  color: var(--red);
-}
-
-.btn-delete:focus-visible,
-.btn-delete:hover {
-  background-color: var(--red);
-  border: 1px solid var(--red);
-  border-radius: 0.375rem;
-  color: var(--lightbgcolor);
-}
-
-.btn-Expenses-plus-button {
-  border: 1px solid var(--comment);
-  color: var(--purple);
-}
-
-.btn-Expenses-plus-button:focus-visible,
-.btn-Expenses-plus-button:hover {
-  background-color: var(--purple);
-  border: 1px solid var(--purple);
-  color: var(--lightbgcolor);
-}
-
-.btn-Revenue-plus-button {
-  border: 1px solid var(--comment);
-  color: var(--highlight);
-}
-
-.btn-Revenue-plus-button:focus-visible,
-.btn-Revenue-plus-button:hover {
-  background-color: var(--highlight);
-  border: 1px solid var(--highlight);
-  color: var(--lightbgcolor);
-}
-
-.btn-delete-modal,
-.btn-outline-danger {
-  background-color: var(--lightbgcolor);
-  border: 1px solid var(--comment);
-  border-radius: 0.375rem;
-  color: var(--red);
-}
-
-.btn-delete-modal:focus-visible,
-.btn-delete-modal:hover,
-.btn-outline-danger:focus-visible,
-.btn-outline-danger:hover {
-  background-color: var(--red);
-  border: 1px solid var(--red);
-  border-radius: 0.375rem;
-  color: var(--lightbgcolor);
-}
-
 .btn-outline-info {
   background-color: var(--lightbgcolor);
   border: 1px solid var(--comment);
@@ -262,58 +78,22 @@ input[type="number"] {
   color: var(--lightbgcolor);
 }
 
-.btn-text:hover {
-  background-color: var(--lightbgcolor);
-  color: var(--textcolor);
-}
-
-.btn-currency:hover {
-  background-color: var(--highlight);
-  color: var(--textcolor);
-}
-
-.btn-go-button {
-  background-color: var(--lightbgcolor);
-  border: 1px solid var(--comment);
-  color: var(--purple);
-}
-
-.btn-go-button:focus-visible,
-.btn-go-button:hover {
-  background-color: var(--purple);
-  border: 1px solid var(--purple);
-  color: var(--lightbgcolor);
-}
-
-.Expenses-card,
-.stat-card,
-.Revenue-card {
+.card {
   border: 1px solid var(--comment);
+  background: var(--lightbgcolor);
+  color: var(--textcolor);
 }
 
-.Expenses-card-header,
-.stat-card-header,
-.Revenue-card-header {
+.card-header {
   border-bottom: 1px solid var(--comment);
 }
 
-.stat-card-footer {
+.card-footer {
   border-top: 1px solid var(--comment);
 }
 
-.navbar .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='85'>💸</text></svg>");
-}
-
-.version {
-  color: var(--selection);
-  font-size: 0.9em;
-}
-
-.code,
 .fixed-width-font,
-.textarea,
-.version {
+.textarea {
   font-family:
     ui-monospace,
     SF Mono,
@@ -323,60 +103,46 @@ input[type="number"] {
     monospace;
 }
 
-.brand {
+.form-control,
+.input-group-text,
+input .input-group-text,
+input.form-control,
+input.text-end.form-control {
+  background: var(--lightbgcolor);
+  border: 1px solid var(--comment);
   color: var(--textcolor);
 }
 
-.pre,
-.textarea {
-  background: var(--selection);
-  border-radius: 0;
-  font-size: 0.9em;
-  margin: 0.8em 0 1em;
-  max-height: 35vh;
-  overflow: auto;
-  padding: 0.6em 0.9em;
+.form-control:focus,
+input.text-end.form-control:focus {
+  background: var(--lightbgcolor);
+  border: 1px solid var(--pink);
+  box-shadow: 0 0 0;
+  color: var(--textcolor);
 }
 
-.modal-90w {
-  max-width: none !important;
-  width: 90%;
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
-.modal-body {
-  max-height: 65vh;
-  overflow: auto;
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
 .input-group-sm > .form-control {
   font-size: 1rem;
 }
 
-.auto-goal,
-.navbar-toggler {
-  border: 1px solid var(--comment);
-  border-radius: 0.375rem;
-}
-
-.dropdown-menu {
-  min-width: inherit;
-  overflow-x: hidden !important;
-}
-
 .popover {
   border: 1px solid var(--comment);
   border-radius: 0.375rem;
   width: auto;
 }
 
-.toast {
-  border: 1px solid var(--comment);
-}
-.toast-container > :not(:last-child) {
-  margin-bottom: 0.75rem;
-}
-
-.toast,
 .popover,
 .popover-header {
   background: var(--lightbgcolor);
@@ -395,21 +161,17 @@ input[type="number"] {
   border-top-color: var(--comment);
 }
 
-input[type="text"]::placeholder {
-  color: var(--comment);
-  opacity: 1;
-}
-
-.recharts-default-tooltip,
-.recharts-tooltip-wrapper {
-  background-color: var(--lightbgcolor);
-  border: 1px solid var(--comment);
-}
-
-.progress {
-  background-color: var(--comment);
+.pre,
+.textarea {
+  background: var(--selection);
+  border-radius: 0;
+  font-size: 0.9em;
+  margin: 0.8em 0 1em;
+  max-height: 35vh;
+  overflow: auto;
+  padding: 0.6em 0.9em;
 }
 
-.progress-bar {
-  background-color: var(--pink);
+.straight-corners {
+  border-radius: 0;
 }
diff --git a/src/App.tsx b/src/App.tsx
index d2b8b67..e31eb60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import "./App.css";
+import "./colors.css";
 import BudgetPage from "./components/Budget/BudgetPage";
 import { BudgetProvider } from "./context/BudgetContext";
 import { ConfigProvider } from "./context/ConfigContext";
diff --git a/src/colors.css b/src/colors.css
new file mode 100644
index 0000000..f5c9184
--- /dev/null
+++ b/src/colors.css
@@ -0,0 +1,36 @@
+@media (prefers-color-scheme: dark) {
+  * {
+    --textcolor: #f8f8f2;
+    --bgcolor: #21222c;
+    --bs-body-color: #21222c;
+    --lightbgcolor: #282a36;
+    --highlight: #50fa7b;
+    --bs-success: #50fa7b;
+    --red: #ff5555;
+    --orange: #ffb86c;
+    --yellow: #f1fa8c;
+    --purple: #bd93f9;
+    --cyan: #8be9fd;
+    --pink: #ff79c6;
+    --selection: #44475a;
+    --comment: #6272a4;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  * {
+    --bgcolor: #eaebf9;
+    --lightbgcolor: #f8f8f2;
+    --textcolor: #282a36;
+    --highlight: #008504;
+    --bs-success: #008504;
+    --red: #d82f39;
+    --orange: #a0651b;
+    --yellow: #6c7908;
+    --purple: #855fbf;
+    --cyan: #007e90;
+    --pink: #c13f8e;
+    --selection: #c5c8de;
+    --comment: #7e8ec2;
+  }
+}
diff --git a/src/components/CalculateButton/CalculateButton.css b/src/components/CalculateButton/CalculateButton.css
new file mode 100644
index 0000000..a1d7323
--- /dev/null
+++ b/src/components/CalculateButton/CalculateButton.css
@@ -0,0 +1,31 @@
+.dropdown,
+.dropdown-item,
+.dropdown-item:focus,
+.dropdown-item.disabled,
+.dropdown-item:disabled,
+.dropdown-item:hover {
+  background: var(--lightbgcolor);
+  color: var(--textcolor);
+}
+
+.dropdown-item:focus,
+.dropdown-item:focus-visible,
+.dropdown-item:hover {
+  background: var(--lightbgcolor);
+  border: 1px solid var(--pink);
+  box-shadow: 0 0 0;
+  color: var(--textcolor);
+}
+
+.dropdown-menu {
+  min-width: inherit;
+  overflow-x: hidden !important;
+}
+
+.dropdown-menu,
+.dropdown-menu.show {
+  background: var(--lightbgcolor);
+  border: 0 solid var(--comment);
+  border-radius: 0.375rem;
+  color: var(--textcolor);
+}
diff --git a/src/components/CalculateButton/CalculateButton.tsx b/src/components/CalculateButton/CalculateButton.tsx
index 2c55ffb..a7c6368 100644
--- a/src/components/CalculateButton/CalculateButton.tsx
+++ b/src/components/CalculateButton/CalculateButton.tsx
@@ -11,6 +11,7 @@ import { BsCheckLg, BsDashLg, BsPlusSlashMinus, BsXLg } from "react-icons/bs";
 import { CgMathDivide, CgMathPlus } from "react-icons/cg";
 import { useConfig } from "../../context/ConfigContext";
 import { ItemForm } from "../ItemForm/ItemForm";
+import "./CalculateButton.css";
 
 interface CalculateButtonProps {
   itemForm: ItemForm;
diff --git a/src/components/Chart/Chart.css b/src/components/Chart/Chart.css
new file mode 100644
index 0000000..377f987
--- /dev/null
+++ b/src/components/Chart/Chart.css
@@ -0,0 +1,5 @@
+.recharts-default-tooltip,
+.recharts-tooltip-wrapper {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+}
diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
index 2420fd6..e607e55 100644
--- a/src/components/Chart/Chart.tsx
+++ b/src/components/Chart/Chart.tsx
@@ -12,6 +12,7 @@ import {
 import { useBudget } from "../../context/BudgetContext";
 import { useConfig } from "../../context/ConfigContext";
 import { intlFormat, median } from "../../utils";
+import "./Chart.css";
 import ChartTooltip from "./ChartTooltip";
 import useDynamicYAxisWidth from "./DynamicYAxis";
 
diff --git a/src/components/ChartsPage/ChartsPage.tsx b/src/components/ChartsPage/ChartsPage.tsx
index eefe223..8c8f489 100644
--- a/src/components/ChartsPage/ChartsPage.tsx
+++ b/src/components/ChartsPage/ChartsPage.tsx
@@ -41,7 +41,7 @@ function ChartsPage({ onShowGraphs }: GraphProps) {
         <Button
           className="me-1 mb-1 mt-3"
           aria-label={"go back to budgets"}
-          variant={"Expenses-plus-button"}
+          variant={"go-button"}
           onClick={handleShowGraphs}
         >
           <BsArrowLeft />
diff --git a/src/components/ErrorModal/ErrorModal.css b/src/components/ErrorModal/ErrorModal.css
new file mode 100644
index 0000000..1979579
--- /dev/null
+++ b/src/components/ErrorModal/ErrorModal.css
@@ -0,0 +1,67 @@
+.accordion-button:after,
+.accordion-button:not(.collapsed):after {
+  filter: invert(58%) sepia(93%) saturate(2284%) hue-rotate(322deg)
+    brightness(95%) contrast(112%);
+}
+
+.accordion-button,
+.accordion-button:after,
+.accordion-button:not(.collapsed):after,
+.accordion-flush,
+.accordion-item,
+.modal-item {
+  border-radius: 0.375rem;
+}
+
+.accordion-button:focus,
+.accordion-item:focus {
+  border-radius: 0.375rem;
+  box-shadow: 0 0 0 0.2rem rgba(189, 147, 249, 0.25);
+}
+
+.accordion,
+.accordion-button,
+.accordion-button:focus,
+.accordion-item,
+.accordion-item:focus {
+  background: var(--lightbgcolor);
+  border: 0 solid var(--comment);
+  border-radius: 0.375rem;
+  color: var(--textcolor);
+}
+
+.btn-delete-modal {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  border-radius: 0.375rem;
+  color: var(--red);
+}
+
+.btn-delete-modal:focus-visible,
+.btn-delete-modal:hover {
+  background-color: var(--red);
+  border: 1px solid var(--red);
+  border-radius: 0.375rem;
+  color: var(--lightbgcolor);
+}
+
+.modal-90w {
+  max-width: none !important;
+  width: 90%;
+}
+
+.modal-body {
+  max-height: 65vh;
+  overflow: auto;
+}
+
+.modal-content,
+.modal-item {
+  background: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  color: var(--textcolor);
+}
+
+.modal-header {
+  border-bottom: 0;
+}
diff --git a/src/components/ErrorModal/ErrorModal.tsx b/src/components/ErrorModal/ErrorModal.tsx
index 31e663a..e145ef0 100644
--- a/src/components/ErrorModal/ErrorModal.tsx
+++ b/src/components/ErrorModal/ErrorModal.tsx
@@ -1,6 +1,7 @@
 import { ParseError } from "papaparse";
 import { Accordion, Button, Modal } from "react-bootstrap";
 import { BsXLg } from "react-icons/bs";
+import "./ErrorModal.css";
 
 export interface CsvError {
   errors: ParseError[];
@@ -109,7 +110,7 @@ function ErrorModal({
                     {jsonError.file}
                   </Accordion.Header>
                   <Accordion.Body
-                    className="textarea code mx-1"
+                    className="textarea fixed-width-font mx-1"
                     key={`${jsonError.file}-body-${i}`}
                   >
                     <p className="code" key={`${jsonError.file}-error-${i}`}>
@@ -167,7 +168,7 @@ function ErrorModal({
                     {csvError.file}
                   </Accordion.Header>
                   <Accordion.Body
-                    className="textarea code mx-1"
+                    className="textarea fixed-width-font mx-1"
                     key={`${csvError.file}-body-${i}`}
                   >
                     <p className="code" key={`${csvError.file}-csverror-${i}`}>
diff --git a/src/components/ItemForm/ItemFormGroup.css b/src/components/ItemForm/ItemFormGroup.css
new file mode 100644
index 0000000..8fe85d6
--- /dev/null
+++ b/src/components/ItemForm/ItemFormGroup.css
@@ -0,0 +1,17 @@
+.btn-delete {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  border-radius: 0.375rem;
+}
+
+.btn-delete {
+  color: var(--red);
+}
+
+.btn-delete:focus-visible,
+.btn-delete:hover {
+  background-color: var(--red);
+  border: 1px solid var(--red);
+  border-radius: 0.375rem;
+  color: var(--lightbgcolor);
+}
diff --git a/src/components/ItemForm/ItemFormGroup.tsx b/src/components/ItemForm/ItemFormGroup.tsx
index 6edb375..09596cc 100644
--- a/src/components/ItemForm/ItemFormGroup.tsx
+++ b/src/components/ItemForm/ItemFormGroup.tsx
@@ -13,6 +13,7 @@ import { useConfig } from "../../context/ConfigContext";
 import { calc, parseLocaleNumber } from "../../utils";
 import CalculateButton from "../CalculateButton/CalculateButton";
 import { ItemForm } from "./ItemForm";
+import "./ItemFormGroup.css";
 
 interface ItemFormProps {
   itemForm: ItemForm;
diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
new file mode 100644
index 0000000..5b5897e
--- /dev/null
+++ b/src/components/NavBar/NavBar.css
@@ -0,0 +1,80 @@
+.brand {
+  color: var(--textcolor);
+}
+
+.btn-go-button {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  color: var(--purple);
+}
+
+.btn-go-button:focus-visible,
+.btn-go-button:hover {
+  background-color: var(--purple);
+  border: 1px solid var(--purple);
+  color: var(--lightbgcolor);
+}
+
+.btn-outline-danger {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  border-radius: 0.375rem;
+  color: var(--red);
+}
+
+.btn-outline-danger:focus-visible,
+.btn-outline-danger:hover {
+  background-color: var(--red);
+  border: 1px solid var(--red);
+  border-radius: 0.375rem;
+  color: var(--lightbgcolor);
+}
+
+.btn-outline-info {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  border-radius: 0.375rem;
+  color: var(--cyan);
+}
+
+.btn-outline-info:focus-visible,
+.btn-outline-info:hover {
+  background-color: var(--cyan);
+  border: 1px solid var(--cyan);
+  border-radius: 0.375rem;
+  color: var(--lightbgcolor);
+}
+
+/* Search input placeholder */
+input[type="text"]::placeholder {
+  color: var(--comment);
+  opacity: 1;
+}
+
+.navbar,
+.offcanvas-body,
+.offcanvas-header {
+  background: var(--bgcolor);
+  color: var(--textcolor);
+}
+
+.navbar .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='85'>💸</text></svg>");
+}
+
+.navbar-toggler {
+  border: 1px solid var(--comment);
+  border-radius: 0.375rem;
+}
+
+.version {
+  color: var(--selection);
+  font-family:
+    ui-monospace,
+    SF Mono,
+    Menlo,
+    Monaco,
+    Andale Mono,
+    monospace;
+  font-size: 0.9em;
+}
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index a4ab824..78fe6be 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -24,6 +24,7 @@ import { budgetsDB } from "../../context/db";
 import { currenciesList } from "../../lists/currenciesList";
 import { focusRef } from "../../utils";
 import { Budget } from "../Budget/Budget";
+import "./NavBar.css";
 import { NavBarDelete } from "./NavBarDelete";
 import { NavBarExport } from "./NavBarExport";
 import { NavBarItem } from "./NavBarItem";
diff --git a/src/components/NavBar/NavBarItem.tsx b/src/components/NavBar/NavBarItem.tsx
index 1a79e6a..cfc3880 100644
--- a/src/components/NavBar/NavBarItem.tsx
+++ b/src/components/NavBar/NavBarItem.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { Button, Nav, OverlayTrigger, Tooltip } from "react-bootstrap";
+import "./NavBar.css";
 
 interface NavItemProps {
   itemClassName: string;
diff --git a/src/components/Notification/Notification.css b/src/components/Notification/Notification.css
new file mode 100644
index 0000000..624f045
--- /dev/null
+++ b/src/components/Notification/Notification.css
@@ -0,0 +1,9 @@
+.toast-container > :not(:last-child) {
+  margin-bottom: 0.75rem;
+}
+
+.toast {
+  background: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  color: var(--textcolor);
+}
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index 2d9cb32..7348203 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -1,5 +1,6 @@
 import { Button, Toast } from "react-bootstrap";
 import { BsX } from "react-icons/bs";
+import "./Notification.css";
 
 interface NotificationProps {
   notification: { show: boolean; id?: string; body?: string };
diff --git a/src/components/StatCard/StatCard.css b/src/components/StatCard/StatCard.css
new file mode 100644
index 0000000..0b44806
--- /dev/null
+++ b/src/components/StatCard/StatCard.css
@@ -0,0 +1,13 @@
+.auto-goal {
+  border: 1px solid var(--comment);
+  border-radius: 0.375rem;
+}
+
+.progress {
+  background-color: var(--comment);
+  height: 3px;
+}
+
+.progress-bar {
+  background-color: var(--pink);
+}
diff --git a/src/components/StatCard/StatCard.tsx b/src/components/StatCard/StatCard.tsx
index 089dca9..b14f25f 100644
--- a/src/components/StatCard/StatCard.tsx
+++ b/src/components/StatCard/StatCard.tsx
@@ -17,6 +17,7 @@ import { useBudget } from "../../context/BudgetContext";
 import { useConfig } from "../../context/ConfigContext";
 import { focusRef, parseLocaleNumber } from "../../utils";
 import { Stat } from "./Stat";
+import "./StatCard.css";
 
 interface StatCardProps {
   onChange: (stat: Stat | undefined) => void;
@@ -96,7 +97,6 @@ function StatCard({ onChange, onAutoGoal, onShowGraphs }: StatCardProps) {
                 now={revenuePercentage}
                 label={`${revenuePercentage}%`}
                 visuallyHidden
-                style={{ height: "3px" }}
               />
             </Col>
           </OverlayTrigger>
diff --git a/src/components/TableCard/TableCard.css b/src/components/TableCard/TableCard.css
new file mode 100644
index 0000000..a58b103
--- /dev/null
+++ b/src/components/TableCard/TableCard.css
@@ -0,0 +1,33 @@
+.btn-Expenses-plus-button {
+  border: 1px solid var(--comment);
+  color: var(--purple);
+}
+
+.btn-Expenses-plus-button:focus-visible,
+.btn-Expenses-plus-button:hover {
+  background-color: var(--purple);
+  border: 1px solid var(--purple);
+  color: var(--lightbgcolor);
+}
+
+.btn-Revenue-plus-button {
+  border: 1px solid var(--comment);
+  color: var(--highlight);
+}
+
+.btn-Revenue-plus-button:focus-visible,
+.btn-Revenue-plus-button:hover {
+  background-color: var(--highlight);
+  border: 1px solid var(--highlight);
+  color: var(--lightbgcolor);
+}
+
+.Expenses-card,
+.Revenue-card {
+  border: 1px solid var(--comment);
+}
+
+.Expenses-card-header,
+.Revenue-card-header {
+  border-bottom: 1px solid var(--comment);
+}
diff --git a/src/components/TableCard/TableCard.tsx b/src/components/TableCard/TableCard.tsx
index 54d6af8..c0db4dd 100644
--- a/src/components/TableCard/TableCard.tsx
+++ b/src/components/TableCard/TableCard.tsx
@@ -16,6 +16,7 @@ import { ItemForm } from "../ItemForm/ItemForm";
 import ItemFormGroup from "../ItemForm/ItemFormGroup";
 import { Expense } from "./Expense";
 import { Income } from "./Income";
+import "./TableCard.css";
 
 interface TableCardProps {
   items: Income | Expense;