diff --git a/board-bottom-nav.png b/board-bottom-nav.png
new file mode 100644
index 0000000..11e1d92
Binary files /dev/null and b/board-bottom-nav.png differ
diff --git a/bottom_nav_board.png b/bottom_nav_board.png
new file mode 100644
index 0000000..c7bf258
Binary files /dev/null and b/bottom_nav_board.png differ
diff --git a/bottom_nav_calendar.png b/bottom_nav_calendar.png
new file mode 100644
index 0000000..61e56aa
Binary files /dev/null and b/bottom_nav_calendar.png differ
diff --git a/bottom_nav_tasks.png b/bottom_nav_tasks.png
new file mode 100644
index 0000000..2d68c66
Binary files /dev/null and b/bottom_nav_tasks.png differ
diff --git a/calendar-bottom-nav.png b/calendar-bottom-nav.png
new file mode 100644
index 0000000..48101a4
Binary files /dev/null and b/calendar-bottom-nav.png differ
diff --git a/calendar_bottom_nav.png b/calendar_bottom_nav.png
new file mode 100644
index 0000000..dd10d02
Binary files /dev/null and b/calendar_bottom_nav.png differ
diff --git a/client/src/components/BottomNavigation.tsx b/client/src/components/BottomNavigation.tsx
index f260fc7..5792378 100644
--- a/client/src/components/BottomNavigation.tsx
+++ b/client/src/components/BottomNavigation.tsx
@@ -33,7 +33,7 @@ export default function BottomNavigation({ onTabChange, onCreateTask, activeTab
   };
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border">
+    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border z-40">
       <div className="flex items-center justify-around px-2 py-2 safe-area-inset-bottom">
         {tabs.map((tab) => {
           const isActive = currentTab === tab.id && !tab.isCreate;
diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index 498285e..bbe8921 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -294,7 +294,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
       </div>
 
       {/* Calendar Section - Fixed at bottom with full width, above bottom nav */}
-      <div className="fixed bottom-20 left-0 right-0 bg-background shadow-lg z-[5]" style={{ borderTop: '1px solid rgb(229, 231, 235)' }}>
+      <div className="fixed bottom-20 left-0 right-0 bg-background z-[5]" style={{ borderTop: '1px solid rgb(229, 231, 235)' }}>
         <div className="p-3 max-h-[32vh] overflow-y-auto">
           {/* Calendar Header */}
           <div className="flex items-center justify-between mb-3">
diff --git a/tasks-bottom-nav.png b/tasks-bottom-nav.png
new file mode 100644
index 0000000..072b301
Binary files /dev/null and b/tasks-bottom-nav.png differ
diff --git a/tasks_bottom_nav.png b/tasks_bottom_nav.png
new file mode 100644
index 0000000..9fce885
Binary files /dev/null and b/tasks_bottom_nav.png differ