diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index 5a6f78a..7a9d77f 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -91,7 +91,6 @@
     --color-danger-900: hsl(0, 63%, 31%);
     --color-danger-950: hsl(0, 75%, 15%);
 
-
     /* BORDER RADIUS */
     --radius-50: 5px;
     --radius-100: 10px;
@@ -100,25 +99,21 @@
     --radius-250: 25px;
     --radius-360: 99999999px;
 
-
     /* FONT WEIGHT */
     --font-weight-extrablack: 950;
     --font-weight-heavy: 1000;
 
-
     /* FONT FAMILY */
     --font-lato: "Lato", sans-serif;
     --font-inter: "Inter", sans-serif;
     --font-dmsans: "DM Sans", sans-serif;
     --font-iran-yekan-x: "IRANYekanXVF, sans-serif";
 
-
     /* BREAKPOINTS */
     --breakpoint-3xl: 1700px;
     --breakpoint-2xs: 400px;
     --breakpoint-xs: 480px;
 
-
     /* ANIMATIONS */
     --animate-marquee: marquee 3s linear infinite;
 
@@ -127,4 +122,13 @@
             transform: translateY(-50%);
         }
     }
-}
\ No newline at end of file
+}
+
+/* CONTAINER */
+
+@utility container {
+    padding-inline: 3rem;
+    @screen xl {
+        padding-inline: 5rem;
+    }
+}
diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
new file mode 100644
index 0000000..a72124d
--- /dev/null
+++ b/frontend/components/global/Header.vue
@@ -0,0 +1,11 @@
+<script setup></script>
+
+<template>
+    <div class="w-full flex items-center justify-between bg-white">
+        <div class="w-3/12 flex items-center justify-start">
+            <span class="size-[2rem] bg-black rounded-full"></span>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/layouts/Default.vue b/frontend/layouts/Default.vue
index 131be3e..83d4745 100644
--- a/frontend/layouts/Default.vue
+++ b/frontend/layouts/Default.vue
@@ -8,15 +8,12 @@
 //         await suspense();
 //     }
 // });
-
 </script>
 
 <template>
-    <div
-        class="w-full font-dmsans"
-        dir="rtl"
-    >
-        <main class="w-full overflow-x-hidden">
+    <div class="w-full flex flex-col font-dmsans" dir="rtl">
+        <Header />
+        <main class="w-full overflow-x-hidden container">
             <slot />
         </main>
     </div>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 3a897fc..ba5d513 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -12,6 +12,13 @@ export default defineNuxtConfig({
         },
     },
 
+    components: [
+        {
+            path: "~/components",
+            pathPrefix: false,
+        },
+    ],
+
     icon: {
         mode: "svg",
         customCollections: [