diff --git a/angular.json b/angular.json
index fdaa566c..5978d22a 100644
--- a/angular.json
+++ b/angular.json
@@ -22,9 +22,13 @@
             ],
             "styles": [
               "./node_modules/simplebar/dist/simplebar.min.css",
-              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css"
+              "src/sass/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "./node_modules/bootstrap/scss"
+              ]
+            },
             "scripts": [
               "./node_modules/simplebar/dist/simplebar.min.js"
             ]
diff --git a/package-lock.json b/package-lock.json
index 6d1937ef..97eee0d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7124,9 +7124,9 @@
       "dev": true
     },
     "nan": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
-      "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.0.tgz",
+      "integrity": "sha512-F4miItu2rGnV2ySkXOQoA8FKz/SR2Q2sWP0sbTxNxz/tuokeC8WxOhPMcwi0qIyGtVn/rrSeLbvVkznqCdwYnw==",
       "dev": true,
       "optional": true
     },
diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
new file mode 100644
index 00000000..b392a3c7
--- /dev/null
+++ b/src/sass/styles.scss
@@ -0,0 +1,50 @@
+@import './variables';
+@import './mixins';
+
+@import "bootstrap";
+
+*,
+*::after,
+*::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+body {   
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  
+    font-family: 'Roboto', sans-serif;
+    /* font-family: "mastodon-font-sans-serif",sans-serif; */
+    font-size: 15px; 
+    
+    /* color: whitesmoke; */
+    color: #c9cbd4;
+    color: #a8acbc;
+    color: #e8eaf3;
+    background-color: #0f111a;
+    background-color: #0f111a;
+    background-color: #0a0c12;  
+    background-color: #141824;
+  }
+   
+  .invisible {
+    display: none;
+  } 
+  /* .ellipsis {
+  } */
+  
+  #toot-content p {
+    margin-bottom: 0 !important; 
+  }
+  
+  #toot-content a {
+    color: #bec3d8;
+  }
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index d99778fa..00000000
--- a/src/styles.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-html, body {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-
-  font-family: 'Roboto', sans-serif;
-  /* font-family: "mastodon-font-sans-serif",sans-serif; */
-  font-size: 15px; 
-  
-  /* color: whitesmoke; */
-  color: #c9cbd4;
-  color: #a8acbc;
-  color: #e8eaf3;
-  background-color: #0f111a;
-  background-color: #0f111a;
-  background-color: #0a0c12;
-
-  background-color: #141824;
-}
- 
-.invisible {
-  display: none;
-} 
-/* .ellipsis {
-} */
-
-#toot-content p {
-  margin-bottom: 0 !important; 
-}
-
-#toot-content a {
-  color: #bec3d8;
-}
\ No newline at end of file