diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 0000000..1373a1f
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="container px-6 mx-auto">
+        <div class="flex flex-col items-center border-t border-gray-200">
+            <div class="py-6 text-center">
+                <p class="text-sm text-gray-600">© {{ (new Date().getFullYear()) }} by Baka Team</p>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/ui/Cards/Testimonial.vue b/components/ui/Cards/Testimonial.vue
index 1ec08cf..77fc2cf 100644
--- a/components/ui/Cards/Testimonial.vue
+++ b/components/ui/Cards/Testimonial.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 pt-16 pb-6" slot="component">
-            <div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
+            <div class="max-w-md px-8 py-4 mx-auto mt-16 bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <div class="flex justify-center -mt-16 md:justify-end">
                     <img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
                 </div>
@@ -24,7 +24,7 @@
             return {
                 name: 'Testimonial',
                 code: `
-        <div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
+        <div class="max-w-md px-8 py-4 mx-auto mt-16 bg-white rounded-lg shadow-lg dark:bg-gray-800">
             <div class="flex justify-center -mt-16 md:justify-end">
                 <img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
             </div>
diff --git a/components/ui/Heros/ECommerce.vue b/components/ui/Heros/ECommerce.vue
index b11bac5..e622d22 100644
--- a/components/ui/Heros/ECommerce.vue
+++ b/components/ui/Heros/ECommerce.vue
@@ -6,7 +6,7 @@
                     <div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
                         <div class="flex items-center justify-between">
                             <div>
-                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <div class="flex md:hidden">
@@ -71,12 +71,12 @@
                 <div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
                     <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                         
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
-                            <button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                            <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                 <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                                     <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
diff --git a/components/ui/Heros/WithBGImage.vue b/components/ui/Heros/WithBGImage.vue
index a8d582e..cdb76a3 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -7,7 +7,7 @@
                         <div class="md:flex md:items-center md:justify-between">
                             <div class="flex items-center justify-between">
                                 <div class="text-xl font-semibold text-gray-700">
-                                    <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                    <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                                 </div>
 
                                 <div class="flex md:hidden">
@@ -55,7 +55,7 @@
                     <div class="md:flex md:items-center md:justify-between">
                         <div class="flex items-center justify-between">
                             <div class="text-xl font-semibold text-gray-700">
-                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <!-- Mobile menu button -->
diff --git a/components/ui/Heros/WithImage.vue b/components/ui/Heros/WithImage.vue
index fa882d8..fdc9476 100644
--- a/components/ui/Heros/WithImage.vue
+++ b/components/ui/Heros/WithImage.vue
@@ -6,7 +6,7 @@
                     <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
                         <div class="flex items-center justify-between">
                             <div>
-                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
                             
                             <!-- Mobile menu button -->
@@ -113,7 +113,7 @@
                 <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
                     <div class="flex items-center justify-between">
                         <div>
-                        <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                         
                         <!-- Mobile menu button -->
diff --git a/components/ui/Heros/WithSideImage.vue b/components/ui/Heros/WithSideImage.vue
index aa74308..34a7434 100644
--- a/components/ui/Heros/WithSideImage.vue
+++ b/components/ui/Heros/WithSideImage.vue
@@ -6,7 +6,7 @@
                     <div class="items-center justify-between md:flex">
                         <div class="flex items-center justify-between">
                             <div>
-                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
                     
                             <!-- Mobile menu button -->
@@ -65,7 +65,7 @@
                 <div class="items-center justify-between md:flex">
                     <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                 
                         <!-- Mobile menu button -->
diff --git a/components/ui/Navbars/ECommerce.vue b/components/ui/Navbars/ECommerce.vue
index e15be63..3122e78 100644
--- a/components/ui/Navbars/ECommerce.vue
+++ b/components/ui/Navbars/ECommerce.vue
@@ -5,7 +5,7 @@
                 <div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
                     <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
 
                         <div class="flex md:hidden">
@@ -52,7 +52,7 @@
             <div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
                 <div class="flex items-center justify-between">
                     <div>
-                        <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                        <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                     </div>
                     
                     <!-- Mobile menu button -->
diff --git a/components/ui/Navbars/WithAvatar.vue b/components/ui/Navbars/WithAvatar.vue
index 0b65328..d9cd47f 100644
--- a/components/ui/Navbars/WithAvatar.vue
+++ b/components/ui/Navbars/WithAvatar.vue
@@ -6,7 +6,7 @@
                     <div class="md:flex md:items-center md:justify-between">
                         <div class="flex items-center justify-between">
                             <div class="text-xl font-semibold text-gray-700">
-                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <!-- Mobile menu button -->
@@ -37,7 +37,7 @@
 
                                 <button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
                                     <div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
-                                        <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="object-cover w-full h-full" alt="avatar">
+                                        <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="object-cover w-full h-full" alt="avatar">
                                     </div>
 
                                     <h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
@@ -63,7 +63,7 @@
                 <div class="md:flex md:items-center md:justify-between">
                     <div class="flex items-center justify-between">
                         <div class="text-xl font-semibold text-gray-700">
-                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
 
                         <!-- Mobile menu button -->
diff --git a/components/ui/Navbars/WithCategories.vue b/components/ui/Navbars/WithCategories.vue
index 4c85bfb..6d4c3b6 100644
--- a/components/ui/Navbars/WithCategories.vue
+++ b/components/ui/Navbars/WithCategories.vue
@@ -6,7 +6,7 @@
                     <div class="flex flex-col md:flex-row md:justify-between md:items-center">
                         <div class="flex items-center justify-between">
                             <div class="flex items-center">
-                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
 
                                 <!-- Search input on desktop screen -->
                                 <div class="hidden mx-10 md:block">
@@ -109,7 +109,7 @@
                 <div class="flex flex-col md:flex-row md:justify-between md:items-center">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
 
                             <!-- Search input on desktop screen -->
                             <div class="hidden mx-10 md:block">
diff --git a/components/ui/Navbars/WithSearch.vue b/components/ui/Navbars/WithSearch.vue
index c90f652..e327357 100644
--- a/components/ui/Navbars/WithSearch.vue
+++ b/components/ui/Navbars/WithSearch.vue
@@ -5,7 +5,7 @@
                 <div class="container px-6 py-3 mx-auto md:flex">
                     <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                         
                         <!-- Mobile menu button -->
@@ -53,7 +53,7 @@
             <div class="container px-6 py-3 mx-auto md:flex">
                 <div class="flex items-center justify-between">
                     <div>
-                        <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                        <a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                     </div>
                     
                     <!-- Mobile menu button -->
diff --git a/pages/index.vue b/pages/index.vue
index 461d138..91ae4c8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,9 @@
 <template>
     <div :class="{ 'dark' : darkMode }">
         <div class="bg-white dark:bg-gray-900 font-roboto">
-            <header-component></header-component>
-            <main-component></main-component>
+            <header-component />
+            <main-component />
+            <footer-component />
 
             <back-to-top visibleoffset="800">
                 <app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
@@ -28,10 +29,11 @@
 import AppButton from "~/components/utilities/AppButton.vue";
 import HeaderComponent from "~/components/Header";
 import MainComponent from "~/components/Main";
+import FooterComponent from "~/components/Footer";
 import BackToTop from "vue-backtotop";
 
 export default {
-    components: { AppButton, HeaderComponent, MainComponent, BackToTop },
+    components: { AppButton, HeaderComponent, MainComponent, FooterComponent, BackToTop },
 
     data() {
         return {
@@ -42,7 +44,6 @@ export default {
     watch: {
       darkMode() {
         localStorage.setItem("darkMode", this.darkMode);
-        console.log('Night Mode: ' + this.darkMode);
       }
 	},
 };