diff --git a/src/App.tsx b/src/App.tsx
index 603f36cf..e7b05c1b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,18 @@
 // React import is not required in React 17 or later
 import { RouterProvider } from "react-router-dom";
-
 import Fallback from "./pages/Fallback";
 import { ThemeProvider } from "@mui/material/styles";
 import AppTheme from "./utils/AppTheme";
 import AppRouter from "./utils/AppRouter";
 import { CssBaseline } from "@mui/material";
+import Scrollbar from "./components/common/ScrollBar";
 
 const app = () => {
   return (
     <div>
       <ThemeProvider theme={AppTheme}>
         <CssBaseline />
+        <Scrollbar />
         <RouterProvider router={AppRouter} fallbackElement={<Fallback />} />
       </ThemeProvider>
     </div>
diff --git a/src/components/common/ScrollBar.tsx b/src/components/common/ScrollBar.tsx
new file mode 100644
index 00000000..1509464c
--- /dev/null
+++ b/src/components/common/ScrollBar.tsx
@@ -0,0 +1,35 @@
+import { GlobalStyles } from "@mui/material";
+import { color } from "../../styles/constants";
+
+// TODO: firefox browser does not support webkit, need to find a way to fix
+const Scrollbar = () => (
+  <GlobalStyles
+    styles={{
+      "*::-webkit-scrollbar": {
+        width: "8px",
+        borderRadius: "4px",
+      },
+      "*::-webkit-scrollbar-button": {
+        display: "none",
+      },
+      "*::-webkit-scrollbar-thumb": {
+        borderRadius: "4px",
+        backgroundColor: color.blue.dark,
+        minHeight: "24px",
+        border: "none",
+        cursor: "pointer",
+      },
+      "*::-webkit-scrollbar-corner": {
+        backgroundColor: color.blue.xLight,
+      },
+      "*::-webkit-scrollbar-track": {
+        backgroundColor: color.blue.xLight,
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+      },
+    }}
+  />
+);
+
+export default Scrollbar;
diff --git a/src/components/common/buttons/ActionButtonPaper.tsx b/src/components/common/buttons/ActionButtonPaper.tsx
index 2aea7557..b89cf20d 100644
--- a/src/components/common/buttons/ActionButtonPaper.tsx
+++ b/src/components/common/buttons/ActionButtonPaper.tsx
@@ -1,5 +1,5 @@
 import { Paper } from "@mui/material";
-import { margin } from "../../../styles/constants";
+import { borderRadius, margin } from "../../../styles/constants";
 import React from "react";
 
 interface StyledActionButtonPaperProps {}
@@ -9,15 +9,13 @@ const ActionButtonPaper = ({
 }: React.PropsWithChildren<StyledActionButtonPaperProps>) => {
   return (
     <Paper
-      component="form"
-      variant="outlined"
+      elevation={0}
       sx={{
-        paddingLeft: "5px",
-        marginLeft: margin.md,
         display: "flex",
         alignItems: "center",
-        maxHeight: "40px",
-        width: { md: "100px" },
+        justifyContent: "center",
+        width: "100%",
+        borderRadius: borderRadius.medium,
       }}
     >
       {children}
diff --git a/src/components/common/filters/AdvanceFilters.tsx b/src/components/common/filters/AdvanceFilters.tsx
index 40053148..35a21f28 100644
--- a/src/components/common/filters/AdvanceFilters.tsx
+++ b/src/components/common/filters/AdvanceFilters.tsx
@@ -48,13 +48,12 @@ const AdvanceFilters: FC<AdvanceFiltersProps> = ({
 }) => {
   const theme = useTheme();
   const dispatch = useDispatch<AppDispatch>();
-  const componentParam = useMemo(() => getComponentState(store.getState()), []);
+  const componentParam = getComponentState(store.getState());
 
   // State used to store the provisional filter options selected,
   // only dispatch to redux when 'apply' button is hit
   const [filter, setFilter] = useState<ParameterState>(componentParam);
 
-  // initialize filter
   useEffect(() => {
     if (componentParam) {
       setFilter(componentParam);
diff --git a/src/components/common/filters/ResultPanelIconFilter.tsx b/src/components/common/filters/ResultPanelIconFilter.tsx
index 0532ad3f..53ada522 100644
--- a/src/components/common/filters/ResultPanelIconFilter.tsx
+++ b/src/components/common/filters/ResultPanelIconFilter.tsx
@@ -1,19 +1,16 @@
-import { Grid, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import TimeRangeIcon from "../../icon/TimeRangeIcon";
 import SpatialIcon from "../../icon/SpatialIcon";
 import DimensionsIcon from "../../icon/Dimensions";
+import { padding } from "../../../styles/constants";
 
 const ResultPanelIconFilter = () => {
   return (
-    <Grid container sx={{ pl: 2 }}>
-      <Grid item xs={12}>
-        <Stack direction="column" spacing={2}>
-          <TimeRangeIcon />
-          <SpatialIcon />
-          <DimensionsIcon />
-        </Stack>
-      </Grid>
-    </Grid>
+    <Stack direction="column" spacing={2} paddingTop={padding.large}>
+      <TimeRangeIcon />
+      <SpatialIcon />
+      <DimensionsIcon />
+    </Stack>
   );
 };
 
diff --git a/src/components/common/filters/ResultPanelSimpleFilter.tsx b/src/components/common/filters/ResultPanelSimpleFilter.tsx
index 3cdacd7d..c3a2d872 100644
--- a/src/components/common/filters/ResultPanelSimpleFilter.tsx
+++ b/src/components/common/filters/ResultPanelSimpleFilter.tsx
@@ -1,11 +1,7 @@
 import {
-  FormControl,
   Grid,
-  IconButton,
   InputBase,
-  MenuItem,
   Paper,
-  Select,
   styled,
   SxProps,
   Theme,
@@ -16,12 +12,7 @@ import MapListToggleButton, {
 } from "../buttons/MapListToggleButton";
 import SortButton, { SortButtonProps } from "../buttons/SortButton";
 import { FC } from "react";
-
-const SlimSelect = styled(InputBase)(() => ({
-  "& .MuiInputBase-input": {
-    border: "none",
-  },
-}));
+import { borderRadius, fontSize } from "../../../styles/constants";
 
 interface ResultPanelSimpleFilterProps
   extends MapListToggleButtonProps,
@@ -39,27 +30,27 @@ const ResultPanelSimpleFilter: FC<ResultPanelSimpleFilterProps> = ({
   onChangeSorting,
 }) => {
   return (
-    <Grid sx={sx} padding={1} container justifyContent="center">
-      <Grid item xs={6} sx={{ pb: 1 }}>
+    <Grid sx={sx} container justifyContent="center" spacing={1}>
+      <Grid item md={6} xs={12}>
         <Paper
-          variant="outlined"
-          component="form"
+          elevation={0}
           sx={{
-            p: "2px 4px",
             display: "flex",
+            justifyContent: "center",
             alignItems: "center",
-            width: { md: "250px" },
+            height: "100%",
+            borderRadius: borderRadius.medium,
           }}
         >
-          <Typography>
+          <Typography fontSize={fontSize.info} padding={0}>
             Showing 1-{count} of {total} results
           </Typography>
         </Paper>
       </Grid>
-      <Grid item xs={3} sx={{ pb: 1 }}>
+      <Grid item md={3} xs={6}>
         <SortButton onChangeSorting={onChangeSorting} />
       </Grid>
-      <Grid item xs={3} sx={{ pb: 1 }}>
+      <Grid item md={3} xs={6}>
         <MapListToggleButton onChangeLayout={onChangeLayout} />
       </Grid>
     </Grid>
diff --git a/src/components/layout/components/Header.tsx b/src/components/layout/components/Header.tsx
index 78a0d217..049aec0b 100644
--- a/src/components/layout/components/Header.tsx
+++ b/src/components/layout/components/Header.tsx
@@ -1,32 +1,24 @@
 import { FC } from "react";
-import { Box } from "@mui/material";
 import MainMenu from "./MainMenu";
 import { padding } from "../../../styles/constants";
 import AODNSiteLogo from "./AODNSiteLogo";
+import SectionContainer from "./SectionContainer";
 
 const Header: FC = () => {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        justifyContent: "center",
+    <SectionContainer
+      sectionAreaStyle={{
         backgroundColor: "#fff",
         paddingY: padding.medium,
       }}
+      contentAreaStyle={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+      }}
     >
-      <Box
-        sx={{
-          width: "70%",
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        <AODNSiteLogo />
-        <MainMenu />
-      </Box>
-    </Box>
+      <AODNSiteLogo />
+      <MainMenu />
+    </SectionContainer>
   );
 };
 
diff --git a/src/components/layout/components/SectionContainer.tsx b/src/components/layout/components/SectionContainer.tsx
index 709f89bd..ce78f3b1 100644
--- a/src/components/layout/components/SectionContainer.tsx
+++ b/src/components/layout/components/SectionContainer.tsx
@@ -1,9 +1,10 @@
 import { Box, Stack, SxProps } from "@mui/material";
 import { ReactNode } from "react";
 import {
-  LANDING_PAGE_MAX_WIDTH,
-  LANDING_PAGE_MIN_WIDTH,
-} from "../../../pages/landing-page/constants";
+  PAGE_CONTENT_MAX_WIDTH,
+  PAGE_CONTENT_MIN_WIDTH,
+  PAGE_CONTENT_WIDTH,
+} from "../constant";
 
 interface SectionContainerProps {
   children: ReactNode;
@@ -29,9 +30,9 @@ const SectionContainer = ({
       justifyContent="center"
       alignItems="center"
       sx={{
-        minWidth: LANDING_PAGE_MIN_WIDTH,
-        width: "80%",
-        maxWidth: LANDING_PAGE_MAX_WIDTH,
+        minWidth: PAGE_CONTENT_MIN_WIDTH,
+        width: PAGE_CONTENT_WIDTH,
+        maxWidth: PAGE_CONTENT_MAX_WIDTH,
         ...contentAreaStyle,
       }}
     >
diff --git a/src/components/layout/constant.ts b/src/components/layout/constant.ts
new file mode 100644
index 00000000..336e24de
--- /dev/null
+++ b/src/components/layout/constant.ts
@@ -0,0 +1,3 @@
+export const PAGE_CONTENT_MIN_WIDTH = 1020;
+export const PAGE_CONTENT_MAX_WIDTH = 1270;
+export const PAGE_CONTENT_WIDTH = 0.8;
diff --git a/src/components/map/mapbox/component/SpiderDiagram.tsx b/src/components/map/mapbox/component/SpiderDiagram.tsx
index 130f01aa..a57d4d84 100644
--- a/src/components/map/mapbox/component/SpiderDiagram.tsx
+++ b/src/components/map/mapbox/component/SpiderDiagram.tsx
@@ -32,7 +32,7 @@ interface SpiderDiagramProps extends LayersProps {
 }
 
 const defaultSpiderDiagramConfig: SpiderDiagramConfig = {
-  spiderifyFromZoomLevel: 11,
+  spiderifyFromZoomLevel: 8,
   circleSpiralSwitchover: 9,
   circleFootSeparation: 25,
   spiralFootSeparation: 28,
@@ -166,8 +166,8 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           let angle = 0;
           return Array.from({ length: count }, (_, index) => {
             angle += spiralFootSeparation / legLength + index * 0.0005;
-            const x = legLength * Math.cos(angle);
-            const y = legLength * Math.sin(angle);
+            const x = legLength * Math.cos(angle) * 10;
+            const y = legLength * Math.sin(angle) * 10;
             legLength += (2 * Math.PI * spiralLengthFactor) / angle;
             return { x, y, angle, legLength, index };
           });
@@ -179,8 +179,8 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           return Array.from({ length: count }, (_, index) => {
             const angle = index * angleStep;
             return {
-              x: legLength * Math.cos(angle),
-              y: legLength * Math.sin(angle),
+              x: legLength * Math.cos(angle) * 15,
+              y: legLength * Math.sin(angle) * 15,
               angle,
               legLength,
               index,
diff --git a/src/components/map/mapbox/layers/ClusterLayer.tsx b/src/components/map/mapbox/layers/ClusterLayer.tsx
index 6e33db29..5ea81c99 100644
--- a/src/components/map/mapbox/layers/ClusterLayer.tsx
+++ b/src/components/map/mapbox/layers/ClusterLayer.tsx
@@ -48,7 +48,7 @@ const defaultClusterLayerConfig: ClusterLayerConfig = {
     large: 30,
     extra_large: 50,
   },
-  clusterMaxZoom: 14,
+  clusterMaxZoom: 8,
   clusterRadius: 50,
   // circle sizes define the radius(px) of the circles used to represent clusters on the map.
   clusterCircleSize: {
@@ -123,11 +123,13 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         clusterLayerConfig
       );
 
+      map?.setMaxZoom(config.clusterMaxZoom);
+
       map?.addSource(clusterSourceId, {
         type: "geojson",
         data: createCenterOfMassDataSource(undefined),
         cluster: true,
-        clusterMaxZoom: 14,
+        clusterMaxZoom: config.clusterMaxZoom,
         clusterRadius: 50,
       });
 
diff --git a/src/components/map/mapbox/layers/HeatmapLayer.tsx b/src/components/map/mapbox/layers/HeatmapLayer.tsx
index 97aa1dee..0936fb9a 100644
--- a/src/components/map/mapbox/layers/HeatmapLayer.tsx
+++ b/src/components/map/mapbox/layers/HeatmapLayer.tsx
@@ -28,6 +28,7 @@ interface HeatmapCircle {
 }
 
 interface HeatmapConfig {
+  clusterMaxZoom: number;
   heatmapSourceRadius: number;
   layer: HeatmapLayer;
   circle: HeatmapCircle;
@@ -39,6 +40,7 @@ interface HeatmapLayerProps extends LayersProps {
 }
 
 const defaultHeatmapConfig: HeatmapConfig = {
+  clusterMaxZoom: 8,
   heatmapSourceRadius: 10,
   circle: {
     strokeColor: "white",
@@ -129,6 +131,8 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
         heatmapLayerConfig
       );
 
+      map?.setMaxZoom(config.clusterMaxZoom);
+
       if (!map?.getSource(heatmapSourceId)) {
         map?.addSource(heatmapSourceId, {
           type: "geojson",
@@ -142,7 +146,7 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
           type: "geojson",
           data: dataSource,
           cluster: true,
-          clusterMaxZoom: 14,
+          clusterMaxZoom: config.clusterMaxZoom,
           clusterRadius: config.heatmapSourceRadius,
         });
       }
diff --git a/src/components/result/ResultCards.tsx b/src/components/result/ResultCards.tsx
index bba520a5..8d34ff5a 100644
--- a/src/components/result/ResultCards.tsx
+++ b/src/components/result/ResultCards.tsx
@@ -5,10 +5,7 @@ import { Box, Grid, ListItem, Stack, SxProps, Theme } from "@mui/material";
 import GridResultCard from "./GridResultCard";
 import ListResultCard from "./ListResultCard";
 import { SearchResultLayoutEnum } from "../common/buttons/MapListToggleButton";
-import {
-  OGCCollection,
-  OGCCollections,
-} from "../common/store/OGCCollectionDefinitions";
+import { OGCCollection } from "../common/store/OGCCollectionDefinitions";
 import AutoSizer, { Size } from "react-virtualized-auto-sizer";
 import DetailSubtabBtn from "../common/buttons/DetailSubtabBtn";
 
@@ -66,7 +63,7 @@ const ResultCards = ({
         sx={{ width: "100%", height: "305px", overflowY: "auto" }}
       >
         {datasetsSelected?.map((dataset, index) => (
-          <Box key={index} width="100%" height="300px">
+          <Box key={index} width="49%" height="300px">
             <GridResultCard
               content={dataset}
               onDownload={onDownload}
diff --git a/src/pages/detail-page/DetailsPage.tsx b/src/pages/detail-page/DetailsPage.tsx
index f9aa1bb3..3c0174b9 100644
--- a/src/pages/detail-page/DetailsPage.tsx
+++ b/src/pages/detail-page/DetailsPage.tsx
@@ -6,6 +6,7 @@ import SideSection from "./subpages/SideSection";
 import { DetailPageProvider } from "./context/detail-page-provider";
 import ContentSection from "./subpages/ContentSection";
 import { OGCCollection } from "../../components/common/store/OGCCollectionDefinitions";
+import SectionContainer from "../../components/layout/components/SectionContainer";
 
 export interface DetailsProps {
   collection?: OGCCollection;
@@ -15,29 +16,24 @@ const DetailsPage = () => {
   return (
     <Layout>
       <DetailPageProvider>
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
+        <SectionContainer
+          sectionAreaStyle={{
             paddingY: padding.double,
             backgroundColor: color.blue.light,
           }}
         >
-          <Box sx={{ minWidth: "1020px", width: "70%", maxWidth: "1228px" }}>
-            <Grid container spacing={2}>
-              <Grid item xs={12}>
-                <HeaderSection />
-              </Grid>
-              <Grid item xs={9}>
-                <ContentSection />
-              </Grid>
-              <Grid item xs={3}>
-                <SideSection />
-              </Grid>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <HeaderSection />
             </Grid>
-          </Box>
-        </Box>
+            <Grid item xs={9}>
+              <ContentSection />
+            </Grid>
+            <Grid item xs={3}>
+              <SideSection />
+            </Grid>
+          </Grid>
+        </SectionContainer>
       </DetailPageProvider>
     </Layout>
   );
diff --git a/src/pages/detail-page/subpages/side-cards/TimePeriodCard.tsx b/src/pages/detail-page/subpages/side-cards/TimePeriodCard.tsx
index 08e6cd13..2b581b62 100644
--- a/src/pages/detail-page/subpages/side-cards/TimePeriodCard.tsx
+++ b/src/pages/detail-page/subpages/side-cards/TimePeriodCard.tsx
@@ -70,11 +70,12 @@ const TimePeriodCard: FC = () => {
       <RoundCard
         sxProps={{ border: `${border.xs} ${theme.palette.success.main}` }}
       >
-        <DataUsageIcon
-          sx={{ fontSize: "16px", paddingRight: padding.medium }}
-          color="success"
-        />
-        <Typography padding={0} color={theme.palette.success.main}>
+        <DataUsageIcon sx={{ fontSize: "16px" }} color="success" />
+        <Typography
+          padding={0}
+          paddingLeft={padding.small}
+          color={theme.palette.success.main}
+        >
           On Going
         </Typography>
       </RoundCard>
@@ -90,11 +91,12 @@ const TimePeriodCard: FC = () => {
           backgroundColor: color.blue.extraLightSemiTransparent,
         }}
       >
-        <DoneAllIcon
-          sx={{ fontSize: "18px", paddingRight: padding.medium }}
-          color="primary"
-        />
-        <Typography padding={0} color={color.blue.dark}>
+        <DoneAllIcon sx={{ fontSize: "18px" }} color="primary" />
+        <Typography
+          padding={0}
+          paddingLeft={padding.small}
+          color={color.blue.dark}
+        >
           Completed
         </Typography>
       </RoundCard>
@@ -111,11 +113,13 @@ const TimePeriodCard: FC = () => {
             backgroundColor: color.blue.extraLightSemiTransparent,
           }}
         >
-          <Typography padding={0}>{startDate}</Typography>
+          <Typography padding={0} paddingRight={padding.small}>
+            {startDate}
+          </Typography>
           <KeyboardDoubleArrowRightIcon
             sx={{
               fontSize: "18px",
-              paddingLeft: padding.small,
+
               color: color.gray.light,
             }}
           />
@@ -132,11 +136,12 @@ const TimePeriodCard: FC = () => {
             <KeyboardDoubleArrowRightIcon
               sx={{
                 fontSize: "18px",
-                paddingRight: padding.small,
                 color: color.gray.light,
               }}
             />
-            <Typography padding={0}>{endDate}</Typography>
+            <Typography padding={0} paddingLeft={padding.small}>
+              {endDate}
+            </Typography>
           </RoundCard>
         )}
       </Stack>
diff --git a/src/pages/landing-page/constants.ts b/src/pages/landing-page/constants.ts
index 85da2b51..798b02aa 100644
--- a/src/pages/landing-page/constants.ts
+++ b/src/pages/landing-page/constants.ts
@@ -1,6 +1,3 @@
-export const LANDING_PAGE_MIN_WIDTH = 1020;
-export const LANDING_PAGE_MAX_WIDTH = 1270;
-
 export const BANNER_HEIGHT = 880;
 
 export const SMART_PANEL_CONTAINER_WIDTH = 1000;
diff --git a/src/pages/search-page/SearchPage.tsx b/src/pages/search-page/SearchPage.tsx
index d702ddaa..be42deba 100644
--- a/src/pages/search-page/SearchPage.tsx
+++ b/src/pages/search-page/SearchPage.tsx
@@ -9,7 +9,7 @@ import {
 } from "../../components/common/store/searchReducer";
 import Layout from "../../components/layout/layout";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import {
   formatToUrlParam,
   ParameterState,
@@ -40,7 +40,7 @@ import { LngLatBoundsLike, MapboxEvent as MapEvent } from "mapbox-gl";
 import ResultSection from "./subpages/ResultSection";
 import ResultPanelIconFilter from "../../components/common/filters/ResultPanelIconFilter";
 import MapSection from "./subpages/MapSection";
-import { color, margin } from "../../styles/constants";
+import { color } from "../../styles/constants";
 import ComplexTextSearch from "../../components/search/ComplexTextSearch";
 import { SearchResultLayoutEnum } from "../../components/common/buttons/MapListToggleButton";
 import { bboxPolygon } from "@turf/turf";
@@ -50,6 +50,9 @@ import {
 } from "../../components/common/store/OGCCollectionDefinitions";
 import { SortResultEnum } from "../../components/common/buttons/SortButton";
 
+const SEARCH_BAR_HEIGHT = 56;
+const RESULT_SECTION_WIDTH = 550;
+
 const SearchPage = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -250,80 +253,63 @@ const SearchPage = () => {
 
   return (
     <Layout>
-      <Grid
-        container
-        spacing={2}
-        sx={{
-          // backgroundImage: "url(/bg_search_results.png)",
-          // backgroundSize: "cover",
-          bgcolor: color.blue.light,
-          marginTop: margin.sm,
-        }}
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="center"
+        bgcolor={color.blue.light}
+        gap={2}
+        padding={2}
       >
-        <Grid item xs={12}>
-          <Grid container>
-            <Grid item xs={1} />
-            <Grid item xs={10}>
-              <ComplexTextSearch />
-            </Grid>
-            <Grid item xs={1} />
-          </Grid>
-        </Grid>
-        <Grid item xs={1}>
+        <Box paddingTop={`${SEARCH_BAR_HEIGHT}px`}>
           <ResultPanelIconFilter />
-        </Grid>
-        <Grid item xs={11}>
-          {
-            // Must group the ResultSection and MapSection together so that show hide works
-          }
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "stretch",
-              width: "100%",
-            }}
-          >
-            {visibility === SearchResultLayoutEnum.VISIBLE && (
-              <Box
-                sx={{
-                  flex: 1,
-                }}
-              >
-                <ResultSection
+        </Box>
+        <Grid container flex={1} gap={2}>
+          <Grid item xs={12} height={`${SEARCH_BAR_HEIGHT}px`}>
+            <ComplexTextSearch />
+          </Grid>
+          <Grid item xs={12}>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "stretch",
+                width: "100%",
+              }}
+              gap={2}
+            >
+              {visibility === SearchResultLayoutEnum.VISIBLE && (
+                <Box>
+                  <ResultSection
+                    sx={{
+                      height: "80vh",
+                      width: RESULT_SECTION_WIDTH,
+                    }}
+                    onVisibilityChanged={onVisibilityChanged}
+                    onClickCard={handleNavigateToDetailPage}
+                    onChangeSorting={onChangeSorting}
+                    datasetSelected={datasetsSelected}
+                  />
+                </Box>
+              )}
+              <Box flex={1}>
+                <MapSection
                   sx={{
                     height: "80vh",
                   }}
-                  onVisibilityChanged={onVisibilityChanged}
-                  onClickCard={handleNavigateToDetailPage}
-                  onChangeSorting={onChangeSorting}
-                  datasetSelected={datasetsSelected}
+                  collections={layers}
+                  bbox={bbox}
+                  showFullMap={visibility === SearchResultLayoutEnum.INVISIBLE}
+                  onMapZoomOrMove={onMapZoomOrMove}
+                  onToggleClicked={onToggleDisplay}
+                  onDatasetSelected={onDatasetSelected}
                 />
               </Box>
-            )}
-            <Box
-              sx={{
-                flex: visibility === SearchResultLayoutEnum.VISIBLE ? 2 : 1,
-                paddingLeft: 2,
-                paddingRight: 2,
-              }}
-            >
-              <MapSection
-                sx={{
-                  height: "80vh",
-                }}
-                collections={layers}
-                bbox={bbox}
-                showFullMap={visibility === SearchResultLayoutEnum.INVISIBLE}
-                onMapZoomOrMove={onMapZoomOrMove}
-                onToggleClicked={onToggleDisplay}
-                onDatasetSelected={onDatasetSelected}
-              />
             </Box>
-          </Box>
+          </Grid>
         </Grid>
-      </Grid>
+      </Box>
     </Layout>
   );
 };
diff --git a/src/pages/search-page/subpages/ResultSection.tsx b/src/pages/search-page/subpages/ResultSection.tsx
index 2c602d21..f21a7c99 100644
--- a/src/pages/search-page/subpages/ResultSection.tsx
+++ b/src/pages/search-page/subpages/ResultSection.tsx
@@ -96,10 +96,15 @@ const ResultSection: React.FC<SearchResultListProps> = ({
   return (
     contents && (
       <Box
-        sx={{ ...sx, display: "flex", flexDirection: "column" }}
+        sx={{
+          ...sx,
+          display: "flex",
+          flexDirection: "column",
+        }}
+        gap={1}
         data-testid="search-page-result-list"
       >
-        <Box sx={{ height: "50px" }}>
+        <Box>
           <ResultPanelSimpleFilter
             count={contents.result.collections.length}
             total={contents.result.total}