diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 92347ab6..621ae96b 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -11,7 +11,6 @@ import Discord from './assets/discord.svg';
 import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
-import Info from './assets/info.svg';
 import InfoDark from './assets/info-dark.svg';
 import SettingGear from './assets/settingGear.svg';
 import Twitter from './assets/TwitterX.svg';
@@ -362,24 +361,27 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </NavLink>
           </div>
           <div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
-          <div className="flex my-4 mx-4 flex gap-2">
-              <img
-                className="ml-2 w-5 filter dark:invert"
-                src={InfoDark}
-              ></img>
+            <div className="flex my-4 mx-4 flex gap-2">
+              <img className="ml-2 w-5 filter dark:invert" src={InfoDark}></img>
               <Dropdown
-                placeholder={"Help"}
+                placeholder={'Help'}
                 selectedValue={null}
-                contentSize='50'
-                options={[ { label: "Docs", value: "documentation" }, { label: "Email Us", value: "email" }, ]}
-                onSelect={(selectedOption: { label: string; value: string }) => {
-                  if (selectedOption.value === "documentation") {
-                    window.open(" https://docs.docsgpt.cloud/", "_blank");
-                  } else if (selectedOption.value === "email"){
+                contentSize="50"
+                options={[
+                  { label: 'Docs', value: 'documentation' },
+                  { label: 'Email Us', value: 'email' },
+                ]}
+                onSelect={(selectedOption: {
+                  label: string;
+                  value: string;
+                }) => {
+                  if (selectedOption.value === 'documentation') {
+                    window.open(' https://docs.docsgpt.cloud/', '_blank');
+                  } else if (selectedOption.value === 'email') {
                     window.location.href = `mailto:contact@arc53.com`;
                   }
                 }}
-                />
+              />
             </div>
             <div className="flex items-center justify-evenly gap-1 px-1">
               <NavLink
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index b272fd8b..97c074a7 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -47,13 +47,16 @@ function Dropdown({
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
-  const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0});
-  
+  const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0 });
+
   const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
   const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
       setIsOpen(false);
     }
   };
@@ -66,7 +69,7 @@ function Dropdown({
   }, []);
 
   const handleToggleDropdown = () => {
-    setIsOpen(prev => !prev);
+    setIsOpen((prev) => !prev);
     if (!isOpen) {
       adjustDropdownPosition();
     }
@@ -80,7 +83,10 @@ function Dropdown({
 
       // Check if dropdown overflows the bottom of the viewport
       const newPosition = {
-        top: rect.bottom + dropdownMenuHeight > viewportHeight ? -dropdownMenuHeight : 0,
+        top:
+          rect.bottom + dropdownMenuHeight > viewportHeight
+            ? -dropdownMenuHeight
+            : 0,
         left: 0,
       };
 
@@ -90,7 +96,12 @@ function Dropdown({
 
   return (
     <div
-      className={[typeof selectedValue === 'string' ? 'relative mt-2' : 'relative align-middle', size].join(' ')}
+      className={[
+        typeof selectedValue === 'string'
+          ? 'relative mt-2'
+          : 'relative align-middle',
+        size,
+      ].join(' ')}
       ref={dropdownRef}
     >
       <button
@@ -98,9 +109,17 @@ function Dropdown({
         className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${isOpen ? borderTopRadius : borderRadius}`}
       >
         <span className={`truncate dark:text-bright-gray ${contentSize}`}>
-          {selectedValue && 'label' in selectedValue ? selectedValue.label : placeholder}
+          {typeof selectedValue === 'object' &&
+          selectedValue &&
+          'label' in selectedValue
+            ? selectedValue.label
+            : placeholder}
         </span>
-        <img src={Arrow2} alt="arrow" className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'} h-3 w-3 transition-transform`} />
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'} h-3 w-3 transition-transform`}
+        />
       </button>
       {isOpen && (
         <div
@@ -121,7 +140,9 @@ function Dropdown({
                 }}
                 className={`ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray ${contentSize}`}
               >
-                {typeof option === 'string' ? option : option.name || option.label || option.description}
+                {typeof option === 'string'
+                  ? option
+                  : option.name || option.label || option.description}
               </span>
               {showEdit && onEdit && (
                 <img