diff --git a/resources/js/theme.js b/resources/js/theme.js
index d82284a..346e6e8 100644
--- a/resources/js/theme.js
+++ b/resources/js/theme.js
@@ -19,4 +19,46 @@ if(localStorage.theme) {
} else {
// Default Dark Theme
localStorage.theme = 'dark';
-}
\ No newline at end of file
+}
+
+// Ability to disable blur effects for slower devices
+const LOCAL_STORAGE_KEY = 'blur';
+const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur");
+
+function setCSSFilter(selector, value) {
+ document.querySelectorAll(selector).forEach(el => {
+ el.style.backdropFilter = value
+ });
+}
+
+function applyBlur(enabled) {
+ if (!enabled) {
+ setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none');
+ return;
+ }
+
+ setCSSFilter('.backdrop-blur-lg', 'blur(16px)');
+ setCSSFilter('.backdrop-blur', 'blur(8px)');
+ setCSSFilter('.backdrop-blur-sm', 'blur(4px)');
+}
+
+function initBlurToggle() {
+ const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
+ const enabled = storedValue === null ? true : storedValue === 'true';
+
+ // initialize UI and DOM
+ applyBlur(enabled);
+ if (blurCheckbox) blurCheckbox.checked = enabled;
+
+ // add event listener
+ if (blurCheckbox) {
+ blurCheckbox.addEventListener('click', (e) => {
+ console.log("Received Event");
+ const isEnabled = e.target.checked;
+ applyBlur(isEnabled);
+ localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
+ });
+ }
+}
+
+initBlurToggle();
\ No newline at end of file
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index ec5af3d..86fee6c 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -59,6 +59,11 @@
+
+ {{-- Expiremental --}}
+
{{ __('Blur effects') }}
+