diff --git a/apps/web/src/pages/sessions.tsx b/apps/web/src/pages/sessions.tsx
index 9a4573b..d7f94f7 100644
--- a/apps/web/src/pages/sessions.tsx
+++ b/apps/web/src/pages/sessions.tsx
@@ -388,7 +388,23 @@ export const SessionsPage = () => {
           )}
 
           {/* Active Sessions */}
-          <div className="active-sessions-section">
+          <div className={`active-sessions-section ${createStatus === "creating" || loadingSessionId ? "dimmed" : ""}`}>
+            {createStatus === "creating" && (
+              <div className="loading-overlay">
+                <div className="loading-content">
+                  <Icon name="loading" size="lg" />
+                  <p>{createProgress || "Creating session..."}</p>
+                </div>
+              </div>
+            )}
+            {loadingSessionId && (
+              <div className="loading-overlay">
+                <div className="loading-content">
+                  <Icon name="loading" size="lg" />
+                  <p>{loadingAction || "Processing..."}</p>
+                </div>
+              </div>
+            )}
             <h2>
               Active Sessions
               {activeSessions.length > 0 && (
@@ -398,23 +414,7 @@ export const SessionsPage = () => {
             {activeSessions.length === 0 ? (
               <p className="muted">No active sessions</p>
             ) : (
-              <div className={`sessions-grid ${createStatus === "creating" || loadingSessionId ? "dimmed" : ""}`}>
-                {createStatus === "creating" && (
-                  <div className="loading-overlay">
-                    <div className="loading-content">
-                      <Icon name="loading" size="lg" />
-                      <p>{createProgress || "Creating session..."}</p>
-                    </div>
-                  </div>
-                )}
-                {loadingSessionId && (
-                  <div className="loading-overlay">
-                    <div className="loading-content">
-                      <Icon name="loading" size="lg" />
-                      <p>{loadingAction || "Processing..."}</p>
-                    </div>
-                  </div>
-                )}
+              <div className="sessions-grid">
                 {activeSessions.map((session) => (
                   <div className="card session-card" key={session.id}>
                     <div className="session-info">
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 6131118..9f93cb0 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2652,9 +2652,15 @@ a.nav-item,
 }
 
 .active-sessions-section {
+  position: relative;
   margin-bottom: var(--space-6);
 }
 
+.active-sessions-section.dimmed {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .active-sessions-section h2 {
   display: flex;
   align-items: center;