diff --git a/apps/blogai/app/[locale]/page.tsx b/apps/blogai/app/[locale]/page.tsx
index 031c184..a56381f 100644
--- a/apps/blogai/app/[locale]/page.tsx
+++ b/apps/blogai/app/[locale]/page.tsx
@@ -127,7 +127,7 @@ export default async function ChatIndexPage({ params: { locale } }: { params: {
     <>
       {/* <Web3Provider> */}
       <Header />
-      
+
       <div className='mb-40 md:mb-[4rem] '>
         {/* <Chat
           initialMessages={initialMessages}
@@ -135,7 +135,7 @@ export default async function ChatIndexPage({ params: { locale } }: { params: {
           showLanding
           avatarUrl={avatarUrl}
         /> */}
-        <div className='pt-[3rem] lg:pt-[5rem] pb-[2rem] lg:pb-[3rem]  w-11/12 lg:w-2/3 xl:w-4/5  mx-auto'>
+        <div className='pt-[3rem] lg:pt-[5rem] pb-[2rem] lg:pb-[3rem]  w-11/12 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-3/5 2xl:w-1/2  mx-auto'>
           <FadeIn className=''>
             {/* <LogoAI
               className='flex text-center m-auto'
diff --git a/apps/blogai/components/header.tsx b/apps/blogai/components/header.tsx
index aec017b..5a0b212 100644
--- a/apps/blogai/components/header.tsx
+++ b/apps/blogai/components/header.tsx
@@ -60,7 +60,7 @@ export function Header() {
   }
 
   return (
-    <header className="sticky top-0 z-50 flex  w-full shrink-0 items-center justify-between  bg-background px-4 py-[1.5rem] w-11/12 lg:w-2/3 xl:w-4/5  mx-auto">
+    <header className="sticky top-0 z-50 flex shrink-0 items-center justify-between  bg-background px-4 py-[1.5rem] w-11/12 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-3/5 2xl:w-1/2  mx-auto">
       <LogoAI
         className='flex text-center m-auto'
       />