diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css
index d95f46c2..718f0934 100644
--- a/public/assets/vendor/css/core.css
+++ b/public/assets/vendor/css/core.css
@@ -836,7 +836,7 @@ progress {
 }
 
 .row {
-  --bs-gutter-x: 1.625rem;
+  --bs-gutter-x: 3.625rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx
index f34586aa..732255b8 100644
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@@ -81,9 +81,22 @@ const ProjectDetails = () => {
     switch (activePill) {
       case "profile": {
         return (
-          <div className="row">
-            <div className="col-xl-4 col-lg-5 col-md-5 mt-5">
-              <AboutProject ></AboutProject>
+          <>
+            <div className="row ">
+              <div className="col-lg-4 col-md-5 mt-5">
+                {/* About User */}
+                <AboutProject data={projectDetails}></AboutProject>
+                <ProjectOverview project={projectId} />
+                {/* About User */}
+              </div>
+              <div className="col-lg-8 col-md-5  mt-5">
+                {/* Profile Overview */}
+                <ProjectProgressChart
+                  ShowAllProject="false"
+                  DefaultRange="1M"
+                />
+                {/* Profile Overview */}
+              </div>
             </div>
             <div className="col-xl-4 col-lg-5 col-md-5  mt-5">
               <ProjectOverview project={projectId} />
@@ -123,8 +136,8 @@ const ProjectDetails = () => {
       }
       case "directory": {
         return (
-          <div className="row">
-            <Directory IsPage={false} prefernceContacts={projects_Details.id} />
+          <div className="row mt-2">
+            <Directory IsPage={false} prefernceContacts={projectDetails.id} />
           </div>
         );
       }
@@ -164,7 +177,7 @@ const ProjectDetails = () => {
           ]}
         ></Breadcrumb>
 
-        <div className="row">
+        <div className="row ">
           {projectLoading && <p>Loading....</p>}
           {/* {!projectLoading && project && (
             <ProjectBanner project_data={project}></ProjectBanner>