diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index ca543ee4..96255e0c 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -128,6 +128,34 @@ span.icon-text::after {
   color: var(--md-sys-color-on-surface-variant);
 }
 
+.nav-item {
+  position: relative;
+}
+
+.tooltip-text {
+  visibility: hidden;
+  background-color: rgb(71 67 67 / 80%);
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 12px;
+  white-space: nowrap;
+  margin-top: 5px;
+}
+
+.nav-item:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
 .dropdown-menu.scrollable-y {
   overflow-y: scroll;
   height: 360px;
diff --git a/src/main/resources/static/css/theme/font.css b/src/main/resources/static/css/theme/font.css
index f245dd32..547db7ca 100644
--- a/src/main/resources/static/css/theme/font.css
+++ b/src/main/resources/static/css/theme/font.css
@@ -19,4 +19,4 @@
     direction: ltr;
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 70475b54..b852569d 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -316,7 +316,7 @@
               <span class="material-symbols-rounded" id="dark-mode-icon">
                 dark_mode
               </span>
-              <span class="icon-text icon-hide" id="dark-mode-text" th:data-text="#{navbar.darkmode}" th:text="#{navbar.darkmode}"></span>
+              <span class="icon-text icon-hide tooltip-text" id="dark-mode-text" th:data-text="#{navbar.darkmode}" th:text="#{navbar.darkmode}"></span>
             </a>
           </li>
           <li class="nav-item dropdown">
@@ -360,7 +360,7 @@
               <span class="material-symbols-rounded">
                 settings
               </span>
-              <span class="icon-text icon-hide" th:data-text="#{navbar.settings}" th:text="#{navbar.settings}"></span>
+              <span class="icon-text icon-hide tooltip-text" th:data-text="#{navbar.settings}" th:text="#{navbar.settings}"></span>
             </a>
           </li>
         </ul>