diff --git a/src/backend/app/tasks/splitter.py b/src/backend/app/tasks/splitter.py
index 96db85ce..38d0ca78 100644
--- a/src/backend/app/tasks/splitter.py
+++ b/src/backend/app/tasks/splitter.py
@@ -151,30 +151,39 @@ def splitBySquare(self, meters: int) -> FeatureCollection:
                     polygons.append(clipped_polygon)
 
         for small_polygon in small_polygons:
-            adjacent_polygons = [
-                large_polygon
-                for large_polygon in polygons
-                if small_polygon.touches(large_polygon)
-            ]
-            if adjacent_polygons:
-                # Get the adjacent polygon with the minimum area
-                nearest_small_polygon = min(adjacent_polygons, key=lambda p: p.area)
-
-                # Merge the small polygon with the nearest large polygon
-                merged_polygon = unary_union([small_polygon, nearest_small_polygon])
-
-                if merged_polygon.geom_type == "MultiPolygon":
-                    # TODO we need merge Multipolygon into single polygon later....
-                    log.warning("Found MultiPolygon, converting to simple polygon...")
+            while True:
+                adjacent_polygons = [
+                    large_polygon
+                    for large_polygon in polygons
+                    if small_polygon.touches(large_polygon)
+                ]
+                if adjacent_polygons:
+                    # Get the adjacent polygon with the minimum area
+                    nearest_polygon = min(adjacent_polygons, key=lambda p: p.area)
+
+                    # Merge the small polygon with the nearest large polygon
+                    merged_polygon = unary_union([small_polygon, nearest_polygon])
+
+                    if merged_polygon.geom_type == "MultiPolygon":
+                        # Handle MultiPolygon by adding the original small polygon back
+                        log.warning(
+                            "Found MultiPolygon, adding original small polygon..."
+                        )
+                        polygons.append(small_polygon)
+                        break
+
+                    # Remove both the small polygon and the nearest large polygon
+                    polygons.remove(nearest_polygon)
+                    small_polygon = merged_polygon
+
+                    # Check if the merged polygon is greater than the area threshold
+                    if small_polygon.area >= area_threshold:
+                        polygons.append(small_polygon)
+                        break
+                else:
+                    # If no adjacent polygon is found, add the small polygon as is
                     polygons.append(small_polygon)
-                    # Option 1: Convert to convex hull (simple polygon)
-                    # merged_polygon = merged_polygon.convex_hull
-                # Remove both the small polygon and the nearest large polygon
-                polygons.remove(nearest_small_polygon)
-                polygons.append(merged_polygon)
-            else:
-                # If no adjacent polygon is found, add the small polygon as is
-                polygons.append(small_polygon)
+                    break
 
         merged_geojson = FeatureCollection(
             [Feature(geometry=mapping(p)) for p in polygons]
diff --git a/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx b/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx
index d9dec7ce..00852b06 100644
--- a/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx
+++ b/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx
@@ -80,6 +80,12 @@ const CreateprojectLayout = () => {
   const measurementType = useTypedSelector(
     state => state.createproject.measurementType,
   );
+  const projectImage = useTypedSelector(
+    state => state.createproject.projectMapImage,
+  );
+  const capturedProjectMap = useTypedSelector(
+    state => state.createproject.capturedProjectMap,
+  );
 
   const initialState: FieldValues = {
     name: '',
@@ -202,6 +208,7 @@ const CreateprojectLayout = () => {
     }
 
     if (activeStep === 4 && !splitGeojson) return;
+
     if (activeStep !== 5) {
       dispatch(setCreateProjectState({ activeStep: activeStep + 1 }));
       return;
@@ -225,6 +232,8 @@ const CreateprojectLayout = () => {
     // make form data with value JSON stringify to combine value on single json / form data with only 2 keys (backend didn't found project_info on non-stringified data)
     const formData = new FormData();
     formData.append('project_info', JSON.stringify({ ...refactoredData }));
+    formData.append('image', projectImage.projectMapImage);
+
     if (isTerrainFollow) {
       formData.append('dem', data?.dem?.[0]?.file);
     }
@@ -265,7 +274,8 @@ const CreateprojectLayout = () => {
               className="!naxatw-bg-red !naxatw-text-white"
               rightIcon="chevron_right"
               withLoader
-              isLoading={isLoading || isCreatingProject}
+              isLoading={isLoading || isCreatingProject || !capturedProjectMap}
+              disabled={isLoading || isCreatingProject || !capturedProjectMap}
             >
               {activeStep === 5 ? 'Save' : 'Next'}
             </Button>
diff --git a/src/frontend/src/components/CreateProject/DescriptionContents/Contributions/index.tsx b/src/frontend/src/components/CreateProject/DescriptionContents/Contributions/index.tsx
index 80532c35..3dad442c 100644
--- a/src/frontend/src/components/CreateProject/DescriptionContents/Contributions/index.tsx
+++ b/src/frontend/src/components/CreateProject/DescriptionContents/Contributions/index.tsx
@@ -1,11 +1,10 @@
+import { contributionsInfo } from '@Constants/createProject';
+
 export default function Contributions() {
-  return (
-    <div className="naxatw-px-10 naxatw-py-5">
-      <p className="naxatw-text-body-btn">Conditions for Contributions</p>
-      <p className="naxatw-mt-2 naxatw-text-body-md">
-        Fill in your project basic information such as name, description,
-        hashtag, etc.
-      </p>
+  return contributionsInfo?.map(info => (
+    <div className="naxatw-px-10 naxatw-py-5" key={info.key}>
+      <p className="naxatw-text-body-btn">{info.key}</p>
+      <p className="naxatw-mt-2 naxatw-text-body-md">{info.description}</p>
     </div>
-  );
+  ));
 }
diff --git a/src/frontend/src/components/CreateProject/DescriptionContents/DefineAOI/index.tsx b/src/frontend/src/components/CreateProject/DescriptionContents/DefineAOI/index.tsx
index 5cfe0d24..1ec99fa5 100644
--- a/src/frontend/src/components/CreateProject/DescriptionContents/DefineAOI/index.tsx
+++ b/src/frontend/src/components/CreateProject/DescriptionContents/DefineAOI/index.tsx
@@ -1,11 +1,10 @@
+import { DefineAOIInfo } from '@Constants/createProject';
+
 export default function DefineAOI() {
-  return (
-    <div className="naxatw-px-10 naxatw-py-5">
-      <p className="naxatw-text-body-btn">Define Area Of Interest (AOI)</p>
-      <p className="naxatw-mt-2 naxatw-text-body-md">
-        Fill in your project basic information such as name, description,
-        hashtag, etc.
-      </p>
+  return DefineAOIInfo?.map(info => (
+    <div className="naxatw-px-2 naxatw-py-2" key={info.key}>
+      <p className="naxatw-text-body-btn">{info.key}</p>
+      <p className="naxatw-py-1 naxatw-text-body-md">{info.description}</p>
     </div>
-  );
+  ));
 }
diff --git a/src/frontend/src/components/CreateProject/DescriptionContents/GenerateTask/index.tsx b/src/frontend/src/components/CreateProject/DescriptionContents/GenerateTask/index.tsx
index 684817d6..becbab36 100644
--- a/src/frontend/src/components/CreateProject/DescriptionContents/GenerateTask/index.tsx
+++ b/src/frontend/src/components/CreateProject/DescriptionContents/GenerateTask/index.tsx
@@ -1,10 +1,10 @@
 export default function GenerateTask() {
   return (
     <div className="naxatw-px-10 naxatw-py-5">
-      <p className="naxatw-text-body-btn">Conditions for Contributions</p>
+      <p className="naxatw-text-body-btn">Generate task</p>
       <p className="naxatw-mt-2 naxatw-text-body-md">
-        Fill in your project basic information such as name, description,
-        hashtag, etc.
+        Split the task into smaller chunks based on the given dimensions to
+        ensure more efficient and precise data collection and analysis.
       </p>
     </div>
   );
diff --git a/src/frontend/src/components/CreateProject/DescriptionContents/KeyParameters/index.tsx b/src/frontend/src/components/CreateProject/DescriptionContents/KeyParameters/index.tsx
index 31ddb63c..99999db0 100644
--- a/src/frontend/src/components/CreateProject/DescriptionContents/KeyParameters/index.tsx
+++ b/src/frontend/src/components/CreateProject/DescriptionContents/KeyParameters/index.tsx
@@ -1,23 +1,26 @@
 import { useTypedSelector } from '@Store/hooks';
 import { FlexColumn, FlexRow } from '@Components/common/Layouts';
-import { keyParamsDescriptions } from '@Constants/createProject';
+import {
+  keyParametersInfo,
+  keyParamsDescriptions,
+} from '@Constants/createProject';
 
 export default function KeyParameters() {
   const keyParamOption = useTypedSelector(
     state => state.createproject.keyParamOption,
   );
+
   return (
-    <>
+    <div className="scrollbar naxatw-max-h-[65vh] naxatw-overflow-y-auto naxatw-px-2">
       {keyParamOption === 'basic' ? (
-        <div className="naxatw-animate-fade-up naxatw-p-5">
-          <p className="naxatw-text-body-btn">
-            Ground Sampling Distance (meter)
-          </p>
-          <p className="naxatw-mt-2 naxatw-text-body-md">
-            Fill in your project basic information such as name, description,
-            hashtag, etc.
-          </p>
-        </div>
+        keyParametersInfo?.map(info => (
+          <div className="naxatw-animate-fade-up naxatw-py-2" key={info.key}>
+            <p className="naxatw-text-body-btn">{info.key}</p>
+            <p className="naxatw-py-1 naxatw-text-body-md">
+              {info.description}
+            </p>
+          </div>
+        ))
       ) : (
         <FlexColumn gap={2} className="naxatw-animate-fade-up">
           {keyParamsDescriptions.map(desc => (
@@ -31,6 +34,6 @@ export default function KeyParameters() {
           ))}
         </FlexColumn>
       )}
-    </>
+    </div>
   );
 }
diff --git a/src/frontend/src/components/CreateProject/FormContents/DefineAOI/MapSection/index.tsx b/src/frontend/src/components/CreateProject/FormContents/DefineAOI/MapSection/index.tsx
index c95cb01d..d6990a64 100644
--- a/src/frontend/src/components/CreateProject/FormContents/DefineAOI/MapSection/index.tsx
+++ b/src/frontend/src/components/CreateProject/FormContents/DefineAOI/MapSection/index.tsx
@@ -13,6 +13,8 @@ import useDrawTool from '@Components/common/MapLibreComponents/useDrawTool';
 import { drawStyles } from '@Constants/map';
 import { setCreateProjectState } from '@Store/actions/createproject';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import BaseLayerSwitcherUI from '@Components/common/BaseLayerSwitcher';
+import LocateUser from '@Components/common/MapLibreComponents/LocateUser';
 
 const MapSection = ({
   onResetButtonClick,
@@ -104,6 +106,9 @@ const MapSection = ({
         position: 'relative',
       }}
     >
+      <BaseLayerSwitcherUI />
+      <LocateUser isMapLoaded={isMapLoaded} />
+
       {(drawNoFlyZoneEnable || drawProjectAreaEnable) && (
         <div className="naxatw-absolute naxatw-right-[calc(50%_-_75px)] naxatw-top-2 naxatw-z-50 naxatw-flex naxatw-h-9 naxatw-w-[150px] naxatw-rounded-lg naxatw-bg-white">
           <div className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-justify-evenly">
@@ -173,8 +178,6 @@ const MapSection = ({
           },
         }}
       />
-
-      <BaseLayerSwitcher />
     </MapContainer>
   );
 };
diff --git a/src/frontend/src/components/CreateProject/FormContents/GenerateTask/MapSection/index.tsx b/src/frontend/src/components/CreateProject/FormContents/GenerateTask/MapSection/index.tsx
index b516846a..70943a54 100644
--- a/src/frontend/src/components/CreateProject/FormContents/GenerateTask/MapSection/index.tsx
+++ b/src/frontend/src/components/CreateProject/FormContents/GenerateTask/MapSection/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useTypedSelector } from '@Store/hooks';
 import { LngLatBoundsLike, Map } from 'maplibre-gl';
 import { useMapLibreGLMap } from '@Components/common/MapLibreComponents';
@@ -9,13 +9,20 @@ import { GeojsonType } from '@Components/common/MapLibreComponents/types';
 import getBbox from '@turf/bbox';
 import { FeatureCollection } from 'geojson';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import { useTypedDispatch } from '@UserModule/store/hooks';
+import {
+  saveProjectImageFile,
+  setCreateProjectState,
+} from '@Store/actions/createproject';
 
 const MapSection = () => {
+  const dispatch = useTypedDispatch();
   const { map, isMapLoaded } = useMapLibreGLMap({
     mapOptions: {
       zoom: 5,
       center: [84.124, 28.3949],
       maxZoom: 19,
+      preserveDrawingBuffer: true,
     },
     disableRotation: true,
   });
@@ -26,6 +33,9 @@ const MapSection = () => {
   const splitGeojson = useTypedSelector(
     state => state.createproject.splitGeojson,
   );
+  const capturedProjectMap = useTypedSelector(
+    state => state.createproject.capturedProjectMap,
+  );
 
   useEffect(() => {
     if (!projectArea) return;
@@ -33,6 +43,40 @@ const MapSection = () => {
     map?.fitBounds(bbox as LngLatBoundsLike, { padding: 25 });
   }, [map, projectArea]);
 
+  // eslint-disable-next-line no-unused-vars
+  const takeScreenshot = useCallback(async () => {
+    if (!map || !isMapLoaded || !splitGeojson) return;
+    // const data = map.getCanvas().toDataURL('image/jpeg', 0.95);
+    map.getCanvas().toBlob(
+      (blob: any) => {
+        const file = new File([blob], 'project.png', { type: blob.type });
+        dispatch(
+          saveProjectImageFile({
+            projectMapImage: file,
+          }),
+        );
+        dispatch(
+          setCreateProjectState({
+            capturedProjectMap: true,
+          }),
+        );
+      },
+      'image/png',
+      0.95,
+    );
+  }, [map, dispatch, isMapLoaded, splitGeojson]);
+
+  useEffect(() => {
+    if (!map || !isMapLoaded || !splitGeojson || capturedProjectMap)
+      return () => {};
+    // wait 1sec for split geojson is loaded and visible on map and capture
+    const captureTimeout = setTimeout(() => {
+      takeScreenshot();
+    }, 1000);
+
+    return () => clearTimeout(captureTimeout);
+  }, [map, takeScreenshot, isMapLoaded, splitGeojson, capturedProjectMap]);
+
   return (
     <MapContainer
       map={map}
@@ -42,6 +86,7 @@ const MapSection = () => {
         height: '448px',
       }}
     >
+      <BaseLayerSwitcher />
       {!splitGeojson && (
         <VectorLayer
           map={map as Map}
@@ -69,12 +114,24 @@ const MapSection = () => {
           type: 'fill',
           paint: {
             'fill-color': '#328ffd',
-            'fill-outline-color': '#D33A38',
             'fill-opacity': 0.2,
           },
         }}
       />
-      <BaseLayerSwitcher />
+      <VectorLayer
+        map={map as Map}
+        isMapLoaded={isMapLoaded}
+        id="split-area-outline"
+        geojson={splitGeojson as GeojsonType}
+        visibleOnMap={!!splitGeojson}
+        layerOptions={{
+          type: 'line',
+          paint: {
+            'line-color': '#D33A38',
+            'line-width': 1,
+          },
+        }}
+      />
     </MapContainer>
   );
 };
diff --git a/src/frontend/src/components/CreateProject/FormContents/GenerateTask/index.tsx b/src/frontend/src/components/CreateProject/FormContents/GenerateTask/index.tsx
index b2bfd624..6f1a015c 100644
--- a/src/frontend/src/components/CreateProject/FormContents/GenerateTask/index.tsx
+++ b/src/frontend/src/components/CreateProject/FormContents/GenerateTask/index.tsx
@@ -67,6 +67,12 @@ export default function GenerateTask({ formProps }: { formProps: any }) {
             className="naxatw-mt-4 naxatw-bg-red"
             onClick={() => {
               if (!projectArea) return;
+              dispatch(
+                setCreateProjectState({
+                  splitGeojson: null,
+                  capturedProjectMap: false,
+                }),
+              );
               mutate(payload);
             }}
           >
diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/index.tsx
index 1245e9c4..9c5bf842 100644
--- a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/index.tsx
+++ b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/index.tsx
@@ -33,7 +33,11 @@ import PreviewImage from './PreviewImage';
 
 const ImageBoxPopOver = () => {
   const dispatch = useTypedDispatch();
-  const { projectId, taskId } = useParams();
+
+  // const { taskId, projectId } = useParams();
+  const pathname = window.location.pathname?.split('/');
+  const projectId = pathname?.[2];
+  const taskId = pathname?.[4];
 
   const uploadedFilesNumber = useRef(0);
   const [imageObject, setImageObject] = useState<any[]>([]);
diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx
index 0292923f..5af48ae3 100644
--- a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx
+++ b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx
@@ -8,6 +8,7 @@ import { useGetIndividualTaskQuery } from '@Api/tasks';
 import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 import { setSecondPageState } from '@Store/actions/droneOperatorTask';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import { toast } from 'react-toastify';
 import UploadsBox from './UploadsBox';
 import DescriptionBox from './DescriptionBox';
 
@@ -83,13 +84,30 @@ const DroneOperatorDescriptionBox = () => {
   ];
 
   const handleDownloadFlightPlan = () => {
-    const link = document.createElement('a');
-    // link.setAttribute('download', '');
-    link.download = 'flight_plan.kmz';
-    link.href = `${BASE_URL}/waypoint/task/${taskId}/?project_id=${projectId}&download=true`;
-    document.body.appendChild(link);
-    link.click();
-    link.remove();
+    fetch(
+      `${BASE_URL}/waypoint/task/${taskId}/?project_id=${projectId}&download=true`,
+    )
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`Network response was ${response.statusText}`);
+        }
+        return response.blob();
+      })
+      .then(blob => {
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        // link.setAttribute('download', '');
+        link.href = url;
+        link.download = 'flight_plan.kmz';
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        window.URL.revokeObjectURL(url);
+      })
+      .catch(error =>
+        toast.error(`There wan an error while downloading file
+        ${error}`),
+      );
   };
 
   return (
diff --git a/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx b/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx
index dd34666e..f88259fc 100644
--- a/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx
+++ b/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx
@@ -7,7 +7,6 @@ import { useGetTaskWaypointQuery } from '@Api/tasks';
 import getBbox from '@turf/bbox';
 import { coordAll } from '@turf/meta';
 import { useMapLibreGLMap } from '@Components/common/MapLibreComponents';
-import BaseLayerSwitcher from '@Components/common/MapLibreComponents/BaseLayerSwitcher';
 import VectorLayer from '@Components/common/MapLibreComponents/Layers/VectorLayer';
 import MapContainer from '@Components/common/MapLibreComponents/MapContainer';
 import { GeojsonType } from '@Components/common/MapLibreComponents/types';
@@ -15,6 +14,8 @@ import right from '@Assets/images/rightArrow.png';
 import marker from '@Assets/images/marker.png';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
 import AsyncPopup from '@Components/common/MapLibreComponents/AsyncPopup';
+import BaseLayerSwitcherUI from '@Components/common/BaseLayerSwitcher';
+import LocateUser from '@Components/common/MapLibreComponents/LocateUser';
 
 const MapSection = () => {
   const { projectId, taskId } = useParams();
@@ -99,6 +100,9 @@ const MapSection = () => {
             height: '100%',
           }}
         >
+          <BaseLayerSwitcherUI />
+          <LocateUser isMapLoaded={isMapLoaded} />
+
           {taskWayPoints && (
             <>
               {/* render line */}
@@ -182,8 +186,6 @@ const MapSection = () => {
             hideButton
             getCoordOnProperties
           />
-
-          <BaseLayerSwitcher />
         </MapContainer>
       </div>
     </>
diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
index e7c3dd2b..2d9035ca 100644
--- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx
+++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -6,12 +6,11 @@ import { useTypedSelector, useTypedDispatch } from '@Store/hooks';
 import { useMapLibreGLMap } from '@Components/common/MapLibreComponents';
 import VectorLayer from '@Components/common/MapLibreComponents/Layers/VectorLayer';
 import MapContainer from '@Components/common/MapLibreComponents/MapContainer';
-import BaseLayerSwitcher from '@Components/common/MapLibreComponents/BaseLayerSwitcher';
 import { GeojsonType } from '@Components/common/MapLibreComponents/types';
 import AsyncPopup from '@Components/common/MapLibreComponents/AsyncPopup';
 import getBbox from '@turf/bbox';
 import { FeatureCollection } from 'geojson';
-import { LngLatBoundsLike, Map } from 'maplibre-gl';
+import { GeolocateControl, LngLatBoundsLike, Map } from 'maplibre-gl';
 import { setProjectState } from '@Store/actions/project';
 import {
   useGetProjectsDetailQuery,
@@ -23,6 +22,9 @@ import { postTaskStatus } from '@Services/project';
 import { useMutation } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import baseLayersData from '@Components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers';
+import BaseLayerSwitcherUI from '@Components/common/BaseLayerSwitcher';
+import LocateUser from '@Components/common/MapLibreComponents/LocateUser';
 import Legend from './Legend';
 
 const MapSection = () => {
@@ -156,6 +158,9 @@ const MapSection = () => {
         height: '100%',
       }}
     >
+      <BaseLayerSwitcherUI isMapLoaded={isMapLoaded} />
+      <LocateUser isMapLoaded={isMapLoaded} />
+
       {projectArea && (
         <VectorLayer
           map={map as Map}
@@ -288,7 +293,6 @@ const MapSection = () => {
         }
       />
       <Legend />
-      <BaseLayerSwitcher />
     </MapContainer>
   );
 };
diff --git a/src/frontend/src/components/Projects/MapSection/index.tsx b/src/frontend/src/components/Projects/MapSection/index.tsx
index b769d2bb..b3f67da3 100644
--- a/src/frontend/src/components/Projects/MapSection/index.tsx
+++ b/src/frontend/src/components/Projects/MapSection/index.tsx
@@ -47,10 +47,12 @@ const ProjectsMapSection = () => {
       isMapLoaded={isMapLoaded}
       containerId="dashboard-map"
       style={{
-        width: '55%',
-        height: '36.375rem',
+        width: '100%',
+        height: '100%',
       }}
     >
+      <BaseLayerSwitcher />
+
       <VectorLayerWithCluster
         map={map}
         visibleOnMap={!isLoading}
@@ -74,8 +76,6 @@ const ProjectsMapSection = () => {
           },
         }}
       /> */}
-
-      <BaseLayerSwitcher />
     </MapContainer>
   );
 };
diff --git a/src/frontend/src/components/Projects/ProjectCard/index.tsx b/src/frontend/src/components/Projects/ProjectCard/index.tsx
index bbc38409..1e67f1e4 100644
--- a/src/frontend/src/components/Projects/ProjectCard/index.tsx
+++ b/src/frontend/src/components/Projects/ProjectCard/index.tsx
@@ -1,26 +1,21 @@
 import { useNavigate } from 'react-router-dom';
-// import { GeojsonType } from '@Components/common/MapLibreComponents/types';
-// import MapSection from './MapSection';
 
 interface IProjectCardProps {
-  // containerId: string;
   id: number;
   title: string;
   description: string;
-  // geojson: GeojsonType;
   slug: string;
+  imageUrl: string | null;
 }
 
 export default function ProjectCard({
-  // containerId,
   id,
   title,
   description,
-  // geojson,
   slug,
+  imageUrl,
 }: IProjectCardProps) {
   const navigate = useNavigate();
-
   const onProjectCardClick = () => {
     navigate(`/projects/${id}`);
   };
@@ -29,12 +24,28 @@ export default function ProjectCard({
     <div
       role="presentation"
       onClick={onProjectCardClick}
-      className="!naxatw-col-span-1 naxatw-max-h-[25.25rem] naxatw-cursor-pointer naxatw-rounded-md naxatw-border naxatw-border-grey-400 naxatw-p-[0.625rem] naxatw-transition-all naxatw-duration-300 naxatw-ease-in-out hover:-naxatw-translate-y-1 hover:naxatw-scale-100 hover:naxatw-shadow-xl"
+      className="!naxatw-col-span-1 naxatw-h-[16rem] naxatw-cursor-pointer naxatw-rounded-md naxatw-border naxatw-border-grey-400 naxatw-p-[0.625rem] naxatw-transition-all naxatw-duration-300 naxatw-ease-in-out hover:-naxatw-translate-y-1 hover:naxatw-scale-100 hover:naxatw-shadow-xl"
     >
-      {/* <MapSection containerId={containerId} geojson={geojson} /> */}
-      <p className="naxatw-mt-2 naxatw-text-body-sm">{slug}</p>
-      <p className="naxatw-text-body-btn naxatw-text-grey-800">{title}</p>
-      <p className="naxatw-line-clamp-4 naxatw-text-body-sm">{description}</p>
+      <p className="naxatw-flex naxatw-h-[10rem] naxatw-w-full naxatw-items-center naxatw-justify-center naxatw-bg-grey-50">
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt="project-boundary"
+            className="naxatw-h-full naxatw-w-full naxatw-object-cover"
+          />
+        ) : (
+          <i className="material-icons-outlined naxatw-text-[140px] naxatw-text-gray-500">
+            image
+          </i>
+        )}
+      </p>
+      <p className="naxatw-mt-2 naxatw-line-clamp-1 naxatw-text-body-sm">
+        {slug}
+      </p>
+      <p className="naxatw-line-clamp-1 naxatw-text-body-btn naxatw-text-grey-800">
+        {title}
+      </p>
+      <p className="naxatw-line-clamp-2 naxatw-text-body-sm">{description}</p>
     </div>
   );
 }
diff --git a/src/frontend/src/components/Projects/ProjectCardSkeleton/index.tsx b/src/frontend/src/components/Projects/ProjectCardSkeleton/index.tsx
index 2971d844..8011179a 100644
--- a/src/frontend/src/components/Projects/ProjectCardSkeleton/index.tsx
+++ b/src/frontend/src/components/Projects/ProjectCardSkeleton/index.tsx
@@ -2,7 +2,7 @@ import Skeleton from '@Components/RadixComponents/Skeleton';
 
 export default function ProjectCardSkeleton() {
   return (
-    <Skeleton className="!naxatw-col-span-1 naxatw-max-h-[19.25rem] naxatw-w-[13.5rem] naxatw-cursor-pointer naxatw-rounded-md naxatw-border naxatw-border-grey-400 naxatw-p-[0.625rem] hover:naxatw-shadow-lg">
+    <Skeleton className="!naxatw-col-span-1 naxatw-max-h-[19.25rem] naxatw-cursor-pointer naxatw-rounded-md naxatw-border naxatw-border-grey-400 naxatw-p-[0.625rem] hover:naxatw-shadow-lg">
       <Skeleton className="naxatw-h-[10rem] naxatw-bg-grey-50" />
       <Skeleton className="naxatw-mt-2 naxatw-h-[20px] naxatw-w-1/2 naxatw-bg-grey-50" />
       <Skeleton className="naxatw-mt-2 naxatw-h-[30px] naxatw-bg-grey-50" />
diff --git a/src/frontend/src/components/common/BaseLayerSwitcher/index.tsx b/src/frontend/src/components/common/BaseLayerSwitcher/index.tsx
new file mode 100644
index 00000000..7ca166a2
--- /dev/null
+++ b/src/frontend/src/components/common/BaseLayerSwitcher/index.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import useOutsideClick from '@Hooks/useOutsideClick';
+import BaseLayerSwitcher from '../MapLibreComponents/BaseLayerSwitcher';
+import baseLayersData from '../MapLibreComponents/BaseLayerSwitcher/baseLayers';
+import { MapInstanceType } from '../MapLibreComponents/types';
+
+interface IBaseLayerSwitcherUIProps {
+  map?: MapInstanceType;
+  baseLayerList?: object;
+  isMapLoaded?: Boolean;
+}
+
+const BaseLayerSwitcherUI = ({
+  map,
+  baseLayerList = baseLayersData,
+  isMapLoaded,
+}: IBaseLayerSwitcherUIProps) => {
+  const [selectedBaseLayer, setSelectedBaseLayer] = useState('osm');
+  // eslint-disable-next-line no-unused-vars
+  const [_, toggle, handleToggle]: any = useOutsideClick('single');
+
+  return (
+    <>
+      <div
+        className="naxatw-absolute naxatw-left-2 naxatw-top-3 naxatw-z-50 naxatw-flex naxatw-h-[29px] naxatw-w-[29px] naxatw-cursor-pointer naxatw-items-center naxatw-justify-center naxatw-rounded-md naxatw-border naxatw-bg-white naxatw-py-1 naxatw-shadow-xl hover:naxatw-bg-[#f5f5f5]"
+        onClick={() => {
+          handleToggle();
+        }}
+        role="presentation"
+      >
+        <i className="material-icons-outlined naxatw-text-xl naxatw-font-black">
+          layers
+        </i>
+      </div>
+      {toggle && (
+        <div className="naxatw-absolute naxatw-left-10 naxatw-top-3 naxatw-z-50 naxatw-gap-1 naxatw-rounded-md naxatw-bg-white naxatw-px-2 naxatw-py-2">
+          {Object.entries(baseLayerList)?.map(([key]) => (
+            <div className="naxatw-flex naxatw-gap-1" key={key}>
+              <input
+                id={key}
+                type="radio"
+                value={key}
+                checked={selectedBaseLayer === key}
+                className="naxatw-cursor-pointer"
+                onChange={e => {
+                  setSelectedBaseLayer(e.target.value);
+                  handleToggle();
+                }}
+              />
+              <label
+                htmlFor={key}
+                className="naxatw-cursor-pointer naxatw-text-sm naxatw-capitalize hover:naxatw-underline"
+              >
+                {key}
+              </label>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <BaseLayerSwitcher
+        activeLayer={selectedBaseLayer}
+        baseLayers={baseLayerList}
+        map={map}
+        isMapLoaded={isMapLoaded}
+      />
+    </>
+  );
+};
+
+export default BaseLayerSwitcherUI;
diff --git a/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers.tsx b/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers.tsx
index ec58c541..d0f1fc01 100644
--- a/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers.tsx
+++ b/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/baseLayers.tsx
@@ -1,102 +1,96 @@
 const baseLayersData = {
   osm: {
-    version: 8,
-    sources: {
-      osm: {
-        type: 'raster',
-        tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
-        tileSize: 256,
-        attribution:
-          'Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>, under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>',
-      },
+    source: {
+      type: 'raster',
+      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+      tileSize: 256,
+      attribution:
+        'Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>, under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>',
     },
-    layers: [
-      {
-        id: 'osm',
-        type: 'raster',
-        source: 'osm',
+    layer: {
+      id: 'osm',
+      type: 'raster',
+      source: 'osm',
+      layout: {
+        visibility: 'none',
       },
-    ],
+    },
   },
+
   'osm-light': {
-    version: 8,
-    sources: {
-      'osm-light': {
-        type: 'raster',
-        tiles: [
-          'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
-          'https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
-          'https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
-        ],
-        tileSize: 256,
-        attribution: '',
-        maxzoom: 18,
-      },
+    source: {
+      type: 'raster',
+      tiles: [
+        'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+        'https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+        'https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+      ],
+      tileSize: 256,
+      attribution:
+        'Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>, under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>',
+      maxzoom: 18,
     },
-    layers: [
-      {
-        id: 'osm-light',
-        type: 'raster',
-        source: 'osm-light',
+    layer: {
+      id: 'osm-light',
+      type: 'raster',
+      source: 'osm-light',
+      layout: {
+        visibility: 'none',
       },
-    ],
+    },
   },
   satellite: {
-    version: 8,
-    sources: {
-      satellite: {
-        type: 'raster',
-        tiles: [
-          'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-        ],
-        tileSize: 256,
-        attribution: '',
-        maxzoom: 18,
-      },
+    source: {
+      type: 'raster',
+      tiles: [
+        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+      ],
+      tileSize: 256,
+      attribution: 'ArcGIS',
+      maxzoom: 18,
     },
-    layers: [
-      {
-        id: 'satellite',
-        type: 'raster',
-        source: 'satellite',
+    layer: {
+      id: 'satellite',
+      type: 'raster',
+      source: 'satellite',
+      layout: {
+        visibility: 'none',
       },
-    ],
+    },
   },
   topo: {
-    version: 8,
-    sources: {
-      topo: {
-        type: 'raster',
-        tiles: [
-          'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
-        ],
-        maxZoom: 18,
-      },
+    source: {
+      type: 'raster',
+      tiles: [
+        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+      ],
+      maxZoom: 18,
+      attribution: 'ArcGIS',
     },
-    layers: [
-      {
-        id: 'topo',
-        type: 'raster',
-        source: 'topo',
+    layer: {
+      id: 'topo',
+      type: 'raster',
+      source: 'topo',
+      layout: {
+        visibility: 'none',
       },
-    ],
+    },
   },
   hybrid: {
-    version: 8,
-    sources: {
-      hybrid: {
-        type: 'raster',
-        tiles: ['https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}'],
-        maxZoom: 18,
-      },
+    source: {
+      type: 'raster',
+      tiles: ['https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}'],
+      maxZoom: 18,
+      attribution: 'ArcGIS',
     },
-    layers: [
-      {
-        id: 'hybrid',
-        type: 'raster',
-        source: 'hybrid',
+    layer: {
+      id: 'hybrid',
+      type: 'raster',
+      source: 'hybrid',
+      layout: {
+        visibility: 'none',
       },
-    ],
+    },
   },
 };
 
diff --git a/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/index.tsx b/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/index.tsx
index f975667f..ffcfdb52 100644
--- a/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/index.tsx
+++ b/src/frontend/src/components/common/MapLibreComponents/BaseLayerSwitcher/index.tsx
@@ -1,47 +1,35 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { IBaseLayerSwitcher } from '../types';
 import baseLayersData from './baseLayers';
 
-let layersCache = {};
-
 export default function BaseLayerSwitcher({
   map,
   baseLayers = baseLayersData,
   activeLayer = 'osm',
+  isMapLoaded,
 }: IBaseLayerSwitcher) {
-  const changeStyle = useCallback(() => {
-    if (!map?.isStyleLoaded || !map.getStyle()) return;
-    const { sources, layers } = map.getStyle();
-    if (activeLayer in sources || !(activeLayer in baseLayers)) return;
-    layersCache = sources;
-    layers.forEach(layer => {
-      // @ts-ignore
-      if (!layersCache[layer.id]) return;
-      // @ts-ignore
-      layersCache[layer.id].layer = layer;
-    });
-    // @ts-ignore
-    map.setStyle(baseLayers[activeLayer]);
-    Object.keys(layersCache).forEach(key => {
-      // @ts-ignore
-      const { type, data, layer } = layersCache[key];
-      if (!data || !layer) return;
-      map.addSource(key, { type, data });
-      map.addLayer({ id: key, ...layer });
-      map.off('style.load', changeStyle);
-    });
-  }, [map, baseLayers, activeLayer]);
+  const previouslyActiveLayer = useRef(activeLayer);
 
+  // add all base layers to map
   useEffect(() => {
-    if (!map) return () => {};
-    map.once('style.load', changeStyle);
-    return () => map.off('style.load', changeStyle);
-  }, [map, activeLayer, baseLayers, changeStyle]);
+    if (!map || !isMapLoaded) return;
+    Object.entries(baseLayers).forEach(([key, { layer, source }]) => {
+      map.addSource(key, source);
+      map.addLayer(layer);
+    });
+    if (!map.getLayer(activeLayer)) return;
+    map.setLayoutProperty(activeLayer, 'visibility', 'visible');
+    previouslyActiveLayer.current = activeLayer;
+  }, [map, baseLayers, isMapLoaded]); // eslint-disable-line
 
+  // change visibility layout property based on active layer
   useEffect(() => {
-    if (!map || !map.isStyleLoaded) return;
-    changeStyle();
-  }, [map, activeLayer, changeStyle]);
+    if (!map || !isMapLoaded) return;
+    map.setLayoutProperty(previouslyActiveLayer.current, 'visibility', 'none');
+    if (!map.getLayer(activeLayer)) return;
+    map.setLayoutProperty(activeLayer, 'visibility', 'visible');
+    previouslyActiveLayer.current = activeLayer;
+  }, [map, activeLayer, isMapLoaded]);
 
   return null;
 }
diff --git a/src/frontend/src/components/common/MapLibreComponents/LocateUser/index.tsx b/src/frontend/src/components/common/MapLibreComponents/LocateUser/index.tsx
new file mode 100644
index 00000000..f238d533
--- /dev/null
+++ b/src/frontend/src/components/common/MapLibreComponents/LocateUser/index.tsx
@@ -0,0 +1,28 @@
+import { GeolocateControl } from 'maplibre-gl';
+import { useEffect } from 'react';
+import { MapInstanceType } from '../types';
+
+interface ILocateTheUserProps {
+  map?: MapInstanceType;
+  isMapLoaded: Boolean;
+}
+
+const LocateUser = ({ map, isMapLoaded }: ILocateTheUserProps) => {
+  useEffect(() => {
+    if (!map || !isMapLoaded) return;
+    // Add geolocate control to the map.
+    map.addControl(
+      new GeolocateControl({
+        positionOptions: {
+          enableHighAccuracy: true,
+        },
+        trackUserLocation: true,
+      }),
+      'top-left',
+    );
+  }, [map, isMapLoaded]);
+
+  return null;
+};
+
+export default LocateUser;
diff --git a/src/frontend/src/components/common/MapLibreComponents/map.css b/src/frontend/src/components/common/MapLibreComponents/map.css
index cb66176e..866b9fa3 100644
--- a/src/frontend/src/components/common/MapLibreComponents/map.css
+++ b/src/frontend/src/components/common/MapLibreComponents/map.css
@@ -10,3 +10,7 @@
   padding: 0;
   border-radius: 8px;
 }
+
+.maplibregl-ctrl-top-left {
+  margin-top: 40px;
+}
diff --git a/src/frontend/src/components/common/MapLibreComponents/types/index.ts b/src/frontend/src/components/common/MapLibreComponents/types/index.ts
index e770cbd2..4155a0af 100644
--- a/src/frontend/src/components/common/MapLibreComponents/types/index.ts
+++ b/src/frontend/src/components/common/MapLibreComponents/types/index.ts
@@ -28,6 +28,7 @@ export interface IBaseLayerSwitcher {
   map?: MapInstanceType;
   baseLayers?: object;
   activeLayer?: string;
+  isMapLoaded?: Boolean;
 }
 
 export interface ILayer {
diff --git a/src/frontend/src/constants/createProject.tsx b/src/frontend/src/constants/createProject.tsx
index 9ac58d08..010facf1 100644
--- a/src/frontend/src/constants/createProject.tsx
+++ b/src/frontend/src/constants/createProject.tsx
@@ -16,15 +16,15 @@ import DTMIcon from '@Assets/images/DTM-Icon.svg';
 import DSMIcon from '@Assets/images/DSM-icon.svg';
 
 export type StepComponentMap = {
-  [key: number]: React.FC;
+  [key: number]: any;
 };
 
 export const stepDescriptionComponents: StepComponentMap = {
   1: BasicInformation,
   2: DefineAOI,
   3: KeyParameters,
-  4: Contributions,
-  5: GenerateTask,
+  4: GenerateTask,
+  5: Contributions,
 };
 
 export const stepSwticherData = [
@@ -187,3 +187,70 @@ export const measurementTypeOptions = [
     label: 'Altitude',
   },
 ];
+
+export const contributionsInfo = [
+  {
+    key: 'Instructions for Drone Operators',
+    description: 'Detailed instructions or parameters for the drone operation.',
+  },
+  {
+    key: 'Approval for task lock',
+    description:
+      'Approval required tasks should be approved from project creator to proceed the mapping.',
+  },
+];
+
+export const DefineAOIInfo = [
+  {
+    key: 'Project Area',
+    description: 'Boundary of a project',
+  },
+  {
+    key: 'No-fly-zone',
+    description: 'GEO zones that prohibit flight',
+  },
+];
+
+export const keyParametersInfo = [
+  {
+    key: 'Ground Sampling Distance (GSD)',
+    description:
+      'GSD in a digital photo of the ground from air is the distance between pixel centers measured on the ground.',
+  },
+  {
+    key: 'Altitude',
+    description:
+      'The altitude at which the drone should fly during the mission, in meters.',
+  },
+  {
+    key: 'Front Overlap',
+    description:
+      'The percentage of overlap between consecutive images taken in the forward direction.',
+  },
+
+  {
+    key: 'Side Overlap',
+    description:
+      'The percentage of overlap between images captured on adjacent flight lines',
+  },
+  {
+    key: '2D Orthophoto/Orthophotograph',
+    description:
+      '2D orthophoto is a geometrically corrected aerial image that can be used as a map with consistent scale and accurate measurements.',
+  },
+  {
+    key: 'Digital Terrain Model (DTM)',
+    description:
+      "DTM represents the bare earth surface, excluding objects and showing only the terrain's elevation",
+  },
+  {
+    key: 'A Digital Surface Model (DSM)',
+    description:
+      "DSM is a 3D representation of the Earth's surface including all features like buildings and vegetation",
+  },
+  {
+    key: 'DEM',
+    description:
+      'The Digital Elevation Model (DEM) file that will be used to generate the terrain follow flight plan. This file should be in GeoTIFF format',
+  },
+];
diff --git a/src/frontend/src/store/actions/createproject.ts b/src/frontend/src/store/actions/createproject.ts
index 78a71935..19231fbe 100644
--- a/src/frontend/src/store/actions/createproject.ts
+++ b/src/frontend/src/store/actions/createproject.ts
@@ -1,5 +1,8 @@
 /* eslint-disable import/prefer-default-export */
 import { createProjectSlice } from '@Store/slices/createproject';
 
-export const { setCreateProjectState, resetUploadedAndDrawnAreas } =
-  createProjectSlice.actions;
+export const {
+  setCreateProjectState,
+  resetUploadedAndDrawnAreas,
+  saveProjectImageFile,
+} = createProjectSlice.actions;
diff --git a/src/frontend/src/store/slices/createproject.ts b/src/frontend/src/store/slices/createproject.ts
index abf0f070..4eae0b36 100644
--- a/src/frontend/src/store/slices/createproject.ts
+++ b/src/frontend/src/store/slices/createproject.ts
@@ -20,6 +20,8 @@ export interface CreateProjectState {
   splitGeojson: Record<string, any> | null;
   isTerrainFollow: boolean;
   requireApprovalFromManagerForLocking: string;
+  capturedProjectMap: boolean;
+  projectMapImage: any;
 }
 
 const initialState: CreateProjectState = {
@@ -39,6 +41,8 @@ const initialState: CreateProjectState = {
   splitGeojson: null,
   isTerrainFollow: false,
   requireApprovalFromManagerForLocking: 'not_required',
+  capturedProjectMap: true,
+  projectMapImage: null,
 };
 
 const setCreateProjectState: CaseReducer<
@@ -49,6 +53,14 @@ const setCreateProjectState: CaseReducer<
   ...action.payload,
 });
 
+const saveProjectImageFile: CaseReducer<
+  CreateProjectState,
+  PayloadAction<Record<string, any>>
+> = (state, action) => ({
+  ...state,
+  projectMapImage: action.payload,
+});
+
 const resetUploadedAndDrawnAreas: CaseReducer<CreateProjectState> = state => ({
   ...state,
   isNoflyzonePresent: initialState.isNoflyzonePresent,
@@ -66,6 +78,7 @@ const createProjectSlice = createSlice({
   initialState,
   reducers: {
     setCreateProjectState,
+    saveProjectImageFile,
     resetUploadedAndDrawnAreas,
   },
 });
diff --git a/src/frontend/src/views/Projects/index.tsx b/src/frontend/src/views/Projects/index.tsx
index 7fa7458d..eeb8cc06 100644
--- a/src/frontend/src/views/Projects/index.tsx
+++ b/src/frontend/src/views/Projects/index.tsx
@@ -12,55 +12,50 @@ import hasErrorBoundary from '@Utils/hasErrorBoundary';
 
 const Projects = () => {
   const showMap = useTypedSelector(state => state.common.showMap);
-
   // fetch api for projectsList
   const { data: projectsList, isLoading } = useGetProjectsListQuery();
   const { data: userDetails } = useGetUserDetailsQuery();
-
-  const userDetailsx = getLocalStorageValue('userprofile');
+  const localStorageUserDetails = getLocalStorageValue('userprofile');
 
   useEffect(() => {
-    if (!userDetails || !userDetailsx) return;
+    if (!userDetails || !localStorageUserDetails) return;
     const userDetailsString = JSON.stringify(userDetails);
     localStorage.setItem('userprofile', userDetailsString as string);
-  }, [userDetails, userDetailsx]);
+  }, [userDetails, localStorageUserDetails]);
 
   return (
-    <section className="naxatw-px-16 naxatw-pt-8">
+    <section className="naxatw-px-16 naxatw-pt-2">
       <ProjectsHeader />
-      <div className="naxatw-flex naxatw-flex-col lg:naxatw-flex-row">
-        <div className={`${showMap ? 'lg:naxatw-w-[70%]' : ''} `}>
-          <div
-            className={`naxatw-grid naxatw-gap-5 naxatw-px-[1rem] ${
-              !showMap
-                ? 'naxatw-grid-cols-1 sm:naxatw-grid-cols-2 md:naxatw-grid-cols-3 lg:naxatw-grid-cols-4 xl:naxatw-grid-cols-5 2xl:naxatw-grid-cols-6'
-                : 'lg:scrollbar naxatw-grid-cols-1 sm:naxatw-grid-cols-2 md:naxatw-grid-cols-3 lg:naxatw-h-[75vh] lg:naxatw-grid-cols-2 lg:naxatw-overflow-y-scroll 2xl:naxatw-grid-cols-3'
-            }`}
-          >
-            {isLoading ? (
-              <>
-                {Array.from({ length: 6 }, (_, index) => (
-                  <ProjectCardSkeleton key={index} />
-                ))}
-              </>
-            ) : (
-              (projectsList as Record<string, any>[])?.map(
-                (singleproject: Record<string, any>) => (
-                  <ProjectCard
-                    key={singleproject.id}
-                    id={singleproject.id}
-                    // containerId={`map-libre-map-${singleproject.id}`}
-                    title={singleproject.name}
-                    description={singleproject.description}
-                    // geojson={singleproject.outline_geojson}
-                    slug={singleproject?.slug}
-                  />
-                ),
-              )
-            )}
-          </div>
+      <div className="naxatw-grid naxatw-gap-2 md:naxatw-flex md:naxatw-h-[calc(100vh-8.5rem)]">
+        <div
+          className={`scrollbar naxatw-grid naxatw-grid-rows-[16rem] naxatw-gap-3 naxatw-overflow-y-auto naxatw-py-2 ${showMap ? 'naxatw-w-full naxatw-grid-cols-1 md:naxatw-w-1/2 md:naxatw-grid-cols-2 lg:naxatw-grid-cols-3' : 'naxatw-w-full naxatw-grid-cols-1 sm:naxatw-grid-cols-2 md:naxatw-grid-cols-4 lg:naxatw-grid-cols-6'}`}
+        >
+          {isLoading ? (
+            <>
+              {Array.from({ length: 8 }, (_, index) => (
+                <ProjectCardSkeleton key={index} />
+              ))}
+            </>
+          ) : (
+            (projectsList as Record<string, any>[])?.map(
+              (project: Record<string, any>) => (
+                <ProjectCard
+                  key={project.id}
+                  id={project.id}
+                  imageUrl={project?.image_url}
+                  title={project.name}
+                  description={project.description}
+                  slug={project?.slug}
+                />
+              ),
+            )
+          )}
         </div>
-        {showMap && <ProjectsMapSection />}
+        {showMap && (
+          <div className="naxatw-h-[350px] naxatw-w-full naxatw-py-2 md:naxatw-h-full md:naxatw-w-1/2">
+            <ProjectsMapSection />
+          </div>
+        )}
       </div>
     </section>
   );