diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 052c3b27..57c5de45 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -197,6 +197,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             query: { conversationId: index },
           }),
         );
+        if (isMobile || isTablet) {
+          setNavOpen(false);
+        }
         if (data.agent_id) {
           if (data.is_shared_usage) {
             userService
@@ -511,8 +514,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
             <NavLink
               onClick={() => {
-                if (isMobile) {
-                  setNavOpen(!navOpen);
+                if (isMobile || isTablet) {
+                  setNavOpen(false);
                 }
                 resetConversation();
               }}
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index bffcfb5c..1b9f9b87 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -35,8 +35,8 @@ export function useOutsideAlerter<T extends HTMLElement>(
 
 export function useMediaQuery() {
   const mobileQuery = '(max-width: 768px)';
-  const tabletQuery = '(max-width: 1024px)'; // Tablet breakpoint at 1024px
-  const desktopQuery = '(min-width: 1025px)'; // Desktop starts after tablet
+  const tabletQuery = '(max-width: 1023px)';
+  const desktopQuery = '(min-width: 1024px)';
   const [isMobile, setIsMobile] = useState(false);
   const [isTablet, setIsTablet] = useState(false);
   const [isDesktop, setIsDesktop] = useState(false);