diff --git a/components.d.ts b/components.d.ts
index cad382b..0530920 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -16,5 +16,6 @@ declare module '@vue/runtime-core' {
     Product: typeof import('./src/components/product.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SellerHeader: typeof import('./src/components/SellerHeader.vue')['default']
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100755
index 0000000..292b9dd
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/src/App.vue b/src/App.vue
index 4ceadc5..a14d0c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,5 @@
-<script setup>
-
-</script>
-
 <template>
   <div>
-    <Header />
-    <main>
-      <router-view />
-    </main>
+    <router-view />
   </div>
-  <Footer />
 </template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index cfd7042..abdabc7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,12 +1,6 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
 <template>
-
-
-
-
   <div class="container-fluid">
 
-    
   <div class=" bg-white border-b-2 border-gray-100 ">
     <div class="mx-auto max-w-7xl px-4 sm:px-6">
       <div class="flex items-center justify-between py-4 md:justify-start md:space-x-5">
@@ -18,32 +12,15 @@
         </div>
           <div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
             <div class="m-6">
-
               <div  :class="{hidden: isOpen}" class="mobileMenu rounded-md flex flex-col bg-green-700 ">
                   <router-link @click="mobileMenu" v-for="item in mainMenu" :key="item.title" :to="item.link"  class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white"  >  {{item.title}}  </router-link>
-                  <!-- <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/administrators" > Administrators </router-link> 
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/resources" > Resources </router-link>
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/occassion" > Occassion </router-link>
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/themes" > Themes </router-link> 
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/blog" > Blog </router-link> -->
               </div>
               <div  @click="mobileMenu" class="mainMenu-active text-center p-2 rounded-md font-medium text-green-100 bg-green-800 hover:bg-green-900 hover:text-white"  > Menu </div> 
             </div>
           </div>
 
-
-        
-
         <div class="hidden lg:block  space-x-5 uppercase">
           <router-link v-for="item in mainMenu" :key="item.title" :to="item.link" class="text-sm font-bold hover:text-black-900" aria-current="page"> {{item.title}} </router-link>
-          <!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">New </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Cases </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Accessories </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Sale </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Bags & wallets </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Home Office </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Collections </router-link> -->
-          <!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Corporate Gifting </router-link> -->
         </div>
         <div class=" items-center justify-end md:flex md:flex-1 lg:w-0">
           
diff --git a/src/components/SellerHeader.vue b/src/components/SellerHeader.vue
new file mode 100644
index 0000000..900f529
--- /dev/null
+++ b/src/components/SellerHeader.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="container-fluid">
+  
+      
+    <div class=" bg-white border-b-2 border-gray-100 ">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6">
+        <div class="flex items-center justify-between py-4 md:justify-start md:space-x-5">
+          <div class="flex justify-start  lg:flex-1">
+  
+            <router-link to="/" class="flex items-center">
+              <img src="/img/logo.png" class=" h-10">
+            </router-link>
+          </div>
+            <div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
+              <div class="m-6">
+  
+                <div  :class="{hidden: isOpen}" class="mobileMenu rounded-md flex flex-col bg-green-700 ">
+                    <router-link @click="mobileMenu" v-for="item in mainMenu" :key="item.title" :to="item.link"  class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white"  >  {{item.title}}  </router-link>
+                </div>
+                <div  @click="mobileMenu" class="mainMenu-active text-center p-2 rounded-md font-medium text-green-100 bg-green-800 hover:bg-green-900 hover:text-white"  > Menu </div> 
+              </div>
+            </div>
+  
+  
+          
+  
+          <div class="hidden lg:block  space-x-5 uppercase">
+            <router-link v-for="item in mainMenu" :key="item.title" :to="item.link" class="text-sm font-bold hover:text-black-900" aria-current="page"> {{item.title}} </router-link>
+          </div>
+          <div class=" items-center justify-end md:flex md:flex-1 lg:w-0">
+            
+            <a href="#" class="whitespace-nowrap text-sm font-medium text-gray-500  inline-flex hover:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16"> <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </svg>
+            </a>
+            <a href="#"
+              class="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md text-gray-500 hover:text-gray-900 px-4 py-2 text-base font-medium">
+              <svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 18V17C7 14.2386 9.23858 12 12 12V12C14.7614 12 17 14.2386 17 17V18" stroke="currentColor" stroke-linecap="round"/> <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/> </svg>
+            
+            </a>
+          </div>
+        </div>
+      </div>
+  
+  
+    </div>
+  </div>
+  
+  </template>
+  
+  
+  <style scoped>
+   .router-link-exact-active.mainMenu-active{
+      background-color: #f19138bd;
+      color:#ffffff
+   }
+  </style>
+  
+  <script>
+  export default {
+  
+  data() {
+      return {
+        isOpen: false,
+        mainMenu: [
+            { title: 'Manage Category', icon: 'dashboard', link: "/seller/category"  },
+            { title: 'Products', icon: 'dashboard', link: "/seller/products"  },
+            { title: 'Orders', icon: 'dashboard', link: "/seller/orders"  },
+            { title: 'Transactions', icon: 'dashboard', link: "/seller/transactions"  },
+            { title: 'Manage Tickets', icon: 'dashboard', link: "/seller/tickets"  }  
+          ],
+  
+      }
+    },
+    methods: {
+      mobileMenu: function() {
+        this.isOpen = !this.isOpen;
+        // some code to filter users
+      }
+    }
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 23f9836..aabbf2d 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,8 @@
 <template>
 <div>
-  
+  <Header />
+  <main>
+
     <!-- <h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals for  {{this.$route.params.id}}</h1>
     <hr class=""> -->
   
@@ -89,6 +91,9 @@
       </section>
       
 
+  </main>
+    
+<Footer />
 </div>
 </template>
 
diff --git a/src/pages/seller/index.vue b/src/pages/seller/index.vue
index c017cc6..a09ab88 100644
--- a/src/pages/seller/index.vue
+++ b/src/pages/seller/index.vue
@@ -1,10 +1,213 @@
 <template>
 <div>
+    <SellerHeader />
+    <div class="container-fluid  bg-gray-100 mt-4">
+        <div class="p-3 text-2xl font-semibold text-center text-gray-600"> Seller Dashboard </div>
+    </div>
     <div class="container">
 
     </div>
-    <div >
-        
-    </div>
+
+    <section class="antialiased bg-gray-100 text-gray-600">
+        <div class="flex flex-col justify-center h-full">
+            <!-- Table -->
+            <div class="w-full max-w-2xl mx-auto bg-white shadow-lg rounded-sm border border-gray-200">
+                <header class="px-5 py-4 border-b border-gray-100">
+                    <h2 class="font-semibold text-gray-800">Customers</h2>
+                </header>
+                <div class="p-3">
+                    <div class="overflow-x-auto">
+                        <table class="table-auto w-full">
+                            <thead class="text-xs font-semibold uppercase text-gray-400 bg-gray-50">
+                                <tr>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-left">Name</div>
+                                    </th>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-left">Email</div>
+                                    </th>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-left">Spent</div>
+                                    </th>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-center">Country</div>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="text-sm divide-y divide-gray-100">
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-05.jpg" width="40" height="40" alt="Alex Shatov"></div>
+                                            <div class="font-medium text-gray-800">Alex Shatov</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">alexshatov@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;2890</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-06.jpg" width="40" height="40" alt="Philip Harbach"></div>
+                                            <div class="font-medium text-gray-800">Philip Harbach</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">philip.h@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500"> &#8377;2767</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-07.jpg" width="40" height="40" alt="Mirko Fisuk"></div>
+                                            <div class="font-medium text-gray-800">Mirko Fisuk</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">mirkofisuk@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;2996</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-08.jpg" width="40" height="40" alt="Olga Semklo"></div>
+                                            <div class="font-medium text-gray-800">Olga Semklo</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">olga.s@cool.design</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;1220</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-09.jpg" width="40" height="40" alt="Burak Long"></div>
+                                            <div class="font-medium text-gray-800">Burak Long</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">longburak@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;1890</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-gray-100">
+        <div class="container px-6 py-10 mx-auto">
+            <div class="p-3 text-2xl font-semibold text-center text-gray-600"> Commerce details</div>
+
+            <div class="grid grid-cols-1 gap-8 mt-8 md:mt-16 md:grid-cols-2">
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1509315703195-529879416a7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            All Order Details
+                        </a>
+                        
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                           Pending Orders
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1544654803-b69140b285a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            Delivered Orders
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1530099486328-e021101a494a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1547&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            Cancelled Orders
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1484&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            All Products on sale
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1624996379697-f01d168b1a52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            Earnings
+                        </a>
+                        
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <Footer />
 </div>
 </template>
\ No newline at end of file