diff --git a/components/NavDisplay.tsx b/components/NavDisplay.tsx
index 9f1c445..d0bbb20 100644
--- a/components/NavDisplay.tsx
+++ b/components/NavDisplay.tsx
@@ -3,14 +3,14 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { NavItemType } from './Navigation';
 
-export default function NavDisplay({ navItems, isMobile }: { navItems: NavItemType[], isMobile: boolean }) {
+export default function NavDisplay({ navItems, displayType }: { navItems: NavItemType[], displayType: 'main' | 'mobile' }) {
   const pathname = usePathname();
   const { isIOS } = useHelpers()
 
-  if (isMobile) {
+  if (displayType === 'mobile') {
     return (
         <>
-        {isMobile && (<div className={isIOS ? "pb-20" : "pb-16"} />)}
+        <div className={isIOS ? "pb-20" : "pb-16"} />
         <nav className={`lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg ${isIOS ? "pb-4" : ""}`}>
             <div className="grid grid-cols-6 w-full">
             {navItems.map((item) => (
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 6347968..37f7453 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -3,7 +3,7 @@
 import { HabitIcon, TaskIcon } from '@/lib/constants'
 import { Calendar, Coins, Gift, Home } from 'lucide-react'
 import { useTranslations } from 'next-intl'
-import { ElementType, useEffect, useState } from 'react'
+import { ElementType } from 'react'
 import NavDisplay from './NavDisplay'
 
 export interface NavItemType {
@@ -14,13 +14,6 @@ export interface NavItemType {
 
 export default function Navigation({ position }: { position: 'main' | 'mobile' }) {
   const t = useTranslations('Navigation');
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 1024);
-
-  useEffect(() => {
-    const handleResize = () => {setIsMobile(window.innerWidth < 1024); };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [setIsMobile]);
 
   const currentNavItems: NavItemType[] = [
     { icon: Home, label: t('dashboard'), href: '/' },
@@ -31,10 +24,5 @@ export default function Navigation({ position }: { position: 'main' | 'mobile' }
     { icon: Coins, label: t('coins'), href: '/coins' },
   ]
 
-  if ((position === 'mobile' && isMobile) || (position === 'main' && !isMobile)) {
-    return <NavDisplay navItems={currentNavItems} isMobile={isMobile} />
-  }
-  else {
-    return <></>
-  }
+  return <NavDisplay navItems={currentNavItems} displayType={position} />
 }