diff --git a/client/package.json b/client/package.json
index 2cc5732..26e650e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,8 @@
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.0",
     "html-webpack-plugin": "^5.3.1",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "webpack": "^5.31.0",
     "webpack-cli": "^4.6.0"
diff --git a/client/src/App.js b/client/src/App.js
index c943b71..10a9370 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -8,7 +8,7 @@
 import CssBaseline from '@material-ui/core/CssBaseline';
 import authManager from './AuthManager'
 //import logo from './logo.svg';
-import './App.css';
+import './App.scss';
 
 import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';
 
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/index.js b/client/src/index.js
index 42d2abd..b39e2f5 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './index.scss';
 import App from './App';
 //import * as serviceWorker from './serviceWorker';
 
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/webpack.config.js b/client/webpack.config.js
index 84ff411..c02de06 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -22,8 +22,8 @@
                 }
             },
             {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
+                test: /\.s[ac]ss$/i,
+                use: ['style-loader', 'css-loader', 'sass-loader'],
             }
         ]
     },