diff --git a/app/layout.tsx b/app/layout.tsx
index d87b658..41d2e49 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -51,7 +51,7 @@ export default function RootLayout({
     <html lang="en">
 
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#F6E5E9]`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#F6E5E9] max-sm:bg-[#FFF9F9]`}
       >
         <link rel="icon" href="/favicon.ico" sizes="any" />
         <NextTopLoader color="#D60050" height={5} />
diff --git a/components/Aboutus/Home.tsx b/components/Aboutus/Home.tsx
index e54a59a..eef56bc 100644
--- a/components/Aboutus/Home.tsx
+++ b/components/Aboutus/Home.tsx
@@ -25,7 +25,7 @@ const Home = ({ settings, aboutus }: { settings: SettingsProps, aboutus: Aboutus
     const stopLoading = () => setLoading(false);
 
     return (
-        <div className='bg-[#F2D5D5]'>
+        <div className='bg-[#F2D5D5] sm:bg-[#FFF9F9]'>
             {loading ? (
                 <div className="flex justify-center items-center h-screen">
                     <Suspense fallback={<div>Loading...</div>}>
