diff --git a/web/package.json b/web/package.json
index e3f6053..da93fed 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "PUBLIC_API_ENDPOINT= vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
diff --git a/web/src/lib/Figure.svelte b/web/src/lib/Figure.svelte
index c62dceb..be73e1d 100644
--- a/web/src/lib/Figure.svelte
+++ b/web/src/lib/Figure.svelte
@@ -9,9 +9,14 @@
 	 */
 	export let title;
 	/**
-	 * @type {any}
+	 * @type {Array<string>}
 	 */
-	export let content;
+	export let tags = [];
+
+	/**
+	 * @type {Array<{key: string, source: string, value: any}>}
+	 */
+	export let metadata_entries = [];
 	/**
 	 * @type {any}
 	 */
@@ -27,42 +32,64 @@
 </script>
 
 <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
-	<div class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group">
+	<div
+		class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group"
+	>
 		<!-- Button container -->
 		<div class="group">
-			<button class="absolute left-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100" on:click={onPrevious}>
+			<button
+				class="absolute left-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100"
+				on:click={onPrevious}
+			>
 				&lt;
 			</button>
-			<button class="absolute right-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100" on:click={onNext}>
+			<button
+				class="absolute right-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100"
+				on:click={onNext}
+			>
 				&gt;
 			</button>
 			<!-- Your modal content goes here -->
 		</div>
-	  <div class="flex">
-		<!-- Image container -->
-		<div class="flex-none w-full md:w-1/2 h-96 md:h-auto">
-			<img class="h-full w-full object-cover" src={image} alt={title} />
-		  </div>
-		  <!-- Description container -->
-		  <div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto h-96 md:h-auto">
-			<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div>
-			<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
-				{title}
-			</p>
-			<p class="mt-2 text-gray-600">
-				{#each content as item}
-					<span class="text-base text-gray-500 inline-block">{item}</span>
-				{/each}
-			</p>
-		  </div>
-	  </div>
-	  <div class="absolute top-0 right-0 pt-4 pr-4">
-		<button class="text-gray-400 hover:text-gray-600" on:click={onClose}>
-		  <!-- svelte-ignore a11y-click-events-have-key-events -->
-		  <!-- svelte-ignore a11y-no-static-element-interactions -->
-		  <span class="text-2xl">&times;</span>
-		</button>
-	  </div>
+		<div class="flex">
+			<!-- Image container -->
+			<div class="flex-none w-full md:w-1/2 h-96 md:h-auto">
+				<img class="h-full w-full object-cover" src={image} alt={title} />
+			</div>
+			<!-- Description container -->
+			<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto h-96 md:h-auto">
+				<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div>
+				<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
+					{title}
+				</p>
+				<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">TAGS</div>
+				<div class="mt-2 text-gray-600">
+					{#each tags as tag}
+						<span class="text-base text-gray-500 inline-block">{tag}</span>
+					{/each}
+				</div>
+				<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">METADATA</div>
+				<div class="mt-2 text-gray-600">
+					{#each metadata_entries as entry}
+						<div class="mb-2">
+							<span class="font-bold">{entry.key}:</span>
+							{#if typeof entry.value === 'object'}
+								<pre class="bg-gray-100 p-2 rounded overflow-y-auto max-h-96">{JSON.stringify(entry.value, null, 2)}</pre>
+							{:else}
+								{entry.value}
+							{/if}
+							<span class="text-sm text-gray-500">({entry.source})</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+		<div class="absolute top-0 right-0 pt-4 pr-4">
+			<button class="text-gray-400 hover:text-gray-600" on:click={onClose}>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<span class="text-2xl">&times;</span>
+			</button>
+		</div>
 	</div>
-  </div>
-  
+</div>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 775559d..207f321 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,152 +1,164 @@
 <script>
-  import Figure from "$lib/Figure.svelte";
+	import Figure from '$lib/Figure.svelte';
+	import { PUBLIC_API_ENDPOINT } from '$env/static/public';
 
-
-
-
-  let searchString = '';
-  /**
+	let searchString = '';
+	/**
 	 * @type {any[]}
 	 */
-  let searchResults = [];
-  let isLoading = false;
-  let debounceTimer;
-  let showModal= false;
-  let selectedImage = 0;
+	let searchResults = [];
+	let isLoading = false;
+	let debounceTimer;
+	let showModal = false;
+	let selectedImage = 0;
 
-  const debounceDelay = 300;
+	const debounceDelay = 300;
 
-  /**
+	/**
 	 * @param {string} query
 	 */
-  async function searchItems(query) {
-    isLoading = true;
+	async function searchItems(query) {
+		isLoading = true;
 
-    try {
-      const response = await fetch(`http://localhost:8080/search?q=${encodeURIComponent(query)}`);
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-      searchResults = await response.json();
-      console.log(searchResults);
-    } catch (error) {
-    } finally {
-      isLoading = false;
-    }
-  }
+		try {
+			const apiEndpoint = typeof PUBLIC_API_ENDPOINT !== 'undefined' ? PUBLIC_API_ENDPOINT : window.location.origin;
+			const response = await fetch(`${apiEndpoint}/search?q=${encodeURIComponent(query)}`);
+			if (!response.ok) {
+				throw new Error('Network response was not ok');
+			}
+			searchResults = await response.json();
+			console.log(searchResults);
+		} catch (error) {
+		} finally {
+			isLoading = false;
+		}
+	}
 
-  /**
+	/**
 	 * @param {string} query
 	 */
-  function debounceSearch(query) {
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-      searchItems(query);
-    }, debounceDelay);
-  }
+	function debounceSearch(query) {
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			searchItems(query);
+		}, debounceDelay);
+	}
 
-  /**
+	/**
 	 * @param {string} path
 	 */
-  function filename(path) {
-    let splits = path.split('/');
-    return splits[splits.length - 1];
-  }
+	function filename(path) {
+		let splits = path.split('/');
+		return splits[splits.length - 1];
+	}
 
-  /**
+	/**
 	 * @param {number} index
 	 */
-  function openModal(index) {
-    // @ts-ignore
-    showModal = true;
-    selectedImage = index;
-    disableScroll();
-  }
+	function openModal(index) {
+		// @ts-ignore
+		showModal = true;
+		selectedImage = index;
+		disableScroll();
+	}
 
-  function closeModal() {
-    showModal = false;
-    enableScroll();
-  }
+	function closeModal() {
+		showModal = false;
+		enableScroll();
+	}
 
-  /**
+	/**
 	 * @param {{ key: string; }} event
 	 */
-  function handleKeydown(event) {
-    if (showModal) {
-      if (event.key === 'Escape') {
-        closeModal();
-      } else if (event.key === 'ArrowRight') {
-        selectedImage = (selectedImage + 1) % searchResults.length;
-      } else if (event.key === 'ArrowLeft') {
-        selectedImage = (selectedImage - 1 + searchResults.length) % searchResults.length;
-      }
-    }
-  }
+	function handleKeydown(event) {
+		if (showModal) {
+			if (event.key === 'Escape') {
+				closeModal();
+			} else if (event.key === 'ArrowRight') {
+				selectedImage = (selectedImage + 1) % searchResults.length;
+			} else if (event.key === 'ArrowLeft') {
+				selectedImage = (selectedImage - 1 + searchResults.length) % searchResults.length;
+			}
+		}
+	}
 
-  const disableScroll = () => {
-    document.body.style.overflow = 'hidden';
-  };
+	const disableScroll = () => {
+		document.body.style.overflow = 'hidden';
+	};
 
-  const enableScroll = () => {
-    document.body.style.overflow = '';
-  };
+	const enableScroll = () => {
+		document.body.style.overflow = '';
+	};
 
-  $: if (searchString.trim()) {
-    debounceSearch(searchString);
-  } else {
-    searchResults = [];
-  }
+	$: if (searchString.trim()) {
+		debounceSearch(searchString);
+	} else {
+		searchResults = [];
+	}
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="container mx-auto my-10">
-  <input type="text" class="input input-bordered w-full my-4 p-2 text-lg border border-gray-500" bind:value={searchString} placeholder="Type to search..." />
+	<input
+		type="text"
+		class="input input-bordered w-full my-4 p-2 text-lg border border-gray-500"
+		bind:value={searchString}
+		placeholder="Type to search..."
+	/>
 </div>
 
 <div class="container mx-auto">
-{#if isLoading}
-  <p>Loading...</p>
-{:else if searchString}
-  <div class="grid grid-cols-4 gap-4">
-    {#each searchResults as item, index}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out" on:click={() => openModal(index)}>
-        <figure class="px-5 pt-5">
-          <img class="w-full h-48 object-cover" src={`http://localhost:8080/files/${item.filepath}`} alt="" />
-        </figure>
-        <div class="p-4">
-          <h2 class="text-lg font-bold mb-2">{filename(item.filepath)}</h2>
-          <p class="text-gray-700 line-clamp-5">{''}</p>
-        </div>
-      </div>
-    {/each}
-  </div>
-{:else}
-  <p>Type something to start searching...</p>
-{/if}
+	{#if isLoading}
+		<p>Loading...</p>
+	{:else if searchString}
+		<div class="grid grid-cols-4 gap-4">
+			{#each searchResults as item, index}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out"
+					on:click={() => openModal(index)}
+				>
+					<figure class="px-5 pt-5">
+						<img
+							class="w-full h-48 object-cover"
+							src={`http://localhost:8080/files/${item.filepath}`}
+							alt=""
+						/>
+					</figure>
+					<div class="p-4">
+						<h2 class="text-lg font-bold mb-2">{filename(item.filepath)}</h2>
+						<p class="text-gray-700 line-clamp-5">{''}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<p>Type something to start searching...</p>
+	{/if}
 </div>
 
-
 {#if searchResults.length && showModal}
-  <Figure
-    image={`http://localhost:8080/files/${searchResults[selectedImage].filepath}`}
-    title={filename(searchResults[selectedImage].filepath)}
-    content={''}
-    onClose={closeModal}
-    onNext={() => openModal((selectedImage + 1) % searchResults.length)}
-    onPrevious={() => openModal((selectedImage - 1 + searchResults.length) % searchResults.length)}
-  />
+	<Figure
+		image={`http://localhost:8080/files/${searchResults[selectedImage].filepath}`}
+		title={filename(searchResults[selectedImage].filepath)}
+		tags={searchResults[selectedImage].tags}
+		metadata_entries={searchResults[selectedImage].metadata_entries}
+		content={''}
+		onClose={closeModal}
+		onNext={() => openModal((selectedImage + 1) % searchResults.length)}
+		onPrevious={() => openModal((selectedImage - 1 + searchResults.length) % searchResults.length)}
+	/>
 {/if}
 
 <footer class="mx-auto mt-32 w-full container">
-  <div class="border-t border-slate-900/5 py-10">
-    <p class="mt-2 text-sm leading-6 text-slate-500">© 2023 Labs Inc. All rights reserved.</p>
-    <div class="mt-2 flex items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
-      <a href="/privacy-policy">Privacy policy</a>
-      <div class="h-4 w-px bg-slate-500/20"></div>
-      <a href="/changelog">Changelog</a>
-    </div>
-  </div>
+	<div class="border-t border-slate-900/5 py-10">
+		<p class="mt-2 text-sm leading-6 text-slate-500">© 2023 Labs Inc. All rights reserved.</p>
+		<div class="mt-2 flex items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
+			<a href="/privacy-policy">Privacy policy</a>
+			<div class="h-4 w-px bg-slate-500/20" />
+			<a href="/changelog">Changelog</a>
+		</div>
+	</div>
 </footer>