diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index a601264..c0ad494 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/assets/styles/_colours.scss b/assets/styles/_colours.scss
new file mode 100644
index 0000000..c77726d
--- /dev/null
+++ b/assets/styles/_colours.scss
@@ -0,0 +1,2 @@
+$primary-colour-light: rgb(127, 127, 127);
+$bg-colour-light: rgb(187, 187, 187);
\ No newline at end of file
diff --git a/assets/styles/globals.scss b/assets/styles/globals.scss
new file mode 100644
index 0000000..d03b49d
--- /dev/null
+++ b/assets/styles/globals.scss
@@ -0,0 +1,7 @@
+@use 'colours';
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
+
+body {
+	font-family: 'Ubuntu', sans-serif !important;
+    background-color: colours.$bg-colour-light;
+}
diff --git a/styles/Home.module.css b/assets/styles/index.scss
similarity index 93%
rename from styles/Home.module.css
rename to assets/styles/index.scss
index 95d409e..a584ff0 100644
--- a/styles/Home.module.css
+++ b/assets/styles/index.scss
@@ -1,3 +1,5 @@
+@use 'colours';
+
 .container {
   min-height: 100vh;
   padding: 0 0.5rem;
@@ -8,15 +10,6 @@
   height: 100vh;
 }
 
-.main {
-  padding: 5rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
 .footer {
   width: 100%;
   height: 100px;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 84a4c0e..a5245b0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,6 +3,7 @@ import { defineNuxtConfig } from 'nuxt';
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
 	css: [
-		'@/styles/globals.css'
+		'@/assets/styles/globals.scss',
+		'@/assets/styles/index.scss',
 	]
 });
diff --git a/package.json b/package.json
index 541c7d7..af9d5ed 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
   "devDependencies": {
     "@nuxt/postcss8": "^1.1.3",
     "@nuxt/types": "^2.15.8",
-    "nuxt": "3.0.0-rc.1"
+    "nuxt": "3.0.0-rc.1",
+    "sass": "^1.52.1",
+    "sass-loader": "^13.0.0"
   },
   "dependencies": {
     "@nuxtjs/i18n": "^7.2.2",
diff --git a/pages/index.vue b/pages/index.vue
index 8f7b40e..f0ec38c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,3 +1,5 @@
 <template>
-    <h1>Vanner Basta</h1>
-</template>
\ No newline at end of file
+	<div class="container">
+		<h1>Vanner Basta</h1>
+	</div>
+</template>
diff --git a/styles/globals.css b/styles/globals.css
deleted file mode 100644
index 911e347..0000000
--- a/styles/globals.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
-
-body {
-    font-family: 'Ubuntu', sans-serif !important;
-}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 667eb38..19bb31e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2044,7 +2044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -3924,6 +3924,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "immutable@npm:4.0.0"
+  checksum: 4b5e9181e4d5fa06728a481835ec09c86367e5d03268666c95b522b7644ab891098022e4479a43c4c81a68f2ed82f10751ce5d33e208d7b873b6e7f9dfaf4d87
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -6623,6 +6630,8 @@ resolve@^1.17.0:
     "@nuxtjs/i18n": ^7.2.2
     autoprefixer: ^10.4.7
     nuxt: 3.0.0-rc.1
+    sass: ^1.52.1
+    sass-loader: ^13.0.0
     tailwindcss: ^3.0.24
   languageName: unknown
   linkType: soft
@@ -6698,6 +6707,44 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
+"sass-loader@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "sass-loader@npm:13.0.0"
+  dependencies:
+    klona: ^2.0.4
+    neo-async: ^2.6.2
+  peerDependencies:
+    fibers: ">= 3.1.0"
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+    sass: ^1.3.0
+    sass-embedded: "*"
+    webpack: ^5.0.0
+  peerDependenciesMeta:
+    fibers:
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+  checksum: f7af03813dccf0405eb02917cd10c97571ab81f42e9ea1f3da6d9e96991e076521809a452ad319d57c1a63273ce07c23ddfdbda5cd071a56d261dc28913afdaa
+  languageName: node
+  linkType: hard
+
+"sass@npm:^1.52.1":
+  version: 1.52.1
+  resolution: "sass@npm:1.52.1"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: a0508c88b149641202e8fb589f731e0cb09a15650128dfee6d0d1ee4a868cb57f1e71575535ccd72f54c5313b684a8beb208d293402ca8d32084ee1709d9f26d
+  languageName: node
+  linkType: hard
+
 "sax@npm:^1.2.4":
   version: 1.2.4
   resolution: "sax@npm:1.2.4"
@@ -6931,7 +6978,7 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
   checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c