diff --git a/.env.example b/.env.example
deleted file mode 100644
index 815d6d0..0000000
--- a/.env.example
+++ /dev/null
@@ -1,2 +0,0 @@
-PUBLIC_SUPABASE_URL=""
-PUBLIC_SUPABASE_ANON_KEY=""
\ No newline at end of file
diff --git a/src/lib/components/FollowButton.svelte b/src/lib/components/FollowButton.svelte
index ef82a37..1224e85 100644
--- a/src/lib/components/FollowButton.svelte
+++ b/src/lib/components/FollowButton.svelte
@@ -10,7 +10,7 @@
 
 {#if isFollowed}
 	<button
-		class="btn btn-secondary min-w-fit rounded-full px-4 text-lg text-white shadow-lg"
+		class="btn btn-secondary min-w-fit rounded-full px-4 text-sm text-white shadow-lg"
 		in:fade
 	>
 		<Icon data={check} />
@@ -18,7 +18,7 @@
 	</button>
 {:else}
 	<button
-		class="btn btn-primary min-w-fit rounded-full px-4 text-lg text-white shadow-lg"
+		class="btn btn-primary min-w-fit rounded-full px-4 text-sm text-white shadow-lg"
 		on:click={clickCallback}
 		in:fade
 	>
diff --git a/src/lib/components/LoginButton.svelte b/src/lib/components/LoginButton.svelte
index 7d13a40..bd47d02 100644
--- a/src/lib/components/LoginButton.svelte
+++ b/src/lib/components/LoginButton.svelte
@@ -4,6 +4,6 @@
 
 <a
 	href={loginRoute}
-	class="btn btn-primary btn-md min-w-52 rounded-full px-4 text-lg font-bold text-white shadow-lg"
+	class="btn btn-primary btn-sm min-w-52 rounded-full px-4 text-lg font-bold text-white shadow-lg"
 	>Open Holopass</a
 >
diff --git a/src/lib/components/PassCard.svelte b/src/lib/components/PassCard.svelte
index a028568..0faf53c 100644
--- a/src/lib/components/PassCard.svelte
+++ b/src/lib/components/PassCard.svelte
@@ -7,10 +7,17 @@
 	import { htmlifyLinks } from '../../html';
 	import * as profiles from '../../profiles';
 	import Oshi from './Oshi.svelte';
+	import {profileRedirectURL} from "../../profiles";
+	import LoginButton from "$lib/components/LoginButton.svelte";
+	import FollowButton from "$lib/components/FollowButton.svelte";
+	import {invalidateAll} from "$app/navigation";
 
 	export let profile: Tables<'profiles'>;
+	export let pass: Tables<'profiles'>;
 	export let oshi: Promise<Tables<'talents'>[]>;
 	export let badges: Promise<Tables<'badges'>[]>;
+	export let isFollowed: boolean;
+	export let myPass: boolean;
 	export let following: Promise<{ following: Tables<'profiles'>[]; count: number }> = {
 		following: [],
 		count: 0
@@ -20,16 +27,31 @@
 		count: 0
 	};
 
-	let nickname = profile.nickname ?? '';
-	let nicknameJP = profile.nickname_jp ?? '';
-	$: avatarURL = profile.avatar_url ?? '';
-	let location = profile.location ?? '';
-	let bio = profile.bio ?? '';
-	let favStream = profile.fav_stream ?? '';
+	if (!pass) pass = profile;
+
+	let nickname = pass.nickname ?? '';
+	let nicknameJP = pass.nickname_jp ?? '';
+	$: avatarURL = pass.avatar_url ?? '';
+	let location = pass.location ?? '';
+	let bio = pass.bio ?? '';
+	let favStream = pass.fav_stream ?? '';
+
+	async function handleFollow(profile: Tables<'profiles'>, pass: Tables<'profiles'>) {
+		const resp = await fetch(`/pass/${pass?.id}/follow`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ profile })
+		});
+		if (resp.ok) {
+			invalidateAll();
+		} else {
+			console.error('Failed to follow user with status:', resp.status);
+		}
+	}
 </script>
 
 <div
-	class={profiles.isDaniru(profile.id)
+	class={profiles.isDaniru(pass.id)
 		? 'card bg-gradient-to-br from-primary/50 to-secondary/50 p-4 shadow-2xl shadow-primary/60'
 		: 'card bg-slate-50 p-4 shadow-lg'}
 	id="pass-card"
@@ -38,6 +60,25 @@
 		<section class="w-3/5 flex-1" id="profile-pic">
 			<Avatar {avatarURL} />
 			<p class="mb-4 text-center align-middle text-slate-600">holopass</p>
+			{#if !myPass}
+				<div class="flex justify-center">
+					{#if profile && pass}
+						<FollowButton
+								{isFollowed}
+								clickCallback={() => profile && pass && handleFollow(profile, pass)}
+						/>
+					{:else}
+						<div class="flex flex-col gap-4">
+							<p class="text-center text-2xl font-semibold tracking-tight text-secondary">
+								Login or Signup to follow
+							</p>
+							<LoginButton
+									loginRoute={`/login?redirectAfterLoginURL=${profileRedirectURL(pass?.id || '')}`}
+							/>
+						</div>
+					{/if}
+				</div>
+			{/if}
 		</section>
 
 		<section class="flex-2 w-2/3 space-y-4 p-4">
@@ -78,11 +119,11 @@
 
 	<section class="flex flex-row place-content-evenly p-4" id="connections">
 		{#await following then { count }}
-			<Counter {count} url={`/pass/${profile.id}/connections?type=following`} text="Following" />
+			<Counter {count} url={`/pass/${pass.id}/connections?type=following`} text="Following" />
 		{/await}
 
 		{#await followers then { count }}
-			<Counter {count} url={`/pass/${profile.id}/connections?type=followers`} text="Followers" />
+			<Counter {count} url={`/pass/${pass.id}/connections?type=followers`} text="Followers" />
 		{/await}
 	</section>
 
diff --git a/src/routes/pass/[id]/+page.svelte b/src/routes/pass/[id]/+page.svelte
index 09facef..1f1de4f 100644
--- a/src/routes/pass/[id]/+page.svelte
+++ b/src/routes/pass/[id]/+page.svelte
@@ -4,32 +4,14 @@
 	import { MetaTags } from 'svelte-meta-tags';
 
 	import PassCard from '$lib/components/PassCard.svelte';
-	import FollowButton from '$lib/components/FollowButton.svelte';
 
 	import type { PageData } from './$types';
-	import type { Tables } from '$lib/database.types';
-	import { invalidateAll } from '$app/navigation';
-	import LoginButton from '$lib/components/LoginButton.svelte';
-	import { profileRedirectURL } from '../../../profiles';
 
 	export let data: PageData;
 
 	// in this context pass is another user's "profile"
 	// and profile is the current user's profile
 	$: ({ pass, oshi, badges, profile, following, followers, isFollowed } = data);
-
-	async function handleFollow(profile: Tables<'profiles'>, pass: Tables<'profiles'>) {
-		const resp = await fetch(`/pass/${pass?.id}/follow`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ profile })
-		});
-		if (resp.ok) {
-			invalidateAll();
-		} else {
-			console.error('Failed to follow user with status:', resp.status);
-		}
-	}
 </script>
 
 <MetaTags
@@ -48,23 +30,5 @@
 	class="mx-4 space-y-6 pb-36 pt-4"
 	transition:fade={{ delay: 0, duration: 200 }}
 >
-	<PassCard profile={pass} {oshi} {badges} {followers} {following} />
-
-	<div class="flex justify-center">
-		{#if profile && pass}
-			<FollowButton
-				{isFollowed}
-				clickCallback={() => profile && pass && handleFollow(profile, pass)}
-			/>
-		{:else}
-			<div class="flex flex-col gap-4">
-				<p class="text-center text-2xl font-semibold tracking-tight text-secondary">
-					Login or Signup to follow
-				</p>
-				<LoginButton
-					loginRoute={`/login?redirectAfterLoginURL=${profileRedirectURL(pass?.id || '')}`}
-				/>
-			</div>
-		{/if}
-	</div>
+	<PassCard {pass} {profile} {oshi} {badges} {followers} {following} {isFollowed} />
 </div>