diff --git a/css/components.css b/css/components.css
index 085323b..63d644d 100644
--- a/css/components.css
+++ b/css/components.css
@@ -1,9 +1,9 @@
 .search-container {
   width: 100%;
-  max-width: 720px;
+  max-width: 700px;
   padding: 0 2rem;
-  margin-top: 2.5rem;
-  animation: fadeIn 0.9s cubic-bezier(.2,.8,.2,1) 0.15s backwards;
+  margin-top: 2rem;
+  animation: fadeIn 1s ease-out 0.2s backwards;
 }
 
 .search-box {
@@ -13,16 +13,17 @@
 
 .search-input {
   width: 100%;
-  padding: 1.3rem 1.6rem;
-  padding-right: 4rem;
+  padding: 1.25rem 1.5rem;
+  padding-right: 3.5rem;
   font-family: 'DM Sans', sans-serif;
   font-size: 1rem;
   border: 1px solid var(--border);
-  border-radius: 18px;
-  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
+  border-radius: 16px;
+  background: var(--bg-card);
+  backdrop-filter: blur(10px);
   color: var(--text-primary);
-  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
-  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow);
 }
 
 .search-input::placeholder {
@@ -31,29 +32,25 @@
 
 .search-input:focus {
   outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15), 0 18px 40px rgba(0,0,0,0.35);
-  transform: translateY(-1px);
+  border-color: var(--accent-soft);
+  box-shadow: var(--shadow-hover);
 }
 
 .search-btn {
   position: absolute;
-  right: 10px;
+  right: 8px;
   top: 50%;
   transform: translateY(-50%);
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  padding: 0.6rem;
-  border-radius: 12px;
+  background: none;
+  border: none;
+  padding: 0.75rem;
   cursor: pointer;
   color: var(--text-muted);
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
 }
 
 .search-btn:hover {
   color: var(--accent);
-  border-color: var(--accent-soft);
-  background: var(--bg-card);
 }
 
 .search-btn svg {
@@ -65,41 +62,39 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 0.6rem;
-  margin-top: 1.6rem;
-  animation: fadeIn 1s cubic-bezier(.2,.8,.2,1) 0.3s backwards;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  animation: fadeIn 1s ease-out 0.4s backwards;
 }
 
 .api-chip {
-  padding: 0.55rem 1.1rem;
+  padding: 0.5rem 1rem;
   font-size: 0.75rem;
-  border-radius: 999px;
   border: 1px solid var(--border);
+  border-radius: 20px;
   background: var(--bg-card);
   color: var(--text-secondary);
   cursor: pointer;
   transition: all 0.2s ease;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.02em;
 }
 
 .api-chip:hover {
   background: var(--accent-soft);
   border-color: var(--accent);
   color: var(--text-primary);
-  transform: translateY(-1px);
 }
 
 .api-chip.active {
   background: var(--accent);
   border-color: var(--accent);
   color: white;
-  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.35);
 }
 
 .results-section {
   width: 100%;
-  max-width: 960px;
-  padding: 2.5rem 2rem;
+  max-width: 900px;
+  padding: 2rem;
   margin-top: 2rem;
   display: none;
 }
@@ -108,14 +103,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1.75rem;
+  margin-bottom: 1.5rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--border);
 }
 
 .results-header h2 {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 1.35rem;
+  font-size: 1.25rem;
   font-weight: 400;
   color: var(--text-secondary);
 }
@@ -127,35 +122,40 @@
 
 .results-grid {
   display: grid;
-  gap: 1.25rem;
+  gap: 1rem;
 }
 
 .result-card {
-  position: relative;
-  padding: 1.6rem 1.6rem 1.7rem;
-  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
+  background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: 12px;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
   cursor: pointer;
-  animation: slideUp 0.5s cubic-bezier(.2,.8,.2,1) backwards;
-  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+  animation: slideUp 0.5s ease-out backwards;
+  position: relative;
 }
 
 .result-card:hover {
-  transform: translateY(-3px);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
   border-color: var(--accent-soft);
-  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .result-source {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.65rem;
+  font-size: 0.7rem;
   color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.12em;
-  margin-bottom: 0.8rem;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.75rem;
 }
 
 .source-dot {
@@ -164,24 +164,24 @@
   border-radius: 50%;
 }
 
-.source-wikipedia { background: #888; }
+.source-wikipedia { background: #636363; }
 .source-openlib { background: #d4a373; }
-.source-dictionary { background: #7ecb8a; }
+.source-dictionary { background: #81c784; }
 .source-nasa { background: #0b3d91; }
 
 .result-title {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 1.35rem;
+  font-size: 1.25rem;
   font-weight: 400;
   color: var(--text-primary);
-  margin-bottom: 0.6rem;
+  margin-bottom: 0.5rem;
   line-height: 1.4;
 }
 
 .result-excerpt {
   font-size: 0.9rem;
   color: var(--text-secondary);
-  line-height: 1.65;
+  line-height: 1.6;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -190,8 +190,8 @@
 
 .result-meta {
   display: flex;
-  gap: 1.2rem;
-  margin-top: 1.1rem;
+  gap: 1rem;
+  margin-top: 1rem;
   font-size: 0.75rem;
   color: var(--text-muted);
 }
@@ -200,23 +200,22 @@
   position: absolute;
   top: 1rem;
   right: 1rem;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
   background: var(--bg-secondary);
   border: 1px solid var(--border);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  font-size: 1rem;
   transition: all 0.2s ease;
 }
 
 .bookmark-btn:hover {
   background: var(--accent);
-  border-color: var(--accent);
-  color: white;
-  transform: scale(1.12);
+  transform: scale(1.1);
 }
 
 .loading {
@@ -231,27 +230,14 @@
 }
 
 .loader {
-  width: 42px;
-  height: 42px;
+  width: 40px;
+  height: 40px;
   border: 2px solid var(--border);
   border-top-color: var(--accent);
   border-radius: 50%;
-  animation: spin 0.9s linear infinite;
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(18px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+  to { transform: rotate(360deg); }
 }
diff --git a/css/features.css b/css/features.css
index 5067af6..7d1fb0f 100644
--- a/css/features.css
+++ b/css/features.css
@@ -1,171 +1,147 @@
 .notes-panel {
   position: fixed;
-  left: 24px;
+  left: 20px;
   top: 120px;
-  width: 300px;
-  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
-  padding: 1.6rem;
-  border-radius: 16px;
+  width: 280px;
+  background: var(--bg-card);
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: var(--shadow);
   border: 1px solid var(--border);
-  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
-  backdrop-filter: blur(14px);
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
-}
-
-.notes-panel:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
+  backdrop-filter: blur(10px);
 }
 
 .notes-panel h3 {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 1.15rem;
+  font-size: 1.1rem;
   margin-bottom: 1rem;
   color: var(--text-primary);
 }
 
 .notes-panel textarea {
   width: 100%;
-  height: 210px;
+  height: 200px;
   border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 0.85rem;
+  border-radius: 8px;
+  padding: 0.75rem;
   font-family: inherit;
   font-size: 0.9rem;
   resize: vertical;
   background: var(--bg-secondary);
   color: var(--text-primary);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.notes-panel textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
 }
 
 .notes-actions {
   display: flex;
-  gap: 0.6rem;
-  margin-top: 0.9rem;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
 }
 
 .notes-actions button {
   flex: 1;
-  padding: 0.55rem;
+  padding: 0.5rem;
   background: var(--accent);
   color: white;
   border: none;
-  border-radius: 10px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 0.85rem;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  transition: all 0.2s ease;
 }
 
 .notes-actions button:hover {
   background: var(--accent-soft);
   color: var(--text-primary);
-  transform: translateY(-1px);
-  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.3);
 }
 
 .timer-widget {
   position: fixed;
-  bottom: 24px;
-  right: 24px;
-  min-width: 220px;
-  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
-  padding: 1.6rem;
-  border-radius: 16px;
+  bottom: 20px;
+  right: 20px;
+  background: var(--bg-card);
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: var(--shadow);
   border: 1px solid var(--border);
-  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
-  backdrop-filter: blur(14px);
+  backdrop-filter: blur(10px);
+  min-width: 200px;
   text-align: center;
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
-}
-
-.timer-widget:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
 }
 
 .timer-widget h3 {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 1.05rem;
+  font-size: 1rem;
   margin-bottom: 1rem;
   color: var(--text-primary);
 }
 
 .timer-display {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 2.7rem;
+  font-size: 2.5rem;
   color: var(--accent);
   margin-bottom: 1rem;
 }
 
 .timer-controls {
   display: flex;
-  gap: 0.6rem;
+  gap: 0.5rem;
 }
 
 .timer-controls button {
   flex: 1;
-  padding: 0.55rem;
+  padding: 0.5rem;
   background: var(--accent);
   color: white;
   border: none;
-  border-radius: 10px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 0.75rem;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  transition: all 0.2s ease;
 }
 
 .timer-controls button:hover {
   background: var(--accent-soft);
   color: var(--text-primary);
-  transform: translateY(-1px);
-  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.3);
 }
 
 .timer-controls button:disabled {
-  opacity: 0.45;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 .history-panel {
   position: fixed;
-  left: 24px;
-  bottom: 24px;
-  width: 300px;
-  max-height: 420px;
-  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
-  padding: 1.6rem;
-  border-radius: 16px;
+  left: 20px;
+  bottom: 20px;
+  width: 280px;
+  max-height: 400px;
+  background: var(--bg-card);
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: var(--shadow);
   border: 1px solid var(--border);
-  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
-  backdrop-filter: blur(14px);
+  backdrop-filter: blur(10px);
   overflow-y: auto;
 }
 
 .history-panel h3 {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 1.15rem;
+  font-size: 1.1rem;
   margin-bottom: 1rem;
   color: var(--text-primary);
 }
 
 .history-item {
-  padding: 0.85rem;
+  padding: 0.75rem;
   background: var(--bg-secondary);
-  border-radius: 12px;
-  margin-bottom: 0.6rem;
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
   cursor: pointer;
-  transition: transform 0.2s ease, background 0.2s ease;
+  transition: all 0.2s ease;
 }
 
 .history-item:hover {
   background: var(--accent-soft);
-  transform: translateY(-1px);
 }
 
 .history-query {
@@ -187,15 +163,15 @@
 
 .clear-history-btn {
   width: 100%;
-  padding: 0.55rem;
+  padding: 0.5rem;
   background: var(--text-muted);
   color: white;
   border: none;
-  border-radius: 10px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 0.75rem;
-  margin-top: 0.85rem;
-  transition: background 0.2s ease;
+  margin-top: 0.75rem;
+  transition: all 0.2s ease;
 }
 
 .clear-history-btn:hover {
@@ -204,39 +180,38 @@
 
 .bookmarks-panel {
   position: fixed;
-  right: 24px;
+  right: 20px;
   top: 120px;
-  width: 320px;
-  max-height: 520px;
-  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
-  padding: 1.6rem;
-  border-radius: 16px;
+  width: 300px;
+  max-height: 500px;
+  background: var(--bg-card);
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: var(--shadow);
   border: 1px solid var(--border);
-  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
-  backdrop-filter: blur(14px);
+  backdrop-filter: blur(10px);
   overflow-y: auto;
 }
 
 .bookmarks-panel h3 {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 1.15rem;
+  font-size: 1.1rem;
   margin-bottom: 1rem;
   color: var(--text-primary);
 }
 
 .bookmark-item {
   display: flex;
-  gap: 0.6rem;
-  padding: 0.85rem;
+  gap: 0.5rem;
+  padding: 0.75rem;
   background: var(--bg-secondary);
-  border-radius: 12px;
-  margin-bottom: 0.6rem;
-  transition: transform 0.2s ease, background 0.2s ease;
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
+  transition: all 0.2s ease;
 }
 
 .bookmark-item:hover {
   background: var(--accent-soft);
-  transform: translateY(-1px);
 }
 
 .bookmark-content {
@@ -264,19 +239,19 @@
 .bookmark-excerpt {
   font-size: 0.75rem;
   color: var(--text-secondary);
-  line-height: 1.45;
+  line-height: 1.4;
 }
 
 .bookmark-remove {
   background: none;
   border: none;
   color: var(--text-muted);
-  font-size: 1.4rem;
+  font-size: 1.5rem;
   cursor: pointer;
-  transition: color 0.2s ease, transform 0.2s ease;
+  transition: color 0.2s ease;
   padding: 0;
-  width: 26px;
-  height: 26px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -284,7 +259,6 @@
 
 .bookmark-remove:hover {
   color: var(--accent);
-  transform: scale(1.15);
 }
 
 .bookmarks-empty {
@@ -295,15 +269,15 @@
 
 .clear-bookmarks-btn {
   width: 100%;
-  padding: 0.55rem;
+  padding: 0.5rem;
   background: var(--text-muted);
   color: white;
   border: none;
-  border-radius: 10px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 0.75rem;
-  margin-top: 0.85rem;
-  transition: background 0.2s ease;
+  margin-top: 0.75rem;
+  transition: all 0.2s ease;
 }
 
 .clear-bookmarks-btn:hover {
@@ -313,19 +287,35 @@
 .notification {
   position: fixed;
   top: 100px;
-  right: -320px;
+  right: -300px;
   background: var(--accent);
   color: white;
-  padding: 1rem 1.6rem;
-  border-radius: 12px;
-  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  box-shadow: var(--shadow-hover);
   z-index: 1000;
-  transition: right 0.35s cubic-bezier(.2,.8,.2,1);
+  transition: right 0.3s ease;
   font-size: 0.9rem;
 }
 
 .notification.show {
-  right: 24px;
+  right: 20px;
+}
+
+body.dark-mode {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2a2a2a;
+  --bg-card: rgba(40, 40, 40, 0.9);
+  --text-primary: #ffffff;
+  --text-secondary: #cccccc;
+  --text-muted: #888888;
+  --border: rgba(255, 255, 255, 0.1);
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .orb {
+  opacity: 0.2;
 }
 
 @media (max-width: 1200px) {
diff --git a/css/main.css b/css/main.css
index 85fc044..882605a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,127 +1,399 @@
 :root {
   --bg-primary: #f7f5f2;
   --bg-secondary: #fffef9;
-  --bg-card: rgba(255, 255, 255, 0.75);
-  --text-primary: #1f1f1f;
-  --text-secondary: #5f5f5f;
-  --text-muted: #8a8a8a;
-  --accent: #c2a36b;
-  --accent-soft: #efe5d6;
-  --border: rgba(0, 0, 0, 0.05);
-  --shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
-  --shadow-hover: 0 16px 60px rgba(0, 0, 0, 0.1);
+  --bg-card: rgba(255, 255, 255, 0.7);
+  --text-primary: #2c2c2c;
+  --text-secondary: #6b6b6b;
+  --text-muted: #9a9a9a;
+  --accent: #c4a87c;
+  --accent-soft: #e8dcc8;
+  --border: rgba(0, 0, 0, 0.06);
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
+  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.08);
   --spotify-green: #1db954;
 }
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: 'DM Sans', sans-serif;
   background: var(--bg-primary);
   color: var(--text-primary);
   min-height: 100vh;
   overflow-x: hidden;
+  position: relative;
 }
 
 body::before {
-  opacity: 0.025;
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  z-index: 9999;
 }
 
 .orb {
-  filter: blur(90px);
-  opacity: 0.35;
-  will-change: transform;
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.4;
+  pointer-events: none;
+  animation: float 20s ease-in-out infinite;
+}
+
+.orb-1 {
+  width: 400px;
+  height: 400px;
+  background: linear-gradient(135deg, #e8dcc8 0%, #f0e6d8 100%);
+  top: -100px;
+  right: -100px;
+  animation-delay: 0s;
+}
+
+.orb-2 {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(135deg, #d4e5f7 0%, #e8f0f8 100%);
+  bottom: -50px;
+  left: -50px;
+  animation-delay: -7s;
+}
+
+.orb-3 {
+  width: 250px;
+  height: 250px;
+  background: linear-gradient(135deg, #e8d4d4 0%, #f5e8e8 100%);
+  top: 50%;
+  left: 30%;
+  animation-delay: -14s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(20px, -20px) scale(1.05); }
+  50% { transform: translate(-10px, 10px) scale(0.95); }
+  75% { transform: translate(-20px, -10px) scale(1.02); }
 }
 
 nav {
-  background: rgba(247, 245, 242, 0.85);
-  backdrop-filter: blur(24px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: 1.5rem 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(247, 245, 242, 0.8);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
+.logo-icon {
+  width: 32px;
+  height: 32px;
+  position: relative;
+}
+
+.crescent-moon {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2;
+  animation: glow 4s ease-in-out infinite;
+}
+
+@keyframes glow {
+  0%, 100% { opacity: 0.8; }
+  50% { opacity: 1; }
+}
+
+.logo-text {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0.1em;
+}
+
+.nav-center {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.clock {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  letter-spacing: 0.05em;
+  min-width: 100px;
+  text-align: center;
+}
+
+.nav-links {
+  display: flex;
+  gap: 2rem;
+  list-style: none;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  transition: color 0.3s ease;
+  position: relative;
+}
+
+.nav-links a::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: var(--accent);
+  transition: width 0.3s ease;
+}
+
+.nav-links a:hover {
+  color: var(--text-primary);
+}
+
+.nav-links a:hover::after {
+  width: 100%;
+}
+
+main {
+  padding-top: 120px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hero {
+  text-align: center;
+  padding: 4rem 2rem;
+  animation: fadeIn 1s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .hero h1 {
-  font-size: clamp(2.4rem, 6vw, 3.6rem);
-  letter-spacing: 0.18em;
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 3.5rem;
+  font-weight: 300;
+  letter-spacing: 0.15em;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
 }
 
 .hero p {
-  max-width: 520px;
-  margin: 0 auto;
+  font-size: 1rem;
+  color: var(--text-secondary);
+  font-weight: 300;
+  letter-spacing: 0.05em;
 }
 
-.notes-panel,
-.history-panel,
-.bookmarks-panel,
-.timer-widget {
-  background: var(--bg-card);
-  backdrop-filter: blur(18px) saturate(1.1);
-  box-shadow: var(--shadow);
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
+.empty-state {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: var(--text-muted);
 }
 
-.notes-panel:hover,
-.history-panel:hover,
-.bookmarks-panel:hover,
-.timer-widget:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-hover);
+.empty-state svg {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 1.5rem;
+  opacity: 0.3;
 }
 
-button {
-  will-change: transform;
+.empty-state p {
+  font-size: 0.9rem;
 }
 
-button:hover {
-  transform: translateY(-1px);
+footer {
+  text-align: center;
+  padding: 3rem 2rem;
+  margin-top: auto;
+  color: var(--text-muted);
+  font-size: 0.75rem;
 }
 
-.notification {
-  font-weight: 500;
-  border-radius: 10px;
+footer p + p {
+  margin-top: 0.5rem;
+}
+
+footer a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+footer a:hover {
+  color: var(--accent);
+}
+
+.spotify-tab {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 90;
 }
 
 .spotify-toggle {
-  backdrop-filter: blur(18px);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-right: none;
+  border-radius: 12px 0 0 12px;
+  padding: 1rem 0.75rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow);
+}
+
+.spotify-toggle:hover {
+  background: var(--bg-secondary);
+  padding-left: 1rem;
+}
+
+.spotify-icon {
+  width: 24px;
+  height: 24px;
+  fill: var(--spotify-green);
+}
+
+.spotify-toggle span {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  letter-spacing: 0.1em;
 }
 
 .spotify-panel {
-  backdrop-filter: blur(24px);
+  position: fixed;
+  right: -320px;
+  top: 0;
+  width: 320px;
+  height: 100vh;
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border-left: 1px solid var(--border);
+  padding: 6rem 1.5rem 2rem;
+  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 85;
+  overflow-y: auto;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none !important;
-    transition: none !important;
-  }
+.spotify-panel.open {
+  right: 0;
 }
 
-@media (max-width: 1200px) {
-  .notes-panel,
-  .history-panel,
-  .bookmarks-panel {
-    display: none;
-  }
+.spotify-panel h3 {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 1.25rem;
+  font-weight: 400;
+  margin-bottom: 1.5rem;
+  color: var(--text-primary);
+}
+
+.spotify-placeholder {
+  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+  border-radius: 12px;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.spotify-placeholder p {
+  color: #b3b3b3;
+  font-size: 0.85rem;
+  margin-bottom: 1rem;
+}
+
+.spotify-connect {
+  background: var(--spotify-green);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.spotify-connect:hover {
+  transform: scale(1.05);
+  opacity: 0.9;
+}
+
+.close-spotify {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.close-spotify:hover {
+  color: var(--text-primary);
 }
 
 @media (max-width: 768px) {
-  .hero h1 {
-    letter-spacing: 0.12em;
+  nav {
+    padding: 1rem 1.5rem;
   }
 
-  .spotify-tab {
+  .nav-links {
     display: none;
   }
-}
 
-body.dark-mode {
-  --bg-primary: #0e0f12;
-  --bg-secondary: #15171c;
-  --bg-card: rgba(25, 27, 34, 0.85);
-  --text-primary: #f2f2f2;
-  --text-secondary: #c7c7c7;
-  --text-muted: #8a8a8a;
-  --border: rgba(255, 255, 255, 0.08);
-  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
-  --shadow-hover: 0 16px 70px rgba(0, 0, 0, 0.6);
-}
+  .hero h1 {
+    font-size: 2.5rem;
+  }
 
-body.dark-mode .orb {
-  opacity: 0.18;
+  .search-container,
+  .api-categories {
+    padding: 0 1rem;
+  }
+
+  .results-section {
+    padding: 1rem;
+  }
 }
diff --git a/index.html b/index.html
index 2ca965a..a43b26b 100644
--- a/index.html
+++ b/index.html
@@ -3,100 +3,92 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Crescent — Calm Search for Students</title>
-  <meta name="description" content="Crescent — Calm search engine for students with Wikipedia, books, dictionary, NASA images, notes, timer, and bookmarks.">
-  <meta name="theme-color" content="#c4a87c">
-  
+  <title>Crescent - Calm Search for Students</title>
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
-  
+
   <link rel="stylesheet" href="css/main.css">
-  <link rel="preload" href="css/components.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" href="css/components.css"></noscript>
-  <link rel="preload" href="css/features.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" href="css/features.css"></noscript>
-  
+  <link rel="stylesheet" href="css/components.css">
+  <link rel="stylesheet" href="css/features.css">
+
   <link rel="icon" href="assets/favicon.ico">
 </head>
 <body>
-  <div class="orb orb-1" aria-hidden="true"></div>
-  <div class="orb orb-2" aria-hidden="true"></div>
-  <div class="orb orb-3" aria-hidden="true"></div>
+  <div class="orb orb-1"></div>
+  <div class="orb orb-2"></div>
+  <div class="orb orb-3"></div>
 
   <nav>
     <a href="#" class="logo">
       <div class="logo-icon">
-        <svg viewBox="0 0 32 32" aria-hidden="true">
+        <svg viewBox="0 0 32 32">
           <path class="crescent-moon" d="M20 4a12 12 0 1 0 0 24 12 12 0 0 1 0-24z"/>
         </svg>
       </div>
       <span class="logo-text">CRESCENT</span>
     </a>
-
     <div class="nav-center">
-      <div class="clock" id="clock" aria-label="Current time">--:--</div>
+      <div class="clock" id="clock">--:--</div>
     </div>
-
     <ul class="nav-links">
       <li><a href="#search">Search</a></li>
-      <li><a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+      <li><a href="https://github.com" target="_blank">GitHub</a></li>
       <li><a href="#about">About</a></li>
     </ul>
-
-    <button class="dark-mode-toggle" id="darkModeToggle" aria-label="Toggle dark mode">🌙</button>
+    <button class="dark-mode-toggle" id="darkModeToggle">🌙</button>
   </nav>
 
   <div class="spotify-tab">
-    <button class="spotify-toggle" id="spotifyToggle" aria-label="Open Spotify panel">
-      <svg class="spotify-icon" viewBox="0 0 24 24" aria-hidden="true">
+    <button class="spotify-toggle" id="spotifyToggle">
+      <svg class="spotify-icon" viewBox="0 0 24 24">
         <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
       </svg>
       <span>MUSIC</span>
     </button>
   </div>
 
-  <div class="notes-panel" id="notesPanel" aria-label="Notes panel">
+  <div class="notes-panel" id="notesPanel">
     <h3>Notes</h3>
-    <label for="notesTextarea" class="visually-hidden">Notes input</label>
     <textarea id="notesTextarea" placeholder="Take notes while you study..."></textarea>
     <div class="notes-actions">
-      <button onclick="saveNotes()" aria-label="Save notes">Save</button>
-      <button onclick="clearNotes()" aria-label="Clear notes">Clear</button>
+      <button onclick="saveNotes()">Save</button>
+      <button onclick="clearNotes()">Clear</button>
     </div>
   </div>
 
-  <div class="timer-widget" id="timerWidget" aria-label="Study timer widget">
+  <div class="timer-widget" id="timerWidget">
     <h3>Study Timer</h3>
-    <div class="timer-display" id="timerDisplay" aria-live="polite">25:00</div>
+    <div class="timer-display" id="timerDisplay">25:00</div>
     <div class="timer-controls">
-      <button id="startTimer" aria-label="Start timer">Start</button>
-      <button id="stopTimer" aria-label="Stop timer">Stop</button>
-      <button id="resetTimer" aria-label="Reset timer">Reset</button>
+      <button id="startTimer">Start</button>
+      <button id="stopTimer">Stop</button>
+      <button id="resetTimer">Reset</button>
     </div>
   </div>
 
-  <div class="history-panel" id="historyPanel" aria-label="Search history panel">
+  <div class="history-panel" id="historyPanel">
     <h3>Search History</h3>
     <div id="historyList"></div>
-    <button class="clear-history-btn" onclick="clearHistory()" aria-label="Clear search history">Clear History</button>
+    <button class="clear-history-btn" onclick="clearHistory()">Clear History</button>
   </div>
 
-  <div class="bookmarks-panel" id="bookmarksPanel" aria-label="Bookmarks panel">
+  <div class="bookmarks-panel" id="bookmarksPanel">
     <h3>Bookmarks</h3>
     <div id="bookmarksList"></div>
-    <button class="clear-bookmarks-btn" onclick="clearBookmarks()" aria-label="Clear bookmarks">Clear Bookmarks</button>
+    <button class="clear-bookmarks-btn" onclick="clearBookmarks()">Clear Bookmarks</button>
   </div>
 
-  <div class="spotify-panel" id="spotifyPanel" aria-label="Spotify panel">
-    <button class="close-spotify" id="closeSpotify" aria-label="Close Spotify panel">×</button>
+  <div class="spotify-panel" id="spotifyPanel">
+    <button class="close-spotify" id="closeSpotify">×</button>
     <h3>Now Playing</h3>
     <div class="spotify-placeholder">
-      <svg width="48" height="48" viewBox="0 0 24 24" fill="#1db954" aria-hidden="true">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="#1db954">
         <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
       </svg>
       <p>Connect your Spotify account to see what's playing</p>
-      <button class="spotify-connect" aria-label="Connect Spotify account">Connect Spotify</button>
+      <button class="spotify-connect">Connect Spotify</button>
     </div>
   </div>
 
@@ -108,17 +100,9 @@ <h1>Crescent</h1>
 
     <div class="search-container">
       <div class="search-box">
-        <label for="searchInput" class="visually-hidden">Search input</label>
-        <input 
-          type="text" 
-          class="search-input" 
-          id="searchInput"
-          placeholder="What would you like to explore?"
-          autocomplete="off"
-          aria-label="Search"
-        >
-        <button class="search-btn" id="searchBtn" aria-label="Perform search">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <input type="text" class="search-input" id="searchInput" placeholder="What would you like to explore?" autocomplete="off">
+        <button class="search-btn" id="searchBtn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="11" cy="11" r="8"/>
             <path d="m21 21-4.35-4.35"/>
           </svg>
@@ -148,7 +132,7 @@ <h2>Results</h2>
     </section>
 
     <div class="empty-state" id="emptyState">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
         <circle cx="12" cy="12" r="10"/>
         <path d="M12 6v6l4 2"/>
       </svg>
@@ -158,11 +142,11 @@ <h2>Results</h2>
     <footer>
       <p>Crescent — Built with calm intention</p>
       <p>
-        <a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="https://github.com" target="_blank" rel="noopener noreferrer">View on GitHub</a>
+        <a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="https://github.com" target="_blank">View on GitHub</a>
       </p>
     </footer>
   </main>
 
-  <script type="module" src="js/app.js" defer></script>
+  <script type="module" src="js/app.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
index ab5fafb..f2f7f6a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -8,35 +8,55 @@ document.addEventListener('DOMContentLoaded', () => {
   setInterval(updateClock, 1000);
 
   initSearch();
+
   setupEventListeners();
 
   fadeInPage();
+
   loadFeatures();
 });
 
 function setupEventListeners() {
   const searchBtn = document.getElementById('searchBtn');
+  if (searchBtn) {
+    searchBtn.addEventListener('click', performSearch);
+  }
+
   const spotifyToggle = document.getElementById('spotifyToggle');
   const closeSpotify = document.getElementById('closeSpotify');
 
-  searchBtn?.addEventListener('click', performSearch);
-  spotifyToggle?.addEventListener('click', toggleSpotify);
-  closeSpotify?.addEventListener('click', toggleSpotify);
+  if (spotifyToggle) {
+    spotifyToggle.addEventListener('click', toggleSpotify);
+  }
+
+  if (closeSpotify) {
+    closeSpotify.addEventListener('click', toggleSpotify);
+  }
 }
 
 async function loadFeatures() {
-  const features = [
-    { path: './features/notes.js', init: 'initNotes' },
-    { path: './features/history.js', init: 'initHistory' },
-    { path: './features/darkmode.js', init: 'initDarkMode' },
-    { path: './features/timer.js', init: 'initTimer' },
-    { path: './features/bookmarks.js', init: 'initBookmarks' },
-  ];
-
-  for (const f of features) {
-    try {
-      const module = await import(f.path);
-      module[f.init]?.();
-    } catch {}
-  }
+  try {
+    const { initNotes } = await import('./features/notes.js');
+    initNotes();
+  } catch (e) {}
+
+  try {
+    const { initHistory } = await import('./features/history.js');
+    initHistory();
+  } catch (e) {}
+
+  try {
+    const { initDarkMode } = await import('./features/darkmode.js');
+    initDarkMode();
+  } catch (e) {}
+
+  try {
+    const { initTimer } = await import('./features/timer.js');
+    initTimer();
+  } catch (e) {}
+
+  try {
+    const { initBookmarks } = await import('./features/bookmarks.js');
+    initBookmarks();
+  } catch (e) {}
 }
diff --git a/js/search.js b/js/search.js
index 445f316..d6ba72d 100644
--- a/js/search.js
+++ b/js/search.js
@@ -4,9 +4,12 @@ export const apiConfigs = {
     class: 'source-wikipedia',
     search: async (query) => {
       try {
-        const res = await fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(query)}`);
-        if (!res.ok) return [];
-        const data = await res.json();
+        const response = await fetch(
+          `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(query)}`
+        );
+        if (!response.ok) return [];
+
+        const data = await response.json();
         return [{
           title: data.title,
           excerpt: data.extract,
@@ -15,16 +18,23 @@ export const apiConfigs = {
           url: data.content_urls?.desktop?.page,
           meta: { type: 'Article' }
         }];
-      } catch { return []; }
+      } catch (error) {
+        console.error('Wikipedia API error:', error);
+        return [];
+      }
     }
   },
+
   openlib: {
     name: 'Open Library',
     class: 'source-openlib',
     search: async (query) => {
       try {
-        const res = await fetch(`https://openlibrary.org/search.json?q=${encodeURIComponent(query)}&limit=5`);
-        const data = await res.json();
+        const response = await fetch(
+          `https://openlibrary.org/search.json?q=${encodeURIComponent(query)}&limit=5`
+        );
+        const data = await response.json();
+
         return (data.docs || []).map(book => ({
           title: book.title,
           excerpt: `By ${book.author_name?.join(', ') || 'Unknown'} · First published ${book.first_publish_year || 'N/A'}`,
@@ -33,17 +43,24 @@ export const apiConfigs = {
           url: `https://openlibrary.org${book.key}`,
           meta: { type: 'Book' }
         }));
-      } catch { return []; }
+      } catch (error) {
+        console.error('Open Library API error:', error);
+        return [];
+      }
     }
   },
+
   dictionary: {
     name: 'Dictionary',
     class: 'source-dictionary',
     search: async (query) => {
       try {
-        const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${encodeURIComponent(query)}`);
-        if (!res.ok) return [];
-        const data = await res.json();
+        const response = await fetch(
+          `https://api.dictionaryapi.dev/api/v2/entries/en/${encodeURIComponent(query)}`
+        );
+        if (!response.ok) return [];
+
+        const data = await response.json();
         return data.map(entry => ({
           title: entry.word,
           excerpt: entry.meanings?.map(m => `(${m.partOfSpeech}) ${m.definitions?.[0]?.definition}`).join(' · ') || '',
@@ -52,17 +69,24 @@ export const apiConfigs = {
           url: entry.sourceUrls?.[0],
           meta: { type: 'Definition', phonetic: entry.phonetic }
         }));
-      } catch { return []; }
+      } catch (error) {
+        console.error('Dictionary API error:', error);
+        return [];
+      }
     }
   },
+
   nasa: {
     name: 'NASA',
     class: 'source-nasa',
     search: async (query) => {
       try {
-        const res = await fetch(`https://images-api.nasa.gov/search?q=${encodeURIComponent(query)}&media_type=image`);
-        if (!res.ok) return [];
-        const data = await res.json();
+        const response = await fetch(
+          `https://images-api.nasa.gov/search?q=${encodeURIComponent(query)}&media_type=image`
+        );
+        if (!response.ok) return [];
+
+        const data = await response.json();
         return (data.collection?.items || []).slice(0, 5).map(item => ({
           title: item.data?.[0]?.title || 'Untitled',
           excerpt: item.data?.[0]?.description?.substring(0, 200) || '',
@@ -71,7 +95,10 @@ export const apiConfigs = {
           url: item.links?.[0]?.href,
           meta: { type: 'Image', date: item.data?.[0]?.date_created?.split('T')[0] }
         }));
-      } catch { return []; }
+      } catch (error) {
+        console.error('NASA API error:', error);
+        return [];
+      }
     }
   }
 };
@@ -87,14 +114,13 @@ export function initSearch() {
     });
   });
 
-  const input = document.getElementById('searchInput');
-  input?.addEventListener('keypress', e => {
+  document.getElementById('searchInput').addEventListener('keypress', (e) => {
     if (e.key === 'Enter') performSearch();
   });
 }
 
 export async function performSearch() {
-  const query = document.getElementById('searchInput')?.value.trim();
+  const query = document.getElementById('searchInput').value.trim();
   if (!query) return;
 
   const resultsSection = document.getElementById('resultsSection');
@@ -110,9 +136,11 @@ export async function performSearch() {
 
   try {
     let results = [];
+
     if (selectedAPI === 'all') {
-      const all = await Promise.all(Object.values(apiConfigs).map(api => api.search(query).catch(() => [])));
-      results = all.flat();
+      const promises = Object.values(apiConfigs).map(api => api.search(query).catch(() => []));
+      const allResults = await Promise.all(promises);
+      results = allResults.flat();
     } else if (apiConfigs[selectedAPI]) {
       results = await apiConfigs[selectedAPI].search(query);
     }
@@ -120,33 +148,45 @@ export async function performSearch() {
     loading.classList.remove('active');
     resultsCount.textContent = `${results.length} result${results.length !== 1 ? 's' : ''}`;
 
-    if (!results.length) {
-      resultsGrid.innerHTML = `<div style="text-align:center;padding:2rem;color:var(--text-muted);"><p>No results found.</p></div>`;
+    if (results.length === 0) {
+      resultsGrid.innerHTML = `<div style="text-align: center; padding: 2rem; color: var(--text-muted);">
+        <p>No results found. Try a different search term or source.</p>
+      </div>`;
       return;
     }
 
-    results.forEach((res, i) => {
+    results.forEach((result, index) => {
       const card = document.createElement('div');
       card.className = 'result-card';
-      card.style.animationDelay = `${i * 0.08}s`;
+      card.style.animationDelay = `${index * 0.1}s`;
       card.innerHTML = `
-        <div class="result-source"><span class="source-dot ${res.sourceClass}"></span>${res.source}</div>
-        <h3 class="result-title">${res.title}</h3>
-        <p class="result-excerpt">${res.excerpt}</p>
+        <div class="result-source">
+          <span class="source-dot ${result.sourceClass}"></span>
+          ${result.source}
+        </div>
+        <h3 class="result-title">${result.title}</h3>
+        <p class="result-excerpt">${result.excerpt}</p>
         <div class="result-meta">
-          <span>${res.meta?.type || 'Result'}</span>
-          ${res.meta?.phonetic ? `<span>${res.meta.phonetic}</span>` : ''}
-          ${res.meta?.date ? `<span>${res.meta.date}</span>` : ''}
+          <span>${result.meta?.type || 'Result'}</span>
+          ${result.meta?.phonetic ? `<span>${result.meta.phonetic}</span>` : ''}
+          ${result.meta?.date ? `<span>${result.meta.date}</span>` : ''}
         </div>
-        <button class="bookmark-btn" onclick="event.stopPropagation(); window.addBookmark(${JSON.stringify(res).replace(/"/g,'&quot;')})">⭐</button>
+        <button class="bookmark-btn" onclick="event.stopPropagation(); window.addBookmark(${JSON.stringify(result).replace(/"/g, '&quot;')})">⭐</button>
       `;
-      card.onclick = () => res.url && window.open(res.url, '_blank');
+      card.onclick = () => {
+        if (result.url) window.open(result.url, '_blank');
+      };
       resultsGrid.appendChild(card);
     });
 
-    if (typeof window.addToSearchHistory === 'function') window.addToSearchHistory(query, results.length);
-  } catch {
+    if (typeof window.addToSearchHistory === 'function') {
+      window.addToSearchHistory(query, results.length);
+    }
+
+  } catch (error) {
     loading.classList.remove('active');
-    resultsGrid.innerHTML = `<div style="text-align:center;padding:2rem;color:var(--text-muted);"><p>Something went wrong. Please try again.</p></div>`;
+    resultsGrid.innerHTML = `<div style="text-align: center; padding: 2rem; color: var(--text-muted);">
+      <p>Something went wrong. Please try again.</p>
+    </div>`;
   }
 }
diff --git a/js/ui.js b/js/ui.js
index d9f33ea..349ee89 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,27 +1,19 @@
 export function updateClock() {
-  const clock = document.getElementById('clock');
-  if (!clock) return;
-
   const now = new Date();
-  clock.textContent = now.toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false
-  });
+  const hours = now.getHours().toString().padStart(2, '0');
+  const minutes = now.getMinutes().toString().padStart(2, '0');
+  document.getElementById('clock').textContent = `${hours}:${minutes}`;
 }
 
 export function toggleSpotify() {
   const panel = document.getElementById('spotifyPanel');
-  if (!panel) return;
   panel.classList.toggle('open');
 }
 
 export function fadeInPage() {
-  requestAnimationFrame(() => {
-    document.body.style.opacity = '0';
-    document.body.style.transition = 'opacity 0.5s ease';
-    requestAnimationFrame(() => {
-      document.body.style.opacity = '1';
-    });
-  });
+  document.body.style.opacity = '0';
+  document.body.style.transition = 'opacity 0.5s ease';
+  setTimeout(() => {
+    document.body.style.opacity = '1';
+  }, 100);
 }