diff --git a/frontend/src/components/Dialog/FaceSearchDialog.tsx b/frontend/src/components/Dialog/FaceSearchDialog.tsx
index 6adab5794..6330318c1 100644
--- a/frontend/src/components/Dialog/FaceSearchDialog.tsx
+++ b/frontend/src/components/Dialog/FaceSearchDialog.tsx
@@ -9,6 +9,11 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useDispatch } from 'react-redux';
 import { useFile } from '@/hooks/selectFile';
 import { startSearch, clearSearch } from '@/features/searchSlice';
@@ -43,7 +48,7 @@ export function FaceSearchDialog() {
           showInfoDialog({
             title: 'No Matches Found',
             message:
-              'We couldn’t find any matching faces in your gallery for this photo.',
+              "We couldn't find any matching faces in your gallery for this photo.",
             variant: 'info',
           }),
         );
@@ -91,21 +96,28 @@ export function FaceSearchDialog() {
   return (
     <>
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogTrigger asChild>
-          <Button
-            onClick={() => setIsDialogOpen(true)}
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 cursor-pointer p-1"
-          >
-            <ScanFace className="h-4 w-4" />
-            <span className="sr-only">Face Detection Search</span>
-          </Button>
-        </DialogTrigger>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 cursor-pointer p-1"
+                aria-label="Search by face"
+              >
+                <ScanFace className="h-4 w-4" />
+                <span className="sr-only">Search by face</span>
+              </Button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Search by face</p>
+          </TooltipContent>
+        </Tooltip>
 
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Face Detection Search</DialogTitle>
+            <DialogTitle>Search by Face</DialogTitle>
             <DialogDescription>
               Search for images containing specific faces by uploading a photo
               or using your webcam.
diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index c565b7f6d..904e78648 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -6,6 +6,11 @@ import { selectAvatar, selectName } from '@/features/onboardingSelectors';
 import { clearSearch } from '@/features/searchSlice';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { FaceSearchDialog } from '@/components/Dialog/FaceSearchDialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 export function Navbar() {
   const userName = useSelector(selectName);
@@ -42,14 +47,20 @@ export function Navbar() {
                 className="h-7 w-7 rounded object-cover"
               />
               {isSearchActive && (
-                <button
-                  onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-red-600 text-[10px] leading-none text-white"
-                  title="Close"
-                  aria-label="Close"
-                >
-                  ✕
-                </button>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={() => dispatch(clearSearch())}
+                      className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-red-600 text-[10px] leading-none text-white"
+                      aria-label="Close"
+                    >
+                      ✕
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Clear search</p>
+                  </TooltipContent>
+                </Tooltip>
               )}
             </div>
           )}
@@ -62,16 +73,22 @@ export function Navbar() {
           />
 
           {/* FaceSearch Dialog */}
-
           <FaceSearchDialog />
 
-          <button
-            className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 cursor-pointer rounded-sm p-2"
-            title="Search"
-            aria-label="Search"
-          >
-            <Search className="h-4 w-4" />
-          </button>
+          {/* Search Button */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 cursor-pointer rounded-sm p-2"
+                aria-label="Search"
+              >
+                <Search className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Search images</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
 
@@ -82,15 +99,22 @@ export function Navbar() {
           <span className="hidden text-sm sm:inline-block">
             Welcome <span className="text-muted-foreground">{userName}</span>
           </span>
-          <a href="/settings" className="p-2">
-            <img
-              src={userAvatar || '/photo1.png'}
-              className="hover:ring-primary/50 h-8 w-8 cursor-pointer rounded-full transition-all hover:ring-2"
-              alt="User avatar"
-            />
-          </a>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <a href="/settings" className="p-2">
+                <img
+                  src={userAvatar || '/photo1.png'}
+                  className="hover:ring-primary/50 h-8 w-8 cursor-pointer rounded-full transition-all hover:ring-2"
+                  alt="User avatar"
+                />
+              </a>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Profile settings</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index a21d592ee..3bea0f992 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -7,46 +7,57 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useTheme } from '@/contexts/ThemeContext';
 
 export function ThemeSelector() {
   const { setTheme } = useTheme();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          className="cursor-pointer"
-          variant="outline"
-          size="icon"
-          title="Themes"
-          aria-label="themes"
-        >
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => setTheme('light')}
-        >
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => setTheme('dark')}
-        >
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => setTheme('system')}
-        >
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              className="cursor-pointer"
+              variant="outline"
+              size="icon"
+              aria-label="Toggle theme"
+            >
+              <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+              <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+              <span className="sr-only">Toggle theme</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => setTheme('light')}
+            >
+              Light
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => setTheme('dark')}
+            >
+              Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => setTheme('system')}
+            >
+              System
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Toggle theme</p>
+      </TooltipContent>
+    </Tooltip>
   );
-}
+}
\ No newline at end of file