diff --git a/public/ghost.png b/public/ghost.png
new file mode 100644
index 00000000..8cf4548c
Binary files /dev/null and b/public/ghost.png differ
diff --git a/src-tauri/tauri.linux.conf.json b/src-tauri/tauri.linux.conf.json
index 1fca7d5e..ccea237a 100644
--- a/src-tauri/tauri.linux.conf.json
+++ b/src-tauri/tauri.linux.conf.json
@@ -24,10 +24,10 @@
         "width": 400,
         "height": 500,
         "decorations": false,
-        "label": "Lume",
         "title": "Lume",
         "center": true,
         "resizable": false,
+        "label": "splashscreen",
         "url": "splashscreen"
       }
     ]
diff --git a/src-tauri/tauri.macos.conf.json b/src-tauri/tauri.macos.conf.json
index 07540e10..9ebe7a04 100644
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@@ -25,12 +25,12 @@
         "width": 400,
         "height": 500,
         "decorations": true,
-        "label": "Lume",
         "title": "Lume",
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,
         "center": true,
         "resizable": false,
+        "label": "splashscreen",
         "url": "splashscreen"
       }
     ]
diff --git a/src-tauri/tauri.windows.conf.json b/src-tauri/tauri.windows.conf.json
index 982cdb15..44754cd9 100644
--- a/src-tauri/tauri.windows.conf.json
+++ b/src-tauri/tauri.windows.conf.json
@@ -24,10 +24,10 @@
         "width": 400,
         "height": 500,
         "decorations": false,
-        "label": "Lume",
         "title": "Lume",
         "center": true,
         "resizable": false,
+        "label": "splashscreen",
         "url": "splashscreen"
       }
     ]
diff --git a/src/app.tsx b/src/app.tsx
index 0285b39d..3a319b92 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -220,6 +220,13 @@ const router = createBrowserRouter([
           return { Component: ResetScreen };
         },
       },
+      {
+        path: 'hard-reset',
+        async lazy() {
+          const { HardResetScreen } = await import('@app/auth/hardReset');
+          return { Component: HardResetScreen };
+        },
+      },
     ],
   },
   {
@@ -256,7 +263,7 @@ export default function App() {
     <RouterProvider
       router={router}
       fallbackElement={
-        <div className="flex h-full w-full items-center justify-center bg-black/90">
+        <div className="flex h-full w-full items-center justify-center bg-black/90 backdrop-blur-xl">
           <LoaderIcon className="h-6 w-6 animate-spin text-white" />
         </div>
       }
diff --git a/src/app/auth/components/user.tsx b/src/app/auth/components/user.tsx
index 7fd05bc0..5429382c 100644
--- a/src/app/auth/components/user.tsx
+++ b/src/app/auth/components/user.tsx
@@ -9,10 +9,10 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
   if (status === 'loading') {
     return (
       <div className="flex items-center gap-2">
-        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10" />
+        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
         <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
-          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
-          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10" />
+          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         </div>
       </div>
     );
diff --git a/src/app/auth/components/userRelay.tsx b/src/app/auth/components/userRelay.tsx
index decb3016..68a61fa0 100644
--- a/src/app/auth/components/userRelay.tsx
+++ b/src/app/auth/components/userRelay.tsx
@@ -9,10 +9,10 @@ export function UserRelay({ pubkey }: { pubkey: string }) {
   if (status === 'loading') {
     return (
       <div className="flex items-center gap-2">
-        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10" />
+        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
         <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
-          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
-          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10" />
+          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         </div>
       </div>
     );
diff --git a/src/app/auth/create/step-1.tsx b/src/app/auth/create/step-1.tsx
index fc6868f4..53400b5a 100644
--- a/src/app/auth/create/step-1.tsx
+++ b/src/app/auth/create/step-1.tsx
@@ -81,7 +81,7 @@ export function CreateStep1Screen() {
           <input
             readOnly
             value={npub}
-            className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/50"
+            className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
           />
         </div>
         <div className="flex flex-col gap-1">
@@ -91,12 +91,12 @@ export function CreateStep1Screen() {
               readOnly
               type={privkeyInput}
               value={nsec}
-              className="relative h-11 w-full rounded-lg bg-white/10 py-1 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
+              className="relative h-11 w-full rounded-lg bg-white/10 py-1 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
             />
             <button
               type="button"
               onClick={() => showPrivateKey()}
-              className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
+              className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
             >
               {privkeyInput === 'password' ? (
                 <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
diff --git a/src/app/auth/create/step-2.tsx b/src/app/auth/create/step-2.tsx
index 70419881..c543116f 100644
--- a/src/app/auth/create/step-2.tsx
+++ b/src/app/auth/create/step-2.tsx
@@ -98,12 +98,12 @@ export function CreateStep2Screen() {
               <input
                 {...register('password', { required: true })}
                 type={passwordInput}
-                className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none placeholder:text-white/50"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
               />
               <button
                 type="button"
                 onClick={() => showPassword()}
-                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
               >
                 {passwordInput === 'password' ? (
                   <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
diff --git a/src/app/auth/create/step-3.tsx b/src/app/auth/create/step-3.tsx
index f9cebf4f..71028bf4 100644
--- a/src/app/auth/create/step-3.tsx
+++ b/src/app/auth/create/step-3.tsx
@@ -63,12 +63,12 @@ export function CreateStep3Screen() {
       <div className="mb-8 text-center">
         <h1 className="text-xl font-semibold text-white">Create your profile</h1>
       </div>
-      <div className="w-full overflow-hidden rounded-xl bg-white/10">
+      <div className="w-full overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
         <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
           <input type={'hidden'} {...register('picture')} value={picture} />
           <input type={'hidden'} {...register('banner')} value={banner} />
           <div className="relative">
-            <div className="relative h-44 w-full bg-white/10">
+            <div className="relative h-44 w-full bg-white/10 backdrop-blur-xl">
               <Image
                 src={banner}
                 alt="user's banner"
@@ -106,7 +106,7 @@ export function CreateStep3Screen() {
                   minLength: 4,
                 })}
                 spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
               />
             </div>
             <div className="flex flex-col gap-1">
@@ -119,7 +119,7 @@ export function CreateStep3Screen() {
               <textarea
                 {...register('about')}
                 spellCheck={false}
-                className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
+                className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
               />
             </div>
             <div className="flex flex-col gap-1">
@@ -135,7 +135,7 @@ export function CreateStep3Screen() {
                   required: false,
                 })}
                 spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
               />
             </div>
             <button
diff --git a/src/app/auth/hardReset.tsx b/src/app/auth/hardReset.tsx
new file mode 100644
index 00000000..c8982034
--- /dev/null
+++ b/src/app/auth/hardReset.tsx
@@ -0,0 +1,7 @@
+export function HardResetScreen() {
+  return (
+    <div>
+      <p>hard reset</p>
+    </div>
+  );
+}
diff --git a/src/app/auth/import/step-1.tsx b/src/app/auth/import/step-1.tsx
index ac8c12c5..d9023aa8 100644
--- a/src/app/auth/import/step-1.tsx
+++ b/src/app/auth/import/step-1.tsx
@@ -95,7 +95,7 @@ export function ImportStep1Screen() {
               {...register('privkey', { required: true, minLength: 32 })}
               type={'password'}
               placeholder="nsec or hexstring"
-              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
+              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
             />
             <span className="text-sm text-red-400">
               {errors.privkey && <p>{errors.privkey.message}</p>}
diff --git a/src/app/auth/import/step-2.tsx b/src/app/auth/import/step-2.tsx
index afe372ff..c9d8e06c 100644
--- a/src/app/auth/import/step-2.tsx
+++ b/src/app/auth/import/step-2.tsx
@@ -98,12 +98,12 @@ export function ImportStep2Screen() {
               <input
                 {...register('password', { required: true })}
                 type={passwordInput}
-                className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none placeholder:text-white/50"
+                className="relative h-11 w-full rounded-lg bg-white/10 px-3.5 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
               />
               <button
                 type="button"
                 onClick={() => showPassword()}
-                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
               >
                 {passwordInput === 'password' ? (
                   <EyeOffIcon className="h-4 w-4 text-white/50 group-hover:text-white" />
diff --git a/src/app/auth/import/step-3.tsx b/src/app/auth/import/step-3.tsx
index 83351bf5..94b6635c 100644
--- a/src/app/auth/import/step-3.tsx
+++ b/src/app/auth/import/step-3.tsx
@@ -54,7 +54,7 @@ export function ImportStep3Screen() {
           {loading ? 'Prefetching data...' : 'Continue with'}
         </h1>
       </div>
-      <div className="w-full rounded-xl bg-white/10 p-4">
+      <div className="w-full rounded-xl bg-white/10 p-4 backdrop-blur-xl">
         <div className="flex flex-col gap-3">
           <User pubkey={db.account.pubkey} />
           <button
diff --git a/src/app/auth/migrate.tsx b/src/app/auth/migrate.tsx
index 7e9e8fb8..6cabe0a8 100644
--- a/src/app/auth/migrate.tsx
+++ b/src/app/auth/migrate.tsx
@@ -99,7 +99,7 @@ export function MigrateScreen() {
             Upgrade security for your account
           </h1>
         </div>
-        <div className="w-full rounded-xl bg-white/10 px-3 py-3">
+        <div className="w-full rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
           <div className="flex flex-col gap-4">
             <div>
               <div className="mt-1">
diff --git a/src/app/auth/onboarding/step-1.tsx b/src/app/auth/onboarding/step-1.tsx
index 774aefcc..5cf18879 100644
--- a/src/app/auth/onboarding/step-1.tsx
+++ b/src/app/auth/onboarding/step-1.tsx
@@ -76,7 +76,7 @@ export function OnboardStep1Screen() {
         <p className="text-sm text-white/50">Choose account you want to follow</p>
       </div>
       <div className="flex flex-col gap-4">
-        <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 py-2">
+        <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 py-2 backdrop-blur-xl">
           {status === 'loading' ? (
             <div className="flex h-full w-full items-center justify-center">
               <LoaderIcon className="h-4 w-4 animate-spin text-white" />
@@ -124,7 +124,7 @@ export function OnboardStep1Screen() {
           </button>
           <Link
             to="/auth/onboarding/step-2"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white hover:bg-white/10 focus:outline-none"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
           >
             Skip, you can add later
           </Link>
diff --git a/src/app/auth/onboarding/step-2.tsx b/src/app/auth/onboarding/step-2.tsx
index 14b43995..77e1e006 100644
--- a/src/app/auth/onboarding/step-2.tsx
+++ b/src/app/auth/onboarding/step-2.tsx
@@ -75,13 +75,13 @@ export function OnboardStep2Screen() {
         <p className="text-sm text-white/50">Customize your space which hashtag widget</p>
       </div>
       <div className="flex flex-col gap-4">
-        <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10">
+        <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl">
           {data.map((item: { hashtag: string }) => (
             <button
               key={item.hashtag}
               type="button"
               onClick={() => toggleTag(item.hashtag)}
-              className="inline-flex transform items-center justify-between bg-white/10 px-4 py-2 hover:bg-white/20"
+              className="inline-flex transform items-center justify-between bg-white/10 px-4 py-2 backdrop-blur-xl hover:bg-white/20"
             >
               <p className="text-white">{item.hashtag}</p>
               {tags.has(item.hashtag) && (
@@ -115,7 +115,7 @@ export function OnboardStep2Screen() {
           </button>
           <Link
             to="/auth/onboarding/step-3"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white hover:bg-white/10 focus:outline-none"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
           >
             Skip, you can add later
           </Link>
diff --git a/src/app/auth/onboarding/step-3.tsx b/src/app/auth/onboarding/step-3.tsx
index 533857a2..7eaffe42 100644
--- a/src/app/auth/onboarding/step-3.tsx
+++ b/src/app/auth/onboarding/step-3.tsx
@@ -112,7 +112,7 @@ export function OnboardStep3Screen() {
         </p>
       </div>
       <div className="flex flex-col gap-4">
-        <div className="scrollbar-hide relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10">
+        <div className="scrollbar-hide relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl">
           {status === 'loading' ? (
             <div className="flex h-full w-full items-center justify-center">
               <LoaderIcon className="h-4 w-4 animate-spin text-white" />
@@ -130,7 +130,7 @@ export function OnboardStep3Screen() {
                 key={item + index}
                 type="button"
                 onClick={() => toggleRelay(item)}
-                className="inline-flex transform items-start justify-between bg-white/10 px-4 py-2 hover:bg-white/20"
+                className="inline-flex transform items-start justify-between bg-white/10 px-4 py-2 backdrop-blur-xl hover:bg-white/20"
               >
                 <div className="flex flex-col items-start gap-1">
                   <p className="max-w-[15rem] truncate">{item.replace(/\/+$/, '')}</p>
@@ -145,7 +145,7 @@ export function OnboardStep3Screen() {
             ))
           )}
           {relays.size > 5 && (
-            <div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl">
+            <div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl backdrop-blur-xl">
               <p className="text-sm text-orange-400">
                 Using too much relay can cause high resource usage
               </p>
@@ -176,7 +176,7 @@ export function OnboardStep3Screen() {
           <button
             type="button"
             onClick={() => submit(true)}
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white hover:bg-white/10 focus:outline-none"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
           >
             Skip, use default relays
           </button>
diff --git a/src/app/auth/reset.tsx b/src/app/auth/reset.tsx
index 52d0be9b..00f9ed5b 100644
--- a/src/app/auth/reset.tsx
+++ b/src/app/auth/reset.tsx
@@ -124,7 +124,7 @@ export function ResetScreen() {
                 {...register('privkey', { required: true })}
                 type="text"
                 placeholder="nsec..."
-                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/10"
+                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/10"
               />
             </div>
           </div>
@@ -137,12 +137,12 @@ export function ResetScreen() {
                 {...register('password', { required: true })}
                 type={passwordInput}
                 placeholder="min. 4 characters"
-                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none placeholder:text-white/10"
+                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/10"
               />
               <button
                 type="button"
                 onClick={() => showPassword()}
-                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
               >
                 {passwordInput === 'password' ? (
                   <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
diff --git a/src/app/auth/unlock.tsx b/src/app/auth/unlock.tsx
index 9338c1ea..77cf2921 100644
--- a/src/app/auth/unlock.tsx
+++ b/src/app/auth/unlock.tsx
@@ -84,12 +84,12 @@ export function UnlockScreen() {
                 {...register('password', { required: true, minLength: 4 })}
                 type={'password'}
                 placeholder="Password"
-                className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
+                className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
               />
               <button
                 type="button"
                 onClick={() => setShowPassword((prev) => !prev)}
-                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 backdrop-blur-xl hover:bg-white/10"
               >
                 {showPassword ? (
                   <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
diff --git a/src/app/auth/welcome.tsx b/src/app/auth/welcome.tsx
index d66bbd3c..9c183dc2 100644
--- a/src/app/auth/welcome.tsx
+++ b/src/app/auth/welcome.tsx
@@ -28,7 +28,7 @@ export function WelcomeScreen() {
   }, []);
 
   return (
-    <div className="flex h-screen w-full flex-col justify-between bg-white/10">
+    <div className="flex h-screen w-full flex-col justify-between bg-white/10 backdrop-blur-xl">
       <div className="flex flex-col gap-10 pt-16">
         <div className="sflex flex-col gap-2 text-center">
           <h1 className="text-3xl font-medium text-white">Welcome to Lume</h1>
@@ -48,7 +48,7 @@ export function WelcomeScreen() {
           </Link>
           <Link
             to="/auth/create"
-            className="inline-flex h-11 w-2/3 items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-zinc-200 hover:bg-white/20 focus:outline-none"
+            className="inline-flex h-11 w-2/3 items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-zinc-200 backdrop-blur-xl hover:bg-white/20 focus:outline-none"
           >
             Create new key
           </Link>
diff --git a/src/app/chats/components/item.tsx b/src/app/chats/components/item.tsx
index c31ca432..12b786dd 100644
--- a/src/app/chats/components/item.tsx
+++ b/src/app/chats/components/item.tsx
@@ -11,9 +11,9 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-        <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
-        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10" />
+      <div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
+        <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
       </div>
     );
   }
@@ -24,15 +24,15 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
       preventScrollReset={true}
       className={({ isActive }) =>
         twMerge(
-          'inline-flex h-9 items-center gap-2.5 rounded-md px-2',
-          isActive ? 'bg-white/10 text-white' : 'text-white/80'
+          'inline-flex h-10 items-center gap-2.5 rounded-md px-2',
+          isActive ? 'bg-white/10 text-white backdrop-blur-xl' : 'text-white/80'
         )
       }
     >
       <Image
         src={user?.picture || user?.image}
         alt={pubkey}
-        className="h-6 w-6 shrink-0 rounded object-cover"
+        className="h-7 w-7 shrink-0 rounded object-cover"
       />
       <div className="inline-flex w-full flex-1 items-center justify-between">
         <h5 className="max-w-[10rem] truncate">
diff --git a/src/app/chats/components/list.tsx b/src/app/chats/components/list.tsx
index d2505fe7..3e5efc39 100644
--- a/src/app/chats/components/list.tsx
+++ b/src/app/chats/components/list.tsx
@@ -33,12 +33,12 @@ export function ChatsList() {
     return (
       <div className="flex flex-col">
         <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10 backdrop-blur-xl" />
         </div>
         <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
+          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10 backdrop-blur-xl" />
         </div>
       </div>
     );
diff --git a/src/app/chats/components/messages/item.tsx b/src/app/chats/components/messages/item.tsx
index ef4ad9da..6157d5bc 100644
--- a/src/app/chats/components/messages/item.tsx
+++ b/src/app/chats/components/messages/item.tsx
@@ -20,7 +20,7 @@ export function ChatMessageItem({
   }
 
   return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 backdrop-blur-xl hover:bg-white/10">
       <div className="flex flex-col">
         <User pubkey={message.pubkey} time={message.created_at} isChat={true} />
         <div className="-mt-[20px] pl-[49px]">
diff --git a/src/app/chats/components/messages/mediaUploader.tsx b/src/app/chats/components/messages/mediaUploader.tsx
index 72fe3037..563cc0d0 100644
--- a/src/app/chats/components/messages/mediaUploader.tsx
+++ b/src/app/chats/components/messages/mediaUploader.tsx
@@ -29,7 +29,7 @@ export function MediaUploader({
           <button
             type="button"
             onClick={() => uploadMedia()}
-            className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
+            className="group inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
           >
             {loading ? (
               <LoaderIcon className="h-5 w-5 animate-spin text-white" />
diff --git a/src/app/chats/components/modal.tsx b/src/app/chats/components/modal.tsx
index b0a3747c..d077de30 100644
--- a/src/app/chats/components/modal.tsx
+++ b/src/app/chats/components/modal.tsx
@@ -24,10 +24,10 @@ export function NewMessageModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
+          className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
         >
-          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
-            <PlusIcon className="h-3 w-3 text-white" />
+          <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+            <PlusIcon className="h-4 w-4 text-white" />
           </div>
           <div>
             <h5 className="text-white/50">New chat</h5>
@@ -37,14 +37,14 @@ export function NewMessageModal() {
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
               <div className="flex flex-col gap-1">
                 <div className="flex items-center justify-between">
                   <Dialog.Title className="text-lg font-semibold leading-none text-white">
                     New chat
                   </Dialog.Title>
-                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
                     <CancelIcon className="h-4 w-4 text-white/50" />
                   </Dialog.Close>
                 </div>
@@ -57,14 +57,14 @@ export function NewMessageModal() {
               {db.account?.follows?.map((follow) => (
                 <div
                   key={follow}
-                  className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
+                  className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
                 >
                   <User pubkey={follow} />
                   <div>
                     <button
                       type="button"
                       onClick={() => openChat(follow)}
-                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
+                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
                     >
                       Chat
                     </button>
diff --git a/src/app/chats/components/sidebar.tsx b/src/app/chats/components/sidebar.tsx
index 987cc02e..1323a448 100644
--- a/src/app/chats/components/sidebar.tsx
+++ b/src/app/chats/components/sidebar.tsx
@@ -31,7 +31,7 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
             <p className="leading-tight">{user?.bio || user?.about}</p>
             <Link
               to={`/users/${pubkey}`}
-              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white hover:bg-fuchsia-500"
+              className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-fuchsia-500"
             >
               View full profile
             </Link>
diff --git a/src/app/chats/components/unknowns.tsx b/src/app/chats/components/unknowns.tsx
index 0982e769..28f4f0ee 100644
--- a/src/app/chats/components/unknowns.tsx
+++ b/src/app/chats/components/unknowns.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { User } from '@app/auth/components/user';
 
-import { CancelIcon, PlusIcon } from '@shared/icons';
+import { CancelIcon, StrangersIcon } from '@shared/icons';
 
 import { compactNumber } from '@utils/number';
 
@@ -22,10 +22,10 @@ export function UnknownsModal({ data }: { data: string[] }) {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
+          className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
         >
-          <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
-            <PlusIcon className="h-3 w-3 text-white" />
+          <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+            <StrangersIcon className="h-4 w-4 text-white" />
           </div>
           <div>
             <h5 className="text-white/50">
@@ -37,14 +37,14 @@ export function UnknownsModal({ data }: { data: string[] }) {
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
               <div className="flex flex-col gap-1">
                 <div className="flex items-center justify-between">
                   <Dialog.Title className="text-lg font-semibold leading-none text-white">
                     {data.length} unknowns
                   </Dialog.Title>
-                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
                     <CancelIcon className="h-4 w-4 text-white/50" />
                   </Dialog.Close>
                 </div>
@@ -57,14 +57,14 @@ export function UnknownsModal({ data }: { data: string[] }) {
               {data.map((pubkey) => (
                 <div
                   key={pubkey}
-                  className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
+                  className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
                 >
                   <User pubkey={pubkey} />
                   <div>
                     <button
                       type="button"
                       onClick={() => openChat(pubkey)}
-                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
+                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
                     >
                       Chat
                     </button>
diff --git a/src/app/chats/index.tsx b/src/app/chats/index.tsx
index fa5c1761..2076e382 100644
--- a/src/app/chats/index.tsx
+++ b/src/app/chats/index.tsx
@@ -74,10 +74,10 @@ export function ChatScreen() {
   }, [pubkey]);
 
   return (
-    <div className="grid h-full w-full grid-cols-3 bg-white/10">
+    <div className="grid h-full w-full grid-cols-3 bg-white/10 backdrop-blur-xl">
       <div className="col-span-2 border-r border-white/5">
         <div className="h-full w-full flex-1 p-3">
-          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10">
+          <div className="flex h-full flex-col justify-between overflow-hidden rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-full w-full flex-1">
               {status === 'loading' ? (
                 <div className="flex h-full w-full items-center justify-center">
@@ -104,7 +104,7 @@ export function ChatScreen() {
                 />
               )}
             </div>
-            <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5">
+            <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 px-5 backdrop-blur-xl">
               <ChatMessageForm
                 receiverPubkey={pubkey}
                 userPubkey={db.account.pubkey}
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 24ce1ba4..933749c4 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -33,7 +33,7 @@ export function ErrorScreen() {
   }, []);
 
   return (
-    <div className="flex h-full items-center justify-center bg-black/90">
+    <div className="flex h-full items-center justify-center bg-black/90 backdrop-blur-xl">
       <div className="flex max-w-lg flex-col gap-4">
         <div className="flex flex-col">
           <h1 className="mb-1 text-2xl font-semibold text-white">
@@ -57,19 +57,19 @@ export function ErrorScreen() {
             href="https://github.com/luminous-devs/lume/issues/new"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/20"
           >
             Click here to report the issue on GitHub
           </a>
           <button
             type="button"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/20"
           >
             Reload app
           </button>
           <button
             type="button"
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20"
+            className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/20"
           >
             Reset app
           </button>
diff --git a/src/app/notes/article.tsx b/src/app/notes/article.tsx
index 6b5fd9c9..d020465f 100644
--- a/src/app/notes/article.tsx
+++ b/src/app/notes/article.tsx
@@ -93,13 +93,13 @@ export function ArticleNoteScreen() {
           <div className="col-span-3 flex flex-col gap-1.5">
             {status === 'loading' ? (
               <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-white/10 px-3 py-3">
+                <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
                   <NoteSkeleton />
                 </div>
               </div>
             ) : (
               <div className="h-min w-full px-3">
-                <div className="rounded-xl bg-white/10 px-3 pt-3">
+                <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
                   <ThreadUser pubkey={data.pubkey} time={data.created_at} />
                   <div className="mt-2">{renderKind(data)}</div>
                   <div>
diff --git a/src/app/notes/text.tsx b/src/app/notes/text.tsx
index f3dd487f..4fce67d4 100644
--- a/src/app/notes/text.tsx
+++ b/src/app/notes/text.tsx
@@ -99,13 +99,13 @@ export function TextNoteScreen() {
           <div className="col-span-3 flex flex-col gap-1.5">
             {status === 'loading' ? (
               <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-white/10 px-3 py-3">
+                <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
                   <NoteSkeleton />
                 </div>
               </div>
             ) : (
               <div className="h-min w-full px-3">
-                <div className="rounded-xl bg-white/10 px-3 pt-3">
+                <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
                   <ThreadUser pubkey={data.pubkey} time={data.created_at} />
                   <div className="mt-2">{renderKind(data)}</div>
                   <div>
diff --git a/src/app/notifications/components/mention.tsx b/src/app/notifications/components/mention.tsx
index c527a760..d9ed7caf 100644
--- a/src/app/notifications/components/mention.tsx
+++ b/src/app/notifications/components/mention.tsx
@@ -13,7 +13,7 @@ export function NotiMention({ event }: { event: NDKEvent }) {
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
+      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-1">
             <NotiUser pubkey={event.pubkey} />
@@ -22,7 +22,7 @@ export function NotiMention({ event }: { event: NDKEvent }) {
         </div>
         <div className="f- relative z-10 -mt-6 flex gap-3">
           <div className="h-11 w-11 shrink-0" />
-          <div className="mb-2 mt-3 w-full cursor-default rounded-lg bg-white/10 px-3 py-3">
+          <div className="mb-2 mt-3 w-full cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
             <NotiContent content={content} />
           </div>
         </div>
diff --git a/src/app/notifications/components/reaction.tsx b/src/app/notifications/components/reaction.tsx
index 7c0e1749..47bb8a6b 100644
--- a/src/app/notifications/components/reaction.tsx
+++ b/src/app/notifications/components/reaction.tsx
@@ -11,7 +11,7 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
+      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-1">
             <NotiUser pubkey={event.pubkey} />
diff --git a/src/app/notifications/components/repost.tsx b/src/app/notifications/components/repost.tsx
index d0e1a77b..866bfba8 100644
--- a/src/app/notifications/components/repost.tsx
+++ b/src/app/notifications/components/repost.tsx
@@ -15,7 +15,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
+      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-1">
             <NotiUser pubkey={event.pubkey} />
diff --git a/src/app/notifications/components/simpleNote.tsx b/src/app/notifications/components/simpleNote.tsx
index df6443d1..0f681767 100644
--- a/src/app/notifications/components/simpleNote.tsx
+++ b/src/app/notifications/components/simpleNote.tsx
@@ -26,7 +26,7 @@ export const SimpleNote = memo(function SimpleNote({ id }: { id: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
+      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
         <NoteSkeleton />
       </div>
     );
@@ -34,7 +34,7 @@ export const SimpleNote = memo(function SimpleNote({ id }: { id: string }) {
 
   if (status === 'error') {
     return (
-      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
+      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
         <p>Can&apos;t get event from relay</p>
       </div>
     );
@@ -46,7 +46,7 @@ export const SimpleNote = memo(function SimpleNote({ id }: { id: string }) {
       onKeyDown={(e) => openThread(e, id)}
       role="button"
       tabIndex={0}
-      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
+      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
     >
       <User pubkey={data.pubkey} time={data.created_at} size="small" />
       <div className="markdown">
diff --git a/src/app/notifications/index.tsx b/src/app/notifications/index.tsx
index 3402eb3e..edfc86ef 100644
--- a/src/app/notifications/index.tsx
+++ b/src/app/notifications/index.tsx
@@ -41,12 +41,12 @@ export function NotificationScreen() {
   );
 
   return (
-    <div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10">
-      <div className="grid grid-cols-3">
+    <div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl">
+      <div className="grid h-full grid-cols-3">
         <div className="col-span-2 flex flex-col border-r border-white/5">
           <TitleBar title="Activities in the last 24 hours" />
           <div className="flex h-full flex-col gap-1.5">
-            <div className="flex flex-col">
+            <div className="flex h-full flex-col">
               {status === 'loading' ? (
                 <div className="flex h-full w-full items-center justify-center">
                   <div className="flex flex-col items-center gap-1.5">
@@ -58,7 +58,7 @@ export function NotificationScreen() {
                 <div className="flex h-full w-full flex-col items-center justify-center">
                   <p className="mb-1 text-4xl">🎉</p>
                   <p className="font-medium text-white/50">
-                    Yo!, you&apos;ve no new activities
+                    Yo!, no new activities around you in the last 24 hours
                   </p>
                 </div>
               ) : (
diff --git a/src/app/settings/account.tsx b/src/app/settings/account.tsx
index 63860833..acc4def4 100644
--- a/src/app/settings/account.tsx
+++ b/src/app/settings/account.tsx
@@ -35,7 +35,7 @@ export function AccountSettingsScreen() {
                 <input
                   readOnly
                   value={db.account.pubkey}
-                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
+                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
                 />
               </div>
               <div className="flex flex-col gap-1">
@@ -45,7 +45,7 @@ export function AccountSettingsScreen() {
                 <input
                   readOnly
                   value={db.account.npub}
-                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
+                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
                 />
               </div>
               <div className="flex flex-col gap-1">
@@ -60,7 +60,7 @@ export function AccountSettingsScreen() {
                     readOnly
                     type={type}
                     value={privkey}
-                    className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none placeholder:text-white/50"
+                    className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
                   />
                   <button
                     type="button"
diff --git a/src/app/settings/general.tsx b/src/app/settings/general.tsx
index 7226c132..89a06422 100644
--- a/src/app/settings/general.tsx
+++ b/src/app/settings/general.tsx
@@ -7,7 +7,7 @@ export function GeneralSettingsScreen() {
     <div className="h-full w-full px-3 pt-12">
       <div className="flex flex-col gap-2">
         <h1 className="text-lg font-semibold text-white">General</h1>
-        <div className="w-full rounded-xl bg-white/10">
+        <div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
           <div className="flex h-full w-full flex-col divide-y divide-white/5">
             <AutoStartSetting />
             <CacheTimeSetting />
diff --git a/src/app/settings/shortcuts.tsx b/src/app/settings/shortcuts.tsx
index b5ab0c86..893f598a 100644
--- a/src/app/settings/shortcuts.tsx
+++ b/src/app/settings/shortcuts.tsx
@@ -5,17 +5,17 @@ export function ShortcutsSettingsScreen() {
     <div className="h-full w-full px-3 pt-12">
       <div className="flex flex-col gap-2">
         <h1 className="text-lg font-semibold text-white">Shortcuts</h1>
-        <div className="w-full rounded-xl bg-white/10">
+        <div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
           <div className="flex h-full w-full flex-col divide-y divide-white/5">
             <div className="inline-flex items-center justify-between px-5 py-4">
               <div className="flex flex-col gap-1">
                 <span className="font-medium leading-none text-white">Open composer</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <span className="text-sm leading-none text-white/50">N</span>
                 </div>
               </div>
@@ -27,10 +27,10 @@ export function ShortcutsSettingsScreen() {
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <span className="text-sm leading-none text-white/50">I</span>
                 </div>
               </div>
@@ -42,10 +42,10 @@ export function ShortcutsSettingsScreen() {
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <span className="text-sm leading-none text-white/50">F</span>
                 </div>
               </div>
@@ -57,10 +57,10 @@ export function ShortcutsSettingsScreen() {
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <span className="text-sm leading-none text-white/50">P</span>
                 </div>
               </div>
@@ -72,10 +72,10 @@ export function ShortcutsSettingsScreen() {
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <CommandIcon width={12} height={12} className="text-white/50" />
                 </div>
-                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+                <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                   <span className="text-sm leading-none text-white/50">B</span>
                 </div>
               </div>
diff --git a/src/app/space/components/button.tsx b/src/app/space/components/button.tsx
index 642167a8..116629e5 100644
--- a/src/app/space/components/button.tsx
+++ b/src/app/space/components/button.tsx
@@ -71,7 +71,7 @@ export function AddWidgetButton() {
         <div className="inline-flex h-full w-full flex-col items-center justify-center">
           <DropdownMenu.Trigger asChild>
             <button type="button" className="flex flex-col items-center gap-2">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 hover:bg-white/10">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 backdrop-blur-xl hover:bg-white/10">
                 <PlusIcon className="h-5 w-5 text-white" />
               </div>
               <p className="font-medium text-white/50">Add widget</p>
@@ -82,15 +82,15 @@ export function AddWidgetButton() {
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           sideOffset={-20}
-          className="flex w-[256px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none"
+          className="flex w-[256px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none"
         >
           <DropdownMenu.Item asChild>
             <button
               type="button"
               onClick={setHashtagWidget}
-              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
-              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                 <HashtagIcon className="h-4 w-4 text-white" />
               </div>
               Add hashtag feeds
@@ -100,9 +100,9 @@ export function AddWidgetButton() {
             <button
               type="button"
               onClick={setGroupFeedWidget}
-              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
-              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                 <FeedIcon className="h-4 w-4 text-white" />
               </div>
               Add user group feeds
@@ -112,9 +112,9 @@ export function AddWidgetButton() {
             <button
               type="button"
               onClick={setArticleWidget}
-              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
-              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                 <ThreadsIcon className="h-4 w-4 text-white" />
               </div>
               Add article feeds
@@ -124,9 +124,9 @@ export function AddWidgetButton() {
             <button
               type="button"
               onClick={setFileWidget}
-              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                 <FileIcon className="h-4 w-4 text-white" />
               </div>
               Add file feeds
@@ -136,9 +136,9 @@ export function AddWidgetButton() {
             <button
               type="button"
               onClick={setTrendingProfilesWidget}
-              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
-              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                 <TrendingIcon className="h-4 w-4 text-white" />
               </div>
               Add trending accounts
@@ -148,9 +148,9 @@ export function AddWidgetButton() {
             <button
               type="button"
               onClick={setTrendingNotesWidget}
-              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-11 items-center gap-2 rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
-              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
+              <div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
                 <TrendingIcon className="h-4 w-4 text-white" />
               </div>
               Add trending notes
diff --git a/src/app/space/components/forms/feed.tsx b/src/app/space/components/forms/feed.tsx
index 9c316c7e..d89d473b 100644
--- a/src/app/space/components/forms/feed.tsx
+++ b/src/app/space/components/forms/feed.tsx
@@ -43,7 +43,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
   };
 
   return (
-    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
       <div className="w-full px-5">
         <h3 className="mb-4 text-center text-lg font-semibold">
           Choose account you want to add to group feeds
@@ -54,10 +54,10 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Title"
-              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
+              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
             />
           </div>
-          <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-white/10 py-2">
+          <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-white/10 py-2 backdrop-blur-xl">
             {db.account.network.map((item: string) => (
               <button
                 key={item}
@@ -88,7 +88,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
             <button
               type="button"
               onClick={cancel}
-              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
             >
               Cancel
             </button>
diff --git a/src/app/space/components/forms/hashtag.tsx b/src/app/space/components/forms/hashtag.tsx
index 82d09eb1..1c4cd271 100644
--- a/src/app/space/components/forms/hashtag.tsx
+++ b/src/app/space/components/forms/hashtag.tsx
@@ -62,7 +62,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
   };
 
   return (
-    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
       <div className="w-full px-5">
         <h3 className="mb-4 text-center text-lg font-semibold">
           Enter hashtag you want to follow
@@ -72,7 +72,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
             <input
               {...register('hashtag', { required: true, minLength: 1 })}
               placeholder="#bitcoin"
-              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none placeholder:text-white/50"
+              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
             />
             <span className="text-sm text-red-400">
               {errors.hashtag && <p>{errors.hashtag.message}</p>}
@@ -91,7 +91,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
             <button
               type="button"
               onClick={cancel}
-              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
             >
               Cancel
             </button>
diff --git a/src/app/space/components/userProfile.tsx b/src/app/space/components/userProfile.tsx
index 76eb41e0..739403dd 100644
--- a/src/app/space/components/userProfile.tsx
+++ b/src/app/space/components/userProfile.tsx
@@ -65,14 +65,14 @@ export function UserProfile({ data }: { data: Profile }) {
 
   if (!profile) {
     return (
-      <div className="rounded-xl bg-white/10 px-5 py-5">
+      <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
         <p>Can&apos;t fetch profile</p>
       </div>
     );
   }
 
   return (
-    <div className="rounded-xl bg-white/10 px-5 py-5">
+    <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
       <div className="flex items-center justify-between">
         <div className="inline-flex items-center gap-2">
           <Image
@@ -93,7 +93,7 @@ export function UserProfile({ data }: { data: Profile }) {
             <button
               type="button"
               onClick={() => unfollowUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white hover:bg-fuchsia-500 hover:text-white"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
             >
               <UnfollowIcon className="h-4 w-4" />
             </button>
@@ -101,7 +101,7 @@ export function UserProfile({ data }: { data: Profile }) {
             <button
               type="button"
               onClick={() => followUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white hover:bg-fuchsia-500 hover:text-white"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
             >
               <FollowIcon className="h-4 w-4" />
             </button>
diff --git a/src/app/space/components/widgets/article.tsx b/src/app/space/components/widgets/article.tsx
index 4d2521b0..f4cfc367 100644
--- a/src/app/space/components/widgets/article.tsx
+++ b/src/app/space/components/widgets/article.tsx
@@ -51,18 +51,18 @@ export function ArticleWidget({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title} />
       <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : items.length === 0 ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-6">
+            <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
               <div className="flex flex-col items-center gap-4">
                 <p className="text-center text-sm font-medium text-white">
                   There have been no new articles in the last 24 hours.
diff --git a/src/app/space/components/widgets/feed.tsx b/src/app/space/components/widgets/feed.tsx
index ca9046d7..be7b6279 100644
--- a/src/app/space/components/widgets/feed.tsx
+++ b/src/app/space/components/widgets/feed.tsx
@@ -116,18 +116,18 @@ export function FeedWidget({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title} />
       <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : items.length === 0 ? (
           <div className="px-3 py-1.5">
-            <div className="bbg-white/10 rounded-xl px-3 py-6">
+            <div className="bbg-white/10 rounded-xl px-3 py-6 backdrop-blur-xl">
               <div className="flex flex-col items-center gap-4">
                 <p className="text-center text-sm text-white">
                   There have been no new posts.
@@ -155,7 +155,7 @@ export function FeedWidget({ params }: { params: Widget }) {
         )}
         {isFetchingNextPage && (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
diff --git a/src/app/space/components/widgets/file.tsx b/src/app/space/components/widgets/file.tsx
index 0d04c39f..1bde7a81 100644
--- a/src/app/space/components/widgets/file.tsx
+++ b/src/app/space/components/widgets/file.tsx
@@ -51,18 +51,18 @@ export function FileWidget({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title} />
       <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : items.length === 0 ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-6">
+            <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
               <div className="flex flex-col items-center gap-4">
                 <p className="text-center text-sm font-medium text-white">
                   There have been no new files in the last 24 hours.
diff --git a/src/app/space/components/widgets/hashtag.tsx b/src/app/space/components/widgets/hashtag.tsx
index 93feff84..eff1b09f 100644
--- a/src/app/space/components/widgets/hashtag.tsx
+++ b/src/app/space/components/widgets/hashtag.tsx
@@ -114,18 +114,18 @@ export function HashtagWidget({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
       <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : items.length === 0 ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-6">
+            <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
               <div className="flex flex-col items-center gap-4">
                 <p className="text-center text-sm font-medium text-white">
                   There have been no new posts with this hashtag in the last 24 hours.
diff --git a/src/app/space/components/widgets/network.tsx b/src/app/space/components/widgets/network.tsx
index eae70a77..be9ae190 100644
--- a/src/app/space/components/widgets/network.tsx
+++ b/src/app/space/components/widgets/network.tsx
@@ -153,23 +153,25 @@ export function NetworkWidget() {
   }, []);
 
   return (
-    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
       <TitleBar title="Network" />
       <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : dbEvents.length === 0 ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-6">
-              <div className="flex flex-col items-center gap-4">
-                <p className="text-center text-sm text-white">
-                  You not have any posts to see yet
-                  <br />
-                  Follow more people to have more fun.
+          <div className="flex h-full w-full flex-col items-center justify-center px-3">
+            <div className="flex flex-col items-center gap-4">
+              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
+              <div className="text-center">
+                <h3 className="text-xl font-semibold leading-tight">
+                  Your newsfeed is empty
+                </h3>
+                <p className="text-center text-white/50">
+                  Connect more people to explore more content
                 </p>
               </div>
             </div>
@@ -193,38 +195,40 @@ export function NetworkWidget() {
           </div>
         )}
         {isFetchingNextPage && (
-          <div className="mb-20 px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+          <div className="mb-20 px-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         )}
         <div className="px-3 py-1.5">
-          <button
-            onClick={() => fetchNextPage()}
-            disabled={!hasNextPage || isFetchingNextPage}
-            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
-          >
-            {isFetchingNextPage ? (
-              <>
-                <span className="w-5" />
-                <span>Loading...</span>
-                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              </>
-            ) : hasNextPage ? (
-              <>
-                <span className="w-5" />
-                <span>Load more</span>
-                <ArrowRightCircleIcon className="h-5 w-5" />
-              </>
-            ) : (
-              <>
-                <span className="w-5" />
-                <span>Nothing more to load</span>
-                <ArrowRightCircleIcon className="h-5 w-5" />
-              </>
-            )}
-          </button>
+          {dbEvents.length > 0 ? (
+            <button
+              onClick={() => fetchNextPage()}
+              disabled={!hasNextPage || isFetchingNextPage}
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+            >
+              {isFetchingNextPage ? (
+                <>
+                  <span className="w-5" />
+                  <span>Loading...</span>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </>
+              ) : hasNextPage ? (
+                <>
+                  <span className="w-5" />
+                  <span>Load more</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
+              ) : (
+                <>
+                  <span className="w-5" />
+                  <span>Nothing more to load</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
+              )}
+            </button>
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/src/app/space/components/widgets/thread.tsx b/src/app/space/components/widgets/thread.tsx
index 51505656..6d3d42cd 100644
--- a/src/app/space/components/widgets/thread.tsx
+++ b/src/app/space/components/widgets/thread.tsx
@@ -41,18 +41,18 @@ export function ThreadBlock({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
+    <div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title} />
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : (
           <div className="h-min w-full px-3 pt-1.5">
-            <div className="rounded-xl bg-white/10 px-3 pt-3">
+            <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
               <ThreadUser pubkey={data.pubkey} time={data.created_at} />
               <div className="mt-2">{renderKind(data)}</div>
               <NoteActions id={params.content} pubkey={data.pubkey} noOpenThread={true} />
diff --git a/src/app/space/components/widgets/trendingNotes.tsx b/src/app/space/components/widgets/trendingNotes.tsx
index 2717a7e5..f1fd0fe4 100644
--- a/src/app/space/components/widgets/trendingNotes.tsx
+++ b/src/app/space/components/widgets/trendingNotes.tsx
@@ -31,18 +31,18 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
+    <div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title} />
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : status === 'error' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <p className="text-center text-sm font-medium text-white">
                 Sorry, an unexpected error has occurred.
               </p>
diff --git a/src/app/space/components/widgets/trendingProfile.tsx b/src/app/space/components/widgets/trendingProfile.tsx
index be07c0b9..c914f9f0 100644
--- a/src/app/space/components/widgets/trendingProfile.tsx
+++ b/src/app/space/components/widgets/trendingProfile.tsx
@@ -32,18 +32,18 @@ export function TrendingProfilesWidget({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
+    <div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title} />
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <NoteSkeleton />
             </div>
           </div>
         ) : status === 'error' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3">
+            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
               <p className="text-center text-sm font-medium text-white">
                 Sorry, an unexpected error has occurred.
               </p>
diff --git a/src/app/space/components/widgets/user.tsx b/src/app/space/components/widgets/user.tsx
index 6bd516d3..100fc476 100644
--- a/src/app/space/components/widgets/user.tsx
+++ b/src/app/space/components/widgets/user.tsx
@@ -120,7 +120,7 @@ export function UserWidget({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
+    <div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
       <TitleBar id={params.id} title={params.title} />
       <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
         <div className="px-3 pt-1.5">
@@ -131,13 +131,13 @@ export function UserWidget({ params }: { params: Widget }) {
           <div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
             {status === 'loading' ? (
               <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-white/10 px-3 py-3">
+                <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
                   <NoteSkeleton />
                 </div>
               </div>
             ) : items.length === 0 ? (
               <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-white/10 px-3 py-6">
+                <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
                   <div className="flex flex-col items-center gap-4">
                     <p className="text-center text-sm text-white">
                       No new post from user in 24 hours ago
diff --git a/src/app/splash.tsx b/src/app/splash.tsx
index 4e66f273..4bfece43 100644
--- a/src/app/splash.tsx
+++ b/src/app/splash.tsx
@@ -50,8 +50,6 @@ export function SplashScreen() {
     }
 
     if (ndk && db.account) {
-      if (db.account.network.length < 1) invoke('close_splashscreen');
-
       console.log('prefetching...');
       prefetch();
     }
diff --git a/src/app/users/components/modal.tsx b/src/app/users/components/modal.tsx
index 2cf76878..1ec081b7 100644
--- a/src/app/users/components/modal.tsx
+++ b/src/app/users/components/modal.tsx
@@ -125,7 +125,7 @@ export function EditProfileModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
         >
           Edit profile
         </button>
@@ -133,13 +133,13 @@ export function EditProfileModal() {
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
               <div className="flex items-center justify-between">
                 <Dialog.Title className="text-lg font-semibold leading-none text-white">
                   Edit profile
                 </Dialog.Title>
-                <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
                   <CancelIcon className="h-4 w-4 text-white/50" />
                 </Dialog.Close>
               </div>
@@ -191,7 +191,7 @@ export function EditProfileModal() {
                         minLength: 4,
                       })}
                       spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
+                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
                     />
                   </div>
                   <div className="flex flex-col gap-1">
@@ -208,7 +208,7 @@ export function EditProfileModal() {
                           minLength: 4,
                         })}
                         spellCheck={false}
-                        className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
+                        className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
                       />
                       <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
                         {nip05.verified ? (
@@ -240,7 +240,7 @@ export function EditProfileModal() {
                     <textarea
                       {...register('about')}
                       spellCheck={false}
-                      className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
+                      className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
                     />
                   </div>
                   <div className="flex flex-col gap-1">
@@ -254,7 +254,7 @@ export function EditProfileModal() {
                       type={'text'}
                       {...register('website', { required: false })}
                       spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
+                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
                     />
                   </div>
                   <div className="flex flex-col gap-1">
@@ -268,7 +268,7 @@ export function EditProfileModal() {
                       type={'text'}
                       {...register('lud16', { required: false })}
                       spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none placeholder:text-white/50"
+                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
                     />
                   </div>
                   <div>
diff --git a/src/app/users/components/profile.tsx b/src/app/users/components/profile.tsx
index c7d6d468..b8dba41e 100644
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -92,7 +92,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
               <button
                 type="button"
                 onClick={() => unfollowUser(pubkey)}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
               >
                 Unfollow
               </button>
@@ -100,20 +100,20 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
               <button
                 type="button"
                 onClick={() => followUser(pubkey)}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
               >
                 Follow
               </button>
             )}
             <Link
               to={`/chats/${pubkey}`}
-              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
             >
               Message
             </Link>
             {db.account.pubkey === pubkey && (
               <>
-                <span className="mx-2 inline-flex h-4 w-px bg-white/10" />
+                <span className="mx-2 inline-flex h-4 w-px bg-white/10 backdrop-blur-xl" />
                 <EditProfileModal />
               </>
             )}
diff --git a/src/app/users/index.tsx b/src/app/users/index.tsx
index 0fd4e123..c6a59505 100644
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -114,7 +114,7 @@ export function UserScreen() {
   return (
     <div
       ref={parentRef}
-      className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10"
+      className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl"
     >
       <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
       <UserProfile pubkey={pubkey} />
@@ -125,13 +125,13 @@ export function UserScreen() {
         <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
           {status === 'loading' ? (
             <div className="px-3 py-1.5">
-              <div className="rounded-xl bg-white/10 px-3 py-3">
+              <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
                 <NoteSkeleton />
               </div>
             </div>
           ) : items.length === 0 ? (
             <div className="px-3 py-1.5">
-              <div className="rounded-xl bg-white/10 px-3 py-6">
+              <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
                 <div className="flex flex-col items-center gap-4">
                   <p className="text-center text-sm font-medium text-white">
                     User doesn&apos;t have any posts in the last 48 hours.
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index 331c450d..ff331500 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -11,10 +11,10 @@ import { useNostr } from '@utils/hooks/useNostr';
 import { useProfile } from '@utils/hooks/useProfile';
 import { sendNativeNotification } from '@utils/notification';
 
-export function ActiveAccount({ data }: { data: { pubkey: string; npub: string } }) {
-  const { sub } = useNostr();
+export function ActiveAccount() {
   const { db } = useStorage();
-  const { status, user } = useProfile(data.pubkey);
+  const { status, user } = useProfile(db.account.pubkey);
+  const { sub } = useNostr();
 
   useEffect(() => {
     const filter: NDKFilter = {
@@ -53,11 +53,11 @@ export function ActiveAccount({ data }: { data: { pubkey: string; npub: string }
   }
 
   return (
-    <Link to={`/users/${data.pubkey}`} className="relative inline-block h-9 w-9">
+    <Link to={`/users/${db.account.pubkey}`} className="relative inline-block shrink-0">
       <Image
         src={user?.picture || user?.image}
-        alt={data.npub}
-        className="h-9 w-9 rounded-md object-cover"
+        alt={db.account.npub}
+        className="h-10 w-10 rounded-lg object-cover"
       />
       <NetworkStatusIndicator />
     </Link>
diff --git a/src/shared/button.tsx b/src/shared/button.tsx
index 538f73fc..29bb01da 100644
--- a/src/shared/button.tsx
+++ b/src/shared/button.tsx
@@ -16,7 +16,7 @@ export function Button({
   switch (preset) {
     case 'small':
       preClass =
-        'w-min h-9 px-4 bg-white/10 rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
+        'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
       break;
     case 'publish':
       preClass =
@@ -28,7 +28,7 @@ export function Button({
       break;
     case 'large-alt':
       preClass =
-        'h-11 w-full bg-white/10 rounded-lg font-medium text-white hover:bg-white/20';
+        'h-11 w-full bg-white/10 backdrop-blur-xl rounded-lg font-medium text-white hover:bg-white/20';
       break;
     default:
       break;
diff --git a/src/shared/composer/composer.tsx b/src/shared/composer/composer.tsx
index faa3b1cb..b5a8ef1f 100644
--- a/src/shared/composer/composer.tsx
+++ b/src/shared/composer/composer.tsx
@@ -130,7 +130,7 @@ export function Composer() {
     <div className="flex h-full flex-col px-4 pb-4">
       <div className="flex h-full w-full gap-3">
         <div className="flex w-8 shrink-0 items-center justify-center">
-          <div className="h-full w-[2px] bg-white/10" />
+          <div className="h-full w-[2px] bg-white/10 backdrop-blur-xl" />
         </div>
         <div className="w-full">
           <EditorContent
@@ -146,7 +146,7 @@ export function Composer() {
               <button
                 type="button"
                 onClick={() => clearReply()}
-                className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2"
+                className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2 backdrop-blur-xl"
               >
                 <CancelIcon className="h-4 w-4 text-white" />
               </button>
@@ -158,7 +158,7 @@ export function Composer() {
         <button
           type="button"
           onClick={() => uploadImage()}
-          className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
         >
           <PlusCircleIcon className="h-5 w-5 text-white/50" />
         </button>
diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx
index 51ab9dc8..e3b3d807 100644
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@@ -21,30 +21,30 @@ export function ComposerModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-9 w-max items-center justify-center gap-2 rounded-md bg-white/10 px-4 text-sm font-medium text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
+          className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 from-fuchsia-200 via-red-200 to-orange-300 px-4 font-medium text-white hover:bg-fuchsia-500 hover:bg-gradient-to-r hover:text-black focus:outline-none active:translate-y-1"
         >
-          <ComposeIcon className="h-4 w-4" />
+          <ComposeIcon className="h-5 w-5" />
           Postr
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-2xl rounded-xl bg-white/10">
+          <div className="relative h-min w-full max-w-2xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="flex items-center justify-between px-4 py-4">
               <div className="flex items-center gap-2">
                 <ComposerUser pubkey={db.account.pubkey} />
                 <span>
                   <ChevronRightIcon className="h-4 w-4 text-white/50" />
                 </span>
-                <div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white">
+                <div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white backdrop-blur-xl">
                   New Post
                   <ChevronDownIcon className="h-4 w-4" />
                 </div>
               </div>
               <Dialog.Close
                 onClick={() => toggle(false)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"
               >
                 <CancelIcon className="h-5 w-5 text-white/50" />
               </Dialog.Close>
diff --git a/src/shared/layouts/app.tsx b/src/shared/layouts/app.tsx
index 295a51f4..0f5e5b8f 100644
--- a/src/shared/layouts/app.tsx
+++ b/src/shared/layouts/app.tsx
@@ -8,7 +8,7 @@ export function AppLayout() {
       <div className="shrink-0">
         <Navigation />
       </div>
-      <div className="h-full w-full flex-1 bg-black/90">
+      <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
         <Outlet />
         <ScrollRestoration
           getKey={(location) => {
diff --git a/src/shared/layouts/auth.tsx b/src/shared/layouts/auth.tsx
index 13e69e0e..99abfffb 100644
--- a/src/shared/layouts/auth.tsx
+++ b/src/shared/layouts/auth.tsx
@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 export function AuthLayout() {
   return (
-    <div className="relative h-screen w-screen bg-black/90">
+    <div className="relative h-screen w-screen bg-black/90 backdrop-blur-xl">
       <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
       <Outlet />
     </div>
diff --git a/src/shared/layouts/note.tsx b/src/shared/layouts/note.tsx
index a48ac711..4fdb5938 100644
--- a/src/shared/layouts/note.tsx
+++ b/src/shared/layouts/note.tsx
@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 export function NoteLayout() {
   return (
-    <div className="relative h-screen w-screen bg-black/90">
+    <div className="relative h-screen w-screen bg-black/90 backdrop-blur-xl">
       <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
       <Outlet />
     </div>
diff --git a/src/shared/layouts/settings.tsx b/src/shared/layouts/settings.tsx
index ae63dd18..901d01e3 100644
--- a/src/shared/layouts/settings.tsx
+++ b/src/shared/layouts/settings.tsx
@@ -21,7 +21,9 @@ export function SettingsLayout() {
                   className={({ isActive }) =>
                     twMerge(
                       'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                      isActive
+                        ? 'bg-white/10 text-white backdrop-blur-xl'
+                        : 'text-white/80'
                     )
                   }
                 >
@@ -32,7 +34,9 @@ export function SettingsLayout() {
                   className={({ isActive }) =>
                     twMerge(
                       'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                      isActive
+                        ? 'bg-white/10 text-white backdrop-blur-xl'
+                        : 'text-white/80'
                     )
                   }
                 >
@@ -43,7 +47,9 @@ export function SettingsLayout() {
                   className={({ isActive }) =>
                     twMerge(
                       'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                      isActive
+                        ? 'bg-white/10 text-white backdrop-blur-xl'
+                        : 'text-white/80'
                     )
                   }
                 >
@@ -57,7 +63,7 @@ export function SettingsLayout() {
           <LumeBar />
         </div>
       </div>
-      <div className="h-full w-full flex-1 bg-black/90">
+      <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
         <Outlet />
         <ScrollRestoration
           getKey={(location) => {
diff --git a/src/shared/logout.tsx b/src/shared/logout.tsx
index 193266c0..7a79393f 100644
--- a/src/shared/logout.tsx
+++ b/src/shared/logout.tsx
@@ -30,14 +30,14 @@ export function Logout() {
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-6">
               <div className="flex flex-col gap-2">
                 <div className="flex items-center justify-between">
                   <Dialog.Title className="text-lg font-semibold leading-none text-white">
                     Are you sure!
                   </Dialog.Title>
-                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
                     <CancelIcon className="h-4 w-4 text-white/50" />
                   </Dialog.Close>
                 </div>
@@ -57,7 +57,7 @@ export function Logout() {
               <div className="flex items-center gap-2">
                 <button
                   type="button"
-                  className="inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-white/50 hover:bg-white/10"
+                  className="inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-white/50 backdrop-blur-xl hover:bg-white/10"
                 >
                   Cancel
                 </button>
diff --git a/src/shared/lumeBar.tsx b/src/shared/lumeBar.tsx
deleted file mode 100644
index 891bab17..00000000
--- a/src/shared/lumeBar.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { ActiveAccount } from '@shared/accounts/active';
-import { SettingsIcon } from '@shared/icons';
-import { Logout } from '@shared/logout';
-
-export function LumeBar() {
-  const { db } = useStorage();
-
-  return (
-    <div className="absolute bottom-3 left-1/2 w-max -translate-x-1/2 transform">
-      <div className="rounded-xl bg-white/10 p-2 backdrop-blur-xl">
-        <div className="flex items-center gap-2">
-          <ActiveAccount data={db.account} />
-          <Link
-            to="/settings/general"
-            className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
-          >
-            <SettingsIcon className="h-4 w-4 text-white" />
-          </Link>
-          <Logout />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index be144e58..f8230311 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -1,112 +1,73 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
 import { ChatsList } from '@app/chats/components/list';
 
-import { ComposerModal } from '@shared/composer/modal';
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  BellIcon,
-  NavArrowDownIcon,
-  SpaceIcon,
-} from '@shared/icons';
-import { LumeBar } from '@shared/lumeBar';
+import { ActiveAccount } from '@shared/accounts/active';
+import { ComposerModal } from '@shared/composer';
+import { BellIcon, NavArrowDownIcon, SettingsIcon, SpaceIcon } from '@shared/icons';
 
 import { useSidebar } from '@stores/sidebar';
 
 export function Navigation() {
-  const navigate = useNavigate();
-
-  const [feeds, toggleFeeds] = useSidebar((state) => [state.feeds, state.toggleFeeds]);
   const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
 
   return (
     <div className="relative h-full w-[232px] bg-black/80">
-      <div className="absolute left-0 top-0 h-8 w-full" data-tauri-drag-region />
-      <div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
-        <div className="inline-flex h-8 items-center justify-between px-2 pb-4 pt-14">
-          <ComposerModal />
-          <div className="flex gap-2.5">
-            <button
-              type="button"
-              onClick={() => navigate(-1)}
-              className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
-            >
-              <ArrowLeftIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
-            </button>
-            <button
-              type="button"
-              onClick={() => navigate(1)}
-              className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
-            >
-              <ArrowRightIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
-            </button>
-          </div>
+      <div data-tauri-drag-region className="h-11 w-full" />
+      <div className="scrollbar-hide flex h-full flex-col gap-6 overflow-y-auto pb-32">
+        <div className="flex flex-col px-2">
+          <NavLink
+            to="/"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-md px-2',
+                isActive ? 'bg-white/5 text-white' : 'text-white/80'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+              <SpaceIcon className="h-4 w-4 text-white" />
+            </span>
+            Space
+          </NavLink>
+          <NavLink
+            to="/notifications"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-md px-2',
+                isActive ? 'bg-white/5 text-white' : 'text-white/80'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+              <BellIcon className="h-4 w-4 text-white" />
+            </span>
+            Notifications
+          </NavLink>
+          <NavLink
+            to="/settings"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-md px-2',
+                isActive ? 'bg-white/5 text-white' : 'text-white/80'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+              <SettingsIcon className="h-4 w-4 text-white" />
+            </span>
+            Settings
+          </NavLink>
         </div>
-        <Collapsible.Root open={feeds} onOpenChange={toggleFeeds}>
-          <div className="flex flex-col gap-1 px-2">
-            <Collapsible.Trigger asChild>
-              <button className="flex items-center gap-1">
-                <div
-                  className={twMerge(
-                    'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
-                    open ? '' : 'rotate-180'
-                  )}
-                >
-                  <NavArrowDownIcon
-                    className={twMerge(
-                      'h-3 w-3 text-white/50',
-                      feeds ? '' : 'rotate-180'
-                    )}
-                  />
-                </div>
-                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
-                  Personal
-                </h3>
-              </button>
-            </Collapsible.Trigger>
-            <Collapsible.Content>
-              <div className="flex flex-col">
-                <NavLink
-                  to="/"
-                  preventScrollReset={true}
-                  className={({ isActive }) =>
-                    twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
-                    )
-                  }
-                >
-                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
-                    <SpaceIcon className="h-3 w-3 text-white" />
-                  </span>
-                  Space
-                </NavLink>
-                <NavLink
-                  to="/notifications"
-                  preventScrollReset={true}
-                  className={({ isActive }) =>
-                    twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
-                    )
-                  }
-                >
-                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
-                    <BellIcon className="h-3 w-3 text-white" />
-                  </span>
-                  Notifications
-                </NavLink>
-              </div>
-            </Collapsible.Content>
-          </div>
-        </Collapsible.Root>
         <Collapsible.Root open={chats} onOpenChange={toggleChats}>
           <div className="flex flex-col gap-1 px-2">
             <Collapsible.Trigger asChild>
-              <button className="flex items-center gap-1">
+              <button className="flex items-center gap-1 px-3">
                 <div
                   className={twMerge(
                     'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
@@ -126,7 +87,12 @@ export function Navigation() {
           </div>
         </Collapsible.Root>
       </div>
-      <LumeBar />
+      <div className="absolute bottom-4 left-0 right-0 px-2">
+        <div className="flex items-center gap-2 rounded-2xl bg-white/10 px-2 py-2 backdrop-blur-xl">
+          <ActiveAccount />
+          <ComposerModal />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/shared/notes/actions.tsx b/src/shared/notes/actions.tsx
index eab7003f..11cd3d7d 100644
--- a/src/shared/notes/actions.tsx
+++ b/src/shared/notes/actions.tsx
@@ -36,7 +36,7 @@ export function NoteActions({
         </div>
         {!noOpenThread && (
           <>
-            <div className="mx-2 block h-4 w-px bg-white/10" />
+            <div className="mx-2 block h-4 w-px bg-white/10 backdrop-blur-xl" />
             <Tooltip.Root delayDuration={150}>
               <Tooltip.Trigger asChild>
                 <button
diff --git a/src/shared/notes/actions/more.tsx b/src/shared/notes/actions/more.tsx
index f54c1933..61b5a40f 100644
--- a/src/shared/notes/actions/more.tsx
+++ b/src/shared/notes/actions/more.tsx
@@ -45,11 +45,11 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
         </Tooltip.Portal>
       </Tooltip.Root>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
+        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl backdrop-blur-xl focus:outline-none">
           <DropdownMenu.Item asChild>
             <Link
               to={`/notes/text/${id}`}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
               Focus mode
             </Link>
@@ -58,7 +58,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => copyLink()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
               Copy shareable link
             </button>
@@ -67,7 +67,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => copyID()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
               Copy ID
             </button>
@@ -75,7 +75,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
           <DropdownMenu.Item asChild>
             <Link
               to={`/users/${pubkey}`}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white backdrop-blur-xl hover:bg-white/10"
             >
               View profile
             </Link>
diff --git a/src/shared/notes/actions/reaction.tsx b/src/shared/notes/actions/reaction.tsx
index a854ddcc..73632592 100644
--- a/src/shared/notes/actions/reaction.tsx
+++ b/src/shared/notes/actions/reaction.tsx
@@ -80,14 +80,14 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => react('👏')}
-              className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
+              className="inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
             >
               <img src="/clapping_hands.png" alt="Clapping Hands" className="h-6 w-6" />
             </button>
             <button
               type="button"
               onClick={() => react('🤪')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
+              className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
             >
               <img
                 src="/face_with_tongue.png"
@@ -98,7 +98,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => react('😮')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
+              className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
             >
               <img
                 src="/face_with_open_mouth.png"
@@ -109,14 +109,14 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => react('😢')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
+              className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
             >
               <img src="/crying_face.png" alt="Crying Face" className="h-6 w-6" />
             </button>
             <button
               type="button"
               onClick={() => react('🤡')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
+              className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
             >
               <img src="/clown_face.png" alt="Clown Face" className="h-6 w-6" />
             </button>
diff --git a/src/shared/notes/actions/repost.tsx b/src/shared/notes/actions/repost.tsx
index 8034b059..f6f4fbe5 100644
--- a/src/shared/notes/actions/repost.tsx
+++ b/src/shared/notes/actions/repost.tsx
@@ -46,7 +46,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
       <AlertDialog.Portal className="relative z-10">
         <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
               <AlertDialog.Title className="text-lg font-semibold leading-none text-white">
                 Confirm repost this post?
@@ -58,7 +58,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
             </div>
             <div className="flex justify-end gap-6 px-5 py-3">
               <AlertDialog.Cancel asChild>
-                <button className="inline-flex h-11 items-center justify-center rounded-lg bg-white/10 px-4 font-medium leading-none text-white outline-none">
+                <button className="inline-flex h-11 items-center justify-center rounded-lg bg-white/10 px-4 font-medium leading-none text-white outline-none backdrop-blur-xl">
                   Cancel
                 </button>
               </AlertDialog.Cancel>
diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index 8636930c..407585b6 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -41,7 +41,7 @@ export function NoteZap({ id }: { id: string }) {
       <Dialog.Portal className="relative z-10">
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="relative h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
               <div className="flex flex-col items-center gap-1.5">
                 <Dialog.Title className="font-medium leading-none text-white">
@@ -51,7 +51,7 @@ export function NoteZap({ id }: { id: string }) {
                   Send tip with Bitcoin via Lightning
                 </Dialog.Description>
               </div>
-              <Dialog.Close className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+              <Dialog.Close className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
                 <CancelIcon className="h-4 w-4 text-white/50" />
               </Dialog.Close>
             </div>
@@ -63,8 +63,8 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(21000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
-                        `${selected(21000) && 'bg-white/10'}`
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        `${selected(21000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
                       <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -76,8 +76,8 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(69000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
-                        `${selected(69000) && 'bg-white/10'}`
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        `${selected(69000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
                       <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -89,8 +89,8 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(100000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
-                        `${selected(100000) && 'bg-white/10'}`
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        `${selected(100000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
                       <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -102,8 +102,8 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(200000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
-                        `${selected(200000) && 'bg-white/10'}`
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        `${selected(200000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
                       <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -115,8 +115,8 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(500000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
-                        `${selected(500000) && 'bg-white/10'}`
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        `${selected(500000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
                       <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
@@ -128,8 +128,8 @@ export function NoteZap({ id }: { id: string }) {
                       type="button"
                       onClick={() => setAmount(1000000)}
                       className={twMerge(
-                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-white/10',
-                        `${selected(1000000) && 'bg-white/10'}`
+                        'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 backdrop-blur-xl hover:bg-white/10',
+                        `${selected(1000000) && 'bg-white/10 backdrop-blur-xl'}`
                       )}
                     >
                       <img className="h-12 w-12" src="/zap.png" alt="High Voltage" />
diff --git a/src/shared/notes/child.tsx b/src/shared/notes/child.tsx
index 44e42c86..d9f2e0f2 100644
--- a/src/shared/notes/child.tsx
+++ b/src/shared/notes/child.tsx
@@ -17,7 +17,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
+      <div className="relative mb-5 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
         <NoteSkeleton />
       </div>
     );
@@ -25,7 +25,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
 
   if (status === 'error') {
     return (
-      <div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3">
+      <div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
         <p className="break-all text-white/50">Failed to fetch event: {id}</p>
       </div>
     );
diff --git a/src/shared/notes/kinds/article.tsx b/src/shared/notes/kinds/article.tsx
index 0e6b5451..db181cd9 100644
--- a/src/shared/notes/kinds/article.tsx
+++ b/src/shared/notes/kinds/article.tsx
@@ -41,7 +41,7 @@ export function ArticleNote({ event }: { event: NDKEvent }) {
             className="h-44 w-full rounded-t-lg object-cover"
           />
         )}
-        <div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3">
+        <div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
           <h5 className="line-clamp-1 font-medium leading-none text-white">
             {metadata.title}
           </h5>
diff --git a/src/shared/notes/kinds/repost.tsx b/src/shared/notes/kinds/repost.tsx
index 86b2e10e..6d5e809c 100644
--- a/src/shared/notes/kinds/repost.tsx
+++ b/src/shared/notes/kinds/repost.tsx
@@ -21,7 +21,7 @@ export function Repost({ event }: { event: NDKEvent }) {
   if (status === 'loading') {
     return (
       <div className="h-min w-full px-3 py-1.5">
-        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3">
+        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
           <NoteSkeleton />
         </div>
       </div>
@@ -31,11 +31,11 @@ export function Repost({ event }: { event: NDKEvent }) {
   if (status === 'error') {
     return (
       <div className="h-min w-full px-3 py-1.5">
-        <div className="flex flex-col gap-1 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
+        <div className="flex flex-col gap-1 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
           <p className="select-text break-all text-white/50">
             Failed to get repost with ID
           </p>
-          <div className="break-all rounded-lg bg-white/10 px-2 py-2">
+          <div className="break-all rounded-lg bg-white/10 px-2 py-2 backdrop-blur-xl">
             <p className="text-white">{repostID}</p>
           </div>
         </div>
@@ -58,7 +58,7 @@ export function Repost({ event }: { event: NDKEvent }) {
 
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
+      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
         <div className="relative flex flex-col">
           <div className="isolate flex flex-col -space-y-4">
             <RepostUser pubkey={event.pubkey} />
diff --git a/src/shared/notes/kinds/unknown.tsx b/src/shared/notes/kinds/unknown.tsx
index 9b157c1c..2570896a 100644
--- a/src/shared/notes/kinds/unknown.tsx
+++ b/src/shared/notes/kinds/unknown.tsx
@@ -3,7 +3,7 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 export function UnknownNote({ event }: { event: NDKEvent }) {
   return (
     <div className="mb-3 mt-3 flex w-full flex-col gap-2">
-      <div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2">
+      <div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2 backdrop-blur-xl">
         <span className="text-sm font-medium leading-none text-white/50">
           Unknown kind: {event.kind}
         </span>
diff --git a/src/shared/notes/mentions/note.tsx b/src/shared/notes/mentions/note.tsx
index e8c5c080..e40aafdc 100644
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -33,7 +33,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
+      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
         <NoteSkeleton />
       </div>
     );
@@ -41,7 +41,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 
   if (status === 'error') {
     return (
-      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
+      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
         <p>Can&apos;t get event from relay</p>
       </div>
     );
@@ -66,7 +66,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       onKeyDown={(e) => openThread(e, id)}
       role="button"
       tabIndex={0}
-      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
+      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
     >
       <User pubkey={data.pubkey} time={data.created_at} size="small" />
       <div>{renderKind(data)}</div>
diff --git a/src/shared/notes/preview/link.tsx b/src/shared/notes/preview/link.tsx
index 1c105dfe..ea7942fe 100644
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -7,13 +7,13 @@ export function LinkPreview({ urls }: { urls: string[] }) {
   const domain = new URL(urls[0]);
 
   return (
-    <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10">
+    <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl">
       {status === 'loading' ? (
         <div className="flex flex-col">
-          <div className="h-44 w-full animate-pulse bg-white/10" />
+          <div className="h-44 w-full animate-pulse bg-white/10 backdrop-blur-xl" />
           <div className="flex flex-col gap-2 px-3 py-3">
-            <div className="h-3 w-2/3 animate-pulse rounded bg-white/10" />
-            <div className="h-3 w-3/4 animate-pulse rounded bg-white/10" />
+            <div className="h-3 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+            <div className="h-3 w-3/4 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
             <span className="mt-2.5 text-sm leading-none text-white/50">
               {domain.hostname}
             </span>
diff --git a/src/shared/notes/replies/form.tsx b/src/shared/notes/replies/form.tsx
index 7f7cbfb5..47184638 100644
--- a/src/shared/notes/replies/form.tsx
+++ b/src/shared/notes/replies/form.tsx
@@ -24,7 +24,7 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
   };
 
   return (
-    <div className="mt-3 flex flex-col rounded-xl bg-white/10">
+    <div className="mt-3 flex flex-col rounded-xl bg-white/10 backdrop-blur-xl">
       <div className="relative w-full flex-1 overflow-hidden">
         <textarea
           value={value}
diff --git a/src/shared/notes/replies/list.tsx b/src/shared/notes/replies/list.tsx
index d85d0382..3999298a 100644
--- a/src/shared/notes/replies/list.tsx
+++ b/src/shared/notes/replies/list.tsx
@@ -40,7 +40,7 @@ export function RepliesList({ id }: { id: string }) {
     return (
       <div className="mt-5 pb-10">
         <div className="flex flex-col">
-          <div className="rounded-xl bg-white/10 px-3 py-3">
+          <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
             <NoteSkeleton />
           </div>
         </div>
@@ -55,7 +55,7 @@ export function RepliesList({ id }: { id: string }) {
       </h5>
       <div className="flex flex-col gap-3">
         {data?.length === 0 ? (
-          <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10">
+          <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="flex flex-col items-center justify-center gap-2 py-6">
               <h3 className="text-3xl">👋</h3>
               <p className="leading-none text-white/50">Share your thought on it...</p>
diff --git a/src/shared/notes/skeleton.tsx b/src/shared/notes/skeleton.tsx
index 736c7b05..3e929053 100644
--- a/src/shared/notes/skeleton.tsx
+++ b/src/shared/notes/skeleton.tsx
@@ -2,14 +2,14 @@ export function NoteSkeleton() {
   return (
     <div className="flex h-min flex-col">
       <div className="flex items-start gap-3">
-        <div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-white/10" />
-        <div className="h-3 w-20 rounded bg-white/10" />
+        <div className="relative h-11 w-11 shrink overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
+        <div className="h-3 w-20 rounded bg-white/10 backdrop-blur-xl" />
       </div>
       <div className="-mt-6 animate-pulse pl-[49px]">
         <div className="flex flex-col gap-1">
-          <div className="h-3 w-full rounded bg-white/10" />
-          <div className="h-3 w-2/3 rounded bg-white/10" />
-          <div className="h-3 w-1/2 rounded bg-white/10" />
+          <div className="h-3 w-full rounded bg-white/10 backdrop-blur-xl" />
+          <div className="h-3 w-2/3 rounded bg-white/10 backdrop-blur-xl" />
+          <div className="h-3 w-1/2 rounded bg-white/10 backdrop-blur-xl" />
         </div>
       </div>
     </div>
diff --git a/src/shared/notes/wrapper.tsx b/src/shared/notes/wrapper.tsx
index 78fed294..257e1234 100644
--- a/src/shared/notes/wrapper.tsx
+++ b/src/shared/notes/wrapper.tsx
@@ -20,7 +20,7 @@ export function NoteWrapper({
 }) {
   return (
     <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
+      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
         <div className="relative">{root && <ChildNote id={root} />}</div>
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">
diff --git a/src/shared/titleBar.tsx b/src/shared/titleBar.tsx
index cc790bcf..e0610ead 100644
--- a/src/shared/titleBar.tsx
+++ b/src/shared/titleBar.tsx
@@ -19,7 +19,7 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
         <button
           type="button"
           onClick={() => remove(db, id)}
-          className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-white/10 group-hover:translate-y-0"
+          className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded backdrop-blur-xl transition-transform duration-150 ease-in-out hover:bg-white/10 group-hover:translate-y-0"
         >
           <CancelIcon className="h-3 w-3 text-white" />
         </button>
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index da8f1d7c..39e12f50 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -37,10 +37,10 @@ export function User({
         <div
           className={`${avatarWidth} ${avatarHeight}  ${
             size === 'small' ? 'rounded' : 'rounded-lg'
-          } relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10`}
+          } relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10 backdrop-blur-xl`}
         />
         <div className="flex flex-wrap items-baseline gap-1">
-          <div className="h-3.5 w-36 animate-pulse rounded bg-white/10" />
+          <div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         </div>
       </div>
     );
@@ -87,7 +87,7 @@ export function User({
       </div>
       <Popover.Portal>
         <Popover.Content
-          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none"
+          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl backdrop-blur-xl focus:outline-none"
           sideOffset={5}
         >
           <div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
@@ -115,13 +115,13 @@ export function User({
           <div className="flex items-center gap-2 px-3 py-3">
             <Link
               to={`/users/${pubkey}`}
-              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
             >
               View profile
             </Link>
             <Link
               to={`/chats/${pubkey}`}
-              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
             >
               Message
             </Link>
diff --git a/src/shared/userProfile.tsx b/src/shared/userProfile.tsx
index 33b4a029..bd304540 100644
--- a/src/shared/userProfile.tsx
+++ b/src/shared/userProfile.tsx
@@ -73,7 +73,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             <button
               type="button"
               onClick={() => unfollowUser(pubkey)}
-              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
             >
               Unfollow
             </button>
@@ -81,14 +81,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             <button
               type="button"
               onClick={() => followUser(pubkey)}
-              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
             >
               Follow
             </button>
           )}
           <Link
             to={`/chats/${pubkey}`}
-            className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+            className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
           >
             Message
           </Link>