diff --git a/client/src/componants/dashboard/Tabs.svelte b/client/src/componants/dashboard/Tabs.svelte
index f2416994..c096b1da 100644
--- a/client/src/componants/dashboard/Tabs.svelte
+++ b/client/src/componants/dashboard/Tabs.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-  import Evaluation from '../evaluation/Evaluation.svelte';
-  import UserEvaluation from '../evaluation/UserEvaluation.svelte';
+  // import Evaluation from '../evaluation/Evaluation.svelte';
+  // import UserEvaluation from '../evaluation/UserEvaluation.svelte';
   import Office from '../office/Office.svelte';
   import Register from '../register/Register.svelte';
-  import UserDocuments from "../userdocuments/UserDocuments.svelte"
+  // import UserDocuments from "../userdocuments/UserDocuments.svelte"
   import VacationBalance from "../vacations/VacationBalance.svelte"
   import UserVacationBalance from "../vacations/UserVacationBalance.svelte"
   import GreatAndHint from "./GreatAndHint.svelte"
   import UpdateProfile from '../settings/UpdateProfile.svelte';
+
   let date: Date = new Date();
 </script>
 
diff --git a/client/src/componants/sidebar/NavBar.svelte b/client/src/componants/sidebar/NavBar.svelte
index 6f29c4d6..43a40e44 100644
--- a/client/src/componants/sidebar/NavBar.svelte
+++ b/client/src/componants/sidebar/NavBar.svelte
@@ -1,82 +1,65 @@
 <script lang="ts">
     import { Link, Router } from 'svelte-navigator';
     import { UserStore } from '../../utils/stores';
+    import { tooltip } from '../../utils/tooltip';
 </script>
 
 <Router>
     <nav class="nav">
         <div>
             <Link to="/" class="nav_logo" style="margin-left: -10px;margin-bottom: 3px;">
-                <img alt="threefold logo" src="/assets/images/codescalers_icon_white.png" style="width: 40px;"/>
+                <img use:tooltip title="Codescalers" alt="threefold logo" src="/assets/images/codescalers_icon_white.png" style="width: 40px;"/>
                 <span class="nav_logo-name">Codescalers</span>
             </Link>
             <div class="nav_list">
                 <Link to="/" class="nav_link">
-                    <i class="fa-solid fa-calendar-days nav_icon" />
+                    <i use:tooltip title="Calendar" class="fa-solid fa-calendar-days nav_icon" />
                     <span class="nav_name">Calendar</span>
                 </Link>
                 <Link to="/notifications/" class="nav_link">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bell-fill" viewBox="0 0 16 16">
-                        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
-                    </svg>
+                    <i use:tooltip title="Notifications" class="fa fa-bell nav_icon" />
                     <span class="nav_name">Notifications</span>
                 </Link>
                 <Link to="/requests" class="nav_link">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-microsoft-teams nav_icon" viewBox="0 0 16 16">
-                        <path d="M9.186 4.797a2.42 2.42 0 1 0-2.86-2.448h1.178c.929 0 1.682.753 1.682 1.682v.766Zm-4.295 7.738h2.613c.929 0 1.682-.753 1.682-1.682V5.58h2.783a.7.7 0 0 1 .682.716v4.294a4.197 4.197 0 0 1-4.093 4.293c-1.618-.04-3-.99-3.667-2.35Zm10.737-9.372a1.674 1.674 0 1 1-3.349 0 1.674 1.674 0 0 1 3.349 0Zm-2.238 9.488c-.04 0-.08 0-.12-.002a5.19 5.19 0 0 0 .381-2.07V6.306a1.692 1.692 0 0 0-.15-.725h1.792c.39 0 .707.317.707.707v3.765a2.598 2.598 0 0 1-2.598 2.598h-.013Z"/>
-                        <path d="M.682 3.349h6.822c.377 0 .682.305.682.682v6.822a.682.682 0 0 1-.682.682H.682A.682.682 0 0 1 0 10.853V4.03c0-.377.305-.682.682-.682Zm5.206 2.596v-.72h-3.59v.72h1.357V9.66h.87V5.945h1.363Z"/>
-                    </svg>
+                    <i use:tooltip title="Requests" class="fa-solid fa-code-pull-request nav_icon"></i>
                     <span class="nav_name">Requests</span>
                 </Link>
                 {#if $UserStore && $UserStore.user_type === "User"}
                     <Link to="/team/" class="nav_link">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
-                            <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
-                            <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
-                            <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
-                        </svg>
+                        <i use:tooltip title="Team" class="fa fa-briefcase nav_icon" aria-hidden="true"></i>
                         <span class="nav_name">Team</span>
                     </Link>
                     <Link to="/hr_letters/" class="nav_link">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-arrow-up-fill" viewBox="0 0 16 16">
-                            <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM6.354 9.854a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 8.707V12.5a.5.5 0 0 1-1 0V8.707L6.354 9.854z"/>
-                        </svg>
+                        <i use:tooltip title="HR letter" class="fa fa-newspaper nav_icon" aria-hidden="true"></i>
                         <span class="nav_name">HR letter</span>
                     </Link>
                     <Link to="/offcial-document/" class="nav_link">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-medical-fill" viewBox="0 0 16 16">
-                            <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm-3 2v.634l.549-.317a.5.5 0 1 1 .5.866L7 7l.549.317a.5.5 0 1 1-.5.866L6.5 7.866V8.5a.5.5 0 0 1-1 0v-.634l-.549.317a.5.5 0 1 1-.5-.866L5 7l-.549-.317a.5.5 0 0 1 .5-.866l.549.317V5.5a.5.5 0 1 1 1 0zm-2 4.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1zm0 2h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z"/>
-                        </svg>
+                        <i use:tooltip title="Offcial document" class="fa fa-file-text nav_icon" aria-hidden="true"></i>
                         <span class="nav_name">Offcial document</span>
                     </Link>
                     <Link to="/compensations/" class="nav_link">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-wallet-fill" viewBox="0 0 16 16">
-                            <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v2h6a.5.5 0 0 1 .5.5c0 .253.08.644.306.958.207.288.557.542 1.194.542.637 0 .987-.254 1.194-.542.226-.314.306-.705.306-.958a.5.5 0 0 1 .5-.5h6v-2A1.5 1.5 0 0 0 14.5 2h-13z"/>
-                            <path d="M16 6.5h-5.551a2.678 2.678 0 0 1-.443 1.042C9.613 8.088 8.963 8.5 8 8.5c-.963 0-1.613-.412-2.006-.958A2.679 2.679 0 0 1 5.551 6.5H0v6A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-6z"/>
-                        </svg>
+                        <i use:tooltip title="Compensations" class="fa fa-sticky-note nav_icon" aria-hidden="true"></i>
                         <span class="nav_name">Compensations</span>
                     </Link>
                 {/if}
                 <Link to="/users/" class="nav_link">
-                    <i class="fa-solid fa-users nav_icon" />
+                    <i use:tooltip title="Employees" class="fa-solid fa-users nav_icon" />
                     <span class="nav_name">Employees</span>
                 </Link>
                 {#if $UserStore && $UserStore.user_type === "Admin"}
                     <Link to="/dashboard/" class="nav_link">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-line-fill" viewBox="0 0 16 16">
-                            <path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2z"/>
-                        </svg>
+                        <i use:tooltip title="Dashboard" class="fa fa-bar-chart nav_icon" aria-hidden="true"></i>
                         <span class="nav_name">Dashboard</span>
                     </Link>
                 {/if}
                 <Link to="/settings/" class="nav_link">
-                    <i class="fa-solid fa-gear nav_icon" />
+                    <i use:tooltip title="Settings" class="fa-solid fa-gear nav_icon" />
                     <span class="nav_name">Settings</span>
                 </Link>
             </div>
         </div>
         <Link to="/logout/" class="nav_link">
-            <i class="bx bx-log-out nav_icon" />
+            <i use:tooltip title="SignOut" class="bx bx-log-out nav_icon" />
             <span class="nav_name">SignOut</span>
         </Link>
     </nav>
diff --git a/client/src/componants/ui/TooltipFromAction.svelte b/client/src/componants/ui/TooltipFromAction.svelte
new file mode 100644
index 00000000..6f24bbca
--- /dev/null
+++ b/client/src/componants/ui/TooltipFromAction.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let title;
+	export let x;
+	export let y;
+</script>
+<div style="
+		top: {y + 15}px;
+		left: {x + 15}px;">{title}</div>
+
+<style>
+	div {
+		border: 1px solid #ddd;
+		box-shadow: 1px 1px 1px #ddd;
+		background: white;
+		border-radius: 4px;
+		padding: 4px;
+		position: absolute;
+    z-index: 999;
+	}
+</style>
diff --git a/client/src/utils/tooltip.ts b/client/src/utils/tooltip.ts
new file mode 100644
index 00000000..7716515a
--- /dev/null
+++ b/client/src/utils/tooltip.ts
@@ -0,0 +1,45 @@
+import Tooltip from '../componants/ui/TooltipFromAction.svelte';
+
+export function tooltip(element) {
+	let div;
+	let title;
+	let tooltipComponent;
+	function mouseOver(event) {
+		// NOTE: remove the `title` attribute, to prevent showing the default browser tooltip
+		// remember to set it back on `mouseleave`
+		title = element.getAttribute('title');
+		element.removeAttribute('title');
+
+		tooltipComponent = new Tooltip({
+			props: {
+				title: title,
+				x: event.pageX,
+				y: event.pageY,
+			},
+			target: document.body,
+		});
+	}
+	function mouseMove(event) {
+		tooltipComponent.$set({
+			x: event.pageX,
+			y: event.pageY,
+		})
+	}
+	function mouseLeave() {
+		tooltipComponent.$destroy();
+		// NOTE: restore the `title` attribute
+		element.setAttribute('title', title);
+	}
+	
+	element.addEventListener('mouseover', mouseOver);
+  element.addEventListener('mouseleave', mouseLeave);
+	element.addEventListener('mousemove', mouseMove);
+	
+	return {
+		destroy() {
+			element.removeEventListener('mouseover', mouseOver);
+			element.removeEventListener('mouseleave', mouseLeave);
+			element.removeEventListener('mousemove', mouseMove);
+		}
+	}
+}
\ No newline at end of file