diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ead3c0f..42ead5f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@iconoir/vue": "^7.11.0",
         "axios": "^1.12.2",
         "frappe-ui": "^0.1.205",
         "pinia": "^3.0.3",
@@ -645,6 +646,19 @@
         }
       }
     },
+    "node_modules/@iconoir/vue": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@iconoir/vue/-/vue-7.11.0.tgz",
+      "integrity": "sha512-o768Cu9nayRcxryYElKmfRLBOfY26xVKB4T8z+ppJnEWy2QiDLIs8NJVc53HGvTsrfn7JC7+uu32ZUdFpx4m6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/iconoir"
+      },
+      "peerDependencies": {
+        "vue": "3"
+      }
+    },
     "node_modules/@interactjs/types": {
       "version": "1.10.27",
       "resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.27.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 160c27f..989af67 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@iconoir/vue": "^7.11.0",
     "axios": "^1.12.2",
     "frappe-ui": "^0.1.205",
     "pinia": "^3.0.3",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 81c28ec..13f8d41 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,30 +1,37 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import { IconoirProvider } from "@iconoir/vue";
+import SideBar from "./components/SideBar.vue";
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+	<IconoirProvider
+		:icon-props="{
+			color: 'white',
+			'stroke-width': 2,
+			width: '1.2em',
+			height: '1.2em',
+		}"
+	>
+		<div id="snw-ui">
+			<SideBar />
+			<div id="display-content">
+				<RouterView />
+			</div>
+		</div>
+	</IconoirProvider>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+<style lang="css">
+#snw-ui {
+	display: flex;
+	flex-direction: row;
+	width: 100vw;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+#display-content {
+	flex-grow: 1;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 75vw;
 }
 </style>
diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
new file mode 100644
index 0000000..2b5a30e
--- /dev/null
+++ b/frontend/src/components/DataTable.vue
@@ -0,0 +1,43 @@
+<template lang="">
+	<div id="paging-controls">
+		<p>Show rows:</p>
+		<button class="page-num-button">25</button>
+		<button class="page-num-button">50</button>
+		<button class="page-num-button">100</button>
+		<button class="page-turn-button">Prev</button>
+		<button class="page-turn-button">Next</button>
+	</div>
+	<div ref="dataTableContainer"></div>
+</template>
+<script setup>
+import { defineProps, ref, onMounted } from "vue";
+const dataTableContainer = ref(null);
+const props = defineProps({
+	columns: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Array,
+		required: true,
+	},
+});
+
+onMounted(() => {
+	console.log(dataTableContainer);
+	if (!dataTableContainer.value) {
+		console.error("Datatable container not found!");
+		return;
+	}
+
+	const columnsList = props.columns.map((col) => col.label);
+	const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
+
+	// Pass the actual DOM element
+	new frappe.DataTable(dataTableContainer.value, {
+		columns: columnsList,
+		data: dataList,
+	});
+});
+</script>
+<style lang=""></style>
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
deleted file mode 100644
index e84a56a..0000000
--- a/frontend/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import SideBar from "./SideBar.vue";
-
-defineProps({
-	msg: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-	<SideBar />
-	<h1>{{ msg }}</h1>
-
-	<div class="card">
-		<button type="button" @click="count++">count is {{ count }}</button>
-		<p>
-			Edit
-			<code>components/HelloWorld.vue</code> to test HMR
-		</p>
-	</div>
-
-	<p></p>
-	<p>
-		Learn more about IDE Support for Vue in the
-		<a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
-			>Vue Docs Scaling up Guide</a
-		>.
-	</p>
-	<p class="read-the-docs">Testing cache update</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-	color: #888;
-}
-</style>
diff --git a/frontend/src/components/SideBar.vue b/frontend/src/components/SideBar.vue
index 2040b80..064242c 100644
--- a/frontend/src/components/SideBar.vue
+++ b/frontend/src/components/SideBar.vue
@@ -1,15 +1,86 @@
 <script setup>
 import { ref } from "vue";
-const isOpen = ref(true);
-const selectedItem = ref("home");
+import { useRouter } from "vue-router";
+import {
+	Community,
+	Calendar,
+	Hammer,
+	MultiplePagesPlus,
+	PathArrowSolid,
+	Clock,
+	HistoricShield,
+} from "@iconoir/vue";
 
-const onDisclosure = () => {
-	isOpen = !isOpen;
+const router = useRouter();
+const categories = [
+	{ name: "Calendar", icon: Calendar, url: "/calendar" },
+	{ name: "Clients", icon: Community, url: "/clients" },
+	{ name: "Jobs", icon: Hammer, url: "/jobs" },
+	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
+	{ name: "Create", icon: MultiplePagesPlus, url: "/create" },
+	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
+	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
+];
+const handleCategoryClick = (category) => {
+	router.push(category.url);
 };
 </script>
 
 <template>
-	<div class="snw-side-bar">
-		<button @click="onDisclosure">{{ isOpen ? "Close" : "Open" }}</button>
+	<div id="sidebar" class="sidebar">
+		<button
+			v-for="category in categories"
+			:class="[
+				'sidebar-button',
+				router.currentRoute.value.path === category.url ? 'active' : '',
+			]"
+			:key="category.name"
+			@click="handleCategoryClick(category)"
+		>
+			<component :is="category.icon" class="button-icon" /><span class="button-text">{{
+				category.name
+			}}</span>
+		</button>
 	</div>
 </template>
+
+<style lang="css">
+.sidebar-button.active {
+	background-color: rgb(25, 60, 53);
+	color: white;
+}
+
+.sidebar-button:hover {
+	background-color: rgb(82, 132, 119);
+}
+
+.button-icon {
+	justify-self: flex-start;
+	margin-left: 5px;
+}
+
+.button-text {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.sidebar-button {
+	border-radius: 5px;
+	border: none;
+	background-color: rgb(69, 112, 101);
+	color: white;
+	display: flex;
+	align-items: center;
+}
+
+#sidebar {
+	display: flex;
+	flex-direction: column;
+	width: 150px;
+	align-self: flex-start;
+	gap: 10px;
+	background-color: #f3f3f3;
+	padding: 10px;
+	border-radius: 5px;
+}
+</style>
diff --git a/frontend/src/components/pages/Calendar.vue b/frontend/src/components/pages/Calendar.vue
new file mode 100644
index 0000000..e978cd6
--- /dev/null
+++ b/frontend/src/components/pages/Calendar.vue
@@ -0,0 +1,6 @@
+<template>
+	<div>
+		<h2>Calendar</h2>
+	</div>
+</template>
+<script setup></script>
diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
new file mode 100644
index 0000000..8e5a030
--- /dev/null
+++ b/frontend/src/components/pages/Clients.vue
@@ -0,0 +1,40 @@
+<template>
+	<div>
+		<H2>Client Contact List</H2>
+		<div id="filter-container" class="filter-container">
+			<input placeholder="Type to Search" />
+			<p>Type:</p>
+			<select id="type-selector"></select>
+			<button @click="onClick" id="add-customer-button" class="interaction-button">
+				Add
+			</button>
+		</div>
+		<DataTable v-if="tableData.length > 0" :data="tableData" :columns="columns" />
+	</div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue";
+import DataTable from "../DataTable.vue";
+
+const tableData = ref([]);
+
+const onClick = () => {
+	frappe.new_doc("Customer");
+};
+
+const searchFields = { fields: ["full_name", "address", "email_id", "phone"] };
+const columns = [
+	{ label: "Name", fieldName: "full_name" },
+	{ label: "Location", fieldName: "address" },
+	{ label: "Type", fieldName: "contact_type" },
+	{ label: "Contact", fieldName: "full_name" },
+	{ label: "Email", fieldName: "email_id" },
+	{ label: "Phone", fieldName: "phone" },
+];
+onMounted(async () => {
+	let data = await frappe.db.get_list("Contact", searchFields);
+	console.log(data);
+	tableData.value = data;
+});
+</script>
+<style lang=""></style>
diff --git a/frontend/src/components/pages/Create.vue b/frontend/src/components/pages/Create.vue
new file mode 100644
index 0000000..86a5a1a
--- /dev/null
+++ b/frontend/src/components/pages/Create.vue
@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<h2>Create Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>
diff --git a/frontend/src/components/pages/Home.vue b/frontend/src/components/pages/Home.vue
index e69de29..4a1770c 100644
--- a/frontend/src/components/pages/Home.vue
+++ b/frontend/src/components/pages/Home.vue
@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>Hello!</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>
diff --git a/frontend/src/components/pages/Jobs.vue b/frontend/src/components/pages/Jobs.vue
new file mode 100644
index 0000000..04bf004
--- /dev/null
+++ b/frontend/src/components/pages/Jobs.vue
@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<h2>Jobs</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>
diff --git a/frontend/src/components/pages/Routes.vue b/frontend/src/components/pages/Routes.vue
new file mode 100644
index 0000000..e92532e
--- /dev/null
+++ b/frontend/src/components/pages/Routes.vue
@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>Routes Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>
diff --git a/frontend/src/components/pages/TimeSheets.vue b/frontend/src/components/pages/TimeSheets.vue
new file mode 100644
index 0000000..9c45959
--- /dev/null
+++ b/frontend/src/components/pages/TimeSheets.vue
@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>TimeSheets Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>
diff --git a/frontend/src/components/pages/Warranties.vue b/frontend/src/components/pages/Warranties.vue
new file mode 100644
index 0000000..cae0c3d
--- /dev/null
+++ b/frontend/src/components/pages/Warranties.vue
@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>Warranties Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 1a0d1ed..8192e64 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
+import router from "./router";
 
-createApp(App).mount("#custom-ui-app");
+createApp(App).use(router).mount("#custom-ui-app");
diff --git a/frontend/src/router.js b/frontend/src/router.js
new file mode 100644
index 0000000..563711b
--- /dev/null
+++ b/frontend/src/router.js
@@ -0,0 +1,31 @@
+import { RouterView } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
+import Calendar from "./components/pages/Calendar.vue";
+import Clients from "./components/pages/Clients.vue";
+import Jobs from "./components/pages/Jobs.vue";
+import Create from "./components/pages/Create.vue";
+import Routes from "./components/pages/Routes.vue";
+import TimeSheets from "./components/pages/TimeSheets.vue";
+import Warranties from "./components/pages/Warranties.vue";
+import Home from "./components/pages/Home.vue";
+
+const routes = [
+	{
+		path: "/",
+		component: Home,
+	},
+	{ path: "/calendar", component: Calendar },
+	{ path: "/clients", component: Clients },
+	{ path: "/jobs", component: Jobs },
+	{ path: "/routes", component: Routes },
+	{ path: "/create", component: Create },
+	{ path: "/timesheets", component: TimeSheets },
+	{ path: "/warranties", component: Warranties },
+];
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes,
+});
+
+export default router;
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
deleted file mode 100644
index 3c8f203..0000000
--- a/frontend/src/router/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createRouter, createWebHashHistory } from "vue-router";
-import Home from "../components/pages/Home.vue";
-
-const routes = [{ path: "/", component: Home }];
-
-const router = createRouter({
-	history: createWebHashHistory(),
-	routes,
-});
-
-export default router;
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 9491fd5..23242d0 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,44 +1,6 @@
 :root {
-	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
-
-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-h1 {
-	font-size: 3.2em;
-	line-height: 1.1;
-}
-
-button {
-	border-radius: 8px;
-	border: 1px solid transparent;
-	padding: 0.6em 1.2em;
-	font-size: 1em;
-	font-weight: 500;
-	font-family: inherit;
-	background-color: #1a1a1a;
-	cursor: pointer;
-	transition: border-color 0.25s;
-}
-button:hover {
-	border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-	outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-	padding: 2em;
+	--primary-text-color: #ffffff;
+	--secondary-background-color: #669084;
 }
 
 #custom-ui-app {
@@ -49,15 +11,43 @@ button:focus-visible {
 	text-align: center;
 }
 
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
+.page-turn-button {
+	border-radius: 5px;
+	border: none;
+}
+
+.page-num-button {
+	border: none;
+	background-color: Transparent;
+}
+
+.interaction-button {
+	border: none;
+	border-radius: 5px;
+	/*background-color: mediumseagreen;*/
+	color: white;
+	background-color: rgb(69, 112, 101);
+}
+
+.interaction-button:hover {
+	background-color: rgb(82, 132, 119);
+}
+
+#client-content {
+	display: flex;
+	flex-direction: column;
+	width: 95%;
+	justify-content: center;
+}
+
+#filter-container {
+	display: flex;
+	flex-direction: row;
+	gap: 5px 5px;
+}
+
+#paging-controls {
+	display: flex;
+	justify-content: flex-end;
+	gap: 5px;
 }