diff --git a/OnlyPrompt.Frontend/chats.html b/OnlyPrompt.Frontend/chats.html
index b6abbd0..7013c5f 100644
--- a/OnlyPrompt.Frontend/chats.html
+++ b/OnlyPrompt.Frontend/chats.html
@@ -1,130 +1,175 @@
 <!-- OnlyPrompt - Chats page: 
         - Direct messaging interface with conversation list and active chat window -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OnlyPrompt - Chats</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/chats.css">
-  <script src="../js/profile-shared.js"></script>
-  <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>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OnlyPrompt - Chats</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/chats.css" />
+    <script src="../js/profile-shared.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    />
+  </head>
+  <body>
+    <div class="layout">
+      <div id="sidebar-container"></div>
 
-    <div style="flex:1; display: flex; flex-direction: column;">
-      
-      <div id="topbar-container"></div>
+      <div class="page-body">
+        <div id="topbar-container"></div>
 
-      <main class="chats-main">
-        <!-- Chat Container: Left column (list) + Right column (active chat) -->
-        <div class="chat-container">
-          
-          <!-- Left Column: Chat Overview -->
-          <div class="chat-list">
-            <div class="chat-list-header">
-              <h2>Messages</h2>
-              <button class="new-chat-btn"><i class="bi bi-pencil-square"></i></button>
+        <main class="chats-main">
+          <!-- Chat Container: Left column (list) + Right column (active chat) -->
+          <div class="chat-container">
+            <!-- Left Column: Chat Overview -->
+            <div class="chat-list">
+              <div class="chat-list-header">
+                <h2>Messages</h2>
+                <button class="new-chat-btn">
+                  <i class="bi bi-pencil-square"></i>
+                </button>
+              </div>
+              <div class="chat-list-items">
+                <!-- Chat Entry 1 (active) -->
+                <div class="chat-item active">
+                  <img
+                    src="../images/content/creator2.png"
+                    alt="Alex Chen"
+                    class="chat-avatar"
+                  />
+                  <div class="chat-item-info">
+                    <div class="chat-name">Alex Chen</div>
+                    <div class="chat-last-msg">
+                      Hey Sarah! Really loved your last video on minimalism...
+                    </div>
+                  </div>
+                  <div class="chat-time">10:17 AM</div>
+                </div>
+                <!-- Chat Entry 2 -->
+                <div class="chat-item">
+                  <img
+                    src="../images/content/creator3.png"
+                    alt="Mia Wong"
+                    class="chat-avatar"
+                  />
+                  <div class="chat-item-info">
+                    <div class="chat-name">Mia Wong</div>
+                    <div class="chat-last-msg">
+                      Thanks for the prompt tips! They worked perfectly.
+                    </div>
+                  </div>
+                  <div class="chat-time">Yesterday</div>
+                </div>
+                <!-- Chat Entry 3 -->
+                <div class="chat-item">
+                  <img
+                    src="../images/content/creator4.png"
+                    alt="Tom Rivera"
+                    class="chat-avatar"
+                  />
+                  <div class="chat-item-info">
+                    <div class="chat-name">Tom Rivera</div>
+                    <div class="chat-last-msg">
+                      Let's schedule a call for the collab?
+                    </div>
+                  </div>
+                  <div class="chat-time">Yesterday</div>
+                </div>
+              </div>
             </div>
-            <div class="chat-list-items">
-              <!-- Chat Entry 1 (active) -->
-              <div class="chat-item active">
-                <img src="../images/content/creator2.png" alt="Alex Chen" class="chat-avatar">
-                <div class="chat-item-info">
-                  <div class="chat-name">Alex Chen</div>
-                  <div class="chat-last-msg">Hey Sarah! Really loved your last video on minimalism...</div>
+
+            <!-- Right Column: Active Chat (with Alex Chen) -->
+            <div class="chat-active">
+              <div class="chat-header">
+                <img
+                  src="../images/content/creator2.png"
+                  alt="Alex Chen"
+                  class="chat-avatar-large"
+                />
+                <div class="chat-header-info">
+                  <div class="chat-header-name">Alex Chen</div>
+                  <div class="chat-header-status">
+                    <span class="online-dot"></span> Online
+                  </div>
                 </div>
-                <div class="chat-time">10:17 AM</div>
               </div>
-              <!-- Chat Entry 2 -->
-              <div class="chat-item">
-                <img src="../images/content/creator3.png" alt="Mia Wong" class="chat-avatar">
-                <div class="chat-item-info">
-                  <div class="chat-name">Mia Wong</div>
-                  <div class="chat-last-msg">Thanks for the prompt tips! They worked perfectly.</div>
+              <div class="chat-messages">
+                <!-- Message from Alex -->
+                <div class="message received">
+                  <div class="message-bubble">
+                    Hey Sarah! Really loved your last video on minimalism. Quick
+                    question about your workspace layout?
+                  </div>
+                  <div class="message-time">10:15 AM</div>
+                </div>
+                <!-- Reply from Sarah -->
+                <div class="message sent">
+                  <div class="message-bubble">
+                    Thanks Alex! Appreciate it. Yes, happy to share! The desk is
+                    from Article, and the shelving unit is custom-built. Highly
+                    recommend a clean setup!
+                  </div>
+                  <div class="message-time">10:16 AM</div>
+                </div>
+                <!-- Alex replies -->
+                <div class="message received">
+                  <div class="message-bubble">
+                    Thanks so much! Your aesthetic is exactly what I'm aiming
+                    for. Can't wait for your next piece!
+                  </div>
+                  <div class="message-time">10:17 AM</div>
+                </div>
+                <!-- Sarah replies -->
+                <div class="message sent">
+                  <div class="message-bubble">
+                    Awesome! Let me know if you need more tips. Enjoy the
+                    process! 😊
+                  </div>
+                  <div class="message-time">10:18 AM</div>
                 </div>
-                <div class="chat-time">Yesterday</div>
               </div>
-              <!-- Chat Entry 3 -->
-              <div class="chat-item">
-                <img src="../images/content/creator4.png" alt="Tom Rivera" class="chat-avatar">
-                <div class="chat-item-info">
-                  <div class="chat-name">Tom Rivera</div>
-                  <div class="chat-last-msg">Let's schedule a call for the collab?</div>
-                </div>
-                <div class="chat-time">Yesterday</div>
+              <div class="chat-input-area">
+                <input type="text" placeholder="Type your message..." />
+                <button class="send-btn">Send</button>
               </div>
             </div>
           </div>
-
-          <!-- Right Column: Active Chat (with Alex Chen) -->
-          <div class="chat-active">
-            <div class="chat-header">
-              <img src="../images/content/creator2.png" alt="Alex Chen" class="chat-avatar-large">
-              <div class="chat-header-info">
-                <div class="chat-header-name">Alex Chen</div>
-                <div class="chat-header-status"><span class="online-dot"></span> Online</div>
-              </div>
-            </div>
-            <div class="chat-messages">
-              <!-- Message from Alex -->
-              <div class="message received">
-                <div class="message-bubble">Hey Sarah! Really loved your last video on minimalism. Quick question about your workspace layout?</div>
-                <div class="message-time">10:15 AM</div>
-              </div>
-              <!-- Reply from Sarah -->
-              <div class="message sent">
-                <div class="message-bubble">Thanks Alex! Appreciate it. Yes, happy to share! The desk is from Article, and the shelving unit is custom-built. Highly recommend a clean setup!</div>
-                <div class="message-time">10:16 AM</div>
-              </div>
-              <!-- Alex replies -->
-              <div class="message received">
-                <div class="message-bubble">Thanks so much! Your aesthetic is exactly what I'm aiming for. Can't wait for your next piece!</div>
-                <div class="message-time">10:17 AM</div>
-              </div>
-              <!-- Sarah replies -->
-              <div class="message sent">
-                <div class="message-bubble">Awesome! Let me know if you need more tips. Enjoy the process! 😊</div>
-                <div class="message-time">10:18 AM</div>
-              </div>
-            </div>
-            <div class="chat-input-area">
-              <input type="text" placeholder="Type your message...">
-              <button class="send-btn">Send</button>
-            </div>
-          </div>
-
-        </div>
-      </main>
+        </main>
+      </div>
     </div>
-  </div>
 
-  <script>
-    fetch('/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');
+    <script>
+      fetch("/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 Chats link (4th link, index 3)
+          const chatsLink = document.querySelectorAll(
+            "#sidebar-container .sidebar li a",
+          )[3];
+          if (chatsLink) chatsLink.classList.add("active");
         });
-        // Set 'active' on the Chats link (4th link, index 3)
-        const chatsLink = document.querySelectorAll('#sidebar-container .sidebar li a')[3];
-        if (chatsLink) chatsLink.classList.add('active');
-      });
 
-    fetch('/topbar.html')
-      .then(r => r.text())
-      .then(data => document.getElementById('topbar-container').innerHTML = data);
-  </script>
-</body>
+      fetch("/topbar.html")
+        .then((r) => r.text())
+        .then(
+          (data) =>
+            (document.getElementById("topbar-container").innerHTML = data),
+        );
+    </script>
+  </body>
 </html>
diff --git a/OnlyPrompt.Frontend/community.html b/OnlyPrompt.Frontend/community.html
index c22c3c6..4505b2e 100644
--- a/OnlyPrompt.Frontend/community.html
+++ b/OnlyPrompt.Frontend/community.html
@@ -1,204 +1,225 @@
 <!-- OnlyPrompt - Community page:
       - Discover creators, follow/unfollow, dynamic via API -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OnlyPrompt - Discover Creators</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/community.css">
-  <script src="../js/profile-shared.js"></script>
-  <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);">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OnlyPrompt - Discover Creators</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/community.css" />
+    <script src="../js/profile-shared.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    />
+  </head>
+  <body>
+    <div class="layout">
+      <div id="sidebar-container"></div>
 
-    <div id="sidebar-container"></div>
+      <div class="page-body">
+        <div id="topbar-container"></div>
 
-    <div style="flex:1; margin:40px auto; max-width:950px;">
+        <main class="creators-main">
+          <div class="creators-header">
+            <h1>Discover Creators</h1>
+            <p>Follow your favorite prompt artists and get inspired.</p>
+          </div>
 
-      <div id="topbar-container"></div>
+          <div class="filter-buttons">
+            <button class="filter-btn active" data-sort="popular">
+              Popular
+            </button>
+            <button class="filter-btn" data-sort="prompts">Rising</button>
+            <button class="filter-btn" data-sort="new">New</button>
+            <button class="filter-btn" data-sort="rating">Top Rated</button>
+          </div>
 
-      <main class="creators-main">
+          <div class="creators-grid" id="creators-grid"></div>
 
-        <div class="creators-header">
-          <h1>Discover Creators</h1>
-          <p>Follow your favorite prompt artists and get inspired.</p>
-        </div>
+          <div id="creators-empty" class="state-empty">
+            <i class="bi bi-people state-icon"></i>
+            <h3 id="creators-empty-title" class="state-title">
+              No creators found
+            </h3>
+            <p id="creators-empty-text">
+              Check back later for new creators to follow.
+            </p>
+          </div>
 
-        <div class="filter-buttons">
-          <button class="filter-btn active" data-sort="popular">Popular</button>
-          <button class="filter-btn" data-sort="prompts">Rising</button>
-          <button class="filter-btn" data-sort="new">New</button>
-          <button class="filter-btn" data-sort="rating">Top Rated</button>
-        </div>
-
-        <div class="creators-grid" id="creators-grid"></div>
-
-        <div id="creators-empty" style="display:none; text-align:center; padding:60px 20px; color:#64748b;">
-          <i class="bi bi-people" style="font-size:3rem; display:block; margin-bottom:16px;"></i>
-          <h3 id="creators-empty-title" style="margin-bottom:8px;">No creators found</h3>
-          <p id="creators-empty-text">Check back later for new creators to follow.</p>
-        </div>
-
-        <div id="creators-error" style="display:none; text-align:center; padding:60px 20px; color:#ef4444;">
-          <i class="bi bi-exclamation-circle" style="font-size:3rem; display:block; margin-bottom:16px;"></i>
-          <h3 style="margin-bottom:8px;">Could not load creators</h3>
-          <p id="creators-error-msg"></p>
-        </div>
-
-      </main>
+          <div id="creators-error" class="state-error">
+            <i class="bi bi-exclamation-circle state-icon"></i>
+            <h3 class="state-title">Could not load creators</h3>
+            <p id="creators-error-msg"></p>
+          </div>
+        </main>
+      </div>
     </div>
-  </div>
 
-  <script type="module">
-    // ── Sidebar & Topbar ─────────────────────────────────────────────
-    fetch('/sidebar.html')
-      .then(r => r.text())
-      .then(data => {
-        document.getElementById('sidebar-container').innerHTML = data;
-        document.querySelectorAll('#sidebar-container .sidebar a').forEach(l => l.classList.remove('active'));
-        const thirdLink = document.querySelectorAll('#sidebar-container .sidebar li a')[2];
-        if (thirdLink) thirdLink.classList.add('active');
-      });
-    fetch('/topbar.html')
-      .then(r => r.text())
-      .then(data => document.getElementById('topbar-container').innerHTML = data);
+    <script type="module">
+      // ── Sidebar & Topbar ─────────────────────────────────────────────
+      fetch("/sidebar.html")
+        .then((r) => r.text())
+        .then((data) => {
+          document.getElementById("sidebar-container").innerHTML = data;
+          document
+            .querySelectorAll("#sidebar-container .sidebar a")
+            .forEach((l) => l.classList.remove("active"));
+          const thirdLink = document.querySelectorAll(
+            "#sidebar-container .sidebar li a",
+          )[2];
+          if (thirdLink) thirdLink.classList.add("active");
+        });
+      fetch("/topbar.html")
+        .then((r) => r.text())
+        .then(
+          (data) =>
+            (document.getElementById("topbar-container").innerHTML = data),
+        );
 
-    // ── Helpers ──────────────────────────────────────────────────────
-    function renderStars(rating) {
-      if (!rating) return '';
-      const stars = Math.round(rating);
-      return `<span style="color:#f59e0b">${'★'.repeat(stars)}${'☆'.repeat(5 - stars)}</span> <span style="color:#64748b;font-size:0.8rem">${rating.toFixed(1)}</span>`;
-    }
+      // ── Helpers ──────────────────────────────────────────────────────
+      function renderStars(rating) {
+        if (!rating) return "";
+        const stars = Math.round(rating);
+        return `<span class="creator-stars">${"★".repeat(stars)}${"☆".repeat(5 - stars)}</span> <span class="creator-stars-value">${rating.toFixed(1)}</span>`;
+      }
 
-    function renderCard(c) {
-      return `
+      function renderCard(c) {
+        return `
       <div class="creator-card">
         <img class="creator-avatar"
-             src="${c.avatarUrl || '../images/content/cat.png'}"
+             src="${c.avatarUrl || "../images/content/cat.png"}"
              alt="${c.displayName}"
-             style="cursor:pointer"
              onclick="location.href='/profile?id=${c.userId}'">
         <div class="creator-info">
           <h3 class="creator-name"
-              style="cursor:pointer"
               onclick="location.href='/profile?id=${c.userId}'">${c.displayName}</h3>
           <div class="creator-handle">@${c.slug}</div>
-          <p class="creator-bio">${c.bio ?? 'No bio yet.'}</p>
+          <p class="creator-bio">${c.bio ?? "No bio yet."}</p>
           <div class="creator-stats">
             <span><i class="bi bi-puzzle"></i> ${c.promptCount} prompts</span>
             <span><i class="bi bi-people"></i> ${c.subscribers}</span>
-            ${c.averageRating > 0 ? `<span>${renderStars(c.averageRating)}</span>` : ''}
+            ${c.averageRating > 0 ? `<span>${renderStars(c.averageRating)}</span>` : ""}
           </div>
-          <button class="follow-btn ${c.isFollowing ? 'following' : ''}"
+          <button class="follow-btn ${c.isFollowing ? "following" : ""}"
                   data-userid="${c.userId}"
                   data-following="${c.isFollowing}">
-            ${c.isFollowing ? 'Following' : 'Follow'}
+            ${c.isFollowing ? "Following" : "Follow"}
           </button>
         </div>
       </div>`;
-    }
-
-    // ── Follow / Unfollow ────────────────────────────────────────────
-    async function toggleFollow(btn) {
-      const userId = btn.dataset.userid;
-      const isFollowing = btn.dataset.following === 'true';
-      btn.disabled = true;
-
-      const res = await fetch(`/api/v1/subscriptions/${userId}`, {
-        method: isFollowing ? 'DELETE' : 'PUT',
-        credentials: 'same-origin'
-      });
-
-      if (res.status === 401) { location.href = '/login'; return; }
-
-      if (res.ok) {
-        const nowFollowing = !isFollowing;
-        btn.dataset.following = nowFollowing;
-        btn.textContent = nowFollowing ? 'Following' : 'Follow';
-        btn.classList.toggle('following', nowFollowing);
       }
 
-      btn.disabled = false;
-    }
+      // ── Follow / Unfollow ────────────────────────────────────────────
+      async function toggleFollow(btn) {
+        const userId = btn.dataset.userid;
+        const isFollowing = btn.dataset.following === "true";
+        btn.disabled = true;
 
-    // ── Load Creators ────────────────────────────────────────────────
-    const grid     = document.getElementById('creators-grid');
-    const emptyEl  = document.getElementById('creators-empty');
-    const emptyTitle = document.getElementById('creators-empty-title');
-    const emptyText = document.getElementById('creators-empty-text');
-    const errorEl  = document.getElementById('creators-error');
-    const errorMsg = document.getElementById('creators-error-msg');
-
-    let activeSort = 'popular';
-    let currentSearch = new URLSearchParams(location.search).get('search') || '';
-
-    function getSearchTerm() {
-      return currentSearch.trim();
-    }
-
-    async function loadCreators(sort = activeSort) {
-      activeSort = sort;
-      grid.innerHTML = '';
-      emptyEl.style.display = 'none';
-      errorEl.style.display  = 'none';
-
-      try {
-        const params = new URLSearchParams({
-          sort,
-          limit: '50'
+        const res = await fetch(`/api/v1/subscriptions/${userId}`, {
+          method: isFollowing ? "DELETE" : "PUT",
+          credentials: "same-origin",
         });
-        const search = getSearchTerm();
-        if (search) params.set('search', search);
 
-        const res = await fetch(`/api/v1/profiles?${params}`);
-        if (res.status === 401) { location.href = '/login'; return; }
-        if (!res.ok) throw new Error(`Server error ${res.status}`);
-
-        const creators = await res.json();
-        if (creators.length === 0) {
-          const search = getSearchTerm();
-          emptyTitle.textContent = search ? 'No matching creators' : 'No creators found';
-          emptyText.textContent = search
-            ? `No creator matches "${search}". Try another name or clear the search.`
-            : 'Create another local user to see creators here.';
-          emptyEl.style.display = 'block';
+        if (res.status === 401) {
+          location.href = "/login";
           return;
         }
 
-        grid.innerHTML = creators.map(renderCard).join('');
+        if (res.ok) {
+          const nowFollowing = !isFollowing;
+          btn.dataset.following = nowFollowing;
+          btn.textContent = nowFollowing ? "Following" : "Follow";
+          btn.classList.toggle("following", nowFollowing);
+        }
 
-        grid.querySelectorAll('.follow-btn').forEach(btn => {
-          btn.addEventListener('click', () => toggleFollow(btn));
-        });
-      } catch (e) {
-        errorEl.style.display  = 'block';
-        errorMsg.textContent = e.message;
+        btn.disabled = false;
       }
-    }
 
-    // ── Filter buttons ───────────────────────────────────────────────
-    document.querySelectorAll('.filter-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        loadCreators(btn.dataset.sort);
+      // ── Load Creators ────────────────────────────────────────────────
+      const grid = document.getElementById("creators-grid");
+      const emptyEl = document.getElementById("creators-empty");
+      const emptyTitle = document.getElementById("creators-empty-title");
+      const emptyText = document.getElementById("creators-empty-text");
+      const errorEl = document.getElementById("creators-error");
+      const errorMsg = document.getElementById("creators-error-msg");
+
+      let activeSort = "popular";
+      let currentSearch =
+        new URLSearchParams(location.search).get("search") || "";
+
+      function getSearchTerm() {
+        return currentSearch.trim();
+      }
+
+      async function loadCreators(sort = activeSort) {
+        activeSort = sort;
+        grid.innerHTML = "";
+        emptyEl.style.display = "none";
+        errorEl.style.display = "none";
+
+        try {
+          const params = new URLSearchParams({
+            sort,
+            limit: "50",
+          });
+          const search = getSearchTerm();
+          if (search) params.set("search", search);
+
+          const res = await fetch(`/api/v1/profiles?${params}`);
+          if (res.status === 401) {
+            location.href = "/login";
+            return;
+          }
+          if (!res.ok) throw new Error(`Server error ${res.status}`);
+
+          const creators = await res.json();
+          if (creators.length === 0) {
+            const search = getSearchTerm();
+            emptyTitle.textContent = search
+              ? "No matching creators"
+              : "No creators found";
+            emptyText.textContent = search
+              ? `No creator matches "${search}". Try another name or clear the search.`
+              : "Create another local user to see creators here.";
+            emptyEl.style.display = "block";
+            return;
+          }
+
+          grid.innerHTML = creators.map(renderCard).join("");
+
+          grid.querySelectorAll(".follow-btn").forEach((btn) => {
+            btn.addEventListener("click", () => toggleFollow(btn));
+          });
+        } catch (e) {
+          errorEl.style.display = "block";
+          errorMsg.textContent = e.message;
+        }
+      }
+
+      // ── Filter buttons ───────────────────────────────────────────────
+      document.querySelectorAll(".filter-btn").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          document
+            .querySelectorAll(".filter-btn")
+            .forEach((b) => b.classList.remove("active"));
+          btn.classList.add("active");
+          loadCreators(btn.dataset.sort);
+        });
       });
-    });
 
-    window.applyCreatorSearch = (value) => {
-      currentSearch = value.trim();
-      loadCreators(activeSort);
-    };
+      window.applyCreatorSearch = (value) => {
+        currentSearch = value.trim();
+        loadCreators(activeSort);
+      };
 
-    loadCreators();
-  </script>
-</body>
+      loadCreators();
+    </script>
+  </body>
 </html>
diff --git a/OnlyPrompt.Frontend/create.html b/OnlyPrompt.Frontend/create.html
index c1fc404..1938c0e 100644
--- a/OnlyPrompt.Frontend/create.html
+++ b/OnlyPrompt.Frontend/create.html
@@ -17,11 +17,11 @@
   <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 class="layout">
     
     <div id="sidebar-container"></div>
 
-    <div style="flex:1; display: flex; flex-direction: column;">
+    <div class="page-body">
       
       <div id="topbar-container"></div>
 
@@ -76,8 +76,8 @@
               <label for="exampleImage">Example Image (optional)</label>
               <input type="file" id="exampleImage" name="exampleImage" accept="image/png, image/jpeg, image/jpg">
               <small class="form-hint">Upload a PNG or JPG – preview will appear below.</small>
-              <div id="imagePreview" style="margin-top: 10px; display: none;">
-                <img id="previewImg" src="#" alt="Preview" style="max-width: 100%; max-height: 200px; border-radius: 12px;">
+              <div id="imagePreview">
+                <img id="previewImg" src="#" alt="Preview">
               </div>
             </div>
 
@@ -88,7 +88,7 @@
                 <button type="button" id="freeBtn" class="price-option active">Free</button>
                 <button type="button" id="paidBtn" class="price-option">Paid</button>
               </div>
-              <div id="priceField" style="display: none;">
+              <div id="priceField">
                 <input type="number" id="price" name="price" step="0.01" min="0" placeholder="Price in USD (e.g., 19.99)">
               </div>
               <small class="form-hint">You can set a price later or keep it free.</small>
@@ -99,7 +99,7 @@
               <button type="submit" class="submit-btn" id="submitPromptBtn">Publish Prompt</button>
               <button type="button" class="cancel-btn">Cancel</button>
             </div>
-            <p id="create-status" style="text-align:center;color:#64748b;margin:0;"></p>
+            <p id="create-status"></p></p>
           </form>
         </div>
       </main>
diff --git a/OnlyPrompt.Frontend/css/base.css b/OnlyPrompt.Frontend/css/base.css
index 493f50e..7fb867c 100644
--- a/OnlyPrompt.Frontend/css/base.css
+++ b/OnlyPrompt.Frontend/css/base.css
@@ -28,7 +28,7 @@ body {
 .form-error ul {
   list-style: none;
   padding-left: 0;
-  list-style: '*'; 
+  list-style: "*";
 }
 
 .form-error li {
@@ -38,4 +38,46 @@ body {
 .form-error li .error {
   color: red;
   font-style: italic;
-}
\ No newline at end of file
+}
+
+/* ── Layout ──────────────────────────────────────────────────────────── */
+.layout {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg);
+}
+
+/* Main content area - flex child that fills remaining space */
+.page-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+/* ── Reusable empty / error state components ─────────────────────────── */
+.state-empty,
+.state-error {
+  display: none;
+  text-align: center;
+  padding: 60px 20px;
+}
+.state-empty {
+  color: #64748b;
+}
+.state-error {
+  color: #ef4444;
+}
+
+.state-icon {
+  font-size: 3rem;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.state-title {
+  margin-bottom: 8px;
+}
diff --git a/OnlyPrompt.Frontend/css/chats.css b/OnlyPrompt.Frontend/css/chats.css
index e5205ca..4464dbe 100644
--- a/OnlyPrompt.Frontend/css/chats.css
+++ b/OnlyPrompt.Frontend/css/chats.css
@@ -1,13 +1,5 @@
 /* Chats page - Two column layout: chat list + active chat window */
 
-/* Full width layout */
-.layout > div[style*="flex:1"] {
-  margin: 0 !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  width: 100% !important;
-}
-
 .chats-main {
   flex: 1;
   padding: 20px 32px;
@@ -20,7 +12,7 @@
   gap: 24px;
   background: #fff;
   border-radius: 18px;
-  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
   overflow: hidden;
   height: calc(100vh - 120px); /* Adjust based on topbar height */
   min-height: 500px;
@@ -244,4 +236,4 @@
   .chat-active {
     height: 500px;
   }
-}
\ No newline at end of file
+}
diff --git a/OnlyPrompt.Frontend/css/community.css b/OnlyPrompt.Frontend/css/community.css
index a6fa1c9..b1ada51 100644
--- a/OnlyPrompt.Frontend/css/community.css
+++ b/OnlyPrompt.Frontend/css/community.css
@@ -1,13 +1,5 @@
 /* Creators page - Discover creators, filter buttons, creator cards */
 
-/* Full width layout */
-.layout > div[style*="flex:1"] {
-  margin: 0 !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  width: 100% !important;
-}
-
 .creators-main {
   background: transparent !important;
   padding: 20px 32px !important;
@@ -71,15 +63,17 @@
 .creator-card {
   background: #fff;
   border-radius: 18px;
-  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
   padding: 20px;
   display: flex;
   gap: 16px;
-  transition: transform 0.2s, box-shadow 0.2s;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
 }
 .creator-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(59,130,246,0.12);
+  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
 }
 
 .creator-avatar {
@@ -177,4 +171,19 @@
   .follow-btn {
     width: 100%;
   }
-}
\ No newline at end of file
+}
+
+/* Star rating in creator cards */
+.creator-stars {
+  color: #f59e0b;
+}
+.creator-stars-value {
+  color: #64748b;
+  font-size: 0.8rem;
+}
+
+/* Clickable elements */
+.creator-card .creator-avatar,
+.creator-card .creator-name {
+  cursor: pointer;
+}
diff --git a/OnlyPrompt.Frontend/css/create.css b/OnlyPrompt.Frontend/css/create.css
index 516c29a..c7a17cb 100644
--- a/OnlyPrompt.Frontend/css/create.css
+++ b/OnlyPrompt.Frontend/css/create.css
@@ -1,13 +1,5 @@
 /* Create page - Form for publishing new AI prompts */
 
-/* Full width layout */
-.layout > div[style*="flex:1"] {
-  margin: 0 !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  width: 100% !important;
-}
-
 .create-main {
   flex: 1;
   display: flex;
@@ -22,12 +14,12 @@
   width: 100%;
   background: #fff;
   border-radius: 18px;
-  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
   padding: 32px;
   transition: box-shadow 0.2s;
 }
 .create-container:hover {
-  box-shadow: 0 8px 20px rgba(59,130,246,0.12);
+  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
 }
 
 /* Header */
@@ -77,7 +69,7 @@
 .form-group select:focus {
   outline: none;
   border-color: #7c3aed;
-  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
 }
 .form-hint {
   font-size: 0.75rem;
@@ -106,6 +98,25 @@
 }
 #priceField {
   margin-top: 8px;
+  display: none;
+}
+
+/* Image preview */
+#imagePreview {
+  margin-top: 10px;
+  display: none;
+}
+#imagePreview img {
+  max-width: 100%;
+  max-height: 200px;
+  border-radius: 12px;
+}
+
+/* Status message */
+#create-status {
+  text-align: center;
+  color: #64748b;
+  margin: 0;
 }
 
 /* Buttons */
@@ -114,7 +125,8 @@
   gap: 16px;
   margin-top: 8px;
 }
-.submit-btn, .cancel-btn {
+.submit-btn,
+.cancel-btn {
   flex: 1;
   border: none;
   padding: 12px;
@@ -132,7 +144,8 @@
   background: #f1f5f9;
   color: #475569;
 }
-.submit-btn:hover, .cancel-btn:hover {
+.submit-btn:hover,
+.cancel-btn:hover {
   opacity: 0.85;
 }
 
@@ -152,4 +165,4 @@
   .form-actions {
     flex-direction: column;
   }
-}
\ No newline at end of file
+}
diff --git a/OnlyPrompt.Frontend/css/dashboard.css b/OnlyPrompt.Frontend/css/dashboard.css
index 233010f..0fbfe60 100644
--- a/OnlyPrompt.Frontend/css/dashboard.css
+++ b/OnlyPrompt.Frontend/css/dashboard.css
@@ -1,13 +1,5 @@
 /* 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;
@@ -125,7 +117,7 @@
 .post-title {
   font-size: 1.1rem;
   font-weight: 700;
-  margin: 0 0 6px 0;
+  margin: 10px 0 6px 0;
 }
 .post-description {
   color: #334155;
diff --git a/OnlyPrompt.Frontend/css/marketplace.css b/OnlyPrompt.Frontend/css/marketplace.css
index 370e3c9..77ff255 100644
--- a/OnlyPrompt.Frontend/css/marketplace.css
+++ b/OnlyPrompt.Frontend/css/marketplace.css
@@ -1,13 +1,5 @@
 /* Marketplace Page - Prompt cards, filter buttons, full width layout */
 
-/* Full width layout */
-.layout > div[style*="flex:1"] {
-  margin: 0 !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  width: 100% !important;
-}
-
 .marketplace-main {
   background: transparent !important;
   padding: 20px 32px !important;
@@ -251,3 +243,238 @@
   border-color: #6366f1;
   background: #f5f3ff;
 }
+
+/* ── Payment Modal ──────────────────────────────────────────────────── */
+#payment-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+}
+
+.payment-modal {
+  background: #fff;
+  border-radius: 16px;
+  padding: 32px;
+  max-width: 460px;
+  width: 90%;
+  position: relative;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.payment-close-btn {
+  position: absolute;
+  top: 14px;
+  right: 18px;
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  cursor: pointer;
+  color: #64748b;
+}
+
+.payment-title {
+  margin-bottom: 4px;
+}
+
+#pay-prompt-title {
+  color: #6366f1;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.payment-intro {
+  color: #64748b;
+  margin-bottom: 24px;
+}
+
+.payment-method-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.pay-crypto-icon {
+  font-size: 1.4rem;
+}
+
+.pay-method-price {
+  margin-left: auto;
+  font-size: 0.85rem;
+  color: #94a3b8;
+}
+
+.payment-disclaimer {
+  margin-top: 20px;
+  font-size: 0.8rem;
+  color: #94a3b8;
+  text-align: center;
+}
+
+#pay-step-2 {
+  display: none;
+}
+
+.payment-back-btn {
+  background: none;
+  border: none;
+  color: #6366f1;
+  cursor: pointer;
+  margin-bottom: 16px;
+  font-size: 0.9rem;
+}
+
+#pay-crypto-title {
+  margin-bottom: 8px;
+}
+
+.payment-amount-text {
+  color: #64748b;
+  margin-bottom: 8px;
+}
+
+.payment-address-box {
+  background: #f1f5f9;
+  border-radius: 10px;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+#pay-address {
+  font-size: 0.85rem;
+  word-break: break-all;
+  flex: 1;
+}
+
+.payment-copy-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #6366f1;
+  font-size: 1.1rem;
+}
+
+.payment-warning-text {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  margin-bottom: 20px;
+}
+
+.payment-info-box {
+  background: #fef9c3;
+  border: 1px solid #fde68a;
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-size: 0.82rem;
+  color: #92400e;
+  margin-bottom: 20px;
+}
+.payment-confirm-btn {
+  width: 100%;
+  padding: 12px;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+}
+#pay-step-3 {
+  display: none;
+  text-align: center;
+  padding: 20px 0;
+}
+.payment-success-icon {
+  font-size: 3.5rem;
+  color: #10b981;
+  display: block;
+  margin-bottom: 16px;
+}
+.payment-success-title {
+  margin-bottom: 8px;
+}
+.payment-success-desc {
+  color: #64748b;
+  margin-bottom: 24px;
+}
+.payment-done-btn {
+  padding: 12px 28px;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.market-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.market-card-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: #6366f1;
+  color: #fff;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.95rem;
+  flex-shrink: 0;
+}
+.market-card-time {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+.market-card-rating {
+  margin-bottom: 12px;
+}
+.market-rating-none {
+  color: #94a3b8;
+  font-size: 0.8rem;
+}
+.market-rating-clickable {
+  cursor: pointer;
+}
+.market-rating-stars {
+  color: #f59e0b;
+}
+.buy-btn-locked {
+  background: #ef4444 !important;
+}
+.buy-btn-unlocked {
+  background: #10b981 !important;
+}
+.market-price-badge {
+  background: #fef3c7;
+  color: #92400e;
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.market-heart-icon {
+  color: #ef4444;
+}
+.market-bookmark-icon {
+  color: #f59e0b;
+}
+.market-save-span {
+  margin-left: 12px;
+}
+.details-btn[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
diff --git a/OnlyPrompt.Frontend/css/post-detail.css b/OnlyPrompt.Frontend/css/post-detail.css
index 45e20f9..8ec8e4c 100644
--- a/OnlyPrompt.Frontend/css/post-detail.css
+++ b/OnlyPrompt.Frontend/css/post-detail.css
@@ -1,13 +1,5 @@
 /* Post Detail page - Full prompt view, rating, example output, unlock button */
 
-/* Full width layout */
-.layout > div[style*="flex:1"] {
-  margin: 0 !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  width: 100% !important;
-}
-
 .post-detail-main {
   flex: 1;
   display: flex;
@@ -21,12 +13,12 @@
   width: 100%;
   background: #fff;
   border-radius: 18px;
-  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
   padding: 32px;
   transition: box-shadow 0.2s;
 }
 .post-detail-container:hover {
-  box-shadow: 0 8px 20px rgba(59,130,246,0.12);
+  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
 }
 
 /* Header */
@@ -319,3 +311,198 @@
     padding: 16px;
   }
 }
+
+/* ── Loading / error states ──────────────────────────────────────────── */
+#detail-loading {
+  text-align: center;
+  padding: 60px 20px;
+  color: #64748b;
+}
+
+/* Smaller state icons for this page */
+#detail-loading .state-icon,
+#detail-error .state-icon {
+  font-size: 2.5rem;
+  margin-bottom: 12px;
+}
+
+#detail-error-msg {
+  color: #64748b;
+  margin-top: 8px;
+}
+
+.detail-back-btn {
+  margin-top: 20px;
+  padding: 10px 24px;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* ── Detail body ─────────────────────────────────────────────────────── */
+#detail-body {
+  display: none;
+}
+
+.detail-creator-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+#creator-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: #6366f1;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+#creator-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+#prompt-date {
+  display: block;
+  font-size: 0.8rem;
+  color: #94a3b8;
+}
+
+.detail-actions-right {
+  margin-left: auto;
+}
+
+#edit-prompt-btn {
+  display: none;
+  margin-left: 10px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 10px;
+  background: #f1f5f9;
+  color: #334155;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+#prompt-body {
+  white-space: pre-wrap;
+  font-family: monospace;
+  background: #f8fafc;
+  border-radius: 10px;
+  padding: 16px;
+  font-size: 0.9rem;
+  line-height: 1.7;
+}
+
+#example-section {
+  display: none;
+}
+#example-output-text {
+  white-space: pre-wrap;
+}
+#example-image {
+  display: none;
+}
+
+/* ── Locked section ──────────────────────────────────────────────────── */
+#locked-section {
+  display: none;
+  text-align: center;
+  padding: 40px 20px;
+  background: #f8fafc;
+  border-radius: 12px;
+  margin-bottom: 28px;
+}
+
+.locked-icon {
+  font-size: 2.5rem;
+  color: #94a3b8;
+  display: block;
+  margin-bottom: 12px;
+}
+
+.locked-title {
+  margin-bottom: 8px;
+}
+.locked-desc {
+  color: #64748b;
+  margin-bottom: 20px;
+}
+
+#locked-subscribe-btn {
+  padding: 12px 28px;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 1rem;
+}
+.detail-heart-icon {
+  color: #ef4444;
+}
+.detail-bookmark-span {
+  margin-left: 12px;
+}
+.detail-bookmark-icon {
+  color: #f59e0b;
+}
+.detail-loading-text {
+  color: #94a3b8;
+}
+.detail-error-text {
+  color: #ef4444;
+}
+.rating-stars-display {
+  font-size: 1.1rem;
+  color: #f59e0b;
+}
+.rating-value {
+  margin-left: 8px;
+  font-weight: 600;
+}
+.rating-count {
+  font-size: 0.85rem;
+  color: #94a3b8;
+  margin-left: 4px;
+}
+.rating-none {
+  font-size: 0.9rem;
+  color: #94a3b8;
+}
+.tier-badge-paid {
+  background: #fef3c7;
+  color: #92400e;
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.tier-badge-tier {
+  background: #f1f5f9;
+  color: #475569;
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.tier-badge-free {
+  background: #dcfce7;
+  color: #166534;
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
diff --git a/OnlyPrompt.Frontend/css/profile.css b/OnlyPrompt.Frontend/css/profile.css
index 22a1bac..87e3bee 100644
--- a/OnlyPrompt.Frontend/css/profile.css
+++ b/OnlyPrompt.Frontend/css/profile.css
@@ -1,14 +1,148 @@
 /* Profile Page - Full width layout, darker share button, responsive grid */
 
-/* Force main content container to full width, remove centering and max-width */
-.layout > div[style*="flex:1"] {
-  margin: 0 !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  width: 100% !important;
+/* ── Profile header ──────────────────────────────────────────────────── */
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 24px;
 }
 
-/* Inner spacing for the profile card */
+/* ── Profile avatar ──────────────────────────────────────────────────── */
+.profile-avatar {
+  width: 110px;
+  height: 110px;
+  object-fit: cover;
+}
+
+/* ── Profile info column ─────────────────────────────────────────────── */
+.profile-info {
+  flex: 1;
+}
+
+#profileDisplayName {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+#profileSlug {
+  color: #64748b;
+  margin-bottom: 8px;
+}
+
+.profile-badge-icon {
+  color: #3b82f6;
+}
+
+#profileBio {
+  margin-bottom: 8px;
+}
+#profileSpecialities {
+  color: #64748b;
+}
+
+#profileStats {
+  display: flex;
+  gap: 18px;
+  color: #64748b;
+  margin-top: 12px;
+  font-size: 0.95rem;
+}
+#profileStats strong {
+  color: #111827;
+}
+
+/* ── Profile actions column ──────────────────────────────────────────── */
+#profileActions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* ── Profile tabs ────────────────────────────────────────────────────── */
+.profile-tabs {
+  display: flex;
+  gap: 24px;
+  border-bottom: 2px solid #e5e7eb;
+  margin: 32px 0 18px 0;
+  flex-wrap: wrap;
+}
+
+/* ── Prompts grid ────────────────────────────────────────────────────── */
+#profile-prompts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 24px;
+}
+
+.profile-grid-loading {
+  grid-column: 1 / -1;
+  color: #64748b;
+  text-align: center;
+  padding: 28px;
+}
+.profile-grid-empty {
+  grid-column: 1 / -1;
+  color: #64748b;
+  text-align: center;
+  padding: 28px;
+}
+.profile-grid-error {
+  grid-column: 1 / -1;
+  color: #ef4444;
+  text-align: center;
+  padding: 28px;
+}
+.profile-prompt-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
+  padding: 18px;
+  display: flex;
+  gap: 16px;
+  cursor: pointer;
+}
+.profile-prompt-img {
+  width: 72px;
+  height: 72px;
+  border-radius: 12px;
+  object-fit: cover;
+}
+.profile-prompt-body {
+  flex: 1;
+  min-width: 0;
+}
+.profile-prompt-title {
+  font-weight: 700;
+}
+.profile-prompt-desc {
+  color: #64748b;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.profile-prompt-meta {
+  display: flex;
+  gap: 16px;
+  color: #64748b;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.profile-prompt-edit-btn {
+  border: none;
+  background: #f1f5f9;
+  color: #334155;
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* ── Inner spacing for the profile card ─────────────────────────────── */
 .profile-main {
   background: transparent !important;
   border-radius: 0 !important;
@@ -16,7 +150,7 @@
   padding: 20px 32px !important;
   margin: 0 auto !important;
   width: 100%;
-  max-width: 1600px;          /* Limits content on very large screens, but still wide */
+  max-width: 1600px; /* Limits content on very large screens, but still wide */
 }
 
 /* Make prompts grid use more columns on large screens */
@@ -29,7 +163,7 @@
 
 /* Share button: darker background and text */
 .profile-header button:last-child {
-  background: #cbd5e1 !important;   /* darker gray */
+  background: #cbd5e1 !important; /* darker gray */
   color: #1e293b !important;
   box-shadow: none !important;
   border: none !important;
@@ -64,7 +198,7 @@
 /* Prompt cards: rounded corners */
 .profile-main section > div {
   border-radius: 18px !important;
-  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
 }
 
 /* Prompt images: rounded corners */
@@ -75,6 +209,9 @@
 /* Avatar remains round */
 .profile-avatar {
   border-radius: 50% !important;
+  width: 110px;
+  height: 110px;
+  object-fit: cover;
 }
 
 /* All outer containers stay square */
diff --git a/OnlyPrompt.Frontend/css/settings.css b/OnlyPrompt.Frontend/css/settings.css
index 8ef259c..eb89712 100644
--- a/OnlyPrompt.Frontend/css/settings.css
+++ b/OnlyPrompt.Frontend/css/settings.css
@@ -1,12 +1,5 @@
 /* Settings page - tabs, form styling */
 
-.layout > div[style*="flex:1"] {
-  margin: 0 !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  width: 100% !important;
-}
-
 .settings-main {
   flex: 1;
   display: flex;
@@ -21,7 +14,7 @@
   width: 100%;
   background: #fff;
   border-radius: 18px;
-  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
   padding: 32px;
 }
 
@@ -101,7 +94,7 @@
 .form-group textarea:focus {
   outline: none;
   border-color: #7c3aed;
-  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
 }
 .checkbox-label {
   display: flex;
@@ -181,4 +174,11 @@
     flex-direction: column;
     align-items: flex-start;
   }
-}
\ No newline at end of file
+}
+
+/* Save status message */
+#profileSaveStatus {
+  margin-top: 10px;
+  color: #64748b;
+  text-align: center;
+}
diff --git a/OnlyPrompt.Frontend/dashboard.html b/OnlyPrompt.Frontend/dashboard.html
index 4b05d4d..5f770e4 100644
--- a/OnlyPrompt.Frontend/dashboard.html
+++ b/OnlyPrompt.Frontend/dashboard.html
@@ -20,13 +20,10 @@
     />
   </head>
   <body>
-    <div
-      class="layout"
-      style="display: flex; min-height: 100vh; background: var(--bg)"
-    >
+    <div class="layout">
       <div id="sidebar-container"></div>
 
-      <div style="flex: 1; display: flex; flex-direction: column">
+      <div class="page-body">
         <div id="topbar-container"></div>
 
         <main class="feed-main">
@@ -61,38 +58,16 @@
           <div class="posts-grid" id="posts-grid"></div>
 
           <!-- Empty State -->
-          <div
-            id="feed-empty"
-            style="
-              display: none;
-              text-align: center;
-              padding: 60px 20px;
-              color: #64748b;
-            "
-          >
-            <i
-              class="bi bi-inbox"
-              style="font-size: 3rem; display: block; margin-bottom: 16px"
-            ></i>
-            <h3 style="margin-bottom: 8px">No posts yet</h3>
+          <div id="feed-empty" class="state-empty">
+            <i class="bi bi-inbox state-icon"></i>
+            <h3 class="state-title">No posts yet</h3>
             <p>Follow some creators to see their prompts here.</p>
           </div>
 
           <!-- Error State -->
-          <div
-            id="feed-error"
-            style="
-              display: none;
-              text-align: center;
-              padding: 60px 20px;
-              color: #ef4444;
-            "
-          >
-            <i
-              class="bi bi-exclamation-circle"
-              style="font-size: 3rem; display: block; margin-bottom: 16px"
-            ></i>
-            <h3 style="margin-bottom: 8px">Could not load feed</h3>
+          <div id="feed-error" class="state-error">
+            <i class="bi bi-exclamation-circle state-icon"></i>
+            <h3 class="state-title">Could not load feed</h3>
             <p id="feed-error-msg"></p>
           </div>
         </main>
@@ -163,33 +138,33 @@
         return `
         <div class="post-card${locked ? " post-locked" : ""}" onclick="location.href='${profileUrl(prompt.creatorId)}'">
           <div class="post-header">
-            <img class="post-avatar" src="${prompt.creatorAvatarUrl || '../images/content/cat.png'}" alt="${prompt.creatorName}">
+            <img class="post-avatar" src="${prompt.creatorAvatarUrl || "../images/content/cat.png"}" alt="${prompt.creatorName}">
             <div class="post-author">
               <span class="post-name">${prompt.creatorName}</span>
             </div>
             <span class="post-date">${timeAgo(prompt.timeStamp)}</span>
           </div>
           <div class="post-content">
-            ${prompt.exampleImageUrl ? `<img class="post-image${locked ? ' post-image-locked' : ''}" src="${prompt.exampleImageUrl}" alt="${prompt.title}">` : `<img class="post-image${locked ? ' post-image-locked' : ''}" src="${feedImg(prompt.id)}" alt="${prompt.title}">`}
-            <h3 class="post-title" style="margin-top:10px">${prompt.title}</h3>
-            <p class="post-description">${prompt.description || ''}</p>
-            ${locked ? `<p class="post-locked-msg"><i class="bi bi-lock-fill"></i> ${prompt.tierName ?? 'Paid'} tier required</p>` : ''}
+            ${prompt.exampleImageUrl ? `<img class="post-image${locked ? " post-image-locked" : ""}" src="${prompt.exampleImageUrl}" alt="${prompt.title}">` : `<img class="post-image${locked ? " post-image-locked" : ""}" src="${feedImg(prompt.id)}" alt="${prompt.title}">`}
+            <h3 class="post-title">${prompt.title}</h3>
+            <p class="post-description">${prompt.description || ""}</p>
+            ${locked ? `<p class="post-locked-msg"><i class="bi bi-lock-fill"></i> ${prompt.tierName ?? "Paid"} tier required</p>` : ""}
             ${renderStars(prompt.averageRating)}
           </div>
           <div class="post-actions">
-            <button class="action-btn like-btn ${liked ? 'active' : ''}" onclick="toggleLike(event, '${prompt.id}', ${liked})"><i class="bi ${liked ? 'bi-heart-fill' : 'bi-heart'}"></i> <span>Like (${prompt.likeCount || 0})</span></button>
+            <button class="action-btn like-btn ${liked ? "active" : ""}" onclick="toggleLike(event, '${prompt.id}', ${liked})"><i class="bi ${liked ? "bi-heart-fill" : "bi-heart"}"></i> <span>Like (${prompt.likeCount || 0})</span></button>
             <button class="action-btn comment-btn" onclick="event.stopPropagation(); location.href='/post-detail?id=${prompt.id}#rating-section'"><i class="bi bi-chat"></i> <span>Review</span></button>
             <button class="action-btn share-btn" onclick="sharePrompt(event, '${prompt.id}')"><i class="bi bi-share"></i> <span>Share</span></button>
-            <button class="action-btn save-btn ${saved ? 'active' : ''}" onclick="toggleSave(event, '${prompt.id}', ${saved})"><i class="bi ${saved ? 'bi-bookmark-fill' : 'bi-bookmark'}"></i> <span>Save (${prompt.saveCount || 0})</span></button>
+            <button class="action-btn save-btn ${saved ? "active" : ""}" onclick="toggleSave(event, '${prompt.id}', ${saved})"><i class="bi ${saved ? "bi-bookmark-fill" : "bi-bookmark"}"></i> <span>Save (${prompt.saveCount || 0})</span></button>
           </div>
         </div>`;
       }
 
-      window.toggleLike = async function(event, id, isLiked) {
+      window.toggleLike = async function (event, id, isLiked) {
         event.stopPropagation();
         const response = await fetch(`/api/v1/prompts/${id}/likes`, {
           method: isLiked ? "DELETE" : "PUT",
-          credentials: "same-origin"
+          credentials: "same-origin",
         });
 
         if (response.status === 401) {
@@ -200,26 +175,28 @@
         if (!response.ok) return;
         loadFeed(
           document.querySelector(".filter-btn.active")?.dataset.sort || "date",
-          document.querySelector(".filter-btn.active")?.dataset.ascending === "true"
+          document.querySelector(".filter-btn.active")?.dataset.ascending ===
+            "true",
         );
       };
 
-      window.toggleFeedState = function(event, type, id) {
+      window.toggleFeedState = function (event, type, id) {
         event.stopPropagation();
         const key = `prompt-${type}-${id}`;
         const next = localStorage.getItem(key) !== "true";
         localStorage.setItem(key, next);
         loadFeed(
           document.querySelector(".filter-btn.active")?.dataset.sort || "date",
-          document.querySelector(".filter-btn.active")?.dataset.ascending === "true"
+          document.querySelector(".filter-btn.active")?.dataset.ascending ===
+            "true",
         );
       };
 
-      window.toggleSave = async function(event, id, isSaved) {
+      window.toggleSave = async function (event, id, isSaved) {
         event.stopPropagation();
         const response = await fetch(`/api/v1/prompts/${id}/saves`, {
           method: isSaved ? "DELETE" : "PUT",
-          credentials: "same-origin"
+          credentials: "same-origin",
         });
 
         if (response.status === 401) {
@@ -230,13 +207,16 @@
         if (!response.ok) return;
         loadFeed(
           document.querySelector(".filter-btn.active")?.dataset.sort || "date",
-          document.querySelector(".filter-btn.active")?.dataset.ascending === "true"
+          document.querySelector(".filter-btn.active")?.dataset.ascending ===
+            "true",
         );
       };
 
-      window.sharePrompt = function(event, id) {
+      window.sharePrompt = function (event, id) {
         event.stopPropagation();
-        navigator.clipboard.writeText(`${location.origin}/post-detail?id=${id}`);
+        navigator.clipboard.writeText(
+          `${location.origin}/post-detail?id=${id}`,
+        );
       };
 
       async function loadFeed(sortBy = "date", ascending = false) {
diff --git a/OnlyPrompt.Frontend/marketplace.html b/OnlyPrompt.Frontend/marketplace.html
index 955fb67..6001c08 100644
--- a/OnlyPrompt.Frontend/marketplace.html
+++ b/OnlyPrompt.Frontend/marketplace.html
@@ -60,13 +60,10 @@
     </style>
   </head>
   <body>
-    <div
-      class="layout"
-      style="display: flex; min-height: 100vh; background: var(--bg)"
-    >
+    <div class="layout">
       <div id="sidebar-container"></div>
 
-      <div style="flex: 1; display: flex; flex-direction: column">
+      <div class="page-body">
         <div id="topbar-container"></div>
 
         <main class="marketplace-main">
@@ -100,38 +97,16 @@
           <div class="prompts-grid" id="prompts-grid"></div>
 
           <!-- Empty State -->
-          <div
-            id="market-empty"
-            style="
-              display: none;
-              text-align: center;
-              padding: 60px 20px;
-              color: #64748b;
-            "
-          >
-            <i
-              class="bi bi-bag-x"
-              style="font-size: 3rem; display: block; margin-bottom: 16px"
-            ></i>
-            <h3 style="margin-bottom: 8px">No prompts found</h3>
+          <div id="market-empty" class="state-empty">
+            <i class="bi bi-bag-x state-icon"></i>
+            <h3 class="state-title">No prompts found</h3>
             <p>Try a different category or search term.</p>
           </div>
 
           <!-- Error State -->
-          <div
-            id="market-error"
-            style="
-              display: none;
-              text-align: center;
-              padding: 60px 20px;
-              color: #ef4444;
-            "
-          >
-            <i
-              class="bi bi-exclamation-circle"
-              style="font-size: 3rem; display: block; margin-bottom: 16px"
-            ></i>
-            <h3 style="margin-bottom: 8px">Could not load prompts</h3>
+          <div id="market-error" class="state-error">
+            <i class="bi bi-exclamation-circle state-icon"></i>
+            <h3 class="state-title">Could not load prompts</h3>
             <p id="market-error-msg"></p>
           </div>
         </main>
@@ -139,213 +114,83 @@
     </div>
 
     <!-- ── Payment Modal ─────────────────────────────────────────────── -->
-    <div
-      id="payment-overlay"
-      style="
-        display: none;
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 1000;
-        align-items: center;
-        justify-content: center;
-      "
-    >
-      <div
-        style="
-          background: #fff;
-          border-radius: 16px;
-          padding: 32px;
-          max-width: 460px;
-          width: 90%;
-          position: relative;
-          max-height: 90vh;
-          overflow-y: auto;
-        "
-      >
-        <button
-          onclick="closePayment()"
-          style="
-            position: absolute;
-            top: 14px;
-            right: 18px;
-            background: none;
-            border: none;
-            font-size: 1.4rem;
-            cursor: pointer;
-            color: #64748b;
-          "
-        >
+    <div id="payment-overlay">
+      <div class="payment-modal">
+        <button onclick="closePayment()" class="payment-close-btn">
           &#x2715;
         </button>
 
         <!-- Step 1: Choose method -->
         <div id="pay-step-1">
-          <h2 style="margin-bottom: 4px">Subscribe to access</h2>
-          <p
-            id="pay-prompt-title"
-            style="color: #6366f1; font-weight: 600; margin-bottom: 16px"
-          ></p>
-          <p style="color: #64748b; margin-bottom: 24px">
+          <h2 class="payment-title">Subscribe to access</h2>
+          <p id="pay-prompt-title"></p>
+          <p class="payment-intro">
             Choose a payment method to unlock this prompt:
           </p>
-          <div style="display: flex; flex-direction: column; gap: 12px">
+          <div class="payment-method-list">
             <button class="pay-method-btn" onclick="selectCrypto('btc')">
-              <span style="font-size: 1.4rem">₿</span> Bitcoin (BTC)
-              <span
-                id="price-btc"
-                style="margin-left: auto; font-size: 0.85rem; color: #94a3b8"
-              ></span>
+              <span class="pay-crypto-icon">₿</span> Bitcoin (BTC)
+              <span id="price-btc" class="pay-method-price"></span>
             </button>
             <button class="pay-method-btn" onclick="selectCrypto('eth')">
-              <span style="font-size: 1.4rem">Ξ</span> Ethereum (ETH)
-              <span
-                id="price-eth"
-                style="margin-left: auto; font-size: 0.85rem; color: #94a3b8"
-              ></span>
+              <span class="pay-crypto-icon">Ξ</span> Ethereum (ETH)
+              <span id="price-eth" class="pay-method-price"></span>
             </button>
             <button class="pay-method-btn" onclick="selectCrypto('sol')">
-              <span style="font-size: 1.4rem">◎</span> Solana (SOL)
-              <span
-                id="price-sol"
-                style="margin-left: auto; font-size: 0.85rem; color: #94a3b8"
-              ></span>
+              <span class="pay-crypto-icon">◎</span> Solana (SOL)
+              <span id="price-sol" class="pay-method-price"></span>
             </button>
             <button class="pay-method-btn" onclick="selectCrypto('usdt')">
-              <span style="font-size: 1.4rem">₮</span> USDT (TRC-20)
-              <span
-                id="price-usdt"
-                style="margin-left: auto; font-size: 0.85rem; color: #94a3b8"
-              ></span>
+              <span class="pay-crypto-icon">₮</span> USDT (TRC-20)
+              <span id="price-usdt" class="pay-method-price"></span>
             </button>
           </div>
-          <p
-            style="
-              margin-top: 20px;
-              font-size: 0.8rem;
-              color: #94a3b8;
-              text-align: center;
-            "
-          >
+          <p class="payment-disclaimer">
             <i class="bi bi-shield-lock-fill"></i> Payments are processed
             on-chain. No account needed.
           </p>
         </div>
 
         <!-- Step 2: Send payment -->
-        <div id="pay-step-2" style="display: none">
-          <button
-            onclick="backToStep1()"
-            style="
-              background: none;
-              border: none;
-              color: #6366f1;
-              cursor: pointer;
-              margin-bottom: 16px;
-              font-size: 0.9rem;
-            "
-          >
+        <div id="pay-step-2">
+          <button onclick="backToStep1()" class="payment-back-btn">
             &#8592; Back
           </button>
-          <h2 id="pay-crypto-title" style="margin-bottom: 8px"></h2>
-          <p style="color: #64748b; margin-bottom: 8px">
+          <h2 id="pay-crypto-title"></h2>
+          <p class="payment-amount-text">
             Send exactly <strong id="pay-amount"></strong> to:
           </p>
-          <div
-            style="
-              background: #f1f5f9;
-              border-radius: 10px;
-              padding: 14px 16px;
-              display: flex;
-              align-items: center;
-              gap: 10px;
-              margin-bottom: 8px;
-            "
-          >
-            <code
-              id="pay-address"
-              style="font-size: 0.85rem; word-break: break-all; flex: 1"
-            ></code>
+          <div class="payment-address-box">
+            <code id="pay-address"></code>
             <button
               onclick="copyAddress()"
               title="Copy"
-              style="
-                background: none;
-                border: none;
-                cursor: pointer;
-                color: #6366f1;
-                font-size: 1.1rem;
-              "
+              class="payment-copy-btn"
             >
               <i class="bi bi-clipboard"></i>
             </button>
           </div>
-          <p style="font-size: 0.78rem; color: #94a3b8; margin-bottom: 20px">
+          <p class="payment-warning-text">
             ⚠️ Only send the exact amount. Payments are non-refundable.
           </p>
-          <div
-            style="
-              background: #fef9c3;
-              border: 1px solid #fde68a;
-              border-radius: 10px;
-              padding: 12px 14px;
-              font-size: 0.82rem;
-              color: #92400e;
-              margin-bottom: 20px;
-            "
-          >
+          <div class="payment-info-box">
             <i class="bi bi-info-circle-fill"></i> After sending, click the
             button below to confirm. Access will be granted once the transaction
             is verified.
           </div>
-          <button
-            onclick="confirmPayment()"
-            style="
-              width: 100%;
-              padding: 12px;
-              background: #6366f1;
-              color: #fff;
-              border: none;
-              border-radius: 10px;
-              font-weight: 600;
-              font-size: 1rem;
-              cursor: pointer;
-            "
-          >
+          <button onclick="confirmPayment()" class="payment-confirm-btn">
             I've sent the payment ✓
           </button>
         </div>
 
         <!-- Step 3: Success -->
-        <div
-          id="pay-step-3"
-          style="display: none; text-align: center; padding: 20px 0"
-        >
-          <i
-            class="bi bi-check-circle-fill"
-            style="
-              font-size: 3.5rem;
-              color: #10b981;
-              display: block;
-              margin-bottom: 16px;
-            "
-          ></i>
-          <h2 style="margin-bottom: 8px">Payment received!</h2>
-          <p style="color: #64748b; margin-bottom: 24px">
+        <div id="pay-step-3">
+          <i class="bi bi-check-circle-fill payment-success-icon"></i>
+          <h2 class="payment-success-title">Payment received!</h2>
+          <p class="payment-success-desc">
             Your access is being activated. This usually takes 1–2 minutes.
           </p>
-          <button
-            onclick="closePayment()"
-            style="
-              padding: 12px 28px;
-              background: #6366f1;
-              color: #fff;
-              border: none;
-              border-radius: 10px;
-              font-weight: 600;
-              cursor: pointer;
-            "
-          >
+          <button onclick="closePayment()" class="payment-done-btn">
             Done
           </button>
         </div>
@@ -387,22 +232,29 @@
         return `${Math.floor(h / 24)}d ago`;
       }
 
-      function renderStars(rating, reviewCount = 0, promptId = null, locked = false) {
-        const target = promptId && !locked
-          ? ` onclick="location.href='/post-detail?id=${promptId}#rating-section'" title="View reviews" style="cursor:pointer;"`
-          : "";
+      function renderStars(
+        rating,
+        reviewCount = 0,
+        promptId = null,
+        locked = false,
+      ) {
+        const target =
+          promptId && !locked
+            ? ` onclick="location.href='/post-detail?id=${promptId}#rating-section'" title="View reviews" class="market-rating-clickable"`
+            : "";
         if (rating == null)
-          return `<span${target} style="color:#94a3b8;font-size:0.8rem;${promptId && !locked ? 'cursor:pointer;' : ''}">No reviews yet</span>`;
+          return `<span${target} class="market-rating-none">No reviews yet</span>`;
         const stars = Math.round(rating);
         const label = reviewCount === 1 ? "review" : "reviews";
-        return `<span class="prompt-rating"${target}><span style="color:#f59e0b">${"★".repeat(stars)}${"☆".repeat(5 - stars)}</span> ${rating.toFixed(1)} (${reviewCount} ${label})</span>`;
+        return `<span class="prompt-rating"${target}><span class="market-rating-stars">${"★".repeat(stars)}${"☆".repeat(5 - stars)}</span> ${rating.toFixed(1)} (${reviewCount} ${label})</span>`;
       }
 
       function promptPrice(prompt) {
         if (prompt.price != null && Number(prompt.price) > 0) {
           return `$${Number(prompt.price).toFixed(2)}`;
         }
-        if (prompt.tierLevel) return `$${(prompt.tierLevel * 4.99).toFixed(2)}/mo`;
+        if (prompt.tierLevel)
+          return `$${(prompt.tierLevel * 4.99).toFixed(2)}/mo`;
         if (prompt.canAccess === false) return "Paid";
         return "Free";
       }
@@ -424,7 +276,9 @@
           const direction = ascending === "true" ? 1 : -1;
           return prompts
             .slice()
-            .sort((a, b) => (getNumericPrice(a) - getNumericPrice(b)) * direction);
+            .sort(
+              (a, b) => (getNumericPrice(a) - getNumericPrice(b)) * direction,
+            );
         }
 
         return prompts;
@@ -443,29 +297,32 @@
       function renderCard(p) {
         const paid = p.price != null && Number(p.price) > 0;
         const locked = p.canAccess === false || paid || p.tierLevel != null;
-        const img = p.exampleImageUrl || p._img || MARKET_IMAGES[cardIndex++ % MARKET_IMAGES.length];
+        const img =
+          p.exampleImageUrl ||
+          p._img ||
+          MARKET_IMAGES[cardIndex++ % MARKET_IMAGES.length];
         return `
         <div class="prompt-card">
           <img src="${img}" alt="${p.title}" class="prompt-img">
           <div class="prompt-info">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
-              <div style="width:34px;height:34px;border-radius:50%;background:#6366f1;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;">${p.creatorName.charAt(0).toUpperCase()}</div>
+            <div class="market-card-header">
+              <div class="market-card-avatar">${p.creatorName.charAt(0).toUpperCase()}</div>
               <span class="prompt-author">@${p.creatorName}</span>
-              <span style="margin-left:auto;font-size:0.75rem;color:#94a3b8;">${timeAgo(p.timeStamp)}</span>
+              <span class="market-card-time">${timeAgo(p.timeStamp)}</span>
             </div>
             <h3 class="prompt-title">${p.title}</h3>
-            <p class="prompt-description">${p.description || 'No description yet.'}</p>
-            <div style="margin-bottom:12px;">${renderStars(p.averageRating, p.reviewCount || 0, p.id, locked)}</div>
+            <p class="prompt-description">${p.description || "No description yet."}</p>
+            <div class="market-card-rating">${renderStars(p.averageRating, p.reviewCount || 0, p.id, locked)}</div>
             <div class="prompt-price">${promptPrice(p)}</div>
             <div class="prompt-actions">
               ${
                 locked
-                  ? `<button class="buy-btn" style="background:#ef4444;" onclick='openPayment(${JSON.stringify(p)})'><i class="bi bi-lock-fill"></i> Pay</button>`
-                  : `<button class="buy-btn" style="background:#10b981;" onclick="location.href='/post-detail?id=${p.id}'">Access <i class="bi bi-unlock-fill"></i></button>`
+                  ? `<button class="buy-btn buy-btn-locked" onclick='openPayment(${JSON.stringify(p)})'><i class="bi bi-lock-fill"></i> Pay</button>`
+                  : `<button class="buy-btn buy-btn-unlocked" onclick="location.href='/post-detail?id=${p.id}'">Access <i class="bi bi-unlock-fill"></i></button>`
               }
               ${
                 locked
-                  ? `<button class="details-btn" disabled style="opacity:.45;cursor:not-allowed;"><i class="bi bi-lock-fill"></i> Details</button>`
+                  ? `<button class="details-btn" disabled><i class="bi bi-lock-fill"></i> Details</button>`
                   : `<button class="details-btn" onclick="location.href='/post-detail?id=${p.id}'">View Details</button>`
               }
             </div>
@@ -477,7 +334,8 @@
         const grid = document.getElementById("prompts-grid");
         const emptyEl = document.getElementById("market-empty");
         const errorEl = document.getElementById("market-error");
-        const search = document.getElementById("topbarSearchInput")?.value.trim() || "";
+        const search =
+          document.getElementById("topbarSearchInput")?.value.trim() || "";
         const [sortBy, ascending] = document
           .getElementById("sort-select")
           .value.split("|");
@@ -488,8 +346,10 @@
         cardIndex = 0;
 
         try {
-          const apiSortBy = sortBy === "price" || sortBy === "free" ? "date" : sortBy;
-          const apiAscending = sortBy === "price" || sortBy === "free" ? "false" : ascending;
+          const apiSortBy =
+            sortBy === "price" || sortBy === "free" ? "date" : sortBy;
+          const apiAscending =
+            sortBy === "price" || sortBy === "free" ? "false" : ascending;
           let url = `/api/v1/prompts?sortBy=${apiSortBy}&ascending=${apiAscending}&limit=50`;
           if (activeCategory) url += `&category=${activeCategory}`;
           if (search) url += `&search=${encodeURIComponent(search)}`;
@@ -501,7 +361,11 @@
           }
           if (!res.ok) throw new Error(`Server error ${res.status}`);
 
-          let prompts = applyMarketplaceSort(await res.json(), sortBy, ascending);
+          let prompts = applyMarketplaceSort(
+            await res.json(),
+            sortBy,
+            ascending,
+          );
 
           if (prompts.length === 0) {
             emptyEl.style.display = "block";
@@ -596,9 +460,12 @@
 
       function openPayment(prompt) {
         currentPrompt = prompt;
-        const usd = prompt.price != null && Number(prompt.price) > 0
-          ? Number(prompt.price)
-          : prompt.tierLevel ? prompt.tierLevel * 4.99 : 0;
+        const usd =
+          prompt.price != null && Number(prompt.price) > 0
+            ? Number(prompt.price)
+            : prompt.tierLevel
+              ? prompt.tierLevel * 4.99
+              : 0;
         document.getElementById("pay-prompt-title").textContent = prompt.title;
         document.getElementById("price-btc").textContent =
           `≈ ${(usd / 67000).toFixed(6)} BTC`;
diff --git a/OnlyPrompt.Frontend/post-detail.html b/OnlyPrompt.Frontend/post-detail.html
index 0b7f75c..1815157 100644
--- a/OnlyPrompt.Frontend/post-detail.html
+++ b/OnlyPrompt.Frontend/post-detail.html
@@ -19,121 +19,43 @@
     />
   </head>
   <body>
-    <div
-      class="layout"
-      style="display: flex; min-height: 100vh; background: var(--bg)"
-    >
+    <div class="layout">
       <div id="sidebar-container"></div>
 
-      <div style="flex: 1; display: flex; flex-direction: column">
+      <div class="page-body">
         <div id="topbar-container"></div>
 
         <main class="post-detail-main">
           <div class="post-detail-container" id="detail-content">
             <!-- Loading -->
-            <div
-              id="detail-loading"
-              style="text-align: center; padding: 60px 20px; color: #64748b"
-            >
-              <i
-                class="bi bi-hourglass-split"
-                style="font-size: 2.5rem; display: block; margin-bottom: 12px"
-              ></i>
+            <div id="detail-loading">
+              <i class="bi bi-hourglass-split state-icon"></i>
               <p>Loading prompt...</p>
             </div>
 
             <!-- Error -->
-            <div
-              id="detail-error"
-              style="
-                display: none;
-                text-align: center;
-                padding: 60px 20px;
-                color: #ef4444;
-              "
-            >
-              <i
-                class="bi bi-exclamation-circle"
-                style="font-size: 2.5rem; display: block; margin-bottom: 12px"
-              ></i>
+            <div id="detail-error" class="state-error">
+              <i class="bi bi-exclamation-circle state-icon"></i>
               <h3 id="detail-error-title">Prompt not found</h3>
-              <p
-                id="detail-error-msg"
-                style="color: #64748b; margin-top: 8px"
-              ></p>
-              <button
-                onclick="history.back()"
-                style="
-                  margin-top: 20px;
-                  padding: 10px 24px;
-                  background: #6366f1;
-                  color: #fff;
-                  border: none;
-                  border-radius: 10px;
-                  font-weight: 600;
-                  cursor: pointer;
-                "
-              >
+              <p id="detail-error-msg"></p>
+              <button onclick="history.back()" class="detail-back-btn">
                 Go Back
               </button>
             </div>
 
             <!-- Content (hidden until loaded) -->
-            <div id="detail-body" style="display: none">
+            <div id="detail-body">
               <!-- Header -->
               <div class="post-header">
-                <div
-                  style="
-                    display: flex;
-                    align-items: center;
-                    gap: 10px;
-                    margin-bottom: 16px;
-                  "
-                >
-                  <div
-                    id="creator-avatar"
-                    style="
-                      width: 42px;
-                      height: 42px;
-                      border-radius: 50%;
-                      background: #6366f1;
-                      color: #fff;
-                      font-weight: 700;
-                      font-size: 1.1rem;
-                      display: flex;
-                      align-items: center;
-                      justify-content: center;
-                      flex-shrink: 0;
-                    "
-                  ></div>
+                <div class="detail-creator-row">
+                  <div id="creator-avatar"></div>
                   <div>
-                    <span
-                      id="creator-name"
-                      style="font-weight: 600; font-size: 0.95rem"
-                    ></span>
-                    <span
-                      id="prompt-date"
-                      style="display: block; font-size: 0.8rem; color: #94a3b8"
-                    ></span>
+                    <span id="creator-name"></span>
+                    <span id="prompt-date"></span>
                   </div>
-                  <div style="margin-left: auto">
+                  <div class="detail-actions-right">
                     <span id="tier-badge"></span>
-                    <button
-                      id="edit-prompt-btn"
-                      style="
-                        display: none;
-                        margin-left: 10px;
-                        padding: 6px 14px;
-                        border: none;
-                        border-radius: 10px;
-                        background: #f1f5f9;
-                        color: #334155;
-                        font-weight: 700;
-                        cursor: pointer;
-                      "
-                    >
-                      Edit
-                    </button>
+                    <button id="edit-prompt-btn">Edit</button>
                   </div>
                 </div>
                 <h1 class="post-title" id="prompt-title"></h1>
@@ -157,73 +79,38 @@
               <!-- Prompt Content (only if accessible) -->
               <div class="prompt-section" id="prompt-content-section">
                 <h2>PROMPT</h2>
-                <div
-                  class="prompt-content"
-                  id="prompt-body"
-                  style="
-                    white-space: pre-wrap;
-                    font-family: monospace;
-                    background: #f8fafc;
-                    border-radius: 10px;
-                    padding: 16px;
-                    font-size: 0.9rem;
-                    line-height: 1.7;
-                  "
-                ></div>
+                <div class="prompt-content" id="prompt-body"></div>
               </div>
 
               <!-- Example Output -->
-              <div class="example-section" id="example-section" style="display: none">
+              <div class="example-section" id="example-section">
                 <h2>EXAMPLE OUTPUT</h2>
                 <div class="example-content">
-                  <div id="example-output-text" class="example-output-text" style="white-space: pre-wrap"></div>
-                  <div id="example-image" class="example-image" style="display: none">
-                    <img id="example-image-img" src="" alt="Example output image">
+                  <div
+                    id="example-output-text"
+                    class="example-output-text"
+                  ></div>
+                  <div id="example-image" class="example-image">
+                    <img
+                      id="example-image-img"
+                      src=""
+                      alt="Example output image"
+                    />
                   </div>
                 </div>
               </div>
 
               <!-- Locked section (shown instead of prompt if no access) -->
-              <div
-                id="locked-section"
-                style="
-                  display: none;
-                  text-align: center;
-                  padding: 40px 20px;
-                  background: #f8fafc;
-                  border-radius: 12px;
-                  margin-bottom: 28px;
-                "
-              >
-                <i
-                  class="bi bi-lock-fill"
-                  style="
-                    font-size: 2.5rem;
-                    color: #94a3b8;
-                    display: block;
-                    margin-bottom: 12px;
-                  "
-                ></i>
-                <h3 style="margin-bottom: 8px">
+              <div id="locked-section">
+                <i class="bi bi-lock-fill locked-icon"></i>
+                <h3 class="locked-title">
                   This prompt requires a subscription
                 </h3>
-                <p style="color: #64748b; margin-bottom: 20px">
+                <p class="locked-desc">
                   Subscribe to <strong id="locked-creator"></strong> to access
                   this prompt.
                 </p>
-                <button
-                  id="locked-subscribe-btn"
-                  style="
-                    padding: 12px 28px;
-                    background: #6366f1;
-                    color: #fff;
-                    border: none;
-                    border-radius: 10px;
-                    font-weight: 600;
-                    cursor: pointer;
-                    font-size: 1rem;
-                  "
-                >
+                <button id="locked-subscribe-btn">
                   Subscribe <span id="locked-tier-name"></span>
                 </button>
               </div>
@@ -238,19 +125,30 @@
                 <h2>REVIEWS</h2>
                 <div class="review-form" id="review-form">
                   <h3>Your review</h3>
-                  <div class="review-star-input" id="review-star-input" aria-label="Select rating">
+                  <div
+                    class="review-star-input"
+                    id="review-star-input"
+                    aria-label="Select rating"
+                  >
                     <button type="button" data-rating="1">☆</button>
                     <button type="button" data-rating="2">☆</button>
                     <button type="button" data-rating="3">☆</button>
                     <button type="button" data-rating="4">☆</button>
                     <button type="button" data-rating="5">☆</button>
                   </div>
-                  <textarea id="review-comment" maxlength="200" rows="3" placeholder="Write a short comment..."></textarea>
-                  <button type="button" id="submit-review-btn">Submit Review</button>
+                  <textarea
+                    id="review-comment"
+                    maxlength="200"
+                    rows="3"
+                    placeholder="Write a short comment..."
+                  ></textarea>
+                  <button type="button" id="submit-review-btn">
+                    Submit Review
+                  </button>
                   <p id="review-message"></p>
                 </div>
                 <div class="reviews-list" id="reviews-list">
-                  <p style="color:#94a3b8;">Loading reviews...</p>
+                  <p class="detail-loading-text">Loading reviews...</p>
                 </div>
               </div>
             </div>
@@ -331,8 +229,8 @@
           p.description;
         document.getElementById("prompt-body").textContent = p.content;
         document.getElementById("prompt-rating-stat").innerHTML =
-          `<i class="bi ${p.isLiked ? 'bi-heart-fill' : 'bi-heart'}" style="color:#ef4444;"></i> ${p.likeCount || 0} likes
-           <span style="margin-left:12px;"><i class="bi ${p.isSaved ? 'bi-bookmark-fill' : 'bi-bookmark'}" style="color:#f59e0b;"></i> ${p.saveCount || 0} saves</span>`;
+          `<i class="bi ${p.isLiked ? "bi-heart-fill" : "bi-heart"} detail-heart-icon"></i> ${p.likeCount || 0} likes
+           <span class="detail-bookmark-span"><i class="bi ${p.isSaved ? "bi-bookmark-fill" : "bi-bookmark"} detail-bookmark-icon"></i> ${p.saveCount || 0} saves</span>`;
         renderExamples(p);
         renderOwnerActions(p);
         setupReviewSection(p);
@@ -341,27 +239,27 @@
         // Tier badge
         const badge = document.getElementById("tier-badge");
         if (p.price != null && Number(p.price) > 0) {
-          badge.innerHTML = `<span style="background:#fef3c7;color:#92400e;border-radius:20px;padding:4px 14px;font-size:0.8rem;font-weight:600;">$${Number(p.price).toFixed(2)}</span>`;
+          badge.innerHTML = `<span class="tier-badge-paid">$${Number(p.price).toFixed(2)}</span>`;
         } else if (p.tierName) {
-          badge.innerHTML = `<span style="background:#f1f5f9;color:#475569;border-radius:20px;padding:4px 14px;font-size:0.8rem;font-weight:600;"><i class="bi bi-lock-fill"></i> ${p.tierName}</span>`;
+          badge.innerHTML = `<span class="tier-badge-tier"><i class="bi bi-lock-fill"></i> ${p.tierName}</span>`;
         } else {
-          badge.innerHTML = `<span style="background:#dcfce7;color:#166534;border-radius:20px;padding:4px 14px;font-size:0.8rem;font-weight:600;">Free</span>`;
+          badge.innerHTML = `<span class="tier-badge-free">Free</span>`;
         }
 
         // Rating
         if (p.averageRating != null) {
           const stars = Math.round(p.averageRating);
           document.getElementById("rating-display").innerHTML =
-            `<span style="color:#f59e0b;font-size:1.1rem;">${"★".repeat(stars)}${"☆".repeat(5 - stars)}</span>
-           <span style="margin-left:8px;font-weight:600;">${p.averageRating.toFixed(1)}</span>
-           <span style="color:#94a3b8;font-size:0.85rem;margin-left:4px;">/ 5.0 (${p.reviewCount || 0} ${(p.reviewCount || 0) === 1 ? "review" : "reviews"})</span>`;
+            `<span class="rating-stars-display">${"★".repeat(stars)}${"☆".repeat(5 - stars)}</span>
+           <span class="rating-value">${p.averageRating.toFixed(1)}</span>
+           <span class="rating-count">/ 5.0 (${p.reviewCount || 0} ${(p.reviewCount || 0) === 1 ? "review" : "reviews"})</span>`;
           document.getElementById("prompt-rating-stat").innerHTML =
-            `<i class="bi ${p.isLiked ? 'bi-heart-fill' : 'bi-heart'}" style="color:#ef4444;"></i> ${p.likeCount || 0} likes
-             <span style="margin-left:12px;"><i class="bi ${p.isSaved ? 'bi-bookmark-fill' : 'bi-bookmark'}" style="color:#f59e0b;"></i> ${p.saveCount || 0} saves</span>
-             <span style="margin-left:12px;"><i class="bi bi-star-fill" style="color:#f59e0b;"></i> ${p.averageRating.toFixed(1)} (${p.reviewCount || 0})</span>`;
+            `<i class="bi ${p.isLiked ? "bi-heart-fill" : "bi-heart"} detail-heart-icon"></i> ${p.likeCount || 0} likes
+             <span class="detail-bookmark-span"><i class="bi ${p.isSaved ? "bi-bookmark-fill" : "bi-bookmark"} detail-bookmark-icon"></i> ${p.saveCount || 0} saves</span>
+             <span class="detail-bookmark-span"><i class="bi bi-star-fill detail-bookmark-icon"></i> ${p.averageRating.toFixed(1)} (${p.reviewCount || 0})</span>`;
         } else {
           document.getElementById("rating-display").innerHTML =
-            '<span style="color:#94a3b8;font-size:0.9rem;">No ratings yet</span>';
+            '<span class="rating-none">No ratings yet</span>';
         }
 
         // Content visibility
@@ -397,10 +295,12 @@
 
       function setReviewRating(rating) {
         selectedReviewRating = rating;
-        document.querySelectorAll("#review-star-input button").forEach((button) => {
-          const value = Number(button.dataset.rating);
-          button.textContent = value <= rating ? "★" : "☆";
-        });
+        document
+          .querySelectorAll("#review-star-input button")
+          .forEach((button) => {
+            const value = Number(button.dataset.rating);
+            button.textContent = value <= rating ? "★" : "☆";
+          });
       }
 
       function escapeHtml(value) {
@@ -451,9 +351,12 @@
           // Keep the review form visible; the API will reject unauthenticated users.
         }
 
-        document.querySelectorAll("#review-star-input button").forEach((button) => {
-          button.onclick = () => setReviewRating(Number(button.dataset.rating));
-        });
+        document
+          .querySelectorAll("#review-star-input button")
+          .forEach((button) => {
+            button.onclick = () =>
+              setReviewRating(Number(button.dataset.rating));
+          });
 
         submitBtn.onclick = async () => {
           if (!selectedReviewRating) {
@@ -470,7 +373,8 @@
             credentials: "same-origin",
             body: JSON.stringify({
               rating: selectedReviewRating,
-              comment: document.getElementById("review-comment").value.trim() || null,
+              comment:
+                document.getElementById("review-comment").value.trim() || null,
             }),
           });
 
@@ -505,13 +409,16 @@
 
           const reviews = await response.json();
           if (reviews.length === 0) {
-            list.innerHTML = '<p style="color:#94a3b8;">No reviews yet.</p>';
+            list.innerHTML =
+              '<p class="detail-loading-text">No reviews yet.</p>';
             return;
           }
 
-          list.innerHTML = reviews.map((review) => {
-            const stars = "★".repeat(review.rating) + "☆".repeat(5 - review.rating);
-            return `
+          list.innerHTML = reviews
+            .map((review) => {
+              const stars =
+                "★".repeat(review.rating) + "☆".repeat(5 - review.rating);
+              return `
               <article class="review-card">
                 <div class="review-card-header">
                   <span class="review-card-user">@${escapeHtml(review.creatorName)}</span>
@@ -519,9 +426,10 @@
                 </div>
                 <p class="review-card-comment">${escapeHtml(review.comment || "No comment.")}</p>
               </article>`;
-          }).join("");
+            })
+            .join("");
         } catch (error) {
-          list.innerHTML = `<p style="color:#ef4444;">${error.message}</p>`;
+          list.innerHTML = `<p class="detail-error-text">${error.message}</p>`;
         }
       }
 
diff --git a/OnlyPrompt.Frontend/profile.html b/OnlyPrompt.Frontend/profile.html
index 4815b7f..5fe7ff5 100644
--- a/OnlyPrompt.Frontend/profile.html
+++ b/OnlyPrompt.Frontend/profile.html
@@ -1,398 +1,486 @@
 <!-- OnlyPrompt - Profile page: 
       - User profile display with avatar, bio, stats, and prompt cards (personal prompts) -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OnlyPrompt - Profile</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/profile.css">
-  <script src="../js/profile-shared.js"></script>
-  <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>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OnlyPrompt - Profile</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/profile.css" />
+    <script src="../js/profile-shared.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    />
+  </head>
+  <body>
+    <div class="layout">
+      <div id="sidebar-container"></div>
 
-    <div style="flex:1; margin:40px auto; max-width:950px;">
-      
-      <div id="topbar-container"></div>
+      <div class="page-body">
+        <div id="topbar-container"></div>
 
-      <main class="login-card profile-main" style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:24px;">
-        
-        <section class="profile-header" style="display:flex;align-items:center;gap:32px;border-bottom:1px solid #e5e7eb;padding-bottom:24px;">
-          
-          <img id="profileAvatar" src="../images/content/cat.png" class="profile-avatar" style="width:110px;height:110px;border-radius:50%;object-fit:cover;">
-          
-          <div class="profile-info" style="flex:1;">
-            <h1 id="profileDisplayName" style="font-size:2rem;font-weight:700;margin-bottom:4px;">Loading...</h1>
-            <div id="profileSlug" style="color:#64748b;margin-bottom:8px;">
-              @profile <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>
+        <main class="login-card profile-main">
+          <section class="profile-header">
+            <img
+              id="profileAvatar"
+              src="../images/content/cat.png"
+              class="profile-avatar"
+            />
+
+            <div class="profile-info">
+              <h1 id="profileDisplayName">Loading...</h1>
+              <div id="profileSlug">
+                @profile
+                <i class="bi bi-patch-check-fill profile-badge-icon"></i>
+              </div>
+
+              <div id="profileBio">Loading profile...</div>
+
+              <div id="profileSpecialities"></div>
+              <div id="profileStats">
+                <span><strong id="profileRating">0.0</strong> rating</span>
+                <span
+                  ><strong id="profileSubscribers">0</strong> subscribers</span
+                >
+              </div>
             </div>
 
-            <div id="profileBio" style="margin-bottom:8px;">
-              Loading profile...
+            <div id="profileActions">
+              <button
+                id="primaryProfileButton"
+                class="login-button"
+                onclick="location.href = 'settings.html'"
+              >
+                Edit Profile
+              </button>
+              <button id="shareProfileButton" class="login-button">
+                Share Profile
+              </button>
             </div>
+          </section>
 
-            <div id="profileSpecialities" style="color:#64748b;"></div>
-            <div id="profileStats" style="display:flex;gap:18px;color:#64748b;margin-top:12px;font-size:0.95rem;">
-              <span><strong id="profileRating" style="color:#111827;">0.0</strong> rating</span>
-              <span><strong id="profileSubscribers" style="color:#111827;">0</strong> subscribers</span>
-            </div>
-          </div>
+          <nav class="profile-tabs">
+            <button
+              type="button"
+              class="profile-tab active"
+              data-tab="mine"
+              id="myPromptsTab"
+            >
+              My Prompts
+            </button>
+            <button
+              type="button"
+              class="profile-tab"
+              data-tab="favorites"
+              id="favoritesTab"
+            >
+              Favorites
+            </button>
+            <button
+              type="button"
+              class="profile-tab"
+              data-tab="saved"
+              id="savedTab"
+            >
+              Saved
+            </button>
+          </nav>
 
-          <div id="profileActions" style="display:flex;flex-direction:column;gap:10px;">
-            <button id="primaryProfileButton" class="login-button" onclick="location.href='settings.html'">Edit Profile</button>
-            <button id="shareProfileButton" class="login-button" style="background:#f3f4f6;color:#111;box-shadow:none;">Share Profile</button>
-          </div>
-
-        </section>
-
-        <nav class="profile-tabs" style="display:flex;gap:24px;border-bottom:2px solid #e5e7eb;margin:32px 0 18px 0;flex-wrap:wrap;">
-          <button type="button" class="profile-tab active" data-tab="mine" id="myPromptsTab">My Prompts</button>
-          <button type="button" class="profile-tab" data-tab="favorites" id="favoritesTab">Favorites</button>
-          <button type="button" class="profile-tab" data-tab="saved" id="savedTab">Saved</button>
-        </nav>
-
-        <section id="profile-prompts-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;">
-          <div style="grid-column:1/-1;color:#64748b;text-align:center;padding:28px;">Loading prompts...</div>
-        </section>
-
-      </main>
+          <section id="profile-prompts-grid">
+            <div class="profile-grid-loading">Loading prompts...</div>
+          </section>
+        </main>
+      </div>
     </div>
-  </div>
 
-  <script>
-    fetch('/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');
+    <script>
+      fetch("/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");
+            });
+          // Then set 'active' only on the My Profile link
+          const profileLink = document.querySelector(
+            '#sidebar-container a[href="profile.html"]',
+          );
+          if (profileLink) profileLink.classList.add("active");
         });
-        // Then set 'active' only on the My Profile link
-        const profileLink = document.querySelector('#sidebar-container a[href="profile.html"]');
-        if (profileLink) profileLink.classList.add('active');
-      });
 
-    fetch('/topbar.html')
-      .then(r => r.text())
-      .then(data => document.getElementById('topbar-container').innerHTML = data);
+      fetch("/topbar.html")
+        .then((r) => r.text())
+        .then(
+          (data) =>
+            (document.getElementById("topbar-container").innerHTML = data),
+        );
 
-    const profileAvatar = document.getElementById('profileAvatar');
-    const profileDisplayName = document.getElementById('profileDisplayName');
-    const profileSlug = document.getElementById('profileSlug');
-    const profileBio = document.getElementById('profileBio');
-    const profileSpecialities = document.getElementById('profileSpecialities');
-    const profileRating = document.getElementById('profileRating');
-    const profileSubscribers = document.getElementById('profileSubscribers');
-    const profilePromptsGrid = document.getElementById('profile-prompts-grid');
-    const myPromptsTab = document.getElementById('myPromptsTab');
-    const favoritesTab = document.getElementById('favoritesTab');
-    const savedTab = document.getElementById('savedTab');
-    const profileActions = document.getElementById('profileActions');
-    const primaryProfileButton = document.getElementById('primaryProfileButton');
-    const shareProfileButton = document.getElementById('shareProfileButton');
-    const profileTabs = document.querySelector('.profile-tabs');
-    const params = new URLSearchParams(location.search);
-    const profileId = params.get('id');
-    let ownPrompts = [];
-    let allPrompts = [];
-    let profilePrompts = [];
-    let activeProfileTab = 'mine';
-    let currentUserId = null;
-    let isOwnProfile = !profileId;
-    let profileLoaded = false;
-    let currentIsFollowing = false;
+      const profileAvatar = document.getElementById("profileAvatar");
+      const profileDisplayName = document.getElementById("profileDisplayName");
+      const profileSlug = document.getElementById("profileSlug");
+      const profileBio = document.getElementById("profileBio");
+      const profileSpecialities = document.getElementById(
+        "profileSpecialities",
+      );
+      const profileRating = document.getElementById("profileRating");
+      const profileSubscribers = document.getElementById("profileSubscribers");
+      const profilePromptsGrid = document.getElementById(
+        "profile-prompts-grid",
+      );
+      const myPromptsTab = document.getElementById("myPromptsTab");
+      const favoritesTab = document.getElementById("favoritesTab");
+      const savedTab = document.getElementById("savedTab");
+      const profileActions = document.getElementById("profileActions");
+      const primaryProfileButton = document.getElementById(
+        "primaryProfileButton",
+      );
+      const shareProfileButton = document.getElementById("shareProfileButton");
+      const profileTabs = document.querySelector(".profile-tabs");
+      const params = new URLSearchParams(location.search);
+      const profileId = params.get("id");
+      let ownPrompts = [];
+      let allPrompts = [];
+      let profilePrompts = [];
+      let activeProfileTab = "mine";
+      let currentUserId = null;
+      let isOwnProfile = !profileId;
+      let profileLoaded = false;
+      let currentIsFollowing = false;
 
-    async function fetchJson(url) {
-      const response = await fetch(url, { credentials: 'same-origin' });
-      if (response.status === 401) {
-        location.href = '/login';
-        return null;
-      }
-      if (!response.ok) throw new Error(`${url} returned ${response.status}`);
-      return response.json();
-    }
-
-    function renderProfile(profile, fallbackName = 'Profile') {
-      profileDisplayName.textContent = profile.displayName || fallbackName;
-      profileSlug.innerHTML = `@${profile.user?.userName || profile.slug || 'profile'} <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>`;
-      profileBio.textContent = profile.bio || 'No bio yet.';
-      profileSpecialities.textContent = profile.specialities || 'No specialities added yet.';
-      profileRating.textContent = Number(profile.averageRating || 0).toFixed(1);
-      profileSubscribers.textContent = profile.subscribers || 0;
-
-      if (profile.avatarUrl) {
-        profileAvatar.src = profile.avatarUrl;
-      }
-      profileLoaded = true;
-    }
-
-    function renderProfileFromPrompt(prompt) {
-      if (!prompt || profileLoaded) return;
-
-      profileDisplayName.textContent = prompt.creatorName || 'Creator Profile';
-      profileSlug.innerHTML = `@${prompt.creatorName || 'creator'} <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>`;
-      profileBio.textContent = 'No bio yet.';
-      profileSpecialities.textContent = '';
-      profileRating.textContent = Number(prompt.averageRating || 0).toFixed(1);
-      profileSubscribers.textContent = 0;
-
-      if (prompt.creatorAvatarUrl) {
-        profileAvatar.src = prompt.creatorAvatarUrl;
-      }
-    }
-
-    async function loadCreatorCardFallback() {
-      if (isOwnProfile || profileLoaded || !profileId) return;
-
-      try {
-        const creators = await fetchJson('/api/v1/profiles?limit=100');
-        const creator = creators.find((item) => item.userId?.toLowerCase() === profileId.toLowerCase());
-        if (!creator) return;
-
-        renderProfile({
-          displayName: creator.displayName,
-          slug: creator.slug,
-          bio: creator.bio,
-          avatarUrl: creator.avatarUrl,
-          specialities: null,
-          averageRating: creator.averageRating,
-          subscribers: creator.subscribers
-        }, 'Creator Profile');
-      } catch {
-        // Prompt data below still provides a minimal fallback if creator cards fail.
-      }
-    }
-
-    async function loadProfile() {
-      try {
-        const currentProfile = await window.loadCurrentProfile();
-        currentUserId = currentProfile.user?.id;
-        isOwnProfile = !profileId || profileId.toLowerCase() === currentUserId?.toLowerCase();
-
-        if (isOwnProfile) {
-          renderProfile(currentProfile, 'My Profile');
-          return;
+      async function fetchJson(url) {
+        const response = await fetch(url, { credentials: "same-origin" });
+        if (response.status === 401) {
+          location.href = "/login";
+          return null;
         }
+        if (!response.ok) throw new Error(`${url} returned ${response.status}`);
+        return response.json();
+      }
 
-        const profile = await fetchJson(`/api/v1/profiles/${encodeURIComponent(profileId)}`);
-        renderProfile(profile, 'Creator Profile');
-      } catch (error) {
-        if (isOwnProfile) {
-          profileDisplayName.textContent = 'Profile unavailable';
-          profileBio.textContent = error.message;
-        } else {
-          profileDisplayName.textContent = 'Loading creator...';
-          profileBio.textContent = '';
+      function renderProfile(profile, fallbackName = "Profile") {
+        profileDisplayName.textContent = profile.displayName || fallbackName;
+        profileSlug.innerHTML = `@${profile.user?.userName || profile.slug || "profile"} <i class="bi bi-patch-check-fill profile-badge-icon"></i>`;
+        profileBio.textContent = profile.bio || "No bio yet.";
+        profileSpecialities.textContent =
+          profile.specialities || "No specialities added yet.";
+        profileRating.textContent = Number(profile.averageRating || 0).toFixed(
+          1,
+        );
+        profileSubscribers.textContent = profile.subscribers || 0;
+
+        if (profile.avatarUrl) {
+          profileAvatar.src = profile.avatarUrl;
+        }
+        profileLoaded = true;
+      }
+
+      function renderProfileFromPrompt(prompt) {
+        if (!prompt || profileLoaded) return;
+
+        profileDisplayName.textContent =
+          prompt.creatorName || "Creator Profile";
+        profileSlug.innerHTML = `@${prompt.creatorName || "creator"} <i class="bi bi-patch-check-fill profile-badge-icon"></i>`;
+        profileBio.textContent = "No bio yet.";
+        profileSpecialities.textContent = "";
+        profileRating.textContent = Number(prompt.averageRating || 0).toFixed(
+          1,
+        );
+        profileSubscribers.textContent = 0;
+
+        if (prompt.creatorAvatarUrl) {
+          profileAvatar.src = prompt.creatorAvatarUrl;
         }
       }
-    }
 
-    function isPromptMarked(type, id) {
-      if (type === 'liked') {
-        const prompt = allPrompts.find((item) => item.id === id);
-        return prompt?.isLiked === true;
+      async function loadCreatorCardFallback() {
+        if (isOwnProfile || profileLoaded || !profileId) return;
+
+        try {
+          const creators = await fetchJson("/api/v1/profiles?limit=100");
+          const creator = creators.find(
+            (item) => item.userId?.toLowerCase() === profileId.toLowerCase(),
+          );
+          if (!creator) return;
+
+          renderProfile(
+            {
+              displayName: creator.displayName,
+              slug: creator.slug,
+              bio: creator.bio,
+              avatarUrl: creator.avatarUrl,
+              specialities: null,
+              averageRating: creator.averageRating,
+              subscribers: creator.subscribers,
+            },
+            "Creator Profile",
+          );
+        } catch {
+          // Prompt data below still provides a minimal fallback if creator cards fail.
+        }
       }
 
-      if (type === 'saved') {
-        const prompt = allPrompts.find((item) => item.id === id);
-        return prompt?.isSaved === true;
+      async function loadProfile() {
+        try {
+          const currentProfile = await window.loadCurrentProfile();
+          currentUserId = currentProfile.user?.id;
+          isOwnProfile =
+            !profileId ||
+            profileId.toLowerCase() === currentUserId?.toLowerCase();
+
+          if (isOwnProfile) {
+            renderProfile(currentProfile, "My Profile");
+            return;
+          }
+
+          const profile = await fetchJson(
+            `/api/v1/profiles/${encodeURIComponent(profileId)}`,
+          );
+          renderProfile(profile, "Creator Profile");
+        } catch (error) {
+          if (isOwnProfile) {
+            profileDisplayName.textContent = "Profile unavailable";
+            profileBio.textContent = error.message;
+          } else {
+            profileDisplayName.textContent = "Loading creator...";
+            profileBio.textContent = "";
+          }
+        }
       }
 
-      return false;
-    }
+      function isPromptMarked(type, id) {
+        if (type === "liked") {
+          const prompt = allPrompts.find((item) => item.id === id);
+          return prompt?.isLiked === true;
+        }
 
-    function renderProfilePrompt(prompt, options = {}) {
-      const image = prompt.exampleImageUrl || '../images/content/post1.png';
-      const showEdit = options.showEdit === true;
-      const rating = prompt.averageRating == null ? 'No ratings' : prompt.averageRating.toFixed(1);
-      return `
-        <div onclick="location.href='/post-detail?id=${prompt.id}'" style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:18px;display:flex;gap:16px;cursor:pointer;">
-          <img src="${image}" alt="${prompt.title}" style="width:72px;height:72px;border-radius:12px;object-fit:cover;">
-          <div style="flex:1;min-width:0;">
-            <div style="font-weight:700;">${prompt.title}</div>
-            <div style="color:#64748b;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${prompt.description || 'No description yet.'}</div>
-            <div style="display:flex;gap:16px;color:#64748b;align-items:center;flex-wrap:wrap;">
+        if (type === "saved") {
+          const prompt = allPrompts.find((item) => item.id === id);
+          return prompt?.isSaved === true;
+        }
+
+        return false;
+      }
+
+      function renderProfilePrompt(prompt, options = {}) {
+        const image = prompt.exampleImageUrl || "../images/content/post1.png";
+        const showEdit = options.showEdit === true;
+        const rating =
+          prompt.averageRating == null
+            ? "No ratings"
+            : prompt.averageRating.toFixed(1);
+        return `
+        <div onclick="location.href='/post-detail?id=${prompt.id}'" class="profile-prompt-card">
+          <img src="${image}" alt="${prompt.title}" class="profile-prompt-img">
+          <div class="profile-prompt-body">
+            <div class="profile-prompt-title">${prompt.title}</div>
+            <div class="profile-prompt-desc">${prompt.description || "No description yet."}</div>
+            <div class="profile-prompt-meta">
               <span><i class="bi bi-star"></i> ${rating}</span>
-              ${prompt.creatorName ? `<span>@${prompt.creatorName}</span>` : ''}
-              ${showEdit ? `<button onclick="event.stopPropagation(); location.href='/create?id=${prompt.id}'" style="border:none;background:#f1f5f9;color:#334155;border-radius:10px;padding:6px 10px;font-weight:700;cursor:pointer;">Edit</button>` : ''}
+              ${prompt.creatorName ? `<span>@${prompt.creatorName}</span>` : ""}
+              ${showEdit ? `<button onclick="event.stopPropagation(); location.href='/create?id=${prompt.id}'" class="profile-prompt-edit-btn">Edit</button>` : ""}
             </div>
           </div>
         </div>`;
-    }
-
-    function renderPromptList(prompts, emptyText, options = {}) {
-      if (!prompts.length) {
-        profilePromptsGrid.innerHTML = `<div style="grid-column:1/-1;color:#64748b;text-align:center;padding:28px;">${emptyText}</div>`;
-        return;
       }
 
-      profilePromptsGrid.innerHTML = prompts.map((prompt) => renderProfilePrompt(prompt, options)).join('');
-    }
+      function renderPromptList(prompts, emptyText, options = {}) {
+        if (!prompts.length) {
+          profilePromptsGrid.innerHTML = `<div class="profile-grid-empty">${emptyText}</div>`;
+          return;
+        }
 
-    function updateTabs() {
-      document.querySelectorAll('.profile-tab').forEach((tab) => {
-        tab.classList.toggle('active', tab.dataset.tab === activeProfileTab);
-      });
-
-      const liked = allPrompts.filter((prompt) => isPromptMarked('liked', prompt.id));
-      const saved = allPrompts.filter((prompt) => isPromptMarked('saved', prompt.id));
-
-      myPromptsTab.textContent = `My Prompts (${ownPrompts.length})`;
-      favoritesTab.textContent = `Favorites (${liked.length})`;
-      savedTab.textContent = `Saved (${saved.length})`;
-
-      if (activeProfileTab === 'favorites') {
-        renderPromptList(liked, 'No liked prompts yet.');
-      } else if (activeProfileTab === 'saved') {
-        renderPromptList(saved, 'No saved prompts yet.');
-      } else {
-        renderPromptList(ownPrompts, 'No prompts yet.', { showEdit: true });
-      }
-    }
-
-    function updateProfileMode() {
-      if (isOwnProfile) {
-        profileActions.style.display = 'flex';
-        primaryProfileButton.textContent = 'Edit Profile';
-        primaryProfileButton.disabled = false;
-        primaryProfileButton.onclick = () => location.href = 'settings.html';
-        profileTabs.style.display = 'flex';
-        return;
+        profilePromptsGrid.innerHTML = prompts
+          .map((prompt) => renderProfilePrompt(prompt, options))
+          .join("");
       }
 
-      profileActions.style.display = 'flex';
-      primaryProfileButton.textContent = currentIsFollowing ? 'Following' : 'Follow';
-      primaryProfileButton.disabled = false;
-      primaryProfileButton.onclick = toggleProfileFollow;
-      favoritesTab.style.display = 'none';
-      savedTab.style.display = 'none';
-      myPromptsTab.textContent = `Prompts (${profilePrompts.length})`;
-      renderPromptList(profilePrompts, 'No prompts yet.');
-    }
-
-    async function loadFollowState() {
-      if (isOwnProfile || !profileId) return;
-
-      try {
-        const response = await fetch(`/api/v1/subscriptions/${encodeURIComponent(profileId)}`, {
-          credentials: 'same-origin'
+      function updateTabs() {
+        document.querySelectorAll(".profile-tab").forEach((tab) => {
+          tab.classList.toggle("active", tab.dataset.tab === activeProfileTab);
         });
-        if (response.status === 401) {
-          location.href = '/login';
-          return;
-        }
 
-        const subscription = response.ok ? await response.json() : null;
-        currentIsFollowing = subscription !== null;
-        updateProfileMode();
-      } catch {
-        currentIsFollowing = false;
-      }
-    }
+        const liked = allPrompts.filter((prompt) =>
+          isPromptMarked("liked", prompt.id),
+        );
+        const saved = allPrompts.filter((prompt) =>
+          isPromptMarked("saved", prompt.id),
+        );
 
-    async function toggleProfileFollow() {
-      if (!profileId) return;
+        myPromptsTab.textContent = `My Prompts (${ownPrompts.length})`;
+        favoritesTab.textContent = `Favorites (${liked.length})`;
+        savedTab.textContent = `Saved (${saved.length})`;
 
-      primaryProfileButton.disabled = true;
-      const response = await fetch(`/api/v1/subscriptions/${encodeURIComponent(profileId)}`, {
-        method: currentIsFollowing ? 'DELETE' : 'PUT',
-        credentials: 'same-origin'
-      });
-
-      if (response.status === 401) {
-        location.href = '/login';
-        return;
-      }
-
-      if (response.ok) {
-        const currentSubscribers = Number(profileSubscribers.textContent || 0);
-        currentIsFollowing = !currentIsFollowing;
-        profileSubscribers.textContent = Math.max(0, currentSubscribers + (currentIsFollowing ? 1 : -1));
-        updateProfileMode();
-      } else {
-        primaryProfileButton.disabled = false;
-      }
-    }
-
-    shareProfileButton.addEventListener('click', async () => {
-      const url = isOwnProfile
-        ? `${location.origin}/profile.html`
-        : `${location.origin}/profile.html?id=${encodeURIComponent(profileId)}`;
-
-      try {
-        await navigator.clipboard.writeText(url);
-        shareProfileButton.textContent = 'Copied';
-        setTimeout(() => shareProfileButton.textContent = 'Share Profile', 1200);
-      } catch {
-        location.href = url;
-      }
-    });
-
-    async function loadOwnPrompts() {
-      try {
-        const response = await fetch('/api/v1/prompts/mine');
-        if (response.status === 401) {
-          location.href = '/login';
-          return;
-        }
-        if (!response.ok) throw new Error('Prompts could not be loaded.');
-
-        ownPrompts = await response.json();
-        updateTabs();
-      } catch (error) {
-        profilePromptsGrid.innerHTML = `<div style="grid-column:1/-1;color:#ef4444;text-align:center;padding:28px;">${error.message}</div>`;
-      }
-    }
-
-    async function loadAllPromptReferences() {
-      try {
-        const response = await fetch('/api/v1/prompts?limit=100');
-        if (!response.ok) return;
-        allPrompts = await response.json();
-        if (isOwnProfile) {
-          updateTabs();
+        if (activeProfileTab === "favorites") {
+          renderPromptList(liked, "No liked prompts yet.");
+        } else if (activeProfileTab === "saved") {
+          renderPromptList(saved, "No saved prompts yet.");
         } else {
-          profilePrompts = allPrompts.filter((prompt) => prompt.creatorId?.toLowerCase() === profileId.toLowerCase());
-          renderProfileFromPrompt(profilePrompts[0]);
-          updateProfileMode();
+          renderPromptList(ownPrompts, "No prompts yet.", { showEdit: true });
         }
-      } catch {
-        // Favorites and saved stay empty if prompts cannot be loaded.
       }
-    }
 
-    document.querySelectorAll('.profile-tab').forEach((tab) => {
-      tab.addEventListener('click', () => {
-        if (!isOwnProfile) {
-          updateProfileMode();
+      function updateProfileMode() {
+        if (isOwnProfile) {
+          profileActions.style.display = "flex";
+          primaryProfileButton.textContent = "Edit Profile";
+          primaryProfileButton.disabled = false;
+          primaryProfileButton.onclick = () =>
+            (location.href = "settings.html");
+          profileTabs.style.display = "flex";
           return;
         }
-        activeProfileTab = tab.dataset.tab;
-        updateTabs();
-      });
-    });
 
-    (async function initProfilePage() {
-      await loadProfile();
-      await loadCreatorCardFallback();
-      await loadFollowState();
-      updateProfileMode();
-      if (isOwnProfile) {
-        loadOwnPrompts();
+        profileActions.style.display = "flex";
+        primaryProfileButton.textContent = currentIsFollowing
+          ? "Following"
+          : "Follow";
+        primaryProfileButton.disabled = false;
+        primaryProfileButton.onclick = toggleProfileFollow;
+        favoritesTab.style.display = "none";
+        savedTab.style.display = "none";
+        myPromptsTab.textContent = `Prompts (${profilePrompts.length})`;
+        renderPromptList(profilePrompts, "No prompts yet.");
       }
-      loadAllPromptReferences();
-    })();
-  </script>
-</body>
+
+      async function loadFollowState() {
+        if (isOwnProfile || !profileId) return;
+
+        try {
+          const response = await fetch(
+            `/api/v1/subscriptions/${encodeURIComponent(profileId)}`,
+            {
+              credentials: "same-origin",
+            },
+          );
+          if (response.status === 401) {
+            location.href = "/login";
+            return;
+          }
+
+          const subscription = response.ok ? await response.json() : null;
+          currentIsFollowing = subscription !== null;
+          updateProfileMode();
+        } catch {
+          currentIsFollowing = false;
+        }
+      }
+
+      async function toggleProfileFollow() {
+        if (!profileId) return;
+
+        primaryProfileButton.disabled = true;
+        const response = await fetch(
+          `/api/v1/subscriptions/${encodeURIComponent(profileId)}`,
+          {
+            method: currentIsFollowing ? "DELETE" : "PUT",
+            credentials: "same-origin",
+          },
+        );
+
+        if (response.status === 401) {
+          location.href = "/login";
+          return;
+        }
+
+        if (response.ok) {
+          const currentSubscribers = Number(
+            profileSubscribers.textContent || 0,
+          );
+          currentIsFollowing = !currentIsFollowing;
+          profileSubscribers.textContent = Math.max(
+            0,
+            currentSubscribers + (currentIsFollowing ? 1 : -1),
+          );
+          updateProfileMode();
+        } else {
+          primaryProfileButton.disabled = false;
+        }
+      }
+
+      shareProfileButton.addEventListener("click", async () => {
+        const url = isOwnProfile
+          ? `${location.origin}/profile.html`
+          : `${location.origin}/profile.html?id=${encodeURIComponent(profileId)}`;
+
+        try {
+          await navigator.clipboard.writeText(url);
+          shareProfileButton.textContent = "Copied";
+          setTimeout(
+            () => (shareProfileButton.textContent = "Share Profile"),
+            1200,
+          );
+        } catch {
+          location.href = url;
+        }
+      });
+
+      async function loadOwnPrompts() {
+        try {
+          const response = await fetch("/api/v1/prompts/mine");
+          if (response.status === 401) {
+            location.href = "/login";
+            return;
+          }
+          if (!response.ok) throw new Error("Prompts could not be loaded.");
+
+          ownPrompts = await response.json();
+          updateTabs();
+        } catch (error) {
+          profilePromptsGrid.innerHTML = `<div class="profile-grid-error">${error.message}</div>`;
+        }
+      }
+
+      async function loadAllPromptReferences() {
+        try {
+          const response = await fetch("/api/v1/prompts?limit=100");
+          if (!response.ok) return;
+          allPrompts = await response.json();
+          if (isOwnProfile) {
+            updateTabs();
+          } else {
+            profilePrompts = allPrompts.filter(
+              (prompt) =>
+                prompt.creatorId?.toLowerCase() === profileId.toLowerCase(),
+            );
+            renderProfileFromPrompt(profilePrompts[0]);
+            updateProfileMode();
+          }
+        } catch {
+          // Favorites and saved stay empty if prompts cannot be loaded.
+        }
+      }
+
+      document.querySelectorAll(".profile-tab").forEach((tab) => {
+        tab.addEventListener("click", () => {
+          if (!isOwnProfile) {
+            updateProfileMode();
+            return;
+          }
+          activeProfileTab = tab.dataset.tab;
+          updateTabs();
+        });
+      });
+
+      (async function initProfilePage() {
+        await loadProfile();
+        await loadCreatorCardFallback();
+        await loadFollowState();
+        updateProfileMode();
+        if (isOwnProfile) {
+          loadOwnPrompts();
+        }
+        loadAllPromptReferences();
+      })();
+    </script>
+  </body>
 </html>
diff --git a/OnlyPrompt.Frontend/settings.html b/OnlyPrompt.Frontend/settings.html
index 0476e08..32ccbc7 100644
--- a/OnlyPrompt.Frontend/settings.html
+++ b/OnlyPrompt.Frontend/settings.html
@@ -17,11 +17,11 @@
   <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 class="layout">
     
     <div id="sidebar-container"></div>
 
-    <div style="flex:1; display: flex; flex-direction: column;">
+    <div class="page-body">
       
       <div id="topbar-container"></div>
 
@@ -68,7 +68,7 @@
               </div>
               <div class="form-actions">
                 <button type="submit" class="save-btn">Save Changes</button>
-                <p id="profileSaveStatus" style="margin-top:10px;color:#64748b;text-align:center;"></p>
+                <p id="profileSaveStatus"></p></p>
               </div>
             </form>
           </div>
