diff --git a/public/images/logo.png b/resources/images/logo.png
similarity index 100%
rename from public/images/logo.png
rename to resources/images/logo.png
diff --git a/resources/js/components/Footer.vue b/resources/js/components/Footer.vue
new file mode 100644
index 0000000..eb5ab4b
--- /dev/null
+++ b/resources/js/components/Footer.vue
@@ -0,0 +1,31 @@
+<template>
+    <footer class="bg-[#f9f3eb] border-t border-gray-200 py-4 px-6 flex flex-col md:flex-row items-center justify-between">
+      <!-- Left: Logo -->
+      <div class="flex items-center gap-2">
+        <img :src="logo" alt="Logo" class="h-10">
+      </div>
+
+      <!-- Center: Copyright -->
+      <div class="text-sm text-[#0f1d4a] font-medium text-center">
+        Abbauf Tech © 2025 Semua hak dilindungi
+      </div>
+
+      <!-- Right: Social Icons -->
+      <div class="flex items-center gap-4 text-[#0f1d4a] mt-2 md:mt-0">
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-facebook"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-twitter"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-instagram"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-youtube"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-vk"></i></a>
+      </div>
+    </footer>
+  </template>
+
+  <script setup>
+  import logo from '@/../images/logo.png'
+  </script>
+
+  <style>
+  /* Pakai Font Awesome untuk ikon */
+  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+  </style>
diff --git a/resources/js/components/Header.vue b/resources/js/components/Header.vue
index d8b59ae..ace19e7 100644
--- a/resources/js/components/Header.vue
+++ b/resources/js/components/Header.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { ref } from "vue";
+import logo from "../../images/logo.png";
+
 
 const isOpen = ref(false);
 
@@ -25,45 +27,68 @@ const toggleDropdown = () => {
   <div class="h-25 shadow-lg shadow-D rounded-b-md">
     <div class="bg-D h-5 rounded-b-md shadow-lg">
       <div class="h-15"></div>
-      <div class="w-full px-50 flex justify-between items-center h-5 relative">
-        
-        <!-- Dropdown khusus "Manajemen Produk" -->
-        <div class="relative">
-          <button
-            @click="toggleDropdown"
-            class="text-center text-lg text-D hover:underline cursor-pointer"
-          >
-            Manajemen Produk
-          </button>
-          
-          <!-- isi dropdown -->
-          <div
-            v-if="isOpen"
-            class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
-          >
-            <ul>
-              <li
-                v-for="(sub, index) in subItems"
-                :key="index"
-                class="px-4 py-2 hover:bg-A cursor-pointer"
-              >
-                <router-link :to="sub.route" class="block w-full h-full">
-                  {{ sub.label }}
-                </router-link>
-              </li>
-            </ul>
-          </div>
-        </div>
+      <div class="relative">
+          <div class="w-full px-50 flex justify-between items-center h-5 relative">
+            <div class="absolute left-[50%]">
+                <img :src="logo" alt="Logo" class="h-12 w-auto" />
+            </div>
 
-        <!-- menu lain -->
-        <router-link
-          v-for="item in items"
-          :key="item.label"
-          :to="item.route"
-          class="text-center text-lg text-D hover:underline cursor-pointer"
-        >
-          {{ item.label }}
-        </router-link>
+            <!-- 🔹 LEFT MENU -->
+            <div class="flex items-center gap-10">
+              <!-- Dropdown khusus "Manajemen Produk" -->
+              <div class="relative">
+                <button
+                  @click="toggleDropdown"
+                  class="text-center text-lg text-D hover:underline cursor-pointer"
+                >
+                  Manajemen Produk
+                </button>
+
+                <!-- isi dropdown -->
+                <div
+                  v-if="isOpen"
+                  class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
+                >
+                  <ul>
+                    <li
+                      v-for="(sub, index) in subItems"
+                      :key="index"
+                      class="px-4 py-2 hover:bg-A cursor-pointer"
+                    >
+                      <router-link :to="sub.route" class="block w-full h-full">
+                        {{ sub.label }}
+                      </router-link>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <!-- Menu Kasir -->
+              <router-link
+                :to="items[0].route"
+                class="text-center text-lg text-D hover:underline cursor-pointer"
+              >
+                {{ items[0].label }}
+              </router-link>
+            </div>
+
+            <!-- 🔹 RIGHT MENU -->
+            <div class="flex items-center gap-8">
+              <router-link
+                :to="items[1].route"
+                class="text-center text-lg text-D hover:underline cursor-pointer"
+              >
+                {{ items[1].label }}
+              </router-link>
+              <router-link
+                :to="items[2].route"
+                class="text-center text-lg text-D hover:underline cursor-pointer"
+              >
+                {{ items[2].label }}
+              </router-link>
+            </div>
+
+          </div>
       </div>
     </div>
   </div>
diff --git a/resources/js/layouts/mainLayout.vue b/resources/js/layouts/mainLayout.vue
index 5b43f9b..087bbae 100644
--- a/resources/js/layouts/mainLayout.vue
+++ b/resources/js/layouts/mainLayout.vue
@@ -1,10 +1,15 @@
 <template>
-    <Header />
-    <div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
-        <slot />
+    <div  class="relative min-h-screen max-w-screen">
+        <Header />
+        <div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
+            <slot />
+        </div>
+        <Footer class="absolute bottom-0 w-full" />
+
     </div>
 </template>
 
 <script setup>
 import Header from '../components/Header.vue'
+import Footer from '../components/Footer.vue'
 </script>
\ No newline at end of file