diff --git a/css/themes.css b/css/themes.css
index 17c26ba..9d33692 100644
--- a/css/themes.css
+++ b/css/themes.css
@@ -225,4 +225,74 @@ body {
     height: 28px;
     border-width: 2px;
   }
-}
\ No newline at end of file
+}
+
+/* Theme button tooltips */
+
+.theme-btn {
+  position: relative;
+}
+
+/* Tooltip text */
+.theme-btn::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: 50%;
+  right: 120%;
+  transform: translateY(-50%) translateX(-8px);
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+  font-size: 0.8rem;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  z-index: 2000;
+}
+
+/* Tooltip arrow */
+.theme-btn::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 110%;
+  transform: translateY(-50%);
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent transparent transparent rgba(0, 0, 0, 0.85);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+/* Show tooltip on hover */
+.theme-btn:hover::after {
+  opacity: 1;
+  transform: translateY(-50%) translateX(-12px);
+}
+
+.theme-btn:hover::before {
+  opacity: 1;
+}
+
+/* Theme-aware tooltip colors */
+body.theme-sunset .theme-btn::after,
+body.theme-default .theme-btn::after {
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+}
+
+body.theme-night .theme-btn::after {
+  background: rgba(255, 255, 255, 0.9);
+  color: #111;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+/* White tooltip arrow for night theme */
+body.theme-night .theme-btn::before {
+  border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
+}
diff --git a/index.html b/index.html
index 70849f5..0ac86e8 100644
--- a/index.html
+++ b/index.html
@@ -95,11 +95,12 @@ <h1>Game Over!</h1>
   <div id="score">0</div>
 
   <!-- Theme Buttons -->
-  <div id="theme-controls">
-    <button id="theme-default" class="theme-btn active" title="Default Theme">🌅</button>
-    <button id="theme-night" class="theme-btn" title="Night Theme">🌙</button>
-    <button id="theme-sunset" class="theme-btn" title="Sunset Theme">🌇</button>
-  </div>
+<div id="theme-controls">
+  <button id="theme-default" class="theme-btn active" data-tooltip="Default Theme">🌅</button>
+  <button id="theme-night" class="theme-btn" data-tooltip="Night Theme">🌙</button>
+  <button id="theme-sunset" class="theme-btn" data-tooltip="Sunset Theme">🌇</button>
+</div>
+
 
   <!-- Include Three.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>