diff --git a/frontend/src/components/pages/Client.vue b/frontend/src/components/pages/Client.vue
index 53cdba0..ab23b8e 100644
--- a/frontend/src/components/pages/Client.vue
+++ b/frontend/src/components/pages/Client.vue
@@ -1,8 +1,40 @@
 <template>
-	<div>{{ clientId }}</div>
+	<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>
+		</TabList>
+		<TabPanels>
+			<TabPanel value="0">
+				<h1>Overview</h1>
+			</TabPanel>
+			<TabPanel value="1">
+				<h1>Contact Info</h1>
+			</TabPanel>
+			<TabPanel value="2">
+				<h1>Project Status</h1>
+			</TabPanel>
+			<TabPanel value="3">
+				<h1>Accounting</h1>
+			</TabPanel>
+			<TabPanel value="4">
+				<h1>History</h1>
+			</TabPanel>
+		</TabPanels>
+	</Tabs>
 </template>
 <script setup>
 import { onMounted, ref } from "vue";
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+
 const client = ref({});
 const { clientName } = defineProps({
 	clientName: { type: String, required: true },
@@ -18,4 +50,13 @@ onMounted(() => {
 	}
 });
 </script>
-<style lang="css"></style>
+<style lang="css">
+.tab-bar {
+	display: flex;
+
+}
+.tab-button {
+	border: black 1px;
+	border-radius: 5px;
+}
+</style>