diff --git a/package.json b/package.json
index 0a0dc9f2a..a4052c62f 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
 		"@ffmpeg.wasm/core-mt": "0.13.2",
 		"@ffmpeg.wasm/main": "^0.13.1",
 		"@leveluptuts/svelte-side-menu": "^1.1.0",
+		"@lottiefiles/dotlottie-svelte": "^0.4.0",
 		"@oddbird/popover-polyfill": "^0.4.4",
 		"@prisma/client": "5.18.0",
 		"@sentry/profiling-node": "^8.28.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c274669cc..62e7fc374 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@leveluptuts/svelte-side-menu':
         specifier: ^1.1.0
         version: 1.1.0(svelte@5.0.4)
+      '@lottiefiles/dotlottie-svelte':
+        specifier: ^0.4.0
+        version: 0.4.0(svelte@5.0.4)
       '@oddbird/popover-polyfill':
         specifier: ^0.4.4
         version: 0.4.4
@@ -850,6 +853,14 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
+  '@lottiefiles/dotlottie-svelte@0.4.0':
+    resolution: {integrity: sha512-b4brpncaFsiuxTjEtEJUT92QUZ2eXRvQ5wFxfMXypkcXLmpVQh7+XNAk7Vw+tudUwGN1uB2l7SMd+2UrdQeLNQ==}
+    peerDependencies:
+      svelte: ^4.0.0
+
+  '@lottiefiles/dotlottie-web@0.37.0':
+    resolution: {integrity: sha512-dCtQkYlq9GDswJNmcIlUaAskxrsJ56SRhY8woNsHuIPWy+tfP9tgf1fA9fZ1Oj72DVdyYkK0DxLk58HhBrmpBQ==}
+
   '@mapbox/node-pre-gyp@1.0.11':
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
@@ -1116,46 +1127,55 @@ packages:
     resolution: {integrity: sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.24.0':
     resolution: {integrity: sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.24.0':
     resolution: {integrity: sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.24.0':
     resolution: {integrity: sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
     resolution: {integrity: sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.24.0':
     resolution: {integrity: sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.24.0':
     resolution: {integrity: sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.24.0':
     resolution: {integrity: sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.24.0':
     resolution: {integrity: sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.24.0':
     resolution: {integrity: sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==}
@@ -5027,6 +5047,13 @@ snapshots:
     dependencies:
       svelte: 5.0.4
 
+  '@lottiefiles/dotlottie-svelte@0.4.0(svelte@5.0.4)':
+    dependencies:
+      '@lottiefiles/dotlottie-web': 0.37.0
+      svelte: 5.0.4
+
+  '@lottiefiles/dotlottie-web@0.37.0': {}
+
   '@mapbox/node-pre-gyp@1.0.11':
     dependencies:
       detect-libc: 2.0.3
diff --git a/src/lib/player/AudioReactions.svelte b/src/lib/player/AudioReactions.svelte
new file mode 100644
index 000000000..d075e2421
--- /dev/null
+++ b/src/lib/player/AudioReactions.svelte
@@ -0,0 +1,267 @@
+<script lang="ts">
+	import { player_time } from '$/state/player_time';
+	import { player } from '$state/player';
+	import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
+	import { onMount } from 'svelte';
+
+	interface Reaction {
+		id: string;
+		timestamp: number;
+		type: string;
+		isPlaying?: boolean;
+		showAnimation?: boolean;
+		userIp?: string;
+		createdAt: number;
+		playbackTriggered?: boolean;
+	}
+
+	let reactions: Reaction[] = [];
+	let reactionContainer: HTMLElement;
+	let userIp: string = '';
+
+	onMount(async () => {
+		try {
+			const response = await fetch('https://api.ipify.org?format=json');
+			const data = await response.json();
+			userIp = data.ip;
+		} catch (error) {
+			console.error('Failed to fetch IP:', error);
+			userIp = 'unknown';
+		}
+	});
+
+	$: {
+		reactions = reactions.map((reaction) => {
+			if (!$player_time) return reaction;
+
+			const isNearTimestamp = Math.abs(reaction.timestamp - $player_time) < 6;
+
+			if (isNearTimestamp && !reaction.playbackTriggered) {
+				setTimeout(() => {
+					reactions = reactions.map((r) =>
+						r.id === reaction.id ? { ...r, playbackTriggered: false, showAnimation: false } : r
+					);
+				}, 3000);
+
+				return {
+					...reaction,
+					isPlaying: true,
+					showAnimation: true,
+					playbackTriggered: true
+				};
+			}
+
+			if (!isNearTimestamp && reaction.playbackTriggered) {
+				return {
+					...reaction,
+					isPlaying: false,
+					playbackTriggered: false
+				};
+			}
+
+			return {
+				...reaction,
+				isPlaying: isNearTimestamp
+			};
+		});
+	}
+
+	const REACTION_TYPES = {
+		HEART: 'heart',
+		LAUGH: 'laugh',
+		THUMBSUP: 'thumbsup',
+		FIRE: 'fire'
+	};
+
+	const REACTION_ANIMATIONS = {
+		[REACTION_TYPES.HEART]:
+			'https://lottie.host/34670cfb-d0a6-4c66-9b2d-01a1893cf2f6/FdPrWU8P2Q.lottie',
+		[REACTION_TYPES.LAUGH]:
+			'https://lottie.host/ff1d9006-010f-45a7-b122-0596f9d64c9c/QNv44zJSpn.lottie',
+		[REACTION_TYPES.THUMBSUP]:
+			'https://lottie.host/dc8fcca8-83c0-4aff-8add-142bd2f9e644/Jtyv9pmW93.lottie',
+		[REACTION_TYPES.FIRE]:
+			'https://lottie.host/0de1fd7f-2fb3-41ff-aa75-4f678fae8eea/JwzDWFdRd1.lottie'
+	};
+
+	function getReactionPosition(timestamp: number) {
+		if (!$player.audio?.duration || $player.audio?.duration <= 0) return '0%';
+		const position = (timestamp / $player.audio?.duration) * 100;
+		return `${Math.min(Math.max(position, 0), 100)}%`;
+	}
+
+	function canAddReaction(timestamp: number): boolean {
+		const nearbyReaction = reactions.find(
+			(reaction) => reaction.userIp === userIp && Math.abs(reaction.timestamp - timestamp) < 10
+		);
+
+		return !nearbyReaction;
+	}
+
+	function addReaction(type: string) {
+		const currentTime = $player.audio?.currentTime || 0;
+
+		if (!canAddReaction(currentTime)) {
+			console.log('Please wait before adding another reaction');
+			return;
+		}
+
+		const newReaction = {
+			id: crypto.randomUUID(),
+			timestamp: currentTime,
+			type,
+			isPlaying: false,
+			showAnimation: true,
+			userIp,
+			createdAt: Date.now(),
+			playbackTriggered: false
+		};
+
+		console.log(`Adding reaction at timestamp: ${newReaction.timestamp}`);
+		reactions = [...reactions, newReaction];
+
+		setTimeout(() => {
+			reactions = reactions.map((reaction) =>
+				reaction.id === newReaction.id ? { ...reaction, showAnimation: false } : reaction
+			);
+		}, 5000);
+
+		console.log('reactions', reactions);
+	}
+
+	function removeReaction(reactionId: string) {
+		const reaction = reactions.find((r) => r.id === reactionId);
+		if (reaction?.userIp === userIp) {
+			reactions = reactions.filter((r) => r.id !== reactionId);
+		}
+	}
+</script>
+
+<div class="reactions-container" bind:this={reactionContainer}>
+	{#each reactions as reaction (reaction.id)}
+		<div
+			class="reaction-marker"
+			style="left: {getReactionPosition(reaction.timestamp)}"
+			title="Reaction at {new Date(reaction.timestamp * 1000).toISOString().substr(11, 8)}"
+		>
+			<button
+				aria-label="Reaction at {new Date(reaction.timestamp * 1000).toISOString().substr(11, 8)}"
+				class="reaction-wrapper {reaction.userIp === userIp ? 'removable' : ''}"
+				on:mouseenter={() => {
+					reactions = reactions.map((r) =>
+						r.id === reaction.id ? { ...r, showAnimation: true } : r
+					);
+				}}
+				on:mouseleave={() => {
+					reactions = reactions.map((r) =>
+						r.id === reaction.id ? { ...r, showAnimation: false } : r
+					);
+				}}
+				on:click={() => removeReaction(reaction.id)}
+			>
+				<div class="reaction-dot"></div>
+				<div class="reaction-animation" class:is-playing={reaction.showAnimation}>
+					<DotLottieSvelte
+						src={REACTION_ANIMATIONS[reaction.type]}
+						autoplay={reaction.showAnimation}
+						loop={true}
+					/>
+				</div>
+			</button>
+		</div>
+	{/each}
+</div>
+
+<div class="reaction-buttons">
+	{#each Object.entries(REACTION_TYPES) as [key, type]}
+		<button class="reaction-button" on:click={() => addReaction(type)}>
+			<DotLottieSvelte src={REACTION_ANIMATIONS[type]} autoplay={false} playOnHover />
+		</button>
+	{/each}
+</div>
+
+<style>
+	.reactions-container {
+		position: absolute;
+		width: 100%;
+		height: 30px;
+		bottom: 100%;
+		pointer-events: none;
+	}
+
+	.reaction-marker {
+		position: absolute;
+		bottom: 0;
+		transform: translateX(-50%);
+		z-index: 99;
+	}
+
+	.reaction-wrapper {
+		position: relative;
+		cursor: pointer;
+		pointer-events: auto;
+		padding: 0;
+		background: transparent;
+		border: none;
+	}
+
+	.reaction-wrapper.removable .reaction-dot {
+		background: var(--primary);
+	}
+
+	.reaction-wrapper.removable:hover .reaction-dot {
+		background: var(--error, red);
+	}
+
+	.reaction-dot {
+		width: 5px;
+		height: 5px;
+		background: var(--primary);
+		border-radius: 50%;
+		transition: all 0.2s ease;
+	}
+
+	.reaction-animation {
+		position: absolute;
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%) scale(0);
+		transform-origin: bottom center;
+		opacity: 0;
+		transition: all 0.3s ease;
+		width: 40px;
+		height: 40px;
+		margin-bottom: 8px;
+		pointer-events: none;
+	}
+
+	.reaction-wrapper:hover .reaction-dot {
+		transform: scale(1.5);
+	}
+
+	.reaction-animation.is-playing {
+		transform: translateX(-50%) scale(1);
+		opacity: 1;
+	}
+
+	.reaction-buttons {
+		display: flex;
+		gap: 8px;
+		margin-top: 8px;
+	}
+
+	.reaction-button {
+		padding: 4px;
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		border: none;
+		cursor: pointer;
+		transition: transform 0.2s;
+		background: transparent;
+	}
+
+	.reaction-button:hover {
+		transform: scale(1.1);
+	}
+</style>
diff --git a/src/lib/player/Player.svelte b/src/lib/player/Player.svelte
index f4661bb33..a83ee3651 100644
--- a/src/lib/player/Player.svelte
+++ b/src/lib/player/Player.svelte
@@ -7,6 +7,7 @@
 	import ShareButton from '../share/HairButton.svelte';
 	import { onMount } from 'svelte';
 	import type { Show } from '@prisma/client';
+	import AudioReactions from './AudioReactions.svelte';
 
 	interface Props {
 		initial_show: Show;
@@ -94,6 +95,7 @@
 									style:--media-range-bar-color="var(--white)"
 									style:--media-range-thumb-background="var(--primary)"
 								></media-time-range>
+								<AudioReactions />
 							</div>
 							<media-duration-display></media-duration-display>
 						</div>
diff --git a/src/state/player.ts b/src/state/player.ts
index 89ccef8e6..a11cb4ed3 100644
--- a/src/state/player.ts
+++ b/src/state/player.ts
@@ -5,6 +5,7 @@ import { load_media_session } from '$utilities/media/load_media_session';
 import { minimize, player_window_status, toggle_minimize } from './player_window_status';
 import { get_cached_or_network_show } from './player_offline';
 import { load_state_from_indexed_db, open_db, STORE_NAME, type PlayerState } from './player_utils';
+import { player_time } from './player_time';
 
 export interface Timestamp {
 	label: string;
@@ -140,6 +141,10 @@ const new_player_state = () => {
 	}
 
 	function ontimeupdate() {
+		const current_state = get(player_state);
+		if (current_state.audio && current_state?.current_show?.number) {
+			player_time.set(current_state.audio.currentTime);
+		}
 		save_position();
 	}
 
diff --git a/src/state/player_time.ts b/src/state/player_time.ts
new file mode 100644
index 000000000..433799e33
--- /dev/null
+++ b/src/state/player_time.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const player_time = writable(0);