diff --git a/src/app.html b/src/app.html
index 77a5ff5..e4218fa 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,6 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
+        <link rel="stylesheet" href="/stylesheets/global.css" />
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8bc1826..69cdfc2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,17 @@
+<!-- Theme load -->
+<svelte:head>
+    <script>
+        import { theme } from '../global-stores.js';
+    </script>
+
+    <link rel="stylesheet" href="/stylesheets/main-theme.css" />
+</svelte:head>
+
 <div class="main-title">
     <h1>The Deprived Devs</h1>
 </div>
 
+
 <style>
     @font-face {
         font-family: 'CozetteVector';
diff --git a/static/stylesheets/global.css b/static/stylesheets/global.css
new file mode 100644
index 0000000..ce42887
--- /dev/null
+++ b/static/stylesheets/global.css
@@ -0,0 +1,4 @@
+body {
+    color: var(--text);
+    background-color: var(--background);
+}
diff --git a/static/stylesheets/main-theme.css b/static/stylesheets/main-theme.css
new file mode 100644
index 0000000..5eff32f
--- /dev/null
+++ b/static/stylesheets/main-theme.css
@@ -0,0 +1,7 @@
+:root {
+    --text: #ece4ee;
+    --background: #120c13;
+    --primary: #ff8552;
+    --secondary: #6c6b44;
+    --accent: #7da16a;
+}
