diff --git a/config/config.yml b/config/config.yml
index 465228a..9cf0d64 100644
--- a/config/config.yml
+++ b/config/config.yml
@@ -1,5 +1,6 @@
 name: "Nikurasu"                                # The name on the linktree
 # profilePic:                                   # uncomment and set this if your profile pic has a custom name
+theme: 'simple-orange'
 links:
   - text: "YouTube"                             # text on the link
     hyperlink: "Test"                           # the actual hyperlink
diff --git a/package.json b/package.json
index 355594b..4810d37 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,15 @@
   "license": "MIT",
   "scripts": {
     "start": "node src/index.js",
-    "dev": "nodemon src/index.js"
+    "dev": "nodemon src/index.js & sass --watch src/public/themes:src/dist/style",
+    "watch-css": "sass --watch src/public/themes:src/dist/style",
+    "build": "sass src/public/themes:src/dist/style"
   },
   "dependencies": {
     "ejs": "^3.1.8",
     "express": "^4.18.2",
-    "js-yaml": "^4.1.0"
+    "js-yaml": "^4.1.0",
+    "sass": "^1.55.0"
   },
   "devDependencies": {
     "nodemon": "^2.0.20"
diff --git a/src/dist/style/simple-orange.css b/src/dist/style/simple-orange.css
new file mode 100644
index 0000000..2b734a3
--- /dev/null
+++ b/src/dist/style/simple-orange.css
@@ -0,0 +1,44 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+}
+
+.container {
+  padding-top: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.headingbox > h1 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  font-family: monospace;
+}
+
+.imgbox > img {
+  height: 10rem;
+  width: 10rem;
+  border-radius: 0.5rem;
+}
+
+.linkbox {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+body {
+  background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%);
+}
+
+.headingbox {
+  color: #FFFFFF;
+}
+
+/*# sourceMappingURL=simple-orange.css.map */
diff --git a/src/dist/style/simple-orange.css.map b/src/dist/style/simple-orange.css.map
new file mode 100644
index 0000000..a199681
--- /dev/null
+++ b/src/dist/style/simple-orange.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../public/util/main.scss","../../public/util/simple-basic.scss","../../public/themes/simple-orange.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;ACxBJ;EACI;;;AAGJ;EACI","file":"simple-orange.css"}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 83a64c8..717540a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import express from 'express'
 import yaml from 'js-yaml'
-import fs, { cpSync } from 'node:fs'
+import fs from 'node:fs'
 
 console.log('🔧 Configuring socialtree...')
 
@@ -10,7 +10,7 @@ const engine = 'ejs'
 
 app.set('view engine', engine)
 app.set('views', './src/views')
-app.use(express.static('src/public'))
+app.use(express.static('src/dist'))
 app.use(express.static('src/assets'))
 
 app.get('/', (req, res) => {
@@ -18,7 +18,8 @@ app.get('/', (req, res) => {
     res.render('index', {
         name: config.name,
         filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
-        links: config.links
+        links: config.links,
+        theme: config.theme
     })
 })
 
diff --git a/src/public/simple-orange.css b/src/public/themes/simple-orange.scss
similarity index 66%
rename from src/public/simple-orange.css
rename to src/public/themes/simple-orange.scss
index a3d7ac4..dd9be68 100644
--- a/src/public/simple-orange.css
+++ b/src/public/themes/simple-orange.scss
@@ -1,3 +1,6 @@
+@import '../util/main.scss';
+@import '../util/simple-basic.scss';
+
 body {
     background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%);
 }
diff --git a/src/public/main.css b/src/public/util/main.scss
similarity index 100%
rename from src/public/main.css
rename to src/public/util/main.scss
diff --git a/src/public/simple-basic.css b/src/public/util/simple-basic.scss
similarity index 81%
rename from src/public/simple-basic.css
rename to src/public/util/simple-basic.scss
index c5e2743..e4798e1 100644
--- a/src/public/simple-basic.css
+++ b/src/public/util/simple-basic.scss
@@ -20,4 +20,10 @@ body {
     height: 10rem;
     width: 10rem;
     border-radius: .5rem;
+}
+
+.linkbox {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 0918a79..236d020 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -9,7 +9,7 @@
     </div>
     <div class="linkbox">
         <% links.forEach(link => { %>
-        <p>Hello World</p>
+        <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
         <% }) %>
     </div>
 </div>
diff --git a/src/views/partials/head.ejs b/src/views/partials/head.ejs
index 190302c..4302063 100644
--- a/src/views/partials/head.ejs
+++ b/src/views/partials/head.ejs
@@ -2,7 +2,5 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="main.css">
-    <link rel="stylesheet" href="simple-basic.css">
-    <link rel="stylesheet" href="simple-orange.css">
+    <link rel="stylesheet" href="style/<%= theme %>.css">
 </head>
diff --git a/yarn.lock b/yarn.lock
index bebe122..1a311c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -116,7 +116,7 @@ chalk@^4.0.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -366,6 +366,11 @@ ignore-by-default@^1.0.1:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
   integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
 
+immutable@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
+  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+
 inherits@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -585,6 +590,15 @@ safe-buffer@5.2.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.55.0:
+  version "1.55.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.55.0.tgz#0c4d3c293cfe8f8a2e8d3b666e1cf1bff8065d1c"
+  integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -645,6 +659,11 @@ simple-update-notifier@^1.0.7:
   dependencies:
     semver "~7.0.0"
 
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 statuses@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"