diff --git a/assets/css/custom.css b/assets/css/custom.css
index c3b7c60..119a287 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -182,10 +182,10 @@ body {
 
 /* Activity Builder */
 #custom-builder {
-    background: var(--surface-color);
-    padding: 1.5rem;
-    border: 1px dashed var(--border-color);
-    border-radius: 8px;
+    background: transparent;
+    padding: 0;
+    border: none;
+    border-radius: 0;
 }
 
 .activity-row {
@@ -292,7 +292,7 @@ body {
 }
 
 .timer-side-column {
-    width: 350px;
+    width: 380px;
     order: 1; /* History on left on desktop */
 }
 
@@ -310,4 +310,36 @@ body {
 
 footer {
     border-color: var(--border-color) !important;
+}
+
+/* Dark Mode Overrides for Status Badges and Table Rows */
+body.dark-mode .bg-success {
+    background-color: rgba(16, 185, 129, 0.2) !important;
+    color: #10b981 !important;
+    border: 1px solid rgba(16, 185, 129, 0.4);
+}
+body.dark-mode .bg-primary {
+    background-color: rgba(59, 130, 246, 0.2) !important;
+    color: #60a5fa !important;
+    border: 1px solid rgba(59, 130, 246, 0.4);
+}
+body.dark-mode .bg-danger {
+    background-color: rgba(239, 68, 68, 0.2) !important;
+    color: #f87171 !important;
+    border: 1px solid rgba(239, 68, 68, 0.4);
+}
+body.dark-mode .table-success {
+    background-color: rgba(16, 185, 129, 0.1) !important;
+    color: var(--text-primary) !important;
+}
+
+/* Ensure history list items inherit dark mode color */
+body.dark-mode .table-precise td {
+    color: var(--text-primary);
+}
+body.dark-mode .font-tabular {
+    color: var(--text-primary);
+}
+body.dark-mode .text-muted {
+    color: var(--text-secondary) !important;
 }
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index b4359ae..07d0c4a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -60,6 +60,7 @@ const app = {
         activeActivityName: document.getElementById('active-activity-name'),
         sessionTitle: document.getElementById('session-title'),
         timerSideColumn: document.getElementById('timer-side-column'),
+        historySection: document.getElementById('history-section'),
         
         btnStart: document.getElementById('btn-start'),
         btnPause: document.getElementById('btn-pause'),
@@ -186,9 +187,17 @@ const app = {
         this.el.btnNext.classList.toggle('d-none', !mode.hasRelay);
         
         this.el.timerSideColumn.classList.toggle('d-none', !mode.hasLaps && !mode.hasRelay && !mode.isCustom);
+        
+        if (mode.isCustom) {
+            this.el.customBuilder.classList.remove('d-none');
+            this.el.historySection.classList.add('d-none');
+        } else {
+            this.el.customBuilder.classList.add('d-none');
+            this.el.historySection.classList.remove('d-none');
+        }
+
         this.el.countdownInputs.classList.toggle('d-none', modeKey !== 'countdown');
         this.el.relayConfig.classList.toggle('d-none', !mode.hasRelay);
-        this.el.customBuilder.classList.toggle('d-none', !mode.isCustom);
         this.el.customOptions.classList.toggle('d-none', !mode.isCustom);
         this.el.restAlertContainer.classList.toggle('d-none', !mode.isCustom);
         this.el.activeActivityName.classList.add('d-none');
@@ -294,6 +303,10 @@ const app = {
             
             this.countdownStartValue = this.customActivities[0].duration;
             this.elapsedTime = isCountdownMode ? this.countdownStartValue : 0;
+
+            // Transition: Builder -> History
+            this.el.customBuilder.classList.add('d-none');
+            this.el.historySection.classList.remove('d-none');
         }
 
         if (this.isPaused) {
@@ -379,6 +392,12 @@ const app = {
         if (this.el.inputS) this.el.inputS.disabled = false;
         if (this.el.participantCount) this.el.participantCount.disabled = false;
 
+        // Transition: History -> Builder (if custom)
+        if (this.currentMode === 'custom') {
+            this.el.customBuilder.classList.remove('d-none');
+            this.el.historySection.classList.add('d-none');
+        }
+
         this.updateDisplay();
     },
 
diff --git a/index.php b/index.php
index 7cd13d5..d8a2b90 100644
--- a/index.php
+++ b/index.php
@@ -114,24 +114,40 @@ $projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
             
             <div class="timer-workspace-container">
                 
-                <!-- Side Column (History) - MOVED TO LEFT -->
+                <!-- Side Column (History / Builder) - LEFT -->
                 <div id="timer-side-column" class="timer-side-column d-none">
                     <div class="card card-precise p-4 h-100">
-                        <h4 id="list-title" class="fs-6 fw-bold text-uppercase tracking-widest border-bottom pb-2 mb-3">Activities Completed</h4>
-                        <div class="table-responsive">
-                            <table class="table table-precise align-middle">
-                                <thead id="list-head">
-                                    <tr>
-                                        <th>Activity</th>
-                                        <th>Duration</th>
-                                        <th class="text-end">Status</th>
-                                    </tr>
-                                </thead>
-                                <tbody id="list-body">
-                                    <!-- Data injected here -->
-                                </tbody>
-                            </table>
+                        
+                        <!-- History Section -->
+                        <div id="history-section">
+                            <h4 id="list-title" class="fs-6 fw-bold text-uppercase tracking-widest border-bottom pb-2 mb-3">Activities Completed</h4>
+                            <div class="table-responsive">
+                                <table class="table table-precise align-middle">
+                                    <thead id="list-head">
+                                        <tr>
+                                            <th>Activity</th>
+                                            <th>Duration</th>
+                                            <th class="text-end">Status</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="list-body">
+                                        <!-- Data injected here -->
+                                    </tbody>
+                                </table>
+                            </div>
                         </div>
+
+                        <!-- Custom Timer Builder Section -->
+                        <div id="custom-builder" class="d-none text-start">
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <h4 class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities Chain</h4>
+                                <button id="btn-add-activity" class="btn btn-outline-primary btn-sm btn-precise">+ Add Activity</button>
+                            </div>
+                            <div id="activity-list" class="d-flex flex-column gap-3 mb-3">
+                                <!-- Activity inputs will be injected here -->
+                            </div>
+                        </div>
+
                     </div>
                 </div>
 
@@ -262,16 +278,6 @@ $projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
                         </div>
                     </div>
 
-                    <!-- Custom Timer Builder -->
-                    <div id="custom-builder" class="d-none mb-5 text-start">
-                        <div class="d-flex justify-content-between align-items-center mb-3">
-                            <h4 class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities Chain</h4>
-                            <button id="btn-add-activity" class="btn btn-outline-primary btn-sm btn-precise">+ Add Activity</button>
-                        </div>
-                        <div id="activity-list" class="d-flex flex-column gap-3 mb-3">
-                            <!-- Activity inputs will be injected here -->
-                        </div>
-                    </div>
                 </div>
 
             </div>