diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 75576a8b2..06c93ac67 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -1,6 +1,6 @@
 // order matters!
 import 'antd/dist/antd.css';
-import '../styles/colors.scss';
+import '../styles/variables.scss';
 import '../styles/ant-overrides.scss';
 import '../styles/markdown-editor.scss';
 import '../styles/globals.scss';
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 52e7cbbab..7872130ff 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -35,14 +35,27 @@ h5.ant-typography,
 .ant-typography h3,
 .ant-typography h4,
 .ant-typography h5 {
-  color: var(--default-text-color);
+  color: var(--white);
   font-weight: 500;
 }
-
 .ant-typography.ant-typography-secondary {
-  color: rgba(255,255,255,.85);
+  color: var(--white);
   font-weight: 400;
 }
+.ant-typography {
+  a {
+    color: var(--owncast-purple);
+  }
+}
+.ant-typography h1,
+h1.ant-typography {
+  color: var(--white);
+}
+.ant-typography h2,
+h2.ant-typography{
+  color: var(--pink);
+}
+
 
 .ant-progress-text,
 .ant-progress-circle .ant-progress-text {
@@ -66,21 +79,26 @@ h5.ant-typography,
     color: var(--nav-text);
 
     &:hover {
-      color: white;
+      color: var(--white);
     }
   }
   &:hover {
-    background-color: rgba(0,0,0,.15);
-
+    background-color: var(--black-50);
+    color: var(--white);
     .anticon {
-      color: white;
+      color: var(--white);
     }
   }
 }
+.ant-menu-item:active, 
+.ant-menu-submenu-title:active {
+  background-color: var(--black-50);
+}
+
 // menu item selected
 .ant-menu-item-selected,
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-  background-color: black;
+  background-color: var(--black);
   a {
     color: var(--nav-selected-text);
   }
@@ -97,8 +115,8 @@ h5.ant-typography,
 // submenu items
 .ant-menu-submenu {
   &> .ant-menu {
-    border-left: 1px solid rgba(255,255,255,.4);
-    background-color: rgba(0,0,0,.15);
+    border-left: 1px solid var(--white-50);
+    background-color: var(--black-35);
   }
   .ant-menu-submenu-title {
     transition-duration: var(--ant-transition-duration);
@@ -117,14 +135,14 @@ h5.ant-typography,
   }
   &:hover {
     .ant-menu-submenu-title {
-      color: white;
+      color: var(--white);
       .anticon {
-        color: white;
+        color: var(--white);
       }
       .ant-menu-submenu-arrow {
         &:before,
         &:after {
-          background-image: linear-gradient(to right, white, white);
+          background-image: linear-gradient(to right, var(--white), var(--white));
         }
       }
     }
@@ -137,7 +155,7 @@ h5.ant-typography,
   color: var(--default-text-color);
 }
 .ant-result-subtitle {
-  color: var(--default-text-color);
+  color: var(--white-75);
 }
 
 
@@ -148,13 +166,21 @@ h5.ant-typography,
   color: var(--default-text-color);
 }
 .ant-card-bordered {
-  border-color: rgba(255,255,255,.25);
+  border-color: var(--white-25);
+}
+.ant-card-meta-title {
+  color: var(--white);
 }
-.ant-card-meta-title,
 .ant-card-meta-description {
-  color: white;
+  color: var(--white-75);
+}
+.ant-card {
+  .ant-statistic,
+  .ant-statistic-title,
+  .ant-statistic-content {
+    color: var(--default-text-color);
+  }
 }
-
 
 
 // ANT INPUT
@@ -165,10 +191,10 @@ h5.ant-typography,
   input,
   textarea {
     background-color: transparent;
-    color: rgba(255,255,255,.85);
-    border-color: rgba(0,0,0,1);
+    color: var(--white-88);
+    border-color: var(--black);
     &::placeholder {
-      color: var(--textfield-border);
+      color: var(--owncast-purple-50);
     }
     &:-webkit-autofill {
       background-color: transparent;
@@ -177,10 +203,10 @@ h5.ant-typography,
 }
 .ant-input-number:hover,
 .ant-input-affix-wrapper:hover {
-  border-color: var(--owncast-purple-highlight);
+  border-color: var(--owncast-purple);
   input,
   textarea {
-    border-color: var(--owncast-purple-highlight);
+    border-color: var(--owncast-purple);
   }
 }
 .ant-input-number:focus,
@@ -189,13 +215,13 @@ h5.ant-typography,
   border-color: var(--owncast-purple);
   input,
   textarea {
-    color: white;
+    color: var(--white);
     border-color: var(--owncast-purple);
   }
 }
 .ant-input-textarea-clear-icon,
 .ant-input-clear-icon {
-  color: rgba(255,255,255,.5);
+  color: var(--white-55);
 }
 textarea.ant-input {
   padding-right: 25px;
@@ -211,20 +237,20 @@ textarea.ant-input {
 }
 .ant-btn-primary:hover, 
 .ant-btn-primary:focus {
-  background-color: var(--form-focused);
-  border-color: var(--form-focused);
+  background-color: var(--button-focused);
+  border-color: var(--button-focused);
 }
 .ant-btn.ant-btn-primary:hover {
-  border-color: white;
+  border-color: var(--white);
 }
 .ant-btn-primary[disabled] {
-  background-color: rgba(255,255,255,.2);
-  border-color: rgba(255,255,255,.2);
-  color: white;
+  background-color: var(--white-25);
+  border-color: var(--white-25);
+  color: var(--white-50);
 
   &:hover {
-    background-color: rgba(255,255,255,.2);
-    border-color: rgba(255,255,255,.2);
+    background-color: var(--white-35);
+    border-color: var(--white-35);
   }
 }
 .ant-input-affix-wrapper,
@@ -233,30 +259,31 @@ textarea.ant-input {
   transition-duration: 0.15s;
 }
 
+
 // ANT TABLE 
 .ant-table-thead > tr > th,
 .ant-table-small .ant-table-thead > tr > th {
   transition-duration: var(--ant-transition-duration);
-  background-color: #112;
+  background-color: var(--purple-dark);
   font-weight: 500;
-  color: var(--owncast-purple);
+  color: var(--white);
 }
 
 .ant-table-tbody > tr > td,
 .ant-table-thead > tr > th,
 .ant-table-small .ant-table-thead > tr > th {
-  border-color: var(--textfield-border);
+  border-color: var(--white-15);
 }
 .ant-table-tbody > tr > td {
   transition-duration: var(--ant-transition-duration);
-  background-color: var(--textfield-bg);
+  background-color: #141417;
+  color: var(--white-75);
 }
 .ant-table-tbody > tr:nth-child(odd) > td {
-  background-color: var(--textfield-bg);
+  background-color: #222325;
 }
 .ant-empty {
-  color: white;
-  opacity: .75;
+  color: var(--white-75);
 }
 .ant-table-empty .ant-table-tbody > tr.ant-table-placeholder {
   &:hover > td {
@@ -269,18 +296,23 @@ textarea.ant-input {
     background-color: var(--textfield-border);
   }
 }
+.ant-table-thead th.ant-table-column-sort {
+  background-color: var(--owncast-purple-25);
+  opacity: .75;
+}
 
 
 // MODAL
 .ant-modal-content {
   border-radius: var(--container-border-radius);
-  border: 1px solid var(--owncast-purple-highlight);
+  border: 1px solid var(--owncast-purple);
+  background-color: var(--black);
 }
 .ant-modal-header {
   border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
 }
 .ant-modal-close-x {
-  color: white;
+  color: var(--white);
 }
 .ant-modal-title {
   font-weight: 500;
@@ -288,22 +320,22 @@ textarea.ant-input {
   color: var(--nav-selected-text);
 }
 .ant-modal-body {
-  background-color: var(--nav-bg-color);
+  background-color: var(--gray);
   color: var(--default-text-color);
 }
 .ant-modal-header,
 .ant-modal-footer {
-  background-color: black;
+  background: var(--black);
 }
 .ant-modal-content,
 .ant-modal-header,
 .ant-modal-footer {
-  border-color: #333;
+  border-color: var(--gray);
 }
 
 // SELECT
 .ant-select-dropdown {
-  background-color: #334;
+  background-color: var(--gray);
 }
 
 
@@ -318,12 +350,12 @@ textarea.ant-input {
 
 // ANT SWITCH
 .ant-switch {
-  background-color: #666;
+  background-color: var(--gray-medium);
 }
 .ant-switch-checked {
   background-color: var(--ant-success);
   .ant-switch-inner {
-    color: white;
+    color: var(--white);
   }
 }
 
@@ -335,15 +367,16 @@ textarea.ant-input {
   .ant-collapse-content {
     border-color: transparent;
     &> .ant-collapse-header {
+      border-radius: var(--container-border-radius);
       border-color: transparent;
-      background-color: var(--textfield-bg);
-      color: var(--nav-text);
+      background-color: var(--purple-dark);
+      color: var(--white);
       font-weight: 500;
     }
   }
 }
 .ant-collapse-content {
-  background-color: #181231;
+  background-color: var(--black-35); //#181231;
 }
 
 
@@ -353,7 +386,7 @@ textarea.ant-input {
 
 }
 .ant-popover-inner {
-  background-color: black;
+  background-color: var(--black);
 }
 .ant-popover-message,
 .ant-popover-inner-content {
@@ -361,6 +394,31 @@ textarea.ant-input {
 
 }
 .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
-  border-color: black;
+  border-color: var(--black);
 }
 
+
+
+
+// ANT TAGS
+
+.ant-tag-orange {
+  background: #fa8c16;
+  color: #fff7e6;
+  border-color: #ffd591;
+}
+
+
+// ANT PAGINATOR
+.ant-pagination-item-active {
+  color: var(--white);
+  background-color: var(--default-link-color);
+  border-color: var(--default-link-color);
+  a {
+    color: var(--white);
+    &:hover {
+      color: var(--white);
+      opacity: .75;
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/styles/chat.scss b/web/styles/chat.scss
index 13a84a0cc..6f0412b07 100644
--- a/web/styles/chat.scss
+++ b/web/styles/chat.scss
@@ -8,11 +8,11 @@
   }
   .ant-table-row.hidden {
     .ant-table-cell {
-      color: rgba(0,0,0,.25)
+      color: var(--black-35)
     }
     @media (prefers-color-scheme: dark) {
       .ant-table-cell {
-        color: rgba(255,255,255,.25)
+        color: var(--white-25);
       }
     }
   }
@@ -47,29 +47,21 @@
   .bulk-editor {
     margin: .5rem 0;
     padding: .5rem;
-    border: 1px solid #ccc;
+    border: 1px solid var(--textfield-border);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     border-radius: 4px;
-    opacity: .5;
-
     &.active {
-      opacity: 1;
       .label {
-        color: #000;
-      }
-      @media (prefers-color-scheme: dark) {
-        .label {
-          color: #fff;
-        }
+        color: var(--black);
       }
     }
 
     .label {
       font-size: .75rem;
-      color: #666;
+      color: var(--white-50);
       margin-right: .5rem;
     }
 
@@ -112,11 +104,6 @@
     }
   }
   .ant-btn-text:hover {
-    background-color: rgba(0,0,0,.1)
-  }
-  @media (prefers-color-scheme: dark) {
-    .ant-btn-text:hover {
-      background-color: rgba(255,255,255,.3)
-    }
+    background-color: var(--black-35)
   }
 }
diff --git a/web/styles/colors.scss b/web/styles/colors.scss
deleted file mode 100644
index 7770daeb3..000000000
--- a/web/styles/colors.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// rename to variables.scss
-
-:root {
-
-  --default-text-color: #fff;
-
-  --owncast-purple: rgba(90,103,216,1); //5a67d8
-  --owncast-purple-highlight: #ccd;
-
-  --online-color: #73dd3f;
-
-  --owncast-dark1: #1f1f21;
-
-  --ant-error: #ff4d4f;
-  --ant-success: #52c41a;
-  --ant-warning: #faad14;
-  --ant-transition-duration: .15s;
-
-
-  --container-bg-color: #1A1C24;
-  --container-bg-color-alt: #251c49;
-  --container-border-radius: 2px;
-
-  --code-purple: #82aaff;
-
-  --nav-bg-color: #1A1C24;
-  --nav-text: #6a76ba;
-  --nav-selected-text: #c48dff;
-
-  --form-focused: #8d71ff;
-
-  --textfield-border: #373640;
-  --textfield-bg: #100f0f;
- 
-}
diff --git a/web/styles/config-public-details.scss b/web/styles/config-public-details.scss
index 868051455..7d8325a56 100644
--- a/web/styles/config-public-details.scss
+++ b/web/styles/config-public-details.scss
@@ -45,7 +45,7 @@
     margin-left: 1em;
     max-width: 450px;
     .form-module {
-      background-color: #000;
+      background-color: var(--black);
     }
 
     .social-handles-container {
diff --git a/web/styles/config-tags.scss b/web/styles/config-tags.scss
index f69936386..462cd350d 100644
--- a/web/styles/config-tags.scss
+++ b/web/styles/config-tags.scss
@@ -15,12 +15,12 @@
       margin-left: .3rem;
       padding: 2px;
       border-radius: 5rem;
-      color: black;
-      border: 1px solid #000;
+      color: var(--black);
+      border: 1px solid var(--black);
       transition-duration: var(--ant-transition-duration);
       &:hover {
-        border-color: #5a67d8;
-        background-color: white;
+        border-color: var(--owncast-purple);
+        background-color: var(--white);
         svg {
           fill: black;
           transition: fill var(--ant-transition-duration);
diff --git a/web/styles/form-misc-elements.scss b/web/styles/form-misc-elements.scss
index 8030b45ae..a038a336b 100644
--- a/web/styles/form-misc-elements.scss
+++ b/web/styles/form-misc-elements.scss
@@ -30,7 +30,7 @@
 /* TIP CONTAINER BASE */
 .field-tip {
   font-size: .8em;
-  color: rgba(255,255,255,.5)
+  color: var(--white-50);
 }
 
 
@@ -50,17 +50,17 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
   width: 90%;
   margin: auto;
   padding: 1em 2em .75em;
-  background-color: var(--textfield-border);
+  background-color: var(--black-35);
   border-radius: 1em;
   .ant-slider-rail {
-    background-color: black;
+    background-color: var(--black);
   }
   .ant-slider-track {
     background-color: var(--nav-text);
   }
   .ant-slider-mark-text,
   .ant-slider-mark-text-active {
-    color: white;
+    color: var(--white);
     opacity: .5;
   }
   .ant-slider-mark-text-active {
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index 7a8e619ea..6480495fe 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -6,16 +6,16 @@ body {
   margin: 0;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 
-  font-size: 14px;
+  font-size: 16px;
 
-  background-color: #000;
-  color: var(--default-text-color);;
+  background-color: var(--default-bg-color);
+  color: var(--default-text-color);
 }
 
 a {
   color: inherit;
   text-decoration: none;
-  color: var(--owncast-purple);
+  color: var(--default-link-color);
 
   &:hover {
     color: var(--default-text-color);
@@ -27,17 +27,23 @@ a {
 }
 p {
   font-weight: 300;
+  color: var(--white-75); 
 }
 pre {
   display: block;
   padding: 1rem;
   margin: .5rem 0;
-  background-color: rgb(44, 44, 44);
-  color:lightgrey;
+  background-color: var(--code-bg-color);
+  color: var(--white-50);
 }
 
 code {
-  color: var(--owncast-purple);
+  color: var(--code-color);
+  background-color: var(--white-15);
+  display: inline-block;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-size: .88em;
 }
 
 
@@ -48,12 +54,14 @@ code {
 
 p.description {
   margin: 1em 0;
-  color: #ccc; 
+  color: var(--white-75); 
 }
 
 
 .line-chart-container {
   margin: 2em auto;
+  padding: 1em;
+  border: 1px solid var(--gray-dark);
 }
 
 h2.ant-typography.page-title,
@@ -70,9 +78,6 @@ h3.section-title {
 }
 
 .form-module {
-  // width: 100%;
-  // max-width: 500px;
-  // min-width: 300px;
   margin: 1em 0;
   background-color: var(--container-bg-color);
   padding: 2em;
diff --git a/web/styles/main-layout.scss b/web/styles/main-layout.scss
index 2eeda969e..f3514a488 100644
--- a/web/styles/main-layout.scss
+++ b/web/styles/main-layout.scss
@@ -20,7 +20,7 @@
     align-items: center;
 
     .logo-container {
-      background-color: #fff;
+      background-color: var(--white);
       padding: .35rem;
       border-radius: 9999px;
     }
@@ -28,7 +28,7 @@
     .title-label {
       display: inline-block;
       margin-left: 1rem;
-      color: rgba(203,213,224, 1);
+      color: var(--white);
       font-size: 1.15rem;
       font-weight: 200;
       text-transform: uppercase;
@@ -70,17 +70,17 @@
     }
 
     .status-label {
-      color: #fff;
+      color: var(--white);
       text-transform: uppercase;
       font-size: .75rem;
       display: inline-block;
       margin-right: .5rem;
-      color: #999;
+      color: var(--offline-color);
     }
     .status-icon {
       font-size: 1.5rem;
       svg {
-        fill: #999;
+        fill: var(--offline-color);
       }
     }
   }
diff --git a/web/styles/markdown-editor.scss b/web/styles/markdown-editor.scss
index 64b528b8b..c688a7a63 100644
--- a/web/styles/markdown-editor.scss
+++ b/web/styles/markdown-editor.scss
@@ -5,18 +5,29 @@
   display: block !important;
 }
 .rc-md-editor {
-  border-color: black !important;
-  border: 1px solid black;
-  background-color: black !important;
+  border-color: var(--black) !important;
+  border: 1px solid var(--black);
+  background-color: var(--black) !important;
   .rc-md-navigation {
-    background-color: black;
-    border-color: black;
+    background-color: var(--black);
+    border-color: var(--black);
   }
   // Set the background color of the preview container
   .editor-container {
-    color: rgba(45,55,72,1);
+    p {
+      color: var(--black-75);
+    }
     background-color: rgba(226,232,240, 1) !important;
 
+    .sec-html {
+      background-color: white;
+
+      pre,code {
+        background-color: #eee;
+        color: #900;
+      }
+    }
+
   }
 
   // Custom CSS for formatting the preview text
@@ -41,8 +52,9 @@
 
   // Set the background color of the editor text input
   textarea {
-    background-color: #223 !important;
+    background-color: var(--gray) !important;
     color: rgba(255,255,255,.5)  !important;
+    overflow: auto;
   }
 
 
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
new file mode 100644
index 000000000..16b9b0beb
--- /dev/null
+++ b/web/styles/variables.scss
@@ -0,0 +1,63 @@
+// rename to variables.scss
+
+:root {
+  // colors
+  --white: rgba(255,255,255,1);
+  --white-15: rgba(255,255,255,.15);
+  --white-25: rgba(255,255,255,.25);
+  --white-35: rgba(255,255,255,.35);
+  --white-50: rgba(255,255,255,.5);
+  --white-75: rgba(255,255,255,.75);
+  --white-88: rgba(255,255,255,.88);
+
+  --black: rgba(0,0,0,1);
+  --black-35: rgba(0,0,0,.35);
+  --black-50: rgba(0,0,0,.5);
+  --black-75: rgba(0,0,0,.75);
+
+  // owncast logo color family
+  --owncast-purple: rgba(120,113,255,1); // #7871FF;
+  --purple-dark: rgba(28,26,59,1); // #1c1a3b;//
+  --pink: rgba(201,139,254,1); // #D18BFE;
+  --blue: rgba(32,134,225,1); // #2086E1;
+
+  // owncast puprple variations
+  --owncast-purple-25: rgba(120,113,255,.25);
+  --owncast-purple-50: rgba(120,113,255,.5);
+
+  --gray-light:  rgba(168,175,197,1); 
+  --gray-medium:  rgba(102,107,120,1); 
+  --gray:  rgba(51,53,60,1); 
+  --gray-dark: rgba(23,24,27,1); // #17181b;
+
+  --online-color: #73dd3f;
+  --offline-color: #999;
+
+  --ant-error: #ff4d4f;
+  --ant-success: #52c41a;
+  --ant-warning: #faad14;
+  --ant-transition-duration: .15s;
+
+
+  // ////////////////////////////////
+  --default-text-color: var(--white-88);
+  --default-bg-color: var(--black);
+  --default-link-color: var(--owncast-purple);
+
+  --container-bg-color: var(--gray-dark);
+  --container-bg-color-alt: var(--purple-dark); 
+  --container-border-radius: 4px;
+
+  --code-color: #9cdcfe;
+  --code-bg-color: var(--owncast-purple-25);
+
+  --nav-bg-color: var(--gray-dark);
+  --nav-text: #aaa;
+  --nav-selected-text: var(--pink); //#cd7cff;
+
+  --button-focused: var(--owncast-purple-50);
+
+  --textfield-border: var(--white-25);;
+  --textfield-bg: var(--black);
+ 
+}