diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 7c846c9..580e572 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -32,11 +32,11 @@
   const [showChild, setShowChild] = useState<boolean>(false)
   return (
     <div
-    className="flex space-y-1"
+    className="flex min-w-fit"
     onMouseLeave={() => void setShowChild(false)}
     >
       <div
-      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer"
+      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer min-w-fit"
       onClick={() => router.push(title.toLowerCase())}
       onMouseEnter={() => void setShowChild(true)}
       >
@@ -44,7 +44,7 @@
       </div>
       {
         (children)
-        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}>
+        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"} min-w-fit`}>
           { children }
         </div>
         : null
@@ -67,11 +67,11 @@
 
   return (
     <div
-    className="flex flex-col space-y-1"
+    className="flex flex-col space-y-1 max-w-[7.5vw]"
     onMouseLeave={() => void setShowChild(false)}
     >
       <div
-      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer"
+      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer min-w-fit"
       onClick={() => router.push(title.toLowerCase())}
       onMouseEnter={() => void setShowChild(true)}
       >
@@ -79,9 +79,11 @@
       </div>
       {
         (subgroups && subgroups.length > 0)
-        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}>
+        ? <div className={`bg-[#383838] bg-opacity-75 rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"} w-fit`}>
           {
-            subgroups.map((item, i) => <div key={i}>{item}</div>)
+            subgroups.map((item, i) => <div
+            key={i}
+            >{item}</div>)
           }
         </div>
         : null
