diff --git a/ui/src/assets/styles/components/_menu-item.css b/ui/src/assets/styles/components/_menu-item.css
index c305f4ca..da69ac0f 100644
--- a/ui/src/assets/styles/components/_menu-item.css
+++ b/ui/src/assets/styles/components/_menu-item.css
@@ -1,5 +1,5 @@
 .menu-item {
-  @apply cursor-pointer font-medium rounded-md flex items-center w-full whitespace-nowrap gap-x-1 px-1;
+  @apply cursor-pointer font-medium rounded-md flex items-center w-full whitespace-nowrap gap-x-1 px-0.5;
 
   &.menu-item-light {
     @apply text-gray-600;
diff --git a/ui/src/components/layouts/ClassicLayout.tsx b/ui/src/components/layouts/ClassicLayout.tsx
index 20d04c6d..63a19c0d 100644
--- a/ui/src/components/layouts/ClassicLayout.tsx
+++ b/ui/src/components/layouts/ClassicLayout.tsx
@@ -43,6 +43,7 @@ const ClassicLayout = () => {
         {sideNavCollapse ? <StackedSideNav /> : <SideNav />}
         <div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
           <Header
+            container={false}
             className="shadow dark:shadow-2xl"
             headerStart={<HeaderActionsStart />}
             headerEnd={<HeaderActionsEnd />}
diff --git a/ui/src/components/layouts/DeckedLayout.tsx b/ui/src/components/layouts/DeckedLayout.tsx
index e672171f..dec46178 100644
--- a/ui/src/components/layouts/DeckedLayout.tsx
+++ b/ui/src/components/layouts/DeckedLayout.tsx
@@ -38,12 +38,12 @@ const DeckedLayout = () => {
       <div className="flex flex-auto min-w-0">
         <div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
           <Header
-            container
+            container={false}
             className="shadow dark:shadow-2xl"
             headerStart={<HeaderActionsStart />}
             headerEnd={<HeaderActionsEnd />}
           />
-          <SecondaryHeader contained />
+          <SecondaryHeader contained={false} />
           <View pageContainerType="contained" />
         </div>
       </div>
diff --git a/ui/src/components/layouts/ModernLayout.tsx b/ui/src/components/layouts/ModernLayout.tsx
index 47d4479b..244c7746 100644
--- a/ui/src/components/layouts/ModernLayout.tsx
+++ b/ui/src/components/layouts/ModernLayout.tsx
@@ -43,6 +43,7 @@ const ModernLayout = () => {
         {sideNavCollapse ? <StackedSideNav /> : <SideNav />}
         <div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700">
           <Header
+            container={false}
             className="border-b border-gray-200 dark:border-gray-700"
             headerEnd={<HeaderActionsEnd />}
             headerStart={<HeaderActionsStart />}
diff --git a/ui/src/components/layouts/SimpleLayout.tsx b/ui/src/components/layouts/SimpleLayout.tsx
index a17db573..83e87b42 100644
--- a/ui/src/components/layouts/SimpleLayout.tsx
+++ b/ui/src/components/layouts/SimpleLayout.tsx
@@ -38,7 +38,7 @@ const SimpleLayout = () => {
       <div className="flex flex-auto min-w-0">
         <div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
           <Header
-            container
+            container={false}
             className="shadow dark:shadow-2xl"
             headerStart={<HeaderActionsStart />}
             headerMiddle={<HorizontalNav />}
diff --git a/ui/src/components/layouts/StackedSideLayout.tsx b/ui/src/components/layouts/StackedSideLayout.tsx
index 2d76e6ad..971bc179 100644
--- a/ui/src/components/layouts/StackedSideLayout.tsx
+++ b/ui/src/components/layouts/StackedSideLayout.tsx
@@ -37,6 +37,7 @@ const StackedSideLayout = () => {
         <StackedSideNav />
         <div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
           <Header
+            container={false}
             className="shadow dark:shadow-2xl"
             headerStart={<HeaderActionsStart />}
             headerEnd={<HeaderActionsEnd />}
diff --git a/ui/src/components/shared/Container.tsx b/ui/src/components/shared/Container.tsx
index c90e76d5..4e4f3a68 100644
--- a/ui/src/components/shared/Container.tsx
+++ b/ui/src/components/shared/Container.tsx
@@ -12,7 +12,7 @@ const Container = forwardRef((props: ContainerProps, ref) => {
     return (
         <Component
             ref={ref}
-            className={classNames('container mx-auto', className)}
+            className={classNames('w-full mx-auto', className)}
             {...rest}
         >
             {children}
diff --git a/ui/src/components/template/StackedSideNav/StackedSideNavMini.tsx b/ui/src/components/template/StackedSideNav/StackedSideNavMini.tsx
index b9bd5ead..27f94c27 100644
--- a/ui/src/components/template/StackedSideNav/StackedSideNavMini.tsx
+++ b/ui/src/components/template/StackedSideNav/StackedSideNavMini.tsx
@@ -98,7 +98,7 @@ const StackedSideNavMini = (props: StackedSideNavMiniProps) => {
       <Logo mode={logoMode()} type="streamline" className={SIDE_NAV_CONTENT_GUTTER} />
       <ScrollBar autoHide direction={direction}>
         <Menu
-          className="px-4 pb-4 py-1"
+          className="px-6 pb-4 py-1"
           variant={navMode}
           defaultActiveKeys={activeKeys || [includedRouteTree.key]}
         >
diff --git a/ui/src/components/template/UserDropdown.tsx b/ui/src/components/template/UserDropdown.tsx
index e9258af7..9d17ca32 100644
--- a/ui/src/components/template/UserDropdown.tsx
+++ b/ui/src/components/template/UserDropdown.tsx
@@ -101,7 +101,7 @@ const _UserDropdown = ({ className }: CommonProps) => {
         <span className="text-xl opacity-50">
           <FcNext />
         </span>
-        <span className="ml-1.5">{translate('::Abp.Identity.SignOut')} </span>
+        <span className="ml-1">{translate('::Abp.Identity.SignOut')} </span>
       </Dropdown.Item>
     </Dropdown>
   )
diff --git a/ui/src/constants/theme.constant.ts b/ui/src/constants/theme.constant.ts
index c5f533c2..3950af8a 100644
--- a/ui/src/constants/theme.constant.ts
+++ b/ui/src/constants/theme.constant.ts
@@ -20,8 +20,8 @@ export const SPLITTED_SIDE_NAV_SECONDARY_WIDTH = 250
 export const SIDE_NAV_CONTENT_GUTTER = 'px-4'
 export const LOGO_X_GUTTER = 'px-4'
 export const HEADER_HEIGHT_CLASS = 'h-16'
-export const PAGE_CONTAINER_GUTTER_X = 'px-4 sm:px-6 md:px-8'
-export const PAGE_CONTAINER_GUTTER_Y = 'py-4 sm:py-6 md:px-8'
+export const PAGE_CONTAINER_GUTTER_X = 'px-4 sm:px-2 md:px-4'
+export const PAGE_CONTAINER_GUTTER_Y = 'py-4 sm:py-2 md:px-4'
 
 export const THEME_ENUM = {
   DIR_RTL: DIR_RTL,