diff --git a/app/src/lib/components/Stream.svelte b/app/src/lib/components/Stream.svelte
new file mode 100644
index 00000000..2a9b7e28
--- /dev/null
+++ b/app/src/lib/components/Stream.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { user } from '$lib/stores/user';
+	import { onDestroy } from 'svelte';
+
+	const ws_token = `?access_token=${$user.bearer_token}`
+
+    let source = "/api/camera/stream"+ ws_token;
+
+	onDestroy(() => {
+		source = '#';
+	});
+</script>
+
+<div class="w-full h-full">
+	<img
+		src={source}
+		class="absolute object-cover blur-3xl w-full h-full -z-10"
+		alt="Live stream is down"
+	/>
+	<img src={source} class="object-contain w-full h-full" alt="Live stream is down" />
+</div>
diff --git a/app/src/routes/peripherals/camera/Camera.svelte b/app/src/routes/peripherals/camera/Camera.svelte
index 89dc387f..254fe217 100644
--- a/app/src/routes/peripherals/camera/Camera.svelte
+++ b/app/src/routes/peripherals/camera/Camera.svelte
@@ -1,24 +1,14 @@
 <script lang="ts">
-    import { user } from '$lib/stores/user';
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
     import Camera from '~icons/mdi/camera-outline'
     import Record from '~icons/mdi/radio-button-unchecked'
 	import CameraSetting from './CameraSetting.svelte';
-	import { onDestroy } from 'svelte';
-
-    const ws_token = `?access_token=${$user.bearer_token}`
-
-    let source = "/api/camera/stream"+ ws_token;
-
-    onDestroy(() => {
-        source = ""
-    })
+	import Stream from '$lib/components/Stream.svelte';
 </script>
 
-
 <SettingsCard collapsible={false}>
     <Camera slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
     <span slot="title">Camera</span>
-    <img src={source} alt="Live-stream" class="w-full rounded-lg shadow-lg" />
+    <Stream />
     <CameraSetting />
 </SettingsCard>
\ No newline at end of file