diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4be4080..7df06a2 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -7,7 +7,7 @@ import {from} from 'rxjs'
 import {pluck} from 'rxjs/operators'
 
 import {useConfig} from 'config'
-import styles from './App.module.scss'
+import styles from './App.module.less'
 
 import {
   HomePage,
diff --git a/frontend/src/App.module.scss b/frontend/src/App.module.less
similarity index 93%
rename from frontend/src/App.module.scss
rename to frontend/src/App.module.less
index b9e32d5..f36a4ed 100644
--- a/frontend/src/App.module.scss
+++ b/frontend/src/App.module.less
@@ -1,4 +1,4 @@
-@import 'styles.scss';
+@import 'styles.less';
 
 :global(#root) {
   padding-top: 60px;
@@ -17,8 +17,8 @@
   min-height: 12rem;
   padding: 2rem 0;
 
-  background: $obsColorB4;
-  color: $obsColorW;
+  background: @obsColorB4;
+  color: @obsColorW;
 
   h1, h2, h3, h4, h5, h6 {
     &:global(.ui.header) {
@@ -68,7 +68,7 @@
   font-size: 18pt;
 
   &, &:hover {
-    color: $obsColorB4;
+    color: @obsColorB4;
   }
 }
 
diff --git a/frontend/src/components/Avatar/index.tsx b/frontend/src/components/Avatar/index.tsx
index 18e9692..49519dc 100644
--- a/frontend/src/components/Avatar/index.tsx
+++ b/frontend/src/components/Avatar/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {Comment} from 'semantic-ui-react'
 import classnames from 'classnames'
 
-import './styles.scss'
+import './styles.less'
 
 function hashCode(s) {
   let hash = 0
diff --git a/frontend/src/components/Avatar/styles.scss b/frontend/src/components/Avatar/styles.less
similarity index 100%
rename from frontend/src/components/Avatar/styles.scss
rename to frontend/src/components/Avatar/styles.less
diff --git a/frontend/src/components/Page/Page.module.scss b/frontend/src/components/Page/Page.module.less
similarity index 86%
rename from frontend/src/components/Page/Page.module.scss
rename to frontend/src/components/Page/Page.module.less
index 06304b0..b89ac27 100644
--- a/frontend/src/components/Page/Page.module.scss
+++ b/frontend/src/components/Page/Page.module.less
@@ -1,4 +1,4 @@
-@import '../../styles.scss';
+@import '../../styles.less';
 
 .page {
   margin-top: 32px;
diff --git a/frontend/src/components/Page/index.tsx b/frontend/src/components/Page/index.tsx
index e6c4c4a..b2f864e 100644
--- a/frontend/src/components/Page/index.tsx
+++ b/frontend/src/components/Page/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import {Container} from 'semantic-ui-react'
 
-import styles from './Page.module.scss'
+import styles from './Page.module.less'
 
 export default function Page({small, children, fullScreen, stage}: {small?: boolean, children: ReactNode, fullScreen?: boolean,stage?: ReactNode}) {
   return (
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 73fea25..d092360 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import {Settings} from 'luxon'
 import ReactDOM from 'react-dom'
-import 'semantic-ui-less/semantic.less'
+import 'fomantic-ui-less/semantic.less'
 
 import './index.css'
 import App from './App'
diff --git a/frontend/src/pages/HomePage.module.scss b/frontend/src/pages/HomePage.module.less
similarity index 100%
rename from frontend/src/pages/HomePage.module.scss
rename to frontend/src/pages/HomePage.module.less
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 65262e2..79e1f53 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -10,7 +10,7 @@ import {Stats, Page} from 'components'
 
 import {TrackListItem} from './TracksPage'
 import {CustomMap} from './MapPage'
-import styles from './HomePage.module.scss'
+import styles from './HomePage.module.less'
 
 function MostRecentTrack() {
   const track: Track | null = useObservable(
diff --git a/frontend/src/pages/MapPage.module.scss b/frontend/src/pages/MapPage.module.less
similarity index 100%
rename from frontend/src/pages/MapPage.module.scss
rename to frontend/src/pages/MapPage.module.less
diff --git a/frontend/src/pages/MapPage.tsx b/frontend/src/pages/MapPage.tsx
index 5fe1b20..1e0a772 100644
--- a/frontend/src/pages/MapPage.tsx
+++ b/frontend/src/pages/MapPage.tsx
@@ -4,7 +4,7 @@ import {Page} from 'components'
 import {useConfig, Config} from 'config'
 import ReactMapGl, {AttributionControl } from 'react-map-gl'
 
-import styles from './MapPage.module.scss'
+import styles from './MapPage.module.less'
 
 import {obsRoads, basemap } from '../mapstyles'
 
diff --git a/frontend/src/pages/TrackPage/TrackPage.module.scss b/frontend/src/pages/TrackPage/TrackPage.module.less
similarity index 100%
rename from frontend/src/pages/TrackPage/TrackPage.module.scss
rename to frontend/src/pages/TrackPage/TrackPage.module.less
diff --git a/frontend/src/pages/TrackPage/index.tsx b/frontend/src/pages/TrackPage/index.tsx
index 99f2313..4656c0e 100644
--- a/frontend/src/pages/TrackPage/index.tsx
+++ b/frontend/src/pages/TrackPage/index.tsx
@@ -16,7 +16,7 @@ import TrackComments from './TrackComments'
 import TrackDetails from './TrackDetails'
 import TrackMap from './TrackMap'
 
-import styles from './TrackPage.module.scss'
+import styles from './TrackPage.module.less'
 
 function useTriggerSubject() {
   const subject$ = React.useMemo(() => new Subject(), [])
diff --git a/frontend/src/semantic-ui/theme.config b/frontend/src/semantic-ui/theme.config
index 16caa56..0596f0c 100644
--- a/frontend/src/semantic-ui/theme.config
+++ b/frontend/src/semantic-ui/theme.config
@@ -73,6 +73,14 @@
 @item        : 'default';
 @statistic   : 'default';
 
+
+
+@toast       : 'default';
+@slider       : 'default';
+@calendar       : 'default';
+@text       : 'default';
+@emoji       : 'default';
+
 /*******************************
             Folders
 *******************************/
@@ -88,7 +96,7 @@
          Import Theme
 *******************************/
 
-@import (multiple) "~semantic-ui-less/theme.less";
+@import (multiple) "~fomantic-ui-less/theme.less";
 @fontPath : '../../../themes/@{theme}/assets/fonts';
 
 /* End Config */
diff --git a/frontend/src/styles.less b/frontend/src/styles.less
new file mode 100644
index 0000000..87f32d1
--- /dev/null
+++ b/frontend/src/styles.less
@@ -0,0 +1,10 @@
+@obsColorB4: #114594;
+@obsColorG1: #76520E;
+@obsColorW: #FFFFFF;
+@obsColorB1: #122037;
+@obsColorG6: #EFB509;
+@obsColorS: #000000;
+
+@primaryColor: @obsColorB4;
+@secondaryColor: @obsColorG1;
+
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
deleted file mode 100644
index 656fdaf..0000000
--- a/frontend/src/styles.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 16px;
-}
-
-
-$obsColorB4: #114594;
-$obsColorG1: #76520E;
-$obsColorW: #FFFFFF;
-$obsColorB1: #122037;
-$obsColorG6: #EFB509;
-$obsColorS: #000000;
-
-$primaryColor: $obsColorB4;
-$secondaryColor: $obsColorG1;
-