diff --git a/src/App.vue b/src/App.vue
index 75e1f82..4010d63 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,29 @@
- div(class='text') HelloWorld
+ div
+ header-component
diff --git a/src/assets/icons/bell.svg b/src/assets/icons/bell.svg
new file mode 100644
index 0000000..404718b
--- /dev/null
+++ b/src/assets/icons/bell.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/down-arrow-1.svg b/src/assets/icons/down-arrow-1.svg
new file mode 100644
index 0000000..45cd26e
--- /dev/null
+++ b/src/assets/icons/down-arrow-1.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/down-arrow-2.svg b/src/assets/icons/down-arrow-2.svg
new file mode 100644
index 0000000..089858b
--- /dev/null
+++ b/src/assets/icons/down-arrow-2.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg
new file mode 100644
index 0000000..9a17652
--- /dev/null
+++ b/src/assets/icons/search.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/images/avatar.png b/src/assets/images/avatar.png
deleted file mode 100644
index 89bdee3..0000000
Binary files a/src/assets/images/avatar.png and /dev/null differ
diff --git a/src/assets/images/avatar.svg b/src/assets/images/avatar.svg
new file mode 100644
index 0000000..a429b0e
--- /dev/null
+++ b/src/assets/images/avatar.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 0000000..ea74ee9
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
new file mode 100644
index 0000000..d1ac2c6
--- /dev/null
+++ b/src/assets/sass/variables.sass
@@ -0,0 +1,5 @@
+$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 e69de29..607fb86 100644
--- a/src/components/homePageComponents/HeaderComponent.vue
+++ b/src/components/homePageComponents/HeaderComponent.vue
@@ -0,0 +1,150 @@
+
+ div.header-wrapper.flex.flex-row.center.space-between
+ div.logo-wrapper
+ img.logo-img(src="../../assets/images/logo.svg" alt="Logo")
+ div.flex.flex-row
+ div.inputs-wrapper
+ img.search-icon(src="../../assets/icons/search.svg" alt="Search")
+ select.inputs.select(v-model="selectedFilter")
+ option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
+ span.separator
+ input.inputs.search-input(placeholder="Искать ...")
+ button.flex.center.btn-notification
+ img.bell-icon(src="../../assets/icons/bell.svg" alt="Notifications")
+ div.flex.flex-row.center
+ img.avatar-img(:src="avatarSrc")
+ button.flex.flex-center
+ img.arrow-icon(src="../../assets/icons/down-arrow-2.svg" alt="Down Arrow")
+
+
+
+
+
diff --git a/src/vue.config.js b/src/vue.config.js
new file mode 100644
index 0000000..5011196
--- /dev/null
+++ b/src/vue.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+ css: {
+ loaderOptions: {
+ sass: {
+ additionalData: ' @import "@/assets/sass/styles.sass" '
+ }
+ }
+ }
+}
\ No newline at end of file