diff --git a/src/components/app/AppContent.tsx b/src/components/app/AppContent.tsx
index 1168919a..8142b223 100644
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import Sidebar from '../sidebar/view/Sidebar';
 import MainContent from '../main-content/view/MainContent';
-import MobileNav from '../MobileNav';
+import MobileNav from './MobileNav';
 
 import { useWebSocket } from '../../contexts/WebSocketContext';
 import { useDeviceSettings } from '../../hooks/useDeviceSettings';
diff --git a/src/components/MobileNav.jsx b/src/components/app/MobileNav.tsx
similarity index 78%
rename from src/components/MobileNav.jsx
rename to src/components/app/MobileNav.tsx
index 922b3642..c6f08156 100644
--- a/src/components/MobileNav.jsx
+++ b/src/components/app/MobileNav.tsx
@@ -1,7 +1,15 @@
 import { MessageSquare, Folder, Terminal, GitBranch, ClipboardCheck } from 'lucide-react';
-import { useTasksSettings } from '../contexts/TasksSettingsContext';
+import { useTasksSettings } from '../../contexts/TasksSettingsContext';
+import { Dispatch, SetStateAction } from 'react';
+import { AppTab } from '../../types/app';
 
-function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
+type MobileNavProps = {
+  activeTab: AppTab;
+  setActiveTab: Dispatch<SetStateAction<AppTab>>;
+  isInputFocused: boolean;
+};
+
+export default function MobileNav({ activeTab, setActiveTab, isInputFocused }: MobileNavProps) {
   const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
   const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
 
@@ -40,9 +48,8 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
 
   return (
     <div
-      className={`fixed bottom-0 left-0 right-0 z-50 px-3 pb-[max(8px,env(safe-area-inset-bottom))] transform transition-transform duration-300 ease-in-out ${
-        isInputFocused ? 'translate-y-full' : 'translate-y-0'
-      }`}
+      className={`fixed bottom-0 left-0 right-0 z-50 px-3 pb-[max(8px,env(safe-area-inset-bottom))] transform transition-transform duration-300 ease-in-out ${isInputFocused ? 'translate-y-full' : 'translate-y-0'
+        }`}
     >
       <div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
         <div className="flex items-center justify-around px-1 py-1.5 gap-0.5">
@@ -58,11 +65,10 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
                   e.preventDefault();
                   item.onClick();
                 }}
-                className={`flex flex-col items-center justify-center gap-0.5 px-3 py-2 rounded-xl flex-1 relative touch-manipulation transition-all duration-200 active:scale-95 ${
-                  isActive
-                    ? 'text-primary'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
+                className={`flex flex-col items-center justify-center gap-0.5 px-3 py-2 rounded-xl flex-1 relative touch-manipulation transition-all duration-200 active:scale-95 ${isActive
+                  ? 'text-primary'
+                  : 'text-muted-foreground hover:text-foreground'
+                  }`}
                 aria-label={item.label}
                 aria-current={isActive ? 'page' : undefined}
               >
@@ -84,5 +90,3 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
     </div>
   );
 }
-
-export default MobileNav;