diff --git a/package.json b/package.json
index c9836ac8..2ee57434 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
 	"devDependencies": {
 		"@capacitor/assets": "^3.0.4",
 		"@faker-js/faker": "^8.4.0",
+		"@lottiefiles/svelte-lottie-player": "^0.3.1",
 		"@playwright/test": "^1.28.1",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^11.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 917ca04d..b5e9e205 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,6 +94,9 @@ devDependencies:
   '@faker-js/faker':
     specifier: ^8.4.0
     version: 8.4.0
+  '@lottiefiles/svelte-lottie-player':
+    specifier: ^0.3.1
+    version: 0.3.1
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.41.2
@@ -2011,6 +2014,12 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /@lottiefiles/svelte-lottie-player@0.3.1:
+    resolution: {integrity: sha512-WnJasuRJJiKl1nSaZeYpaorNCdVOeR9FcWve/QLliPGxF6UUkS88uGH0Vd4ExP8PSpkagyQ7QYRBGCymBIxVxQ==}
+    dependencies:
+      lottie-web: 5.12.2
+    dev: true
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -5607,6 +5616,10 @@ packages:
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  /lottie-web@5.12.2:
+    resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==}
+    dev: true
+
   /loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
     dependencies:
diff --git a/src/lib/slangroom/services.ts b/src/lib/slangroom/services.ts
index e3cb212a..c3a899c2 100644
--- a/src/lib/slangroom/services.ts
+++ b/src/lib/slangroom/services.ts
@@ -50,7 +50,7 @@ Then print data
 	}
 };
 
-export const getService = async (id: string): Promise<Response> => {
+export const getService = async (id: string): Promise<Response<Service>> => {
 	try {
 		const res = await slangroom.execute(
 			`Rule unknown ignore
@@ -59,7 +59,9 @@ Given I connect to 'path' and do get and output into 'http_result'
 Given I have a 'string dictionary' named 'http_result'
 Then print data`,
 			{
-				data: { path: `${PUBLIC_BACKEND_URL}/api/collections/services/records/${id}?expand=templates` }
+				data: {
+					path: `${PUBLIC_BACKEND_URL}/api/collections/services/records/${id}?expand=templates`
+				}
 			}
 		);
 		return res.result.http_result.result;
diff --git a/src/routes/(protected)/request/[id]/+page.ts b/src/routes/(protected)/[id]/+layout.ts
similarity index 57%
rename from src/routes/(protected)/request/[id]/+page.ts
rename to src/routes/(protected)/[id]/+layout.ts
index 894b0f04..a48c8956 100644
--- a/src/routes/(protected)/request/[id]/+page.ts
+++ b/src/routes/(protected)/[id]/+layout.ts
@@ -1,6 +1,6 @@
 import { getService } from '$lib/slangroom/services.js';
 
 export const load = async ({ params }) => {
-	const credential = getService(params.id)
-	return {credential};
-};
\ No newline at end of file
+	const credential = await getService(params.id);
+	return { credential };
+};
diff --git a/src/routes/(protected)/[id]/credential-offer/+page.svelte b/src/routes/(protected)/[id]/credential-offer/+page.svelte
new file mode 100644
index 00000000..06594190
--- /dev/null
+++ b/src/routes/(protected)/[id]/credential-offer/+page.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import Logo from '$lib/components/atoms/Logo.svelte';
+	import JSONSchemaForm from '$lib/JSONSchemaForms/JSONSchemaForm.svelte';
+	import JSONSchemaParser from '$lib/JSONSchemaForms/JSONSchemaParser.svelte';
+	import ErrorDisplay from '$lib/components/errorDisplay.svelte';
+	import { fly } from 'svelte/transition';
+	import { thumbsUpOutline } from 'ionicons/icons';
+	import { goto } from '$app/navigation';
+	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
+	export let data: any;
+	const { credential } = data;
+	let isModalOpen: boolean = false;
+	let isCredentialVerified: boolean = false;
+
+	const getCredential = () => {
+		isModalOpen = true;
+		setTimeout(() => {
+			isCredentialVerified = true;
+			setTimeout(() => {
+				isModalOpen = false;
+				goto('/home');
+			}, 3000);
+		}, 5000);
+	};
+</script>
+
+<ion-header>
+	<ion-toolbar>
+		<ion-title>
+			<div class="flex items-center gap-2">
+				<Logo />
+				<h1 class="text-2xl">Credential offer</h1>
+			</div>
+		</ion-title>
+	</ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen class="ion-padding">
+	<div class="flex h-full flex-col justify-between pb-16">
+		<div>
+			<div class="text-on flex items-center gap-2 text-xl font-semibold not-italic">
+				<d-avatar name={credential.name}></d-avatar>
+				<d-heading size="s">{credential.name}</d-heading>
+			</div>
+			<div class="mt-2 flex flex-col gap-2">
+				<d-text size="l">{credential.expand.templates[0].name}</d-text>
+				<div class="flex flex-col gap-4">
+					<d-text size="s"
+						>Lorem ipsum dolor sit amet consectetur. Leo ultricies pellentesque morbi in eu metus commodo felis.
+						Pellentesque facilisis a auctor enim lectus. Nulla dolor cras viverra massa.</d-text
+					>
+				</div>
+			</div>
+		</div>
+
+		<JSONSchemaParser schema={credential.expand.templates[0].schema} let:schema>
+			<JSONSchemaForm {schema} onSubmit={() => {}} />
+			<svelte:fragment slot="error" let:error>
+				<ErrorDisplay name={error.name} message={error.message} />
+			</svelte:fragment>
+		</JSONSchemaParser>
+		<pre>{credential.expand.templates[0].schema}</pre>
+		<div class="w-full">
+			<ion-button expand="block" on:click={getCredential} on:keydown={getCredential} aria-hidden
+				>Get this credential</ion-button
+			>
+			<ion-button expand="block" href="/home">decline</ion-button>
+		</div>
+	</div>
+	<ion-modal is-open={isModalOpen} backdrop-dismiss={false} transition:fly class="visible">
+		<ion-content class="ion-padding">
+			<div class="flex h-full flex-col justify-around">
+				<div>
+					{#if !isCredentialVerified}
+						We are generating this credential
+						<d-credential-card name={credential.name} issuer={credential.issuer} description={credential.description} />
+						<LottiePlayer
+							src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
+							autoplay={true}
+							loop={true}
+							renderer="svg"
+							background="transparent"
+						/>
+					{:else}
+						<div class="flex w-full justify-around">
+							<ion-icon icon={thumbsUpOutline} class="mx-auto my-6 text-9xl text-green-400"></ion-icon>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</ion-content>
+	</ion-modal>
+</ion-content>
diff --git a/src/routes/(protected)/home/+page.svelte b/src/routes/(protected)/home/+page.svelte
index d55723f9..c77170c8 100644
--- a/src/routes/(protected)/home/+page.svelte
+++ b/src/routes/(protected)/home/+page.svelte
@@ -16,7 +16,7 @@
 
 		<div class="flex flex-col gap-2">
 			{#each services as service}
-				<d-credential-service name={service.name} issuer={service.issuer} href={`/request/${service.id}`} />
+				<d-credential-service name={service.name} issuer={service.issuer} href={`/${service.id}/credential-offer`} />
 			{/each}
 		</div>
 	{/await}
diff --git a/src/routes/(protected)/request/[id]/+page.svelte b/src/routes/(protected)/request/[id]/+page.svelte
deleted file mode 100644
index 53d2f677..00000000
--- a/src/routes/(protected)/request/[id]/+page.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import Logo from '$lib/components/atoms/Logo.svelte';
-	export let data:string
-</script>
-
-<ion-header>
-	<ion-toolbar>
-		<ion-title>
-			<div class="flex items-center gap-2">
-				<Logo />
-				<h1 class="text-2xl">Wallet</h1>
-			</div>
-		</ion-title>
-	</ion-toolbar>
-</ion-header>
-
-<ion-content fullscreen class="ion-padding space-y-10">
-	{JSON.stringify(data)}
-</ion-content>
diff --git a/src/routes/(protected)/scan/+page.svelte b/src/routes/(protected)/scan/+page.svelte
index 9fb09837..f0af5277 100644
--- a/src/routes/(protected)/scan/+page.svelte
+++ b/src/routes/(protected)/scan/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import Modal from '$lib/components/molecules/Modal.svelte';
 	import Scanner from '$lib/components/organisms/scanner/Scanner.svelte';
 	import { parseQr, verifyCredential, type Credential } from '$lib/components/organisms/scanner/tools';
@@ -9,7 +8,6 @@
 	let res: any;
 
 	const request = async (credential: Credential) => {
-		// isModalOpen = false;
 		res = await verifyCredential(credential);
 	};
 </script>
@@ -21,12 +19,10 @@
 		isModalOpen = true;
 	}}
 >
-	<!-- {JSON.stringify(res)} -->
 	<Modal {isModalOpen} closeCb={scan}>
 		{@const parsedQr = parseQr(barcode)}
 		{#if !(parsedQr?.result === 'ok')}
 			<ion-title>{parsedQr?.message || 'error'}</ion-title>
-			<!-- {barcode} -->
 		{:else}
 			{@const { name, issuedBy, url } = parsedQr.credential}
 			<ion-title>{name}</ion-title>