diff --git a/src/App.vue b/src/App.vue
index fe60ea4..fb713ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,6 @@
 
 <style lang="sass">
   #app
-    font-family: Raleway, sans-serif
     font-feature-settings: 'pnum' on, 'lnum' on
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
diff --git a/src/assets/css/iconfonts.sass b/src/assets/css/iconfonts.sass
new file mode 100644
index 0000000..f238276
--- /dev/null
+++ b/src/assets/css/iconfonts.sass
@@ -0,0 +1,149 @@
+@font-face
+  font-family: 'icomoon'
+  src:  url('../fonts/icomoon.eot?d07d1g')
+  src:  url('../fonts/icomoon.eot?d07d1g#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?d07d1g') format('truetype'),
+    url('../fonts/icomoon.woff?d07d1g') format('woff'),
+    url('../fonts/icomoon.svg?d07d1g#icomoon') format('svg')
+  font-weight: normal
+  font-style: normal
+  font-display: block
+
+[class^="icon-"]::before, [class*=" icon-"]::before 
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important
+  speak: never
+  font-style: normal
+  font-weight: normal
+  font-variant: normal
+  text-transform: none
+  line-height: 1
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+
+.icon-settings:before
+  content: "\e925"
+
+.icon-home:before 
+  content: "\e926"
+
+.icon-calendar-2:before 
+  content: "\e927"
+
+.icon-person-2:before 
+  content: "\e928"
+
+.icon-basket:before 
+  content: "\e900"
+
+.icon-bell:before 
+  content: "\e901"
+
+.icon-calendar:before 
+  content: "\e902"
+
+.icon-cancel:before 
+  content: "\e903"
+
+.icon-cancel-mini:before 
+  content: "\e904"
+
+.icon-change-place:before 
+  content: "\e905"
+
+.icon-close-eye:before 
+  content: "\e906"
+
+.icon-copy:before 
+  content: "\e907"
+
+.icon-discord:before 
+  content: "\e908"
+
+.icon-doc-ok:before 
+  content: "\e909"
+
+.icon-dots:before 
+  content: "\e90a"
+
+.icon-down-arrow:before 
+  content: "\e90b"
+
+.icon-edit:before 
+  content: "\e90c"
+
+.icon-export:before 
+  content: "\e90d"
+
+.icon-eye:before {
+  content: "\e90e"
+
+.icon-files:before 
+  content: "\e90f"
+
+.icon-filtre:before 
+  content: "\e910"
+
+.icon-google:before 
+  content: "\e911"
+
+.icon-group:before 
+  content: "\e912"
+
+.icon-long-arrow:before 
+  content: "\e913"
+
+.icon-mail:before 
+  content: "\e914"
+
+.icon-ok:before 
+  content: "\e915"
+
+.icon-person:before 
+  content: "\e916"
+
+.icon-phone:before 
+  content: "\e917"
+
+.icon-plus:before 
+  content: "\e918"
+
+.icon-search:before 
+  content: "\e919"
+
+.icon-slack:before 
+  content: "\e91a"
+
+.icon-sort-number:before 
+  content: "\e91b"
+
+.icon-sort-word:before 
+  content: "\e91c"
+
+.icon-star:before 
+  content: "\e91d"
+
+.icon-star-black:before 
+  content: "\e91e"
+}
+.icon-table:before 
+  content: "\e91f"
+
+.icon-telegram:before 
+  content: "\e920"
+
+.icon-time:before 
+  content: "\e921"
+
+.icon-up-tag:before 
+  content: "\e922"
+
+.icon-user-data:before 
+  content: "\e923"
+
+.icon-vk:before {
+  content: "\e924";
+}
diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
deleted file mode 100644
index d0cf661..0000000
--- a/src/assets/css/variables.css
+++ /dev/null
@@ -1,10 +0,0 @@
-:root {
-	--bg-lavender-color: #E9E9F6;
-	--bg-white-color: #F8F8FF;
-	--bg-ligth-blue-color: #E6EAFC;
-	--font-dark-blue-color: #252850;
-	--font-black-color: #090A15;
-	--btn-blue-color: #4772F2;
-	--font-grey-color: #9294A7;
-	--border-light-grey-color: #9294A7;
-}
diff --git a/src/assets/sass/styles.sass b/src/assets/sass/styles.sass
deleted file mode 100644
index 8de309a..0000000
--- a/src/assets/sass/styles.sass
+++ /dev/null
@@ -1 +0,0 @@
-@import "./fonts.sass"
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
new file mode 100644
index 0000000..35454db
--- /dev/null
+++ b/src/assets/sass/variables.sass
@@ -0,0 +1,9 @@
+:root
+	--bg-lavender-color: #E9E9F6
+	--bg-white-color: #F8F8FF
+	--bg-ligth-blue-color: #E6EAFC
+	--font-dark-blue-color: #252850
+	--font-black-color: #090A15
+	--btn-blue-color: #4772F2
+	--font-grey-color: #9294A7
+	--border-light-grey-color: #9294A7
diff --git a/src/components/HeaderInputs.vue b/src/components/HeaderInputs.vue
index 21e94c6..46895e6 100644
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -9,7 +9,7 @@
         .options(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
           .icon-wrapper
             .icon-ok.ok(v-if="filter === selectedFilter")
-          .options-text {{ filter }}
+          .options-text.text-lg {{ filter }}
     input.inputs.search-input(placeholder="Искать ...")
 </template>
 
@@ -77,7 +77,6 @@
     color: var(--btn-blue-color)
     height: 100%
     box-sizing: border-box
-    font-family: Raleway
     font-style: normal
     font-weight: 500
     font-size: 16px
diff --git a/src/main.js b/src/main.js
index 638d318..0552a9c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router";
+import './assets/sass/fonts.sass'
 import './assets/sass/tailwind.sass'
+import './assets/sass/variables.sass'
 import './assets/css/iconfonts.css'
-import './assets/css/variables.css'
 
 createApp(App).use(router).mount('#app')
diff --git a/tailwind.config.js b/tailwind.config.js
index d27026d..cac699b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,23 @@ module.exports = {
     './index.html',
     './src/**/*.{js,jsx,ts,tsx,vue}',
   ],
-  theme: {},
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Raleway', 'sans-serif'],
+      },
+      fontSize: {
+        xxs: ['12px', { lineHeight: '14px' }],
+        xs: ['13px', { lineHeight: '15px' }],
+        sm: ['14px', { lineHeight: '16px' }],
+        base: ['16px', { lineHeight: '19px' }],
+        m: ['16px', { lineHeight: '21.6px' }],
+        lg: ['18px', { lineHeight: '21px' }],
+        xl: ['20px', { lineHeight: '23px' }],
+        '2xl': ['28px', { lineHeight: '33px' }],
+        '3xl': ['60px', { lineHeight: '70px' }],
+      }
+    },
+  },
   plugins: [],
 };