diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index b2c6b904..9f3e1908 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -17,7 +17,7 @@ const Dashboard = () => {
   const { tasksCardData } = useDashboardTasksCardData();
 
   return (
-    <div className="container-xxl flex-grow-1 container-p-y">
+    <div className="container-fluid">
       <div className="row gy-4">
         {/* Projects Card */}
         <div className="col-sm-6 col-lg-4">
diff --git a/src/components/Employee/DemoTable.jsx b/src/components/Employee/DemoTable.jsx
index 108314cf..1d645cc3 100644
--- a/src/components/Employee/DemoTable.jsx
+++ b/src/components/Employee/DemoTable.jsx
@@ -3,7 +3,7 @@ import React from "react";
 const DemoTable = () => {
   return (
     <div className="content-wrapper">
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <div className="card">
           <div className="card-datatable table-responsive">
             <table className="datatables-basic table border-top">
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index a66be189..b02b9e32 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -145,7 +145,7 @@ const Header = () => {
   }, [handler]);
   return (
     <nav
-      className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
+      className="layout-navbar container-fluid mb-3  navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
       id="layout-navbar"
     >
       <div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index 04a96734..4ffcebc1 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@@ -185,7 +185,7 @@ const AttendancePage = () => {
         </div>
       )}
 
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx
index e05b2268..22026969 100644
--- a/src/pages/Activities/DailyTask.jsx
+++ b/src/pages/Activities/DailyTask.jsx
@@ -180,7 +180,7 @@ const DailyTask = () => {
         </GlobalModel>
       )}
 
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
diff --git a/src/pages/Activities/TaskPlannng.jsx b/src/pages/Activities/TaskPlannng.jsx
index 71598315..d4fcd2a1 100644
--- a/src/pages/Activities/TaskPlannng.jsx
+++ b/src/pages/Activities/TaskPlannng.jsx
@@ -108,7 +108,7 @@ const TaskPlannng = () => {
 
   return (
     <>
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index eb348e10..975792f7 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -254,7 +254,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   }, [prefernceContacts]);
 
   return (
-    <div className="container-xxl flex-grow-1 container-p-y">
+    <div className="container-fluid">
       {IsPage && (
         <Breadcrumb
           data={[
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 0324ef63..33369905 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -305,7 +305,7 @@ const EmployeeList = () => {
         </div>
       )}
 
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index dfa88241..cc796a3c 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -123,7 +123,7 @@ const EmployeeProfile = () => {
           </div>
         </div>
       )}
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
diff --git a/src/pages/master/MasterPage.jsx b/src/pages/master/MasterPage.jsx
index 3852f7d3..8f723697 100644
--- a/src/pages/master/MasterPage.jsx
+++ b/src/pages/master/MasterPage.jsx
@@ -103,7 +103,7 @@ const MasterPage = () => {
        
       )}
 
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx
index 07d8b316..ff58e0e5 100644
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@@ -166,7 +166,7 @@ const ProjectDetails = () => {
   return (
     <>
       {}
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx
index 09ccd29f..24e87ca1 100644
--- a/src/pages/project/ProjectList.jsx
+++ b/src/pages/project/ProjectList.jsx
@@ -195,7 +195,7 @@ const ProjectList = () => {
         />
       </div>
 
-      <div className="container-xxl flex-grow-1 container-p-y">
+      <div className="container-fluid">
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },