diff --git a/src/app/globals.css b/src/app/globals.css
index b22fef7..a5c9464 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,8 +3,8 @@
 
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-200-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-200-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-200-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-200-normal.woff') format('woff');
   font-weight: 200;
   font-style: normal;
 }
@@ -12,43 +12,43 @@
 
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-300-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-300-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-300-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-300-normal.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-400-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-400-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-400-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-400-normal.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-500-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-500-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-500-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-500-normal.woff') format('woff');
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-600-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-600-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-600-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-600-normal.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-700-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-700-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-700-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-700-normal.woff') format('woff');
   font-weight: 700;
   font-style: normal;
 }
 @font-face {
   font-family: 'Manrope';
-  src: url('/fonts/manrope/manrope-cyrillic-800-normal.woff2') format('woff2'),
-       url('/fonts/manrope/manrope-cyrillic-800-normal.woff') format('woff');
+  src: url('../assets/fonts/manrope/manrope-cyrillic-800-normal.woff2') format('woff2'),
+       url('../assets/fonts/manrope/manrope-cyrillic-800-normal.woff') format('woff');
   font-weight: 800;
   font-style: normal;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e89f824..a697ecd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,11 +1,12 @@
+'use client'
 import type { Metadata } from 'next';
 import './globals.css';
 import { cookies } from 'next/headers';
 
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-};
+// export const metadata: Metadata = {
+//   title: 'Create Next App',
+//   description: 'Generated by create next app',
+// };
 
 export default async function RootLayout({
   children,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a0d3594..c850143 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
-import { t } from '@/locales/translates';
+// ... existing imports ...
+import Header from '@/components/layout/header';
 
 async function getData() {
   await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -10,7 +11,7 @@ export default async function Home() {
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
-      <span>{t('pages_home_title') as string}</span>
+      <Header />
     </main>
   );
 }
diff --git a/public/fonts/manrope/manrope-cyrillic-200-normal.woff b/src/assets/fonts/manrope/manrope-cyrillic-200-normal.woff
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-200-normal.woff
rename to src/assets/fonts/manrope/manrope-cyrillic-200-normal.woff
diff --git a/public/fonts/manrope/manrope-cyrillic-200-normal.woff2 b/src/assets/fonts/manrope/manrope-cyrillic-200-normal.woff2
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-200-normal.woff2
rename to src/assets/fonts/manrope/manrope-cyrillic-200-normal.woff2
diff --git a/public/fonts/manrope/manrope-cyrillic-300-normal.woff b/src/assets/fonts/manrope/manrope-cyrillic-300-normal.woff
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-300-normal.woff
rename to src/assets/fonts/manrope/manrope-cyrillic-300-normal.woff
diff --git a/public/fonts/manrope/manrope-cyrillic-300-normal.woff2 b/src/assets/fonts/manrope/manrope-cyrillic-300-normal.woff2
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-300-normal.woff2
rename to src/assets/fonts/manrope/manrope-cyrillic-300-normal.woff2
diff --git a/public/fonts/manrope/manrope-cyrillic-400-normal.woff b/src/assets/fonts/manrope/manrope-cyrillic-400-normal.woff
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-400-normal.woff
rename to src/assets/fonts/manrope/manrope-cyrillic-400-normal.woff
diff --git a/public/fonts/manrope/manrope-cyrillic-400-normal.woff2 b/src/assets/fonts/manrope/manrope-cyrillic-400-normal.woff2
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-400-normal.woff2
rename to src/assets/fonts/manrope/manrope-cyrillic-400-normal.woff2
diff --git a/public/fonts/manrope/manrope-cyrillic-500-normal.woff b/src/assets/fonts/manrope/manrope-cyrillic-500-normal.woff
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-500-normal.woff
rename to src/assets/fonts/manrope/manrope-cyrillic-500-normal.woff
diff --git a/public/fonts/manrope/manrope-cyrillic-500-normal.woff2 b/src/assets/fonts/manrope/manrope-cyrillic-500-normal.woff2
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-500-normal.woff2
rename to src/assets/fonts/manrope/manrope-cyrillic-500-normal.woff2
diff --git a/public/fonts/manrope/manrope-cyrillic-600-normal.woff b/src/assets/fonts/manrope/manrope-cyrillic-600-normal.woff
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-600-normal.woff
rename to src/assets/fonts/manrope/manrope-cyrillic-600-normal.woff
diff --git a/public/fonts/manrope/manrope-cyrillic-600-normal.woff2 b/src/assets/fonts/manrope/manrope-cyrillic-600-normal.woff2
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-600-normal.woff2
rename to src/assets/fonts/manrope/manrope-cyrillic-600-normal.woff2
diff --git a/public/fonts/manrope/manrope-cyrillic-700-normal.woff b/src/assets/fonts/manrope/manrope-cyrillic-700-normal.woff
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-700-normal.woff
rename to src/assets/fonts/manrope/manrope-cyrillic-700-normal.woff
diff --git a/public/fonts/manrope/manrope-cyrillic-700-normal.woff2 b/src/assets/fonts/manrope/manrope-cyrillic-700-normal.woff2
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-700-normal.woff2
rename to src/assets/fonts/manrope/manrope-cyrillic-700-normal.woff2
diff --git a/public/fonts/manrope/manrope-cyrillic-800-normal.woff b/src/assets/fonts/manrope/manrope-cyrillic-800-normal.woff
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-800-normal.woff
rename to src/assets/fonts/manrope/manrope-cyrillic-800-normal.woff
diff --git a/public/fonts/manrope/manrope-cyrillic-800-normal.woff2 b/src/assets/fonts/manrope/manrope-cyrillic-800-normal.woff2
similarity index 100%
rename from public/fonts/manrope/manrope-cyrillic-800-normal.woff2
rename to src/assets/fonts/manrope/manrope-cyrillic-800-normal.woff2
diff --git a/src/assets/images/home_banner.jpg b/src/assets/images/home_banner.jpg
new file mode 100644
index 0000000..85deade
Binary files /dev/null and b/src/assets/images/home_banner.jpg differ
diff --git a/src/assets/images/images.ts b/src/assets/images/images.ts
new file mode 100644
index 0000000..fa07831
--- /dev/null
+++ b/src/assets/images/images.ts
@@ -0,0 +1,6 @@
+import homeBanner from "./home_banner.jpg"
+import logo from './logo.png'
+
+export default {
+    homeBanner,logo
+}
\ No newline at end of file
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..571f01f
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 0000000..d13561c
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,35 @@
+<svg width="450" height="200" viewBox="0 0 450 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M165.701 0.145842C172.034 -0.0559857 178.466 0.145836 184.899 0.0449219C184.899 15.5856 184.998 31.2273 184.899 46.768C178.466 46.768 172.133 46.768 165.701 46.768C165.701 31.2273 165.602 15.6866 165.701 0.145842Z" fill="#FA003F"/>
+<path d="M189.945 0.0448505C218.939 0.0448505 249.714 -0.0560632 278.708 0.0448505C278.807 15.5856 278.906 31.2272 278.708 46.7679C249.714 46.7679 218.939 46.7679 189.945 46.7679C189.945 31.2272 189.945 15.6865 189.945 0.0448505Z" fill="#FA003F"/>
+<path d="M121.468 54.9426C141.952 54.7407 162.435 54.8416 183.018 54.8416C183.018 60.6946 183.018 66.5476 183.018 72.4006C162.534 72.4006 142.05 72.4006 121.468 72.4006" fill="#FA003F"/>
+<path d="M187.768 54.8413C232.199 54.8413 276.531 54.8413 320.962 54.8413C320.962 60.5934 320.863 66.4464 321.061 72.2994C276.63 72.2994 232.199 72.2994 187.768 72.2994C187.57 66.4464 187.768 60.6943 187.768 54.8413Z" fill="#FA003F"/>
+<path d="M95.4424 77.3447C116.322 77.3447 134.233 77.3447 155.112 77.3447C155.112 83.2986 155.112 89.1516 155.112 95.1055C134.233 95.0046 116.322 95.2065 95.4424 95.0046" fill="#FA003F"/>
+<path d="M160.061 77.3447C221.611 77.3447 283.26 77.3447 344.81 77.3447C344.81 83.1977 344.81 89.1516 344.81 95.0046C283.26 95.0046 221.611 95.0046 160.061 95.0046C160.16 89.1516 160.061 83.2986 160.061 77.3447Z" fill="#FA003F"/>
+<path d="M74.167 102.17C95.6403 102.271 117.114 101.867 138.587 102.372C138.488 108.628 138.488 114.885 138.587 121.142C117.114 121.142 95.6403 121.142 74.167 121.142" fill="#FA003F"/>
+<path d="M143.139 126.692C143.139 118.619 143.04 110.445 143.139 102.372C160.852 102.372 178.565 102.372 196.278 102.372C196.278 108.931 196.278 115.389 196.278 121.949C184.404 121.949 172.628 121.949 160.753 121.949C160.852 129.517 160.753 137.187 160.753 144.755C143.436 144.755 126.119 144.755 108.802 144.755C108.802 138.701 108.703 132.747 108.802 126.692C120.281 126.692 131.759 126.692 143.139 126.692Z" fill="#FA003F"/>
+<path d="M201.523 121.747C201.523 115.288 201.523 108.729 201.523 102.271C255.652 102.271 313.739 102.371 367.867 102.271C367.867 108.729 367.867 115.288 367.966 121.747C313.838 121.848 255.652 121.848 201.523 121.747Z" fill="#FA003F"/>
+<path d="M53.0898 127.096C62.1937 127.096 71.1987 127.096 80.3026 127.096C80.3026 128.105 80.3026 129.215 80.3026 130.224C71.1987 130.224 62.1937 130.224 53.0898 130.224C53.0898 129.114 53.0898 128.105 53.0898 127.096Z" fill="#FA003F"/>
+<path d="M167.087 127.096C185.295 127.096 203.503 127.096 221.71 127.096C221.71 128.105 221.71 129.215 221.71 130.224C203.503 130.224 185.295 130.224 167.087 130.224C167.087 129.114 167.087 128.105 167.087 127.096Z" fill="#FA003F"/>
+<path d="M250.011 127.096C281.973 127.096 313.837 127.096 345.8 127.096C345.8 128.105 345.8 129.215 345.8 130.224C313.837 130.224 281.973 130.224 250.011 130.224C250.011 129.114 250.011 128.105 250.011 127.096Z" fill="#FA003F"/>
+<path d="M351.936 127.096C358.071 127.096 364.206 127.096 370.342 127.096C370.342 145.664 370.342 164.131 370.342 182.699C376.675 182.699 383.008 182.699 389.341 182.699C389.539 172.709 389.44 162.718 389.341 152.728C395.377 152.526 401.513 152.526 407.549 152.728C407.351 168.47 407.549 184.112 407.45 199.854C388.945 199.854 370.342 199.854 351.837 199.854C351.936 175.534 351.936 151.315 351.936 127.096Z" fill="#FA003F"/>
+<path d="M377.07 127.096C380.633 127.096 384.096 127.096 387.658 127.096C387.757 128.105 387.757 129.215 387.757 130.224C384.195 130.224 380.633 130.224 377.07 130.224C377.07 129.114 377.07 128.105 377.07 127.096Z" fill="#FA003F"/>
+<path d="M84.2611 127.398C90.2973 127.297 96.2347 127.398 102.271 127.398C102.271 146.067 102.271 164.636 102.271 183.305C113.75 183.305 125.229 183.305 136.608 183.305C136.608 178.965 136.608 174.727 136.608 170.388C127.9 170.388 119.192 170.388 110.484 170.388C110.484 164.535 110.484 158.581 110.484 152.728C125.13 152.627 139.874 152.728 154.519 152.728C154.618 168.47 154.42 184.213 154.519 199.955C131.067 200.056 107.615 199.955 84.1621 199.955C84.2611 175.635 84.2611 151.517 84.2611 127.398Z" fill="#FA003F"/>
+<path d="M226.064 127.499C232.199 127.499 238.334 127.499 244.47 127.499C244.47 145.865 244.47 164.232 244.47 182.598C248.923 182.598 253.277 182.598 257.729 182.598C257.729 172.607 257.729 162.516 257.729 152.526C263.964 152.526 270.099 152.324 276.333 152.627C276.234 162.617 276.234 172.607 276.333 182.598C281.083 182.598 285.734 182.598 290.484 182.598C290.484 172.607 290.484 162.516 290.484 152.526C296.619 152.526 302.853 152.425 308.988 152.627C308.988 162.617 308.988 172.607 308.988 182.598C313.837 182.598 318.785 182.598 323.634 182.598C323.634 172.708 323.634 162.718 323.634 152.828C329.868 152.828 336.102 152.828 342.336 152.828C342.336 168.47 342.138 184.112 342.336 199.753C303.546 199.753 264.755 199.753 225.965 199.753C226.064 175.736 226.064 151.617 226.064 127.499Z" fill="#FA003F"/>
+<path d="M44.1836 135.774C56.2562 135.774 68.3287 135.774 80.4013 135.774C80.4013 136.783 80.4013 137.893 80.4013 138.902C68.3287 138.902 56.2562 138.902 44.1836 138.902C44.1836 137.792 44.1836 136.783 44.1836 135.774Z" fill="#FA003F"/>
+<path d="M167.087 135.774C185.295 135.774 203.503 135.774 221.71 135.774C221.71 136.783 221.71 137.893 221.71 138.902C203.503 138.902 185.295 138.902 167.087 138.902C167.087 137.792 167.087 136.783 167.087 135.774Z" fill="#FA003F"/>
+<path d="M250.011 135.774C281.973 135.774 313.837 135.774 345.8 135.774C345.8 136.783 345.8 137.893 345.8 138.902C313.837 138.902 281.973 138.902 250.011 138.902C250.011 137.792 250.011 136.783 250.011 135.774Z" fill="#FA003F"/>
+<path d="M377.07 135.774C383.502 135.774 389.934 135.774 396.466 135.774C396.466 136.783 396.466 137.893 396.466 138.902C390.033 138.902 383.601 138.902 377.07 138.902C377.07 137.792 377.07 136.783 377.07 135.774Z" fill="#FA003F"/>
+<path d="M33.2002 143.948C48.9341 143.948 64.5691 143.948 80.303 143.948C80.303 144.957 80.303 146.067 80.303 147.076C64.5691 147.076 48.9341 147.076 33.2002 147.076C33.2002 146.067 33.2002 144.957 33.2002 143.948Z" fill="#FA003F"/>
+<path d="M167.087 143.948C185.295 143.948 203.503 143.948 221.71 143.948C221.71 144.957 221.71 146.067 221.71 147.076C203.503 147.076 185.295 147.076 167.087 147.076C167.087 146.067 167.087 144.957 167.087 143.948Z" fill="#FA003F"/>
+<path d="M250.011 143.948C281.973 143.948 313.837 143.948 345.8 143.948C345.8 144.957 345.8 146.067 345.8 147.076C313.837 147.076 281.973 147.076 250.011 147.076C250.011 146.067 250.011 144.957 250.011 143.948Z" fill="#FA003F"/>
+<path d="M377.07 143.948C386.669 143.948 396.268 143.948 405.866 143.948C405.866 144.957 405.866 146.067 405.866 147.076C396.268 147.076 386.669 147.076 377.07 147.076C377.07 146.067 377.07 144.957 377.07 143.948Z" fill="#FA003F"/>
+<path d="M23.6998 152.626C41.2149 152.626 58.73 152.425 76.2451 152.727C76.1462 168.47 76.1462 184.112 76.2451 199.854C50.9125 199.854 25.481 199.854 0.148433 199.854C-0.0494777 194.102 -0.0494777 188.451 0.148433 182.699C19.3458 182.699 38.4442 182.901 57.6415 182.8C57.6415 178.662 57.6415 174.525 57.6415 170.387C46.3606 170.387 34.9807 170.387 23.6998 170.387C23.6998 164.433 23.6998 158.479 23.6998 152.626Z" fill="#FA003F"/>
+<path d="M196.674 152.728C202.612 152.526 208.549 152.627 214.585 152.627C214.19 168.369 214.486 184.112 214.585 199.854C197.169 199.854 179.753 199.854 162.337 199.854C162.436 194.203 162.436 188.552 162.337 182.901C173.717 182.8 185.196 182.901 196.674 182.8C196.773 172.709 196.674 162.718 196.674 152.728Z" fill="#FA003F"/>
+<path d="M377.07 153.333C379.445 153.333 381.82 153.333 384.195 153.333C384.195 154.342 384.195 155.452 384.195 156.461C381.82 156.461 379.445 156.461 377.07 156.461C377.07 155.452 377.07 154.443 377.07 153.333Z" fill="#FA003F"/>
+<path d="M167.087 155.553C174.805 155.553 182.524 155.553 190.242 155.553C190.242 156.562 190.242 157.672 190.242 158.682C182.524 158.682 174.805 158.682 167.087 158.682C167.087 157.672 167.087 156.562 167.087 155.553Z" fill="#FA003F"/>
+<path d="M377.07 162.011C379.445 162.011 381.82 162.011 384.195 162.011C384.195 163.02 384.195 164.13 384.195 165.14C381.82 165.14 379.445 165.14 377.07 165.14C377.07 164.13 377.07 163.02 377.07 162.011Z" fill="#FA003F"/>
+<path d="M167.087 164.231C174.805 164.231 182.524 164.231 190.242 164.231C190.242 165.241 190.242 166.351 190.242 167.36C182.524 167.36 174.805 167.36 167.087 167.36C167.087 166.351 167.087 165.241 167.087 164.231Z" fill="#FA003F"/>
+<path d="M377.07 170.186C379.445 170.186 381.82 170.186 384.195 170.186C384.195 171.195 384.195 172.305 384.195 173.314C381.82 173.314 379.445 173.314 377.07 173.314C377.07 172.305 377.07 171.296 377.07 170.186Z" fill="#FA003F"/>
+<path d="M416.751 171.498C422.589 171.498 428.428 171.498 434.266 171.498C434.266 175.231 434.266 178.965 434.266 182.598C439.511 182.699 444.755 182.598 450 182.598C449.901 188.249 449.901 194.001 450 199.652C438.917 199.854 427.834 199.652 416.751 199.753C416.751 190.368 416.751 180.983 416.751 171.498Z" fill="#FA003F"/>
+<path d="M167.087 172.406C174.805 172.406 182.524 172.406 190.242 172.406C190.242 173.415 190.242 174.525 190.242 175.534C182.524 175.534 174.805 175.534 167.087 175.534C167.087 174.525 167.087 173.516 167.087 172.406Z" fill="#FA003F"/>
+</svg>
diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/index.tsx
new file mode 100644
index 0000000..d681f37
--- /dev/null
+++ b/src/components/layout/header/index.tsx
@@ -0,0 +1,43 @@
+import images from '@/assets/images/images';
+import Navbar from '../navbar';
+import Button from '@/components/uikit/button';
+
+export default function Header() {
+  return (
+    <header
+      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right"
+      style={{ backgroundImage: `url(${images.homeBanner.src})` }}
+    >
+      <div className="absolute inset-0 bg-black opacity-50 z-0 blur-[100px]" />
+      <Navbar />
+      <div className="container mx-auto bg-cover bg-center text-white flex justify-between items-center flex-col relative z-10 h-[80%] py-20">
+        <div className=" w-full flex flex-col justify-start ">
+          <h1 className="text-7xl md:text-6xl font-light">
+            Excellence innovating{' '}
+          </h1>
+          <h1 className="text-7xl md:text-6xl font-bold">
+            industry for today{' '}
+          </h1>
+          <p className="mb-8 mt-5 text-base font-normal">
+            At the heart of our operations is a commitment to delivering
+            superior products through cutting- <br/>edge technology and innovative
+            processes.
+          </p>
+          <Button className='w-48'>Explore More</Button>
+        </div>
+
+        <div className="w-full flex justify-center gap-8 text-sm border-t-[1px] border-white/10 pt-12 ">
+          <a href="#" className="hover:underline">
+            Advanced Manufacturing Solutions
+          </a>
+          <a href="#" className="hover:underline">
+            Quality Assurance Systems
+          </a>
+          <a href="#" className="hover:underline">
+            State-of-the-Art Technology
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/layout/navbar/index.tsx b/src/components/layout/navbar/index.tsx
new file mode 100644
index 0000000..aa06b2b
--- /dev/null
+++ b/src/components/layout/navbar/index.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import images from '@/assets/images/images';
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  const links = [
+    { href: '/', label: 'Home' },
+    { href: '/services', label: 'About US' },
+    { href: '/blog', label: 'Products' },
+    { href: '/contact', label: 'Blog' },
+    { href: '/contact', label: 'Project' },
+    { href: '/contact', label: 'Contact Us' },
+
+  ];
+
+  const linkClass = (href: string) =>
+    pathname === href ? ' text-red-500 font-semibold' : 'text-white';
+
+  return (
+    <nav className="bg-transparent container mx-auto py-11 shrink-0 relative z-10 ">
+      <div className=" flex items-center justify-between">
+        <Link href="/" className="text-xl font-bold ">
+        <Image  alt='logo' src={images.logo} className='w-auto h-auto'/></Link>
+
+        <ul className="hidden md:flex space-x-6">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <Link href={href} className={`${linkClass(href)} hover:text-primary-light `}>
+                {label}
+              </Link>
+            </li>
+          ))}
+          <li>
+            <a className='flex gap-2 items-center' href='tel:+098123456789'>
+
+            <span>xx</span>
+            <p>+098 123456789</p>
+            </a>
+          </li>
+        </ul>
+
+        <button className="md:hidden text-gray-700" onClick={() => setOpen(!open)}>
+          {open ? <p>x</p> : <p>menu</p>}
+        </button>
+      </div>
+
+      {open && (
+        <ul className="md:hidden mt-2 space-y-2 px-2">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <Link href={href} className={linkClass(href)} onClick={() => setOpen(false)}>
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </nav>
+  );
+}
diff --git a/src/components/Button.tsx b/src/components/uikit/button/index.tsx
similarity index 100%
rename from src/components/Button.tsx
rename to src/components/uikit/button/index.tsx
diff --git a/src/images.d.ts b/src/images.d.ts
new file mode 100644
index 0000000..fd014a9
--- /dev/null
+++ b/src/images.d.ts
@@ -0,0 +1,4 @@
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
\ No newline at end of file