diff --git a/src/routes/DiscordProfilePicture.svelte b/src/lib/components/DiscordProfilePicture.svelte
old mode 100755
new mode 100644
similarity index 83%
rename from src/routes/DiscordProfilePicture.svelte
rename to src/lib/components/DiscordProfilePicture.svelte
index 4886947..9263422
--- a/src/routes/DiscordProfilePicture.svelte
+++ b/src/lib/components/DiscordProfilePicture.svelte
@@ -2,7 +2,7 @@
 	import clsx from 'clsx'
 	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
 	import { spring } from 'svelte/motion'
-	import { contextId as ctxId } from './CommunitySlice.svelte'
+	import { contextId as ctxId } from '../../routes/CommunitySlice.svelte'
 	import { lerp } from '$lib/Helper.mjs'
 	import { inview } from 'svelte-inview'
 
@@ -22,6 +22,13 @@
 	export let contextId = ctxId
 	export let isAnimating = true
 
+	/** @type {HTMLElement}*/
+	export let element = undefined
+	/** @type {HTMLImageElement}*/
+	export let imageWrapper
+	/** @type {HTMLImageElement}*/
+	export let imageElement
+
 	const { biggestSize, getSectionElement } = getContext(contextId)
 	const dispatch = createEventDispatcher()
 
@@ -34,8 +41,6 @@
 		precision: 0.001
 	})
 
-	/** @type {HTMLImageElement}*/
-	let imageElement
 	let hasEnteredView = false
 	let hasImageLoaded = false
 
@@ -92,6 +97,7 @@
 	style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
 	style="width: {size}px; height: {size}px;--delay: {delay}ms;"
 	aria-hidden="true"
+	bind:this={element}
 >
 	<div
 		class={clsx(
@@ -103,17 +109,20 @@
 		class:_animate={isAnimating && hasEnteredView}
 		on:inview_enter={onViewEnter}
 	>
-		<img
-			class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
-			bind:this={imageElement}
-			on:load={() => (hasImageLoaded = true)}
-			src={image}
-			alt="community profile picture"
-			aria-hidden="true"
-			on:mouseenter={(event) => dispatch('hover', event)}
-			class:hover:scale-125={!!quote}
-			loading="lazy"
-		/>
+		<div class="" bind:this={imageWrapper}>
+			<img
+				class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
+				bind:this={imageElement}
+				on:load={() => (hasImageLoaded = true)}
+				src={image}
+				alt="community profile picture"
+				aria-hidden="true"
+				on:mouseenter={(event) => dispatch('hover', event)}
+				class:hover:scale-125={!!quote}
+				loading="lazy"
+			/>
+			<slot />
+		</div>
 
 		{#if quote}
 			<div class="quote" aria-hidden="true">
diff --git a/src/lib/images/amongus/green.webp b/src/lib/images/amongus/green.webp
new file mode 100644
index 0000000..5d89316
Binary files /dev/null and b/src/lib/images/amongus/green.webp differ
diff --git a/src/lib/images/amongus/gun.webp b/src/lib/images/amongus/gun.webp
new file mode 100644
index 0000000..e8bf9bf
Binary files /dev/null and b/src/lib/images/amongus/gun.webp differ
diff --git a/src/lib/images/amongus/red.webp b/src/lib/images/amongus/red.webp
new file mode 100644
index 0000000..5f6c5c5
Binary files /dev/null and b/src/lib/images/amongus/red.webp differ
diff --git a/src/routes/CommunitySlice.svelte b/src/routes/CommunitySlice.svelte
index ca047d9..91a18c2 100755
--- a/src/routes/CommunitySlice.svelte
+++ b/src/routes/CommunitySlice.svelte
@@ -5,10 +5,11 @@
 <script>
 	import Button from '$lib/components/Button.svelte'
 	import DiscordIcon from '~icons/prime/discord'
-	import DiscordProfilePicture from './DiscordProfilePicture.svelte'
+	import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
 	import { setContext } from 'svelte'
 	import Title from '$lib/components/Title.svelte'
 	import background from '$lib/images/community-bg.webp'
+	import amongUsGreenImage from '$lib/images/amongus/green.webp'
 
 	let sectionElement
 	let isDraggingChan = false
@@ -135,10 +136,10 @@
 			class: 'outline-green-500'
 		},
 		{
-			image: '/imgs/profile_pictures/qwaranou.webp',
+			image: amongUsGreenImage,
 			coordinates: [873, 224],
 			size: 79,
-			class: 'outline-slate-500'
+			class: 'outline-green-500'
 		},
 		{
 			image: '/imgs/profile_pictures/SimplyKyle!.webp',
@@ -208,8 +209,8 @@
 		</a>
 	</div>
 
-	<div class="absolute w-[1024px]">
-		<div class="flex h-full origin-bottom-right flex-wrap gap-4">
+	<div class="absolute w-[1024px] select-none">
+		<div class="flex h-full origin-bottom-right select-none flex-wrap gap-4">
 			{#each profiles as { onDragEnd, onDragStart, onHover, ...props }}
 				<DiscordProfilePicture
 					{...props}
@@ -222,7 +223,7 @@
 	</div>
 	<img
 		src={background}
-		class="absolute top-0 -z-10 min-w-[1400px]"
+		class="absolute top-0 -z-10 min-w-[1400px] select-none"
 		alt=""
 		aria-hidden="true"
 		loading="lazy"
diff --git a/src/routes/Hypractive.svelte b/src/routes/Hypractive.svelte
index a7ee468..f66d183 100755
--- a/src/routes/Hypractive.svelte
+++ b/src/routes/Hypractive.svelte
@@ -20,7 +20,7 @@
 	import GitTile from '$lib/components/GitTile.svelte'
 	import { lerp } from '$lib/Helper.mjs'
 	import { cubicInOut, expoInOut } from 'svelte/easing'
-	import DiscordProfilePicture from './DiscordProfilePicture.svelte'
+	import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
 	import { setContext } from 'svelte'
 
 	const click$ = new Subject()
diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte
index 697fa5c..8a4743a 100755
--- a/src/routes/PreviewRiceSlice.svelte
+++ b/src/routes/PreviewRiceSlice.svelte
@@ -43,7 +43,7 @@
 		use:inview={{ threshold: 0.5 }}
 		on:inview_enter={() => {
 			isVisible = true
-			videoElement.play()
+			!isPaused && videoElement.play()
 		}}
 		on:inview_leave={() => {
 			isVisible = false
diff --git a/static/imgs/square_pattern.svg b/static/imgs/square_pattern.svg
new file mode 100644
index 0000000..05c5876
--- /dev/null
+++ b/static/imgs/square_pattern.svg
@@ -0,0 +1,38 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="26.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="50.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="74.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="98.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="122.5" y="2.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="2.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="26.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="50.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="74.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="98.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="122.5" y="26.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="2.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="26.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="50.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="74.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="98.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="122.5" y="50.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="2.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="26.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="50.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="74.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="98.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="122.5" y="74.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="2.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="26.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="50.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="74.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="98.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="122.5" y="98.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="2.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="26.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="50.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="74.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="98.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+<rect x="122.5" y="122.5" width="19" height="19" rx="3.5" stroke="#D9D9D9"/>
+</svg>