diff --git a/index.html b/index.html
index 1ae4ddb6..9d8068a1 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CodeClip</title>
-
     <link rel="stylesheet" href="styles.css">
 
     <script
@@ -49,8 +48,64 @@
 <body>
   <main>
     <h1>Hello from CodeClip!</h1>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <div class="content">
+      <!-- card -->
+
+        <div class="card">
+          <a href="#" target="_blank">
+            <div class="icon" ><i class="material-icons md-36" alt="Challenge vault icon">security</i></div>
+            <p class="title">Challenge Vault</p>
+            <p class="text">All your challenges in one place — track, review, repeat.</p>
+          </a>
+        </div>
+
+
+      <!-- end card -->
+      <!-- card -->
+        <div class="card">
+          <a href="#" target="_blank">
+          <div class="icon" ><i class="material-icons md-36" alt="Code editor icon">code</i></div>
+          <p class="title">Code Editor</p>
+          <p class="text">Write, test, and edit code seamlessly in your personal editor.</p>
+          </a>
+        </div>
+
+
+      <!-- end card -->
+      <!-- card -->
+
+        <div class="card">
+          <a href="#" target="_blank">
+          <div class="icon" ><i class="material-icons md-36" alt="Solution sharing icon">share</i></div>
+          <p class="title">Solution Sharing </p>
+          <p class="text">Show your approach. Discover new ones.</p>
+          </a>
+        </div>
+
+
+      <!-- end card -->
+      <!-- card -->
+
+        <div class="card">
+          <a href="#" target="_blank">
+          <div class="icon" ><i class="material-icons md-36" alt="AI recommendation icon">smart_toy</i></div>
+          <p class="title">AI Recommendation </p>
+          <p class="text">Let AI guide your next steps with personalized recommendations.</p>
+          </a>
+        </div>
+
+
+      <!-- end card -->
+
+
+
+    </div>
+
   </main>
 
+
   <!-- Text-based Theme Toggle -->
   <p id="theme-toggle">Toggle Theme</p>
 
diff --git a/styles.css b/styles.css
index 7d81a563..ef26a95b 100644
--- a/styles.css
+++ b/styles.css
@@ -132,4 +132,134 @@ body {
   .header__logo .logo-text {
     font-size: 1.2rem;
   }
-} 
\ No newline at end of file
+}
+
+.content {
+  max-width: 1024px;
+  width: 100%;
+  padding: 0 4%;
+  padding-top: 150px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media screen and (max-width: 767px) {
+  .content {
+    padding-top: 300px;
+    flex-direction: column;
+  }
+}
+
+.card {
+  width: 100%;
+  max-width: 300px;
+  min-width: 200px;
+  height: 250px;
+  background-color: var(--background-color, #292929); /* fallback to #292929 if variable isn't set */
+  margin: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
+  border: 2px solid rgba(7, 7, 7, 0.12);
+  font-size: 16px;
+  transition: all 0.3s ease;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+
+[data-theme="dark"] .card {
+  --background-color: #292929;
+}
+
+[data-theme="light"] .card {
+  --background-color: #F6C9C9FF; /* or #f9f9f9 if you prefer */
+}
+[data-theme="light"] .title {
+  --color: #212121;
+}
+[data-theme="light"] .text {
+  --color: #212121;
+}
+
+.icon {
+  margin: 0 auto;
+  width: 100%;
+  height: 80px;
+  max-width:80px;
+  background: linear-gradient(90deg, #FF7E7E 0%, #FF4848 40%, rgba(0, 0, 0, 0.28) 60%);
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  transition: all 0.8s ease;
+  background-position: 0;
+  background-size: 200px;
+}
+
+
+
+.material-icons.md-36 { font-size: 36px; }
+
+
+.card .title {
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  margin-top: 30px;
+  color: var(--color, #ffffff);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+}
+
+
+.card .text {
+  width: 80%;
+  margin: 0 auto;
+  font-size: 13px;
+  text-align: center;
+  margin-top: 20px;
+  color: var(--color, #ffffff);
+  font-weight: 200;
+  letter-spacing: 2px;
+  opacity: 0;
+  max-height:0;
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  height: 270px;
+}
+
+.card:hover .info {
+  height: 90%;
+}
+
+.card:hover .text {
+  transition: all 0.3s ease;
+  opacity: 1;
+  max-height:40px;
+}
+
+.card:hover .icon {
+  background-position: -120px;
+  transition: all 0.3s ease;
+}
+
+.card:hover .icon i {
+  background: linear-gradient(90deg, #FF7E7E, #FF4848);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  opacity: 1;
+  transition: all 0.3s ease;
+}
+a {
+  text-decoration: none;
+}
\ No newline at end of file
