diff --git a/src/lib/components/session/HostView.svelte b/src/lib/components/session/HostView.svelte
index dc35fbb..6c428ff 100644
--- a/src/lib/components/session/HostView.svelte
+++ b/src/lib/components/session/HostView.svelte
@@ -9,7 +9,7 @@
 	import { Alert } from 'flowbite-svelte';
 	import type { Group } from '$lib/schema/group';
 	import { onMount } from 'svelte';
-	import { collection, getDocs, onSnapshot } from 'firebase/firestore';
+	import { collection, getDocs, onSnapshot, getDoc, doc } from 'firebase/firestore';
 	import { db } from '$lib/firebase';
 	import { writable } from 'svelte/store';
 	import { getUser } from '$lib/utils/getUser';
@@ -20,6 +20,7 @@
 	import { X } from 'lucide-svelte';
 
 	let { session }: { session: Readable<Session> } = $props();
+	let code = $state('Code generate error');
 	type GroupWithId = Group & { id: string };
 	let groups = writable<GroupWithId[]>([]);
 	let participantNames = $state(new Map<string, string>());
@@ -44,6 +45,9 @@
 	onMount(() => {
 		const initializeSession = async () => {
 			try {
+				const codeCollection = doc(db, 'temp_codes', $page.params.id);
+				const codeDoc = await getDoc(codeCollection);
+				code = codeDoc.data()?.code;
 				const groupsCollection = collection(db, `sessions/${$page.params.id}/groups`);
 				const unsubscribe = onSnapshot(groupsCollection, (snapshot) => {
 					const groupsData: GroupWithId[] = snapshot.docs.map(
@@ -273,6 +277,10 @@
 						<h3 class="mb-2 font-medium">Session QR Code</h3>
 						<QRCode value={`${$page.url.origin}/session/${$page.params.id}`} />
 					</div>
+					<div class="mt-4">
+						<h3 class="mb-2 font-medium">Session Code</h3>
+						<p class="text-blue-700">{code}</p>
+					</div>
 				{/if}
 			</div>
 		{/if}