diff --git a/css/feed.css b/css/feed.css
new file mode 100644
index 0000000..4311ca8
--- /dev/null
+++ b/css/feed.css
@@ -0,0 +1,217 @@
+/* Feed page - Multi-column grid, square images, like/comment/save actions */
+
+/* Full width layout */
+.layout > div[style*="flex:1"] {
+  margin: 0 !important;
+  max-width: 100% !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+
+.feed-main {
+  background: transparent !important;
+  padding: 20px 32px !important;
+  margin: 0 auto !important;
+  width: 100%;
+  max-width: 1400px;
+}
+
+/* Feed Header (centered) */
+.feed-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+.feed-header h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.feed-header p {
+  color: #64748b;
+  font-size: 1rem;
+}
+
+/* Filter Buttons (centered) */
+.filter-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 32px;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 16px;
+}
+.filter-btn {
+  background: transparent;
+  border: none;
+  padding: 8px 20px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #64748b;
+  cursor: pointer;
+  border-radius: 30px;
+  transition: all 0.2s;
+}
+.filter-btn.active {
+  background: var(--gradient);
+  color: white;
+}
+.filter-btn:hover:not(.active) {
+  background: #f1f5f9;
+}
+
+/* Posts Grid - multi‑column like marketplace */
+.posts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+}
+
+/* Post Card */
+.post-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+.post-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(59,130,246,0.12);
+}
+
+/* Post Header */
+.post-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-bottom: 1px solid #f0f2f5;
+}
+.post-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.post-author {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.post-name {
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+.post-handle {
+  font-size: 0.7rem;
+  color: #64748b;
+}
+.post-date {
+  font-size: 0.7rem;
+  color: #94a3b8;
+}
+
+/* Post Content */
+.post-content {
+  padding: 12px;
+  flex: 1;
+}
+.post-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin: 0 0 6px 0;
+}
+.post-description {
+  color: #334155;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  margin-bottom: 12px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+/* Square image */
+.post-image {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 12px;
+  margin-top: 8px;
+}
+
+/* Post Actions */
+.post-actions {
+  display: flex;
+  gap: 20px;
+  padding: 10px 12px 12px 12px;
+  border-top: 1px solid #f0f2f5;
+}
+.action-btn {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  color: #64748b;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.action-btn i {
+  font-size: 1.1rem;
+}
+.like-btn:hover {
+  color: #ef4444;
+}
+.comment-btn:hover {
+  color: #3b82f6;
+}
+.share-btn:hover {
+  color: #10b981;
+}
+.save-btn:hover {
+  color: #f59e0b;
+}
+
+/* Responsive: single column on small screens */
+@media (max-width: 700px) {
+  .posts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .feed-main {
+    padding: 16px !important;
+  }
+  .filter-buttons {
+    gap: 8px;
+  }
+  .filter-btn {
+    padding: 6px 14px;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .feed-main {
+    padding: 12px !important;
+  }
+  .post-header {
+    padding: 10px;
+  }
+  .post-content {
+    padding: 10px;
+  }
+  .post-title {
+    font-size: 1rem;
+  }
+  .post-actions {
+    padding: 8px 10px 10px 10px;
+  }
+}
\ No newline at end of file
diff --git a/html/feed1.html b/html/feed1.html
new file mode 100644
index 0000000..ebe4591
--- /dev/null
+++ b/html/feed1.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OnlyPrompt - Feed</title>
+  <link rel="stylesheet" href="../css/variables.css">
+  <link rel="stylesheet" href="../css/base.css">
+  <link rel="stylesheet" href="../css/sidebar.css">
+  <link rel="stylesheet" href="../css/login.css">
+  <link rel="stylesheet" href="../css/topbar.css">
+  <link rel="stylesheet" href="../css/feed.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+</head>
+<body>
+  <div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
+    
+    <div id="sidebar-container"></div>
+
+    <div style="flex:1; margin:40px auto; max-width:950px;">
+      
+      <div id="topbar-container"></div>
+
+      <main class="feed-main">
+        
+        <!-- Optional: Feed Header -->
+        <div class="feed-header">
+          <h1>Feed</h1>
+          <p>Latest prompts and inspiration from creators you follow</p>
+        </div>
+
+        <!-- Filter Buttons (optional) -->
+        <div class="filter-buttons">
+          <button class="filter-btn active">For You</button>
+          <button class="filter-btn">Following</button>
+          <button class="filter-btn">Trending</button>
+          <button class="filter-btn">Recent</button>
+        </div>
+
+        <!-- Posts Grid (einfach als Liste / Grid – hier als Grid wie Marketplace) -->
+        <div class="posts-grid">
+          
+          <!-- Post 1 -->
+          <div class="post-card" onclick="location.href='post-detail.html?id=1'">
+            <div class="post-header">
+              <img src="../images/content/creator1.png" alt="Sarah Jenkins" class="post-avatar">
+              <div class="post-author">
+                <span class="post-name">Sarah Jenkins</span>
+                <span class="post-handle">@sarahj</span>
+              </div>
+              <span class="post-date">2 hours ago</span>
+            </div>
+            <div class="post-content">
+              <h3 class="post-title">Conceptual Landscape Art</h3>
+              <p class="post-description">Enchanting, vintage, antique vibes. A journey through surreal landscapes.</p>
+              <img src="../images/content/post1.png" alt="Conceptual Landscape" class="post-image">
+            </div>
+            <!-- Like, Comment, Share, Save Buttons -->
+            <div class="post-actions">
+              <button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
+              <button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
+              <button class="action-btn share-btn"><i class="bi bi-share"></i></button>
+              <button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
+            </div>
+          </div>
+
+          <!-- Post 2 -->
+          <div class="post-card" onclick="location.href='post-detail.html?id=2'">
+            <div class="post-header">
+              <img src="../images/content/creator2.png" alt="Alex Chen" class="post-avatar">
+              <div class="post-author">
+                <span class="post-name">Alex Chen</span>
+                <span class="post-handle">@alexchen</span>
+              </div>
+              <span class="post-date">Yesterday</span>
+            </div>
+            <div class="post-content">
+              <h3 class="post-title">Minimalist Logo Design</h3>
+              <p class="post-description">Clean, modern, minimalist logo for tech startups.</p>
+              <img src="../images/content/post2.png" alt="Minimalist Logo" class="post-image">
+            </div>
+            <!-- Like, Comment, Share, Save Buttons -->
+            <div class="post-actions">
+              <button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
+              <button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
+              <button class="action-btn share-btn"><i class="bi bi-share"></i></button>
+              <button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
+            </div>
+          </div>
+
+          <!-- Post 3 -->
+          <div class="post-card" onclick="location.href='post-detail.html?id=3'">
+            <div class="post-header">
+              <img src="../images/content/creator3.png" alt="Mia Wong" class="post-avatar">
+              <div class="post-author">
+                <span class="post-name">Mia Wong</span>
+                <span class="post-handle">@miawong</span>
+              </div>
+              <span class="post-date">3 days ago</span>
+            </div>
+            <div class="post-content">
+              <h3 class="post-title">Futuristic Cityscape</h3>
+              <p class="post-description">Cyberpunk neon city with flying cars and rain.</p>
+              <img src="../images/content/post1.png" alt="Cityscape" class="post-image">
+            </div>
+            <!-- Like, Comment, Share, Save Buttons -->
+            <div class="post-actions">
+              <button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
+              <button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
+              <button class="action-btn share-btn"><i class="bi bi-share"></i></button>
+              <button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
+            </div>
+          </div>
+
+          <!-- Post 4 -->
+          <div class="post-card" onclick="location.href='post-detail.html?id=4'">
+            <div class="post-header">
+              <img src="../images/content/creator4.png" alt="Tom Rivera" class="post-avatar">
+              <div class="post-author">
+                <span class="post-name">Tom Rivera</span>
+                <span class="post-handle">@tomrivera</span>
+              </div>
+              <span class="post-date">5 days ago</span>
+            </div>
+            <div class="post-content">
+              <h3 class="post-title">Watercolor Pet Portrait</h3>
+              <p class="post-description">Soft watercolor style, cute pet portrait.</p>
+              <img src="../images/content/post2.png" alt="Watercolor Pet" class="post-image">
+            </div>
+            <!-- Like, Comment, Share, Save Buttons -->
+            <div class="post-actions">
+              <button class="action-btn like-btn"><i class="bi bi-heart"></i> <span>128</span></button>
+              <button class="action-btn comment-btn"><i class="bi bi-chat"></i> <span>15</span></button>
+              <button class="action-btn share-btn"><i class="bi bi-share"></i></button>
+              <button class="action-btn save-btn"><i class="bi bi-bookmark"></i></button>
+            </div>
+          </div>
+
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <script>
+    fetch('../html/sidebar.html')
+      .then(r => r.text())
+      .then(data => {
+        document.getElementById('sidebar-container').innerHTML = data;
+        // Remove 'active' from all sidebar links
+        document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
+          link.classList.remove('active');
+        });
+        // Set 'active' on the first link (Dashboard) - index 0
+        const firstLink = document.querySelectorAll('#sidebar-container .sidebar li a')[0];
+        if (firstLink) firstLink.classList.add('active');
+      });
+
+    fetch('../html/topbar.html')
+      .then(r => r.text())
+      .then(data => document.getElementById('topbar-container').innerHTML = data);
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/marketplace2.html b/html/marketplace2.html
index 512372b..4c54c4b 100644
--- a/html/marketplace2.html
+++ b/html/marketplace2.html
@@ -45,7 +45,7 @@
           
           <!-- Prompt Card 1 -->
           <div class="prompt-card">
-            <img src="../images/content/prompt1.jpg" alt="Creative Blog Post Generator" class="prompt-img">
+            <img src="../images/content/market1.png" alt="Creative Blog Post Generator" class="prompt-img">
             <div class="prompt-info">
               <h3 class="prompt-title">Creative Blog Post Generator</h3>
               <div class="prompt-author">@JaneDoe</div>
@@ -64,7 +64,7 @@
 
           <!-- Prompt Card 2 -->
           <div class="prompt-card">
-            <img src="../images/content/prompt2.png" alt="Python Code Assistant" class="prompt-img">
+            <img src="../images/content/market2.png" alt="Python Code Assistant" class="prompt-img">
             <div class="prompt-info">
               <h3 class="prompt-title">Python Code Assistant</h3>
               <div class="prompt-author">@JaneDoe</div>
@@ -83,7 +83,7 @@
 
           <!-- Prompt Card 3 -->
           <div class="prompt-card">
-            <img src="../images/content/prompt3.jpg" alt="Digital Art Style Guide" class="prompt-img">
+            <img src="../images/content/market3.png" alt="Digital Art Style Guide" class="prompt-img">
             <div class="prompt-info">
               <h3 class="prompt-title">Digital Art Style Guide</h3>
               <div class="prompt-author">@JaneDoe</div>
@@ -102,7 +102,7 @@
 
           <!-- Prompt Card 4 -->
           <div class="prompt-card">
-            <img src="../images/content/prompt4.jpg" alt="Marketing Copywriter" class="prompt-img">
+            <img src="../images/content/market4.png" alt="Marketing Copywriter" class="prompt-img">
             <div class="prompt-info">
               <h3 class="prompt-title">Marketing Copywriter</h3>
               <div class="prompt-author">@JaneDoe</div>
@@ -121,7 +121,7 @@
 
           <!-- Prompt Card 5 -->
           <div class="prompt-card">
-            <img src="../images/content/prompt5.jpg" alt="Midjourney Image Prompts" class="prompt-img">
+            <img src="../images/content/market5.png" alt="Midjourney Image Prompts" class="prompt-img">
             <div class="prompt-info">
               <h3 class="prompt-title">Midjourney Image Prompts</h3>
               <div class="prompt-author">@JaneDoe</div>
@@ -140,7 +140,7 @@
 
           <!-- Prompt Card 6 -->
           <div class="prompt-card">
-            <img src="../images/content/prompt6.jpg" alt="UI Design Assistant" class="prompt-img">
+            <img src="../images/content/market6.png" alt="UI Design Assistant" class="prompt-img">
             <div class="prompt-info">
               <h3 class="prompt-title">UI Design Assistant</h3>
               <div class="prompt-author">@JaneDoe</div>
diff --git a/images/content/creator3.png b/images/content/creator3.png
new file mode 100644
index 0000000..373a02c
Binary files /dev/null and b/images/content/creator3.png differ
diff --git a/images/content/creator5.png b/images/content/creator5.png
new file mode 100644
index 0000000..64dc15e
Binary files /dev/null and b/images/content/creator5.png differ
diff --git a/images/content/creator6.png b/images/content/creator6.png
new file mode 100644
index 0000000..794a0e6
Binary files /dev/null and b/images/content/creator6.png differ
diff --git a/images/content/market1.png b/images/content/market1.png
new file mode 100644
index 0000000..6fbde38
Binary files /dev/null and b/images/content/market1.png differ
diff --git a/images/content/prompt2.png b/images/content/market2.png
similarity index 100%
rename from images/content/prompt2.png
rename to images/content/market2.png
diff --git a/images/content/market3.png b/images/content/market3.png
new file mode 100644
index 0000000..a730bff
Binary files /dev/null and b/images/content/market3.png differ
diff --git a/images/content/market4.png b/images/content/market4.png
new file mode 100644
index 0000000..de3ba0f
Binary files /dev/null and b/images/content/market4.png differ
diff --git a/images/content/market5.png b/images/content/market5.png
new file mode 100644
index 0000000..dd56dc8
Binary files /dev/null and b/images/content/market5.png differ
diff --git a/images/content/market6.png b/images/content/market6.png
new file mode 100644
index 0000000..c57f9f4
Binary files /dev/null and b/images/content/market6.png differ