diff --git a/components/ui/Authentication/LoginWithSocailMediaLinks.vue b/components/ui/Authentication/LoginWithSocialMediaLinks.vue
similarity index 99%
rename from components/ui/Authentication/LoginWithSocailMediaLinks.vue
rename to components/ui/Authentication/LoginWithSocialMediaLinks.vue
index d27cd57..9f2d20c 100644
--- a/components/ui/Authentication/LoginWithSocailMediaLinks.vue
+++ b/components/ui/Authentication/LoginWithSocialMediaLinks.vue
@@ -70,7 +70,7 @@
     export default {
         data() {
             return {
-                name: 'Login with Socail Media Links',
+                name: 'Login with Social Media Links',
                 code: `
         <div class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800">
             <h1 class="text-3xl font-semibold text-center text-gray-700 dark:text-white">Brand</h1>
@@ -136,4 +136,4 @@
             }
         }
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/ui/Navbars/WithSocailMediaLinks.vue b/components/ui/Navbars/WithSocialMediaLinks.vue
similarity index 98%
rename from components/ui/Navbars/WithSocailMediaLinks.vue
rename to components/ui/Navbars/WithSocialMediaLinks.vue
index 177b141..756e377 100644
--- a/components/ui/Navbars/WithSocailMediaLinks.vue
+++ b/components/ui/Navbars/WithSocialMediaLinks.vue
@@ -8,7 +8,7 @@
                             <div>
                                 <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 lg:hidden">
                                 <button @click="isOpen = !isOpen" 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">
@@ -25,7 +25,7 @@
                             <a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">docs</a>
                             <a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">support</a>
                             <a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">blog</a>
-                            
+
                             <div class="relative mt-4 lg:mt-0 lg:mx-4">
                                 <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                     <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
@@ -37,7 +37,7 @@
                             </div>
                         </div>
                     </div>
-                    
+
                     <div :class="isOpen ? 'flex' : 'hidden'" class="justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
                         <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
                             <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
@@ -77,7 +77,7 @@
     export default {
         data() {
             return {
-                name: 'With Socail Media Links',
+                name: 'With Social Media Links',
                 isOpen: false,
                 code: `
         <nav class="bg-white shadow dark:bg-gray-800">
@@ -87,7 +87,7 @@
                         <div>
                             <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 lg: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">
@@ -104,7 +104,7 @@
                         <a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">docs</a>
                         <a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">support</a>
                         <a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">blog</a>
-                        
+
                         <div class="relative mt-4 lg:mt-0 lg:mx-4">
                             <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                 <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
@@ -116,7 +116,7 @@
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
                     <a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
diff --git a/models/Components.js b/models/Components.js
index 6214c47..ba25125 100644
--- a/models/Components.js
+++ b/models/Components.js
@@ -17,7 +17,7 @@ export default [
         name: "Authentication",
         components: [
             { name: "SimpleLogin" },
-            { name: "LoginWithSocailMediaLinks" },
+            { name: "LoginWithSocialMediaLinks" },
             { name: "LoginWithSideImage" },
         ],
     },
@@ -64,7 +64,7 @@ export default [
             { name: "ECommerce" },
             { name: "WithSearch" },
             { name: "WithAvatar" },
-            { name: "WithSocailMediaLinks" },
+            { name: "WithSocialMediaLinks" },
             { name: "WithCategories" },
         ],
     },
diff --git a/pages/index.vue b/pages/index.vue
index b375528..da3d09c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,9 +8,9 @@
                         <div class="text-xs font-light">Simple UI Starter</div>
 
                         <h1 class="mt-3 text-2xl font-semibold text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
-                        
+
                         <p class="mt-3 text-gray-300 md:text-lg">
-                            Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">Tailwind CSS</a> 
+                            Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">Tailwind CSS</a>
                             components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant
                             <a href="https://tailwindcss.com/docs/dark-mode" class="font-normal text-blue-400 hover:underline">Dark Mode</a>.
                         </p>
@@ -35,7 +35,7 @@
 
                     </div>
                 </div>
-                
+
                 <div class="flex items-center justify-center w-full mt-6 md:w-1/2 md:justify-end md:mt-0">
                     <div class="w-full max-w-md">
                         <img src="../assets/svg/Responsive-bro.svg" alt="moon">
@@ -116,7 +116,7 @@ import AlertsWarningFullWidth from "~/components/ui/Alerts/WarningFullWidth";
 import AlertsErrorFullWidth from "~/components/ui/Alerts/ErrorFullWidth";
 // Authentication
 import AuthenticationSimpleLogin from "~/components/ui/Authentication/SimpleLogin";
-import AuthenticationLoginWithSocailMediaLinks from "~/components/ui/Authentication/LoginWithSocailMediaLinks";
+import AuthenticationLoginWithSocialMediaLinks from "~/components/ui/Authentication/LoginWithSocialMediaLinks";
 import AuthenticationLoginWithSideImage from "~/components/ui/Authentication/LoginWithSideImage";
 // Buttons
 import ButtonsPrimary from "~/components/ui/Buttons/Primary";
@@ -147,7 +147,7 @@ import NavbarsECommerce from "~/components/ui/Navbars/ECommerce";
 import NavbarsWithAvatar from "~/components/ui/Navbars/WithAvatar";
 import NavbarsWithSearch from "~/components/ui/Navbars/WithSearch";
 import NavbarsWithCategories from "~/components/ui/Navbars/WithCategories";
-import NavbarsWithSocailMediaLinks from "~/components/ui/Navbars/WithSocailMediaLinks";
+import NavbarsWithSocialMediaLinks from "~/components/ui/Navbars/WithSocialMediaLinks";
 // Heros
 import HerosECommerce from "~/components/ui/Heros/ECommerce";
 import HerosWithNewsletterForm from "~/components/ui/Heros/WithNewsletterForm";
@@ -193,7 +193,7 @@ export default {
         AlertsWarningFullWidth,
         AlertsErrorFullWidth,
         AuthenticationSimpleLogin,
-        AuthenticationLoginWithSocailMediaLinks,
+        AuthenticationLoginWithSocialMediaLinks,
         AuthenticationLoginWithSideImage,
         ButtonsPrimary,
         ButtonsWithIcon,
@@ -218,7 +218,7 @@ export default {
         NavbarsECommerce,
         NavbarsWithAvatar,
         NavbarsWithSearch,
-        NavbarsWithSocailMediaLinks,
+        NavbarsWithSocialMediaLinks,
         NavbarsWithCategories,
         HerosECommerce,
         HerosWithNewsletterForm,
@@ -242,7 +242,7 @@ export default {
         FootersWithLinks,
         FootersWithSubscribeForm,
     },
-    
+
     data() {
         return {
             components_count: 58,