diff --git a/app/page.tsx b/app/page.tsx
index 8435334..9a1ffed 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import Image from 'next/image';
 import styles from 'styles/index/index.module.css';
-import HomeModel from './home-modle';
+import dynamic from 'next/dynamic';
+
+const HomeModel = dynamic(() => import('./home-modle'));
 
 export const metadata = {
   title: 'RUA - Home',
@@ -12,7 +14,7 @@ export default function Page() {
     <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
       <div className="max-w-4xl flex flex-col w-full h-full  px-4 py-32 text-2xl">
         <h1 className="flex pb-4 text-5xl">
-          <span className={clsx('font-Aleo font-semibold', styles.gradient)}>
+          <span className={clsx('font-semibold font-Lobster', styles.gradient)}>
             Hi there
           </span>
           <span className="ml-3">
diff --git a/lib/fonts.ts b/lib/fonts.ts
index 60e837b..abe26fa 100644
--- a/lib/fonts.ts
+++ b/lib/fonts.ts
@@ -1,34 +1,31 @@
-import { Aleo, Barlow, JetBrains_Mono, Poppins } from 'next/font/google';
+import { Lobster, Barlow, JetBrains_Mono, Poppins } from 'next/font/google';
 
-export const aleo = Aleo({
-  weight: ['300', '400', '700'],
-  variable: '--font-aleo',
-  display: 'swap',
+export const lobster = Lobster({
+  weight: ['400'],
+  variable: '--font-lobster',
   subsets: ['latin'],
 });
 
 export const barlow = Barlow({
-  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  weight: ['400', '500', '600'],
   variable: '--font-barlow',
-  display: 'swap',
   subsets: ['latin'],
 });
 
 export const jetbrains_mono = JetBrains_Mono({
-  display: 'swap',
-  weight: ['200', '300', '400', '700'],
+  weight: ['400', '500', '600'],
   variable: '--font-jetbrains-mono',
   subsets: ['latin'],
 });
 
 export const poppins = Poppins({
-  weight: ['300', '400', '700', '100', '200', '500', '600', '800', '900'],
+  weight: ['400', '500', '600'],
   variable: '--font-poppins',
   subsets: ['latin'],
 });
 
 const fonts = {
-  aleo,
+  lobster,
   barlow,
   jetbrains_mono,
   poppins,
diff --git a/tailwind.config.js b/tailwind.config.js
index 7ef608c..0f81925 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,6 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        Aleo: ['--font-aleo'],
         Barlow: ['var(--font-barlow)'],
         Poppins: ['var(--font-poppins)'],
         Mono: [
@@ -18,6 +17,7 @@ module.exports = {
           '-apple-system',
           'monospace',
         ],
+        Lobster: ['var(--font-lobster)'],
       },
       colors: {
         bluish: {