diff --git a/frontend/src/components/calendar/CalendarNavigation.vue b/frontend/src/components/calendar/CalendarNavigation.vue
index fb70ccd..e341596 100644
--- a/frontend/src/components/calendar/CalendarNavigation.vue
+++ b/frontend/src/components/calendar/CalendarNavigation.vue
@@ -1,50 +1,64 @@
 <template>
     <div class="calendar-navigation">
-        <TabView v-model:activeIndex="activeIndex" @tab-change="onTabChange">
-            <TabPanel header="Bids">
-                <ScheduleBid />
-            </TabPanel>
-            <TabPanel header="Installs">
-                <div class="coming-soon">
-                    <p>Installs feature coming soon!</p>
-                </div>
-            </TabPanel>
-            <TabPanel header="Jobs">
-                <JobsCalendar />
-            </TabPanel>
-            <TabPanel header="Maintenance">
-                <div class="coming-soon">
-                    <p>Maintenance feature coming soon!</p>
-                </div>
-            </TabPanel>
-            <TabPanel header="Service">
-                <div class="coming-soon">
-                    <p>Service feature coming soon!</p>
-                </div>
-            </TabPanel>
-        </TabView>
+		<Tabs value="0">
+			<TabList>
+				<Tab value="0">Bids</Tab>
+				<Tab value="1">Install</Tab>
+				<Tab value="2">Service</Tab>
+				<Tab value="3">Lowe Fencing</Tab>
+				<Tab value="4">Daniel's Landscaping</Tab>
+				<Tab value="5">Nuco Yardcare</Tab>
+				<Tab value="6">Warranties</Tab>
+			</TabList>
+			<TabPanels>
+				<TabPanel header="Bids" value="0">
+					<ScheduleBid />
+				</TabPanel>
+				<TabPanel header="Install" value="1">
+						<JobsCalendar />
+				</TabPanel>
+				<TabPanel header="Service" value="2">
+					<div class="coming-soon">
+						<p>Service feature coming soon!</p>
+					</div>
+				</TabPanel>
+				<TabPanel header="Lowe Fencing" value="3">
+					<div class="coming-soon">
+						<p>Lowe Fencing calendar coming soon!</p>
+					</div>
+				</TabPanel>
+				<TabPanel header="Daniel's Landscaping" value="4">
+					<div class="coming-soon">
+						<p>Daniel's Calendar coming soon!</p>
+					</div>
+				</TabPanel>
+				<TabPanel header="Nuco Yardcare" value="5">
+					<div class="coming-soon">
+						<p>Nuco calendar coming soon!</p>
+					</div>
+				</TabPanel>
+				<TabPanel header="Warranties" value="6">
+					<div class="coming-soon">
+						<p>Warranties Calendar coming soon!</p>
+					</div>
+				</TabPanel>
+			</TabPanels>
+		</Tabs>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import TabView from 'primevue/tabview'
-import TabPanel from 'primevue/tabpanel'
-import ScheduleBid from '../calendar/bids/ScheduleBid.vue'
-import JobsCalendar from '../calendar/jobs/JobsCalendar.vue'
-import { useNotificationStore } from '../../stores/notifications-primevue'
+import { ref } from 'vue';
+import Tab from 'primevue/tab';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import TabPanel from 'primevue/tabpanel';
+import TabPanels from 'primevue/tabpanels';
+import ScheduleBid from '../calendar/bids/ScheduleBid.vue';
+import JobsCalendar from '../calendar/jobs/JobsCalendar.vue';
+import { useNotificationStore } from '../../stores/notifications-primevue';
 
-const notifications = useNotificationStore()
-
-const activeIndex = ref(0)
-
-const onTabChange = (event) => {
-    const tabHeaders = ['Bids', 'Installs', 'Jobs', 'Maintenance', 'Service']
-    const selectedTab = tabHeaders[event.index]
-    if (selectedTab !== 'Bids' && selectedTab !== 'Jobs') {
-        notifications.addWarning(`${selectedTab} feature coming soon!`)
-    }
-}
+const notifications = useNotificationStore();
 </script>
 
 <style scoped>