diff --git a/src/pages/Home/HomePage.css b/src/pages/Home/HomePage.css
index 6a0fbb8..8ce937f 100644
--- a/src/pages/Home/HomePage.css
+++ b/src/pages/Home/HomePage.css
@@ -1,132 +1,123 @@
 .home-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: white;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  /* max-height: calc(100vh-80px);
-  min-height: 100vh; */
-  height: calc(100vh-80px);
-  padding: 0 20px 20px 20px;
+  position: relative;
+  min-height: 100vh;
+  overflow-x: hidden;
   overflow-y: hidden;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* The background block that appears at the top, 
+   creating the “overlapped” look */
+.top-overlap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 220px;
+  background-color: #f0eef1; 
+  z-index: 0;
 }
 
-.home-header {
+/* The main content that sits *over* the top overlap */
+.home-content {
+  position: relative;
+  z-index: 1;
+  margin-top: 100px; 
+  padding-bottom: 20px;
+}
+
+.home-header-overlapped {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 80px;
-  width: 95%;
+  margin: 0 20px 20px 20px;
 }
 
-.user-info {
+.user-info-overlapped {
   display: flex;
   align-items: center;
-  padding-bottom: 0px !important;
 }
 
-.profile-pic {
-  width: 50px !important;
-  height: 50px !important;
+.profile-pic-overlapped {
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  margin-right: 10px;
+  margin-right: 12px;
+  object-fit: cover;
 }
 
-.menu-icon {
-  font-size: 20px;
-  cursor: pointer;
+.user-name-overlapped {
+  font-size: 18px;
+  font-weight: 500;
 }
 
-.action-list {
+.big-avatar-placeholder,
+.big-shirt-placeholder,
+.big-shoes-placeholder {
+  width: 100%;
+  height: 80px;
+  background-color: #e0e0e0;
+  margin-bottom: 10px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-actions {
+  width: 90%;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
-  width: 100%;
-  max-width: 1200px;
-  padding-top: 15px;
+  gap: 10px;
 }
 
-.action-card {
+.action-button {
+  background-color: #f0eef1;
+  border-radius: 8px;
+  padding: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: #f0eef1;
-  padding: 12px;
-  margin-bottom: 10px;
-  border-radius: 8px;
+  font-size: 20px;
   cursor: pointer;
-  font-size: 22px;
 }
 
 .action-title {
   display: flex;
   align-items: center;
   gap: 10px;
-  cursor: pointer;
-  padding: 5px;
 }
 
 .action-icon {
-  font-size: 18px;
-  gap: 10px;
+  font-size: 22px;
 }
 
 .arrow-icon {
-  font-size: larger;
-}
-
-.footer-nav {
-  display: flex;
-  justify-content: space-around;
-}
-
-.add-button {
-  font-size: larger;
-}
-
-.customize-action {
-  display: flex;
+  font-size: 1.4em;
+}
+
+.big-card {
+  width: 90%;
+  margin: 0 auto;
+  /* Increase height or padding: */
+  min-height: 200px;       /* formerly 80–100px range */
+  padding: 20px;           /* was 15px, now bigger */
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  border-radius: 12px;
+  margin-bottom: 20px;
+  display: flex;           /* display flex to center image */
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  cursor: pointer;
-  padding: 15px;
-  margin-bottom: 5px;
-  background-color: #f0eef1;
-  border-radius: 8px;
-}
-
-.customize-action input[type="checkbox"] {
-  transform: scale(1.5); /* Adjust the size here, 1.5 is 1.5 times the original size */
-  margin-right: 10px; /* Add space between checkbox and label */
-}
-
-.modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.customize-modal {
-  width: 300px;
-  height: 150px;
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  position: fixed !important;
-  top: -5%;
-  left: 39.8%;
-}
-
-.customize-modal-title {
-  font-size: 20px;
-  align-items: left;
-}
-
-.save-button {
-  width: 100%;
-  padding: 10px;
-  background-color: #000;
-  margin-bottom: 3px;
 }
 
+.outfit-image {
+  /* Constrain the image so it fits in the bigger card */
+  max-width: 100%;
+  max-height: 180px;       /* or some fraction of min-height */
+  object-fit: cover;       /* keep aspect ratio, but fill nicely */
+  border-radius: 6px;
+  margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx
index cc7ec2f..01a121c 100644
--- a/src/pages/Home/HomePage.jsx
+++ b/src/pages/Home/HomePage.jsx
@@ -1,62 +1,88 @@
-import React, { useState } from 'react';
-import Header from "../../components/header/Header";
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button } from 'react-bootstrap';
-import CustomModal from "../../components/modal/CustomModal";
-import './HomePage.css';
-import { FaTshirt, FaUserFriends } from 'react-icons/fa';
-import { BsClockHistory, BsChatDots, BsLightbulb, BsThreeDotsVertical, BsCompass } from 'react-icons/bs';
-import { useAuthState, useDbData } from '../../utilities/firebase';
+import Header from "../../components/header/Header";
+import { FaTshirt } from 'react-icons/fa';
+import { BsLightbulb } from 'react-icons/bs';
 import { MdKeyboardArrowRight } from "react-icons/md";
+import { useDbData } from '../../utilities/firebase'; 
+import './HomePage.css';
 
 const HomePage = ({ user }) => {
   const navigate = useNavigate();
+
+  // 1. Load user data (which includes displayName, photoURL, etc.)
   const [userData] = useDbData(user ? `users/${user.uid}` : null);
-  const [showCustomizeModal, setShowCustomizeModal] = useState(false);
-  const [actions, setActions] = useState([
-    { id: 1, name: "My Closet", link: "mycloset", icon: <FaTshirt />, visible: true },
-    { id: 2, name: "Outfit History", action: () => navigate('/mycloset', { state: { selectedTopFilter: 'Outfits' } }), icon: <BsClockHistory />, visible: true }, // aidan change the link here once the outfits page is done
-    { id: 3, name: "Chat History", link: "chat", icon: <BsChatDots />, visible: true },
-    { id: 4, name: "My Inspiration", link: "inspiration", icon: <BsLightbulb />, visible: true },
-    { id: 5, name: "My Friends", link: "friends", icon: <FaUserFriends />, visible: true },
-    { id: 6, name: "My Feed", link: "discover", icon: <BsCompass />, visible: true },
-  ]);
 
-  const toggleActionVisibility = (id) => {
-    setActions((prevActions) =>
-      prevActions.map((action) =>
-        action.id === id ? { ...action, visible: !action.visible } : action
-      )
-    );
-  };
+  // 2. Load the user's outfits
+  const [outfits] = useDbData(user ? `users/${user.uid}/outfits` : null);
+
+  // 3. Determine if at least one outfit exists
+  const outfitKeys = outfits ? Object.keys(outfits) : [];
+  let outfitPhotoURL = null;
+  if (outfitKeys.length > 0) {
+    // Grab the first outfit’s 'imageURL'
+    console.log("Outfit present");
+    const firstOutfitKey = outfitKeys[0];
+    outfitPhotoURL = outfits[firstOutfitKey].imageUrl ?? null;
+  } else {
+    console.log("No outfit present");
+  }
+
+  // Always-show actions
+  const actions = [
+    { id: 1, name: "Build an Outfit", link: "outfit-builder-new", icon: <FaTshirt /> },
+    { id: 2, name: "Find Inspiration", link: "inspiration", icon: <BsLightbulb /> },
+    { id: 3, name: "My Closet", link: "mycloset", icon: <FaTshirt /> },
+  ];
 
   return (
     <div className="home-page">
       <Header title="Home" />
-      <div className="home-header">
-        <div className="user-info">
-          <img
-            src={userData?.photoURL}
-            alt="Profile"
-            className="profile-pic"
-          />
-          <span style={{ fontSize: '24px' }}>{userData?.displayName}</span>
+
+      {/* Overlapping background at the top */}
+      <div className="top-overlap"></div>
+
+      {/* Main content that sits on top of the overlapped background */}
+      <div className="home-content">
+        <div className="home-header-overlapped">
+          <div className="user-info-overlapped">
+            <img
+              src={userData?.photoURL}
+              alt="Profile"
+              className="profile-pic-overlapped"
+            />
+            <span className="user-name-overlapped">
+              {userData?.displayName}
+            </span>
+          </div>
+        </div>
+
+        {/* Card area: either display an outfit image or placeholders */}
+        <div className="big-card">
+          {outfitPhotoURL ? (
+            // If at least one outfit image is found, show it
+            <img
+              src={outfitPhotoURL}
+              alt="My Outfit"
+              className="outfit-image"
+            />
+          ) : (
+            // Otherwise, default to your placeholders
+            <>
+              <div className="big-avatar-placeholder">Avatar Placeholder</div>
+              <div className="big-shirt-placeholder">Shirt Placeholder</div>
+              <div className="big-shoes-placeholder">Shoes Placeholder</div>
+            </>
+          )}
         </div>
-        <BsThreeDotsVertical
-          className="menu-icon"
-          onClick={() => setShowCustomizeModal(true)}
-        />
-      </div>
 
-      {/* Action List */}
-      <div className="action-list">
-        {actions
-          .filter((action) => action.visible)
-          .map((action) => (
-            <div
+        {/* Simple list of action buttons */}
+        <div className="main-actions">
+          {actions.map(action => (
+            <div 
               key={action.id}
-              className="action-card"
-              onClick={() => action.action ? action.action() : navigate(`/${action.link}`)}
+              className="action-button"
+              onClick={() => navigate(`/${action.link}`)}
             >
               <div className="action-title">
                 <div className="action-icon">{action.icon}</div>
@@ -65,29 +91,10 @@ const HomePage = ({ user }) => {
               <MdKeyboardArrowRight className="arrow-icon" />
             </div>
           ))}
+        </div>
       </div>
-
-      {/* Custom Modal */}
-      <CustomModal show={showCustomizeModal} onClose={() => setShowCustomizeModal(false)} title="Customize Home Screen">
-        {actions.map((action) => (
-          <div key={action.id} className="customize-action d-flex align-items-center justify-content-between">
-            <div className="d-flex align-items-center action-icon">
-              {action.icon}
-              <span>{action.name}</span>
-            </div>
-            <input
-              type="checkbox"
-              checked={action.visible}
-              onChange={() => toggleActionVisibility(action.id)}
-            />
-          </div>
-        ))}
-        <Button variant="secondary" className="save-button w-100 mt-3" onClick={() => setShowCustomizeModal(false)}>
-          Save Changes
-        </Button>
-      </CustomModal>
-    </div >
+    </div>
   );
 };
 
-export default HomePage;
\ No newline at end of file
+export default HomePage;