diff --git a/src/App.css b/src/App.css
index d647ae7..e1a06ee 100644
--- a/src/App.css
+++ b/src/App.css
@@ -29,19 +29,92 @@
   align-self: center;
 }
 
+.clock-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.digital-clock-outer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+}
+
+.digital-clock-side-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 4px;
+  margin-right: 4px;
+}
+
+.digital-clock-period {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  line-height: 1;
+}
+
+.format-toggle-side {
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #888;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.format-toggle-side:hover {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.format-toggle {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #888;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.format-toggle:hover {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
 .clock-container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
-  width: 100%;
   max-width: 100vw;
   overflow: hidden;
   box-sizing: border-box;
-  padding: 0 20px;
 }
 
-/* Digital clock style (default) */
+.digital-clock-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+}
+
 .digital-clock {
   font-family: 'DSEG7', monospace;
   font-weight: bold;
diff --git a/src/App.tsx b/src/App.tsx
index 32dd69e..eaf53cb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,17 +5,35 @@ import './App.css'
 
 type ClockStyle = 'digital' | 'flip' | 'roll'
 
-function DigitalClock({ time, size }: { time: string; size: number }) {
+function DigitalClock({ time, size, period, is24Hour, onToggleFormat }: { time: string; size: number; period?: string; is24Hour: boolean; onToggleFormat: () => void }) {
   // Match visual height with flip/roll clocks
-  // Use slightly smaller than size to prevent overflow, but keep height similar
   const fontSize = Math.floor(size * 0.95)
+  const periodSize = Math.floor(size * 0.25)
 
   return (
-    <div
-      className="digital-clock"
-      style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
-    >
-      {time}
+    <div className="digital-clock-outer">
+      <div className="digital-clock-side-panel">
+        {!is24Hour && period && (
+          <span
+            className="digital-clock-period"
+            style={{ fontSize: `${periodSize}px` }}
+          >
+            {period}
+          </span>
+        )}
+        <button
+          className="format-toggle-side"
+          onClick={onToggleFormat}
+        >
+          {is24Hour ? '24H' : '12H'}
+        </button>
+      </div>
+      <div
+        className="digital-clock"
+        style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
+      >
+        {time}
+      </div>
     </div>
   )
 }
@@ -24,6 +42,7 @@ function App() {
   const [time, setTime] = useState(new Date())
   const [clockStyle, setClockStyle] = useState<ClockStyle>('digital')
   const [clockSize, setClockSize] = useState(120)
+  const [is24Hour, setIs24Hour] = useState(true)
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -49,7 +68,25 @@ function App() {
     return () => window.removeEventListener('resize', updateSize)
   }, [])
 
-  const timeString = `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}:${String(time.getSeconds()).padStart(2, '0')}`
+  // Format time based on 12/24 hour setting
+  const formatTime = () => {
+    let hours = time.getHours()
+    const minutes = String(time.getMinutes()).padStart(2, '0')
+    const seconds = String(time.getSeconds()).padStart(2, '0')
+    let period: string | undefined
+
+    if (!is24Hour) {
+      period = hours >= 12 ? 'PM' : 'AM'
+      hours = hours % 12 || 12
+    }
+
+    return {
+      timeString: `${String(hours).padStart(2, '0')}:${minutes}:${seconds}`,
+      period
+    }
+  }
+
+  const { timeString, period } = formatTime()
 
   const renderClock = () => {
     switch (clockStyle) {
@@ -59,7 +96,15 @@ function App() {
         return <RollClock time={timeString} size={clockSize} />
       case 'digital':
       default:
-        return <DigitalClock time={timeString} size={clockSize} />
+        return (
+          <DigitalClock
+            time={timeString}
+            size={clockSize}
+            period={period}
+            is24Hour={is24Hour}
+            onToggleFormat={() => setIs24Hour(!is24Hour)}
+          />
+        )
     }
   }
 
@@ -86,8 +131,10 @@ function App() {
         </button>
       </div>
 
-      <div className="clock-container">
-        {renderClock()}
+      <div className="clock-wrapper">
+        <div className="clock-container">
+          {renderClock()}
+        </div>
       </div>
     </div>
   )