diff --git a/frontend/src/components/pages/Client.vue b/frontend/src/components/pages/Client.vue
index 93da045..d4da95d 100644
--- a/frontend/src/components/pages/Client.vue
+++ b/frontend/src/components/pages/Client.vue
@@ -1,28 +1,23 @@
 <template>
-	<div>{{ clientName }}</div>
 	<Tabs value="0">
 		<TabList>
 			<Tab value="0">Overview</Tab>
-			<Tab value="1">Contact Info</Tab>
-			<Tab value="2">Project Status</Tab>
-			<Tab value="3">Accounting</Tab>
-			<Tab value="4">History</Tab>
+			<Tab value="1">Projects <span class=tab-info-alert>1</span></Tab>
+			<Tab value="2">Financials</Tab>
+			<Tab value="3">History</Tab>
 		</TabList>
 		<TabPanels>
 			<TabPanel value="0">
-				<h1>Overview</h1>
+				<div id=overview-tab><h3>Overview</h3></div>
 			</TabPanel>
 			<TabPanel value="1">
-				<h1>Contact Info</h1>
+			<div id=projects-tab><h3>Project Status</h3></div>
 			</TabPanel>
 			<TabPanel value="2">
-				<h1>Project Status</h1>
+				<div id=financials-tab><h3>Accounting</h3></div>
 			</TabPanel>
 			<TabPanel value="3">
-				<h1>Accounting</h1>
-			</TabPanel>
-			<TabPanel value="4">
-				<h1>History</h1>
+				<div id=history-tab><h3>History</h3></div>
 			</TabPanel>
 		</TabPanels>
 	</Tabs>
@@ -81,11 +76,13 @@ onMounted(async () => {
 });
 </script>
 <style lang="css">
-.tab-bar {
-	display: flex;
-}
-.tab-button {
-	border: black 1px;
-	border-radius: 5px;
+.tab-info-alert {
+	background-color: a95e46;
+	border-radius: 10px;
+	color: white;
+	padding-left: 5px;
+	padding-right: 5px;
+	padding-top: 2px;
+	padding-bottom: 2px;
 }
 </style>