diff --git a/src/routes/pkg/[repo]/[name]/+page.svelte b/src/routes/pkg/[repo]/[name]/+page.svelte
index 442b5e2..1c513f4 100644
--- a/src/routes/pkg/[repo]/[name]/+page.svelte
+++ b/src/routes/pkg/[repo]/[name]/+page.svelte
@@ -1,123 +1,170 @@
 <script>
-    import { page } from '$app/stores';
-    import { client } from 'twirpscript';
-    import { GetPkg } from '$lib/lure.pb';
-    import { LURE_WEB_API_URL } from '$env/static/public';
-    import { DoubleBounce } from 'svelte-loading-spinners';
+	import { page } from '$app/stores';
+	import { client } from 'twirpscript';
+	import { GetPkg } from '$lib/lure.pb';
+	import { LURE_WEB_API_URL } from '$env/static/public';
+	import { DoubleBounce } from 'svelte-loading-spinners';
 
-    import Header from "../../../header.svelte";
-    import Footer from "../../../footer.svelte";
+	import Header from '../../../header.svelte';
+	import Footer from '../../../footer.svelte';
 
-    import Icon from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
+	import { onMount } from 'svelte';
 
-    client.baseURL = LURE_WEB_API_URL
-    client.prefix = ""
+	client.baseURL = LURE_WEB_API_URL;
+	client.prefix = '';
 
-    function fullVer(pkg) {
-        let ver = `${pkg.version}-${pkg.release}`;
-        if (pkg.epoch != 0) {
-            ver = `${pkg.epoch}:${ver}`
-        }
-        return ver
-    }
+	let currentURL = ``;
+	onMount(() => (currentURL = window.location.href));
 
-    function objToMap(o) {
-        return new Map(Object.entries(o))
-    }
+	function fullVer(pkg) {
+		let ver = `${pkg.version}-${pkg.release}`;
+		if (pkg.epoch != 0) {
+			ver = `${pkg.epoch}:${ver}`;
+		}
+		return ver;
+	}
+
+	function objToMap(o) {
+		return new Map(Object.entries(o));
+	}
+
+	let modalActive = false;
+
+	function showModal() {
+		modalActive = true;
+	}
+
+	function hideModal() {
+		modalActive = false;
+	}
 </script>
 
 <svelte:head>
-    <title>{$page.params.name} Package | LURE Web</title>
-    <meta name="description" content="Information about the {$page.params.name} LURE package.">
+	<title>{$page.params.name} Package | LURE Web</title>
+	<meta name="description" content="Information about the {$page.params.name} LURE package." />
 </svelte:head>
 
-<Header/>
+<Header />
 
 <section class="container">
-    <a href="/pkgs"><Icon icon="material-symbols:arrow-back-rounded" inline=true/> Back</a>
-    {#await GetPkg({name: $page.params.name, repository: $page.params.repo})}
-        <center><DoubleBounce color="#375a7f" /></center>
-    {:then pkg}
-        <p class="title">{pkg.name}</p>
-        <p class="subtitle mb-3">{fullVer(pkg)}</p>
-        <a href="/pkg/{pkg.repository}/{pkg.name}/lure.sh" class="button is-primary mb-5">View lure.sh</a>
-        <div class="box">
-            <table class="table is-hoverable is-fullwidth">
-                <tbody>
-                    {#if pkg.description != ""}
-                        <tr>
-                            <th>Description:</th>
-                            <td>{pkg.description}</td>
-                        </tr>
-                    {/if}
-                    {#if pkg.homepage != ""}
-                    <tr>
-                        <th>Homepage:</th>
-                        <td><a href="{pkg.homepage}">{pkg.homepage}</a></td>
-                    </tr>
-                    {/if}
-                    {#if pkg.maintainer != ""}
-                    <tr>
-                        <th>Maintainer:</th>
-                        <td>{pkg.maintainer}</td>
-                    </tr>
-                    {/if}
-                    {#if pkg.licenses.length != 0}
-                    <tr>
-                        <th>Licenses:</th>
-                        <td>
-                            {#each pkg.licenses as license, index}
-                                {#if license.startsWith('custom')}
-                                    {license}{#if index+1 < pkg.licenses.length},&nbsp{/if}
-                                {:else}
-                                    <a href="https://spdx.org/licenses/{license}.html">{license}</a>{#if index+1 < pkg.licenses.length},&nbsp;{/if}
-                                {/if}
-                            {/each}
-                        </td>
-                    </tr>
-                    {/if}
-                    {#if pkg.architectures.length != 0}
-                    <tr>
-                        <th>Architectures:</th>
-                        <td>{pkg.architectures.join(', ')}</td>
-                    </tr>
-                    {/if}
-                    {#if pkg.conflicts.length != 0}
-                    <tr>
-                        <th>Conflicts:</th>
-                        <td>{pkg.conflicts.join(', ')}</td>
-                    </tr>
-                    {/if}
-                    {#if pkg.provides.length != 0}
-                    <tr>
-                        <th>Provides:</th>
-                        <td>{pkg.provides.join(', ')}</td>
-                    </tr>
-                    {/if}
-                    {#each [...objToMap(pkg.depends)] as [override, pkgList]}
-                    <tr>    
-                        <th>Depends ({override == "" ? "default" : override}):</th>
-                        <td>{pkgList.entries.join(', ')}</td>
-                    </tr>
-                    {/each}
-                    {#each [...objToMap(pkg.buildDepends)] as [override, pkgList]}
-                    <tr>    
-                        <th>Build Depends ({override != "" ? override : "default"}):</th>
-                        <td>{pkgList.entries.join(', ')}</td>
-                    </tr>
-                    {/each}
-                    <tr>
-                        <th>Repository:</th>
-                        <td>{pkg.repository}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    {:catch err}
-        <div class="notification is-danger my-3">
-            Error: {err.msg}
-        </div>
-    {/await}
+	<a href="/pkgs"><Icon icon="material-symbols:arrow-back-rounded" inline="true" /> Back</a>
+	{#await GetPkg({ name: $page.params.name, repository: $page.params.repo })}
+		<center><DoubleBounce color="#375a7f" /></center>
+	{:then pkg}
+		<div class="modal {modalActive ? 'is-active' : ''}">
+			<div class="modal-background"/>
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Badge</p>
+					<button class="delete" aria-label="close" on:click={hideModal}/>
+				</header>
+				<section class="modal-card-body">
+					<img
+						src="{LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name}"
+						alt="badge for {$page.params.name} package"
+					/>
+
+					<p>Markdown</p>
+					<input
+						class="input"
+						value="[![LURE badge for {$page.params.name} package]({LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name})]({currentURL})"
+						readonly
+					/>
+					<p>HTML</p>
+					<input
+						class="input"
+						value='<a href="{currentURL}"><img src="{LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name}" alt="LURE badge for {$page.params.name} package"></a>'
+						readonly
+					/>
+				</section>
+				<footer class="modal-card-foot">
+					<button class="button is-primary" on:click={hideModal}>Close</button>
+				</footer>
+			</div>
+		</div>
+		<p class="title">{pkg.name}</p>
+		<p class="subtitle mb-3">{fullVer(pkg)}</p>
+		<a href="/pkg/{pkg.repository}/{pkg.name}/lure.sh" class="button is-primary mb-5">View lure.sh</a>
+		<button href="/pkg/{pkg.repository}/{pkg.name}/lure.sh" class="button is-success mb-5 ml-1" on:click={showModal}>View badge</button>
+		<div class="box">
+			<table class="table is-hoverable is-fullwidth">
+				<tbody>
+					{#if pkg.description != ''}
+						<tr>
+							<th>Description:</th>
+							<td>{pkg.description}</td>
+						</tr>
+					{/if}
+					{#if pkg.homepage != ''}
+						<tr>
+							<th>Homepage:</th>
+							<td><a href={pkg.homepage}>{pkg.homepage}</a></td>
+						</tr>
+					{/if}
+					{#if pkg.maintainer != ''}
+						<tr>
+							<th>Maintainer:</th>
+							<td>{pkg.maintainer}</td>
+						</tr>
+					{/if}
+					{#if pkg.licenses.length != 0}
+						<tr>
+							<th>Licenses:</th>
+							<td>
+								{#each pkg.licenses as license, index}
+									{#if license.startsWith('custom')}
+										{license}{#if index + 1 < pkg.licenses.length},&nbsp{/if}
+									{:else}
+										<a href="https://spdx.org/licenses/{license}.html">{license}</a
+										>{#if index + 1 < pkg.licenses.length},&nbsp;{/if}
+									{/if}
+								{/each}
+							</td>
+						</tr>
+					{/if}
+					{#if pkg.architectures.length != 0}
+						<tr>
+							<th>Architectures:</th>
+							<td>{pkg.architectures.join(', ')}</td>
+						</tr>
+					{/if}
+					{#if pkg.conflicts.length != 0}
+						<tr>
+							<th>Conflicts:</th>
+							<td>{pkg.conflicts.join(', ')}</td>
+						</tr>
+					{/if}
+					{#if pkg.provides.length != 0}
+						<tr>
+							<th>Provides:</th>
+							<td>{pkg.provides.join(', ')}</td>
+						</tr>
+					{/if}
+					{#each [...objToMap(pkg.depends)] as [override, pkgList]}
+						<tr>
+							<th>Depends ({override == '' ? 'default' : override}):</th>
+							<td>{pkgList.entries.join(', ')}</td>
+						</tr>
+					{/each}
+					{#each [...objToMap(pkg.buildDepends)] as [override, pkgList]}
+						<tr>
+							<th>Build Depends ({override != '' ? override : 'default'}):</th>
+							<td>{pkgList.entries.join(', ')}</td>
+						</tr>
+					{/each}
+					<tr>
+						<th>Repository:</th>
+						<td>{pkg.repository}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	{:catch err}
+		<div class="notification is-danger my-3">
+			Error: {err.msg}
+		</div>
+	{/await}
 </section>
 
-<Footer/>
\ No newline at end of file
+<Footer />