diff --git a/clock.js b/clock.js
index ee35db1..ab85ef8 100644
--- a/clock.js
+++ b/clock.js
@@ -81,4 +81,10 @@ window.addEventListener('load',()=>{
   placeMarkers();
   updateClock();
   setInterval(updateClock,1000);
+  const clk=document.getElementById('clock');
+  if(clk){
+    clk.addEventListener('click',()=>{
+      document.body.classList.toggle('fullscreen-clock');
+    });
+  }
 });
diff --git a/index.html b/index.html
index be1dffb..91bcfda 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,21 @@
         <div class="subtitle">CosmoChron Binary Epoch Calendar</div>
     </div>
 
-    <div class="current-time">
-        <div class="label">Current CoBiE Time</div>
-        <div class="cobie-time" id="cobieTime" tabindex="0">+00000000.0000</div>
-        <div class="regular-time" id="regularTime">Loading...</div>
-        <div class="regular-time" style="font-size: 0.9em; color: #888;" id="taiTime">TAI: Loading...</div>
+    <div class="time-display">
+        <div class="current-time">
+            <div class="label">Current CoBiE Time</div>
+            <div class="cobie-time" id="cobieTime" tabindex="0">+00000000.0000</div>
+            <div class="regular-time" id="regularTime">Loading...</div>
+            <div class="regular-time" style="font-size: 0.9em; color: #888;" id="taiTime">TAI: Loading...</div>
+        </div>
+
+        <div class="analog-clock-container">
+            <div id="clock">
+                <div class="hand chronon" id="handChronon"></div>
+                <div class="hand quantic" id="handQuantic"></div>
+                <div class="hand xeno" id="handXeno"></div>
+            </div>
+        </div>
     </div>
 
     <div class="timezone-selector">
@@ -138,5 +148,6 @@
 
     <script src="events.js"></script>
     <script src="script.js"></script>
+    <script src="clock.js"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
index fdf8f5c..cdca80d 100644
--- a/style.css
+++ b/style.css
@@ -355,9 +355,114 @@
       }
     }
 
-    .eonstrip-grid {
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      transform: translateX(0);
-      transition: transform 0.3s ease;
-      will-change: transform;
-    }
+.eonstrip-grid {
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  transform: translateX(0);
+  transition: transform 0.3s ease;
+  will-change: transform;
+}
+
+/* Layout combining current time and analog clock */
+.time-display {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.analog-clock-container {
+  flex: 0 0 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#clock {
+  position: relative;
+  width: 40vmin;
+  height: 40vmin;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  background: radial-gradient(circle at center, #0a0e27 0%, #1a1f3a 100%);
+  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(255, 0, 255, 0.2);
+}
+
+#clock::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1.2em;
+  height: 1.2em;
+  transform: translate(-50%, -50%);
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+}
+
+.marker {
+  position: absolute;
+  width: 2em;
+  height: 2em;
+  text-align: center;
+  line-height: 2em;
+  font-family: 'Courier New', monospace;
+  font-size: 1.1em;
+  color: #ffffff;
+  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+  transform: translate(-50%, -50%);
+}
+
+.hand {
+  position: absolute;
+  bottom: 50%;
+  left: 50%;
+  transform-origin: bottom;
+  transition: transform 0.5s ease-in-out;
+  border-radius: 2px;
+}
+
+.hand.xeno {
+  width: 4px;
+  height: 40%;
+  background: #00ffff;
+  box-shadow: 0 0 6px #00ffff;
+}
+
+.hand.quantic {
+  width: 3px;
+  height: 35%;
+  background: #ff00ff;
+  box-shadow: 0 0 6px #ff00ff;
+}
+
+.hand.chronon {
+  width: 2px;
+  height: 30%;
+  background: #ffff00;
+  box-shadow: 0 0 6px #ffff00;
+}
+
+body.fullscreen-clock .header,
+body.fullscreen-clock .current-time,
+body.fullscreen-clock .timezone-selector,
+body.fullscreen-clock .calendar-controls,
+body.fullscreen-clock .calendar-view,
+body.fullscreen-clock .time-details,
+body.fullscreen-clock .explanations {
+  display: none;
+}
+
+body.fullscreen-clock .time-display {
+  position: fixed;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+body.fullscreen-clock #clock {
+  width: 80vmin;
+  height: 80vmin;
+}