diff --git a/components/ui/Heros/ImageWithNewsletter.vue b/components/ui/Heros/ImageWithNewsletter.vue
index 0c04d6a..ca3ce08 100644
--- a/components/ui/Heros/ImageWithNewsletter.vue
+++ b/components/ui/Heros/ImageWithNewsletter.vue
@@ -42,7 +42,7 @@
                     </a>
                 </nav>
             
-                <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
+                <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
                     <div class="w-full lg:w-1/2">
                         <div class="lg:max-w-lg">
                             <h1 class="text-3xl font-bold tracking-wide text-gray-800 dark:text-white lg:text-5xl">
@@ -144,7 +144,7 @@
                 </a>
             </nav>
         
-            <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
+            <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
                 <div class="w-full lg:w-1/2">
                     <div class="lg:max-w-lg">
                         <h1 class="text-3xl font-bold tracking-wide text-gray-800 dark:text-white lg:text-5xl">
diff --git a/components/ui/Heros/WithBGImage.vue b/components/ui/Heros/WithBGImage.vue
index c653b47..847bbb6 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -29,7 +29,7 @@
                     </div>
                 </nav>
 
-                <div class="w-full bg-center bg-cover h-128" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
+                <div class="w-full bg-center bg-cover h-[32rem]" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
                     <div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
                         <div class="text-center">
                             <h1 class="text-2xl font-semibold text-white uppercase lg:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
@@ -49,17 +49,6 @@
                 name: 'With Background Image',
                 isOpen: false,
                 code: `
-        <!-- Add this to your tailwind.config.js -->
-        module.exports = {
-            theme: {
-                extend: {
-                    spacing: {
-                        128: '32rem',
-                    },
-                },
-            },
-        }
-        
         <header>
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-4 mx-auto">
@@ -90,7 +79,7 @@
                 </div>
             </nav>
 
-            <div class="w-full bg-center bg-cover h-128" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
+            <div class="w-full bg-center bg-cover h-[32rem]" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
                 <div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
                     <div class="text-center">
                         <h1 class="text-2xl font-semibold text-white uppercase lg:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
diff --git a/components/ui/Heros/WithImage.vue b/components/ui/Heros/WithImage.vue
index 282087c..b57fa8c 100644
--- a/components/ui/Heros/WithImage.vue
+++ b/components/ui/Heros/WithImage.vue
@@ -35,7 +35,7 @@
                     </div>
                 </nav>
 
-                <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
+                <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
                     <div class="w-full lg:w-1/2">
                         <div class="lg:max-w-lg">
                             <h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1>
@@ -108,17 +108,6 @@
                 name: 'With Image',
                 isOpen: false,
                 code: `
-        <!-- Add this to your tailwind.config.js -->
-        module.exports = {
-            theme: {
-                extend: {
-                    spacing: {
-                        128: '32rem',
-                    },
-                },
-            },
-        }
-
         <header class="bg-white dark:bg-gray-800">
             <nav class="border-b dark:border-gray-700">
                 <div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
@@ -153,7 +142,7 @@
                 </div>
             </nav>
 
-            <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
+            <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
                 <div class="w-full lg:w-1/2">
                     <div class="lg:max-w-lg">
                         <h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1>
diff --git a/components/ui/Heros/WithPattern.vue b/components/ui/Heros/WithPattern.vue
index fec0235..1abaa88 100644
--- a/components/ui/Heros/WithPattern.vue
+++ b/components/ui/Heros/WithPattern.vue
@@ -14,7 +14,7 @@
                         </div>
                     </nav>
 
-                    <div class="flex flex-col items-center py-6 lg:h-128 lg:flex-row">
+                    <div class="flex flex-col items-center py-6 lg:h-[32rem] lg:flex-row">
                         <div class="lg:w-1/2">
                             <h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
 
@@ -58,17 +58,6 @@
             return {
                 name: 'With Pattern',
                 code: `
-        <!-- Add this to your tailwind.config.js -->
-        module.exports = {
-            theme: {
-                extend: {
-                    spacing: {
-                        128: '32rem',
-                    },
-                },
-            },
-        }
-
         <!-- Require css -->
         <style>
         .pattern {
@@ -89,7 +78,7 @@
                     </div>
                 </nav>
 
-                <div class="flex flex-col items-center py-6 lg:h-128 lg:flex-row">
+                <div class="flex flex-col items-center py-6 lg:h-[32rem] lg:flex-row">
                     <div class="lg:w-1/2">
                         <h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
 
diff --git a/components/ui/Heros/WithSideImage.vue b/components/ui/Heros/WithSideImage.vue
index eaef7f5..625eee5 100644
--- a/components/ui/Heros/WithSideImage.vue
+++ b/components/ui/Heros/WithSideImage.vue
@@ -29,7 +29,7 @@
                 </nav>
 
                 <div class="lg:flex">
-                    <div class="flex items-center justify-center w-full px-6 py-8 lg:h-128 lg:w-1/2">
+                    <div class="flex items-center justify-center w-full px-6 py-8 lg:h-[32rem] lg:w-1/2">
                         <div class="max-w-xl">
                             <h2 class="text-2xl font-semibold text-gray-800 dark:text-white lg:text-3xl">Build Your New <span class="text-blue-600 dark:text-blue-400">Idea</span></h2>
                                 
@@ -60,17 +60,6 @@
                 name: 'With Side Image',
                 isOpen: false,
                 code: `
-        <!-- Add this to your tailwind.config.js -->
-        module.exports = {
-            theme: {
-                extend: {
-                    spacing: {
-                        128: '32rem',
-                    },
-                },
-            },
-        }
-
         <header class="bg-white dark:bg-gray-800">
             <nav class="px-6 py-4 shadow">
                 <div class="lg:items-center lg:justify-between lg:flex">
@@ -99,7 +88,7 @@
             </nav>
 
             <div class="lg:flex">
-                <div class="flex items-center justify-center w-full px-6 py-8 lg:h-128 lg:w-1/2">
+                <div class="flex items-center justify-center w-full px-6 py-8 lg:h-[32rem] lg:w-1/2">
                     <div class="max-w-xl">
                         <h2 class="text-2xl font-semibold text-gray-800 dark:text-white lg:text-3xl">Build Your New <span class="text-blue-600 dark:text-blue-400">Idea</span></h2>
                             
diff --git a/components/ui/Heros/WithSlide.vue b/components/ui/Heros/WithSlide.vue
index ecb841d..05f2b96 100644
--- a/components/ui/Heros/WithSlide.vue
+++ b/components/ui/Heros/WithSlide.vue
@@ -26,7 +26,7 @@
                     </div>
                 </nav>
 
-                <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
+                <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
                     <div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
                         <div class="flex justify-center order-2 mt-6 lg:mt-0 lg:space-y-3 lg:flex-col">
                             <button class="w-3 h-3 mx-2 bg-blue-500 rounded-full lg:mx-0 focus:outline-none"></button>
@@ -84,7 +84,7 @@
                 </div>
             </nav>
 
-            <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
+            <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
                 <div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
                     <div class="flex justify-center order-2 mt-6 lg:mt-0 lg:space-y-3 lg:flex-col">
                         <button class="w-3 h-3 mx-2 bg-blue-500 rounded-full lg:mx-0 focus:outline-none"></button>
diff --git a/nuxt.config.js b/nuxt.config.js
index d1c3575..92de9e0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -71,6 +71,10 @@ export default {
                 rel: "stylesheet",
                 href: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap",
             },
+            {
+                rel: "stylesheet",
+                href: "https://fonts.googleapis.com/css?family=Inter:300,400,500,700,900&display=swap",
+            },
         ],
     },
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 05905ac..4c571f9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,26 +12,9 @@ module.exports = {
     darkMode: "class",
     theme: {
         extend: {
-            keyframes: {
-                float: {
-                    "0%, 100%": {
-                        transform: "translatey(0px)",
-                    },
-                    "50%": {
-                        transform: "translatey(-20px)",
-                    },
-                },
-            },
-            animation: {
-                float: "float 4s ease-in-out infinite",
-            },
             fontFamily: {
                 roboto: ["Roboto", "sans-serif"],
-            },
-            spacing: {
-                104: "26rem",
-                128: "32rem",
-                164: "41rem",
+                inter: ["Inter", "sans-serif"],
             },
         },
     },