diff --git a/.DS_Store b/.DS_Store
index 90248b433..f16768672 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/package.json b/package.json
index 61a05aa00..e7c5c9139 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@brookr/react-switch": "^6.0.1",
     "@chakra-ui/css-reset": "^2.1.2",
     "@chakra-ui/icons": "^2.1.0",
-    "@chakra-ui/react": "^2.7.1",
+    "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.10.6",
     "@headlessui/react": "^1.7.13",
@@ -63,7 +63,9 @@
     "react-scripts": "5.0.1",
     "react-scroll": "^1.8.9",
     "react-simple-placeholder-image": "^0.1.2",
+    "react-spring": "^9.7.2",
     "react-tsparticles": "^2.10.1",
+    "react-use-gesture": "^9.1.3",
     "react-vertical-timeline-component": "^3.6.0",
     "redux": "^4.2.1",
     "web-vitals": "^3.3.2"
diff --git a/public/images/.DS_Store b/public/images/.DS_Store
index b19dbc547..c676b9e2a 100644
Binary files a/public/images/.DS_Store and b/public/images/.DS_Store differ
diff --git a/public/images/portfolio/.DS_Store b/public/images/portfolio/.DS_Store
index 21c6b07a0..a7f0507f0 100644
Binary files a/public/images/portfolio/.DS_Store and b/public/images/portfolio/.DS_Store differ
diff --git a/public/images/portfolio/odd-duck-product/odd-duck-product-1.png b/public/images/portfolio/odd-duck-product/odd-duck-product-1.png
index 096de10db..96afe7700 100644
Binary files a/public/images/portfolio/odd-duck-product/odd-duck-product-1.png and b/public/images/portfolio/odd-duck-product/odd-duck-product-1.png differ
diff --git a/public/images/portfolio/salmon-cookies/.DS_Store b/public/images/portfolio/salmon-cookies/.DS_Store
index 957928620..9a1bb9972 100644
Binary files a/public/images/portfolio/salmon-cookies/.DS_Store and b/public/images/portfolio/salmon-cookies/.DS_Store differ
diff --git a/public/images/portfolio/salmon-cookies/salmon-cookies-1.png b/public/images/portfolio/salmon-cookies/salmon-cookies-1.png
index 35cc3bfcf..c3f854fdf 100644
Binary files a/public/images/portfolio/salmon-cookies/salmon-cookies-1.png and b/public/images/portfolio/salmon-cookies/salmon-cookies-1.png differ
diff --git a/public/images/portfolio/salmon-cookies/salmon-cookies-II-2.png b/public/images/portfolio/salmon-cookies/salmon-cookies-II-2.png
new file mode 100644
index 000000000..f48e1e4da
Binary files /dev/null and b/public/images/portfolio/salmon-cookies/salmon-cookies-II-2.png differ
diff --git a/public/images/portfolio/salmon-cookies/salmon-cookies-II.png b/public/images/portfolio/salmon-cookies/salmon-cookies-II.png
new file mode 100644
index 000000000..a4ee7e1b9
Binary files /dev/null and b/public/images/portfolio/salmon-cookies/salmon-cookies-II.png differ
diff --git a/public/index.html b/public/index.html
index 6db193ae6..7843b214e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,7 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
diff --git a/src/App.js b/src/App.js
index 4f0fb159c..300aaed7b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,7 @@ import './assets/styles/App.scss';
 import Main from './containers/Main';
 
 function App() {
-  return <Main />;
+  return <Main w={'100%'} />;
 }
 
 export default App;
diff --git a/src/assets/styles/App.scss b/src/assets/styles/App.scss
index 144ab425a..54d63adb9 100644
--- a/src/assets/styles/App.scss
+++ b/src/assets/styles/App.scss
@@ -6,6 +6,7 @@
 html {
   z-index: 1;
   height: 100%;
+  width: 100%;
   margin-left: -1rem;
 }
 
@@ -316,14 +317,15 @@ button:focus {
 /* Navbar Section  */
 /* --------- */
 
+/* --------- */
+/* Navbar Section  */
+/* --------- */
+
 #home {
-  justify-content: space-between;
   justify-content: center;
   margin: auto;
-  min-width: 100vh;
   width: 100%;
   font: 12px/18px 'opensans-bold', sans-serif;
-  //   flex-grow: 1;
   color: white;
   text-transform: uppercase;
   z-index: 5;
@@ -331,55 +333,39 @@ button:focus {
 }
 
 .sticky {
-  background-color: #1b1a2ea9 !important;
-  transition: all 0.3s ease-out 0s !important;
-  box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important;
+  background-color: #1b1a2ea9;
+  transition: all 0.3s ease-out;
+  box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171);
 }
 
 .navbar {
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  position: fixed !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+  width: 100%;
   display: flex;
   flex-direction: row;
   z-index: 52;
   max-height: 100px;
-  flex-grow: 1;
   background-color: transparent;
-  transition: all 0.3s ease-out 0s !important;
-  padding: 0.3rem 2rem !important;
-  font-size: 1.2rem !important;
+  transition: all 0.3s ease-out;
+  padding: 0.3rem 2rem;
+  font-size: 1.2rem;
   justify-content: space-between;
-  align-items: center !important;
-  align-content: center !important;
-  padding-bottom: 3px;
-  padding-top: 0;
-}
-
-.navbar.sticky {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-}
-
-.logo-nav {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  align-content: center;
+  padding-bottom: 3px;
 }
 
+.logo-nav,
 .logoGroup {
   display: flex;
   flex-grow: 1;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 
 .logo-button {
@@ -390,121 +376,71 @@ button:focus {
 }
 
 .navbar-toggler {
-  position: relative !important;
-  background-color: transparent !important;
-  border-color: transparent !important;
+  position: relative;
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .navbar-toggler span {
-  display: block !important;
-  background-color: #be50f4 !important;
-  height: 4px !important;
-  width: 27px !important;
-  margin-top: 5px !important;
-  margin-bottom: 5px !important;
-  transform: rotate(0deg) !important;
-  left: 0 !important;
-  opacity: 1 !important;
+  display: block;
+  background-color: #be50f4;
+  height: 4px;
+  width: 27px;
+  margin: 5px 0;
+  transform: rotate(0deg);
 }
 
 .navbar-toggler:focus,
 .navbar-toggler:active {
-  outline: 0 !important;
+  outline: 0;
 }
 
 .navbar-toggler span:nth-child(1),
 .navbar-toggler span:nth-child(3) {
-  transition: transform 0.35s ease-in-out !important;
-}
-
-.navbar-toggler:not(.collapsed) span:nth-child(1) {
-  position: absolute !important;
-  left: 12px !important;
-  top: 10px !important;
-  transform: rotate(135deg) !important;
-  opacity: 0.9 !important;
-}
-
-.navbar-toggler:not(.collapsed) span:nth-child(2) {
-  height: 12px !important;
-  visibility: hidden !important;
-  background-color: transparent !important;
-}
-
-.navbar-toggler:not(.collapsed) span:nth-child(3) {
-  position: absolute !important;
-  left: 12px !important;
-  top: 10px !important;
-  transform: rotate(-135deg) !important;
-  opacity: 0.9 !important;
+  transition: transform 0.35s ease-in-out;
 }
 
 @media (max-width: 767px) {
   .navbar {
-    padding: 1rem 2rem !important;
-    font-size: 1.4rem !important;
-    background-color: #181a27 !important;
-    height: auto;
-    // margin: 5px 0;
+    padding: 1rem 2rem;
+    font-size: 1.4rem;
+    background-color: #181a27;
     justify-content: center;
   }
+
+  .nav-link {
+    padding: 0.7rem 1rem;
+  }
 }
+
 .navbar-nav {
   align-items: center;
-  top: 0;
-}
-.navbar-nav .nav-item a::after {
-  display: none !important;
-}
-
-.navbar-brand {
-  display: flex;
-  height: 3em !important;
-  width: 6em !important;
-  color: rgb(250, 250, 250) !important;
 }
 
+.navbar-brand,
 .logo {
-  height: 3em !important;
-  width: 6em !important;
+  display: flex;
+  height: 3em;
+  width: 6em;
+  color: rgb(250, 250, 250);
 }
 
 .navbar-nav .nav-link {
   flex-grow: 1;
-  //   width: 10px;
-  color: white !important;
-  padding-right: 1rem !important;
-  padding-left: 1rem !important;
-  text-align: center; // Center the text in the navbar links
-}
-
-// .nav-link {
-//   padding: 0.8rem 1rem !important;
-// }
-
-@media (max-width: 767px) {
-  .nav-link {
-    padding: 0.7rem 1rem !important;
-  }
+  color: white;
+  padding: 0 1rem;
+  text-align: center;
 }
 
 .nav-item {
   padding-left: 10px;
-  margin-top: auto;
-  align-items: center;
   margin: auto;
-}
-
-.navbar-nav .nav-item {
-  // !display: inline-block;
-  position: relative;
-  margin: 10px;
-  // margin-left: 20px;
+  align-items: center;
 }
 
 .navbar-nav .nav-item a {
   font-weight: 400;
-  transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out;
   position: relative;
   z-index: 1;
 }
@@ -512,15 +448,13 @@ button:focus {
 .navbar-nav .nav-item a::after {
   content: '';
   position: relative;
-  // !display: block;
-  //   height: 5px;
   width: 0;
   border-radius: 16px;
   background: #c95bf5;
   bottom: 1px;
   left: 0;
   z-index: -1;
-  transition: all 0.3s ease-out 0s;
+  transition: all 0.3s ease-out;
 }
 
 .navbar-nav .nav-item a:hover::after {
@@ -532,51 +466,48 @@ button:focus {
   width: 20px;
   margin-right: 5px;
   vertical-align: middle;
-}
-
-/* Style the active link icon */
-.navbar-nav .nav-link.active svg {
-  fill: #ff5a5f;
-}
-
-/* Style the default color of the icons */
-.navbar-nav .nav-link svg {
   fill: white;
 }
 
-/* Style the hover color of the icons */
-.navbar-nav .nav-link:hover svg {
-  fill: #c95bf5;
-}
-
-/* Style the active color of the icons */
+.navbar-nav .nav-link:hover svg,
 .navbar-nav .nav-link.active svg {
   fill: #c95bf5;
 }
 
-/* Style the active link icon */
 .navbar-nav .nav-link.active svg {
   fill: #ff5a5f;
 }
 
-/* Style the default color of the icons */
-.navbar-nav .nav-link svg {
-  fill: white;
-}
-
-/* Style the hover color of the icons */
-.navbar-nav .nav-link:hover svg {
-  fill: #c95bf5;
-}
-
-/* Style the active color of the icons */
-.navbar-nav .nav-link.active svg {
-  fill: #c95bf5;
-}
 
 /* --------- */
 /* Home section */
 /* --------- */
+
+// #home {
+//   justify-content: space-between;
+//   justify-content: center;
+//   margin: auto;
+//   min-width: 100vh;
+//   width: 100%;
+//   font: 12px/18px 'opensans-bold', sans-serif;
+//   //   flex-grow: 1;
+//   color: white;
+//   text-transform: uppercase;
+//   z-index: 5;
+//   letter-spacing: 5px;
+// }
+
+#home {
+  justify-content: center;
+  margin: auto;
+  width: 100%;
+  font: 12px/18px 'opensans-bold', sans-serif;
+  color: white;
+  text-transform: uppercase;
+  z-index: 5;
+  letter-spacing: 5px;
+}
+
 .wave {
   animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
   animation-duration: 2.1s; /* Change to speed up or slow down */
@@ -611,6 +542,7 @@ button:focus {
     transform: rotate(0deg);
   }
 }
+
 #tsparticles {
   position: fixed !important;
   background-repeat: no-repeat !important;
diff --git a/src/assets/theme.js b/src/assets/theme.js
index 4d52e2dcb..89689ab7f 100644
--- a/src/assets/theme.js
+++ b/src/assets/theme.js
@@ -113,29 +113,36 @@ const theme = extendTheme({
       translucentQuaternary901: 'rgba(0, 31, 34, 0.6)', // Very dark greenish-blue
     },
   },
+  breakpoints: {
+    xs: '20em', // 320px
+    xs2: '24.375em',
+    base: '36em', // 576px
+    sm: '36em', // 576px
+    md: '48em', // 768px <-- avg mobile
+    md2: '52.75em', // 768px <-- avg mobile
+    lg: '62em', // 992px
+    xl: '80em', // 1280px <-- avg desktop
+    '2xl': '96em', // 1536px, if you want to go beyond the standard sizes
+  },
   styles: {
     global: {
       'html, body': {
         color: 'gray.600',
         lineHeight: 'tall',
+        fontSize: 'md',
         width: '100%',
+        height: '100%',
       },
       a: {
         color: 'teal.500',
       },
-      // '*:hover': {
-      //   transform: 'scale(1.05)',
-      //   overflow: 'hidden',
-      //   border: '1.7px solid rgba(79, 183, 179, 0.673)',
-      //   boxShadow:
-      //     '0 0 15px rgba(79, 183, 179, 0.8), 0 0 25px rgba(79, 183, 179, 0.8), 0 0 35px rgba(79, 183, 179, 0.8), 0 0 45px rgba(79, 183, 179, 1)',
-      // },
       '*': {
         boxSizing: 'border-box',
       },
       '#root': {
         // backgroundColor: "#f5f5f5",
         minHeight: '100vh',
+        minWidth: '100%',
         display: 'flex',
         flexDirection: 'column',
       },
diff --git a/src/components/headings/header/Header.js b/src/components/headings/header/Header.js
index 8ac9e54ef..45538863f 100644
--- a/src/components/headings/header/Header.js
+++ b/src/components/headings/header/Header.js
@@ -1,5 +1,6 @@
 import { Box } from '@chakra-ui/react';
 import React, { Component } from 'react';
+import NavBar from '../navbar/NavBar';
 
 class Header extends Component {
   titles = [];
@@ -13,6 +14,7 @@ class Header extends Component {
       <header id="header" style={{ display: 'block' }}>
         <Box>
           {console.log(this.props)}
+          <NavBar />{' '}
           <div
             className="row aligner"
             style={{
diff --git a/src/components/headings/navbar/NavBar.js b/src/components/headings/navbar/NavBar.js
index 861b523c4..a1a837be3 100644
--- a/src/components/headings/navbar/NavBar.js
+++ b/src/components/headings/navbar/NavBar.js
@@ -1,13 +1,10 @@
 // NavBar.js
 import NavLinks from './NavLinks';
-// import { ColorModeButton } from './ColorModeButton';
-// import AuthControls from './AuthControls';
-// import NavLogoComponent from './NavLogoComponent';
 import { NavContainer } from '../../../containers/navbar/NavContainer';
 
 function NavBar() {
   return (
-    <NavContainer width="150vw">
+    <NavContainer width="100%">
       <NavLinks />
     </NavContainer>
   );
diff --git a/src/components/headings/navbar/NavLinks.js b/src/components/headings/navbar/NavLinks.js
index b8767f8f5..fe05dfb82 100644
--- a/src/components/headings/navbar/NavLinks.js
+++ b/src/components/headings/navbar/NavLinks.js
@@ -1,4 +1,3 @@
-// NavigationLinks.js
 import { useContext } from 'react';
 import {
   Stack,
@@ -7,6 +6,7 @@ import {
   useMediaQuery,
   Text,
   Flex,
+  useTheme,
 } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
 import { AuthContext } from '../../../context/Auth/authContext';
@@ -15,33 +15,83 @@ import NavLogoComponent from './NavLogoComponent';
 import { LoginModal } from './AuthControls';
 
 function NavLinks({ textColor }) {
-  const [isMobile] = useMediaQuery('(max-width: 768px)');
+  const theme = useTheme();
+  const [isMobile] = useMediaQuery(`(max-width: ${theme.breakpoints.md})`); // Using md breakpoint from theme
   const { isLoggedIn, logout } = useContext(AuthContext);
 
+  // Abstracting the navigation links to a reusable variable
+  const links = (
+    <>
+      <Link
+        as={RouterLink}
+        to="/home"
+        fontSize="lg"
+        fontWeight="bold"
+        color={textColor}
+        _hover={{ color: 'secondary.50', transition: 'color 0.3s' }}
+      >
+        Home
+      </Link>
+      <Link
+        as={RouterLink}
+        to="/projects"
+        fontSize="lg"
+        fontWeight="bold"
+        color={textColor}
+        _hover={{ color: 'secondary.200', transition: 'color 0.3s' }}
+      >
+        Projects
+      </Link>
+      <Link
+        as={RouterLink}
+        to="/resume"
+        fontSize="lg"
+        fontWeight="bold"
+        color={textColor}
+        _hover={{ color: 'secondary.50', transition: 'color 0.3s' }}
+      >
+        Resume
+      </Link>
+      {isLoggedIn && (
+        <Link
+          as={RouterLink}
+          to="/profile"
+          fontSize="lg"
+          fontWeight="bold"
+          color={textColor}
+          _hover={{ color: 'quaternary.400', transition: 'color 0.3s' }}
+        >
+          Profile
+        </Link>
+      )}
+      {!isLoggedIn && <LoginModal />}
+      {isLoggedIn && (
+        <Button onClick={logout} variant="outline" color={textColor}>
+          Logout
+        </Button>
+      )}
+    </>
+  );
+
   return (
     <Flex
       direction="row"
       align="center"
       justify="space-between"
       width="100%"
+      maxWidth={isMobile ? '768px' : '100%'}
       top="0"
       height="10vh"
       color={textColor}
+      id="navlinks-container"
     >
       {isMobile ? (
-        <Stack
-          spacing={4}
-          direction="row"
-          align="center"
-          justify="space-between"
-          width="100%"
-        >
-          <SideBar>
-            <Text fontSize="lg" fontWeight="bold" color="secondary.50">
-              ReedVogt.com
-            </Text>
-          </SideBar>
-        </Stack>
+        <SideBar>
+          <Text fontSize="lg" fontWeight="bold" color="secondary.50">
+            ReedVogt.com
+          </Text>
+          {links}
+        </SideBar>
       ) : (
         <>
           <Stack spacing={4} direction="row" align="center">
@@ -52,70 +102,10 @@ function NavLinks({ textColor }) {
             direction="row"
             justifyContent="right"
             align="center"
+            width="100%"
             flexGrow={'1'}
           >
-            <Link
-              as={RouterLink}
-              to="/home"
-              fontSize="lg"
-              fontWeight="bold"
-              color={textColor} // Use the textColor here
-              _hover={{ color: 'secondary.50', transition: 'color 0.3s' }}
-            >
-              Home
-            </Link>
-
-            <Link
-              as={RouterLink}
-              to="/projects"
-              fontSize="lg"
-              fontWeight="bold"
-              color={textColor} // Use the textColor here
-              _hover={{ color: 'secondary.200', transition: 'color 0.3s' }}
-            >
-              Projects
-            </Link>
-
-            <Link
-              as={RouterLink}
-              to="/resume"
-              fontSize="lg"
-              fontWeight="bold"
-              color={textColor} // Use the textColor here
-              _hover={{ color: 'secondary.50', transition: 'color 0.3s' }}
-            >
-              Resume
-            </Link>
-
-            {isLoggedIn && (
-              <Link
-                as={RouterLink}
-                to="/profile"
-                fontSize="lg"
-                fontWeight="bold"
-                color={textColor} // Use the textColor here
-                _hover={{ color: 'quaternary.400', transition: 'color 0.3s' }}
-              >
-                Profile
-              </Link>
-            )}
-
-            {!isLoggedIn && (
-              <>
-                <LoginModal />
-              </>
-            )}
-
-            {isLoggedIn && (
-              <Button
-                onClick={logout}
-                variant="outline"
-                color={textColor} // Use the textColor here
-                // colorScheme="quaternary"
-              >
-                Logout
-              </Button>
-            )}
+            {links}
           </Stack>
         </>
       )}
diff --git a/src/components/headings/navbar/NavLogoComponent.js b/src/components/headings/navbar/NavLogoComponent.js
index 0a91efdf7..78ea6c04c 100644
--- a/src/components/headings/navbar/NavLogoComponent.js
+++ b/src/components/headings/navbar/NavLogoComponent.js
@@ -4,7 +4,7 @@ import logo from '../../../assets/navlogo.png';
 
 export function NavLogoComponent({ textColor }) {
   return (
-    <Box display="flex" alignItems="center">
+    <Box display="flex" alignItems="center" id="navlogo-container">
       <RouterLink to="/home">
         <Box
           className="logo-container"
diff --git a/src/components/headings/navbar/SideBar.js b/src/components/headings/navbar/SideBar.js
index b23c5b785..f5afba293 100644
--- a/src/components/headings/navbar/SideBar.js
+++ b/src/components/headings/navbar/SideBar.js
@@ -10,27 +10,55 @@ import {
   DrawerContent,
   DrawerCloseButton,
   useDisclosure,
+  useColorModeValue,
+  Grid,
+  GridItem,
 } from '@chakra-ui/react';
 import { HamburgerIcon } from '@chakra-ui/icons';
 
 function SideBar({ children }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const sidebarBgColor = useColorModeValue('gray.100', 'gray.700');
+  const sidebarTextColor = useColorModeValue('gray.700', 'gray.200');
+  const closeButtonColor = useColorModeValue('gray.600', 'gray.300');
 
   return (
     <Box>
-      <Button onClick={onOpen}>
-        <HamburgerIcon />
+      <Button
+        onClick={onOpen}
+        bg="transparent"
+        _hover={{ bg: 'transparent', opacity: 0.8 }}
+      >
+        <HamburgerIcon boxSize={7} />
       </Button>
 
-      <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
+      <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="md">
         <DrawerOverlay>
-          <DrawerContent>
-            <DrawerCloseButton />
-            <DrawerHeader>Navigation</DrawerHeader>
+          <DrawerContent bg={sidebarBgColor}>
+            <DrawerCloseButton color={closeButtonColor} size="lg" m={2} />
 
-            <DrawerBody>{children}</DrawerBody>
+            <DrawerHeader
+              borderBottomWidth="1px"
+              fontWeight="bold"
+              fontSize="xl"
+              color={sidebarTextColor}
+              pb={4}
+              mb={4}
+            >
+              Navigation
+            </DrawerHeader>
 
-            <DrawerFooter>
+            <DrawerBody>
+              <Grid templateRows="repeat(auto-fill, minmax(60px, 1fr))" gap={4}>
+                {React.Children.map(children, (child, index) => (
+                  <GridItem key={index} p={3}>
+                    {child}
+                  </GridItem>
+                ))}
+              </Grid>
+            </DrawerBody>
+
+            <DrawerFooter borderTopWidth="1px">
               <Button variant="outline" mr={3} onClick={onClose}>
                 Cancel
               </Button>
diff --git a/src/components/paragraph/ProfileDescription.js b/src/components/paragraph/ProfileDescription.js
index 56e57b16f..095b80369 100644
--- a/src/components/paragraph/ProfileDescription.js
+++ b/src/components/paragraph/ProfileDescription.js
@@ -1,52 +1,90 @@
-import { Box, Heading, Text, Link, Icon } from '@chakra-ui/react';
+import { Box, Link, Icon, useTheme } from '@chakra-ui/react';
 import { BsLinkedin } from 'react-icons/bs';
+import ReusableParagraph from '../../pages/utils/ReusableParagraph';
 
 const ProfileDescription = () => {
-  // This function redirects to LinkedIn
+  const { breakpoints } = useTheme();
+
   const redirectToLinkedIn = () => {
     window.location.href = 'https://www.linkedin.com/in/yourLinkedInProfile/';
   };
 
+  const commonStyles = {
+    fontSize: {
+      base: parseFloat(breakpoints.xs) * 1.4 + 'px',
+      sm: parseFloat(breakpoints.sm) * 0.7 + 'px',
+      md: parseFloat(breakpoints.md) * 0.6 + 'px',
+      lg: parseFloat(breakpoints.sm) * 0.8 + 'px',
+    },
+  };
+
   return (
     <Box
       id="profile-description"
-      width="90%"
       mt={8}
       mb={8}
       height="50%"
-      flexGrow={1}
-      zIndex={'100'}
-      textAlign={'center'}
-      justifyContent={'center'}
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      zIndex="100"
+      textAlign="center"
       lineHeight="1.2"
+      mx="auto" // Center the box
     >
-      <Heading as="h2" size="xl" textAlign={'center'}>
-        <Text fontStyle="italic" textAlign={'center'}>
-          👋 Hey there, adventurous internet traveler! <br />
-          Welcome to my little corner of the digital universe. I&apos;m Reed, a
-          tech enthusiast, code wizard, and an avid lover of all things web.
-          Whether you&apos;re here to peek at my latest projects or just
-          stumbled upon this space by accident, I&apos;m glad you&apos;re here.{' '}
-          <br />
-          Grab a virtual coffee ☕, scroll around, and{' '}
-          <Link
-            onClick={redirectToLinkedIn}
-            color="teal.500"
-            fontWeight="bold"
-            fontSize="1.2em"
-            textDecoration="none"
-            _hover={{
-              color: 'blue.500',
-              transform: 'scale(1.2)',
-              transition: 'all 0.3s ease',
-            }}
-          >
-            let&apos;s connect <Icon as={BsLinkedin} boxSize={8} ml={2} p={1} />{' '}
-          </Link>
-          . After all, the internet&apos;s all about bringing amazing people
-          (like you!) together.
-        </Text>
-      </Heading>
+      {/* <Heading
+        as="h2"
+        flexGrow={1}
+        fontSize={['1.2em', '1.2em', '1.8em', '2em', '2.5em']}
+        textAlign="center"
+      > */}
+      <ReusableParagraph
+        style={{
+          ...commonStyles,
+          color: 'white',
+          textAlign: 'center',
+          lineHeight: {
+            base: parseFloat(breakpoints.xs) * 1.3 + 'px',
+            sm: parseFloat(breakpoints.sm) * 0.8 + 'px',
+            md: parseFloat(breakpoints.md) * 0.8 + 'px',
+            lg: parseFloat(breakpoints.sm) * 0.9 + 'px',
+          },
+          fontStyle: 'italic',
+          mt: 6,
+        }}
+      >
+        👋 Hey there, adventurous internet traveler! <br />
+        Welcome to my little corner of the digital universe. I&apos;m Reed, a
+        tech enthusiast, code wizard, and an avid lover of all things web.
+        Whether you&apos;re here to peek at my latest projects or just stumbled
+        upon this space by accident, I&apos;m glad you&apos;re here.
+        <br /> Grab a virtual coffee ☕, scroll around, and{' '}
+        <Link
+          onClick={redirectToLinkedIn}
+          color="teal.500"
+          fontWeight="bold"
+          {...commonStyles}
+          textDecoration="none"
+          _hover={{
+            color: 'blue.500',
+            transform: 'scale(1.2)',
+            transition: 'all 0.3s ease',
+          }}
+        >
+          let&apos;s connect{''}
+          <Icon
+            as={BsLinkedin}
+            boxSize="1.2em" // Adjusted size to match text
+            verticalAlign="middle"
+            ml={2}
+            p={1}
+          />{' '}
+        </Link>
+        . After all, the internet&apos;s all about bringing amazing people (like
+        you!) together.
+      </ReusableParagraph>
+      {/* </Heading> */}
     </Box>
   );
 };
diff --git a/src/components/projects/ProjectsComponent.css b/src/components/projects/ProjectsComponent.css
index 1a6a88ad6..627366e1a 100644
--- a/src/components/projects/ProjectsComponent.css
+++ b/src/components/projects/ProjectsComponent.css
@@ -21,8 +21,37 @@
   transform-origin: center center; /* Standard property */
 }
 
+.wrap {
+  width: 80vw;
+  height: 20vh;
+  padding: 0;
+  overflow: hidden;
+}
+
+.scaled-frame {
+  width: 900px;
+  height: 1200px;
+  border: 0;
+  zoom: 0.3;
+
+  /* Transformation properties */
+  -moz-transform: scale(0.3);
+  -moz-transform-origin: center center; /* For Firefox 3 */
+  -o-transform: scale(0.3);
+  -o-transform-origin: center center; /* For older Opera versions */
+  -webkit-transform: scale(0.3);
+  -webkit-transform-origin: center center; /* For older Webkit browsers */
+  transform-origin: center center; /* Standard property */
+}
+
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   #scaled-frame {
     zoom: 1;
   }
 }
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .scaled-frame {
+    zoom: 1;
+  }
+}
diff --git a/src/components/softwareSkills/AboutMe.js b/src/components/softwareSkills/AboutMe.js
index 51dbda0fc..d4bd1b541 100644
--- a/src/components/softwareSkills/AboutMe.js
+++ b/src/components/softwareSkills/AboutMe.js
@@ -1,3 +1,124 @@
+import { Box, useTheme } from '@chakra-ui/react';
+import ReusableParagraph from '../../pages/utils/ReusableParagraph';
+import HeaderCreator from '../../pages/utils/HeaderCreator';
+
+const AboutMe = () => {
+  const theme = useTheme(); // Hook to get theme properties
+
+  return (
+    <Box
+      width="100%" // Explicitly set the width to 100%
+      height={'100%'}
+      flexGrow={1}
+      display="flex"
+      flexDirection="column"
+      alignItems={'center'}
+      justifyContent={'center'}
+      id="aboout-me"
+    >
+      {/* <ReusableHeader headerText="About Me" color="white" /> */}
+      <Box
+        display={'flex'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        w={'50%'}
+        ml={'auto'}
+        mr={'auto'}
+      >
+        {HeaderCreator('about')} {/* Modified this line */}
+      </Box>
+      <ReusableParagraph
+        id="aboout-me-paragraph"
+        style={{
+          fontSize: {
+            base: parseFloat(theme.breakpoints.xs) * 1.2 + 'px',
+            sm: parseFloat(theme.breakpoints.sm) * 0.8 + 'px',
+            md: parseFloat(theme.breakpoints.md) * 0.55 + 'px',
+            lg: parseFloat(theme.breakpoints.sm) * 0.75 + 'px',
+          },
+          color: 'white',
+          textAlign: 'left',
+          lineHeight: {
+            base: parseFloat(theme.breakpoints.xs) * 1.4 + 'px',
+            sm: parseFloat(theme.breakpoints.sm) * 1.3 + 'px',
+            md: parseFloat(theme.breakpoints.md) * 1.25 + 'px',
+            lg: parseFloat(theme.breakpoints.sm) * 1.6 + 'px',
+          },
+          mt: 6,
+          fontStyle: 'italic',
+        }}
+      >
+        I&apos;m Reed Vogt, a Full Stack Web Developer from Seattle, WA. With a
+        passion for delivering creative and user-centric software solutions, my
+        expertise spans JavaScript, React.js, Node.js, and AWS. My hobbies
+        include anime and trading card games, with a special mention for a
+        YuGiOh TCG deck builder that I created.
+      </ReusableParagraph>
+    </Box>
+  );
+};
+
+export default AboutMe;
+
+// import { GridItem, Box, useTheme } from '@chakra-ui/react';
+// import ReusableHeader from '../../pages/utils/ReusableHeader';
+// import ReusableParagraph from '../../pages/utils/ReusableParagraph';
+
+// const AboutMe = () => {
+//   const theme = useTheme(); // Hook to get theme properties
+//   return (
+//     <GridItem
+//       id="resume-about-me"
+//       display="flex"
+//       justifyContent="center"
+//       alignItems="center"
+//       backgroundColor="transparent"
+//       p={{ base: 6, lg: 12 }}
+//       m={{ base: 3, lg: 6 }}
+//     >
+//       <Box
+//         width="100%"
+//         flexGrow={1}
+//         display="flex"
+//         flexDirection="column"
+//         alignItems={'center'}
+//         justifyContent={'center'}
+//       >
+//         <ReusableHeader headerText="About Me" color="white" />
+
+//         <ReusableParagraph
+//           style={{
+//             fontSize: {
+//               // base: theme.breakpoints.xs,
+//               // sm: theme.breakpoints.sm,
+//               // md: theme.breakpoints.md,
+//               // lg: theme.breakpoints.sm,
+//             },
+//             color: 'white',
+//             textAlign: 'left',
+//             lineHeight: {
+//               // base: theme.breakpoints.xs,
+//               // sm: theme.breakpoints.sm,
+//               // md: theme.breakpoints.md,
+//               // lg: theme.breakpoints.lg,
+//             },
+//             mt: 6,
+//             fontStyle: 'italic',
+//           }}
+//         >
+//           I&apos;m Reed Vogt, a Full Stack Web Developer from Seattle, WA. With
+//           a passion for delivering creative and user-centric software solutions,
+//           my expertise spans JavaScript, React.js, Node.js, and AWS. My hobbies
+//           include anime and trading card games, with a special mention for a
+//           YuGiOh TCG deck builder that I created.
+//         </ReusableParagraph>
+//       </Box>
+//     </GridItem>
+//   );
+// };
+
+// export default AboutMe;
+
 // import { GridItem, Box, Heading, Text } from '@chakra-ui/react';
 // import React from 'react';
 
@@ -48,44 +169,3 @@
 // );
 
 // export default AboutMe;
-import { GridItem, Box, Heading, Text } from '@chakra-ui/react';
-import React from 'react';
-
-const AboutMe = () => (
-  <GridItem
-    id="resume-about-me"
-    display="flex"
-    justifyContent="center"
-    alignItems="center"
-    backgroundColor="transparent"
-    p={{ base: 6, lg: 12 }} // Padding increased by 1.5
-    m={{ base: 3, lg: 6 }} // Margin increased by 1.5
-  >
-    <Box w="full">
-      <Heading
-        as="h4"
-        size="lg"
-        color={'white'}
-        textAlign={{ base: 'left', lg: 'center' }} // Centered heading on large screens
-      >
-        About Me
-      </Heading>
-      <Text
-        fontSize={{ base: 'sm', md: 'md', lg: '3xl' }} // Increased font size on larger screens
-        color={'white'}
-        textAlign={'left'}
-        lineHeight={{ base: '7', md: '8', lg: '9' }}
-        mt={6} // Added margin top for separation and increased by 1.5
-        fontStyle="italic" // Italicized text
-      >
-        I&apos;m Reed Vogt, a Full Stack Web Developer from Seattle, WA. With a
-        passion for delivering creative and user-centric software solutions, my
-        expertise spans JavaScript, React.js, Node.js, and AWS. My hobbies
-        include anime and trading card games, with a special mention for a
-        YuGiOh TCG deck builder that I created.
-      </Text>
-    </Box>
-  </GridItem>
-);
-
-export default AboutMe;
diff --git a/src/components/softwareSkills/TechSkills.js b/src/components/softwareSkills/TechSkills.js
index 4b658889a..05a3997ce 100644
--- a/src/components/softwareSkills/TechSkills.js
+++ b/src/components/softwareSkills/TechSkills.js
@@ -1,11 +1,11 @@
-import { Grid, GridItem, Box } from '@chakra-ui/react';
+import { Grid, Box } from '@chakra-ui/react';
 import React from 'react';
 import TechIcon from './TechIcon';
-import { useResumeContext } from '../../context/ResumeContext'; // <-- Already imported
+import { useResumeContext } from '../../context/ResumeContext';
 import HeaderCreator from '../../pages/utils/HeaderCreator';
 
 const TechSkills = () => {
-  const { homeIcons, resumeIcons } = useResumeContext(); // <-- Using the hook
+  const { homeIcons, resumeIcons } = useResumeContext();
 
   const currentURL = `${window.location.href}`;
   const resumeURL = `${window.location.origin}/resume`;
@@ -18,9 +18,24 @@ const TechSkills = () => {
   const isResumePage = currentURL === resumeURL;
 
   return (
-    <GridItem className="techskills-griditem">
-      <Box display={'flex'} justifyContent={'center'} alignItems={'center'}>
-        {HeaderCreator('techSkills')}
+    <Box
+      width="100%" // Explicitly set the width to 100%
+      height="100%"
+      display={'flex'}
+      justifyContent={'center'}
+      flexGrow={1}
+      flexDirection="column"
+      // alignItems={'center'}
+    >
+      <Box
+        display={'flex'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        w={'50%'}
+        ml={'auto'}
+        mr={'auto'}
+      >
+        {HeaderCreator('techSkills')} {/* Modified this line */}
       </Box>
       <Grid
         className="techskills-griditem-grid"
@@ -32,7 +47,7 @@ const TechSkills = () => {
           <TechIcon key={index} icon={Icon} />
         ))}
       </Grid>
-    </GridItem>
+    </Box>
   );
 };
 
diff --git a/src/components/softwareSkills/TechStack.js b/src/components/softwareSkills/TechStack.js
index 0c4b74632..170b17200 100644
--- a/src/components/softwareSkills/TechStack.js
+++ b/src/components/softwareSkills/TechStack.js
@@ -1,3 +1,26 @@
+import { Grid, GridItem } from '@chakra-ui/react';
+import AboutMe from './AboutMe';
+import TechSkills from './TechSkills';
+
+function Techstack() {
+  return (
+    <Grid
+      templateColumns={{ base: '1fr', md: '1fr 1fr' }}
+      gap={4}
+      className="techstack-grid"
+    >
+      <GridItem>
+        <AboutMe />
+      </GridItem>
+      <GridItem>
+        <TechSkills />
+      </GridItem>
+    </Grid>
+  );
+}
+
+export default Techstack;
+
 {
   /* Additional skills for the skills for the potential resume/skills/profile section */
 }
@@ -86,23 +109,3 @@
             </Flex>
           </GridItem> */
 }
-
-import { Grid, GridItem } from '@chakra-ui/react';
-import AboutMe from './AboutMe';
-import TechSkills from './TechSkills';
-
-function Techstack() {
-  return (
-    <Grid
-      templateColumns={{ base: '1fr', md: '1fr 1fr' }}
-      gap={4}
-      className="techstack-grid"
-    >
-      <AboutMe />
-      <TechSkills />
-      <GridItem></GridItem>
-    </Grid>
-  );
-}
-
-export default Techstack;
diff --git a/src/containers/Main.js b/src/containers/Main.js
index 504ad3829..25c02f6c6 100644
--- a/src/containers/Main.js
+++ b/src/containers/Main.js
@@ -11,8 +11,9 @@ import Auth from '../components/Auth/auth';
 import theme from '../assets/theme';
 import ProjectsPage from '../pages/projects/ProjectsPage';
 import HomePage from '../pages/home/HomePage';
-import NavBar from '../components/headings/navbar/NavBar';
+// import NavBar from '../components/headings/navbar/NavBar';
 import { PageContext } from '../context/PageContext';
+import Header from '../components/headings/header/Header';
 
 export default function Main({ onLogin }) {
   const [isLoading, setIsLoading] = useState(true);
@@ -92,7 +93,7 @@ export default function Main({ onLogin }) {
         <Splash />
       ) : (
         <>
-          <NavBar />
+          <Header />
           {routing}
         </>
       )}
diff --git a/src/containers/navbar/NavContainer.js b/src/containers/navbar/NavContainer.js
index 2ca09fc36..9341b3693 100644
--- a/src/containers/navbar/NavContainer.js
+++ b/src/containers/navbar/NavContainer.js
@@ -41,10 +41,10 @@ export function NavContainer({ children }) {
       fontSize="1.2rem"
       alignItems={'center'}
       color={textColor}
-      backgroundColor={`rgba(0, 31, 34, ${navOpacity})`} // Adjust if you don't want the background to change
+      backgroundColor={`rgba(0, 31, 34, ${navOpacity})`}
       transition="all 0.3s ease-out 0s"
       position="sticky"
-      minWidth={'100vw'}
+      // width="100%"
       height="10vh"
       top="0"
       zIndex="500"
diff --git a/src/containers/profile/techstack-section/TechStackSection.js b/src/containers/profile/techstack-section/TechStackSection.js
index aeb98b646..5fbd64f68 100644
--- a/src/containers/profile/techstack-section/TechStackSection.js
+++ b/src/containers/profile/techstack-section/TechStackSection.js
@@ -1,17 +1,46 @@
-import { Box, Flex } from '@chakra-ui/react';
+// import { Box, Flex } from '@chakra-ui/react';
+// import Techstack from '../../../components/softwareSkills/TechStack.js';
+// const TechStackSection = () => (
+//   <Flex
+//     width="100%"
+//     flexDirection={{ base: 'column-reverse', md: 'column' }}
+//     justifyContent="center"
+//     alignItems="center"
+//     className="techstack-section-container"
+//   >
+//     <Box mt={8} height="50%" flexGrow={1}>
+//       <Techstack />
+//     </Box>
+//   </Flex>
+// );
+
+// export default TechStackSection;
+import { Box, Flex, useTheme } from '@chakra-ui/react';
 import Techstack from '../../../components/softwareSkills/TechStack.js';
-const TechStackSection = () => (
-  <Flex
-    width="100%"
-    flexDirection={{ base: 'column-reverse', md: 'column' }}
-    justifyContent="center"
-    alignItems="center"
-    className="techstack-section-container"
-  >
-    <Box width="90%" mt={8} height="50%" flexGrow={1}>
-      <Techstack />
-    </Box>
-  </Flex>
-);
+
+const TechStackSection = () => {
+  const theme = useTheme();
+
+  return (
+    <Flex
+      width="100%"
+      flexDirection={{ base: 'column-reverse', md: 'column' }}
+      justifyContent="center"
+      alignItems="center"
+      className="techstack-section-container"
+    >
+      <Box
+        mt={8}
+        height="50%"
+        flexGrow={1}
+        borderWidth={{ base: '0px', [theme.breakpoints.md]: '2px' }}
+        borderRadius="md"
+        p={{ base: '0', [theme.breakpoints.md]: 4 }}
+      >
+        <Techstack />
+      </Box>
+    </Flex>
+  );
+};
 
 export default TechStackSection;
diff --git a/src/containers/resume/Skills.js b/src/containers/resume/Skills.js
index 150ad8398..c1398081c 100644
--- a/src/containers/resume/Skills.js
+++ b/src/containers/resume/Skills.js
@@ -10,7 +10,6 @@ const Skills = () => {
       zIndex={'100'}
       className="resume-skills-vstack"
     >
-      {/* <Heading size="lg">Skills</Heading> */}
       <Flex
         width="100%"
         flexDirection={{ base: 'column-reverse', md: 'column' }}
diff --git a/src/containers/skills/Skills.js b/src/containers/skills/Skills.js
index 13bbf8381..4da9afb28 100644
--- a/src/containers/skills/Skills.js
+++ b/src/containers/skills/Skills.js
@@ -1,28 +1,28 @@
-import React, { Component } from 'react';
-import { Center, Grid, GridItem, Heading } from '@chakra-ui/react';
-import Toolstack from '../../components/softwareSkills/ToolStack';
-import Techstack from '../../components/softwareSkills/TechStack';
+// import React, { Component } from 'react';
+// import { Center, Grid, GridItem, Heading } from '@chakra-ui/react';
+// import Toolstack from '../../components/softwareSkills/ToolStack';
+// import Techstack from '../../components/softwareSkills/TechStack';
 
-class Skills extends Component {
-  render() {
-    return (
-      <>
-        <Center>
-          <Heading as="h2" size="lg" color={'white'}>
-            Tech Skills
-          </Heading>
-        </Center>
-        <Grid>
-          <GridItem>
-            <Techstack />
-          </GridItem>
-          <GridItem>
-            <Toolstack />
-          </GridItem>
-        </Grid>
-      </>
-    );
-  }
-}
+// class Skills extends Component {
+//   render() {
+//     return (
+//       <>
+//         <Center>
+//           <Heading as="h2" size="lg" color={'white'}>
+//             Tech Skills
+//           </Heading>
+//         </Center>
+//         <Grid>
+//           <GridItem>
+//             <Techstack />
+//           </GridItem>
+//           <GridItem>
+//             <Toolstack />
+//           </GridItem>
+//         </Grid>
+//       </>
+//     );
+//   }
+// }
 
-export default Skills;
+// export default Skills;
diff --git a/src/pages/home/HomeComponent.js b/src/pages/home/HomeComponent.js
index 118491945..e9688210b 100644
--- a/src/pages/home/HomeComponent.js
+++ b/src/pages/home/HomeComponent.js
@@ -153,7 +153,7 @@ const HomeComponent = () => {
       alignItems="center"
       justifyContent="center"
       h={'100vh'}
-      w={'100vw'}
+      // w={'100vw'}
       flexDirection="column"
       bg="customColors.translucentQuaternary900"
     >
@@ -163,7 +163,7 @@ const HomeComponent = () => {
             position="absolute"
             top="0"
             left="0"
-            width="100%"
+            // width="100%"
             height="100%"
             bg="customColors.translucentQuaternary900"
             zIndex="-1"
diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
index 3e261f3fe..e8a8d333f 100644
--- a/src/pages/home/HomePage.js
+++ b/src/pages/home/HomePage.js
@@ -3,13 +3,19 @@ import React, { Component } from 'react';
 import { Box } from '@chakra-ui/react';
 import './Home.css'; // assuming the CSS file is in the same directory
 import MainContent from './MainContent';
-import Header from '../../components/headings/header/Header';
+// import Header from '../../components/headings/header/Header';
 
 class HomePage extends Component {
   render() {
     return (
-      <Box w={'100vw'} as={'main'} className="home-container" py={4}>
-        <Header />
+      <Box
+        // w={'100vw'}
+        w={'100%'}
+        as={'main'}
+        className="home-container"
+        py={4}
+      >
+        {/* <Header /> */}
         <MainContent />
       </Box>
     );
diff --git a/src/pages/home/MainContent.js b/src/pages/home/MainContent.js
index ac04a924a..1cae039e4 100644
--- a/src/pages/home/MainContent.js
+++ b/src/pages/home/MainContent.js
@@ -15,10 +15,10 @@ const MainContent = () => (
       {/* Added the id here */}
       <ProfileHomePageSection minHeight="100vh" />
     </Box>
-    <Box mb={5}>
+    <Box mb={5} id="resumeSection">
       <ResumeHomePageSection minHeight="120vh" />
     </Box>
-    <Box>
+    <Box id="projectsSection">
       <ProjectsHomePageSection minHeight="100vh" />
     </Box>
   </Flex>
diff --git a/src/pages/profile/ProfileHomePageSection.js b/src/pages/profile/ProfileHomePageSection.js
index 990573893..2a5ed0ce3 100644
--- a/src/pages/profile/ProfileHomePageSection.js
+++ b/src/pages/profile/ProfileHomePageSection.js
@@ -1,31 +1,34 @@
-// ProfileHomePageSection.js
 import React from 'react';
 import ProfileDescription from '../../components/paragraph/ProfileDescription';
 import TechStackSection from '../../containers/profile/techstack-section/TechStackSection';
 import SectionContainer from '../utils/SectionContainer';
-import HeaderCreator from '../utils/HeaderCreator';
-import { Box, Divider } from '@chakra-ui/react';
+import ReusableHeaderWithSubHeader from '../utils/ReusableHeaderWithSubHeader';
+import { Box, VStack, useTheme } from '@chakra-ui/react';
 
 const ProfileHomePageSection = () => {
+  const theme = useTheme();
+
   return (
-    <SectionContainer>
-      {HeaderCreator('profile')}
+    <SectionContainer id={'profile-home-page'}>
       <Box
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        flexDirection="column"
-        // maxW={{ base: '90%' }}
+        borderWidth={{ base: '0px', [theme.breakpoints.md]: '2px' }}
+        borderRadius="md"
+        p={{ base: '0', [theme.breakpoints.md]: 4 }}
       >
-        <ProfileDescription />
-        <Divider
-          borderColor={'quaternary.50'}
-          maxW={{ base: '90%' }}
-          borderBottomWidth={'3px'}
-        />
-      </Box>
-      <Box>
-        <TechStackSection />
+        <VStack
+          id={'profile-home-page-vstack'}
+          spacing={8}
+          align="stretch"
+          width="100%"
+          alignItems={'center'}
+          justifyContent={'center'}
+        >
+          <ReusableHeaderWithSubHeader
+            headerText="Profile"
+            subHeaderComponent={ProfileDescription}
+          />
+          <TechStackSection />
+        </VStack>
       </Box>
     </SectionContainer>
   );
diff --git a/src/pages/projects/ProjectsHomePageSection.js b/src/pages/projects/ProjectsHomePageSection.js
index 5f413921d..5468811fa 100644
--- a/src/pages/projects/ProjectsHomePageSection.js
+++ b/src/pages/projects/ProjectsHomePageSection.js
@@ -37,7 +37,7 @@ const ProjectsHomePageSection = (props) => {
   }, []);
 
   return (
-    <SectionContainer>
+    <SectionContainer id="projects-home-page-section">
       {HeaderCreator('projects')}
       {loading ? (
         <CenteredSpinner />
diff --git a/src/pages/projects/ProjectsPage.js b/src/pages/projects/ProjectsPage.js
index ead75e8fd..19c8dba98 100644
--- a/src/pages/projects/ProjectsPage.js
+++ b/src/pages/projects/ProjectsPage.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import ProjectContainer from '../../containers/projects/ProjectContainer';
-import Header from '../../components/headings/header/Header';
 
 const ProjectsPage = () => {
   return (
     <>
-      <Header />
       <ProjectContainer />
     </>
   );
diff --git a/src/pages/projects/sub-components/Carousel.jsx b/src/pages/projects/sub-components/Carousel.jsx
new file mode 100644
index 000000000..6a8baf154
--- /dev/null
+++ b/src/pages/projects/sub-components/Carousel.jsx
@@ -0,0 +1,82 @@
+import React, { useRef, useState } from 'react';
+import { Box, ScaleFade } from '@chakra-ui/react';
+import ProjectHomeItem from './ProjectHomeItem';
+import CarouselControls from './CarouselControls';
+
+const Carousel = ({ items, onDetails, size }) => {
+  // Initialize currentIndex with 2
+  const [currentIndex, setCurrentIndex] = useState(2);
+  const [itemHeight, setItemHeight] = useState(0);
+  const middleRef = useRef(null);
+
+  const prevSlide = () => {
+    const lastIndex = items.length - 1;
+    setCurrentIndex(currentIndex === 0 ? lastIndex : currentIndex - 1);
+  };
+
+  const nextSlide = () => {
+    const lastIndex = items.length - 1;
+    setCurrentIndex(currentIndex === lastIndex ? 0 : currentIndex + 1);
+  };
+
+  const computeTransform = (index) => {
+    if (index === currentIndex) return 'translateX(-50%)';
+    if (size === 'lg') {
+      if (index === currentIndex - 1) return 'translateX(-100%) scale(0.8)';
+      if (index === currentIndex + 1) return 'translateX(0%) scale(0.8)';
+    }
+    return 'translateX(-200%)';
+  };
+
+  return (
+    <Box
+      id="projectshomelist-carousel-container"
+      style={{ height: itemHeight, minHeight: '45vh' }}
+      position="relative"
+      width="100%"
+      height="100%"
+      borderRadius="lg"
+      perspective="1000px"
+    >
+      {items.map((item, index) => (
+        <ScaleFade initialScale={0.9} in={true} key={index}>
+          <Box
+            ref={index === 2 ? middleRef : null}
+            position="absolute"
+            top="0"
+            left="50%"
+            height="100%"
+            transition="transform 0.6s"
+            display={
+              index === currentIndex ||
+              (size === 'lg' &&
+                (index === currentIndex - 1 || index === currentIndex + 1))
+                ? 'block'
+                : 'none'
+            }
+            zIndex={index === currentIndex ? '1' : '0'}
+            transform={computeTransform(index)}
+            _after={{
+              content: '""',
+              display: 'block',
+              mt: '10px',
+              bottom: '-10px',
+              left: '10%',
+              right: '10%',
+              height: '8px',
+              borderRadius: '50%',
+              background:
+                'linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,0.3) 75%, rgba(0,0,0,0) 100%)',
+            }}
+            boxShadow="-10px 10px 15px rgba(0, 0, 0, 0.2), 10px -10px 15px rgba(0, 0, 0, 0.2)"
+          >
+            <ProjectHomeItem project={item} onDetails={onDetails} />
+          </Box>
+        </ScaleFade>
+      ))}
+      <CarouselControls prevSlide={prevSlide} nextSlide={nextSlide} />
+    </Box>
+  );
+};
+
+export default Carousel;
diff --git a/src/pages/projects/sub-components/CarouselControls.jsx b/src/pages/projects/sub-components/CarouselControls.jsx
new file mode 100644
index 000000000..898f98ebc
--- /dev/null
+++ b/src/pages/projects/sub-components/CarouselControls.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { HStack, Button, useColorModeValue } from '@chakra-ui/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+
+const CarouselControls = ({ prevSlide, nextSlide }) => {
+  const buttonStyles = {
+    bg: useColorModeValue(
+      'translucentQuaternary300',
+      'translucentQuaternary700',
+    ),
+    _hover: {
+      bg: useColorModeValue(
+        'translucentQuaternary500',
+        'translucentQuaternary900',
+      ),
+      opacity: 1,
+      transform: 'scale(1.05)',
+      boxShadow: 'md',
+    },
+    _active: {
+      bg: 'quaternary.50',
+    },
+    transition: 'all 0.3s',
+    color: 'quaternary.50',
+    fontWeight: 'bold',
+    fontSize: 'lg',
+    opacity: 1,
+  };
+
+  return (
+    <HStack
+      position="absolute"
+      top="65%"
+      left="50%"
+      transform="translateX(-50%)"
+      zIndex="2"
+      spacing={8}
+      width="50%"
+      px={4}
+      justifyContent="space-between"
+    >
+      <Button
+        {...buttonStyles}
+        onClick={prevSlide}
+        leftIcon={<ChevronLeftIcon />}
+      >
+        Prev
+      </Button>
+      <Button
+        {...buttonStyles}
+        onClick={nextSlide}
+        rightIcon={<ChevronRightIcon />}
+      >
+        Next
+      </Button>
+    </HStack>
+  );
+};
+
+export default CarouselControls;
diff --git a/src/pages/projects/sub-components/ProjectHomeItem.js b/src/pages/projects/sub-components/ProjectHomeItem.js
index 08ee5b775..cffd85f70 100644
--- a/src/pages/projects/sub-components/ProjectHomeItem.js
+++ b/src/pages/projects/sub-components/ProjectHomeItem.js
@@ -11,51 +11,54 @@ import { motion } from 'framer-motion';
 
 const MotionBox = motion(Box);
 
-const ProjectHomeItem = ({ project, onDetails }) => (
-  <MotionBox
-    p="6"
-    d="flex"
-    flexDirection="column"
-    height="100%"
-    className="projects-home-item"
-    bg={useColorModeValue('rgba(17, 16, 16, 0.582)', 'rgba(12, 8, 24, 0.904)')}
-    boxShadow="lg"
-    rounded="lg"
-    overflow="hidden"
-    whileHover={{ scale: 1.05 }}
-    transition={{ duration: 0.5 }}
-  >
-    <AspectRatio ratio={16 / 9} overflow="hidden">
-      <Image
-        title="project_website"
-        id="scaled-frame"
-        src={project.images[0] + '.png'}
-        alt="project_website"
-        // allowFullScreen
-      />
-    </AspectRatio>
-    <Box flex="1" overflowY="auto">
-      <Text fontWeight="bold" fontSize="xl" mb="2" color="tertiary.600">
-        {project.title}
-      </Text>
-      <Text fontSize="md" color="secondary.200" mb="4">
-        {project.description}
-      </Text>
-    </Box>
-    <Flex mt="auto" justifyContent="space-between">
-      <Text fontWeight="bold" color="tertiary.600">
-        {project.startDate}
-      </Text>
-      <Button
-        onClick={() => onDetails(project)}
-        colorScheme="tertiary"
-        variant="outline"
-        _hover={{ bg: 'quaternary.600', color: 'white' }}
-      >
-        Details
-      </Button>
-    </Flex>
-  </MotionBox>
-);
+const ProjectHomeItem = ({ project, onDetails }) => {
+  return (
+    <MotionBox
+      p="6"
+      d="flex"
+      flexDirection="column"
+      // height="100%"
+      bg={useColorModeValue(
+        'rgba(17, 16, 16, 0.582)',
+        'rgba(12, 8, 24, 0.904)',
+      )}
+      boxShadow="2xl"
+      rounded="lg"
+      // overflow="hidden"
+      whileHover={{ scale: 1.05 }}
+      transition={{ duration: 0.5 }}
+    >
+      <AspectRatio ratio={16 / 9}>
+        <Image
+          title="project_website"
+          src={project.images[0] + '.png'}
+          alt="project_website"
+          objectFit="cover"
+        />
+      </AspectRatio>
+      <Box flex="1" overflowY="auto" height={'100%'}>
+        <Text fontWeight="bold" fontSize="xl" mb="2" color="tertiary.600">
+          {project.title}
+        </Text>
+        <Text fontSize="md" color="secondary.200" mb="4">
+          {project.description}
+        </Text>
+        <Flex mt="auto" justifyContent="space-between" width="100%">
+          <Text fontWeight="bold" color="tertiary.600">
+            {project.startDate}
+          </Text>
+          <Button
+            onClick={() => onDetails(project)}
+            colorScheme="tertiary"
+            variant="outline"
+            _hover={{ bg: 'quaternary.600', color: 'white' }}
+          >
+            Details
+          </Button>
+        </Flex>
+      </Box>
+    </MotionBox>
+  );
+};
 
 export default ProjectHomeItem;
diff --git a/src/pages/projects/sub-components/ProjectHomeList.js b/src/pages/projects/sub-components/ProjectHomeList.js
index 9484c7dda..340583ad3 100644
--- a/src/pages/projects/sub-components/ProjectHomeList.js
+++ b/src/pages/projects/sub-components/ProjectHomeList.js
@@ -1,36 +1,38 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Box, Container, Grid, GridItem } from '@chakra-ui/react';
-import ProjectHomeItem from './ProjectHomeItem';
+import { Container, useMediaQuery, useTheme } from '@chakra-ui/react';
+import Carousel from './Carousel';
 
 const ProjectHomeList = ({ projects, onDetails }) => {
   const [itemHeight, setItemHeight] = useState(0);
   const middleRef = useRef(null);
-
+  const { breakpoints } = useTheme();
+  const isSm = useMediaQuery(`(max-width: ${breakpoints.md})`)[0];
+  const isMd = useMediaQuery(
+    `(min-width: ${breakpoints.md}) and (max-width: ${breakpoints.lg})`,
+  )[0];
+  const isLg = useMediaQuery(`(min-width: ${breakpoints.lg})`)[0];
   useEffect(() => {
     if (middleRef.current) {
       setItemHeight(middleRef.current.offsetHeight);
     }
   }, [middleRef]);
 
+  console.log('itemHeight', itemHeight);
   return (
-    <Container maxW="container.lg" id="projects-home-list">
-      <Grid
-        templateColumns={{
-          sm: 'repeat(auto-fit, minmax(200px, 1fr))',
-          md: 'repeat(auto-fit, minmax(240px, 1fr))',
-          lg: 'repeat(auto-fit, minmax(300px, 1fr))',
-        }}
-        gap={6}
-        className="project-home-list"
-      >
-        {projects.slice(0, 3).map((project, index) => (
-          <GridItem key={index} ref={index === 2 ? middleRef : null}>
-            <Box style={{ height: itemHeight, minHeight: '45vh' }}>
-              <ProjectHomeItem project={project} onDetails={onDetails} />
-            </Box>{' '}
-          </GridItem>
-        ))}
-      </Grid>
+    <Container
+      maxW="container.lg"
+      id="projects-home-list-container"
+      height={'100%'}
+      // width="100%"
+      py={4}
+    >
+      <Carousel
+        id={'projecthomelist-carousel'}
+        items={projects}
+        onDetails={onDetails}
+        isLg={isLg}
+        size={isSm ? 'sm' : isMd ? 'md' : 'lg'}
+      />
     </Container>
   );
 };
diff --git a/src/pages/projects/sub-components/ProjectHomePageSection.css b/src/pages/projects/sub-components/ProjectHomePageSection.css
new file mode 100644
index 000000000..a6aa44f4e
--- /dev/null
+++ b/src/pages/projects/sub-components/ProjectHomePageSection.css
@@ -0,0 +1,4 @@
+.project-home-item-image {
+  max-width: 100%; /* Ensure image doesn't overflow its container */
+  display: block;  /* Remove any margins */
+}
diff --git a/src/pages/projects/sub-components/ProjectsHomeContent.js b/src/pages/projects/sub-components/ProjectsHomeContent.js
index 12e1267f0..506236555 100644
--- a/src/pages/projects/sub-components/ProjectsHomeContent.js
+++ b/src/pages/projects/sub-components/ProjectsHomeContent.js
@@ -10,15 +10,17 @@ const ProjectsHomeContent = ({ projects, onDetails, showDetails, onHide }) => (
     id="projects-home-content"
     p={'1rem'}
     display={'flex'}
-    flexDirection={'column'}
+    // flexDirection={'column'}
     flexGrow={'1'}
-    alignItems={'flex-start'}
-    justifyContent={'flex-start'}
+    // alignItems={'flex-start'}
+    // justifyContent={'flex-start'}
+    height={'100%'}
+    width={'100%'}
   >
-    <ScaleFade initialScale={0.9} in={true}>
-      <ProjectHomeList projects={projects} onDetails={onDetails} />
-      <ProjectDetailsModal show={showDetails} onHide={onHide} />
-    </ScaleFade>
+    {/* <ScaleFade initialScale={0.9} in={true}> */}
+    <ProjectHomeList projects={projects} onDetails={onDetails} />
+    <ProjectDetailsModal show={showDetails} onHide={onHide} />
+    {/* </ScaleFade> */}
   </Box>
 );
 
diff --git a/src/pages/resume/ResumePage.js b/src/pages/resume/ResumePage.js
index 115d5e993..f5d7a32d4 100644
--- a/src/pages/resume/ResumePage.js
+++ b/src/pages/resume/ResumePage.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import ResumeContainer from '../../containers/resume/ResumeContainer';
-import Header from '../../components/headings/header/Header';
 
 function ResumePage() {
   return (
     <>
-      <Header />
       <ResumeContainer />
     </>
   );
diff --git a/src/pages/splash/Splash.js b/src/pages/splash/Splash.js
index a7ab32ee6..783c6e00b 100644
--- a/src/pages/splash/Splash.js
+++ b/src/pages/splash/Splash.js
@@ -30,6 +30,20 @@ const logoVariants = {
   exit: { opacity: 0, scale: 0, transition: { duration: 0.5 } },
 };
 
+const ellipsisVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: [0, 1, 1, 1, 0], // This makes the ellipsis fade in and out
+    x: ['0%', '5%', '10%', '15%', '20%'], // Move the ellipsis to the right
+    transition: {
+      duration: 2,
+      repeat: Infinity,
+      repeatType: 'loop',
+    },
+  },
+  exit: { opacity: 0, transition: { duration: 0.5 } },
+};
+
 const textVariants = {
   hidden: { opacity: 0 },
   visible: {
@@ -67,21 +81,37 @@ function AnimatedSplash() {
       ></motion.div>
       {Particle && <Particle />}
 
-      <motion.p
-        className="loading_text"
-        variants={textVariants}
-        style={{
-          rotateX: [0, 10, -10, 0],
-          transition: {
-            repeat: Infinity,
-            repeatType: 'mirror',
-            duration: 4,
-          },
-          color: theme.colors.quaternary[500],
-        }}
-      >
-        Loading...
-      </motion.p>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {' '}
+        {/* Wrap the text and ellipsis in a flex container */}
+        <motion.p
+          className="loading_text"
+          variants={textVariants}
+          style={{
+            rotateX: [0, 10, -10, 0],
+            transition: {
+              repeat: Infinity,
+              repeatType: 'mirror',
+              duration: 4,
+            },
+            color: theme.colors.quaternary[500],
+          }}
+        >
+          Loading
+        </motion.p>
+        <motion.span
+          className="loading_ellipsis"
+          variants={ellipsisVariants}
+          style={{
+            fontSize: 'inherit',
+            marginLeft: '5px', // Add some space between the text and the ellipsis
+          }}
+        >
+          <motion.span>.</motion.span>
+          <motion.span>.</motion.span>
+          <motion.span>.</motion.span>
+        </motion.span>
+      </div>
     </motion.div>
   );
 }
diff --git a/src/pages/utils/HeaderCreator.js b/src/pages/utils/HeaderCreator.js
index 72cbb6c3e..dc93dd791 100644
--- a/src/pages/utils/HeaderCreator.js
+++ b/src/pages/utils/HeaderCreator.js
@@ -1,20 +1,30 @@
+import React from 'react';
 import ReusableHeader from './ReusableHeader';
+import ReusableHeaderWithSubHeader from './ReusableHeaderWithSubHeader';
 
 /* eslint-disable */
-const HeaderCreator = (type) => {
+const HeaderCreator = (type, props = {}) => {
   switch (type) {
-    case 'profile':
-      return <ReusableHeader headerText="Profile" height={'5vh'} />;
+    // case 'profile':
+    //   return <ReusableHeader {...props} headerText="Profile" />;
+    case 'profileWithSub':
+      return <ReusableHeaderWithSubHeader {...props} headerText="Profile" />;
     case 'about':
-      return <ReusableHeader headerText="About Me" height={'5vh'} />;
+      return <ReusableHeader {...props} headerText="About Me" />;
     case 'projects':
-      return <ReusableHeader headerText="Projects" color="white" />;
+      return <ReusableHeader {...props} headerText="Projects" />;
     case 'resume':
-      return <ReusableHeader headerText="Resume" />;
-    case 'techSkills':
-      return <ReusableHeader headerText="Tech Skills" color="white" />;
+      return <ReusableHeader {...props} headerText="Resume" />;
     case 'experiences':
-      return <ReusableHeader headerText="Experience" color="white" />;
+      return <ReusableHeader {...props} headerText="Experience" />;
+    case 'techSkills':
+      return (
+        <ReusableHeader {...props} headerText="Tech Skills" />
+      );
+    case 'techSkillsWithSub':
+      return (
+        <ReusableHeaderWithSubHeader {...props} headerText="Tech Skills" />
+      );
     default:
       return null;
   }
diff --git a/src/pages/utils/ReusableHeader.js b/src/pages/utils/ReusableHeader.js
index 1d61ee8ce..6746b7280 100644
--- a/src/pages/utils/ReusableHeader.js
+++ b/src/pages/utils/ReusableHeader.js
@@ -1,27 +1,23 @@
 import { Box, Heading, Divider } from '@chakra-ui/react';
 
-const ReusableHeader = ({ headerText, color = 'white' }) => (
+const ReusableHeader = ({ headerText, color = 'white', ...props }) => (
   <Box
-    id="reusable-header"
+    id={`reusable-header-${headerText}`} // Added
+    margin={'auto'}
     width="90%"
     minH="2vh"
     maxH="5vh"
     flexGrow={1}
-    // display="flex"
-    // flexDirection="column"
-    // justifyContent="space-between"
     height="100%"
+    mb={4}
+    // pb={2}
     alignItems={'center'}
+    {...props}
   >
-    <Heading as="h2" size="xl" textAlign="center" color={color} mt={2} mb={2}>
+    <Heading as="h2" size="xl" textAlign="center" color={color} mt={2}>
       {headerText}
     </Heading>
-    <Divider
-      borderColor={'quaternary.50'}
-      borderBottomWidth={'3px'}
-      // mt={8}
-      // mb={8}
-    />
+    <Divider borderColor={'quaternary.50'} borderBottomWidth={'3px'} mb={2} />
   </Box>
 );
 
diff --git a/src/pages/utils/ReusableHeaderWithSubHeader.js b/src/pages/utils/ReusableHeaderWithSubHeader.js
index 142ee0003..5dace80ff 100644
--- a/src/pages/utils/ReusableHeaderWithSubHeader.js
+++ b/src/pages/utils/ReusableHeaderWithSubHeader.js
@@ -1,17 +1,19 @@
 import { Box, Heading, Divider } from '@chakra-ui/react';
 
-const ReusableHeaderWithSubHeader = ({ headerText, color = 'white' }) => (
+const ReusableHeaderWithSubHeader = ({
+  headerText,
+  color = 'white',
+  subHeaderComponent: SubHeaderComponent = null,
+}) => (
   <Box
-    id="reusable-header"
-    width="90%"
-    minH="2vh"
-    maxH="5vh"
+    id={`reusable-header-with-subheader-${headerText}`} // Added
+    width="100%"
     flexGrow={1}
-    // display="flex"
-    // flexDirection="column"
-    // justifyContent="space-between"
-    height="100%"
-    alignItems={'center'}
+    display="flex" // Added
+    flexDirection="column" // Added
+    alignItems={'center'} // Added
+    justifyContent={'center'} // Added
+    // p={4} // padding to ensure there's space around the content
   >
     <Heading as="h2" size="xl" textAlign="center" color={color} mt={4} mb={4}>
       {headerText}
@@ -19,17 +21,20 @@ const ReusableHeaderWithSubHeader = ({ headerText, color = 'white' }) => (
     <Divider
       borderColor={'quaternary.50'}
       borderBottomWidth={'3px'}
-      // mt={8}
-      // mb={8}
+      m={'auto'}
     />
-    <Heading as="h3" size="l" textAlign="center" color={color} mt={4} mb={4}>
-      {headerText}
-    </Heading>
+    {SubHeaderComponent ? (
+      <SubHeaderComponent />
+    ) : (
+      <Heading as="h3" size="l" textAlign="center" color={color} mt={4} mb={4}>
+        {headerText}
+      </Heading>
+    )}
     <Divider
       borderColor={'quaternary.50'}
+      maxW={{ base: '90%' }}
       borderBottomWidth={'3px'}
-      // mt={8}
-      // mb={8}
+      m={'auto'}
     />
   </Box>
 );
diff --git a/src/pages/utils/ReusableParagraph.js b/src/pages/utils/ReusableParagraph.js
new file mode 100644
index 000000000..29349404d
--- /dev/null
+++ b/src/pages/utils/ReusableParagraph.js
@@ -0,0 +1,16 @@
+import { Text } from '@chakra-ui/react';
+
+const ReusableParagraph = ({ children, style, id }) => (
+  <Text
+    id={`reusableparagraph-${id}`}
+    as="h3"
+    size="md"
+    my={6}
+    {...style}
+    m={'auto'}
+  >
+    {children}
+  </Text>
+);
+
+export default ReusableParagraph;
diff --git a/src/pages/utils/SectionContainer.js b/src/pages/utils/SectionContainer.js
index 8909bebbd..59b33f779 100644
--- a/src/pages/utils/SectionContainer.js
+++ b/src/pages/utils/SectionContainer.js
@@ -1,22 +1,28 @@
 import React from 'react';
-import { Flex, useMediaQuery } from '@chakra-ui/react';
+import { Flex, useMediaQuery, useTheme } from '@chakra-ui/react';
 
-const SectionContainer = ({ children }) => {
-  const [isLargerThanMd] = useMediaQuery('(min-width: 768px)');
+const SectionContainer = ({ children, id }) => {
+  // Accessing the theme's breakpoints
+  const theme = useTheme();
+  const breakpointMd = theme.breakpoints.md;
 
-  const primaryBg = 'rgba(49, 151, 149, 0.4)'; // translucentQuaternary50
+  // Using the theme's breakpoint for medium devices
+  const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpointMd})`);
+
+  const primaryBg = theme.colors.customColors.translucentQuaternary50;
   const secondaryBg = isLargerThanMd
-    ? 'rgba(0, 31, 34, 0.6)' // translucentQuaternary901
+    ? theme.colors.customColors.translucentQuaternary901
     : 'base';
   const color = isLargerThanMd ? 'white' : 'black';
 
   return (
     <Flex
+      id={`section-container-${id}`}
       alignItems="center"
       justifyContent="center"
-      minHeight="60vh"
+      minHeight="80vh"
       width="100%"
-      p={4} // Added padding for spacing
+      p={4}
       flexDirection="column"
       background={primaryBg}
       color={color}
@@ -24,12 +30,12 @@ const SectionContainer = ({ children }) => {
       <Flex
         alignItems="center"
         justifyContent="center"
+        minHeight="80vh"
         width="100%"
-        // width="auto" // Adjusted to auto for a snug fit
-        p={4} // Added padding for spacing
+        p={4}
         flexDirection="column"
         background={secondaryBg}
-        borderRadius="lg" // Added for rounded appearance
+        borderRadius="lg"
       >
         {children}
       </Flex>
@@ -38,3 +44,60 @@ const SectionContainer = ({ children }) => {
 };
 
 export default SectionContainer;
+// import React from 'react';
+// import { Flex, useMediaQuery, useTheme } from '@chakra-ui/react';
+
+// const SectionContainer = ({ children, id }) => {
+//   // Accessing the theme's breakpoints
+//   const theme = useTheme();
+//   const breakpointMd = theme.breakpoints.md;
+//   const breakpointSm = theme.breakpoints.sm;
+//   const breakpointLg = theme.breakpoints.lg;
+//   const breakpointXl = theme.breakpoints.xl;
+
+//   // Using the theme's breakpoints
+//   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpointMd})`);
+//   const [isLargerThanSm] = useMediaQuery(`(min-width: ${breakpointSm})`);
+//   const [isLargerThanLg] = useMediaQuery(`(min-width: ${breakpointLg})`);
+//   const [isLargerThanXl] = useMediaQuery(`(min-width: ${breakpointXl})`);
+
+//   let minHeight = '60vh';
+//   if (isLargerThanSm) minHeight = '65vh';
+//   if (isLargerThanMd) minHeight = '70vh';
+//   if (isLargerThanLg) minHeight = '75vh';
+//   if (isLargerThanXl) minHeight = '80vh';
+
+//   const primaryBg = theme.colors.customColors.translucentQuaternary50;
+//   const secondaryBg = isLargerThanMd
+//     ? theme.colors.customColors.translucentQuaternary901
+//     : 'base';
+//   const color = isLargerThanMd ? 'white' : 'black';
+
+//   return (
+//     <Flex
+//       id={`section-container-${id}`}
+//       alignItems="center"
+//       justifyContent="center"
+//       minHeight={minHeight}
+//       width="100%"
+//       p={4}
+//       flexDirection="column"
+//       background={primaryBg}
+//       color={color}
+//     >
+//       <Flex
+//         alignItems="center"
+//         justifyContent="center"
+//         width="100%"
+//         p={4}
+//         flexDirection="column"
+//         background={secondaryBg}
+//         borderRadius="lg"
+//       >
+//         {children}
+//       </Flex>
+//     </Flex>
+//   );
+// };
+
+// export default SectionContainer;