diff --git a/src/components/common/logos/Logos.tsx b/src/components/common/logos/Logos.tsx
index 8e738e1b..e049b34f 100644
--- a/src/components/common/logos/Logos.tsx
+++ b/src/components/common/logos/Logos.tsx
@@ -1,4 +1,4 @@
-import { Divider, Grid, Box, Typography } from "@mui/material";
+import { Divider, Grid, Box, Typography, Stack } from "@mui/material";
 
 import AIOMS from "@/assets/logos/aioms-logo2.png";
 import AustralianGovernment from "@/assets/logos/aioms-logo1.png";
@@ -18,12 +18,23 @@ import UNSW from "@/assets/logos/unsw-logo.png";
 import UTAS from "@/assets/logos/utas-logo.png";
 import UTS from "@/assets/logos/uts-logo.png";
 import UWA from "@/assets/logos/uniwa-logo.png";
+import {
+  color,
+  fontColor,
+  fontWeight,
+  padding,
+} from "../../../styles/constants";
 
 type LogoProps = { src: string; alt: string; height: string };
 
 const Logo = ({ src, alt, height }: LogoProps) => {
   return (
-    <Box component="img" src={src} alt={alt} sx={{ height: height, p: 2 }} />
+    <Box
+      component="img"
+      src={src}
+      alt={alt}
+      sx={{ height: height, padding: padding.small }}
+    />
   );
 };
 
@@ -47,97 +58,144 @@ const LogoList = () => {
   ];
 
   return (
-    <Grid container spacing={2} pb={6}>
+    <Grid container spacing={6}>
       <Grid item xs={12}>
         <Grid
           item
-          xs={6}
+          xs={12}
           sx={{
             display: "flex",
-            flexDirection: "row",
-            alignContent: "center",
+            justifyContent: "center",
             alignItems: "center",
-            marginLeft: "auto",
-            marginRight: "auto",
           }}
         >
-          <Logo src={NCRIS} alt={"logo-NCRIS"} height="200px" />
-          <Typography textAlign="left" pl={2}>
-            Australia&apos;s Integrated Marine Observing System (IMOS) is
-            enabled by the National Collaborative Research Infrastructre
-            Strategy (NCRIS) It is operated by a consortium of institutions as
-            an unincorperated joint venture with the Unviersity of Tasmania as
-            Lead Agent.
-          </Typography>
+          <Stack
+            direction="row"
+            spacing={2}
+            justifyContent="center"
+            alignItems="center"
+            sx={{
+              width: "60%",
+            }}
+          >
+            <Logo src={NCRIS} alt={"logo-NCRIS"} height="150px" />
+            <Typography textAlign="left" padding={0}>
+              Australia&apos;s Integrated Marine Observing System (IMOS) is
+              enabled by the National Collaborative Research Infrastructre
+              Strategy (NCRIS) It is operated by a consortium of institutions as
+              an unincorperated joint venture with the Unviersity of Tasmania as
+              Lead Agent.
+            </Typography>
+          </Stack>
         </Grid>
       </Grid>
-      <Grid item xs={12}>
-        <Typography fontWeight={500}>PRINCIPLE PARTICIPANTS</Typography>
-      </Grid>
-      <Grid
-        item
-        xs={10}
-        sx={{
-          display: "flex",
-          flexDirection: "row",
-          alignContent: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
-        }}
-      >
-        <Box>
-          <Logo src={UTAS} alt={"logo-University-of-Tasmania"} height="60px" />
-          <Typography fontWeight={500}>LEAD AGENT</Typography>
-        </Box>
-        {principals.map((logo, index) => (
-          <Grid item xs={12} key={index}>
-            <Logo src={logo} alt={`logo-${index}`} height="60px" />
-          </Grid>
-        ))}
-      </Grid>
       <Grid
         item
+        xs={12}
         sx={{
           display: "flex",
-          flexDirection: "row",
-          alignContent: "center",
+          flexDirection: "column",
+          justifyContent: "center",
           alignItems: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
         }}
       >
-        <Logo src={SIMS} alt="logo-sims" height="60px" />
-        <Divider orientation="vertical" flexItem />
-        {sims.map((logo, index) => (
-          <Grid item xs={12} key={index}>
-            <Logo src={logo} alt={`logo-${index}`} height="60px" />
-          </Grid>
-        ))}
-      </Grid>
-      <Grid item xs={12}>
-        <Typography fontWeight={500}>
+        <Typography paddingY={padding.small} fontWeight={fontWeight.extraBold}>
+          PRINCIPLE PARTICIPANTS
+        </Typography>
+        <Stack
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+          spacing={1}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Logo
+              src={UTAS}
+              alt={"logo-University-of-Tasmania"}
+              height="40px"
+            />
+            <Typography
+              fontWeight={600}
+              padding={`0 ${padding.medium} 0 0`}
+              fontSize="small"
+            >
+              LEAD AGENT
+            </Typography>
+          </Box>
+          {principals.map((logo, index) => (
+            <Box key={index}>
+              <Logo src={logo} alt={`logo-${index}`} height="60px" />
+            </Box>
+          ))}
+        </Stack>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          <Logo src={SIMS} alt="logo-sims" height="60px" />
+          <Divider
+            orientation="vertical"
+            sx={{
+              height: "60%",
+              "&.MuiDivider-root": {
+                borderColor: color.gray.medium,
+              },
+            }}
+          />
+          {sims.map((logo, index) => (
+            <Box key={index}>
+              <Logo src={logo} alt={`logo-${index}`} height="60px" />
+            </Box>
+          ))}
+        </Stack>
+        <Typography
+          paddingY={padding.extraSmall}
+          fontSize="small"
+          fontWeight={fontWeight.extraBold}
+          color={fontColor.gray.light}
+        >
           SIMS IS A PARTNERSHIP INVOLVING FOUR UNIVERSITIES
         </Typography>
       </Grid>
-      <Grid item xs={12}>
-        <Typography fontWeight={500}>ASSOCIATE PARTICIPANTS</Typography>
-      </Grid>
       <Grid
         item
+        xs={12}
         sx={{
           display: "flex",
-          flexDirection: "row",
-          alignContent: "center",
+          flexDirection: "column",
+          justifyContent: "center",
           alignItems: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
+          paddingBottom: padding.extraLarge,
         }}
       >
-        {associates.map((logo, index) => (
-          <Grid item xs={12} key={index}>
-            <Logo src={logo} alt={`logo-${index}`} height="60px" />
-          </Grid>
-        ))}
+        <Typography paddingY={padding.small} fontWeight={fontWeight.extraBold}>
+          ASSOCIATE PARTICIPANTS
+        </Typography>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="center"
+          spacing={1}
+        >
+          {associates.map((logo, index) => (
+            <Box key={index}>
+              <Logo
+                src={logo}
+                alt={`logo-${index}`}
+                height={index === 0 ? "30px" : "60px"}
+              />
+            </Box>
+          ))}
+        </Stack>
       </Grid>
     </Grid>
   );
diff --git a/src/components/details/Carousel.tsx b/src/components/details/Carousel.tsx
index 43aea7fe..569a7e7d 100644
--- a/src/components/details/Carousel.tsx
+++ b/src/components/details/Carousel.tsx
@@ -109,7 +109,7 @@ const Carousel: FC = () => {
           <Box sx={{ width: `${containerWidth}px`, height: "100%" }}>
             {/* Container for the cards and the slide animation */}
             {cards.map((card, index) => (
-              <Box // State to track the direction of the slide animation
+              <Box
                 key={`card-${index}`}
                 sx={{
                   width: "100%",
diff --git a/src/components/search/ComplexTextSearch.tsx b/src/components/search/ComplexTextSearch.tsx
index 4224ba76..44f03456 100644
--- a/src/components/search/ComplexTextSearch.tsx
+++ b/src/components/search/ComplexTextSearch.tsx
@@ -12,7 +12,10 @@ import {
 } from "../common/store/componentParamReducer";
 import InputWithSuggester from "./InputWithSuggester";
 import { pageDefault } from "../common/constants";
-import { padding } from "../../styles/constants.js";
+import { color, fontColor, padding } from "../../styles/constants.js";
+
+export const filterButtonWidth = 100;
+export const searchIconWidth = 44;
 
 const ComplexTextSearch = () => {
   const navigate = useNavigate();
@@ -46,21 +49,26 @@ const ComplexTextSearch = () => {
       <Grid item xs={10}>
         <Paper
           sx={{
-            p: "2px 4px",
             display: "flex",
             alignItems: "center",
+            height: "100%",
           }}
         >
-          <IconButton sx={{ p: "10px" }} aria-label="search">
+          <IconButton
+            sx={{ width: `${searchIconWidth}px`, p: padding.small }}
+            aria-label="search"
+          >
             <SearchIcon />
           </IconButton>
           <InputWithSuggester handleEnterPressed={handleEnterPressed} />
-          <Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
           <Button
             variant="text"
             sx={{
-              color: grey["searchButtonText"],
-              paddingX: padding["large"],
+              height: "100%",
+              minWidth: `${filterButtonWidth}px`,
+              color: fontColor.blue.medium,
+              paddingX: padding.large,
+              backgroundColor: color.gray.xxLight,
             }}
             startIcon={<Tune />}
             onClick={onFilterClick}
@@ -70,12 +78,22 @@ const ComplexTextSearch = () => {
           </Button>
         </Paper>
       </Grid>
-      <Grid item xs={2}>
+      <Grid
+        item
+        xs={2}
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+      >
         <Button
           sx={{
             color: grey["searchButtonText"],
-            backgroundColor: "white",
+            backgroundColor: "#fff",
             height: "100%",
+
+            ":hover": {
+              backgroundColor: "#fff",
+            },
           }}
           fullWidth
           onClick={redirectSearch}
diff --git a/src/components/search/InputWithSuggester.tsx b/src/components/search/InputWithSuggester.tsx
index 33da98dd..fb94f7ae 100644
--- a/src/components/search/InputWithSuggester.tsx
+++ b/src/components/search/InputWithSuggester.tsx
@@ -1,6 +1,22 @@
-import StyledTextField from "./StyledTextField";
-import { Autocomplete, Box, Chip, Grid } from "@mui/material";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Autocomplete,
+  Box,
+  Chip,
+  Paper,
+  Popper,
+  Stack,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import React, {
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   Category,
   ParameterState,
@@ -19,7 +35,9 @@ import {
   fetchSuggesterOptions,
 } from "../common/store/searchReducer";
 import _ from "lodash";
-//import { CategoryIcon } from "@mui/icons-material";
+import { borderRadius, color, padding } from "../../styles/constants";
+import { filterButtonWidth, searchIconWidth } from "./ComplexTextSearch";
+import { capitalizeFirstLetter } from "../../utils/capitalizeFirstLetter";
 
 interface InputWithSuggesterProps {
   handleEnterPressed?: (
@@ -40,6 +58,8 @@ enum OptionGroup {
   TITLE = "title",
 }
 
+const textfieldMinWidth = 200;
+
 /**
  * Customized input box with suggester. If more customization is needed, please
  * do as the below nullable props.
@@ -50,15 +70,15 @@ enum OptionGroup {
 const InputWithSuggester: React.FC<InputWithSuggesterProps> = ({
   handleEnterPressed = () => {},
 }) => {
+  const theme = useTheme();
   const dispatch = useDispatch<AppDispatch>();
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState<OptionType[]>([]);
   const [categorySet, setCategorySet] = useState<Category[]>([]);
 
-  const selectedCategories: Category[] = useSelector((state: RootState) =>
-    state.paramReducer.categories
-      ? state.paramReducer.categories
-      : new Array<Category>()
+  const emptyArray: Category[] = [];
+  const selectedCategories: Category[] = useSelector(
+    (state: RootState) => state.paramReducer.categories || emptyArray
   );
 
   const searchInput = useSelector(
@@ -165,6 +185,7 @@ const InputWithSuggester: React.FC<InputWithSuggesterProps> = ({
     },
     [options]
   );
+
   const onChange = useCallback(
     (_: any, newValue: string | null) => {
       if (newValue !== null) {
@@ -225,41 +246,103 @@ const InputWithSuggester: React.FC<InputWithSuggesterProps> = ({
     handleEnterPressed(event, open);
   };
 
+  const [searchFieldWidth, setSearchFieldWidth] = useState<number>(0);
+  const [categoryWidth, setCategoryWidth] = useState<number>(0);
+  const searchFieldDiv = useRef(null);
+  const categoryDiv = useRef(null);
+
+  useEffect(() => {
+    // Create a ResizeObserver to monitor changes in element sizes
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === searchFieldDiv.current) {
+          setSearchFieldWidth(entry.contentRect.width);
+        } else if (entry.target === categoryDiv.current) {
+          setCategoryWidth(entry.contentRect.width);
+        }
+      }
+    });
+
+    // Get the elements from refs
+    const searchFieldElement = searchFieldDiv.current;
+    const categoryElement = categoryDiv.current;
+
+    // Observe the elements
+    if (searchFieldElement) {
+      observer.observe(searchFieldElement);
+    }
+
+    if (categoryElement) {
+      observer.observe(categoryElement);
+    }
+
+    // Cleanup observer on component unmount
+    return () => {
+      if (searchFieldElement) {
+        observer.unobserve(searchFieldElement);
+      }
+      if (categoryElement) {
+        observer.unobserve(categoryElement);
+      }
+    };
+  }, []);
+
+  const CustomPopper = (props: any): ReactNode => {
+    // Util function for calculating the suggester offset
+    const calculateOffset = () => {
+      return searchFieldWidth - categoryWidth < textfieldMinWidth
+        ? [-searchIconWidth, 0]
+        : [-(categoryWidth + searchIconWidth), 0];
+    };
+    return (
+      <Popper
+        {...props}
+        placement="bottom-start"
+        modifiers={[
+          {
+            name: "offset",
+            options: {
+              offset: calculateOffset, // Skid horizontally by categoryWidth, no vertical offset
+            },
+          },
+          {
+            name: "flip",
+            enabled: false, // Disable the flip modifier
+          },
+        ]}
+        style={{
+          width: `${searchFieldWidth + searchIconWidth + filterButtonWidth}px`,
+        }}
+      />
+    );
+  };
+
+  const CustomPaper = (props: any): ReactNode => {
+    return (
+      <Paper
+        sx={{
+          backgroundColor: color.blue.xLight,
+          "& .MuiAutocomplete-listbox": {
+            borderRadius: borderRadius.medium,
+            bgcolor: color.blue.xLight,
+          },
+          "& .MuiListSubheader-root": {
+            bgcolor: color.blue.xLight,
+          },
+        }}
+        {...props}
+      />
+    );
+  };
+
   return (
     <>
-      <Box display="flex" flexDirection="row">
-        <Box
-          display={selectedCategories?.length > 0 ? "flex" : "none"}
-          flexDirection="row"
-          alignItems="center"
-        >
-          Categories:{" "}
-        </Box>
-        <Box
-          sx={{
-            display: "flex",
-            flexWrap: "nowrap",
-            width: "50%",
-            gap: "0px",
-          }}
-        >
-          {selectedCategoryStrs?.map((c, i) => (
-            <Grid item key={i}>
-              <Chip
-                sx={{ fontSize: "12px" }}
-                label={c}
-                onDelete={() => {
-                  removeCategory(c);
-                }}
-              />
-            </Grid>
-          ))}
-        </Box>
-      </Box>
       <Autocomplete
         id="search"
         fullWidth
         freeSolo
+        PopperComponent={CustomPopper}
+        PaperComponent={CustomPaper}
         open={open}
         onOpen={handleSuggesterOpen}
         onClose={handleSuggesterClose}
@@ -268,23 +351,62 @@ const InputWithSuggester: React.FC<InputWithSuggesterProps> = ({
         options={options.flatMap((option) => option.text)}
         groupBy={(option: string): string => {
           const v = options.find((o) => o.text === option);
-          return v ? v.group : "";
+          return v ? capitalizeFirstLetter(v.group) : "";
         }}
         autoComplete
         includeInputInList
         onChange={onChange}
         onInputChange={onInputChange}
         renderInput={(params) => (
-          <StyledTextField
-            {...params}
-            placeholder="Search for open data"
-            inputProps={{
-              "aria-label": "Search for open data",
-              ...params.inputProps,
-              onKeyDown: handleKeyDown,
-              "data-testid": "input-with-suggester",
-            }}
-          />
+          <Box display="flex" flexWrap="wrap" ref={searchFieldDiv}>
+            <Stack
+              display={selectedCategories?.length > 0 ? "flex" : "none"}
+              spacing={1}
+              direction="row"
+              useFlexGap
+              flexWrap="wrap"
+              paddingY={padding.small}
+              ref={categoryDiv}
+            >
+              <Typography
+                fontFamily={theme.typography.fontFamily}
+                fontSize="small"
+                paddingTop={padding.extraSmall}
+              >
+                Categories&nbsp;:&nbsp;
+              </Typography>
+
+              {selectedCategoryStrs?.map((c, i) => (
+                <Box key={i}>
+                  <Chip
+                    sx={{ fontSize: "12px" }}
+                    label={c}
+                    onDelete={() => {
+                      removeCategory(c);
+                    }}
+                  />
+                </Box>
+              ))}
+            </Stack>
+            <Box flexGrow={1}>
+              <TextField
+                sx={{
+                  minWidth: textfieldMinWidth,
+                  "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+                    border: "none",
+                  },
+                }}
+                {...params}
+                placeholder="Search for open data"
+                inputProps={{
+                  "aria-label": "Search for open data",
+                  ...params.inputProps,
+                  onKeyDown: handleKeyDown,
+                  "data-testid": "input-with-suggester",
+                }}
+              />
+            </Box>
+          </Box>
         )}
       />
     </>
diff --git a/src/components/search/__test__/InputWithSuggester.test.tsx b/src/components/search/__test__/InputWithSuggester.test.tsx
index 91a0776c..cd1813bb 100644
--- a/src/components/search/__test__/InputWithSuggester.test.tsx
+++ b/src/components/search/__test__/InputWithSuggester.test.tsx
@@ -13,6 +13,7 @@ import {
   describe,
   expect,
   test,
+  vi,
 } from "vitest";
 import { Provider } from "react-redux";
 import store from "../../common/store/store";
diff --git a/src/components/smartpanel/ComplexSmartPanel.tsx b/src/components/smartpanel/ComplexSmartPanel.tsx
index a9c46478..93362c03 100644
--- a/src/components/smartpanel/ComplexSmartPanel.tsx
+++ b/src/components/smartpanel/ComplexSmartPanel.tsx
@@ -8,21 +8,31 @@ import { margin } from "../../styles/constants";
 interface ComplexSmartPanelProps {
   columns?: number;
   rows?: number;
-  height: string;
+  height?: string;
   bottomDivider?: boolean;
-  gridColumns: number;
+  gridColumns?: number;
   sx?: SxProps<Theme>;
 }
+const defaultProps = {
+  columns: 9,
+  rows: 2,
+  gridColumns: 8,
+  height: "95px",
+  bottomDivider: false,
+};
 
 const ComplexSmartPanel = (
-  props: React.PropsWithChildren<ComplexSmartPanelProps>
+  props: React.PropsWithChildren<ComplexSmartPanelProps> = defaultProps
 ) => {
   const boxRef = useRef<HTMLDivElement>(null);
 
   const scroll = useCallback(
     (scrollOffset: number) => {
       if (boxRef && boxRef.current) {
-        boxRef.current.scrollLeft += scrollOffset;
+        boxRef.current.scrollTo({
+          left: boxRef.current.scrollLeft + scrollOffset,
+          behavior: "smooth",
+        });
       }
     },
     [boxRef]
@@ -49,7 +59,7 @@ const ComplexSmartPanel = (
           >
             <Box>
               <IconButton
-                onClick={() => scroll(-50)}
+                onClick={() => scroll(-500)}
                 sx={{ backgroundColor: "#7ba0b6" }}
               >
                 <ArrowBackIosNewIcon
@@ -87,7 +97,7 @@ const ComplexSmartPanel = (
           >
             <Box>
               <IconButton
-                onClick={() => scroll(50)}
+                onClick={() => scroll(500)}
                 sx={{ backgroundColor: "#7ba0b6" }}
               >
                 <ArrowForwardIosIcon
@@ -107,12 +117,4 @@ const ComplexSmartPanel = (
   );
 };
 
-ComplexSmartPanel.defaultProps = {
-  columns: 9,
-  rows: 2,
-  gridColumns: 8,
-  height: "95px",
-  bottomDivider: false,
-};
-
 export default ComplexSmartPanel;
diff --git a/src/components/storyboard/StoryBoard.tsx b/src/components/storyboard/StoryBoard.tsx
index bd5a695c..fd049499 100644
--- a/src/components/storyboard/StoryBoard.tsx
+++ b/src/components/storyboard/StoryBoard.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box, CardContent, Typography, Grid, Card } from "@mui/material";
+import { Box, CardContent, Typography, Grid, Card, Stack } from "@mui/material";
 //import RoundButton from "../common/buttons/RoundButton"; TODO
 import YouTube, { YouTubeProps } from "react-youtube";
 
@@ -30,8 +30,13 @@ const StoryBoard = (props: StoryBoardProps) => {
   };
   return (
     <Box sx={{ display: props?.isActive ? "flex" : "none" }}>
-      <Grid container spacing={3} justifyContent="center">
-        <Grid item xs="auto" justifyContent="center">
+      <Stack
+        direction="row"
+        spacing={2}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Box>
           <Card>
             <YouTube
               videoId={props.url}
@@ -42,36 +47,26 @@ const StoryBoard = (props: StoryBoardProps) => {
               onReady={onPlayerReady}
             />
           </Card>
-        </Grid>
-        <Grid item xs={5}>
-          <Box sx={{ display: "flex", flexDirection: "column" }}>
-            <CardContent sx={{ flex: "1 0 auto" }}>
-              {props.caption}
-              <Typography
-                variant="body1"
-                color="text.secondary"
-                component="div"
-                style={{ lineHeightStep: "30px" }}
-              >
-                {props.content}
-              </Typography>
-              <Typography
-                variant="body1"
-                color="text.secondary"
-                component="div"
-                style={{ lineHeightStep: "30px" }}
-              >
-                &nbsp;
-              </Typography>
-              <Typography
-                variant="body1"
-                color="text.secondary"
-                component="div"
-                style={{ lineHeightStep: "30px" }}
-              >
-                &nbsp;
-              </Typography>
-              {/* <Grid container spacing={3}>
+        </Box>
+
+        <Stack
+          direction="column"
+          display="flex"
+          justifyContent="start"
+          alignItems="start"
+        >
+          <CardContent sx={{ flex: "1 0 auto" }}>
+            {props.caption}
+            <Typography
+              variant="body1"
+              color="text.secondary"
+              component="div"
+              style={{ lineHeightStep: "30px" }}
+            >
+              {props.content}
+            </Typography>
+
+            {/* <Grid container spacing={3}>
                         {props.buttons &&
                             props.buttons?.map((button) => {
                                 return (
@@ -82,10 +77,9 @@ const StoryBoard = (props: StoryBoardProps) => {
                             }
                         )}
                     </Grid> */}
-            </CardContent>
-          </Box>
-        </Grid>
-      </Grid>
+          </CardContent>
+        </Stack>
+      </Stack>
     </Box>
   );
 };
diff --git a/src/components/storyboard/StoryBoardPanel.tsx b/src/components/storyboard/StoryBoardPanel.tsx
index 7fee282d..6a8e7e6e 100644
--- a/src/components/storyboard/StoryBoardPanel.tsx
+++ b/src/components/storyboard/StoryBoardPanel.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
-import { Grid, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import StoryBoard from "./StoryBoard";
 import NotebookModel, {
   //NotebookModelCallbackProps,
   NotebookModelProps,
 } from "../common/ipython/NotebookModel";
-import { margin } from "../../styles/constants";
+import { padding } from "../../styles/constants";
 
 const StoryBoardPanel = () => {
   const [value] = React.useState(0);
@@ -18,100 +18,86 @@ const StoryBoardPanel = () => {
   // };
 
   return (
-    <>
+    <Box sx={{ paddingY: padding.triple }}>
       <NotebookModel
         url={notebook.url}
         showDialog={notebook.showDialog}
         callback={() => setNotebook({ showDialog: false })}
       />
-      <Grid
-        container
-        sx={{
-          backgroundColor: "white",
-        }}
-      >
-        <Grid item xs={12}>
-          <Grid
-            container
-            justifyContent="center"
-            marginTop={margin["tripleTop"]}
-            marginBottom={margin["tripleBottom"]}
-          >
-            <Grid
-              item
-              xs={8}
-              sx={{
-                textAlign: "left",
-              }}
-            >
-              <StoryBoard
-                isActive={value === 0}
-                url="KtCb9TNuZsc"
-                caption={
-                  <>
-                    <Typography variant="h4" component="em">
-                      Data Story 01
-                    </Typography>
-                    <Typography variant="h4" fontWeight={600}>
-                      OceanHackWeek 2023: Data Access{" "}
-                    </Typography>
-                    <Typography variant="h4" fontWeight={500}>
-                      Marty Hidas
-                    </Typography>
-                  </>
-                }
-                content="This tutorial demostrates several ways data can be accessed remotely and loaded into a Python environment , direct access to files on cloud storage (AWS S3), cloud-optimised formats Zarr & Parquet"
-                buttons={[
-                  {
-                    label: "iPython",
-                    onClick: () =>
-                      setNotebook({
-                        url: "https://raw.githubusercontent.com/oceanhackweek/ohw-tutorials/OHW23/01-Tue/Data_access_methods_Python.ipynb?raw=true",
-                        showDialog: true,
-                      }),
-                  },
-                  { label: "OGC Web Feature Service (WFS)" },
-                  { label: "S3" },
-                  { label: "Zarr" },
-                  { label: "Parquet" },
-                  { label: "OPeNDAP" },
-                ]}
-              />
-              <StoryBoard
-                isActive={value === 1}
-                url="AGaLVYoM1E8"
-                caption="Data Story 02 : What is Australias Integrated Marine Observing System (IMOS)?"
-                content="What is Australias Integrated Marine Observing System (IMOS)?"
-                buttons={[
-                  { label: "Metadata" },
-                  { label: "NISB maps" },
-                  { label: "netCDF" },
-                ]}
-              />
-              <StoryBoard
-                isActive={value === 2}
-                url="xamjQ9hgEpk"
-                caption="Data Story 03 : Integrated Marine Observing System (IMOS) Southern Ocean flux station buoy"
-                content="IMOS is celebrating the successful retrieval of the first moored weather buoy deployed in the remote Southern Ocean.
+      <Grid container>
+        <Grid
+          item
+          sx={{
+            textAlign: "left",
+          }}
+          xs={12}
+        >
+          <StoryBoard
+            isActive={value === 0}
+            url="KtCb9TNuZsc"
+            caption={
+              <>
+                <Typography variant="h4" component="em">
+                  Data Story 01
+                </Typography>
+                <Typography variant="h4" fontWeight={600}>
+                  OceanHackWeek 2023: Data Access{" "}
+                </Typography>
+                <Typography variant="h4" fontWeight={500}>
+                  Marty Hidas
+                </Typography>
+              </>
+            }
+            content="This tutorial demostrates several ways data can be accessed remotely and loaded into a Python environment , direct access to files on cloud storage (AWS S3), cloud-optimised formats Zarr & Parquet"
+            buttons={[
+              {
+                label: "iPython",
+                onClick: () =>
+                  setNotebook({
+                    url: "https://raw.githubusercontent.com/oceanhackweek/ohw-tutorials/OHW23/01-Tue/Data_access_methods_Python.ipynb?raw=true",
+                    showDialog: true,
+                  }),
+              },
+              { label: "OGC Web Feature Service (WFS)" },
+              { label: "S3" },
+              { label: "Zarr" },
+              { label: "Parquet" },
+              { label: "OPeNDAP" },
+            ]}
+          />
+          <StoryBoard
+            isActive={value === 1}
+            url="AGaLVYoM1E8"
+            caption="Data Story 02 : What is Australias Integrated Marine Observing System (IMOS)?"
+            content="What is Australias Integrated Marine Observing System (IMOS)?"
+            buttons={[
+              { label: "Metadata" },
+              { label: "NISB maps" },
+              { label: "netCDF" },
+            ]}
+          />
+          <StoryBoard
+            isActive={value === 2}
+            url="xamjQ9hgEpk"
+            caption="Data Story 03 : Integrated Marine Observing System (IMOS) Southern Ocean flux station buoy"
+            content="IMOS is celebrating the successful retrieval of the first moored weather buoy deployed in the remote Southern Ocean.
                                         Marine and climate scientists are still analysing the wealth of data relayed back to shore by the South Ocean Flux Station about this climatically important region of the world. The data includes hourly observations of wind, temperature, humidity, air pressure, sunlight and rain."
-                buttons={[
-                  { label: "Metadata" },
-                  { label: "NISB maps" },
-                  { label: "netCDF" },
-                ]}
-              />
-            </Grid>
-            <Grid item xs={6}>
-              {/* <UnderlineTabs value={value} onChange={handleChange}>
-                <UnderlineTab />
-                <UnderlineTab />
-                <UnderlineTab />
-              </UnderlineTabs> */}
-            </Grid>
-          </Grid>
+            buttons={[
+              { label: "Metadata" },
+              { label: "NISB maps" },
+              { label: "netCDF" },
+            ]}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          {/* <UnderlineTabs value={value} onChange={handleChange}>
+            <UnderlineTab />
+            <UnderlineTab />
+            <UnderlineTab />
+          </UnderlineTabs> */}
         </Grid>
       </Grid>
-    </>
+    </Box>
   );
 };
 
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 865c4a99..58daae36 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -12,7 +12,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "../components/common/store/store";
-import { Box } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import { CARD_ID } from "../components/smartpanel/utils";
 import Layout from "../components/layout/layout";
 import landingImageUrl from "@/assets/images/bg_landing_page.png";
@@ -43,28 +43,46 @@ const LandingPage = () => {
           backgroundImage: `url(${landingImageUrl})`,
           backgroundSize: "cover",
           display: "flex",
-          flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
         }}
       >
-        <Box
+        <Stack
+          direction="column"
+          justifyContent="center"
+          alignItems="center"
           sx={{
+            minWidth: "1020px",
             width: "70%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
+            maxWidth: "1228px",
           }}
         >
           <MainMenu />
           <BannerOpenAccess />
           <ComplexTextSearch />
           <ShortCutSmartPanel onCardClicked={onCardClick} />
-        </Box>
+        </Stack>
+      </Box>
+      <Box
+        sx={{
+          backgroundColor: "#fff",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Stack
+          direction="column"
+          sx={{
+            minWidth: "1020px",
+            width: "70%",
+            maxWidth: "1228px",
+          }}
+        >
+          <StoryBoardPanel />
+          <PromotionSmartPanel />
+        </Stack>
       </Box>
-      <StoryBoardPanel />
-      <PromotionSmartPanel />
     </Layout>
   );
 };
diff --git a/src/pages/detail-page/DetailsPage.tsx b/src/pages/detail-page/DetailsPage.tsx
index 80babbf8..16d1fa18 100644
--- a/src/pages/detail-page/DetailsPage.tsx
+++ b/src/pages/detail-page/DetailsPage.tsx
@@ -1,5 +1,4 @@
 import { OGCCollection } from "../../components/common/store/searchReducer";
-
 import Layout from "../../components/layout/layout";
 import { Box, Grid } from "@mui/material";
 import { color, padding } from "../../styles/constants";
@@ -25,7 +24,7 @@ const DetailsPage = () => {
             backgroundColor: color.blue.light,
           }}
         >
-          <Box sx={{ width: "1200px" }}>
+          <Box sx={{ minWidth: "1020px", width: "70%", maxWidth: "1228px" }}>
             <Grid container spacing={2}>
               <Grid item xs={12}>
                 <HeaderSection />
diff --git a/src/pages/detail-page/subpages/side-cards/AssociatedCategoriesCard.tsx b/src/pages/detail-page/subpages/side-cards/AssociatedCategoriesCard.tsx
index 09f837ea..ffdaab13 100644
--- a/src/pages/detail-page/subpages/side-cards/AssociatedCategoriesCard.tsx
+++ b/src/pages/detail-page/subpages/side-cards/AssociatedCategoriesCard.tsx
@@ -18,7 +18,7 @@ const AssociatedCategoriesCard = () => {
       sx={{
         border: "none",
         borderRadius: borderRadius.small,
-        backgroundColor: color.blue.extraLight,
+        backgroundColor: color.blue.extraLightSemiTransparent,
         padding: padding.extraSmall,
       }}
     >
diff --git a/src/pages/detail-page/subpages/side-cards/RatingsAndCommentsCard.tsx b/src/pages/detail-page/subpages/side-cards/RatingsAndCommentsCard.tsx
index 1791dcda..b6e75d96 100644
--- a/src/pages/detail-page/subpages/side-cards/RatingsAndCommentsCard.tsx
+++ b/src/pages/detail-page/subpages/side-cards/RatingsAndCommentsCard.tsx
@@ -81,7 +81,7 @@ const RatingsAndCommentsCard = () => {
             sx={{
               border: "none",
               borderRadius: borderRadius.small,
-              backgroundColor: color.blue.extraLight,
+              backgroundColor: color.blue.extraLightSemiTransparent,
               padding: padding.small,
               cursor: "pointer",
             }}
@@ -116,7 +116,7 @@ const RatingsAndCommentsCard = () => {
             sx={{
               border: "none",
               borderRadius: borderRadius.small,
-              backgroundColor: color.blue.extraLight,
+              backgroundColor: color.blue.extraLightSemiTransparent,
               padding: padding.small,
               cursor: "pointer",
             }}
@@ -154,7 +154,7 @@ const RatingsAndCommentsCard = () => {
                   key={index}
                   sx={{
                     borderRadius: borderRadius.small,
-                    backgroundColor: color.blue.extraLight,
+                    backgroundColor: color.blue.extraLightSemiTransparent,
                     cursor: "pointer",
                   }}
                 >
diff --git a/src/pages/detail-page/subpages/side-cards/TemporalExtentCard.tsx b/src/pages/detail-page/subpages/side-cards/TemporalExtentCard.tsx
index 0a52b2a7..294d6de1 100644
--- a/src/pages/detail-page/subpages/side-cards/TemporalExtentCard.tsx
+++ b/src/pages/detail-page/subpages/side-cards/TemporalExtentCard.tsx
@@ -63,7 +63,7 @@ const TemporalExtentCard = () => {
         alignItems: "center",
         border: `${border.xs} ${color.gray.extraLight}`,
         borderRadius: borderRadius.medium,
-        backgroundColor: color.blue.extraLight,
+        backgroundColor: color.blue.extraLightSemiTransparent,
         padding: padding.small,
       }}
     >
@@ -112,7 +112,7 @@ const TemporalExtentCard = () => {
               alignItems: "center",
               border: `${border.xs} ${color.gray.extraLight}`,
               borderRadius: borderRadius.medium,
-              backgroundColor: color.blue.extraLight,
+              backgroundColor: color.blue.extraLightSemiTransparent,
               padding: padding.small,
             }}
           >
diff --git a/src/pages/detail-page/subpages/tab-panels/AbstractAndDownloadPanel.tsx b/src/pages/detail-page/subpages/tab-panels/AbstractAndDownloadPanel.tsx
index 60ee9bd8..a714b4f9 100644
--- a/src/pages/detail-page/subpages/tab-panels/AbstractAndDownloadPanel.tsx
+++ b/src/pages/detail-page/subpages/tab-panels/AbstractAndDownloadPanel.tsx
@@ -81,7 +81,7 @@ const AbstractAndDownloadPanel = () => {
   const selectSxProps = {
     height: "30px",
     textAlign: "start",
-    backgroundColor: color.blue.extraLight,
+    backgroundColor: color.blue.extraLightSemiTransparent,
     boxShadow: theme.shadows[5],
   };
 
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 1dd407a6..f45465d0 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -3,3 +3,22 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
+
+class ResizeObserver {
+  callback: ResizeObserverCallback;
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+  }
+
+  observe() {
+    // Trigger the callback immediately to simulate observing behavior
+    this.callback([], this);
+  }
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+(global as any).ResizeObserver = ResizeObserver;
diff --git a/src/styles/constants.ts b/src/styles/constants.ts
index b719f93e..1c4c7df4 100644
--- a/src/styles/constants.ts
+++ b/src/styles/constants.ts
@@ -79,7 +79,8 @@ const color = {
     divider: "#8B959C",
   },
   blue: {
-    extraLight: "rgba(231,242,255,0.5)",
+    extraLightSemiTransparent: "rgba(231,242,255,0.5)",
+    xLight: "#eaf1f6",
     light: "#E2ECF3",
     medium: "#E7F2FF",
     dark: "#618CA5",
@@ -90,7 +91,8 @@ const color = {
     dark: "#575757",
     medium: "#787878",
     light: "#979797",
-    extraLight: "#DFDFDF",
+    extraLight: "#dfdfdf",
+    xxLight: "#f8f8f8",
   },
 };