diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 5fa7393d..e9762f2e 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -10,7 +10,7 @@ import contextReducer from './actions'
 
 import 'react-toastify/dist/ReactToastify.css'
 import 'material-symbols'
-import './index.sass'
+import './index.scss'
 
 const store = configureStore({
   reducer: {
diff --git a/frontend/src/index.sass b/frontend/src/index.sass
deleted file mode 100644
index ec977c01..00000000
--- a/frontend/src/index.sass
+++ /dev/null
@@ -1,143 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,300;0,400;0,600;0,700;1,300;1,400&display=swap')
-
-
-:root
-  --font-family: 'Noto Sans', Roboto, Arial, sans-serif
-  --color-surface-01: #19161f
-  --color-surface-02: #1f1e26
-  --color-surface-03: #24202e
-  --color-surface-04: #2e2a38
-  --color-surface-05: #302c3a
-  --color-surface-06: #3a3544
-  --color-text: #d7d4d5
-  --color-text-hl: #fbfbfb
-  --color-text-dim: #ababab
-
-  --color-cyan: #0ed3fe
-  --color-blue: #4600ff
-  --color-magenta: #b000ff
-  --color-violet: #885bff
-  --color-yellow: #fcde00
-  --color-red: #ff2404
-  --color-green: #5fff5f
-
-  --input-height: 32px
-  --font-size: 0.9rem
-  --gap-size: 6px
-  --section-gap: 8px
-
-
-// Hacks 
-
-::-webkit-scrollbar
-  width: 20px
-  height: 20px
-
-::-webkit-scrollbar-track, ::-webkit-scrollbar-corner
-  background-color: transparent
-
-::-webkit-scrollbar-thumb
-  background-color: var(--color-surface-04)
-  border-radius: 20px
-  border: 6px solid transparent
-  background-clip: content-box
-
-  &:hover
-    background-color: var(--color-surface-05)
-
-.material-symbols-outlined
-  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 200, 'opsz' 20
-  vertical-align: bottom
-  position: relative
-  top: 1px
-
-
-html
-  padding: 0
-  margin: 0
-  background-color: var(--color-surface-01)
-
-  color: var(--color-text)
-  font-size: var(--font-size)
-  font-family: var(--font-family)
-  
-
-#root
-  position: fixed
-  top: 0
-  left: 0
-  right: 0
-  bottom: 0
-  display: flex
-  flex-direction: column
-  padding: var(--section-gap)
-  gap: var(--section-gap)
-  zoom: .9
-
-
-a 
-  color: var(--color-text)
-  text-decoration: none
-  cursor: pointer
-
-  &:hover
-    text-decoration: underline
-
-
-main
-  flex-grow: 1
-  display: flex
-  gap: var(--section-gap)
-
-  &.row, &.column
-    align-items: stretch
-
-section
-  display: flex
-  padding: 12px
-  border-radius: 5px
-  background-color: var(--color-surface-02)
-  border: 1px solid transparent
-
-.section-changed
-  border: 1px solid var(--color-violet)
-
-//
-// Helper classes
-//
-
-.nopad
-  padding: 0
-   
-.row
-  display: flex
-  flex-direction: row
-  gap: var(--section-gap)
-    
-.column
-  display: flex
-  flex-direction: column
-  gap: var(--section-gap)
-
-.center
-  display: flex
-  align-items: center
-  justify-content: center
-    
-.grow
-  position: relative
-  flex-grow: 1
-
-.third
-  flex-basis: 30%
-
-.half
-  flex-basis: 50%
-
-.contained
-  position: absolute
-  top: 0
-  left: 0
-  right: 0
-  bottom: 0
-
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
new file mode 100644
index 00000000..8005a845
--- /dev/null
+++ b/frontend/src/index.scss
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,300;0,400;0,600;0,700;1,300;1,400&display=swap');
+
+:root {
+  --font-family: 'Noto Sans', Roboto, Arial, sans-serif;
+  --color-surface-01: #19161f;
+  --color-surface-02: #1f1e26;
+  --color-surface-03: #24202e;
+  --color-surface-04: #2e2a38;
+  --color-surface-05: #302c3a;
+  --color-surface-06: #3a3544;
+  --color-text: #d7d4d5;
+  --color-text-hl: #fbfbfb;
+  --color-text-dim: #ababab;
+
+  --color-cyan: #0ed3fe;
+  --color-blue: #4600ff;
+  --color-magenta: #b000ff;
+  --color-violet: #885bff;
+  --color-yellow: #fcde00;
+  --color-red: #ff2404;
+  --color-green: #5fff5f;
+
+  --input-height: 32px;
+  --font-size: 0.9rem;
+  --gap-size: 6px;
+  --section-gap: 6px;
+}
+
+// Hacks
+
+::-webkit-scrollbar {
+  width: 20px;
+  height: 20px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-surface-04);
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+
+  &:hover {
+    background-color: var(--color-surface-05);
+  }
+}
+
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 200, 'opsz' 20;
+  vertical-align: bottom;
+  position: relative;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-surface-01);
+
+  color: var(--color-text);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+}
+
+#root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--section-gap);
+  gap: var(--section-gap);
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+main {
+  flex-grow: 1;
+  display: flex;
+  gap: var(--section-gap);
+
+  &.row,
+  &.column {
+    align-items: stretch;
+  }
+}
+
+section {
+  display: flex;
+  padding: 12px;
+  border-radius: 5px;
+  background-color: var(--color-surface-02);
+  border: 1px solid transparent;
+}
+
+.section-changed {
+  border: 1px solid var(--color-violet);
+}
+
+//
+// Helper classes
+//
+
+.nopad {
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--section-gap);
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-gap);
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.grow {
+  position: relative;
+  flex-grow: 1;
+}
+
+.third {
+  flex-basis: 30%;
+}
+
+.half {
+  flex-basis: 50%;
+}
+
+.contained {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}