diff --git a/frontend/src/app.css b/frontend/src/app.css
new file mode 100644
index 0000000..3380f0c
--- /dev/null
+++ b/frontend/src/app.css
@@ -0,0 +1,56 @@
+/* https://www.joshwcomeau.com/css/custom-css-reset/ */
+
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+    margin: 0;
+}
+
+body {
+    /* 3. Add accessible line-height */
+    line-height: 1.5;
+    /* 4. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+    font-family: arial, "sans-serif";
+}
+
+button, input {
+    border: none;
+    outline: none;
+    box-shadow: none;
+}
+
+/* 5. Improve media defaults */
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+
+/* 6. Inherit fonts for form controls */
+input, button, textarea, select {
+    font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+}
+
+/* 8. Improve line wrapping */
+p {
+    text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+}
+
+/*
+  9. Create a root stacking context
+*/
+#root, #__next {
+    isolation: isolate;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/components/NftTile.svelte b/frontend/src/lib/components/NftTile.svelte
new file mode 100644
index 0000000..c61eaf6
--- /dev/null
+++ b/frontend/src/lib/components/NftTile.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    export let data;
+</script>
+
+<figure class="nft-card">
+    <img src="/0.png" alt="">
+    <button class="claim-button">
+        <span class="index-number">#{data?.serialNumber}</span>
+        <span class="claim-text">Claim</span>
+    </button>
+</figure>
+
+<style>
+    .nft-card {
+        background-color: white;
+        border-radius: 1rem;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        justify-self: center;
+        padding-bottom: 2rem;
+        position: relative;
+        width: 100%;
+    }
+
+    .nft-card img {
+        border-radius: 1rem;
+        height: fit-content;
+        width: fit-content;
+    }
+
+    .claim-button {
+        background-color: rgb(253 242 248); /* pink-50 */
+        border-radius: 0.75rem;
+        bottom: 10px;
+        cursor: pointer;
+        font-size: 0.875rem;
+        height: 40px;
+        overflow: hidden;
+        padding: 0.5rem;
+        position: absolute;
+        right: 10px;
+        text-align: right;
+        text-transform: uppercase;
+        transition: background-color 0.2s ease-in-out;
+        width: 102px;
+    }
+
+    .claim-button:hover {
+        background-color: rgb(239 246 255); /* blue-50 */
+    }
+
+    .index-number {
+        padding: 0.5rem;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    }
+
+    .claim-button:hover .index-number {
+        opacity: 0;
+        transform: translateY(-40px);
+    }
+
+    .claim-text {
+        align-items: center;
+        display: flex;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 100%;
+        opacity: 0;
+        padding: 0.5rem;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    }
+
+    .claim-button:hover .claim-text {
+        opacity: 1;
+        transform: translateY(-40px);
+    }
+</style>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 04b5b0d..49adf2c 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import '../app.css'
+
 	let { children } = $props()
 </script>
 
@@ -9,3 +11,13 @@
 </header>
 
 {@render children()}
+
+<style>
+	header {
+		background: #f8f8f8;
+		padding: 6px 12px;
+		position: fixed;
+		width: 100%;
+		z-index: 9;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 450e3a0..dec1a1d 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,31 +1,192 @@
 <script lang="ts">
-	import NftTile from './NftTile.svelte'
+	import NftTile from "$lib/components/NftTile.svelte";
 
 	let { data } = $props()
 </script>
 
-<h1>BIDI</h1>
+<main class="page-container">
+	<div class="grain"></div>
 
-<h2>NFTs</h2>
+	<div class="content-wrapper">
+		<div class="cards-grid">
+			{#if !data.nfts.length}
+				<p>No NFTs have been minted yet.</p>
+			{:else}
+				<ul class="nfts">
+					{#each data.nfts as nft}
+						<NftTile data={nft} />
+					{/each}
+				</ul>
+			{/if}
+		</div>
 
-{#if !data.nfts.length}
-	<p>No NFTs have been minted yet.</p>
-{:else}
-	<ul class="nfts">
-		{#each data.nfts as nft}
-			<li>
-				<NftTile {...nft} />
-			</li>
-		{/each}
-	</ul>
-{/if}
+		<div class="sidebar">
+			<div class="relative">
+				<h2>Create a certificate:</h2>
+
+				<div class="form-group">
+					<label for="latitude" class="form-label">Coordinates:</label>
+					<div class="coordinates-group">
+						<input id="latitude" name="latitude" type="text" class="form-input">
+						<div>/</div>
+						<input type="text" class="form-input">
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label for="natural-object" class="form-label">Type of natural object:</label>
+					<input id="natural-object" type="text" class="form-input">
+				</div>
+
+				<div class="form-group">
+					<label for="owner-of-place"  class="form-label">Owner of the place:</label>
+					<input id="owner-of-place" name="owner-of-place" type="text" class="form-input">
+				</div>
+
+				<div class="form-group">
+					<label for="operations-manager" class="form-label">Operations manager:</label>
+					<input id="operations-" name="operations-" type="text" class="form-input">
+				</div>
+
+				<div class="form-group">
+					<label for="date-of-work" class="form-label">Date of work:</label>
+					<input id="date-of-work" name="date-of-work" type="date" class="form-input">
+				</div>
+
+				<div class="form-group">
+					<label for="type-of-work" class="form-label">Type of work:</label>
+					<input id="type-of-work" form="type-of-work" type="text" class="form-input">
+				</div>
+
+				<div class="form-group">
+					<label for="receiver-id" class="form-label">Receiver ID:</label>
+					<input id="type-of-work" name="type-of-work" type="text" class="form-input">
+				</div>
+
+				<button class="submit-button">
+					Submit
+				</button>
+			</div>
+		</div>
+	</div>
+</main>
 
 <style>
-	.nfts {
+	.page-container {
+		background: linear-gradient(to bottom right, #f6d8d5, transparent, #f5f5f5);
+		min-height: 100vh;
+		position: relative;
+	}
+
+	.content-wrapper {
+		display: grid;
+		gap: 64px;
+		grid-template-columns: 1fr 320px;
+		padding: 5rem 3rem 3rem 3rem;
+		position: relative;
+		z-index: 2;
+	}
+
+	@media (min-width: 1024px) {
+		.content-wrapper {
+			margin-right: 32px;
+		}
+	}
+
+	.cards-grid {
+		align-items: start;
+		display: grid;
+		gap: 2rem;
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	}
+
+	.sidebar {
+		height: fit-content;
+		max-width: 320px;
+		position: sticky;
+		top: 64px;
+		width: 100%;
+	}
+
+	.sidebar h2 {
+		font-weight: 900;
+		margin-bottom: 2rem;
+	}
+
+	.form-group {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, 16rem);
+		gap: 0.25rem;
+		margin-bottom: 1rem;
+	}
+
+	.form-label {
+		font-size: 0.875rem;
+	}
+
+	.form-input {
+		border-radius: 0.5rem;
+		width: 100%;
+		padding: 0.5rem;
+	}
+
+	.coordinates-group {
+		display: flex;
 		gap: 1rem;
-		padding-left: 0;
-		list-style-type: none;
+		align-items: center;
+	}
+
+	.coordinates-group input {
+		width: 100%;
+	}
+
+	.submit-button {
+		position: sticky;
+		top: 24px;
+		padding: 1rem;
+		background-color: #171717;
+		color: white;
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		width: 100%;
+		display: block;
+		font-weight: bold;
+	}
+
+	.grain {
+		z-index: 0;
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		transform: translateZ(0);
+	}
+
+	.grain:before {
+		content: "";
+		top: -10rem;
+		left: -10rem;
+		width: calc(100% + 20rem);
+		height: calc(100% + 20rem);
+		z-index: 9999;
+		position: fixed;
+		background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
+		opacity: 0.1;
+		pointer-events: none;
+		animation: noise 1s steps(2) infinite;
+	}
+
+	@keyframes noise {
+		0% { transform: translate3d(0, 9rem, 0) }
+		10% { transform: translate3d(-1rem, -4rem, 0) }
+		20% { transform: translate3d(-8rem, 2rem, 0) }
+		30% { transform: translate3d(9rem, -9rem, 0) }
+		40% { transform: translate3d(-2rem, 7rem, 0) }
+		50% { transform: translate3d(-9rem, -4rem, 0) }
+		60% { transform: translate3d(2rem, 6rem, 0) }
+		70% { transform: translate3d(7rem, -8rem, 0) }
+		80% { transform: translate3d(-9rem, 1rem, 0) }
+		90% { transform: translate3d(6rem, -5rem, 0) }
+		100% { transform: translate3d(-7rem, 0, 0) }
 	}
 </style>
diff --git a/frontend/static/0.png b/frontend/static/0.png
new file mode 100644
index 0000000..3e42a23
Binary files /dev/null and b/frontend/static/0.png differ