diff --git a/src/App.vue b/src/App.vue
index 4010d63..dfc0a14 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,6 @@ export default {
 </script>
 
 <style lang="sass">
-@import "./assets/sass/variables.sass"
 
 #app
   font-family: Raleway
@@ -20,7 +19,7 @@ export default {
   -moz-osx-font-smoothing: grayscale
   text-align: center
   width: 100%
-  background-color: $bg-lavender-color
+  background-color: var(--bg-lavender-color)
 
 body
   margin: 0
diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
new file mode 100644
index 0000000..9e3cf07
--- /dev/null
+++ b/src/assets/css/variables.css
@@ -0,0 +1,7 @@
+:root {
+	--bg-lavender-color: #D7D9FF;
+	--bg-white-color: #F8F8FF;
+	--font-dark-blue-color: #252850;
+	--font-black-color: #090A15;
+	--btn-blue-color: #4169E1;
+}
\ No newline at end of file
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
deleted file mode 100644
index d1ac2c6..0000000
--- a/src/assets/sass/variables.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-$bg-lavender-color: #D7D9FF
-$bg-white-color: #F8F8FF
-$font-dark-blue-color: #252850
-$font-black-color: #090A15
-$btn-blue-color: #4169E1
\ No newline at end of file
diff --git a/src/components/homePageComponents/HeaderComponent.vue b/src/components/homePageComponents/HeaderComponent.vue
index 607fb86..904a036 100644
--- a/src/components/homePageComponents/HeaderComponent.vue
+++ b/src/components/homePageComponents/HeaderComponent.vue
@@ -32,7 +32,6 @@ export default {
 </script>
 
 <style lang='sass'>
-@import '../../assets/sass/variables.sass'
 
 input
   padding: 0 
@@ -43,12 +42,12 @@ button
   background-color: transparent
   cursor: pointer
   padding: 0
-  color: $font-dark-blue-color 
+  color: var(--font-dark-blue-color)
 
 .header-wrapper
   width: 100%
   padding: 8px 24px
-  background-color: $bg-white-color
+  background-color: var(--bg-white-color)
   box-sizing: border-box
 
 .flex
@@ -85,7 +84,7 @@ button
   position: absolute
   height: 24px
   width: 24px
-  color: $btn-blue-color
+  color: var(--btn-blue-color)
   opacity: 0.7 
 
 .btn-notification
@@ -104,7 +103,7 @@ button
   border: none
   outline: none
   background-color: transparent
-  color: $btn-blue-color
+  color: var(--btn-blue-color)
   height: 100%
   box-sizing: border-box
   font-family: Raleway
@@ -116,7 +115,7 @@ button
   display: inline-block
   vertical-align: middle
   &::placeholder
-    color: $btn-blue-color
+    color: var(--btn-blue-color)
     opacity: 0.5
 
 .select
@@ -137,7 +136,7 @@ button
   display: inline-block
   vertical-align: middle
   height: 254px
-  border-left: 1px solid $btn-blue-color
+  border-left: 1px solid var(--btn-blue-color)
   opacity: 0.5
   border-radius: 4px
   height: 100%
diff --git a/src/main.js b/src/main.js
index 2594705..cfe1e5b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './assets/sass/styles.sass'
+import './assets/css/variables.css'
 
 createApp(App).mount('#app')
diff --git a/src/vue.config.js b/src/vue.config.js
deleted file mode 100644
index 5011196..0000000
--- a/src/vue.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-  css: {
-    loaderOptions: {
-      sass: {
-        additionalData: ' @import "@/assets/sass/styles.sass" '
-      }
-    }
-  }
-}
\ No newline at end of file