diff --git a/web/src/layout/DashboardLayout.tsx b/web/src/layout/DashboardLayout.tsx
index 407af96..f8e56aa 100644
--- a/web/src/layout/DashboardLayout.tsx
+++ b/web/src/layout/DashboardLayout.tsx
@@ -19,16 +19,17 @@ const DashboardLayout: FC = () => {
             </div>
           </div>
 
-          <CardContent className="w-full space-y-4 flex-1" spacing={false}>
+          <CardContent
+            className="w-full space-y-4 flex-1 bg-black/5 dark:bg-white/5"
+            spacing={false}
+          >
             <div className="flex flex-row">
               <Sidebar />
-              <div className="sm:p-4 max-w-full flex-1">
+              <div className="max-w-full flex-1">
                 <div className="flex flex-col w-full items-center gap-2">
                   <TopBar />
                 </div>
-                <div className="p-4">
-                  <Outlet />
-                </div>
+                <Outlet />
               </div>
             </div>
           </CardContent>
diff --git a/web/src/pages/PersonalInfo/index.tsx b/web/src/pages/PersonalInfo/index.tsx
index c33b191..40d2dca 100644
--- a/web/src/pages/PersonalInfo/index.tsx
+++ b/web/src/pages/PersonalInfo/index.tsx
@@ -7,7 +7,7 @@ const PersonalInfoPage: FC = () => {
   const profile = useAuth((state) => state.profile);
 
   return (
-    <>
+    <div className="p-4 sm:p-8">
       <h1 className="dark:text-gray-200 text-gray-800 text-2xl">
         Your profile info in Home services
       </h1>
@@ -61,7 +61,7 @@ const PersonalInfoPage: FC = () => {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };