diff --git a/package.json b/package.json
index f5d90f8e..68c94522 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "add-migrate": "cd src-tauri/ && sqlx migrate add",
     "prepare": "husky install",
     "lint": "eslint ./src --fix",
-    "format": "prettier ./src --write"
+    "format": "prettier ./src --write",
+    "dep-update": "pnpm update && cd src-tauri/ && cargo update"
   },
   "lint-staged": {
     "**/*.{ts, tsx}": "eslint --fix",
@@ -19,6 +20,7 @@
     "@headlessui/react": "^1.7.15",
     "@nostr-dev-kit/ndk": "^0.7.7",
     "@nostr-fetch/adapter-ndk": "^0.11.0",
+    "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tanstack/react-query": "^4.32.0",
@@ -64,7 +66,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "@tauri-apps/cli": "^1.4.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
-    "@types/node": "^18.16.20",
+    "@types/node": "^18.17.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/youtube-player": "^5.5.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af6ff204..81512acc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,9 @@ dependencies:
   '@nostr-fetch/adapter-ndk':
     specifier: ^0.11.0
     version: 0.11.0(@nostr-dev-kit/ndk@0.7.7)(nostr-fetch@0.12.1)
+  '@radix-ui/react-dialog':
+    specifier: ^1.0.4
+    version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-popover':
     specifier: ^1.0.6
     version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
@@ -142,8 +145,8 @@ devDependencies:
     specifier: ^4.2.0
     version: 4.2.0(prettier@2.8.8)
   '@types/node':
-    specifier: ^18.16.20
-    version: 18.16.20
+    specifier: ^18.17.0
+    version: 18.17.0
   '@types/react':
     specifier: ^18.2.15
     version: 18.2.15
@@ -215,7 +218,7 @@ devDependencies:
     version: 4.9.5
   vite:
     specifier: ^4.4.6
-    version: 4.4.6(@types/node@18.16.20)
+    version: 4.4.6(@types/node@18.17.0)
   vite-plugin-top-level-await:
     specifier: ^1.3.1
     version: 1.3.1(vite@4.4.6)
@@ -1272,6 +1275,40 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-dialog@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@types/react': 18.2.15
+      '@types/react-dom': 18.2.7
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.15)(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
@@ -2379,8 +2416,8 @@ packages:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
     dev: false
 
-  /@types/node@18.16.20:
-    resolution: {integrity: sha512-nL54VfDjThdP2UXJXZao5wp76CDiDw4zSRO8d4Tk7UgDqNKGKVEQB0/t3ti63NS+YNNkIQDvwEAF04BO+WYu7Q==}
+  /@types/node@18.17.0:
+    resolution: {integrity: sha512-GXZxEtOxYGFchyUzxvKI14iff9KZ2DI+A6a37o6EQevtg6uO9t+aUZKcaC1Te5Ng1OnLM7K9NVVj+FbecD9cJg==}
     dev: true
 
   /@types/normalize-package-data@2.4.1:
@@ -2556,7 +2593,7 @@ packages:
       vite: ^4
     dependencies:
       '@swc/core': 1.3.70
-      vite: 4.4.6(@types/node@18.16.20)
+      vite: 4.4.6(@types/node@18.17.0)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -3823,8 +3860,8 @@ packages:
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  /fast-glob@3.3.0:
-    resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==}
+  /fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4093,7 +4130,7 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 3.0.0
@@ -6871,7 +6908,7 @@ packages:
       chokidar: 3.5.3
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       glob-parent: 6.0.2
       is-glob: 4.0.3
       jiti: 1.19.1
@@ -7321,7 +7358,7 @@ packages:
       '@rollup/plugin-virtual': 3.0.1
       '@swc/core': 1.3.70
       uuid: 9.0.0
-      vite: 4.4.6(@types/node@18.16.20)
+      vite: 4.4.6(@types/node@18.17.0)
     transitivePeerDependencies:
       - '@swc/helpers'
       - rollup
@@ -7338,13 +7375,13 @@ packages:
       debug: 4.3.4
       globrex: 0.1.2
       tsconfck: 2.1.2(typescript@4.9.5)
-      vite: 4.4.6(@types/node@18.16.20)
+      vite: 4.4.6(@types/node@18.17.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /vite@4.4.6(@types/node@18.16.20):
+  /vite@4.4.6(@types/node@18.17.0):
     resolution: {integrity: sha512-EY6Mm8vJ++S3D4tNAckaZfw3JwG3wa794Vt70M6cNJ6NxT87yhq7EC8Rcap3ahyHdo8AhCmV9PTk+vG1HiYn1A==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -7372,7 +7409,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.16.20
+      '@types/node': 18.17.0
       esbuild: 0.18.15
       postcss: 8.4.27
       rollup: 3.26.3
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 5c6480a9..14f73bd5 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -217,7 +217,7 @@ dependencies = [
  "async-lock",
  "async-task",
  "concurrent-queue",
- "fastrand",
+ "fastrand 1.9.0",
  "futures-lite",
  "slab",
 ]
@@ -289,7 +289,7 @@ checksum = "0e97ce7de6cf12de5d7226c73f5ba9811622f4db3a5b91b55c53e987e5f91cba"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -300,13 +300,13 @@ checksum = "ecc7ab41815b3c653ccd2978ec3255c81349336702dfdf62ee6f7069b12a3aae"
 
 [[package]]
 name = "async-trait"
-version = "0.1.71"
+version = "0.1.72"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a564d521dd56509c4c47480d00b80ee55f7e385ae48db5744c67ad50c92d2ebf"
+checksum = "cc6dde6e4ed435a4c1ee4e73592f5ba9da2151af10076cc04858746af9352d09"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -490,7 +490,7 @@ dependencies = [
  "async-lock",
  "async-task",
  "atomic-waker",
- "fastrand",
+ "fastrand 1.9.0",
  "futures-lite",
  "log",
 ]
@@ -715,9 +715,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.3.12"
+version = "4.3.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3eab9e8ceb9afdade1ab3f0fd8dbce5b1b2f468ad653baf10e771781b2b67b73"
+checksum = "5fd304a20bff958a57f04c4e96a2e7594cc4490a0e809cbd48bb6437edaa452d"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -726,9 +726,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.3.12"
+version = "4.3.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f2763db829349bf00cfc06251268865ed4363b93a943174f638daf3ecdba2cd"
+checksum = "01c6a3f08f1fe5662a35cfe393aec09c4df95f60ee93b7556505260f75eee9e1"
 dependencies = [
  "anstream",
  "anstyle",
@@ -745,7 +745,7 @@ dependencies = [
  "heck 0.4.1",
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -1024,7 +1024,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
 dependencies = [
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -1080,7 +1080,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -1091,7 +1091,7 @@ checksum = "836a9bbc7ad63342d6d6e7b815ccab164bc77a2d95d84bc3117a8c0d5c98e2d5"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -1240,9 +1240,9 @@ dependencies = [
 
 [[package]]
 name = "either"
-version = "1.8.1"
+version = "1.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7fcaabb2fef8c910e7f4c7ce9f67a1283a1715879a7c230ca9d6d1ae31f16d91"
+checksum = "a26ae43d7bcc3b814de94796a5e736d4029efb0ee900c12e2d54c993ad1a1e07"
 dependencies = [
  "serde",
 ]
@@ -1305,7 +1305,7 @@ checksum = "5e9a1f9f7d83e59740248a6e14ecf93929ade55027844dfcea78beafccc15745"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -1371,6 +1371,12 @@ dependencies = [
  "instant",
 ]
 
+[[package]]
+name = "fastrand"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6999dc1837253364c2ebb0704ba97994bd874e8f195d665c50b7548f6ea92764"
+
 [[package]]
 name = "fd-lock"
 version = "3.0.13"
@@ -1540,7 +1546,7 @@ version = "1.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "49a9d51ce47660b1e808d3c990b4709f2f415d928835a17dfd16991515c46bce"
 dependencies = [
- "fastrand",
+ "fastrand 1.9.0",
  "futures-core",
  "futures-io",
  "memchr",
@@ -1557,7 +1563,7 @@ checksum = "89ca545a94061b6365f2c7355b4b32bd20df3ff95f02da9329b34ccc3bd6ee72"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -2886,9 +2892,9 @@ dependencies = [
 
 [[package]]
 name = "num-traits"
-version = "0.2.15"
+version = "0.2.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "578ede34cf02f8924ab9447f50c28075b4d3e5b269972345e7e0372b38c6cdcd"
+checksum = "f30b0abd723be7e2ffca1272140fac1a2f084c77ec3e123c192b66af1ee9e6c2"
 dependencies = [
  "autocfg",
  "libm",
@@ -3018,7 +3024,7 @@ checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -3271,7 +3277,7 @@ checksum = "ec2e072ecce94ec471b13398d5402c188e76ac03cf74dd1a975161b23a3f6d9c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -3945,9 +3951,9 @@ checksum = "e1cf6437eb19a8f4a6cc0f7dca544973b0b78843adbfeb3683d1a94a0024a294"
 
 [[package]]
 name = "scopeguard"
-version = "1.1.0"
+version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d29ab0c6d3fc0ee92fe66e2d99f700eab17a8d57d1c1d3b748380fb20baa78cd"
+checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
 [[package]]
 name = "sct"
@@ -3961,9 +3967,9 @@ dependencies = [
 
 [[package]]
 name = "security-framework"
-version = "2.9.1"
+version = "2.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fc758eb7bffce5b308734e9b0c1468893cae9ff70ebf13e7090be8dcbcc83a8"
+checksum = "05b64fb303737d99b81884b2c63433e9ae28abebe5eb5045dcdd175dc2ecf4de"
 dependencies = [
  "bitflags 1.3.2",
  "core-foundation",
@@ -3974,9 +3980,9 @@ dependencies = [
 
 [[package]]
 name = "security-framework-sys"
-version = "2.9.0"
+version = "2.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f51d0c0d83bec45f16480d0ce0058397a69e48fcdc52d1dc8855fb68acbd31a7"
+checksum = "e932934257d3b408ed8f30db49d85ea163bfe74961f017f405b025af298f0c7a"
 dependencies = [
  "core-foundation-sys",
  "libc",
@@ -4013,22 +4019,22 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.171"
+version = "1.0.174"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30e27d1e4fd7659406c492fd6cfaf2066ba8773de45ca75e855590f856dc34a9"
+checksum = "3b88756493a5bd5e5395d53baa70b194b05764ab85b59e43e4b8f4e1192fa9b1"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.171"
+version = "1.0.174"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "389894603bd18c46fa56231694f8d827779c0951a667087194cf9de94ed24682"
+checksum = "6e5c3a298c7f978e53536f95a63bdc4c4a64550582f31a0359a9afda6aede62e"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -4044,13 +4050,13 @@ dependencies = [
 
 [[package]]
 name = "serde_repr"
-version = "0.1.14"
+version = "0.1.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1d89a8107374290037607734c0b73a85db7ed80cae314b3c5791f192a496e731"
+checksum = "e168eaaf71e8f9bd6037feb05190485708e019f4fd87d161b3c0a0d37daf85e5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -4076,9 +4082,9 @@ dependencies = [
 
 [[package]]
 name = "serde_with"
-version = "3.0.0"
+version = "3.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f02d8aa6e3c385bf084924f660ce2a3a6bd333ba55b35e8590b321f35d88513"
+checksum = "21e47d95bc83ed33b2ecf84f4187ad1ab9685d18ff28db000c99deac8ce180e3"
 dependencies = [
  "base64 0.21.2",
  "chrono",
@@ -4092,14 +4098,14 @@ dependencies = [
 
 [[package]]
 name = "serde_with_macros"
-version = "3.0.0"
+version = "3.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "edc7d5d3932fb12ce722ee5e64dd38c504efba37567f0c402f6ca728c3b8b070"
+checksum = "ea3cee93715c2e266b9338b7544da68a9f24e227722ba482bd1c024367c77c65"
 dependencies = [
  "darling",
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -4180,9 +4186,9 @@ dependencies = [
 
 [[package]]
 name = "signal-hook"
-version = "0.3.16"
+version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b824b6e687aff278cdbf3b36f07aa52d4bd4099699324d5da86a2ebce3aa00b3"
+checksum = "8621587d4798caf8eb44879d42e56b9a93ea5dcd315a6487c357130095b62801"
 dependencies = [
  "libc",
  "signal-hook-registry",
@@ -4682,9 +4688,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.26"
+version = "2.0.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "45c3457aacde3c65315de5031ec191ce46604304d2446e803d71ade03308d970"
+checksum = "b60f673f44a8255b9c8c657daf66a596d435f2da81a555b06dc644d080ba45e0"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -4803,9 +4809,9 @@ dependencies = [
 
 [[package]]
 name = "target-lexicon"
-version = "0.12.9"
+version = "0.12.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "df8e77cb757a61f51b947ec4a7e3646efd825b73561db1c232a8ccb639e611a0"
+checksum = "1d2faeef5759ab89935255b1a4cd98e0baf99d1085e37d36599c625dac49ae8e"
 
 [[package]]
 name = "tauri"
@@ -4924,7 +4930,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-autostart"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#0863f800b81925884a6a37c042f3d92d433d4a37"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#81fb450c391e88f400f2824e9f3017bc72e92744"
 dependencies = [
  "auto-launch",
  "log",
@@ -4937,7 +4943,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-single-instance"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#0863f800b81925884a6a37c042f3d92d433d4a37"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#81fb450c391e88f400f2824e9f3017bc72e92744"
 dependencies = [
  "log",
  "serde",
@@ -4951,7 +4957,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-sql"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#0863f800b81925884a6a37c042f3d92d433d4a37"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#81fb450c391e88f400f2824e9f3017bc72e92744"
 dependencies = [
  "futures-core",
  "log",
@@ -4967,7 +4973,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-stronghold"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#0863f800b81925884a6a37c042f3d92d433d4a37"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#81fb450c391e88f400f2824e9f3017bc72e92744"
 dependencies = [
  "hex",
  "iota-crypto 0.23.0",
@@ -4983,7 +4989,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-upload"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#0863f800b81925884a6a37c042f3d92d433d4a37"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#81fb450c391e88f400f2824e9f3017bc72e92744"
 dependencies = [
  "futures-util",
  "log",
@@ -5089,15 +5095,14 @@ dependencies = [
 
 [[package]]
 name = "tempfile"
-version = "3.6.0"
+version = "3.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "31c0432476357e58790aaa47a8efb0c5138f137343f3b5f23bd36a27e3b0a6d6"
+checksum = "5486094ee78b2e5038a6382ed7645bc084dc2ec433426ca4c3cb61e2007b8998"
 dependencies = [
- "autocfg",
  "cfg-if",
- "fastrand",
+ "fastrand 2.0.0",
  "redox_syscall 0.3.5",
- "rustix 0.37.23",
+ "rustix 0.38.4",
  "windows-sys 0.48.0",
 ]
 
@@ -5120,22 +5125,22 @@ checksum = "8eaa81235c7058867fa8c0e7314f33dcce9c215f535d1913822a2b3f5e289f3c"
 
 [[package]]
 name = "thiserror"
-version = "1.0.43"
+version = "1.0.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a35fc5b8971143ca348fa6df4f024d4d55264f3468c71ad1c2f365b0a4d58c42"
+checksum = "611040a08a0439f8248d1990b111c95baa9c704c805fa1f62104b39655fd7f90"
 dependencies = [
  "thiserror-impl",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.43"
+version = "1.0.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "463fe12d7993d3b327787537ce8dd4dfa058de32fc2b195ef3cde03dc4771e8f"
+checksum = "090198534930841fab3a5d1bb637cde49e339654e606195f8d9c76eeb081dc96"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -5216,7 +5221,7 @@ checksum = "630bdcf245f78637c13ec01ffae6187cca34625e8c63150d424b59e55af2675e"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -5324,7 +5329,7 @@ checksum = "5f4f31f56159e98206da9efd823404b79b6ef3143b4a7ab76e67b1751b25a4ab"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
@@ -5602,7 +5607,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
  "wasm-bindgen-shared",
 ]
 
@@ -5636,7 +5641,7 @@ checksum = "54681b18a46765f095758388f2d0cf16eb8d4169b639ab575a8f5693af210c7b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -6319,7 +6324,7 @@ checksum = "ce36e65b0d2999d2aafac989fb249189a141aee1f53c612c1f37d72631959f69"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.26",
+ "syn 2.0.27",
 ]
 
 [[package]]
diff --git a/src/app/space/components/blocks/following.tsx b/src/app/space/components/blocks/following.tsx
index 63729329..ac377d04 100644
--- a/src/app/space/components/blocks/following.tsx
+++ b/src/app/space/components/blocks/following.tsx
@@ -12,8 +12,6 @@ import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
-import { useNote } from '@stores/note';
-
 import { LumeEvent } from '@utils/types';
 
 const ITEM_PER_PAGE = 10;
@@ -21,13 +19,8 @@ const ITEM_PER_PAGE = 10;
 export function FollowingBlock() {
   // subscribe for live update
   useNewsfeed();
-  // notify user that new note is arrive
-  const [hasNewNote, toggleHasNewNote] = useNote((state) => [
-    state.hasNewNote,
-    state.toggleHasNewNote,
-  ]);
 
-  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
+  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed-circle'],
       queryFn: async ({ pageParam = 0 }) => {
@@ -60,15 +53,6 @@ export function FollowingBlock() {
     }
   }, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
 
-  const refreshFirstPage = () => {
-    // refetch
-    refetch({ refetchPage: (_, index: number) => index === 0 });
-    // scroll to top
-    rowVirtualizer.scrollToIndex(1);
-    // stop notify
-    toggleHasNewNote(false);
-  };
-
   const renderItem = useCallback(
     (index: string | number) => {
       const note: LumeEvent = notes[index];
@@ -143,17 +127,6 @@ export function FollowingBlock() {
   return (
     <div className="relative w-[400px] shrink-0 border-r border-zinc-900">
       <TitleBar title="Your Circle" />
-      {hasNewNote && (
-        <div className="absolute left-1/2 top-12 z-50 -translate-x-1/2 transform">
-          <button
-            type="button"
-            onClick={() => refreshFirstPage()}
-            className="inline-flex w-min items-center justify-center rounded-full border border-fuchsia-800/50 bg-fuchsia-500 px-3.5 py-1.5 text-sm hover:bg-fuchsia-600"
-          >
-            Newest
-          </button>
-        </div>
-      )}
       <div
         ref={parentRef}
         className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
diff --git a/src/app/user/index.tsx b/src/app/user/index.tsx
index e05d8627..860a668e 100644
--- a/src/app/user/index.tsx
+++ b/src/app/user/index.tsx
@@ -1,12 +1,11 @@
-import { Tab } from '@headlessui/react';
-import { Fragment, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 
 import { UserFeed } from '@app/user/components/feed';
 import { UserMetadata } from '@app/user/components/metadata';
 
 import { EditProfileModal } from '@shared/editProfileModal';
-import { ThreadsIcon, ZapIcon } from '@shared/icons';
+import { ZapIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
@@ -136,35 +135,11 @@ export function UserScreen() {
           </div>
         </div>
         <div className="mt-8 w-full border-t border-zinc-900">
-          <Tab.Group>
-            <Tab.List className="mb-2 px-5">
-              <Tab as={Fragment}>
-                {({ selected }) => (
-                  <button
-                    type="button"
-                    className={`${
-                      selected ? 'border-fuchsia-500' : 'border-transparent'
-                    } inline-flex h-16 items-start gap-2 border-t pt-4 font-medium`}
-                  >
-                    <ThreadsIcon className="h-3.5 w-3.5" />
-                    <div className="flex flex-col justify-start gap-0.5 text-start">
-                      <p className="text-sm font-medium leading-none text-zinc-200">
-                        Activities
-                      </p>
-                      <span className="text-sm leading-none text-zinc-500">
-                        48 hours ago
-                      </span>
-                    </div>
-                  </button>
-                )}
-              </Tab>
-            </Tab.List>
-            <Tab.Panels>
-              <Tab.Panel>
-                <UserFeed pubkey={pubkey} />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
+          <div className="flex flex-col justify-start gap-0.5 text-start">
+            <p className="text-sm font-medium leading-none text-zinc-200">Latest posts</p>
+            <span className="text-sm leading-none text-zinc-500">48 hours ago</span>
+          </div>
+          <UserFeed pubkey={pubkey} />
         </div>
       </div>
     </div>
diff --git a/src/index.css b/src/index.css
index 12383eda..88af235d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,7 +15,10 @@ button {
 }
 
 .markdown {
-  @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mt-3 prose-img:mb-2 prose-hr:mx-0 prose-hr:my-2;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+  @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
 }
 
 .ProseMirror p.is-empty::before {
diff --git a/src/shared/notes/hashtag.tsx b/src/shared/notes/hashtag.tsx
index 7baf22d1..50ea04de 100644
--- a/src/shared/notes/hashtag.tsx
+++ b/src/shared/notes/hashtag.tsx
@@ -15,7 +15,7 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
-      className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
+      className="break-words font-normal text-orange-400 no-underline hover:text-orange-500"
     >
       {tag}
     </button>
diff --git a/src/shared/notes/mentions/note.tsx b/src/shared/notes/mentions/note.tsx
index 722d2e33..85ba86b1 100644
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -29,7 +29,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       onKeyDown={(e) => openThread(e, id)}
       role="button"
       tabIndex={0}
-      className="mb-2 mt-3 rounded-lg border-t border-zinc-700/50 bg-zinc-800/50 px-3 py-3"
+      className="mb-2 mt-3 cursor-default rounded-lg border-t border-zinc-700/50 bg-zinc-800/50 px-3 py-3"
     >
       {status === 'loading' ? (
         <NoteSkeleton />
diff --git a/src/shared/notes/mentions/user.tsx b/src/shared/notes/mentions/user.tsx
index c2428734..798d2ae7 100644
--- a/src/shared/notes/mentions/user.tsx
+++ b/src/shared/notes/mentions/user.tsx
@@ -2,7 +2,7 @@ import { BLOCK_KINDS } from '@stores/constants';
 
 import { useBlock } from '@utils/hooks/useBlock';
 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';
 
 export function MentionUser({ pubkey }: { pubkey: string }) {
   const { add } = useBlock();
@@ -18,9 +18,9 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
           content: pubkey,
         })
       }
-      className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-zinc-700 hover:text-blue-500"
+      className="break-words font-normal text-blue-400 no-underline hover:text-blue-500"
     >
-      {'@' + user?.name || user?.displayName || shortenKey(pubkey)}
+      {'@' + user?.name || user?.displayName || displayNpub(pubkey, 16)}
     </button>
   );
 }
diff --git a/src/shared/notification/modal.tsx b/src/shared/notification/modal.tsx
index 2ff02db3..188dcbd2 100644
--- a/src/shared/notification/modal.tsx
+++ b/src/shared/notification/modal.tsx
@@ -1,7 +1,7 @@
-import { Dialog, Transition } from '@headlessui/react';
 import { NDKEvent } from '@nostr-dev-kit/ndk';
+import * as Dialog from '@radix-ui/react-dialog';
 import { useQuery } from '@tanstack/react-query';
-import { Fragment, useState } from 'react';
+import { useCallback } from 'react';
 
 import { useNDK } from '@libs/ndk/provider';
 
@@ -13,8 +13,6 @@ import { nHoursAgo } from '@utils/date';
 import { LumeEvent } from '@utils/types';
 
 export function NotificationModal({ pubkey }: { pubkey: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-
   const { fetcher, relayUrls } = useNDK();
   const { status, data } = useQuery(
     ['notification', pubkey],
@@ -22,8 +20,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
       const events = await fetcher.fetchAllEvents(
         relayUrls,
         { '#p': [pubkey], kinds: [1, 6, 7, 9735] },
-        { since: nHoursAgo(48) },
-        { sort: true }
+        { since: nHoursAgo(24) }
       );
       return events as unknown as LumeEvent[];
     },
@@ -32,132 +29,98 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
     }
   );
 
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-
-  const openModal = () => {
-    setIsOpen(true);
-  };
-
-  const renderItem = (event: NDKEvent) => {
-    if (event.kind === 1) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <User pubkey={event.pubkey} time={event.created_at} isChat={true} />
-          <div className="-mt-[20px] pl-[49px]">
-            <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
-              {event.content}
-            </p>
-          </div>
-        </div>
-      );
-    }
-
-    if (event.kind === 6) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <NotificationUser pubkey={event.pubkey} desc="repost your post" />
-        </div>
-      );
-    }
-
-    if (event.kind === 7) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <NotificationUser pubkey={event.pubkey} desc="liked your post" />
-        </div>
-      );
-    }
-
-    if (event.kind === 9735) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <NotificationUser pubkey={event.pubkey} desc="zapped your post" />
-        </div>
-      );
-    }
-
-    return <div className="flex flex-col px-5 py-2">{event.content}</div>;
-  };
+  const renderItem = useCallback(
+    (event: NDKEvent) => {
+      switch (event.kind) {
+        case 1:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <User pubkey={event.pubkey} time={event.created_at} isChat={true} />
+              <div className="-mt-[20px] pl-[49px]">
+                <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
+                  {event.content}
+                </p>
+              </div>
+            </div>
+          );
+        case 6:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <NotificationUser pubkey={event.pubkey} desc="repost your post" />
+            </div>
+          );
+        case 7:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <NotificationUser pubkey={event.pubkey} desc="liked your post" />
+            </div>
+          );
+        case 9735:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <NotificationUser pubkey={event.pubkey} desc="zapped your post" />
+            </div>
+          );
+        default:
+          return <div className="flex flex-col px-5 py-2">{event.content}</div>;
+      }
+    },
+    [data]
+  );
 
   return (
-    <>
-      <button
-        type="button"
-        onClick={() => openModal()}
-        aria-label="Notification"
-        className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
-      >
-        <BellIcon className="h-4 w-4 text-zinc-400" />
-      </button>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
-                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
-                  <div className="flex flex-col gap-1">
-                    <div className="flex items-center justify-between">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-semibold leading-none text-zinc-100"
-                      >
-                        Notification
-                      </Dialog.Title>
-                      <button
-                        type="button"
-                        onClick={closeModal}
-                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-                      >
-                        <CancelIcon className="h-5 w-5 text-zinc-300" />
-                      </button>
-                    </div>
-                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
-                      All things happen when you rest in 48 hours ago
-                    </Dialog.Description>
-                  </div>
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
+        >
+          <BellIcon className="h-4 w-4 text-zinc-400" />
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-[1000px] bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+        <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center data-[state=open]:animate-contentShow">
+          <Dialog.Content className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
+            <div className="h-min w-full shrink-0 border-b border-zinc-800 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-zinc-100">
+                    Notification
+                  </Dialog.Title>
+                  <Dialog.Close asChild>
+                    <button
+                      type="button"
+                      className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+                    >
+                      <CancelIcon className="h-5 w-5 text-zinc-300" />
+                    </button>
+                  </Dialog.Close>
                 </div>
-                <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
-                  {status === 'loading' ? (
-                    <div className="inline-flex items-center justify-center px-4 py-3">
-                      <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
-                    </div>
-                  ) : data.length < 1 ? (
-                    <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-zinc-500">
-                        Yo!, you&apos;ve no new notifications
-                      </p>
-                    </div>
-                  ) : (
-                    data.map((event) => renderItem(event))
-                  )}
+                <Dialog.Description className="text-sm leading-tight text-zinc-400">
+                  All things happen when you rest in 24 hours ago
+                </Dialog.Description>
+              </div>
+            </div>
+            <div className="scrollbar-hide flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
+              {status === 'loading' ? (
+                <div className="inline-flex items-center justify-center px-4 py-3">
+                  <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
                 </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition>
-    </>
+              ) : data.length < 1 ? (
+                <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-zinc-500">
+                    Yo!, you&apos;ve no new notifications
+                  </p>
+                </div>
+              ) : (
+                data.map((event) => renderItem(event))
+              )}
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 7915eeb6..4a4814ce 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,38 +1,45 @@
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
-	content: ["./src/**/*.{js,ts,jsx,tsx}", "index.html"],
-	darkMode: "class",
-	theme: {
-		extend: {
-			keyframes: {
-				slideDownAndFade: {
-					from: { opacity: 0, transform: "translateY(-2px)" },
-					to: { opacity: 1, transform: "translateY(0)" },
-				},
-				slideLeftAndFade: {
-					from: { opacity: 0, transform: "translateX(2px)" },
-					to: { opacity: 1, transform: "translateX(0)" },
-				},
-				slideUpAndFade: {
-					from: { opacity: 0, transform: "translateY(2px)" },
-					to: { opacity: 1, transform: "translateY(0)" },
-				},
-				slideRightAndFade: {
-					from: { opacity: 0, transform: "translateX(-2px)" },
-					to: { opacity: 1, transform: "translateX(0)" },
-				},
-			},
-			animation: {
-				slideDownAndFade:
-					"slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-				slideLeftAndFade:
-					"slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-				slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-				slideRightAndFade:
-					"slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-			},
-		},
-	},
-	plugins: [require("@tailwindcss/typography")],
+  content: ['./src/**/*.{js,ts,jsx,tsx}', 'index.html'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      keyframes: {
+        slideDownAndFade: {
+          from: { opacity: 0, transform: 'translateY(-2px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
+        },
+        slideLeftAndFade: {
+          from: { opacity: 0, transform: 'translateX(2px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
+        },
+        slideUpAndFade: {
+          from: { opacity: 0, transform: 'translateY(2px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
+        },
+        slideRightAndFade: {
+          from: { opacity: 0, transform: 'translateX(-2px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
+        },
+        overlayShow: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        contentShow: {
+          from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
+          to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+        },
+      },
+      animation: {
+        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
 };