From bb667b338a6ab02b779b77fa3db6a6214fba55ee Mon Sep 17 00:00:00 2001
From: smugg99 <dudak799@gmail.com>
Date: Sun, 3 Nov 2024 23:35:58 +0100
Subject: [PATCH] added rest of the pages, made room buttons scale better

---
 app/config.json                               |   6 +-
 .../components.d.ts                           |   8 +-
 .../package-lock.json                         |  32 +++
 .../package.json                              |   3 +
 .../src/components/DivisionButton.vue         |  95 +++++--
 .../src/components/RoomButton.vue             | 139 +++++++++++
 .../src/components/ScheduleTable.vue          |  85 ++++---
 .../src/components/TeacherButton.vue          | 139 +++++++++++
 .../src/components/pages/Division.vue         |   9 +-
 .../src/components/pages/Divisions.vue        | 119 ++++++---
 .../src/components/pages/Room.vue             |  69 ++++++
 .../src/components/pages/Rooms.vue            | 228 +++++++++++++++++
 .../src/components/pages/Teacher.vue          |  69 ++++++
 .../src/components/pages/Teachers.vue         | 232 ++++++++++++++++++
 .../src/locales/en.js                         |   6 +-
 .../src/locales/pl.js                         |   4 +
 .../src/router.ts                             |  10 +-
 17 files changed, 1151 insertions(+), 102 deletions(-)
 create mode 100644 web/optivum-better-schedule-frontend/src/components/RoomButton.vue
 create mode 100644 web/optivum-better-schedule-frontend/src/components/TeacherButton.vue
 create mode 100644 web/optivum-better-schedule-frontend/src/components/pages/Room.vue
 create mode 100644 web/optivum-better-schedule-frontend/src/components/pages/Rooms.vue
 create mode 100644 web/optivum-better-schedule-frontend/src/components/pages/Teacher.vue
 create mode 100644 web/optivum-better-schedule-frontend/src/components/pages/Teachers.vue

diff --git a/app/config.json b/app/config.json
index e220b29..26407b6 100644
--- a/app/config.json
+++ b/app/config.json
@@ -11,9 +11,9 @@
 		},
 		"quantities": {
 			"workers": {
-				"division": 10,
-				"teacher": 10,
-				"room": 10
+				"division": 5,
+				"teacher": 5,
+				"room": 5
 			}
 		}
 	},
diff --git a/web/optivum-better-schedule-frontend/components.d.ts b/web/optivum-better-schedule-frontend/components.d.ts
index 4d40b2e..8ed41af 100644
--- a/web/optivum-better-schedule-frontend/components.d.ts
+++ b/web/optivum-better-schedule-frontend/components.d.ts
@@ -11,7 +11,7 @@ declare module 'vue' {
     AppBar: typeof import('./src/components/AppBar.vue')['default']
     ClassesTab: typeof import('./src/components/ClassesTab.vue')['default']
     Clock: typeof import('./src/components/clock/Clock.vue')['default']
-    copy: typeof import('./src/components/ScheduleTable copy.vue')['default']
+    copy: typeof import('./src/components/TeacherButton copy.vue')['default']
     Digit: typeof import('./src/components/clock/Digit.vue')['default']
     Division: typeof import('./src/components/pages/Division.vue')['default']
     DivisionButton: typeof import('./src/components/DivisionButton.vue')['default']
@@ -26,12 +26,18 @@ declare module 'vue' {
     LanguageSwitcher: typeof import('./src/components/LanguageSwitcher.vue')['default']
     Overlay: typeof import('./src/components/Overlay.vue')['default']
     Rays: typeof import('./src/components/Rays.vue')['default']
+    Room: typeof import('./src/components/pages/Room.vue')['default']
+    RoomButton: typeof import('./src/components/RoomButton.vue')['default']
+    Rooms: typeof import('./src/components/pages/Rooms.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScheduleTable: typeof import('./src/components/ScheduleTable.vue')['default']
     Settings: typeof import('./src/components/pages/Settings.vue')['default']
     SettingsPage: typeof import('./src/components/pages/SettingsPage.vue')['default']
     TabContent: typeof import('./src/components/TabContent.vue')['default']
+    Teacher: typeof import('./src/components/pages/Teacher.vue')['default']
+    TeacherButton: typeof import('./src/components/TeacherButton.vue')['default']
+    Teachers: typeof import('./src/components/pages/Teachers.vue')['default']
     ThemeSwitcher: typeof import('./src/components/ThemeSwitcher.vue')['default']
     Weather: typeof import('./src/components/Weather.vue')['default']
   }
diff --git a/web/optivum-better-schedule-frontend/package-lock.json b/web/optivum-better-schedule-frontend/package-lock.json
index f666e37..bf3fa42 100644
--- a/web/optivum-better-schedule-frontend/package-lock.json
+++ b/web/optivum-better-schedule-frontend/package-lock.json
@@ -11,6 +11,8 @@
         "@mdi/font": "7.4.47",
         "axios": "^1.7.7",
         "iso-639-1": "^3.1.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
         "pinia": "^2.2.4",
         "roboto-fontface": "*",
         "three": "^0.169.0",
@@ -24,6 +26,7 @@
       },
       "devDependencies": {
         "@babel/types": "^7.24.7",
+        "@types/lodash-es": "^4.17.12",
         "@types/node": "^20.14.10",
         "@types/three": "^0.169.0",
         "@vitejs/plugin-vue": "^5.0.5",
@@ -800,6 +803,23 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
+      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.16.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.10.tgz",
@@ -1477,6 +1497,18 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
diff --git a/web/optivum-better-schedule-frontend/package.json b/web/optivum-better-schedule-frontend/package.json
index fdbaca0..cbd705f 100644
--- a/web/optivum-better-schedule-frontend/package.json
+++ b/web/optivum-better-schedule-frontend/package.json
@@ -10,6 +10,8 @@
     "@mdi/font": "7.4.47",
     "axios": "^1.7.7",
     "iso-639-1": "^3.1.3",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.2.4",
     "roboto-fontface": "*",
     "three": "^0.169.0",
@@ -23,6 +25,7 @@
   },
   "devDependencies": {
     "@babel/types": "^7.24.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.14.10",
     "@types/three": "^0.169.0",
     "@vitejs/plugin-vue": "^5.0.5",
diff --git a/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue b/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
index 68d95e2..3dfb39f 100644
--- a/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
+++ b/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
@@ -1,8 +1,12 @@
+<!-- DivisionButton.vue -->
 <template>
 	<div ref="tilt" class="tilt-wrapper">
-		<v-btn class="square-button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8"
+		<v-btn class="button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8"
 			variant="text" rounded="xl" :to="`/division/${props.id}`" nav link>
-			<span class="button-text">{{ props.text }}</span>
+			<div class="button-content">
+				<span class="full-name">{{ props.text }}</span>
+				<span class="designator">{{ props.designator }}</span>
+			</div>
 		</v-btn>
 	</div>
 </template>
@@ -23,17 +27,22 @@ interface VanillaTiltHTMLElement extends HTMLElement {
 	vanillaTilt: VanillaTilt;
 }
 
-const props = defineProps<{ text: string; index: number; id: number }>();
-const tilt = ref<VanillaTiltHTMLElement | null>(null);
+const props = defineProps<{
+	text: string;
+	designator: string;
+	index: number;
+	id: number;
+}>();
 
+const tilt = ref<VanillaTiltHTMLElement | null>(null);
 const enableTilt = ref(window.innerWidth > 700);
 
 watchEffect(() => {
 	if (enableTilt.value && tilt.value) {
 		VanillaTilt.init(tilt.value, {
-			max: 20,
-			speed: 10,
-			scale: 1.25,
+			max: 15,
+			speed: 400,
+			scale: 1.05,
 			glare: false,
 			reverse: false,
 			transition: true,
@@ -43,21 +52,21 @@ watchEffect(() => {
 	}
 });
 
-window.addEventListener('resize', () => {
+const resizeHandler = () => {
 	enableTilt.value = window.innerWidth > 700;
-});
+};
+
+window.addEventListener('resize', resizeHandler);
 
 onUnmounted(() => {
 	if (tilt.value?.vanillaTilt) {
 		tilt.value.vanillaTilt.destroy();
 	}
-	window.removeEventListener('resize', () => {
-		enableTilt.value = window.innerWidth > 700;
-	});
+	window.removeEventListener('resize', resizeHandler);
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .tilt-wrapper {
 	display: inline-block;
 	width: 100%;
@@ -65,25 +74,65 @@ onUnmounted(() => {
 	user-select: none;
 }
 
-.square-button {
-	z-index: 1;
+.button {
 	width: 100%;
 	height: 100%;
-	font-size: 2.5rem;
-	font-weight: 400;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	user-select: none;
+	text-align: center;
+	overflow: hidden;
+	padding: 1rem;
+	box-sizing: border-box;
 }
 
-.button-text {
-	user-select: none;
+.button-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	padding: 0.5rem;
+	box-sizing: border-box;
+}
+
+.full-name {
+	max-width: 90vw;
+	font-size: clamp(0.5rem, 1vw + 0.4rem, 0.8rem);
+	font-weight: 600;
+	text-align: center;
+	white-space: normal;
+	word-wrap: normal;
+	margin-bottom: 0.3rem;
 }
 
-@media (max-width: 1279) {
-	.square-button {
-		font-size: 2rem;
+.designator {
+	font-size: clamp(0.8rem, 1vw + 0.3rem, 1rem);
+	font-weight: 800;
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+@media (max-width: 767px) {
+	.button {
+		padding: 0.8rem;
+	}
+
+	.button-content {
+		padding: 0.4rem;
+	}
+
+	.full-name {
+		font-size: 0.9rem;
+		font-weight: 800;
+	}
+
+	.designator {
+		font-size: 0.9rem;
+		font-weight: 600;
 	}
 }
 </style>
diff --git a/web/optivum-better-schedule-frontend/src/components/RoomButton.vue b/web/optivum-better-schedule-frontend/src/components/RoomButton.vue
new file mode 100644
index 0000000..513cdd5
--- /dev/null
+++ b/web/optivum-better-schedule-frontend/src/components/RoomButton.vue
@@ -0,0 +1,139 @@
+<template>
+	<div ref="tilt" class="tilt-wrapper">
+		<v-btn class="button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8"
+			variant="text" rounded="xl" :to="`/room/${props.id}`" nav link>
+			<div class="button-content">
+				<span :class="['full-name', fontSizeClass]">{{ props.text }}</span>
+			</div>
+		</v-btn>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted, watchEffect, computed } from 'vue';
+import VanillaTilt from 'vanilla-tilt';
+import { useTheme } from 'vuetify';
+
+const theme = useTheme();
+
+const getButtonColor = (index: number) => {
+	const colors = theme.current.value.colors;
+	return index % 2 === 0 ? colors.primaryMuted : colors.secondaryMuted;
+};
+
+interface VanillaTiltHTMLElement extends HTMLElement {
+	vanillaTilt: VanillaTilt;
+}
+
+const props = defineProps<{
+	text: string;
+	designator: string;
+	index: number;
+	id: number;
+}>();
+
+const tilt = ref<VanillaTiltHTMLElement | null>(null);
+const enableTilt = ref(window.innerWidth > 700);
+
+watchEffect(() => {
+	if (enableTilt.value && tilt.value) {
+		VanillaTilt.init(tilt.value, {
+			max: 15,
+			speed: 400,
+			scale: 1.05,
+			glare: false,
+			reverse: false,
+			transition: true,
+		});
+	} else if (tilt.value?.vanillaTilt) {
+		tilt.value.vanillaTilt.destroy();
+	}
+});
+
+const resizeHandler = () => {
+	enableTilt.value = window.innerWidth > 700;
+};
+
+window.addEventListener('resize', resizeHandler);
+
+onUnmounted(() => {
+	if (tilt.value?.vanillaTilt) {
+		tilt.value.vanillaTilt.destroy();
+	}
+	window.removeEventListener('resize', resizeHandler);
+});
+
+// Compute a class based on text length
+const fontSizeClass = computed(() => {
+	if (props.text.length <= 5) return 'font-large';
+	if (props.text.length <= 10) return 'font-medium';
+	return 'font-small';
+});
+</script>
+
+<style scoped>
+.tilt-wrapper {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	user-select: none;
+}
+
+.button {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	overflow: hidden;
+	padding: 1rem;
+	box-sizing: border-box;
+}
+
+.button-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.full-name {
+	width: 90%;
+	height: 90%;
+	font-weight: 800;
+	text-align: center;
+	white-space: normal;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.font-large {
+	font-size: 1.5rem;
+	font-weight: 800;
+}
+
+.font-medium {
+	font-size: 1.2rem;
+	font-weight: 800;
+}
+
+.font-small {
+	font-size: 1rem;
+	font-weight: 800;
+}
+
+@media (max-width: 767px) {
+	.button {
+		padding: 0.8rem;
+	}
+
+	.button-content {
+		padding: 0.4rem;
+	}
+}
+</style>
diff --git a/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue b/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue
index 4a6c664..5a87a78 100644
--- a/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue
+++ b/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue
@@ -20,14 +20,15 @@
 							</v-tab>
 						</v-tabs>
 					</v-card>
-					<v-tabs-items v-model="activeTab">
-						<v-tab-item v-for="(day, dayIndex) in scheduleData?.schedule.schedule_days" :key="dayIndex">
-							<v-table class="schedule-table" v-if="activeTab === dayIndex">
+					<v-window v-model="activeTab" touch :show-arrows="false">
+						<v-window-item v-for="(day, dayIndex) in scheduleData?.schedule.schedule_days" :key="dayIndex">
+							<v-table class="schedule-table" v-if="day.lesson_groups && day.lesson_groups.length > 0">
 								<tbody>
 									<tr v-for="(lessonGroup, groupIndex) in day.lesson_groups" :key="groupIndex"
 										:style="{ backgroundColor: getRowColor(groupIndex) }">
-										<td class="narrower-column"><span class="schedule-no">{{ groupIndex + 1
-												}}.</span></td>
+										<td class="narrower-column">
+											<span class="schedule-no">{{ groupIndex + 1 }}.</span>
+										</td>
 										<td class="narrow-column">
 											<div class="stacked-time">
 												<span class="schedule-time">{{
@@ -36,39 +37,40 @@
 													formatTime(lessonGroup.lessons[0]?.time_range.end) }}</span>
 											</div>
 										</td>
-
 										<td class="schedule-table-data pa-0">
 											<div v-for="lesson in lessonGroup.lessons" :key="lesson.full_name"
 												class="stacked-lesson">
-												<span class="schedule-lesson-name">{{ lesson.full_name }}</span>&nbsp;
-
+												<span class="schedule-lesson-name">{{ lesson.full_name }}</span>
+												&nbsp;
 												<router-link
 													v-if="lesson.teacher_designator && teacherIndexes[lesson.teacher_designator] !== undefined"
 													:to="'/teacher/' + teacherIndexes[lesson.teacher_designator]"
 													class="schedule-lesson-teacher">
-													&nbsp;{{ lesson.teacher_designator }}
+													{{ lesson.teacher_designator }}
 												</router-link>
-
+												&nbsp;
 												<router-link
 													v-if="lesson.room_designator && roomIndexes[lesson.room_designator] !== undefined"
 													:to="'/room/' + roomIndexes[lesson.room_designator]"
 													class="schedule-lesson-room">
-													&nbsp;{{ lesson.room_designator }}
+													{{ lesson.room_designator }}
 												</router-link>
-
+												&nbsp;
 												<router-link
 													v-if="lesson.division_designator && divisionIndexes[lesson.division_designator] !== undefined"
 													:to="'/division/' + divisionIndexes[lesson.division_designator]"
 													class="schedule-lesson-division">
-													&nbsp;{{ lesson.division_designator }}
+													{{ lesson.division_designator }}
 												</router-link>
 											</div>
 										</td>
 									</tr>
 								</tbody>
 							</v-table>
-						</v-tab-item>
-					</v-tabs-items>
+							<v-empty-state v-else icon="mdi-calendar-remove" class="no-schedule"
+								:title="t('page.no_schedule')" />
+						</v-window-item>
+					</v-window>
 				</template>
 
 				<!-- Desktop View -->
@@ -96,7 +98,7 @@
 								<td v-for="(day, dayIndex) in scheduleData?.schedule.schedule_days" :key="dayIndex"
 									class="schedule-table-data">
 									<div
-										v-if="day.lesson_groups.some((lg: LessonGroup) => formatTime(lg.lessons[0]?.time_range.start) + ' - ' + formatTime(lg.lessons[0]?.time_range.end) === timeRange)">
+										v-if="day.lesson_groups && day.lesson_groups.some((lg: LessonGroup) => formatTime(lg.lessons[0]?.time_range.start) + ' - ' + formatTime(lg.lessons[0]?.time_range.end) === timeRange)">
 										<div v-for="lesson in day.lesson_groups.find((lg: LessonGroup) => formatTime(lg.lessons[0]?.time_range.start) + ' - ' + formatTime(lg.lessons[0]?.time_range.end) === timeRange)?.lessons"
 											:key="lesson.full_name" class="stacked-lesson">
 											<span class="schedule-lesson-name">{{ lesson.full_name }}</span>
@@ -126,12 +128,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, defineProps } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import { useTheme } from 'vuetify';
+import { useRoute } from 'vue-router';
 
-const props = defineProps<{ index: number; type: 'teacher' | 'room' | 'division' }>();
+const route = useRoute();
+const id = Number(route.params.id);
+const props = defineProps<{ type: 'teacher' | 'room' | 'division' }>();
 
 interface TimeRange {
 	hour?: number;
@@ -154,7 +159,7 @@ interface LessonGroup {
 }
 
 interface ScheduleDay {
-	lesson_groups: LessonGroup[];
+	lesson_groups?: LessonGroup[];
 }
 
 interface Schedule {
@@ -197,7 +202,7 @@ const getRowColor = (rowIndex: number) => {
 
 const fetchData = async () => {
 	try {
-		const scheduleResponse = await axios.get(`/api/v1/${props.type}/${props.index}`);
+		const scheduleResponse = await axios.get(`/api/v1/${props.type}/${id}`);
 		if (scheduleResponse.status === 404) {
 			notFound.value = true;
 			return;
@@ -238,13 +243,15 @@ onMounted(fetchData);
 const uniqueTimeRanges = computed(() => {
 	const timeSet = new Set<string>();
 	scheduleData.value?.schedule.schedule_days.forEach((day) => {
-		day.lesson_groups.forEach((lessonGroup) => {
-			const timeRange = lessonGroup.lessons[0]?.time_range;
-			if (timeRange) {
-				const formattedTimeRange = `${formatTime(timeRange.start)} - ${formatTime(timeRange.end)}`;
-				timeSet.add(formattedTimeRange);
-			}
-		});
+		if (Array.isArray(day.lesson_groups)) {
+			day.lesson_groups.forEach((lessonGroup) => {
+				const timeRange = lessonGroup.lessons[0]?.time_range;
+				if (timeRange) {
+					const formattedTimeRange = `${formatTime(timeRange.start)} - ${formatTime(timeRange.end)}`;
+					timeSet.add(formattedTimeRange);
+				}
+			});
+		}
 	});
 	return Array.from(timeSet).sort();
 });
@@ -306,10 +313,12 @@ function formatTime(time: TimeRange | undefined): string {
 .v-table td,
 .v-table th {
 	padding: 4px !important;
+	user-select: none;
 }
 
 .schedule-table th,
 .schedule-table td {
+	user-select: none;
 	text-align: left;
 	overflow-wrap: break-word;
 	word-break: break-word;
@@ -337,6 +346,7 @@ function formatTime(time: TimeRange | undefined): string {
 	width: 100%;
 	text-transform: uppercase;
 	letter-spacing: 0.2em;
+	user-select: none;
 }
 
 .schedule-no,
@@ -386,22 +396,23 @@ schedule-table td.schedule-table-data {
 
 @media (max-width: 895px) {
 	.schedule-title-container {
-        max-width: 90vw;
-        margin: 0 auto;
-        height: 64px;
-        position: absolute;
-        top: 16px;
-        right: 16px;
-    }
+		max-width: 60vw;
+		margin: 0 auto;
+		height: 64px;
+		position: absolute;
+		top: 16px;
+		right: 16px;
+	}
 
 	.schedule-title {
-		font-size: clamp(0.5rem, 4.5vw, 3.5rem);
+		font-size: clamp(0.8rem, 3vw, 3.5rem);
 		font-weight: 800;
 		text-align: right;
 		max-width: 100%;
 		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		white-space: nowrap;
+		letter-spacing: clamp(0.1em, 0.15em, 0.2em);
+
+		text-wrap: wrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
diff --git a/web/optivum-better-schedule-frontend/src/components/TeacherButton.vue b/web/optivum-better-schedule-frontend/src/components/TeacherButton.vue
new file mode 100644
index 0000000..b46c31a
--- /dev/null
+++ b/web/optivum-better-schedule-frontend/src/components/TeacherButton.vue
@@ -0,0 +1,139 @@
+<!-- TeacherButton.vue -->
+<template>
+	<div ref="tilt" class="tilt-wrapper">
+		<v-btn class="button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8"
+			variant="text" rounded="xl" :to="`/teacher/${props.id}`" nav link>
+			<div class="button-content">
+				<span class="full-name">{{ props.text }}</span>
+				<span class="designator">{{ props.designator }}</span>
+			</div>
+		</v-btn>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted, watchEffect } from 'vue';
+import VanillaTilt from 'vanilla-tilt';
+import { useTheme } from 'vuetify';
+
+const theme = useTheme();
+
+const getButtonColor = (index: number) => {
+	const colors = theme.current.value.colors;
+	return index % 2 === 0 ? colors.primaryMuted : colors.secondaryMuted;
+};
+
+interface VanillaTiltHTMLElement extends HTMLElement {
+	vanillaTilt: VanillaTilt;
+}
+
+const props = defineProps<{
+	text: string;
+	designator: string;
+	index: number;
+	id: number;
+}>();
+
+const tilt = ref<VanillaTiltHTMLElement | null>(null);
+const enableTilt = ref(window.innerWidth > 700);
+
+watchEffect(() => {
+	if (enableTilt.value && tilt.value) {
+		VanillaTilt.init(tilt.value, {
+			max: 15,
+			speed: 400,
+			scale: 1.05,
+			glare: false,
+			reverse: false,
+			transition: true,
+		});
+	} else if (tilt.value?.vanillaTilt) {
+		tilt.value.vanillaTilt.destroy();
+	}
+});
+
+const resizeHandler = () => {
+	enableTilt.value = window.innerWidth > 700;
+};
+
+window.addEventListener('resize', resizeHandler);
+
+onUnmounted(() => {
+	if (tilt.value?.vanillaTilt) {
+		tilt.value.vanillaTilt.destroy();
+	}
+	window.removeEventListener('resize', resizeHandler);
+});
+</script>
+
+<style scoped>
+.tilt-wrapper {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	user-select: none;
+}
+
+.button {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	overflow: hidden;
+	padding: 1rem;
+	box-sizing: border-box;
+}
+
+.button-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	padding: 0.5rem;
+	box-sizing: border-box;
+}
+
+.full-name {
+	font-size: clamp(0.5rem, 1vw + 0.4rem, 0.8rem);
+	font-weight: 600;
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-bottom: 0.3rem;
+}
+
+.designator {
+	font-size: clamp(0.8rem, 1vw + 0.3rem, 1rem);
+	font-weight: 800;
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+@media (max-width: 767px) {
+	.button {
+		padding: 0.8rem;
+	}
+
+	.button-content {
+		padding: 0.4rem;
+	}
+
+	.full-name {
+		font-size: 0.9rem;
+		font-weight: 800;
+		white-space: normal;
+	}
+
+	.designator {
+		font-size: 0.9rem;
+		font-weight: 600;
+	}
+}
+</style>
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Division.vue b/web/optivum-better-schedule-frontend/src/components/pages/Division.vue
index 07d1a16..180ff34 100644
--- a/web/optivum-better-schedule-frontend/src/components/pages/Division.vue
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Division.vue
@@ -9,19 +9,16 @@
 			</div>
 		</v-slide-y-reverse-transition>
 	</div> -->
-	<ScheduleTable class="grid-item" :index="id" :type="type" />
+	<ScheduleTable :type="type" />
 </template>
 
 <script setup lang="ts">
 import ScheduleTable from '../ScheduleTable.vue';
-import { useRoute } from 'vue-router';
 
-const route = useRoute();
-const id = Number(route.params.id);
 const type = "division";
 </script>
 
-<style scoped>
+<!-- <style scoped>
 .grid-container {
 	display: grid;
 	grid-template-rows: 1fr;
@@ -70,4 +67,4 @@ const type = "division";
 		padding-top: 0;
 	}
 }
-</style>
+</style> -->
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue b/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue
index 4d25456..cbacc97 100644
--- a/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue
@@ -1,33 +1,49 @@
+<!-- DivisionsPage.vue -->
 <template>
 	<v-slide-y-transition appear>
 		<v-card class="search-container pa-0" elevation="8" rounded="pill">
 			<v-text-field v-model="search" class="search" :label="t('search.division')" prepend-inner-icon="mdi-magnify"
-				variant="solo" rounded="pill" hide-details="auto" />
+				variant="solo" rounded="pill" hide-details="auto" @input="debouncedSearch" />
 		</v-card>
 	</v-slide-y-transition>
+
 	<v-slide-y-reverse-transition appear>
 		<v-container class="scrollable-grid pa-0">
 			<v-container class="divisions-grid pa-0">
-				<v-col v-for="(designator, index) in filteredDivisions" :key="index" class="grid-item pa-0">
-					<DivisionButton :text="designator.text" :index="index" :id="designator.id" />
+				<v-col v-for="(division, index) in filteredDivisions" :key="division.id" class="grid-item pa-0">
+					<DivisionButton :text="division.full_name" :designator="division.designator" :index="index"
+						:id="division.id" />
 				</v-col>
 			</v-container>
+			<v-empty-state v-if="!loading && filteredDivisions.length === 0" icon="mdi-magnify-remove-outline"
+				class="no-divisions" :title="t('page.no_divisions')" />
 		</v-container>
 	</v-slide-y-reverse-transition>
+
+	<div v-if="loading" class="loading">
+		<v-progress-circular indeterminate color="primary"></v-progress-circular>
+	</div>
+
+	<div v-if="error" class="error">
+		{{ error }}
+	</div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
+import { debounce } from 'lodash-es';
+import DivisionButton from '../DivisionButton.vue'
 
 interface Division {
-	text: string;
+	designator: string;
 	id: number;
 	full_name: string;
 }
 
 const { t } = useI18n();
+
 const search = ref('');
 const divisions = ref<Division[]>([]);
 const loading = ref(false);
@@ -40,11 +56,16 @@ const fetchDivisions = async () => {
 		const designators = response.data.designators;
 		const fullNames = response.data.full_names;
 
-		divisions.value = Object.keys(designators).map((key) => ({
-			text: key,
-			id: designators[key],
-			full_name: Object.keys(fullNames).find((name) => fullNames[name] === designators[key]) || '',
-		}));
+		divisions.value = Object.keys(designators).map((designator) => {
+			const id = designators[designator];
+			const full_name = Object.keys(fullNames).find((name) => fullNames[name] === id) || '';
+
+			return {
+				designator,
+				id,
+				full_name,
+			};
+		});
 	} catch (err) {
 		console.error('Error fetching divisions:', err);
 		error.value = 'Failed to fetch division data.';
@@ -53,16 +74,18 @@ const fetchDivisions = async () => {
 	}
 };
 
-onMounted(fetchDivisions);
+const debouncedSearch = debounce(() => { }, 100);
 
 const filteredDivisions = computed(() => {
-	const searchValue = search.value.toLowerCase().replace(/\s+/g, '');
+	const searchValue = search.value.toLowerCase().trim();
 	return divisions.value.filter(
 		(division) =>
-			division.text.toLowerCase().includes(searchValue) ||
-			division.full_name.toLowerCase().replace(/\s+/g, '').includes(searchValue)
+			division.designator.toLowerCase().includes(searchValue) ||
+			division.full_name.toLowerCase().includes(searchValue)
 	);
 });
+
+onMounted(fetchDivisions);
 </script>
 
 <style scoped lang="scss">
@@ -106,29 +129,50 @@ const filteredDivisions = computed(() => {
 	overflow-y: auto;
 	background-color: rgb(var(--v-theme-background));
 	margin-bottom: 0;
+	overflow: visible;
 }
 
 .divisions-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
-	column-gap: 2rem;
+	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	column-gap: clamp(0rem, 2vw, 1rem);
 	row-gap: 2rem;
-	justify-content: center;
+	justify-content: space-evenly;
 	background-color: rgb(var(--v-theme-background));
-	padding: 1.5rem;
-	margin: 2rem 2rem 2rem;
+	margin: 1rem 1rem 1rem;
+	margin-top: 0;
 	width: auto;
 	height: auto;
+	overflow: visible;
 }
 
 .grid-item {
-	width: 7rem;
+	width: 12rem;
 	height: 7rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: visible;
+}
+
+.loading,
+.error {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	aspect-ratio: 1 / 1;
-	background-color: transparent;
+	padding: 1rem;
+}
+
+.no-divisions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+}
+
+.no-divisions v-icon {
+	margin-bottom: 8px;
 }
 
 @media (max-width: 1279px) {
@@ -152,15 +196,32 @@ const filteredDivisions = computed(() => {
 	}
 
 	.divisions-grid {
-		grid-template-columns: repeat(auto-fill, minmax(7rem, 1rem));
-		gap: 2rem;
-		padding: 1rem;
-		margin: 2rem 2rem 2rem;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+		row-gap: 0rem;
+		justify-content: center;
+		padding: 1.5rem;
+		margin: 0 1rem;
+		width: auto;
+		max-width: 100%;
 	}
-	
+
 	.grid-item {
-		width: 7rem;
-		height: 7rem;
+		width: 100%;
+		aspect-ratio: 2 / 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		padding: 0.5rem;
+		margin: 16px 0 16px 0;
+		box-sizing: border-box;
+	}
+}
+
+@media (max-width: 767px) {
+	.divisions-grid {
+		grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Room.vue b/web/optivum-better-schedule-frontend/src/components/pages/Room.vue
new file mode 100644
index 0000000..fe65a99
--- /dev/null
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Room.vue
@@ -0,0 +1,69 @@
+<!-- Home.vue -->
+<template>
+	<!-- <div class="fill-height fill-width pa-0">
+		<v-slide-y-reverse-transition appear>
+			<div class="grid-container pa-0 fill-height">
+				<v-row class="room-grid" align="center" justify="center">
+					<ScheduleTable class="grid-item" :index="id" :type="type" />
+				</v-row>
+			</div>
+		</v-slide-y-reverse-transition>
+	</div> -->
+	<ScheduleTable :type="type" />
+</template>
+
+<script setup lang="ts">
+import ScheduleTable from '../ScheduleTable.vue';
+const type = "room";
+</script>
+
+<!-- <style scoped>
+.grid-container {
+	display: grid;
+	grid-template-rows: 1fr;
+	align-items: center;
+	justify-items: center;
+	padding: 0;
+	height: 100vh;
+}
+
+.room-grid {
+	display: grid;
+	grid-template-rows: auto;
+	width: 100%;
+	align-items: center;
+	justify-items: center;
+	gap: 0;
+	padding: 0;
+	margin: 0;
+	height: 100%;
+}
+
+.grid-item {
+	max-width: 100%;
+	padding: 0;
+}
+
+@media (max-width: 1279px) {
+	.grid-container {
+		align-items: start;
+		justify-items: stretch;
+		height: auto;
+		min-height: 100vh;
+	}
+
+	.division-grid {
+		align-items: start;
+		justify-items: start;
+		grid-template-rows: auto;
+		width: 100%;
+		height: auto;
+	}
+
+	.grid-item {
+		align-self: start;
+		width: 100%;
+		padding-top: 0;
+	}
+}
+</style> -->
\ No newline at end of file
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Rooms.vue b/web/optivum-better-schedule-frontend/src/components/pages/Rooms.vue
new file mode 100644
index 0000000..c3eaf80
--- /dev/null
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Rooms.vue
@@ -0,0 +1,228 @@
+<template>
+	<v-slide-y-transition appear>
+		<v-card class="search-container pa-0" elevation="8" rounded="pill">
+			<v-text-field v-model="search" class="search" :label="t('search.room')" prepend-inner-icon="mdi-magnify"
+				variant="solo" rounded="pill" hide-details="auto" @input="debouncedSearch" />
+		</v-card>
+	</v-slide-y-transition>
+
+	<v-slide-y-reverse-transition appear>
+		<v-container class="scrollable-grid pa-0">
+			<v-container class="rooms-grid pa-0">
+				<v-col v-for="(room, index) in filteredRooms" :key="room.id" class="grid-item pa-0">
+					<RoomButton :text="room.full_name" :designator="room.designator" :index="index" :id="room.id" />
+				</v-col>
+			</v-container>
+			<v-empty-state v-if="!loading && filteredRooms.length === 0" icon="mdi-magnify-remove-outline"
+				class="no-rooms" :title="t('page.no_rooms')" />
+		</v-container>
+	</v-slide-y-reverse-transition>
+
+	<div v-if="loading" class="loading">
+		<v-progress-circular indeterminate color="primary"></v-progress-circular>
+	</div>
+
+	<div v-if="error" class="error">
+		{{ error }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import axios from 'axios';
+import { useI18n } from 'vue-i18n';
+import { debounce } from 'lodash-es';
+import RoomButton from '../RoomButton.vue'
+
+interface Room {
+	designator: string;
+	id: number;
+	full_name: string;
+}
+
+const { t } = useI18n();
+
+const search = ref('');
+const rooms = ref<Room[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const fetchRooms = async () => {
+	loading.value = true;
+	try {
+		const response = await axios.get('/api/v1/rooms');
+		const designators = response.data.designators;
+		const fullNames = response.data.full_names;
+
+		rooms.value = Object.keys(designators).map((designator) => {
+			const id = designators[designator];
+			const designatorKey = Object.keys(designators).find(key => designators[key] === id);
+			const full_name = Object.keys(fullNames).find((name) => fullNames[name] === id) || '';
+			const display_name = designatorKey && designatorKey !== full_name ? `${full_name} (${designatorKey})` : full_name;
+
+			return {
+				designator,
+				id,
+				full_name: display_name,
+			};
+		});
+	} catch (err) {
+		console.error('Error fetching rooms:', err);
+		error.value = 'Failed to fetch room data.';
+	} finally {
+		loading.value = false;
+	}
+};
+
+const debouncedSearch = debounce(() => { }, 100);
+
+const filteredRooms = computed(() => {
+	const searchValue = search.value.toLowerCase().trim();
+	return rooms.value.filter(
+		(room) =>
+			room.designator.toLowerCase().includes(searchValue) ||
+			room.full_name.toLowerCase().includes(searchValue)
+	);
+});
+
+onMounted(fetchRooms);
+</script>
+
+<style scoped lang="scss">
+.main-container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	background-color: rgb(var(--v-theme-background));
+	overflow: visible;
+}
+
+:deep(.search .v-field--variant-solo) {
+	box-shadow: none !important;
+	border-color: transparent !important;
+}
+
+.search-container {
+	width: 30%;
+	height: 64px;
+	margin: 16px auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 10;
+	position: sticky;
+	top: 16px;
+	padding: 0 1rem;
+}
+
+.search {
+	width: 100%;
+}
+
+.v-card {
+	overflow: visible;
+}
+
+.scrollable-grid {
+	width: auto;
+	height: auto;
+	overflow-y: auto;
+	background-color: rgb(var(--v-theme-background));
+	margin-bottom: 0;
+	overflow: visible;
+}
+
+.rooms-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	column-gap: clamp(0rem, 2vw, 1rem);
+	row-gap: 2rem;
+	justify-content: space-evenly;
+	background-color: rgb(var(--v-theme-background));
+	margin: 1rem 1rem 1rem;
+	margin-top: 0;
+	width: auto;
+	height: auto;
+	overflow: visible;
+}
+
+.grid-item {
+	width: 12rem;
+	height: 7rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: visible;
+}
+
+.loading,
+.error {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 1rem;
+}
+
+.no-rooms {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+	color: rgba(0, 0, 0, 0.6);
+}
+
+.no-rooms v-icon {
+	margin-bottom: 8px;
+}
+
+@media (max-width: 1279px) {
+	.search-container {
+		width: calc(75% - 32px);
+		max-width: 50vw;
+		margin: 0px 0px 0 auto;
+		height: 64px;
+		padding: 0;
+		justify-content: flex-end;
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+	}
+
+	.scrollable-grid {
+		margin-top: calc(64px + 16px);
+	}
+
+	.rooms-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+		row-gap: 0rem;
+		justify-content: center;
+		padding: 1.5rem;
+		margin: 0 1rem;
+		width: auto;
+		max-width: 100%;
+	}
+
+	.grid-item {
+		width: 100%;
+		aspect-ratio: 2 / 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		padding: 0.5rem;
+		margin: 16px 0 16px 0;
+		box-sizing: border-box;
+	}
+}
+
+@media (max-width: 767px) {
+	.rooms-grid {
+		grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
+	}
+}
+</style>
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Teacher.vue b/web/optivum-better-schedule-frontend/src/components/pages/Teacher.vue
new file mode 100644
index 0000000..11f35f7
--- /dev/null
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Teacher.vue
@@ -0,0 +1,69 @@
+<!-- Home.vue -->
+<template>
+	<!-- <div class="fill-height fill-width pa-0">
+		<v-slide-y-reverse-transition appear>
+			<div class="grid-container pa-0 fill-height">
+				<v-row class="teacher-grid" align="center" justify="center">
+					<ScheduleTable class="grid-item" :index="id" :type="type" />
+				</v-row>
+			</div>
+		</v-slide-y-reverse-transition>
+	</div> -->
+	<ScheduleTable :type="type" />
+</template>
+
+<script setup lang="ts">
+import ScheduleTable from '../ScheduleTable.vue';
+const type = "teacher";
+</script>
+
+<!-- <style scoped>
+.grid-container {
+	display: grid;
+	grid-template-rows: 1fr;
+	align-items: center;
+	justify-items: center;
+	padding: 0;
+	height: 100vh;
+}
+
+.teacher-grid {
+	display: grid;
+	grid-template-rows: auto;
+	width: 100%;
+	align-items: center;
+	justify-items: center;
+	gap: 0;
+	padding: 0;
+	margin: 0;
+	height: 100%;
+}
+
+.grid-item {
+	max-width: 100%;
+	padding: 0;
+}
+
+@media (max-width: 1279px) {
+	.grid-container {
+		align-items: start;
+		justify-items: stretch;
+		height: auto;
+		min-height: 100vh;
+	}
+
+	.division-grid {
+		align-items: start;
+		justify-items: start;
+		grid-template-rows: auto;
+		width: 100%;
+		height: auto;
+	}
+
+	.grid-item {
+		align-self: start;
+		width: 100%;
+		padding-top: 0;
+	}
+}
+</style> -->
\ No newline at end of file
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Teachers.vue b/web/optivum-better-schedule-frontend/src/components/pages/Teachers.vue
new file mode 100644
index 0000000..d97043e
--- /dev/null
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Teachers.vue
@@ -0,0 +1,232 @@
+<!-- TeachersPage.vue -->
+<template>
+	<v-slide-y-transition appear>
+		<v-card class="search-container pa-0" elevation="8" rounded="pill">
+			<v-text-field v-model="search" class="search" :label="t('search.teacher')" prepend-inner-icon="mdi-magnify"
+				variant="solo" rounded="pill" hide-details="auto" @input="debouncedSearch" />
+		</v-card>
+	</v-slide-y-transition>
+
+	<v-slide-y-reverse-transition appear>
+		<v-container class="scrollable-grid pa-0">
+			<v-container class="teachers-grid pa-0">
+				<v-col v-for="(teacher, index) in filteredTeachers" :key="teacher.id" class="grid-item pa-0">
+					<TeacherButton :text="teacher.full_name" :designator="teacher.designator" :index="index"
+						:id="teacher.id" />
+				</v-col>
+			</v-container>
+			<v-empty-state v-if="!loading && filteredTeachers.length === 0" icon="mdi-magnify-remove-outline"
+				class="no-teachers" :title="t('page.no_teachers')" />
+		</v-container>
+	</v-slide-y-reverse-transition>
+
+	<div v-if="loading" class="loading">
+		<v-progress-circular indeterminate color="primary"></v-progress-circular>
+	</div>
+
+	<div v-if="error" class="error">
+		{{ error }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import axios from 'axios';
+import { useI18n } from 'vue-i18n';
+import { debounce } from 'lodash-es';
+import TeacherButton from '@/components/TeacherButton.vue'; // Adjust the path as necessary
+
+interface Teacher {
+	designator: string;
+	id: number;
+	full_name: string;
+}
+
+const { t } = useI18n();
+
+const search = ref('');
+const teachers = ref<Teacher[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const fetchTeachers = async () => {
+	loading.value = true;
+	try {
+		const response = await axios.get('/api/v1/teachers');
+		const designators = response.data.designators;
+		const fullNames = response.data.full_names;
+
+		teachers.value = Object.keys(designators).map((designator) => {
+			const id = designators[designator];
+			var full_name = Object.keys(fullNames).find((name) => fullNames[name] === id) || '';
+
+			// Temporary fix for missing teacher names due to duplicate full names
+			if (id === 13) {
+				full_name = 'M.Bochniarz';
+			}
+
+			return {
+				designator,
+				id,
+				full_name,
+			};
+		});
+	} catch (err) {
+		console.error('Error fetching teachers:', err);
+	} finally {
+		loading.value = false;
+	}
+};
+
+const debouncedSearch = debounce(() => {}, 100);
+
+const filteredTeachers = computed(() => {
+	const searchValue = search.value.toLowerCase().trim();
+	return teachers.value.filter(
+		(teacher) =>
+			teacher.designator.toLowerCase().includes(searchValue) ||
+			teacher.full_name.toLowerCase().includes(searchValue)
+	);
+});
+
+onMounted(fetchTeachers);
+</script>
+
+<style scoped lang="scss">
+.main-container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	background-color: rgb(var(--v-theme-background));
+	overflow: visible;
+}
+
+:deep(.search .v-field--variant-solo) {
+	box-shadow: none !important;
+	border-color: transparent !important;
+}
+
+.search-container {
+	width: 30%;
+	height: 64px;
+	margin: 16px auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 10;
+	position: sticky;
+	top: 16px;
+	padding: 0 1rem;
+}
+
+.search {
+	width: 100%;
+}
+
+.v-card {
+	overflow: visible;
+}
+
+.scrollable-grid {
+	width: auto;
+	height: auto;
+	overflow-y: auto;
+	background-color: rgb(var(--v-theme-background));
+	margin-bottom: 0;
+	overflow: visible;
+}
+
+.teachers-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	column-gap: clamp(0rem, 2vw, 1rem);
+	row-gap: 2rem;
+	justify-content: space-evenly;
+	background-color: rgb(var(--v-theme-background));
+	margin: 1rem 1rem 1rem;
+	margin-top: 0;
+	width: auto;
+	height: auto;
+	overflow: visible;
+}
+
+.grid-item {
+	width: 12rem;
+	height: 7rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: visible;
+}
+
+.loading,
+.error {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 1rem;
+}
+
+.no-results {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+	color: rgba(0, 0, 0, 0.6);
+}
+
+.no-results v-icon {
+	margin-bottom: 8px;
+}
+
+@media (max-width: 1279px) {
+	.search-container {
+		width: calc(75% - 32px);
+		max-width: 50vw;
+		margin: 0px 0px 0 auto;
+		height: 64px;
+		padding: 0;
+		justify-content: flex-end;
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+	}
+
+	.scrollable-grid {
+		margin-top: calc(64px + 16px);
+	}
+
+	.teachers-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+		row-gap: 0rem;
+		justify-content: center;
+		padding: 1.5rem;
+		margin: 0 1rem;
+		width: auto;
+		max-width: 100%;
+	}
+
+	.grid-item {
+		width: 100%;
+		aspect-ratio: 2 / 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		padding: 0.5rem;
+		margin: 16px 0 16px 0;
+		box-sizing: border-box;
+	}
+}
+
+@media (max-width: 767px) {
+	.teachers-grid {
+		grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
+	}
+}
+</style>
diff --git a/web/optivum-better-schedule-frontend/src/locales/en.js b/web/optivum-better-schedule-frontend/src/locales/en.js
index f7079df..5f02a85 100644
--- a/web/optivum-better-schedule-frontend/src/locales/en.js
+++ b/web/optivum-better-schedule-frontend/src/locales/en.js
@@ -101,7 +101,11 @@ export default {
 	},
 	page: {
 		title: 'Optivum - Better Schedule',
-		not_found: 'Page Not Found',
+		not_found: 'Page not found',
+		no_schedule: 'No schedule for this day',
+		no_divisions: 'No divisions found',
+		no_teachers: 'No teachers found',
+		no_rooms: 'No classrooms found',
 		home: 'Home',
 		divisions: 'Divisions',
 		division: 'Division - {id}',
diff --git a/web/optivum-better-schedule-frontend/src/locales/pl.js b/web/optivum-better-schedule-frontend/src/locales/pl.js
index 3508360..ae1d583 100644
--- a/web/optivum-better-schedule-frontend/src/locales/pl.js
+++ b/web/optivum-better-schedule-frontend/src/locales/pl.js
@@ -102,6 +102,10 @@ export default {
 	page: {
 		title: 'Optivum - Lepszy Plan Lekcji',
 		not_found: 'Nie znaleziono strony',
+		no_schedule: 'Brak planu na ten dzień',
+		no_divisions: 'Nie znaleziono klas',
+		no_teachers: 'Nie znaleziono nauczycieli',
+		no_rooms: 'Nie znaleziono sali',
 		home: 'Strona główna',
 		divisions: 'Klasy',
 		division: 'Klasa - {id}',
diff --git a/web/optivum-better-schedule-frontend/src/router.ts b/web/optivum-better-schedule-frontend/src/router.ts
index d8d20ac..3d21b2e 100644
--- a/web/optivum-better-schedule-frontend/src/router.ts
+++ b/web/optivum-better-schedule-frontend/src/router.ts
@@ -1,19 +1,25 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import MainPage from './components/pages/Home.vue'
 import DivisionsPage from './components/pages/Divisions.vue'
+import TeachersPage from './components/pages/Teachers.vue'
+import RoomsPage from './components/pages/Rooms.vue'
 import SettingsPage from './components/pages/Settings.vue'
 
 import DivisionPage from './components/pages/Division.vue'
+import TeacherPage from './components/pages/Teacher.vue'
+import RoomPage from './components/pages/Room.vue'
 
 const routes = [
   { path: '/', component: MainPage, meta: { titleKey: 'page.home' } },
   { path: '/home', component: MainPage, meta: { titleKey: 'page.home' } },
   { path: '/divisions', component: DivisionsPage, meta: { titleKey: 'page.divisions' } },
-  { path: '/teachers', component: MainPage, meta: { titleKey: 'page.teachers' } },
-  { path: '/rooms', component: MainPage, meta: { titleKey: 'page.rooms' } },
+  { path: '/teachers', component: TeachersPage, meta: { titleKey: 'page.teachers' } },
+  { path: '/rooms', component: RoomsPage, meta: { titleKey: 'page.rooms' } },
   { path: '/settings', component: SettingsPage, meta: { titleKey: 'page.settings' } },
 
   { path: '/division/:id', component: DivisionPage, props: true, meta: { titleKey: 'page.division' } },
+  { path: '/teacher/:id', component: TeacherPage, props: true, meta: { titleKey: 'page.teacher' } },
+  { path: '/room/:id', component: RoomPage, props: true, meta: { titleKey: 'page.room' } },
 ]
 
 const router = createRouter({