diff --git a/client/src/App.css b/client/src/App.scss
similarity index 100%
rename from client/src/App.css
rename to client/src/App.scss
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 98a3f15..e67b2bc 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -3,16 +3,16 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 
 // components
+import Home from './components/Home'
+import Navbar from './components/Nav/Navbar'
 import Register from './components/Auth/Register'
 import Login from './components/Auth/Login'
-import Home from './components/Home'
 
 // util
 import { SupabaseProvider, getSupabaseClient, useSupabase } from './supabase/SupabaseContext'
 import { initialState } from './util/initialState'
 import { AppState } from './util/types'
-import './App.css'
-import Navbar from './components/Nav/Navbar'
+import './App.scss'
 
 export default function App() {
   const [state, setState] = useState<AppState>(initialState);
diff --git a/client/src/components/Nav/Navbar.css b/client/src/components/Nav/Navbar.scss
similarity index 100%
rename from client/src/components/Nav/Navbar.css
rename to client/src/components/Nav/Navbar.scss
diff --git a/client/src/components/Nav/Navbar.tsx b/client/src/components/Nav/Navbar.tsx
index 5cd569b..622191c 100644
--- a/client/src/components/Nav/Navbar.tsx
+++ b/client/src/components/Nav/Navbar.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSupabase } from "../../supabase/SupabaseContext"
-import "./Navbar.css";
+import "./Navbar.scss";
 
 export default function Navbar() {
     const [view, setView] = useState<JSX.Element>(<p>Loading...</p>);
diff --git a/client/src/index.css b/client/src/index.scss
similarity index 100%
rename from client/src/index.css
rename to client/src/index.scss
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 94ad62a..b86c5b1 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
+import './index.scss'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);