diff --git a/music/__pycache__/settings.cpython-310.pyc b/music/__pycache__/settings.cpython-310.pyc
index 44ef89515fe8fa6c495e1c87ba1fe63df0f89df6..ba468e10c0ac50ae5816ee96e61e5e0eb6fd67a9 100644
Binary files a/music/__pycache__/settings.cpython-310.pyc and b/music/__pycache__/settings.cpython-310.pyc differ
diff --git a/music/settings.py b/music/settings.py
index 0c803b4cc38bec2be8168e88c892088c05870624..b0a970b1dd759e3fba9c5876dbcf2af4cf08328e 100644
--- a/music/settings.py
+++ b/music/settings.py
@@ -32,6 +32,7 @@ ALLOWED_HOSTS = []
 
 INSTALLED_APPS = [
     'homeapp.apps.HomeappConfig',
+    'sass_processor',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -122,3 +123,12 @@ STATIC_URL = 'static/'
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+STATIC_ROOT = BASE_DIR / 'static'
+SASS_PROCESSOR_ROOT = STATIC_ROOT
+
+STATICFILES_FINDERS = [
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'sass_processor.finders.CssFinder',
+]
\ No newline at end of file
diff --git a/static/css/base.css b/static/css/base.css
new file mode 100644
index 0000000000000000000000000000000000000000..4324552c516196e09a771861b159604c7ba76fe5
--- /dev/null
+++ b/static/css/base.css
@@ -0,0 +1,14 @@
+body {
+  font-family: "Lucida Grande", monospace;
+  background-color: #191414;
+  margin: 10px;
+  padding: 10px; }
+
+h1 {
+  text-transform: uppercase;
+  color: white; }
+
+p {
+  color: white; }
+
+/*# sourceMappingURL=base.css.map */
\ No newline at end of file
diff --git a/static/css/base.css.map b/static/css/base.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..c620a1eb950d4423d227e3644293e9ab7210470a
--- /dev/null
+++ b/static/css/base.css.map
@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"file": "base.css",
+	"sources": [
+		"base.scss"
+	],
+	"names": [],
+	"mappings": "AAEA,AAAA,IAAI,CAAC;EACJ,WAAW,EAHL,eAAe,EAAE,SAAS;EAIhC,gBAAgB,EAHT,OAAO;EAId,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI,GACb;;AACD,AAAA,EAAE,CAAC;EACF,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK,GACZ;;AACD,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK,GACf"
+}
\ No newline at end of file
diff --git a/static/css/base.scss b/static/css/base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..02b831268457dea9c76e722a556e12c19551b35a
--- /dev/null
+++ b/static/css/base.scss
@@ -0,0 +1,15 @@
+$font: 'Lucida Grande', monospace;
+$color: #191414;
+body {
+ font-family: $font;
+ background-color: $color;
+ margin: 10px;
+ padding: 10px;
+}
+h1 {
+ text-transform: uppercase;
+ color: white;
+}
+p {
+    color: white;
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index a5b5d2e5c9d09ae44345b9bc65b8e94c21977184..81181c28ae7bd67b8b7d710fae9d2ada447c95ad 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,4 +1,5 @@
 {% load static %}
+{% load sass_tags %}
 
 
 <!DOCTYPE html>
@@ -13,15 +14,14 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-        
+        <link rel="stylesheet" type="text/css" href={% sass_src 'css/base.scss' %}/>
     </head>
-
     <body>
         {% block header %}
         <p>Header</p>
         {% endblock header %}
 
-
+       
 
         {% block content %}
         {% endblock content %}