diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..544138b
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/app/globals.css b/app/globals.css
index 00874c2..58974b7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -19,6 +19,8 @@
   --foreground-inactive-hsl: 0, 0%, 6%;
   --foreground-active-hsl: 0, 0%, 6%;
 
+  --background-navbar-tooltip-hsl: 0, 0%, 100%;
+
   --foreground-nodata-hsl: 210, 2%, 82%;
 
   --color-grey: 0, 0%, 6%;
@@ -231,6 +233,8 @@
 
   --foreground-nodata-hsl: 240, 3%, 22%;
 
+  --background-navbar-tooltip-hsl: 240, 3%, 12%;
+
   --mods-NM-bg: 226, 99%, 65%;
   --mods-NM-bg-row: 226, 99%, 65%, 0.15;
   --mods-HD-bg: 43, 98%, 60%;
diff --git a/components/NavBar/NavBar.module.css b/components/NavBar/NavBar.module.css
index 5f5f639..f706911 100644
--- a/components/NavBar/NavBar.module.css
+++ b/components/NavBar/NavBar.module.css
@@ -54,6 +54,9 @@
   cursor: pointer;
 }
 
+.iconContainer {
+  margin-top: 12px;
+}
 .logoLink,
 .actions .userPropic {
   height: 1.9rem;
diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index f41c700..0c8341a 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -10,7 +10,6 @@ import ModeSwitcher from './ModeSwitcher/ModeSwitcher';
 import styles from './NavBar.module.css';
 import Routes from './Routes/Routes';
 import SearchButton from './SearchButton/SearchButton';
-import ThemeSwitcher from './ThemeSwitcher/ThemeSwitcher';
 import UserLogged from './UserLogged/UserLogged';
 
 export default function NavBar() {
@@ -34,7 +33,6 @@ export default function NavBar() {
         <div className={styles.actions}>
           <SearchButton />
           {cookieMode?.value && <ModeSwitcher mode={cookieMode?.value} />}
-          <ThemeSwitcher />
           <UserLogged />
         </div>
       </div>
diff --git a/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
index 92c75c6..2638f30 100644
--- a/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
@@ -19,11 +19,6 @@ export default function ThemeSwitcher() {
         {theme === 'light' && <Image src={sunSVG} alt="Theme Switcher" fill />}
         {theme === 'dark' && <Image src={moonSVG} alt="Theme Switcher" fill />}
         {!theme && <></>}
-        {/* <Image
-              src={theme === 'light' ? sunSVG : moonSVG}
-              alt="Theme Switcher"
-              fill
-            /> */}
       </div>
     </button>
   );
diff --git a/components/NavBar/Tooltip/Tooltip.module.css b/components/NavBar/Tooltip/Tooltip.module.css
new file mode 100644
index 0000000..f79ea76
--- /dev/null
+++ b/components/NavBar/Tooltip/Tooltip.module.css
@@ -0,0 +1,55 @@
+.tooltipContainer {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+}
+
+.parent {
+  position: absolute;
+  z-index: 1000;
+  top: calc(100% - 0.6rem);
+  left: calc(
+    -1 * (1.9rem + (1.4rem / 2))
+  ); /* calc(-1 * (profile image width + (horizontal padding of content below / 2))) */
+  white-space: nowrap;
+  opacity: 0;
+  padding-top: 0.7rem;
+  visibility: hidden;
+}
+
+.tooltipContent {
+  padding: 1.2rem 1.4rem;
+  background-color: hsla(var(--background-navbar-tooltip-hsl));
+  color: hsla(var(--foreground-inactive-hsl));
+  border-radius: 0.85rem;
+  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
+  font-size: 1.1rem;
+  display: flex;
+  font-weight: 400;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.tooltipContainer:hover > .parent {
+  opacity: 1;
+  top: calc(100% - 0.15rem);
+  visibility: visible;
+  transition: all 0.2s ease-out;
+}
+
+.tooltipContent > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltipContent > div {
+  cursor: pointer;
+  transition: color 0.2s ease;
+  border-radius: 4px;
+  color: hsla(var(--foreground-inactive-hsl));
+}
+
+.tooltipContent > div:hover {
+  color: hsla(var(--foreground-active-hsl));
+}
diff --git a/components/NavBar/Tooltip/Tooltip.tsx b/components/NavBar/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..60974fc
--- /dev/null
+++ b/components/NavBar/Tooltip/Tooltip.tsx
@@ -0,0 +1,37 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Tooltip.module.css';
+
+export default function Tooltip({ children, content }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  const handleMouseEnter = () => {
+    clearTimeout(timeoutRef.current);
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 500);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={styles.tooltipContainer}>
+      {children}
+      <div className={styles.parent}>
+        <div className={styles.tooltipContent}>{content}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/NavBar/UserLogged/UserLogged.tsx b/components/NavBar/UserLogged/UserLogged.tsx
index f5cae8f..cbaf94e 100644
--- a/components/NavBar/UserLogged/UserLogged.tsx
+++ b/components/NavBar/UserLogged/UserLogged.tsx
@@ -3,18 +3,32 @@
 import { useUser } from '@/util/hooks';
 import Image from 'next/image';
 import styles from '../NavBar.module.css';
+import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
+import Tooltip from './../Tooltip/Tooltip';
+const tooltipContent = (
+  <>
+    {/* <div>Friends</div> */}
+    <div>Sign out</div>
+    <div className={styles.iconContainer}>
+      <ThemeSwitcher />
+    </div>
+  </>
+);
 
 export default function UserLogged() {
   const user = useUser();
 
   if (user?.osuId)
     return (
-      <div className={styles.userPropic}>
-        <Image
-          src={`http://s.ppy.sh/a/${user?.osuId}`}
-          alt="User Propic"
-          fill
-        />
-      </div>
+      <Tooltip content={tooltipContent}>
+        <div className={styles.userPropic}>
+          <Image
+            src={`http://s.ppy.sh/a/${user?.osuId}`}
+            alt="User Propic"
+            fill
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          />
+        </div>
+      </Tooltip>
     );
 }
diff --git a/package-lock.json b/package-lock.json
index 5e6bcf4..815e9a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "chart.js": "^4.4.0",
         "chartjs-adapter-date-fns": "^3.0.0",
         "clsx": "^2.0.0",
-        "framer-motion": "^10.16.4",
+        "framer-motion": "^11.3.21",
         "iron-session": "^8.0.1",
         "next": "^14.1.2",
         "next-themes": "^0.3.0",
@@ -63,6 +63,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
       "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@emotion/memoize": "0.7.4"
       }
@@ -71,7 +72,8 @@
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -967,12 +969,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1870,10 +1873,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1943,20 +1947,22 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "10.16.4",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz",
-      "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==",
+      "version": "11.3.21",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.21.tgz",
+      "integrity": "sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.0"
       },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
       "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       },
       "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
         "react": {
           "optional": true
         },
@@ -2501,6 +2507,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -3913,6 +3920,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
diff --git a/package.json b/package.json
index 557cd2c..d2961ca 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "clsx": "^2.0.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^11.3.21",
     "iron-session": "^8.0.1",
     "next": "^14.1.2",
     "next-themes": "^0.3.0",