diff --git a/src/libs/ndk/cache.ts b/src/libs/ndk/cache.ts
index b5c2450f..53abe434 100644
--- a/src/libs/ndk/cache.ts
+++ b/src/libs/ndk/cache.ts
@@ -1,3 +1,4 @@
+// inspired by: https://github.com/nostr-dev-kit/ndk/tree/master/ndk-cache-dexie
 import { NDKEvent, NDKRelay, profileFromEvent } from '@nostr-dev-kit/ndk';
 import type {
   Hexpubkey,
diff --git a/src/libs/ndk/provider.tsx b/src/libs/ndk/provider.tsx
index 1cab3da4..136c5fa5 100644
--- a/src/libs/ndk/provider.tsx
+++ b/src/libs/ndk/provider.tsx
@@ -1,5 +1,6 @@
 // source: https://github.com/nostr-dev-kit/ndk-react/
 import NDK from '@nostr-dev-kit/ndk';
+import Markdown from 'markdown-to-jsx';
 import { NostrFetcher } from 'nostr-fetch';
 import { PropsWithChildren, createContext, useContext } from 'react';
 
@@ -7,6 +8,8 @@ import { NDKInstance } from '@libs/ndk/instance';
 
 import { LoaderIcon } from '@shared/icons';
 
+import { QUOTES } from '@stores/constants';
+
 interface NDKContext {
   ndk: undefined | NDK;
   relayUrls: string[];
@@ -22,19 +25,36 @@ const NDKContext = createContext<NDKContext>({
 const NDKProvider = ({ children }: PropsWithChildren<object>) => {
   const { ndk, relayUrls, fetcher } = NDKInstance();
 
-  if (!ndk) {
+  if (!ndk)
     return (
       <div
         data-tauri-drag-region
-        className="flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
+        className="relative flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
       >
-        <div className="flex flex-col items-center justify-center gap-4 text-center">
-          <p className="text-xl font-medium">Connecting to relays...</p>
-          <LoaderIcon className="h-7 w-7 animate-spin" />
+        <div className="flex max-w-2xl flex-col items-start gap-1">
+          <h5 className="font-semibold uppercase">TIP:</h5>
+          <Markdown
+            options={{
+              overrides: {
+                a: {
+                  props: {
+                    className: 'text-blue-500 hover:text-blue-600',
+                    target: '_blank',
+                  },
+                },
+              },
+            }}
+            className="text-4xl font-semibold leading-snug text-neutral-300 dark:text-neutral-700"
+          >
+            {QUOTES[Math.floor(Math.random() * QUOTES.length)]}
+          </Markdown>
+        </div>
+        <div className="absolute bottom-5 right-5 inline-flex items-center gap-2.5">
+          <LoaderIcon className="h-6 w-6 animate-spin text-blue-500" />
+          <p className="font-semibold">Connecting to relays...</p>
         </div>
       </div>
     );
-  }
 
   return (
     <NDKContext.Provider
diff --git a/src/libs/storage/provider.tsx b/src/libs/storage/provider.tsx
index c6ccbcd2..9e398e95 100644
--- a/src/libs/storage/provider.tsx
+++ b/src/libs/storage/provider.tsx
@@ -4,12 +4,15 @@ import { platform } from '@tauri-apps/plugin-os';
 import { relaunch } from '@tauri-apps/plugin-process';
 import Database from '@tauri-apps/plugin-sql';
 import { check } from '@tauri-apps/plugin-updater';
+import Markdown from 'markdown-to-jsx';
 import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
 
 import { LumeStorage } from '@libs/storage/instance';
 
 import { LoaderIcon } from '@shared/icons';
 
+import { QUOTES } from '@stores/constants';
+
 interface StorageContext {
   db: LumeStorage;
 }
@@ -54,21 +57,38 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
     if (!db) initLumeStorage();
   }, []);
 
-  if (!db) {
+  if (!db)
     return (
       <div
         data-tauri-drag-region
-        className="flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
+        className="relative flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950"
       >
-        <div className="flex flex-col items-center justify-center gap-4 text-center">
-          <p className="text-xl font-medium">
+        <div className="flex max-w-2xl flex-col items-start gap-1">
+          <h5 className="font-semibold uppercase">TIP:</h5>
+          <Markdown
+            options={{
+              overrides: {
+                a: {
+                  props: {
+                    className: 'text-blue-500 hover:text-blue-600',
+                    target: '_blank',
+                  },
+                },
+              },
+            }}
+            className="text-4xl font-semibold leading-snug text-neutral-300 dark:text-neutral-700"
+          >
+            {QUOTES[Math.floor(Math.random() * QUOTES.length)]}
+          </Markdown>
+        </div>
+        <div className="absolute bottom-5 right-5 inline-flex items-center gap-2.5">
+          <LoaderIcon className="h-6 w-6 animate-spin text-blue-500" />
+          <p className="font-semibold">
             {isNewVersion ? 'Found a new version, updating' : 'Checking for updates...'}
           </p>
-          <LoaderIcon className="h-7 w-7 animate-spin" />
         </div>
       </div>
     );
-  }
 
   return <StorageContext.Provider value={{ db }}>{children}</StorageContext.Provider>;
 };
diff --git a/src/shared/notes/file.tsx b/src/shared/notes/file.tsx
index 6b86eddf..3829c75e 100644
--- a/src/shared/notes/file.tsx
+++ b/src/shared/notes/file.tsx
@@ -32,7 +32,7 @@ export function FileNote({ event }: { event: NDKEvent }) {
     switch (type) {
       case 'image':
         return (
-          <div key={url} className="group">
+          <div key={url} className="group relative">
             <img
               src={url}
               alt={url}
diff --git a/src/shared/notes/kinds/file.tsx b/src/shared/notes/kinds/file.tsx
index 326b6383..40d339bc 100644
--- a/src/shared/notes/kinds/file.tsx
+++ b/src/shared/notes/kinds/file.tsx
@@ -28,7 +28,7 @@ export function FileKind({ tags }: { tags: NDKTag[] }) {
 
   if (type === 'image') {
     return (
-      <div key={url} className="group">
+      <div key={url} className="group relative">
         <img
           src={url}
           alt={url}
diff --git a/src/stores/constants.ts b/src/stores/constants.ts
index 2916b11d..56b61ddf 100644
--- a/src/stores/constants.ts
+++ b/src/stores/constants.ts
@@ -301,3 +301,17 @@ export const TOPICS = [
     ],
   },
 ];
+
+export const QUOTES = [
+  'You can learn more about nostr here: https://usenostr.org',
+  'Nostr have a lot of awesome clients, you can spend a bit of time to try https://snort.social',
+  'Nostr have a lot of awesome clients, you can spend a bit of time to try https://iris.to',
+  'Nostr have a lot of awesome clients, you can spend a bit of time to try https://primal.net',
+  'Nostr have a lot of awesome clients, you can spend a bit of time to try https://nostrudel.ninja',
+  "If you're using iOS, you can use Nostr with https://damus.io",
+  "If you're using Android, you can use Nostr with Amethyst",
+  'If you want to curating and sharing your interests on Nostr, you can use https://pinstr.app',
+  'If you want to post anonymously on Nostr, you can use https://www.get-tao.app',
+  'If you want to read in-depth content and high quality insight, you can use https://habla.news',
+  'You can send secure message on Nostr with https://0xchat.com/',
+];