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..f7c194b6 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('mx-auto', className)}
             {...rest}
         >
             {children}
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,