diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index 76afd396..e18597f5 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -99,7 +99,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black" />
         <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 backdrop-blur-xl">
             <div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">
diff --git a/src/shared/widgets/eventLoader.tsx b/src/shared/widgets/eventLoader.tsx
index 5db4ab66..5cf068da 100644
--- a/src/shared/widgets/eventLoader.tsx
+++ b/src/shared/widgets/eventLoader.tsx
@@ -62,7 +62,7 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
               </h3>
             </div>
           )}
-          <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
+          <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
             <div
               className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
               role="progressbar"
diff --git a/src/shared/widgets/global/articles.tsx b/src/shared/widgets/global/articles.tsx
index d7fbc3b1..49ec936a 100644
--- a/src/shared/widgets/global/articles.tsx
+++ b/src/shared/widgets/global/articles.tsx
@@ -46,8 +46,10 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center ">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">Loading article...</p>
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                Loading article...
+              </p>
             </div>
           </div>
         ) : data.length === 0 ? (
@@ -55,10 +57,12 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
                   Oops, it looks like there are no articles.
                 </h3>
-                <p className="text-white/50">You can close this widget</p>
+                <p className="text-zinc-500 dark:text-zinc-400">
+                  You can close this widget
+                </p>
               </div>
             </div>
           </div>
diff --git a/src/shared/widgets/global/files.tsx b/src/shared/widgets/global/files.tsx
index 554fd13e..e7bf6528 100644
--- a/src/shared/widgets/global/files.tsx
+++ b/src/shared/widgets/global/files.tsx
@@ -48,8 +48,8 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center ">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
                 Loading file sharing event...
               </p>
             </div>
@@ -59,10 +59,12 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
                   Oops, it looks like there are no file sharing events.
                 </h3>
-                <p className="text-white/50">You can close this widget</p>
+                <p className="text-zinc-500 dark:text-zinc-400">
+                  You can close this widget
+                </p>
               </div>
             </div>
           </div>
diff --git a/src/shared/widgets/global/hashtag.tsx b/src/shared/widgets/global/hashtag.tsx
index d2dc6d30..4f35919c 100644
--- a/src/shared/widgets/global/hashtag.tsx
+++ b/src/shared/widgets/global/hashtag.tsx
@@ -76,10 +76,10 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
       <TitleBar id={params.id} title={params.title} />
       <div className="flex-1">
         {status === 'loading' ? (
-          <div className="flex h-full w-full items-center justify-center ">
+          <div className="flex h-full w-full items-center justify-center">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
                 Loading event related to the hashtag {params.title}...
               </p>
             </div>
@@ -89,10 +89,10 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
                   Oops, it looks like there are no events related to {params.title}.
                 </h3>
-                <p className="text-white/50">
+                <p className="text-zinc-500 dark:text-zinc-400">
                   You can close this widget or try with other hashtag
                 </p>
               </div>
diff --git a/src/shared/widgets/local/articles.tsx b/src/shared/widgets/local/articles.tsx
index 56fb2ba1..a0b229e6 100644
--- a/src/shared/widgets/local/articles.tsx
+++ b/src/shared/widgets/local/articles.tsx
@@ -48,8 +48,10 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center ">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">Loading article...</p>
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                Loading article...
+              </p>
             </div>
           </div>
         ) : dbEvents.length === 0 ? (
@@ -57,10 +59,12 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
                   Oops, it looks like there are no articles.
                 </h3>
-                <p className="text-white/50">You can close this widget</p>
+                <p className="text-zinc-500 dark:text-zinc-400">
+                  You can close this widget
+                </p>
               </div>
             </div>
           </div>
@@ -72,21 +76,21 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>
                       <span>Loading...</span>
-                      <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                      <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
                     </>
                   ) : hasNextPage ? (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Load more</span>
                     </>
                   ) : (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Nothing more to load</span>
                     </>
                   )}
diff --git a/src/shared/widgets/local/feeds.tsx b/src/shared/widgets/local/feeds.tsx
index 0bae1148..74d93278 100644
--- a/src/shared/widgets/local/feeds.tsx
+++ b/src/shared/widgets/local/feeds.tsx
@@ -84,8 +84,10 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                Loading newsfeed...
+              </p>
             </div>
           </div>
         ) : dbEvents.length === 0 ? (
@@ -93,10 +95,12 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
                   Oops, it looks like there are no posts.
                 </h3>
-                <p className="text-white/50">You can close this widget</p>
+                <p className="text-zinc-500 dark:text-zinc-400">
+                  You can close this widget
+                </p>
               </div>
             </div>
           </div>
@@ -108,21 +112,21 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>
                       <span>Loading...</span>
-                      <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                      <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
                     </>
                   ) : hasNextPage ? (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Load more</span>
                     </>
                   ) : (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Nothing more to load</span>
                     </>
                   )}
diff --git a/src/shared/widgets/local/files.tsx b/src/shared/widgets/local/files.tsx
index d0fb1903..ffeee4c0 100644
--- a/src/shared/widgets/local/files.tsx
+++ b/src/shared/widgets/local/files.tsx
@@ -48,8 +48,8 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center ">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
                 Loading file sharing event...
               </p>
             </div>
@@ -59,10 +59,12 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
                   Oops, it looks like there are no file sharing events.
                 </h3>
-                <p className="text-white/50">You can close this widget</p>
+                <p className="text-zinc-500 dark:text-zinc-400">
+                  You can close this widget
+                </p>
               </div>
             </div>
           </div>
@@ -74,21 +76,21 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>
                       <span>Loading...</span>
-                      <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                      <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
                     </>
                   ) : hasNextPage ? (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Load more</span>
                     </>
                   ) : (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Nothing more to load</span>
                     </>
                   )}
diff --git a/src/shared/widgets/local/follows.tsx b/src/shared/widgets/local/follows.tsx
index 4ef3a175..a1b2f5fe 100644
--- a/src/shared/widgets/local/follows.tsx
+++ b/src/shared/widgets/local/follows.tsx
@@ -83,8 +83,10 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center ">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">Loading post...</p>
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                Loading post...
+              </p>
             </div>
           </div>
         ) : dbEvents.length === 0 ? (
@@ -92,10 +94,12 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
                   Oops, it looks like there are no posts.
                 </h3>
-                <p className="text-white/50">You can close this widget</p>
+                <p className="text-zinc-500 dark:text-zinc-400">
+                  You can close this widget
+                </p>
               </div>
             </div>
           </div>
@@ -107,21 +111,21 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>
                       <span>Loading...</span>
-                      <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                      <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
                     </>
                   ) : hasNextPage ? (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Load more</span>
                     </>
                   ) : (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Nothing more to load</span>
                     </>
                   )}
diff --git a/src/shared/widgets/local/network.tsx b/src/shared/widgets/local/network.tsx
index 25e8a947..cd2c5b3a 100644
--- a/src/shared/widgets/local/network.tsx
+++ b/src/shared/widgets/local/network.tsx
@@ -106,7 +106,7 @@ export function LocalNetworkWidget() {
       <div className="flex-1">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-zinc-100 px-3 py-3 backdrop-blur-xl dark:bg-zinc-900">
+            <div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
               <NoteSkeleton />
             </div>
           </div>
@@ -121,7 +121,7 @@ export function LocalNetworkWidget() {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium hover:bg-interor-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>
diff --git a/src/shared/widgets/local/thread.tsx b/src/shared/widgets/local/thread.tsx
index 21e2e489..48873d7b 100644
--- a/src/shared/widgets/local/thread.tsx
+++ b/src/shared/widgets/local/thread.tsx
@@ -47,13 +47,13 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
       <div className="scrollbar-hide h-full overflow-y-auto">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+            <div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
               <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 backdrop-blur-xl">
+            <div className="rounded-xl bg-zinc-100 px-3 pt-3 dark:bg-zinc-900">
               <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
               <div className="mt-2">{renderKind(data)}</div>
               <NoteActions
diff --git a/src/shared/widgets/local/user.tsx b/src/shared/widgets/local/user.tsx
index 79f1c813..10bd8fde 100644
--- a/src/shared/widgets/local/user.tsx
+++ b/src/shared/widgets/local/user.tsx
@@ -86,21 +86,21 @@ export function LocalUserWidget({ params }: { params: Widget }) {
           <UserProfile pubkey={params.content} />
         </div>
         <div>
-          <h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-white">
+          <h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
             Latest posts
           </h3>
           <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 backdrop-blur-xl">
+                <div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
                   <NoteSkeleton />
                 </div>
               </div>
             ) : data.length === 0 ? (
               <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
+                <div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
                   <div className="flex flex-col items-center gap-4">
-                    <p className="text-center text-sm text-white">
+                    <p className="text-center text-sm text-zinc-900 dark:text-zinc-100">
                       No new post from 24 hours ago
                     </p>
                   </div>
diff --git a/src/shared/widgets/nostrBand/trendingAccounts.tsx b/src/shared/widgets/nostrBand/trendingAccounts.tsx
index 7d1eff00..c9d9b362 100644
--- a/src/shared/widgets/nostrBand/trendingAccounts.tsx
+++ b/src/shared/widgets/nostrBand/trendingAccounts.tsx
@@ -39,8 +39,8 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center ">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
                 Loading trending accounts...
               </p>
             </div>
@@ -50,7 +50,7 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
                   Sorry, an unexpected error has occurred.
                 </h3>
               </div>
diff --git a/src/shared/widgets/nostrBand/trendingNotes.tsx b/src/shared/widgets/nostrBand/trendingNotes.tsx
index 80ff21e0..2dd55702 100644
--- a/src/shared/widgets/nostrBand/trendingNotes.tsx
+++ b/src/shared/widgets/nostrBand/trendingNotes.tsx
@@ -40,8 +40,8 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
         {status === 'loading' ? (
           <div className="flex h-full w-full items-center justify-center ">
             <div className="inline-flex flex-col items-center justify-center gap-2">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">
+              <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
+              <p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
                 Loading trending posts...
               </p>
             </div>
@@ -51,7 +51,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
             <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="font-semibold leading-tight">
+                <h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
                   Sorry, an unexpected error has occurred.
                 </h3>
               </div>
diff --git a/src/shared/widgets/nostrBandUserProfile.tsx b/src/shared/widgets/nostrBandUserProfile.tsx
index 10ef237d..c6df612f 100644
--- a/src/shared/widgets/nostrBandUserProfile.tsx
+++ b/src/shared/widgets/nostrBandUserProfile.tsx
@@ -65,7 +65,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
 
   if (!profile) {
     return (
-      <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
+      <div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
         <p>Can&apos;t fetch profile</p>
       </div>
     );
@@ -73,18 +73,18 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
 
   return (
     <div className="h-min w-full px-3 pb-3">
-      <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
+      <div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
         <div className="flex items-center justify-between">
           <div className="inline-flex items-center gap-2">
             <Image
               src={profile.picture}
               className="h-11 w-11 shrink-0 rounded-lg object-cover"
             />
-            <div className="inline-flex flex-col gap-1">
-              <h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+            <div className="inline-flex flex-col">
+              <h3 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
                 {profile.display_name || profile.name}
               </h3>
-              <p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
+              <p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/50">
                 {profile.nip05 || shortenKey(data.pubkey)}
               </p>
             </div>
@@ -94,7 +94,7 @@ export function NostrBandUserProfile({ 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 backdrop-blur-xl hover:bg-interor-500 hover:text-white"
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
               >
                 <UnfollowIcon className="h-4 w-4" />
               </button>
@@ -102,7 +102,7 @@ export function NostrBandUserProfile({ 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 backdrop-blur-xl hover:bg-interor-500 hover:text-white"
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
               >
                 <FollowIcon className="h-4 w-4" />
               </button>
@@ -110,7 +110,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
           </div>
         </div>
         <div className="mt-2">
-          <p className="whitespace-pre-line break-words text-white">
+          <p className="whitespace-pre-line break-words text-zinc-900 dark:text-zinc-100">
             {profile.about || profile.bio}
           </p>
         </div>
@@ -120,26 +120,32 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
           ) : (
             <div className="flex w-full items-center gap-8">
               <div className="inline-flex flex-col gap-1">
-                <span className="font-semibold leading-none text-white">
+                <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
                   {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
                 </span>
-                <span className="text-sm leading-none text-white/50">Followers</span>
+                <span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
+                  Followers
+                </span>
               </div>
               <div className="inline-flex flex-col gap-1">
-                <span className="font-semibold leading-none text-white">
+                <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
                   {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
                 </span>
-                <span className="text-sm leading-none text-white/50">Following</span>
+                <span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
+                  Following
+                </span>
               </div>
               <div className="inline-flex flex-col gap-1">
-                <span className="font-semibold leading-none text-white">
+                <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
                   {userStats.stats[data.pubkey].zaps_received
                     ? compactNumber.format(
                         userStats.stats[data.pubkey].zaps_received.msats / 1000
                       )
                     : 0}
                 </span>
-                <span className="text-sm leading-none text-white/50">Zaps received</span>
+                <span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
+                  Zaps received
+                </span>
               </div>
             </div>
           )}
diff --git a/src/shared/widgets/other/learnNostr.tsx b/src/shared/widgets/other/learnNostr.tsx
index b48de3d6..68b037a6 100644
--- a/src/shared/widgets/other/learnNostr.tsx
+++ b/src/shared/widgets/other/learnNostr.tsx
@@ -27,7 +27,9 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
       <div className="scrollbar-hide h-full overflow-y-auto px-3 pb-20">
         {resources.map((resource, index) => (
           <div key={index} className="mb-6">
-            <h3 className="mb-2 font-medium text-white/50">{resource.title}</h3>
+            <h3 className="mb-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
+              {resource.title}
+            </h3>
             <div className="flex flex-col gap-2">
               {resource.data.length ? (
                 resource.data.map((item, index) => (
@@ -35,22 +37,24 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
                     key={index}
                     type="button"
                     onClick={() => open(item.id)}
-                    className="flex items-center justify-between rounded-xl bg-white/10 px-4 py-3 hover:bg-white/20"
+                    className="flex items-center justify-between rounded-xl bg-zinc-100 px-4 py-3 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
                   >
-                    <div className="flex flex-col items-start gap-1">
-                      <h5 className="font-semibold leading-none">{item.title}</h5>
+                    <div className="flex flex-col items-start">
+                      <h5 className="font-semibold text-zinc-900 dark:text-zinc-100">
+                        {item.title}
+                      </h5>
                       {seens.has(item.id) ? (
-                        <p className="text-sm leading-none text-green-500">Readed</p>
+                        <p className="text-sm text-green-500">Readed</p>
                       ) : (
-                        <p className="text-sm leading-none text-white/70">Unread</p>
+                        <p className="text-sm text-zinc-500 dark:text-zinc-400">Unread</p>
                       )}
                     </div>
-                    <ArrowRightIcon className="h-5 w-5 text-white" />
+                    <ArrowRightIcon className="h-5 w-5 text-zinc-100 dark:text-zinc-900" />
                   </button>
                 ))
               ) : (
-                <div className="flex h-14 items-center justify-center rounded-xl bg-white/10 px-3 py-3">
-                  <p className="text-sm font-medium text-white">
+                <div className="flex h-14 items-center justify-center rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
+                  <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                     More resources are coming, stay tuned.
                   </p>
                 </div>
diff --git a/src/shared/widgets/tmp/feeds.tsx b/src/shared/widgets/tmp/feeds.tsx
index 3e0aa300..07973910 100644
--- a/src/shared/widgets/tmp/feeds.tsx
+++ b/src/shared/widgets/tmp/feeds.tsx
@@ -42,9 +42,9 @@ export function XfeedsWidget({ params }: { params: Widget }) {
   };
 
   return (
-    <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="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
       <div className="w-full px-5">
-        <h3 className="mb-4 text-center text-lg font-semibold">
+        <h3 className="mb-4 text-center font-semibold text-zinc-900 dark:text-zinc-100">
           Choose account you want to add to group feeds
         </h3>
         <div className="mb-0 flex flex-col gap-2">
@@ -53,16 +53,16 @@ export function XfeedsWidget({ 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 backdrop-blur-xl placeholder:text-white/50"
+              className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
             />
           </div>
-          <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-white/10 py-2 backdrop-blur-xl">
+          <div className="scrollbar-hide flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-zinc-200 py-2 dark:bg-zinc-800">
             {db.account.network.map((item: string) => (
               <button
                 key={item}
                 type="button"
                 onClick={() => toggleGroup(item)}
-                className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-white/20"
+                className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-zinc-300 dark:hover:bg-zinc-700"
               >
                 <User pubkey={item} variant="simple" />
                 {groups.includes(item) && (
@@ -87,7 +87,7 @@ export function XfeedsWidget({ 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 backdrop-blur-xl 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 px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
             >
               Cancel
             </button>
diff --git a/src/shared/widgets/tmp/hashtag.tsx b/src/shared/widgets/tmp/hashtag.tsx
index c2d865e7..1962b18d 100644
--- a/src/shared/widgets/tmp/hashtag.tsx
+++ b/src/shared/widgets/tmp/hashtag.tsx
@@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
             <input
               {...register('hashtag', { required: true, minLength: 1 })}
               placeholder="#bitcoin"
-              className="relative h-11 w-full rounded-lg bg-zinc-100 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-white/50 dark:bg-zinc-900 dark:text-zinc-100"
+              className="relative h-12 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
             />
             <span className="text-sm text-red-400">
               {errors.hashtag && <p>{errors.hashtag.message}</p>}
@@ -82,7 +82,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-zinc-900 hover:bg-interor-600 focus:outline-none disabled:opacity-50 dark:text-zinc-100"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
             >
               <span className="w-5" />
               <span>Create</span>
@@ -91,7 +91,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
             <button
               type="button"
               onClick={cancel}
-              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-zinc-100 px-6 font-medium leading-none text-zinc-900 backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-100"
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
             >
               Cancel
             </button>