diff --git a/src/lib/components/MyProfile/UserSettings.svelte b/src/lib/components/MyProfile/UserSettings.svelte
index d3b9f20..ee27d21 100644
--- a/src/lib/components/MyProfile/UserSettings.svelte
+++ b/src/lib/components/MyProfile/UserSettings.svelte
@@ -2,7 +2,6 @@
 	import { Button } from '$lib/components/ui/button';
 	import { copyToClipboard } from '$lib/utils/copyToClipboard';
 	import { confirmDelete } from '$lib/utils/confirmDelete';
-	import { AudioLines } from 'lucide-svelte';
 	import { enhance } from '$app/forms';
 	import type { PageData } from '../../../routes/profile/$types';
 	import { IconBrandGithub, IconTrash, IconCopy } from '@tabler/icons-svelte';
@@ -20,24 +19,6 @@
 	</h1>
 	<div class="mt-6">
 		<dl class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2">
-			<div class="px-4 py-6 sm:col-span-1 sm:px-0">
-				<dt class="text-lg">Spotify Integration</dt>
-				<dd class="mt-2">
-					{#if data.spotifyToken}
-						<form action="?/unlinkSpotify" method="POST" use:enhance>
-							<Button variant="destructive" type="submit" class="flex items-center">
-								<AudioLines class="mr-2" />
-								<span>Unlink Spotify</span>
-							</Button>
-						</form>
-					{:else}
-						<Button href="/api/spotify/login">
-							<AudioLines class="mr-2 text-green-700" />
-							<span>Link Spotify</span>
-						</Button>
-					{/if}
-				</dd>
-			</div>
 			<div class="px-4 py-6 sm:col-span-1 sm:px-0">
 				<dt class="text-lg">Collaboration Status</dt>
 				<dd class="mt-2">
diff --git a/src/routes/profile/integrations/+page.server.ts b/src/routes/profile/integrations/+page.server.ts
index 61055eb..83fd82f 100644
--- a/src/routes/profile/integrations/+page.server.ts
+++ b/src/routes/profile/integrations/+page.server.ts
@@ -7,6 +7,7 @@ import { redirect } from '@sveltejs/kit';
 import type { User } from '@prisma/client';
 import { getGitHubUserIdFromImageUrl } from '$lib/utils/getGithubIDFromImage';
 import { createRecentActivity } from '$lib/utils/createRecentActivity';
+import { unlinkSpotify } from '$lib/utils/spotify/unlinkSpotify';
 
 // Define the user variable with a possible null
 let user: User | null = null;
@@ -89,5 +90,16 @@ export const actions: Actions = {
 			console.error(err);
 			return fail(500, { message: 'Something went wrong.' });
 		}
+	},
+	unlinkSpotify: async () => {
+		if (user) {
+			try {
+				// delete
+				unlinkSpotify(user.githubId);
+			} catch (error) {
+				console.error(error);
+				throw Error('Failed to delete user');
+			}
+		}
 	}
 };
diff --git a/src/routes/profile/integrations/+page.svelte b/src/routes/profile/integrations/+page.svelte
index 43be502..498033a 100644
--- a/src/routes/profile/integrations/+page.svelte
+++ b/src/routes/profile/integrations/+page.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
+	import Button from '$lib/components/ui/button/button.svelte';
 	import FormCardHeader from '$lib/components/MyProfile/FormCardHeader.svelte';
 	import LinkForm from '$lib/components/MyProfile/LinkForm.svelte';
 	import UserLinks from '$lib/components/MyProfile/UserLinks.svelte';
 	import ImportFromGithub from '$lib/components/MyProfile/ImportFromGithub.svelte';
 	import type { PageData } from '../$types';
+	import { AudioLines } from 'lucide-svelte';
+	import { enhance } from '$app/forms';
+	import MusicPlayer from '$lib/components/Shared/MusicPlayer.svelte';
 
 	export let data: PageData;
 </script>
@@ -15,17 +19,50 @@
 	Integrations
 </h1>
 
-<Card.Root class="xl:col-span-2">
-	<FormCardHeader
-		description="The links visible on your profile. You can drag links around to modify the order"
-		title="Links"
-	>
-		<div class="flex flex-row items-stretch gap-4">
-			<LinkForm data={data.form} linksLength={data.links.length} links={data.links} />
-			<ImportFromGithub {data} />
-		</div>
-	</FormCardHeader>
-	<Card.Content>
-		<UserLinks links={data.links} />
-	</Card.Content>
-</Card.Root>
+<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
+	<div class="custom-links">
+		<Card.Root class="max-h-[300px] overflow-y-auto xl:col-span-2">
+			<FormCardHeader
+				description="The links visible on your profile. You can drag links around to modify the order"
+				title="Links"
+			>
+				<div class="flex flex-row items-stretch gap-4">
+					<LinkForm data={data.form} linksLength={data.links.length} links={data.links} />
+					<ImportFromGithub {data} />
+				</div>
+			</FormCardHeader>
+			<Card.Content>
+				<UserLinks links={data.links} />
+			</Card.Content>
+		</Card.Root>
+	</div>
+	<div class="spotify">
+		<Card.Root class="max-h-[300px] overflow-y-auto xl:col-span-2">
+			<Card.Header>
+				<Card.Title>Spotify</Card.Title>
+				<Card.Description>
+					Connect your Spotify account to display your currently playing song
+				</Card.Description>
+			</Card.Header>
+			<Card.Content>
+				{#if data.spotifyToken}
+					<div class="flex flex-col space-y-4">
+						<form action="?/unlinkSpotify" method="POST" use:enhance>
+							<Button variant="destructive" type="submit" class="flex items-center">
+								<AudioLines class="mr-2" />
+								<span>Unlink Spotify</span>
+							</Button>
+						</form>
+
+						<MusicPlayer githubUsername={data.userData.username} />
+					</div>
+				{:else}
+					<Button href="/api/spotify/login">
+						<AudioLines class="mr-2 text-green-700" />
+						<span>Link Spotify</span>
+					</Button>
+				{/if}
+			</Card.Content>
+		</Card.Root>
+	</div>
+</div>
diff --git a/src/routes/profile/settings/+page.server.ts b/src/routes/profile/settings/+page.server.ts
index e27c9e5..24e560f 100644
--- a/src/routes/profile/settings/+page.server.ts
+++ b/src/routes/profile/settings/+page.server.ts
@@ -1,6 +1,5 @@
 import type { Actions, PageServerLoad } from './$types';
 import { deleteUser } from '$lib/utils/deleteUser';
-import { unlinkSpotify } from '$lib/utils/spotify/unlinkSpotify';
 import { updateOpenToCollaborating } from '$lib/utils/updateOpenToCollaborating';
 import { fail } from 'sveltekit-superforms';
 import { getGitHubUserIdFromImageUrl } from '$lib/utils/getGithubIDFromImage';
@@ -58,16 +57,5 @@ export const actions: Actions = {
 				throw Error('Failed to delete user');
 			}
 		}
-	},
-	unlinkSpotify: async () => {
-		if (user) {
-			try {
-				// delete
-				unlinkSpotify(user.githubId);
-			} catch (error) {
-				console.error(error);
-				throw Error('Failed to delete user');
-			}
-		}
 	}
 };