diff --git a/.env.example b/.env.example
index 61f645c5..3a5fe342 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,4 @@
+PUBLIC_UI_VERSION=dev
 PUBLIC_URI=http://localhost:5173
 # use local frontend with local backend
 API_URI=http://localhost:3030 # server reachable
diff --git a/.github/workflows/dockercicd.yml b/.github/workflows/dockercicd.yml
index 9707ed73..5b02457f 100644
--- a/.github/workflows/dockercicd.yml
+++ b/.github/workflows/dockercicd.yml
@@ -15,6 +15,8 @@ jobs:
     permissions:
       contents: read
       packages: write
+    env:
+      PUBLIC_UI_VERSION: ${{ github.ref }}
 
     steps:
       - uses: actions/checkout@v4
diff --git a/.github/workflows/testingci.yml b/.github/workflows/testingci.yml
index 88be8a50..0a95c455 100644
--- a/.github/workflows/testingci.yml
+++ b/.github/workflows/testingci.yml
@@ -9,6 +9,8 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: read
+    env:
+      PUBLIC_UI_VERSION: ${{ github.sha }}
 
     steps:
       - uses: actions/checkout@v4
diff --git a/src/lib/components/footer/main.svelte b/src/lib/components/footer/main.svelte
index 4e39d690..31cd6572 100644
--- a/src/lib/components/footer/main.svelte
+++ b/src/lib/components/footer/main.svelte
@@ -1,10 +1,24 @@
+<script>
+	/**
+	 * @typedef {object} Props
+	 * @property {string} uiVersion
+	 * @property {string} apiVersion
+	 */
+
+	/** @type {Props} */
+	let { uiVersion, apiVersion } = $props();
+</script>
+
 <footer class="h-[10lvh] w-full border-t-2 border-neutral-100 dark:border-neutral-700">
-	<div class="h-full flex place-content-center items-center">
+	<div class="h-full flex flex-col place-content-center items-center">
 		<a
 			class="text-hearchco-primary dark:text-hearchco-secondary font-bold hover:underline"
 			href="https://github.com/hearchco"
 		>
 			Source code
 		</a>
+		<p class="text-sm text-neutral-600 dark:text-neutral-300 font-light">
+			UI ver: {uiVersion} | Agent ver: {apiVersion.replace(/;$/, '')}
+		</p>
 	</div>
 </footer>
diff --git a/src/lib/functions/api/fetchversion.js b/src/lib/functions/api/fetchversion.js
new file mode 100644
index 00000000..a809b8ea
--- /dev/null
+++ b/src/lib/functions/api/fetchversion.js
@@ -0,0 +1,37 @@
+import { error } from '@sveltejs/kit';
+import { createApiUrl } from '$lib/functions/api/createurl.js';
+
+/**
+ * @param {typeof fetch} [fetcher]
+ * @returns {Promise<string>}
+ */
+export async function fetchVersion(fetcher = fetch) {
+	/** @type {URL} */
+	let apiUrl;
+	try {
+		apiUrl = createApiUrl('versionz');
+	} catch (/** @type {any} */ err) {
+		// Internal Server Error
+		throw error(500, `Failed to create API URL: ${err.message}`);
+	}
+
+	/** @type {Response} */
+	let response;
+	try {
+		response = await fetcher(apiUrl, {
+			method: 'GET', // POST doesn't cache on CDN
+			headers: {
+				Accept: 'text/plain',
+				'Accept-Encoding': 'gzip, deflate, br'
+			}
+		});
+	} catch (/** @type {any} */ err) {
+		// Bad Gateway
+		throw error(502, `Failed to fetch version: ${err.message}`);
+	}
+
+	/** @type {string} */
+	const version = await response.text();
+
+	return version;
+}
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
new file mode 100644
index 00000000..431aeaec
--- /dev/null
+++ b/src/routes/+layout.js
@@ -0,0 +1,11 @@
+import { PUBLIC_UI_VERSION } from '$env/static/public';
+import { fetchVersion } from '$lib/functions/api/fetchversion';
+
+/** @type {import('./$types').LayoutLoad} */
+export async function load({ fetch }) {
+	const apiVersion = await fetchVersion(fetch);
+	return {
+		uiVersion: PUBLIC_UI_VERSION ?? 'dev',
+		apiVersion: apiVersion
+	};
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ae311a17..256c46dc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,10 @@
 	import Preconnect from '$lib/components/preconnect/main.svelte';
 	import ThemeToggle from '$lib/components/themetoggle/main.svelte';
 	import Footer from '$lib/components/footer/main.svelte';
+
+	let { data } = $props();
+	const uiVersion = $derived(data.uiVersion);
+	const apiVersion = $derived(data.apiVersion);
 </script>
 
 <Preconnect />
@@ -15,4 +19,4 @@
 	<slot />
 </main>
 
-<Footer />
+<Footer {uiVersion} {apiVersion} />
diff --git a/src/routes/search/+page.js b/src/routes/search/+page.js
index ab16d396..1aa44d69 100644
--- a/src/routes/search/+page.js
+++ b/src/routes/search/+page.js
@@ -77,7 +77,6 @@ export async function load({ url, fetch }) {
 
 	return {
 		browser: browser,
-		apiVersion: resp.version,
 		query: queryWithoutCategory,
 		currentPage: currentPage,
 		maxPages: maxPages,
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 9921b24d..97ce6de9 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -9,7 +9,6 @@
 	let { data } = $props();
 
 	const javascript = $derived(data.browser);
-
 	const query = $derived(data.query);
 	const title = $derived(
 		query === ''
@@ -18,7 +17,6 @@
 				? `${query} | Hearchco Search`
 				: `${query.slice(0, 15)}... | Hearchco Search`
 	);
-
 	const currentPage = $derived(data.currentPage);
 	// const maxPages = $derived(data.maxPages);
 	const category = $derived(data.category);