diff --git a/app/home.module.css b/app/home.module.css
index 117b3009..aa855e7e 100644
--- a/app/home.module.css
+++ b/app/home.module.css
@@ -122,7 +122,7 @@
 .categoryContainer{
   display: flex;
   flex-wrap: wrap;
-  gap: 1.5rem;
+  gap: 5%;
   justify-content: flex-start;
-  padding-inline-start: 7rem;
+  /* padding-inline-start: 2rem; */
 }
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index cb19d569..1461cdef 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,8 +4,12 @@ import styles from "./home.module.css";
 import Image from "next/image";
 import logo from "./logo.png";
 import google_play from "./google_play.png";
-import CategoryCard from "@/components/CategoryCard";
-import { useRouter } from "next/navigation";
+import CustomCardContent from "@/components/CustomCardContent";
+import Grid from '@mui/material/Unstable_Grid2';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Card from '@mui/material/Card';
+import { Container, Typography, Link, Button } from '@mui/material';
 
 // TEMPORARY CATEGORIES LIST
 const placeholderImg = google_play
@@ -21,45 +25,34 @@ const categories = [
   {'type': 'Jacket/Blazer', 'image': placeholderImg},
 ]
 
-
 const Home = () => {
-  const router = useRouter();
-  const onCardClick=(type: string)=>{
-    const encodedCategoryId = encodeURIComponent(type); //sanitize item name for route
-    router.push(`/category-page/${encodedCategoryId}`);
-  }
   return (
     <div className={styles.container}>
-      <div className={styles.formContainer}>
-        <div className={styles.logoContainer}>
+      <Box width={800} display="flex" alignItems="center" flexDirection="column" gap={2} bgcolor='#293745' p={3}>
+        <Container disableGutters fixed maxWidth="xs" sx={{width: "15%"}}>
           <Image src={logo} alt="logo" />
-        </div>
-        <h1 className={styles.title}>Welcome to Belinda&apos;s Closet</h1>
-        <div className={styles.buttonContainer}>
-          <a href="/auth/sign-in">
-            <button className={styles.loginButton}>Sign In</button>
-          </a>
-          <a href="/auth/sign-up">
-            <button className={styles.signUpButton}>Sign Up</button>
-          </a>
-        </div>
+        </Container>
+        <Typography component='h1' variant='h3' sx={{color: 'white'}}>
+          Belinda&apos;s Closet
+        </Typography>
+        <Stack direction="row" spacing={2}>
+          <Button href="/auth/sign-in" component='a' variant="contained">Sign In</Button>
+          <Button href="/auth/sign-up" component='a' variant="contained">Sign Up</Button>
+        </Stack>
         {/* download mobile app link */}
-        <div className={styles.downloadContainer}>
-          <p className="textCenter">
-            <a href="" className={styles.link}>
-              <button className={styles.downloadButton}>
-                <Image src={google_play} alt="google_play" />
-                Download App
-              </button>
-            </a>
-          </p>
-        </div>
-        <div className={styles.categoryContainer}>
-          {categories.map((category, index)=>(
-            <CategoryCard title={category.type} image={category.image} onCardClick={()=>onCardClick(category.type)} key={category.type}/>
-          ))}
-        </div>
-      </div>
+        <Button component='a' href="" variant="outlined" startIcon={<Image src={google_play} alt="google_play" />} sx={{color:'white' }}>
+          Download App
+        </Button>
+          <Grid container spacing={2}>
+              {categories.map((category, index)=>(
+                <Grid lg={4} sm={4} component="div" key={index}>
+                  <Card>
+                    <CustomCardContent title={category.type} image={placeholderImg} />
+                  </Card>
+                </Grid>
+              ))}
+          </Grid>
+        </Box>
     </div>
   );
 };
diff --git a/components/CategoryCard.tsx b/components/CategoryCard.tsx
deleted file mode 100644
index 4d8ee2f2..00000000
--- a/components/CategoryCard.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { StaticImageData } from "next/image";
-import React from "react";
-import {useNavigate} from 'react-router-dom';
-import Image from "next/image";
-
-// TODO: CHANGE types to match final DB
-type CategoryCardProps = {
-    title: string;
-    image: StaticImageData;
-    onCardClick: ()=>void;
-};
-
-const CategoryCard: React.FC<CategoryCardProps> =({title, image, onCardClick})=>{
-    return (
-        <div tabIndex={0} className="px-4 py-2 border-4 border-gray-300 rounded-md hover:border-blue-500 focus:outline-none focus:border-blue-500 w-1/4" onClick={onCardClick}>
-            <Image src={image} alt={title+" Category Image"} className="w-full"/>
-            <div className="py-4">
-                <p className="font-bold text-l mb-2 text-white h-8 truncate text-center">{title}</p>
-            </div>
-        </div>
-    )
-}
-
-export default CategoryCard;
\ No newline at end of file
diff --git a/components/CustomCardContent.tsx b/components/CustomCardContent.tsx
new file mode 100644
index 00000000..5722b658
--- /dev/null
+++ b/components/CustomCardContent.tsx
@@ -0,0 +1,31 @@
+import Image, { StaticImageData } from "next/image";
+import React from "react";
+import { CardActionArea, Typography, CardHeader } from '@mui/material';
+import { useRouter } from "next/navigation";
+import CardContent from '@mui/material/CardContent';
+
+// TODO: CHANGE types to match final DB
+type CategoryCardProps = {
+    title: string;
+    image: StaticImageData;
+};
+
+const CustomCardContent: React.FC<CategoryCardProps> =({title, image})=>{
+    const router = useRouter();
+    const navigate=()=>{
+        const encodedCategoryId = encodeURIComponent(title); //sanitize item name for route
+        router.push(`/category-page/${encodedCategoryId}`);
+    }
+    return (
+        <CardActionArea onClick={() => navigate()}>
+            <CardContent>
+                <Image src={image} alt="logo" style={{width: "100%"}} />
+                <Typography variant='h5' align='center' gutterBottom>
+                    {title}
+                </Typography>
+            </CardContent>
+        </CardActionArea>
+    )
+}
+
+export default CustomCardContent;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5c09405c..d2547c57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.15.5",
-        "@mui/material": "^5.15.5",
+        "@mui/material": "^5.15.7",
         "@tanstack/react-query": "5.17.15",
         "@types/bcrypt": "5.0.0",
         "@types/node": "20.4.1",
@@ -642,9 +642,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
-      "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -914,28 +914,28 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
-      "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/utils": "^0.2.1"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
-      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
+      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
       "dependencies": {
-        "@floating-ui/core": "^1.5.3",
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.1"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.6.tgz",
-      "integrity": "sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
       "dependencies": {
-        "@floating-ui/dom": "^1.5.4"
+        "@floating-ui/dom": "^1.6.1"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -1435,14 +1435,14 @@
       }
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-beta.32",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.32.tgz",
-      "integrity": "sha512-4VptvYeLUYMJhZapWBkD50GmKfOc0XT381KJcTK3ncZYIl8MdBhpR6l8jOyeP5cixUPBJhstjrnmQEAHjCLriw==",
+      "version": "5.0.0-beta.34",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.34.tgz",
+      "integrity": "sha512-e2mbTGTtReD/y5RFwnhkl1Tgl3XwgJhY040IlfkTVaU9f5LWrVhEnpRsYXu3B1CtLrwiWs4cu7aMHV9yRd4jpw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "@floating-ui/react-dom": "^2.0.5",
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
         "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.5",
+        "@mui/utils": "^5.15.7",
         "@popperjs/core": "^2.11.8",
         "clsx": "^2.1.0",
         "prop-types": "^15.8.1"
@@ -1466,9 +1466,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.15.5",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.5.tgz",
-      "integrity": "sha512-VhT8klyXy8GrWrARqLMoM6Nzz809Jc3Wn5wd7WOZfre2vFO1rBV1dBANAPBhBqpaQI0HCMRTWEYoSyOFgRnz4A==",
+      "version": "5.15.8",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.8.tgz",
+      "integrity": "sha512-W6R1dZJgbYfLmQKf7Es2WUw0pkDkEVUf2jA22DYu0JOa9M3pjvOqoC9HgOPGNNJTu6SCWLSWh3euv1Jn2NmeQA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
@@ -1500,16 +1500,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.15.5",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.5.tgz",
-      "integrity": "sha512-2KfA39f/UWeQl0O22UJs3x1nG3chYlyu9wnux5vTnxUTLzkgYIzQIHaH+ZOGpv5JiZBMKktAPNfhqyhSaQ49qQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "@mui/base": "5.0.0-beta.32",
-        "@mui/core-downloads-tracker": "^5.15.5",
-        "@mui/system": "^5.15.5",
+      "version": "5.15.7",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.7.tgz",
+      "integrity": "sha512-l6+AiKZH3iOJmZCnlpel8ghYQe9Lq0BEuKP8fGj3g5xz4arO9GydqYAtLPMvuHKtArj8lJGNuT2yHYxmejincA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.34",
+        "@mui/core-downloads-tracker": "^5.15.7",
+        "@mui/system": "^5.15.7",
         "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.5",
+        "@mui/utils": "^5.15.7",
         "@types/react-transition-group": "^4.4.10",
         "clsx": "^2.1.0",
         "csstype": "^3.1.2",
@@ -1544,12 +1544,12 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.15.5",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.5.tgz",
-      "integrity": "sha512-HU1KCyGNcJFsUamTbOM539ZDZJNI/XU7sZFdsN29glktUf+T6hNvDuO2ISinBiLTZy7Ab3R6DSSoYXRrLc4uwQ==",
+      "version": "5.15.8",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.8.tgz",
+      "integrity": "sha512-HMDPO416iMZPqs8nGUL3GJMDNpJtE1Uefw/Aw+zTKJHX5JnT+Bms41e2065BUT/zR5dYcKjFP4gQMwW5QX7nvA==",
       "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "@mui/utils": "^5.15.5",
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.8",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1570,11 +1570,11 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.15.5",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.5.tgz",
-      "integrity": "sha512-xoMUd8h270thNL7ZsOzmlluIAMsQg/HT7SCdRjPBVle+XHgTKaiWiRy1ekDOsrrF0rhjME3T7xeeUq2G269UUw==",
+      "version": "5.15.8",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.8.tgz",
+      "integrity": "sha512-31ZKPGsS0OiSwuzi8RWoTiWRdUWXPRiOQkyG9bRYX/zvoYeBXEdbsLEgbryug5mVRsPpvwbH5q/i/t6MkjQ71g==",
       "dependencies": {
-        "@babel/runtime": "^7.23.8",
+        "@babel/runtime": "^7.23.9",
         "@emotion/cache": "^11.11.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -1601,15 +1601,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.15.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.5.tgz",
-      "integrity": "sha512-DMv2vGjUKaDt/m0RlzvLjpKiS5V0LoBhiMUHf5pWdj6uoNlN4FuKUe4pFeYmQMIO5DnVZKybmpPepfkdfEH+Og==",
+      "version": "5.15.8",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.8.tgz",
+      "integrity": "sha512-BUMJvlz1UqIqDPyrvc+MwjOUkWKskUPAOUuRh2KMAworiXuuUmtIivxSfdGll2ex6RHSylu4yc5dJZByOI8EcQ==",
       "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "@mui/private-theming": "^5.15.5",
-        "@mui/styled-engine": "^5.15.5",
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.8",
+        "@mui/styled-engine": "^5.15.8",
         "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.5",
+        "@mui/utils": "^5.15.8",
         "clsx": "^2.1.0",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
@@ -1653,11 +1653,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.15.5",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.5.tgz",
-      "integrity": "sha512-jEywgaMGZWPSlVFO7ZZAyXxNeLmq5XBp5At9Ne/sGohRJdesUcdxvyi8TP3odJxwQuL5L6PJV+JQ4DyIDM849A==",
+      "version": "5.15.8",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.8.tgz",
+      "integrity": "sha512-Q6Z/xSxi1Z6xQ5Qj9p4ZTHudwfrrwFALtU6H1O222pXudg9Qm0zHdiwJQiHT9L6jMIN78ZujEfGHserMoHUrQw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.8",
+        "@babel/runtime": "^7.23.9",
         "@types/prop-types": "^15.7.11",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
diff --git a/package.json b/package.json
index 8dc3f5f3..6b9ee14e 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.5",
-    "@mui/material": "^5.15.5",
+    "@mui/material": "^5.15.7",
     "@tanstack/react-query": "5.17.15",
     "@types/bcrypt": "5.0.0",
     "@types/node": "20.4.1",