diff --git a/src/App.css b/src/App.css
index 74b5e05..a290ddc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,318 @@
-.App {
+/* 
+  App.css 
+
+*/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'DM Sans', sans-serif; 
+  background-color: #FFFFFF;
+}
+
+/* Hide label visually but keep it accessible to screen readers */
+.visually-hidden {
+  position: absolute;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 
+  HEADER
+*/
+.site-header {
+  width: 100%;
+  height: 112px;
+  background-color: #5DB996;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-content {
+  width: 90%;
+  max-width: 1809px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+}
+
+/* Logo + Title */
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logo-img {
+  width: 96px; 
+  height: auto;
+}
+
+.site-title {
+  color: #FBF6E9;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+/* Navigation (from NavBar.js) */
+.main-nav .nav-links{
+  list-style: none;
+  display: flex;
+  gap: 2rem;
+}
+
+.nav-links li a {
+  color: #FFFFFF;
+  font-size: 24px;
+  font-weight: 400;
+  text-decoration: none;
+  line-height: 1.2;
+}
+
+.nav-links li a.current {
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+/* 
+  SEARCH BAR
+*/
+.search-bar {
+  width: 90%;
+  max-width: 1009px;
+  margin: 1rem auto 2rem auto;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 50px;
+  border: 1px solid #5DB996;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  background-color: #FFFFFF;
+  position: relative;
+}
+
+.search-icon {
+  width: 23px;
+  height: auto;
+  margin-right: 0.5rem;
+}
+
+.search-bar input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  color: #118B50;
+}
+
+/* 
+  MAIN CONTENT (RESULTS)
+*/
+.results-section {
+  width: 90%;
+  max-width: 1809px;
+  margin: 0 auto 2rem auto;
+  text-align: center;
+}
+
+.results-title {
+  color: #118B50;
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 66px;
+  margin-bottom: 1rem;
+  
+}
+
+/* Cards Grid */
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 5rem;
+  justify-items: center;
+}
+
+/* Single Card */
+.card {
+  background-color: #FFFFFF;
+  border-radius: 20px;
+  border: 5px solid #5DB996;
+  width: 388px; 
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+}
+
+/* Card image */
+.card-image {
+  width: 100%;
+  height: 321px;
+  object-fit: cover;
+  border-radius: 30px;
+}
+
+/* Card content wrapper */
+.card-content {
+  padding: 1rem;
+}
+
+/* Student Name */
+.card-name {
+  color: #118B50;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 46px;
+  margin: 0.5rem 0;
+}
+
+/* Major style*/
+.card-major {
+  color: #5DB996;
+  font-size: 18px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 1.8px;
+  line-height: 20px;
+  margin-bottom: 1rem;
+}
+
+/* Hobbies & Interests */
+.card-interests {
+  color: #118B50;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 30px;
+}
+
+/* Favorite star icon */
+.star-icon {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 44px;
+  height: auto;
+  cursor: pointer; /* so user knows it's clickable */
+}
+
+/* 
+  FOOTER
+*/
+.site-footer {
+  width: 100%;
+  border-top: 2px solid #5DB996;
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer-text {
+  color: #777777;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+.footer-icons img {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  margin-left: 1rem;
+}
+
+
+/*login and profile block*/
+
+.nav-and-login {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+/* Login Button (shown when user is not logged in) */
+.login-button {
+  
+  margin-left: 0;
+  line-height: 1.2;
+
+  /* styling */
+  padding-left: 36px;
+  padding-right: 36px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  background: white;
+  border-radius: 36.55px;
+
+  /* layout */
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+
+  /* pointer */
+  cursor: pointer;
+  
+}
+
+.login-button-text {
+  text-align: center;
+  color: #5DB996;
+  font-size: 24px;
+  font-family: 'DM Sans', sans-serif; 
+  font-weight: 400;
+  line-height: 18px;
+  word-wrap: break-word;
+  
+  
+}
+
+/* 2) Profile Block (shown when user is logged in) */
+.profile-block {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+ 
+}
+
+.profile-block-image {
+  width: 45.14px;
+  height: 36px;
+  border-radius: 700px;
+}
+
+.profile-block-text {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.profile-block-name {
+  color: #0F172A;
+  font-size: 18px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 400;
+  word-wrap: break-word;
+}
+
+.profile-block-downarrow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+
+
+/*.App {
   text-align: center;
 }
 
@@ -36,3 +350,4 @@
     transform: rotate(360deg);
   }
 }
+*/
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..73dd20b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,107 @@
-import logo from './logo.svg';
 import './App.css';
+import React, { useState, useEffect } from "react";
+import NavBar from "./NavBar";
+import CardsGrid from "./CardsGrid";
+import Footer from "./Footer";
+import searchicon from './images/search-icon.png';
+import placeholder from './images/placeholder-profile.png';
+
+const def_name = "Student Name";
+const def_major = "Computer Science";
+const def_hobby1 = "hobby 1";
+const def_hobby2 = "hobby 2";
+const def_genre = "move genre 1";
+const def_interest1 = "interest 1";
+const def_interest2 = "interest 2";
 
 function App() {
+  const [favorites, setFavorites] = useState([]);
+  const [cardsData] = useState([
+    {
+      name: def_name,
+      major: def_major,
+      interests: [def_hobby1, def_hobby2, def_interest1, def_interest2, def_genre],
+      imgSrc: placeholder,
+    },
+    {
+      name: def_name,
+      major: def_major,
+      interests: [def_hobby1, def_hobby2, def_interest1, def_interest2, def_genre],
+      imgSrc: placeholder,
+    },
+    {
+      name: def_name,
+      major: def_major,
+      interests: [def_hobby1, def_hobby2, def_interest1, def_interest2, def_genre],
+      imgSrc: placeholder,
+    },
+    {
+      name: def_name,
+      major: def_major,
+      interests: [def_hobby1, def_hobby2, def_interest1, def_interest2, def_genre],
+      imgSrc: placeholder,
+    },
+    {
+      name: def_name,
+      major: def_major,
+      interests: [def_hobby1, def_hobby2, def_interest1, def_interest2, def_genre],
+      imgSrc: placeholder,
+    },
+    {
+      name: def_name,
+      major: def_major,
+      interests: [def_hobby1, def_hobby2, def_interest1, def_interest2, def_genre],
+      imgSrc: placeholder,
+    },
+  ]);
+
+  useEffect(() => {
+    console.log("Favorites updated:", favorites); }, [favorites]);
+
+    const toggleFavorite = (index) => {
+      setFavorites((prev) => {
+        if (prev.includes(index)) { // if card is already favorited remove it
+          return prev.filter((i) => i !== index);
+        }
+
+        // if not, add
+        return [...prev, index];
+      });
+    };
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <NavBar /> 
+      {/*function defined in other fiel*/}
+      <div className="search-bar">
+        <img
+          src={searchicon}
+          alt="Search Icon"
+          className="search-icon"
+        />
+        <label htmlFor="search" className="visually-hidden">Search</label>
+        <input 
+          type="text"
+          id="search"
+          name="search"
+          placeholder="Search"
+        />
+
+      </div>
+
+      {/*Main content*/}
+      <main>
+        <section className="results-sections">
+          <h2 id="resutls-heading" className="results-title">Results</h2>
+          <CardsGrid
+            data={cardsData}
+            favorites={favorites}
+            toggleFavorite={toggleFavorite}
+          />
+        </section>
+      </main>
+
+      {/*Footer*/}
+      <Footer />
     </div>
   );
 }
diff --git a/src/CardsGrid.js b/src/CardsGrid.js
new file mode 100644
index 0000000..3fa5f15
--- /dev/null
+++ b/src/CardsGrid.js
@@ -0,0 +1,43 @@
+import React from "react";
+import staricon from './images/star-icon.png';
+import starcolor from './images/star-color.png';
+
+function CardsGrid({ data, favorites, toggleFavorite }) {
+    return (
+        <div className="cards-grid">
+            {data.map((card, index) => {
+                const isFavorited = favorites.includes(index);
+
+                return (
+                    <article className="card" key={index}>
+                        <img   
+                            src={card.imgSrc}
+                            alt="Profile placeholder"
+                            className="card-image"
+                        />
+                        <div className="card-content">
+                            <h3 className="card-name">{card.name}</h3>
+                            <p className="card-major">Major: {card.major}</p>
+                            <p className="card-interests">
+                                {card.interests.map((interest, i) => (
+                                    <React.Fragment key={i}>
+                                        {interest}
+                                        <br />
+                                    </React.Fragment>
+                                ))}
+                            </p>
+                        </div>
+                        <img 
+                            src={isFavorited ? starcolor : staricon} //if isFavorited is true, then show star color image
+                            alt="Favorite icon"
+                            className="star-icon"
+                            onClick={() => toggleFavorite(index)}
+                        />
+                    </article>
+                );
+            })}
+        </div>
+    );
+}
+
+export default CardsGrid;
\ No newline at end of file
diff --git a/src/Footer.js b/src/Footer.js
new file mode 100644
index 0000000..42af720
--- /dev/null
+++ b/src/Footer.js
@@ -0,0 +1,20 @@
+import React from "react";
+import facebook from './images/facebook-icon.png';
+import instagram from './images/instagram-icon.png';
+import twitter from './images/twitter-icon.png';
+import './App.css';
+
+function Footer() {
+    return (
+        <footer className="site-footer">
+        <p className="footer-text">Made by Sophie Shin</p>
+        <div className="footer-icons">
+            <a href="#"><img src={facebook} alt="Facebook Icon" /></a>
+            <a href="#"><img src={instagram} alt="Instagram Logo" /></a>
+            <a href="#"><img src={twitter} alt="Twitter Logo" /></a>     
+        </div>
+        </footer>
+    );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/NavBar.js b/src/NavBar.js
new file mode 100644
index 0000000..0ffae65
--- /dev/null
+++ b/src/NavBar.js
@@ -0,0 +1,65 @@
+import React, { useState } from "react"
+import logo from './images/logo.png';
+import profileblock from './images/login_image.png';
+import arrow from './images/Arrow.png';
+
+function NavBar(){
+
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+    const handleLoginClick = () => {
+        setIsLoggedIn((prev) => !prev);
+    };
+    return (
+        <header className="site-header">
+            <div className="header-content">
+
+                <div className="logo-section">
+                    <img src={logo}
+                    alt="LeafQuad Logo"
+                    className="logo-img" />
+                    <h1 className="site-title">LeadQuad</h1>
+                </div>
+
+                {/* Navigation links */}
+                <div className="nav-and-login">
+                <nav className="main-nav">
+                    <ul className="nav-links">
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Blog</a></li>
+                        <li><a href="#">Contact</a></li>
+                        <li><a href="#" className="current">Friends</a></li>
+                    </ul>
+                </nav>
+            {!isLoggedIn ?  (
+                <div className="login-button" onClick={handleLoginClick}>
+                    <div className="login-button-text">
+                        Login
+                    </div>
+                </div>    
+            )  : (
+                <div className="profile-block" onClick={handleLoginClick}>
+                    <img
+                        className="profile-block-image"
+                        src={profileblock}
+                        alt="User avatar"
+                    />
+                    <div className="profile-block-text">
+                        <div className="profile-block-name">Sophie Shin</div>
+                        <div className="profile-block-downarrow">
+                            <img   
+                                className="profile-block-downarrow"
+                                src={arrow}
+                                alt="arrow" />
+                        </div>
+                    </div>
+                </div>
+            )}
+            </div>
+        </div>
+    </header>
+    );
+}
+
+export default NavBar;
\ No newline at end of file
diff --git a/src/images/Arrow.png b/src/images/Arrow.png
new file mode 100644
index 0000000..7da36d0
Binary files /dev/null and b/src/images/Arrow.png differ
diff --git a/src/images/facebook-icon.png b/src/images/facebook-icon.png
new file mode 100644
index 0000000..cbcfb09
Binary files /dev/null and b/src/images/facebook-icon.png differ
diff --git a/src/images/instagram-icon.png b/src/images/instagram-icon.png
new file mode 100644
index 0000000..ec3eccd
Binary files /dev/null and b/src/images/instagram-icon.png differ
diff --git a/src/images/login_image.png b/src/images/login_image.png
new file mode 100644
index 0000000..beb1bb0
Binary files /dev/null and b/src/images/login_image.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 0000000..2557d9d
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/images/placeholder-profile.png b/src/images/placeholder-profile.png
new file mode 100644
index 0000000..9e4474a
Binary files /dev/null and b/src/images/placeholder-profile.png differ
diff --git a/src/images/search-icon.png b/src/images/search-icon.png
new file mode 100644
index 0000000..3403bc2
Binary files /dev/null and b/src/images/search-icon.png differ
diff --git a/src/images/star-color.png b/src/images/star-color.png
new file mode 100644
index 0000000..84bed3f
Binary files /dev/null and b/src/images/star-color.png differ
diff --git a/src/images/star-icon.png b/src/images/star-icon.png
new file mode 100644
index 0000000..b4f5402
Binary files /dev/null and b/src/images/star-icon.png differ
diff --git a/src/images/twitter-icon.png b/src/images/twitter-icon.png
new file mode 100644
index 0000000..256e03c
Binary files /dev/null and b/src/images/twitter-icon.png differ