diff --git a/frontend/src/components/Status.scss b/frontend/src/components/Status.scss
index cd52dbe..78036d8 100644
--- a/frontend/src/components/Status.scss
+++ b/frontend/src/components/Status.scss
@@ -1,4 +1,4 @@
-@use '../styles/theme.scss' as theme;
+@use '../theme.scss' as theme;
 
 .status-content {
   a {
diff --git a/frontend/src/components/StickyHeader/StickyHeader.scss b/frontend/src/components/StickyHeader/StickyHeader.scss
index f9fc816..a4dd3e2 100644
--- a/frontend/src/components/StickyHeader/StickyHeader.scss
+++ b/frontend/src/components/StickyHeader/StickyHeader.scss
@@ -1,4 +1,4 @@
-@use '../../styles/theme.scss' as theme;
+@use '../../theme.scss' as theme;
 
 header {
 	position: sticky;
diff --git a/frontend/src/root.tsx b/frontend/src/root.tsx
index bca905d..c89e11c 100644
--- a/frontend/src/root.tsx
+++ b/frontend/src/root.tsx
@@ -3,9 +3,7 @@ import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.
 import { RouterHead } from './components/router-head/router-head'
 
 import 'modern-normalize/modern-normalize.css'
-import './styles/theme.scss'
-import './styles/utility.scss'
-import globalStyles from './styles/global.scss?inline'
+import globalStyles from './styles.scss?inline'
 
 export default component$(() => {
 	useStyles$(globalStyles)
diff --git a/frontend/src/routes/LeftColumn/LeftColumn.scss b/frontend/src/routes/LeftColumn/LeftColumn.scss
index 8c1706c..100f211 100644
--- a/frontend/src/routes/LeftColumn/LeftColumn.scss
+++ b/frontend/src/routes/LeftColumn/LeftColumn.scss
@@ -1,4 +1,4 @@
-@use '../../styles/theme.scss';
+@use '../../theme.scss';
 
 .search {
 	outline: 0;
@@ -12,6 +12,6 @@
 	border-radius: theme.$radius-medium;
 	margin: 0;
 	display: block;
-	padding: theme.$sp4;
+	padding: 1rem;
 	line-height: 18px;
 }
diff --git a/frontend/src/routes/[accountId]/[statusId]/index.scss b/frontend/src/routes/[accountId]/[statusId]/index.scss
index 11171de..f80f270 100644
--- a/frontend/src/routes/[accountId]/[statusId]/index.scss
+++ b/frontend/src/routes/[accountId]/[statusId]/index.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/theme.scss' as theme;
+@use '../../../theme.scss' as theme;
 
 .back-button {
   background: transparent;
diff --git a/frontend/src/routes/explore/layout.scss b/frontend/src/routes/explore/layout.scss
index 9764b13..57d5bee 100644
--- a/frontend/src/routes/explore/layout.scss
+++ b/frontend/src/routes/explore/layout.scss
@@ -1,4 +1,4 @@
-@use '../../styles/theme.scss' as theme;
+@use '../../theme.scss' as theme;
 
 .container {
   display: flex;
diff --git a/frontend/src/routes/explore/links/index.scss b/frontend/src/routes/explore/links/index.scss
index d19a9c6..24fccfe 100644
--- a/frontend/src/routes/explore/links/index.scss
+++ b/frontend/src/routes/explore/links/index.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/theme.scss' as theme;
+@use '../../../theme.scss' as theme;
 
 .container {
   &:hover {
diff --git a/frontend/src/routes/layout.scss b/frontend/src/routes/layout.scss
index fab2c9a..a4c7944 100644
--- a/frontend/src/routes/layout.scss
+++ b/frontend/src/routes/layout.scss
@@ -1,4 +1,4 @@
-@use '../styles/theme.scss' as theme;
+@use '../theme.scss' as theme;
 
 .container {
 	height: 100%;
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles.scss
similarity index 100%
rename from frontend/src/styles/global.scss
rename to frontend/src/styles.scss
diff --git a/frontend/src/styles/background.scss b/frontend/src/styles/background.scss
deleted file mode 100644
index 8252a8d..0000000
--- a/frontend/src/styles/background.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@use './theme.scss' as theme;
-@use './interactive-utilities.scss' as utils;
-
-.bg-slate-50 {
-	background-color: theme.$slate50;
-}
-.bg-slate-100 {
-	background-color: theme.$slate100;
-}
-.bg-slate-200 {
-	background-color: theme.$slate200;
-}
-.bg-slate-300 {
-	background-color: theme.$slate300;
-}
-.bg-slate-400 {
-	background-color: theme.$slate400;
-}
-.bg-slate-500 {
-	background-color: theme.$slate500;
-}
-.bg-slate-600 {
-	background-color: theme.$slate600;
-}
-.bg-slate-700 {
-	background-color: theme.$slate700;
-}
-.bg-slate-800 {
-	background-color: theme.$slate800;
-}
-.bg-slate-900 {
-	background-color: theme.$slate900;
-}
-.bg-black {
-	background-color: theme.$black-bg;
-}
-.bg-indigo-600 {
-	background-color: theme.$indigo600;
-}
-.bg-indigo-500 {
-	background-color: theme.$indigo500;
-}
-
-@include utils.hoverAndFocus('bg-indigo-500') {
-	background-color: theme.$indigo500;
-}
diff --git a/frontend/src/styles/border.scss b/frontend/src/styles/border.scss
deleted file mode 100644
index 9b390e1..0000000
--- a/frontend/src/styles/border.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-@use './theme.scss' as theme;
-@use './interactive-utilities.scss' as utils;
-
-.border {
-	border-width: 1px;
-}
-.border-t {
-	border-top-width: 1px;
-}
-.border-b {
-	border-bottom-width: 1px;
-}
-.border-l {
-	border-left-width: 1px;
-}
-.border-r {
-	border-right-width: 1px;
-}
-.border-x {
-	border-left-width: 1px;
-	border-right-width: 1px;
-}
-.border-y {
-	border-top-width: 1px;
-	border-bottom-width: 1px;
-}
-
-.border-slate-50 {
-	border-color: theme.$slate50;
-}
-.border-slate-100 {
-	border-color: theme.$slate100;
-}
-.border-slate-200 {
-	border-color: theme.$slate200;
-}
-.border-slate-300 {
-	border-color: theme.$slate300;
-}
-.border-slate-400 {
-	border-color: theme.$slate400;
-}
-.border-slate-500 {
-	border-color: theme.$slate500;
-}
-.border-slate-600 {
-	border-color: theme.$slate600;
-}
-.border-slate-700 {
-	border-color: theme.$slate700;
-}
-.border-slate-800 {
-	border-color: theme.$slate800;
-}
-.border-slate-900 {
-	border-color: theme.$slate900;
-}
-.border-black {
-	border-color: theme.$black-border;
-}
-.border-indigo-400 {
-	border-color: theme.$indigo400;
-}
-.border-indigo-600 {
-	border-color: theme.$indigo600;
-}
-
-@include utils.hoverAndFocus('border-indigo-400') {
-	border-color: theme.$indigo400;
-}
-
-@include utils.hoverAndFocus('border-indigo-500') {
-	border-color: theme.$indigo500;
-}
-
-@include utils.invalid('border-red-400') {
-    border-color: theme.$red400;
-}
diff --git a/frontend/src/styles/display.scss b/frontend/src/styles/display.scss
deleted file mode 100644
index d270bdd..0000000
--- a/frontend/src/styles/display.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-.block {
-	display: block;
-}
-
-.inline {
-	display: inline;
-}
-
-.flex {
-	display: flex;
-}
-
-.flex-column {
-	display: flex;
-	flex-direction: column;
-}
-
-.flex-wrap {
-	flex-wrap: wrap;
-}
-
-.justify-around {
-	justify-content: space-around;
-}
-
-.justify-between {
-	justify-content: space-between;
-}
-
-.justify-center {
-	justify-content: center;
-}
-
-.justify-start {
-	justify-content:flex-start
-}
-
-.justify-end {
-	justify-content:flex-end
-}
-
-.items-center {
-	align-items: center;
-}
-
-.items-start {
-	align-items: flex-start;
-}
-
-.items-end {
-	align-items: flex-end;
-}
-
-.flex-1	{
-	flex: 1 1 0%;
-}
-
-.w-full {
-	width: 100%;
-}
-
-.w-screen {
-	width: 100vw;
-}
-
-.gap-0 {
-	gap: 0px;
-}
-.gap-1 {
-	gap: 0.25rem;
-}
-.gap-2 {
-	gap: 0.5rem;
-}
-.gap-3 {
-	gap: 0.75rem;
-}
-.gap-4 {
-	gap: 1rem;
-}
-.gap-5 {
-	gap: 1.25rem;
-}
-.gap-6 {
-	gap: 1.5rem;
-}
\ No newline at end of file
diff --git a/frontend/src/styles/interactive-utilities.scss b/frontend/src/styles/interactive-utilities.scss
deleted file mode 100644
index 8f3aee6..0000000
--- a/frontend/src/styles/interactive-utilities.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/* TODO: see if we can generate hover/focus, etc... variants in
-        a more clever/complete way
-        (
-            note: tailwind does it via a postCSS plugin,
-            we could just copy them, or at that point I think
-            we might as well just use tailwind instead
-        )
-*/
-
-@mixin hover($className) {
-    .hover\:#{$className}:hover {
-      @content;
-    }
-}
-
-@mixin focus($className) {
-    .focus\:#{$className}:focus {
-      @content;
-    }
-}
-
-@mixin hoverAndFocus($className) {
-    @include hover($className) {
-        @content;
-    }
-    @include focus($className) {
-        @content;
-    }
-}
-
-@mixin invalid($className) {
-    .invalid\:#{$className}:invalid {
-      @content;
-    }
-}
\ No newline at end of file
diff --git a/frontend/src/styles/layout.scss b/frontend/src/styles/layout.scss
deleted file mode 100644
index 93c23a2..0000000
--- a/frontend/src/styles/layout.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.overflow-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
\ No newline at end of file
diff --git a/frontend/src/styles/outline.scss b/frontend/src/styles/outline.scss
deleted file mode 100644
index 9c872d2..0000000
--- a/frontend/src/styles/outline.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.outline-none {
-    outline: none;
-}
\ No newline at end of file
diff --git a/frontend/src/styles/rounding.scss b/frontend/src/styles/rounding.scss
deleted file mode 100644
index e77ce0c..0000000
--- a/frontend/src/styles/rounding.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use '../styles/theme.scss' as theme;
-
-.rounded {
-	border-radius: theme.$radius-medium;
-}
-
-.rounded-sm {
-	border-radius: theme.$radius-small;
-}
-
-.rounded-lg {
-	border-radius: theme.$radius-large;
-}
-
-.rounded-t {
-	border-top-left-radius: theme.$radius-medium;
-	border-top-right-radius: theme.$radius-medium;
-}
-
-.rounded-t-sm {
-	border-top-left-radius: theme.$radius-small;
-	border-top-right-radius: theme.$radius-small;
-}
-
-.rounded-t-lg {
-	border-top-left-radius: theme.$radius-large;
-	border-top-right-radius: theme.$radius-large;
-}
-
-.rounded-b {
-	border-bottom-left-radius: theme.$radius-medium;
-	border-bottom-right-radius: theme.$radius-medium;
-}
-
-.rounded-b-sm {
-	border-bottom-left-radius: theme.$radius-small;
-	border-bottom-right-radius: theme.$radius-small;
-}
-
-.rounded-b-lg {
-	border-bottom-left-radius: theme.$radius-large;
-	border-bottom-right-radius: theme.$radius-large;
-}
diff --git a/frontend/src/styles/sizing.scss b/frontend/src/styles/sizing.scss
deleted file mode 100644
index 94e4339..0000000
--- a/frontend/src/styles/sizing.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.w-full {
-    width: 100%;
-}
-.max-w-xs {
-    max-width: 20rem;
-}
-.max-w-sm {
-    max-width: 24rem;
-}
-.max-w-md {
-    max-width: 28rem;
-}
-.max-w-lg {
-    max-width: 32rem;
-}
-.max-w-xl {
-    max-width: 36rem;
-}
-.max-w-2xl {
-    max-width: 42rem;
-}
-.max-w-3xl {
-    max-width: 48rem;
-}
-.max-w-4xl {
-    max-width: 56rem;
-}
-.max-w-5xl {
-    max-width: 64rem;
-}
-.max-w-6xl {
-    max-width: 72rem;
-}
-.max-w-7xl {
-    max-width: 80rem;
-}
-.max-w-full {
-    max-width: 100%;
-}
-.max-w-min {
-    max-width: min-content;
-}
-.max-w-max {
-    max-width: max-content;
-}
-.max-w-fit {
-    max-width: fit-content;
-}
-
-.min-h-screen {
-    min-height: 100vh;
-}
-
-.min-h-dscreen {
-    min-height: 100dvh;
-}
diff --git a/frontend/src/styles/spacing.scss b/frontend/src/styles/spacing.scss
deleted file mode 100644
index 0015ef3..0000000
--- a/frontend/src/styles/spacing.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-@use 'sass:list';
-@use './theme.scss';
-
-// padding
-@for $i from 0 through 9 {
-	.p-#{$i} {
-		padding: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.px-#{$i} {
-		padding-left: list.nth(theme.$space_scale, $i + 1);
-		padding-right: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.py-#{$i} {
-		padding-top: list.nth(theme.$space_scale, $i + 1);
-		padding-bottom: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.pt-#{$i} {
-		padding-top: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.pb-#{$i} {
-		padding-bottom: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.pr-#{$i} {
-		padding-right: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.pl-#{$i} {
-		padding-left: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-// Margin
-@for $i from 0 through 9 {
-	.m-#{$i} {
-		margin: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.mx-#{$i} {
-		margin-left: list.nth(theme.$space_scale, $i + 1);
-		margin-right: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-.mx-auto {
-	margin-left: auto;
-	margin-right: auto;
-}
-
-@for $i from 0 through 9 {
-	.my-#{$i} {
-		margin-top: list.nth(theme.$space_scale, $i + 1);
-		margin-bottom: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.mt-#{$i} {
-		margin-top: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.mb-#{$i} {
-		margin-bottom: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.ml-#{$i} {
-		margin-left: list.nth(theme.$space_scale, $i + 1);
-	}
-}
-
-@for $i from 0 through 9 {
-	.mr-#{$i} {
-		margin-right: list.nth(theme.$space_scale, $i + 1);
-	}
-}
\ No newline at end of file
diff --git a/frontend/src/styles/text.scss b/frontend/src/styles/text.scss
deleted file mode 100644
index 4adf412..0000000
--- a/frontend/src/styles/text.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-@use './theme.scss' as theme;
-@use './interactive-utilities.scss' as utils;
-
-// Color
-.secondary {
-	color: theme.$slate400;
-}
-
-.text-slate-50 {
-	color: theme.$slate50;
-}
-.text-slate-100 {
-	color: theme.$slate100;
-}
-.text-slate-200 {
-	color: theme.$slate200;
-}
-.text-slate-300 {
-	color: theme.$slate300;
-}
-.text-slate-400 {
-	color: theme.$slate400;
-}
-.text-slate-500 {
-	color: theme.$slate500;
-}
-.text-slate-600 {
-	color: theme.$slate600;
-}
-.text-slate-700 {
-	color: theme.$slate700;
-}
-.text-slate-800 {
-	color: theme.$slate800;
-}
-.text-slate-900 {
-	color: theme.$slate900;
-}
-
-.text-indigo-400 {
-	color: theme.$indigo400;
-}
-
-.text-white {
-	color: theme.$white;
-}
-
-@include utils.hoverAndFocus('text-white') {
-	color: theme.$white;
-}
-
-// Size
-.text-xs {
-	font-size: theme.$font-xsmall;
-}
-.text-sm {
-	font-size: theme.$font-small;
-}
-.text-md {
-	font-size: theme.$font-medium;
-}
-.text-lg {
-	font-size: theme.$font-large;
-}
-.text-xl {
-	font-size: theme.$font-xlarge;
-}
-
-// Weight
-
-.text-light {
-	font-weight: 300;
-}
-.text-reg {
-	font-weight: 400;
-}
-.text-semi {
-	font-weight: 500;
-}
-.text-bold {
-	font-weight: 600;
-}
-
-// Alignment
-.text-center {
-	text-align: center;
-}
-.text-left {
-	text-align: left;
-}
-.text-right {
-	text-align: right;
-}
-
-// Transform
-.text-uppercase {
-	text-transform: uppercase;
-}
-.text-capitalize {
-	text-transform: capitalize;
-}
-
-// Decoration
-.no-decoration {
-	text-decoration: none;
-}
-
-// Line Height
-.leading-tight {
-	line-height: 1.25;
-}
-.leading-snug {
-	line-height: 1.375;
-}
-.leading-normal {
-	line-height: 1.5;
-}
-.leading-relaxed {
-	line-height: 1.625;
-}
-
-.underline {
-	text-decoration: underline;
-}
-
-@include utils.hover('underline') {
-	text-decoration: underline;
-}
\ No newline at end of file
diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss
deleted file mode 100644
index 3402f6b..0000000
--- a/frontend/src/styles/theme.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-$sp0: 0px;
-$sp1: 0.125rem;
-$sp2: 0.25rem;
-$sp3: 0.5rem;
-$sp4: 1rem;
-$sp5: 1.5rem;
-$sp6: 2rem;
-$sp7: 2.5rem;
-$sp8: 3.5rem;
-$sp9: 4.5rem;
-$space_scale: $sp0, $sp1, $sp2, $sp3, $sp4, $sp5, $sp6, $sp7, $sp8, $sp9;
-
-$font-xsmall: 0.75rem;
-$font-small: 0.875rem;
-$font-medium: 1rem;
-$font-large: 1.125rem;
-$font-xlarge: 1.5rem;
-
-$radius-small: 0.125rem;
-$radius-medium: 0.25rem;
-$radius-large: 0.5rem;
-
-$black: #000;
-$black-bg: #131419;
-$black-border: #0a0b0e;
-$white: #fff;
-
-$slate50: #f8fafc;
-$slate100: #eff6ff;
-$slate200: #dbeafe;
-$slate300: #7a899f;
-$slate400: #9baec8;
-$slate500: #64748b;
-$slate600: #393f4f;
-$slate700: #313543;
-$slate800: #282c37;
-$slate900: #1f232b;
-
-$indigo400: #8c8dff;
-$indigo500: #6364ff;
-$indigo600: #595aff;
-
-$red400: #e87487;
-
-// $backgroundBaseColor: $slate900;
-$backgroundBaseColor: #191b22;
-$fontBaseColor: $white;
\ No newline at end of file
diff --git a/frontend/src/styles/utility.scss b/frontend/src/styles/utility.scss
deleted file mode 100644
index 4573eff..0000000
--- a/frontend/src/styles/utility.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use './text.scss';
-@use './border.scss';
-@use './outline.scss';
-@use './background.scss';
-@use './sizing.scss';
-@use './spacing.scss';
-@use './rounding.scss';
-@use './display.scss';
-@use './layout.scss';
\ No newline at end of file
diff --git a/frontend/src/theme.scss b/frontend/src/theme.scss
new file mode 100644
index 0000000..9c659b7
--- /dev/null
+++ b/frontend/src/theme.scss
@@ -0,0 +1,15 @@
+
+$radius-medium: 0.25rem;
+
+$slate100: #eff6ff;
+$slate200: #dbeafe;
+$slate400: #9baec8;
+$slate700: #313543;
+$slate800: #282c37;
+$slate900: #1f232b;
+
+$indigo400: #8c8dff;
+
+// $backgroundBaseColor: $slate900;
+$backgroundBaseColor: #191b22;
+$fontBaseColor: #fff;