diff --git a/web/static/css/style.css b/web/static/css/style.css
index c9c381e..7b909c2 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -1,132 +1,52 @@
-/* Chronological - Main Stylesheet */
-
-/* CSS Reset and Base Styles */
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-:root {
-    --color-primary: #3b82f6;
-    --color-primary-dark: #2563eb;
-    --color-secondary: #64748b;
-    --color-success: #22c55e;
-    --color-danger: #ef4444;
-    --color-warning: #f59e0b;
-    
-    --color-bg: #f8fafc;
-    --color-surface: #ffffff;
-    --color-border: #e2e8f0;
-    --color-text: #1e293b;
-    --color-text-muted: #64748b;
-    
-    --spacing-xs: 0.25rem;
-    --spacing-sm: 0.5rem;
-    --spacing-md: 1rem;
-    --spacing-lg: 1.5rem;
-    --spacing-xl: 2rem;
-    
-    --radius-sm: 0.25rem;
-    --radius-md: 0.5rem;
-    --radius-lg: 1rem;
-    
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-    
-    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    --font-size-sm: 0.875rem;
-    --font-size-md: 1rem;
-    --font-size-lg: 1.25rem;
-    --font-size-xl: 1.5rem;
-}
-
-html, body {
-    margin: 0;
-    padding: 0;
-    font-family: var(--font-family);
-    font-size: var(--font-size-md);
-    line-height: 1.5;
-    color: var(--color-text);
-    background-color: var(--color-bg);
-    min-height: 100vh;
-}
-
-/* App Layout */
-.app-header {
-    background-color: var(--color-primary);
-    color: white;
-    padding: var(--spacing-md) var(--spacing-lg);
-    box-shadow: var(--shadow-md);
-}
-
-.app-header h1 {
-    margin: 0;
-    font-size: var(--font-size-xl);
-    font-weight: 600;
-}
+/* Chronological - App-Specific Styles */
+/* TuiCss provides the base styling, this file adds app-specific layout */
 
+/* Main App Layout */
 .app-main {
-    height: calc(100vh - 60px);
+    height: calc(100vh - 40px); /* Account for navbar and statusbar */
+    padding: 8px;
     overflow: hidden;
 }
 
 /* Timeline Container - Split Layout */
 .timeline-container {
     display: grid;
-    grid-template-columns: 350px 1fr;
+    grid-template-columns: 320px 1fr;
     height: 100%;
+    gap: 8px;
 }
 
 /* Calendar Panel */
 .calendar-panel {
-    background-color: var(--color-surface);
-    border-right: 1px solid var(--color-border);
-    padding: var(--spacing-lg);
     overflow-y: auto;
 }
 
+.calendar-panel .tui-window {
+    height: 100%;
+}
+
 .calendar {
-    max-width: 320px;
-    margin: 0 auto;
+    padding: 8px;
 }
 
 .calendar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: var(--spacing-md);
+    margin-bottom: 8px;
 }
 
-.calendar-header h2 {
-    margin: 0;
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-}
-
-.nav-btn {
-    background: none;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    padding: var(--spacing-xs) var(--spacing-sm);
-    cursor: pointer;
-    font-size: var(--font-size-lg);
-    color: var(--color-text);
-    transition: background-color 0.2s, border-color 0.2s;
-}
-
-.nav-btn:hover {
-    background-color: var(--color-bg);
-    border-color: var(--color-primary);
+.calendar-title {
+    font-weight: bold;
 }
 
 .calendar-weekdays {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
-    font-size: var(--font-size-sm);
-    font-weight: 600;
-    color: var(--color-text-muted);
-    margin-bottom: var(--spacing-sm);
+    font-size: 0.8em;
+    margin-bottom: 4px;
+    color: #aaa;
 }
 
 .calendar-grid {
@@ -141,151 +61,128 @@ html, body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: var(--color-bg);
-    border-radius: var(--radius-sm);
     cursor: pointer;
-    transition: background-color 0.2s;
     position: relative;
+    border: 1px solid transparent;
     padding: 2px;
 }
 
 .calendar-day:hover {
-    background-color: var(--color-border);
+    background-color: #00aaaa;
+    color: #000;
 }
 
 .calendar-day.empty {
-    background: none;
     cursor: default;
 }
 
+.calendar-day.empty:hover {
+    background-color: transparent;
+}
+
 .calendar-day.today {
-    background-color: var(--color-primary);
-    color: white;
+    background-color: #aa0000;
+    color: #fff;
 }
 
 .calendar-day.today:hover {
-    background-color: var(--color-primary-dark);
+    background-color: #ff0000;
 }
 
 .calendar-day.has-content {
-    font-weight: 600;
+    font-weight: bold;
+    color: #ffff00;
 }
 
 .day-number {
-    font-size: var(--font-size-sm);
+    font-size: 0.9em;
 }
 
 .day-indicators {
     display: flex;
     gap: 1px;
-    font-size: 0.6rem;
+    font-size: 0.6em;
     position: absolute;
-    bottom: 2px;
+    bottom: 1px;
 }
 
 .indicator {
-    line-height: 1;
+    color: #00ff00;
 }
 
 .calendar-actions {
-    margin-top: var(--spacing-lg);
+    margin-top: 16px;
     text-align: center;
 }
 
 /* Timeline Panel */
 .timeline-panel {
-    padding: var(--spacing-lg);
     overflow-y: auto;
 }
 
+.timeline-panel .tui-window {
+    height: 100%;
+}
+
 .timeline {
-    max-width: 800px;
-    margin: 0 auto;
+    padding: 8px;
 }
 
 .timeline-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: var(--spacing-lg);
-    padding-bottom: var(--spacing-md);
-    border-bottom: 2px solid var(--color-border);
+    margin-bottom: 16px;
 }
 
-.timeline-header h2 {
-    margin: 0;
-    font-size: var(--font-size-xl);
+.timeline-title {
+    font-weight: bold;
 }
 
 .timeline-content {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-lg);
+    gap: 8px;
 }
 
 .timeline-day {
-    background-color: var(--color-surface);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-sm);
-    overflow: hidden;
-}
-
-.timeline-day-header {
-    background-color: var(--color-bg);
-    padding: var(--spacing-md) var(--spacing-lg);
-    border-bottom: 1px solid var(--color-border);
-}
-
-.timeline-day-header time {
-    font-weight: 600;
-    color: var(--color-primary);
+    margin-bottom: 8px;
 }
 
 .timeline-entries {
-    padding: var(--spacing-md) var(--spacing-lg);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-md);
+    padding: 4px 0;
 }
 
 .timeline-entry {
-    display: flex;
-    gap: var(--spacing-md);
-    padding: var(--spacing-md);
-    background-color: var(--color-bg);
-    border-radius: var(--radius-md);
+    margin-bottom: 8px;
+    padding: 4px 0;
+    border-bottom: 1px dotted #555;
 }
 
-.entry-icon {
-    font-size: 1.5rem;
-    flex-shrink: 0;
+.timeline-entry:last-child {
+    border-bottom: none;
 }
 
-.entry-content {
-    flex-grow: 1;
-    min-width: 0;
+.entry-type {
+    margin-right: 8px;
 }
 
-.entry-content h4 {
-    margin: 0 0 var(--spacing-xs);
-    font-size: var(--font-size-md);
+.entry-title {
+    margin-right: 8px;
 }
 
 .entry-time {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    margin-right: var(--spacing-sm);
+    margin-right: 8px;
 }
 
 .entry-location {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
+    margin-right: 8px;
 }
 
 .entry-description {
-    margin: var(--spacing-sm) 0 0;
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
+    margin-top: 4px;
+    padding-left: 8px;
+    color: #aaa;
 }
 
 .diary-text {
@@ -294,16 +191,15 @@ html, body {
 
 .timeline-empty {
     text-align: center;
-    padding: var(--spacing-xl);
-    color: var(--color-text-muted);
+    padding: 32px;
 }
 
 /* Photo Grid */
 .photo-grid, .photo-gallery {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: var(--spacing-md);
-    margin-top: var(--spacing-sm);
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 8px;
+    margin-top: 8px;
 }
 
 .photo-item {
@@ -312,61 +208,57 @@ html, body {
 
 .photo-item img {
     width: 100%;
-    height: 150px;
+    height: 100px;
     object-fit: cover;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: transform 0.2s;
+    border: 1px solid #555;
 }
 
 .photo-item img:hover {
-    transform: scale(1.02);
+    border-color: #00ffff;
 }
 
 .photo-item figcaption {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    margin-top: var(--spacing-xs);
+    font-size: 0.8em;
+    color: #aaa;
     text-align: center;
+    margin-top: 2px;
 }
 
 /* Day Modal */
-.day-modal {
+.tui-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     border: none;
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
+    padding: 0;
     max-width: 600px;
     width: 90%;
-    padding: 0;
+    max-height: 80vh;
+    overflow: hidden;
 }
 
-.day-modal::backdrop {
-    background-color: rgba(0, 0, 0, 0.5);
+.tui-modal::backdrop {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.tui-modal .tui-window {
+    max-height: 80vh;
+    overflow-y: auto;
 }
 
 .day-detail {
-    padding: var(--spacing-lg);
+    padding: 8px;
 }
 
 .day-header {
-    margin-bottom: var(--spacing-lg);
-    padding-bottom: var(--spacing-md);
-    border-bottom: 2px solid var(--color-border);
+    margin-bottom: 16px;
+    font-weight: bold;
+    font-size: 1.1em;
 }
 
-.day-header h2 {
-    margin: 0;
-    font-size: var(--font-size-lg);
-}
-
-.day-section {
-    margin-bottom: var(--spacing-lg);
-}
-
-.day-section h3 {
-    margin: 0 0 var(--spacing-md);
-    font-size: var(--font-size-md);
-    color: var(--color-text-muted);
+.day-content .tui-input-fieldset {
+    margin-bottom: 16px;
 }
 
 .event-list {
@@ -376,100 +268,51 @@ html, body {
 }
 
 .event-item {
-    padding: var(--spacing-sm);
-    background-color: var(--color-bg);
-    border-radius: var(--radius-sm);
-    margin-bottom: var(--spacing-sm);
+    padding: 4px 0;
+    border-bottom: 1px dotted #555;
 }
 
-.event-item strong {
-    display: block;
-    margin-bottom: var(--spacing-xs);
+.event-item:last-child {
+    border-bottom: none;
 }
 
 .empty-message {
-    color: var(--color-text-muted);
+    color: #666;
     font-style: italic;
 }
 
 /* Form Elements */
-textarea {
-    width: 100%;
-    padding: var(--spacing-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    font-family: inherit;
-    font-size: var(--font-size-md);
-    resize: vertical;
-    min-height: 100px;
-}
-
-textarea:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
 .form-actions {
     display: flex;
-    gap: var(--spacing-sm);
-    margin-top: var(--spacing-md);
+    gap: 8px;
+    margin-top: 8px;
 }
 
-/* Buttons */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-sm) var(--spacing-md);
-    border: none;
-    border-radius: var(--radius-md);
+.modal-actions {
+    margin-top: 16px;
+    text-align: right;
+}
+
+.full-width {
+    width: 100%;
+}
+
+/* TuiCss Overrides */
+.tui-no-shadow {
+    box-shadow: none !important;
+}
+
+.tui-border-single .tui-fieldset,
+.tui-fieldset.tui-border-single {
+    border-style: solid;
+    border-width: 1px;
+}
+
+/* Make input textareas work with TuiCss */
+textarea.tui-input {
+    resize: vertical;
+    min-height: 100px;
     font-family: inherit;
-    font-size: var(--font-size-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s, transform 0.1s;
-}
-
-.btn:hover {
-    transform: translateY(-1px);
-}
-
-.btn:active {
-    transform: translateY(0);
-}
-
-.btn-primary {
-    background-color: var(--color-primary);
-    color: white;
-}
-
-.btn-primary:hover {
-    background-color: var(--color-primary-dark);
-}
-
-.btn-secondary {
-    background-color: var(--color-border);
-    color: var(--color-text);
-}
-
-.btn-secondary:hover {
-    background-color: var(--color-secondary);
-    color: white;
-}
-
-.btn-danger {
-    background-color: var(--color-danger);
-    color: white;
-}
-
-.btn-danger:hover {
-    background-color: #dc2626;
-}
-
-.btn-small {
-    padding: var(--spacing-xs) var(--spacing-sm);
-    font-size: var(--font-size-sm);
 }
 
 /* Responsive Design */
@@ -480,13 +323,11 @@ textarea:focus {
     }
     
     .calendar-panel {
-        border-right: none;
-        border-bottom: 1px solid var(--color-border);
         max-height: 50vh;
     }
     
-    .calendar {
-        max-width: none;
+    .calendar-panel .tui-window {
+        height: auto;
     }
 }
 
@@ -495,23 +336,3 @@ textarea:focus {
     opacity: 0.7;
     pointer-events: none;
 }
-
-.htmx-request::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 20px;
-    height: 20px;
-    margin: -10px 0 0 -10px;
-    border: 2px solid var(--color-border);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
diff --git a/web/templates/layouts/base.html b/web/templates/layouts/base.html
index 21d944f..1ae19c8 100644
--- a/web/templates/layouts/base.html
+++ b/web/templates/layouts/base.html
@@ -1,20 +1,42 @@
 {{define "base"}}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="tui-bg-cyan-black">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chronological</title>
+    <link rel="stylesheet" href="/static/vendor/tuicss/tuicss.css">
     <link rel="stylesheet" href="/static/css/style.css">
     <script src="/static/js/htmx.min.js"></script>
 </head>
-<body>
-    <header class="app-header">
-        <h1>Chronological</h1>
-    </header>
+<body class="tui-bg-cyan-black">
+    <!-- Navbar (Turbo Vision style) -->
+    <nav class="tui-nav">
+        <ul>
+            <li class="tui-dropdown">
+                <span class="red-168-text">C</span>hronological
+                <div class="tui-dropdown-content">
+                    <ul>
+                        <li><a href="/"><span class="red-168-text">H</span>ome</a></li>
+                    </ul>
+                </div>
+            </li>
+        </ul>
+    </nav>
+
+    <!-- Main Content Area -->
     <main class="app-main">
         {{template "content" .}}
     </main>
+
+    <!-- Status Bar (Turbo Vision style) -->
+    <div class="tui-statusbar absolute">
+        <ul>
+            <li><span class="cyan-255-text">Chronological</span> - Personal Timeline</li>
+        </ul>
+    </div>
+
+    <script src="/static/vendor/tuicss/tuicss.js"></script>
     <script src="/static/js/app.js"></script>
 </body>
 </html>
diff --git a/web/templates/pages/index.html b/web/templates/pages/index.html
index 74a3305..ddae4ca 100644
--- a/web/templates/pages/index.html
+++ b/web/templates/pages/index.html
@@ -5,10 +5,20 @@
 {{define "content"}}
 <div class="timeline-container">
     <aside class="calendar-panel" id="calendar-panel">
-        {{template "calendar.html" .Calendar}}
+        <div class="tui-window">
+            <fieldset class="tui-fieldset">
+                <legend class="center">Calendar</legend>
+                {{template "calendar.html" .Calendar}}
+            </fieldset>
+        </div>
     </aside>
     <section class="timeline-panel" id="timeline-panel">
-        {{template "timeline.html" .Timeline}}
+        <div class="tui-window tui-no-shadow">
+            <fieldset class="tui-fieldset">
+                <legend class="center">Timeline</legend>
+                {{template "timeline.html" .Timeline}}
+            </fieldset>
+        </div>
     </section>
 </div>
 {{end}}
diff --git a/web/templates/partials/calendar.html b/web/templates/partials/calendar.html
index 48bb689..8f70b0c 100644
--- a/web/templates/partials/calendar.html
+++ b/web/templates/partials/calendar.html
@@ -5,18 +5,18 @@
             hx-get="/calendar/{{.PrevYear}}/{{.PrevMonth}}"
             hx-target="#calendar-panel"
             hx-swap="innerHTML"
-            class="nav-btn"
+            class="tui-button"
             aria-label="Previous month">
-            &#8249;
+            &laquo;
         </button>
-        <h2>{{.MonthName}} {{.Year}}</h2>
+        <span class="calendar-title">{{.MonthName}} {{.Year}}</span>
         <button 
             hx-get="/calendar/{{.NextYear}}/{{.NextMonth}}"
             hx-target="#calendar-panel"
             hx-swap="innerHTML"
-            class="nav-btn"
+            class="tui-button"
             aria-label="Next month">
-            &#8250;
+            &raquo;
         </button>
     </div>
     
@@ -49,9 +49,9 @@
             <span class="day-number">{{$day}}</span>
             {{if $content.HasContent}}
             <div class="day-indicators">
-                {{if $content.HasEvents}}<span class="indicator event-indicator" title="Events">📅</span>{{end}}
-                {{if $content.HasDiary}}<span class="indicator diary-indicator" title="Diary">📝</span>{{end}}
-                {{if $content.HasPhotos}}<span class="indicator photo-indicator" title="Photos">📷</span>{{end}}
+                {{if $content.HasEvents}}<span class="indicator" title="Events">E</span>{{end}}
+                {{if $content.HasDiary}}<span class="indicator" title="Diary">D</span>{{end}}
+                {{if $content.HasPhotos}}<span class="indicator" title="Photos">P</span>{{end}}
             </div>
             {{end}}
         </div>
@@ -63,18 +63,26 @@
             hx-get="/timeline/{{.Year}}/{{.Month | printf "%d"}}"
             hx-target="#timeline-panel"
             hx-swap="innerHTML"
-            class="btn btn-primary">
+            class="tui-button cyan-168 white-text">
             View Timeline
         </button>
     </div>
 </div>
 
-<dialog id="day-modal" class="day-modal">
-    <div id="day-modal-content">
-        <!-- Day content loaded via HTMX -->
+<dialog id="day-modal" class="tui-modal">
+    <div class="tui-window tui-no-shadow">
+        <fieldset class="tui-fieldset">
+            <legend class="center">Day Details</legend>
+            <button class="tui-fieldset-button" onclick="document.getElementById('day-modal').close()">
+                <span class="red-168-text">X</span>
+            </button>
+            <div id="day-modal-content">
+                <!-- Day content loaded via HTMX -->
+            </div>
+            <div class="modal-actions">
+                <button class="tui-button" onclick="document.getElementById('day-modal').close()">Close</button>
+            </div>
+        </fieldset>
     </div>
-    <form method="dialog">
-        <button class="btn btn-secondary">Close</button>
-    </form>
 </dialog>
 {{end}}
diff --git a/web/templates/partials/day.html b/web/templates/partials/day.html
index 9a6aa4a..10440cb 100644
--- a/web/templates/partials/day.html
+++ b/web/templates/partials/day.html
@@ -1,8 +1,8 @@
 {{define "day.html"}}
 <div class="day-detail">
-    <header class="day-header">
-        <h2>{{.Date.Format "Monday, January 2, 2006"}}</h2>
-    </header>
+    <div class="day-header white-255-text">
+        {{.Date.Format "Monday, January 2, 2006"}}
+    </div>
     
     <div id="day-detail-content">
         {{template "day_content.html" .}}
@@ -13,20 +13,20 @@
 {{define "day_content.html"}}
 <div class="day-content">
     {{/* Events Section */}}
-    <section class="day-section events-section">
-        <h3>📅 Events</h3>
+    <fieldset class="tui-input-fieldset">
+        <legend class="cyan-255-text">Events</legend>
         {{if .Content.Events}}
         <ul class="event-list">
             {{range .Content.Events}}
             <li class="event-item">
-                <strong>{{.Title}}</strong>
+                <span class="white-255-text">{{.Title}}</span>
                 {{if not .AllDay}}
-                <span class="event-time">{{formatTime .Start}} - {{formatTime .End}}</span>
+                <span class="green-255-text">{{formatTime .Start}} - {{formatTime .End}}</span>
                 {{else}}
-                <span class="event-time">All day</span>
+                <span class="green-255-text">All day</span>
                 {{end}}
                 {{if .Location}}
-                <span class="event-location">📍 {{.Location}}</span>
+                <span class="yellow-255-text">@ {{.Location}}</span>
                 {{end}}
                 {{if .Description}}
                 <p class="event-description">{{.Description}}</p>
@@ -37,16 +37,16 @@
         {{else}}
         <p class="empty-message">No events scheduled.</p>
         {{end}}
-    </section>
+    </fieldset>
     
     {{/* Diary Section */}}
-    <section class="day-section diary-section">
-        <h3>📝 Journal</h3>
+    <fieldset class="tui-input-fieldset">
+        <legend class="purple-255-text">Journal</legend>
         {{if .Content.Diary}}
         <div class="diary-display">
-            <p class="diary-text">{{.Content.Diary.Text}}</p>
+            <p class="diary-text white-255-text">{{.Content.Diary.Text}}</p>
             <button 
-                class="btn btn-small"
+                class="tui-button"
                 data-action="toggle-diary-edit">
                 Edit
             </button>
@@ -56,18 +56,18 @@
                 hx-post="/diary/{{formatDate .Date}}"
                 hx-target="#day-detail-content"
                 hx-swap="innerHTML">
-                <textarea name="text" rows="5" placeholder="Write your thoughts...">{{.Content.Diary.Text}}</textarea>
+                <textarea name="text" class="tui-input full-width" rows="5" placeholder="Write your thoughts...">{{.Content.Diary.Text}}</textarea>
                 <div class="form-actions">
-                    <button type="submit" class="btn btn-primary">Save</button>
+                    <button type="submit" class="tui-button green-168 white-text">Save</button>
                     <button 
                         type="button" 
-                        class="btn btn-secondary"
+                        class="tui-button"
                         data-action="cancel-diary-edit">
                         Cancel
                     </button>
                     <button 
                         type="button"
-                        class="btn btn-danger"
+                        class="tui-button red-168 white-text"
                         hx-delete="/diary/{{formatDate .Date}}"
                         hx-target="#day-detail-content"
                         hx-swap="innerHTML"
@@ -82,17 +82,17 @@
             hx-post="/diary/{{formatDate .Date}}"
             hx-target="#day-detail-content"
             hx-swap="innerHTML">
-            <textarea name="text" rows="5" placeholder="Write your thoughts..."></textarea>
+            <textarea name="text" class="tui-input full-width" rows="5" placeholder="Write your thoughts..."></textarea>
             <div class="form-actions">
-                <button type="submit" class="btn btn-primary">Save</button>
+                <button type="submit" class="tui-button green-168 white-text">Save</button>
             </div>
         </form>
         {{end}}
-    </section>
+    </fieldset>
     
     {{/* Photos Section */}}
-    <section class="day-section photos-section">
-        <h3>📷 Photos</h3>
+    <fieldset class="tui-input-fieldset">
+        <legend class="orange-255-text">Photos</legend>
         {{if .Content.Photos}}
         <div class="photo-gallery">
             {{range .Content.Photos}}
@@ -100,13 +100,13 @@
                 <a href="{{.URLPath}}" target="_blank">
                     <img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
                 </a>
-                <figcaption>{{.Description}}</figcaption>
+                {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
             </figure>
             {{end}}
         </div>
         {{else}}
         <p class="empty-message">No photos for this day.</p>
         {{end}}
-    </section>
+    </fieldset>
 </div>
 {{end}}
diff --git a/web/templates/partials/diary_form.html b/web/templates/partials/diary_form.html
index 47ababa..cb4c0e7 100644
--- a/web/templates/partials/diary_form.html
+++ b/web/templates/partials/diary_form.html
@@ -1,26 +1,31 @@
 {{define "diary_form.html"}}
 <div class="diary-form">
-    <h3>Journal Entry - {{.Date.Format "January 2, 2006"}}</h3>
-    <form 
-        hx-post="/diary/{{formatDate .Date}}"
-        hx-target="this"
-        hx-swap="outerHTML">
-        <textarea 
-            name="text" 
-            rows="8" 
-            placeholder="Write your thoughts...">{{if .Entry}}{{.Entry.Text}}{{end}}</textarea>
-        <div class="form-actions">
-            <button type="submit" class="btn btn-primary">Save</button>
-            {{if .Entry}}
-            <button 
-                type="button"
-                class="btn btn-danger"
-                hx-delete="/diary/{{formatDate .Date}}"
-                hx-confirm="Delete this diary entry?">
-                Delete
-            </button>
-            {{end}}
-        </div>
-    </form>
+    <div class="tui-window tui-no-shadow">
+        <fieldset class="tui-fieldset">
+            <legend class="center">Journal Entry - {{.Date.Format "January 2, 2006"}}</legend>
+            <form 
+                hx-post="/diary/{{formatDate .Date}}"
+                hx-target="this"
+                hx-swap="outerHTML">
+                <textarea 
+                    name="text" 
+                    class="tui-input full-width"
+                    rows="8" 
+                    placeholder="Write your thoughts...">{{if .Entry}}{{.Entry.Text}}{{end}}</textarea>
+                <div class="form-actions">
+                    <button type="submit" class="tui-button green-168 white-text">Save</button>
+                    {{if .Entry}}
+                    <button 
+                        type="button"
+                        class="tui-button red-168 white-text"
+                        hx-delete="/diary/{{formatDate .Date}}"
+                        hx-confirm="Delete this diary entry?">
+                        Delete
+                    </button>
+                    {{end}}
+                </div>
+            </form>
+        </fieldset>
+    </div>
 </div>
 {{end}}
diff --git a/web/templates/partials/timeline.html b/web/templates/partials/timeline.html
index e93e2b5..313bad9 100644
--- a/web/templates/partials/timeline.html
+++ b/web/templates/partials/timeline.html
@@ -5,18 +5,18 @@
             hx-get="/timeline/{{.PrevYear}}/{{.PrevMonth}}"
             hx-target="#timeline-panel"
             hx-swap="innerHTML"
-            class="nav-btn"
+            class="tui-button"
             aria-label="Previous month">
-            &#8249;
+            &laquo;
         </button>
-        <h2>{{.MonthName}} {{.Year}}</h2>
+        <span class="timeline-title">{{.MonthName}} {{.Year}}</span>
         <button 
             hx-get="/timeline/{{.NextYear}}/{{.NextMonth}}"
             hx-target="#timeline-panel"
             hx-swap="innerHTML"
-            class="nav-btn"
+            class="tui-button"
             aria-label="Next month">
-            &#8250;
+            &raquo;
         </button>
     </div>
     
@@ -24,68 +24,64 @@
         {{if .Days}}
         {{range .Days}}
         <article class="timeline-day">
-            <header class="timeline-day-header">
-                <time datetime="{{formatDate .Date}}">
-                    {{.Date.Format "Monday, January 2"}}
-                </time>
-            </header>
-            
-            <div class="timeline-entries">
-                {{/* Events */}}
-                {{range .Events}}
-                <div class="timeline-entry event-entry">
-                    <div class="entry-icon">📅</div>
-                    <div class="entry-content">
-                        <h4>{{.Title}}</h4>
-                        {{if not .AllDay}}
-                        <span class="entry-time">{{formatTime .Start}} - {{formatTime .End}}</span>
-                        {{else}}
-                        <span class="entry-time">All day</span>
-                        {{end}}
-                        {{if .Location}}
-                        <span class="entry-location">📍 {{.Location}}</span>
-                        {{end}}
-                        {{if .Description}}
-                        <p class="entry-description">{{.Description}}</p>
-                        {{end}}
-                    </div>
-                </div>
-                {{end}}
-                
-                {{/* Diary entry */}}
-                {{if .Diary}}
-                <div class="timeline-entry diary-entry">
-                    <div class="entry-icon">📝</div>
-                    <div class="entry-content">
-                        <h4>Journal Entry</h4>
-                        <p class="entry-description diary-text">{{.Diary.Text}}</p>
-                    </div>
-                </div>
-                {{end}}
-                
-                {{/* Photos */}}
-                {{if .Photos}}
-                <div class="timeline-entry photo-entry">
-                    <div class="entry-icon">📷</div>
-                    <div class="entry-content">
-                        <h4>Photos</h4>
-                        <div class="photo-grid">
-                            {{range .Photos}}
-                            <figure class="photo-item">
-                                <img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
-                                <figcaption>{{.Description}}</figcaption>
-                            </figure>
+            <div class="tui-window tui-no-shadow">
+                <fieldset class="tui-fieldset tui-border-single">
+                    <legend>{{.Date.Format "Monday, January 2"}}</legend>
+                    
+                    <div class="timeline-entries">
+                        {{/* Events */}}
+                        {{range .Events}}
+                        <div class="timeline-entry">
+                            <span class="entry-type cyan-255-text">[EVENT]</span>
+                            <span class="entry-title white-255-text">{{.Title}}</span>
+                            {{if not .AllDay}}
+                            <span class="entry-time green-255-text">{{formatTime .Start}} - {{formatTime .End}}</span>
+                            {{else}}
+                            <span class="entry-time green-255-text">All day</span>
+                            {{end}}
+                            {{if .Location}}
+                            <span class="entry-location yellow-255-text">@ {{.Location}}</span>
+                            {{end}}
+                            {{if .Description}}
+                            <p class="entry-description">{{.Description}}</p>
                             {{end}}
                         </div>
+                        {{end}}
+                        
+                        {{/* Diary entry */}}
+                        {{if .Diary}}
+                        <div class="timeline-entry">
+                            <span class="entry-type purple-255-text">[DIARY]</span>
+                            <span class="entry-title white-255-text">Journal Entry</span>
+                            <p class="entry-description diary-text">{{.Diary.Text}}</p>
+                        </div>
+                        {{end}}
+                        
+                        {{/* Photos */}}
+                        {{if .Photos}}
+                        <div class="timeline-entry">
+                            <span class="entry-type orange-255-text">[PHOTOS]</span>
+                            <span class="entry-title white-255-text">{{len .Photos}} photo(s)</span>
+                            <div class="photo-grid">
+                                {{range .Photos}}
+                                <figure class="photo-item">
+                                    <a href="{{.URLPath}}" target="_blank">
+                                        <img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
+                                    </a>
+                                    {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
+                                </figure>
+                                {{end}}
+                            </div>
+                        </div>
+                        {{end}}
                     </div>
-                </div>
-                {{end}}
+                </fieldset>
             </div>
         </article>
         {{end}}
         {{else}}
         <div class="timeline-empty">
-            <p>No entries for this month.</p>
+            <p class="white-255-text">No entries for this month.</p>
         </div>
         {{end}}
     </div>