diff --git a/src/app/chats/chat.tsx b/src/app/chats/chat.tsx
index f9d15696..5dfeb321 100644
--- a/src/app/chats/chat.tsx
+++ b/src/app/chats/chat.tsx
@@ -11,6 +11,7 @@ import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
 import { LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
 
 import { useStronghold } from '@stores/stronghold';
 
@@ -35,6 +36,7 @@ export function ChatScreen() {
           message={message}
           userPubkey={db.account.pubkey}
           userPrivkey={userPrivkey}
+          self={message.pubkey === db.account.pubkey}
         />
       );
     },
@@ -71,7 +73,10 @@ export function ChatScreen() {
     <div className="h-full w-full p-3">
       <div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl">
         <div className="flex h-full flex-col justify-between overflow-hidden">
-          <div className="h-full w-full flex-1">
+          <div className="flex h-16 shrink-0 items-center border-b border-white/10 px-3">
+            <User pubkey={pubkey} variant="simple" />
+          </div>
+          <div className="h-full w-full flex-1 px-3 py-3">
             {status === 'loading' ? (
               <div className="flex h-full w-full items-center justify-center">
                 <div className="flex flex-col items-center gap-1.5">
@@ -92,7 +97,7 @@ export function ChatScreen() {
               </VList>
             )}
           </div>
-          <div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
+          <div className="z-50 shrink-0 rounded-b-lg border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
             <ChatForm
               receiverPubkey={pubkey}
               userPubkey={db.account.pubkey}
diff --git a/src/app/chats/components/chatListItem.tsx b/src/app/chats/components/chatListItem.tsx
index e818cb4f..a40fb4c7 100644
--- a/src/app/chats/components/chatListItem.tsx
+++ b/src/app/chats/components/chatListItem.tsx
@@ -28,9 +28,12 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
 
   if (status === 'loading') {
     return (
-      <div className="inline-flex h-10 items-center gap-2.5 rounded-md px-3">
-        <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 className="flex items-center gap-2.5 rounded-md px-3">
+        <div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
+        <div className="flex w-full flex-col">
+          <div className="h-2.5 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+          <div className="h-2.5 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+        </div>
       </div>
     );
   }
@@ -55,24 +58,28 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
           loading="lazy"
           decoding="async"
           style={{ contentVisibility: 'auto' }}
-          className="h-9 w-9 rounded-lg"
+          className="h-10 w-10 rounded-lg"
         />
         <Avatar.Fallback delayMs={300}>
-          <img src={svgURI} alt={event.pubkey} className="h-9 w-9 rounded-lg bg-white" />
+          <img
+            src={svgURI}
+            alt={event.pubkey}
+            className="h-10 w-10 rounded-lg bg-white"
+          />
         </Avatar.Fallback>
       </Avatar.Root>
       <div className="flex w-full flex-col">
-        <h5 className="max-w-[10rem] truncate font-semibold text-white">
+        <div className="max-w-[10rem] truncate font-semibold text-white">
           {user?.name ||
             user?.display_name ||
             user?.displayName ||
             displayNpub(event.pubkey, 16)}
-        </h5>
+        </div>
         <div className="flex w-full items-center justify-between">
-          <p className="max-w-[8rem] truncate text-sm text-white/70">
+          <div className="max-w-[10rem] truncate text-sm text-white/70">
             {decryptedContent}
-          </p>
-          <p className="text-sm text-white/70">{createdAt}</p>
+          </div>
+          <div className="text-sm text-white/70">{createdAt}</div>
         </div>
       </div>
     </NavLink>
diff --git a/src/app/chats/components/message.tsx b/src/app/chats/components/message.tsx
index 58e1f071..e8ae7638 100644
--- a/src/app/chats/components/message.tsx
+++ b/src/app/chats/components/message.tsx
@@ -1,9 +1,9 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { twMerge } from 'tailwind-merge';
 
 import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
 
 import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/notes';
-import { User } from '@shared/user';
 
 import { parser } from '@utils/parser';
 
@@ -11,44 +11,41 @@ export function ChatMessage({
   message,
   userPubkey,
   userPrivkey,
+  self,
 }: {
   message: NDKEvent;
   userPubkey: string;
   userPrivkey: string;
+  self: boolean;
 }) {
   const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
   const richContent = parser(decryptedContent) ?? null;
 
   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 flex-col">
-        <User pubkey={message.pubkey} time={message.created_at} variant="chat" />
-        <div className="-mt-6 flex items-start gap-3">
-          <div className="w-10 shrink-0" />
-          {!richContent ? (
-            <p>Decrypting...</p>
-          ) : (
-            <div>
-              <p className="select-text whitespace-pre-line text-white">
-                {richContent.parsed}
-              </p>
-              <div>
-                {richContent.images.length > 0 && (
-                  <ImagePreview urls={richContent.images} />
-                )}
-                {richContent.videos.length > 0 && (
-                  <VideoPreview urls={richContent.videos} />
-                )}
-                {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
-                {richContent.notes.length > 0 &&
-                  richContent.notes.map((note: string) => (
-                    <MentionNote key={note} id={note} />
-                  ))}
-              </div>
-            </div>
-          )}
+    <div
+      className={twMerge(
+        'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
+        self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10'
+      )}
+    >
+      {!richContent ? (
+        <p>Decrypting...</p>
+      ) : (
+        <div>
+          <p className="select-text whitespace-pre-line text-white">
+            {richContent.parsed}
+          </p>
+          <div>
+            {richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
+            {richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
+            {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
+            {richContent.notes.length > 0 &&
+              richContent.notes.map((note: string) => (
+                <MentionNote key={note} id={note} />
+              ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/chats/index.tsx b/src/app/chats/index.tsx
index 86a73ca8..6d12c1d5 100644
--- a/src/app/chats/index.tsx
+++ b/src/app/chats/index.tsx
@@ -16,7 +16,12 @@ export function ChatsScreen() {
     async () => {
       return await getAllNIP04Chats();
     },
-    { refetchOnWindowFocus: false }
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: Infinity,
+    }
   );
 
   const renderItem = useCallback(
@@ -31,9 +36,13 @@ export function ChatsScreen() {
       <div className="scrollbar-hide col-span-1 h-full overflow-y-auto border-r border-white/5">
         <div
           data-tauri-drag-region
-          className="h-16 w-full shrink-0 border-b border-white/5"
-        />
-        <div className="flex h-full flex-col gap-1 py-2">
+          className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
+        >
+          <h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
+            All chats
+          </h3>
+        </div>
+        <div className="flex h-full flex-col gap-1">
           {status === 'loading' ? (
             <div className="flex h-full w-full items-center justify-center pb-16">
               <div className="inline-flex flex-col items-center justify-center gap-2">
diff --git a/src/app/space/components/widgetList.tsx b/src/app/space/components/widgetList.tsx
index ec2c5851..3ceeb91e 100644
--- a/src/app/space/components/widgetList.tsx
+++ b/src/app/space/components/widgetList.tsx
@@ -57,9 +57,9 @@ export function WidgetList({ params }: { params: Widget }) {
   );
 
   const renderItem = useCallback(
-    (row: WidgetGroup) => {
+    (row: WidgetGroup, index: number) => {
       return (
-        <div className="flex flex-col gap-3">
+        <div key={index} className="flex flex-col gap-3">
           <h3 className="font-medium text-white/50">{row.title}</h3>
           <div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
             {row.data.map((item, index) => (
@@ -101,7 +101,9 @@ export function WidgetList({ params }: { params: Widget }) {
       <TitleBar id={params.id} title="Add widget" />
       <div className="scrollbar-hide h-full overflow-y-auto pb-20">
         <div className="flex flex-col gap-6 px-3">
-          {DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
+          {DefaultWidgets.map((row: WidgetGroup, index: number) =>
+            renderItem(row, index)
+          )}
           <div className="border-t border-white/5 pt-6">
             <button
               type="button"
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index d640cc41..f4e80848 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -67,8 +67,8 @@ export function ActiveAccount() {
           alt={db.account.npub}
           className="h-9 w-9 shrink-0 rounded-lg object-cover"
         />
-        <div className="flex w-full flex-1 flex-col items-start gap-0.5">
-          <p className="max-w-[10rem] truncate font-semibold leading-none text-white">
+        <div className="flex flex-col items-start">
+          <p className="max-w-[10rem] truncate text-base font-semibold leading-none text-white">
             {user?.name || user?.display_name || user?.displayName}
           </p>
           <span className="max-w-[7rem] truncate text-sm leading-none text-white/50">
diff --git a/src/shared/icons/community.tsx b/src/shared/icons/community.tsx
new file mode 100644
index 00000000..e1899bcc
--- /dev/null
+++ b/src/shared/icons/community.tsx
@@ -0,0 +1,19 @@
+import { SVGProps } from 'react';
+
+export function CommunityIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M14.606 17.613C13.593 13.981 10.87 12 8 12s-5.594 1.98-6.608 5.613C.861 19.513 2.481 21 4.145 21h7.708c1.663 0 3.283-1.487 2.753-3.387zM3.999 7a4 4 0 118 0 4 4 0 01-8 0zM13.498 7.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0zM14.194 12.773c1.046 1.136 1.86 2.59 2.339 4.303A4.501 4.501 0 0116.387 20h3.918c1.497 0 2.983-1.344 2.497-3.084-.883-3.168-3.268-4.916-5.8-4.916-.985 0-1.947.264-2.808.773z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts
index 6bb149d5..3bc53bf2 100644
--- a/src/shared/icons/index.ts
+++ b/src/shared/icons/index.ts
@@ -72,3 +72,4 @@ export * from './explore';
 export * from './explore2';
 export * from './home';
 export * from './chats';
+export * from './community';
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 4c3e1922..195a9a01 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -10,6 +10,7 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon,
   ChatsIcon,
+  CommunityIcon,
   ExploreIcon,
   HomeIcon,
   RelayIcon,
@@ -90,6 +91,23 @@ export function Navigation() {
             </span>
             Chats
           </NavLink>
+          <NavLink
+            to="/communities"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/70'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
+              <CommunityIcon className="h-5 w-5" />
+            </span>
+            Communities
+          </NavLink>
           <NavLink
             to="/relays"
             preventScrollReset={true}
diff --git a/src/shared/nip05.tsx b/src/shared/nip05.tsx
index a26c0c68..dcb2d92b 100644
--- a/src/shared/nip05.tsx
+++ b/src/shared/nip05.tsx
@@ -61,8 +61,10 @@ export const NIP05 = memo(function NIP05({
   }
 
   return (
-    <div className={twMerge('leadning-none inline-flex items-center gap-1', className)}>
-      <p>{nip05}</p>
+    <div className={twMerge('inline-flex items-center gap-1', className)}>
+      <div>
+        <p className="text-sm">{nip05}</p>
+      </div>
       <div className="shrink-0">
         {data === true ? (
           <VerifiedIcon className="h-3 w-3 text-green-500" />
diff --git a/src/shared/notes/kinds/article.tsx b/src/shared/notes/kinds/article.tsx
index 2f06b781..d720d587 100644
--- a/src/shared/notes/kinds/article.tsx
+++ b/src/shared/notes/kinds/article.tsx
@@ -38,13 +38,15 @@ export function ArticleNote(props: { event?: NDKEvent }) {
           />
         )}
         <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">
+          <h5 className="line-clamp-1 text-base font-medium text-white">
             {metadata.title}
           </h5>
-          <p className="line-clamp-3 break-all text-sm text-white/50">
-            {metadata.summary}
-          </p>
-          <span className="mt-2.5 text-sm leading-none text-white/50">
+          {metadata.summary ? (
+            <p className="line-clamp-3 break-all text-sm text-white/70">
+              {metadata.summary}
+            </p>
+          ) : null}
+          <span className="mt-2.5 text-sm text-white/70">
             {metadata.publishedAt.toString()}
           </span>
         </div>
diff --git a/src/shared/notes/mentions/hashtag.tsx b/src/shared/notes/mentions/hashtag.tsx
index 29422466..2eb64726 100644
--- a/src/shared/notes/mentions/hashtag.tsx
+++ b/src/shared/notes/mentions/hashtag.tsx
@@ -7,7 +7,7 @@ export function Hashtag({ tag }: { tag: string }) {
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
-    <div
+    <span
       role="button"
       tabIndex={0}
       onClick={() =>
@@ -27,6 +27,6 @@ export function Hashtag({ tag }: { tag: string }) {
       className="break-all text-fuchsia-400 hover:text-fuchsia-500"
     >
       {tag}
-    </div>
+    </span>
   );
 }
diff --git a/src/shared/notes/preview/link.tsx b/src/shared/notes/preview/link.tsx
index b0b81e14..48183240 100644
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -46,17 +46,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
                 />
               )}
               <div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
-                <h5 className="line-clamp-1 font-semibold leading-none text-white">
+                <h5 className="line-clamp-1 text-base font-semibold text-white">
                   {data.title}
                 </h5>
                 {data.description && (
-                  <p className="line-clamp-3 break-all text-sm text-white/50">
+                  <p className="line-clamp-3 break-all text-sm text-white/80">
                     {data.description}
                   </p>
                 )}
-                <span className="mt-2.5 text-sm leading-none text-white/80">
-                  {domain.hostname}
-                </span>
+                <span className="mt-2.5 text-sm text-white/80">{domain.hostname}</span>
               </div>
             </>
           )}
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index 8fab1c30..eda68ff2 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -80,14 +80,14 @@ export const User = memo(function User({
           </Avatar.Fallback>
         </Avatar.Root>
         <div className="flex flex-1 items-baseline gap-2">
-          <h5 className="max-w-[10rem] truncate font-semibold leading-none text-white">
+          <h5 className="max-w-[10rem] truncate font-semibold  text-white">
             {user?.name ||
               user?.display_name ||
               user?.displayName ||
               displayNpub(pubkey, 16)}
           </h5>
-          <span className="leading-none text-white/50">·</span>
-          <span className="leading-none text-white/50">{createdAt}</span>
+          <span className="text-white/50">·</span>
+          <span className="text-white/50">{createdAt}</span>
         </div>
       </div>
     );
@@ -111,7 +111,7 @@ export const User = memo(function User({
         </Avatar.Root>
         <div className="flex h-full flex-col items-start justify-between">
           <div className="flex flex-col items-start gap-1 text-start">
-            <p className="max-w-[15rem] truncate text-lg font-semibold leading-none text-white">
+            <p className="max-w-[15rem] truncate text-lg font-semibold text-white">
               {user?.name || user?.display_name || user?.displayName}
             </p>
             <ReactMarkdown
@@ -157,11 +157,11 @@ export const User = memo(function User({
             <img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" />
           </Avatar.Fallback>
         </Avatar.Root>
-        <div className="flex w-full flex-col items-start gap-1">
-          <h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
+        <div className="flex w-full flex-col items-start">
+          <h3 className="max-w-[15rem] truncate font-medium text-white">
             {user?.name || user?.display_name || user?.displayName}
           </h3>
-          <p className="max-w-[10rem] truncate text-sm leading-none text-white/70">
+          <p className="max-w-[10rem] truncate text-sm text-white/70">
             {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
           </p>
         </div>
@@ -230,7 +230,7 @@ export const User = memo(function User({
             </Avatar.Fallback>
           </Avatar.Root>
           <div className="inline-flex items-baseline gap-1">
-            <h5 className="max-w-[10rem] truncate font-medium leading-none text-white/80">
+            <h5 className="max-w-[10rem] truncate font-medium text-white/80">
               {user?.name ||
                 user?.display_name ||
                 user?.displayName ||
@@ -260,13 +260,13 @@ export const User = memo(function User({
           </Avatar.Fallback>
         </Avatar.Root>
         <div className="flex flex-1 flex-col gap-2">
-          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+          <h5 className="max-w-[15rem] truncate font-semibold text-white">
             {user?.name || user?.display_name || user?.displayName || 'Anon'}
           </h5>
           <div className="inline-flex items-center gap-2">
-            <span className="leading-none text-white/50">{createdAt}</span>
-            <span className="leading-none text-white/50">·</span>
-            <span className="leading-none text-white/50">{displayNpub(pubkey, 16)}</span>
+            <span className="text-white/50">{createdAt}</span>
+            <span className="text-white/50">·</span>
+            <span className="text-white/50">{displayNpub(pubkey, 16)}</span>
           </div>
         </div>
       </div>
@@ -295,15 +295,15 @@ export const User = memo(function User({
             </Avatar.Fallback>
           </Avatar.Root>
         </HoverCard.Trigger>
-        <div className="flex flex-1 items-baseline gap-2">
-          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+        <div className="flex flex-1 items-center gap-2">
+          <h5 className="max-w-[15rem] truncate font-semibold text-white">
             {user?.name ||
               user?.display_name ||
               user?.displayName ||
               displayNpub(pubkey, 16)}
           </h5>
-          <span className="leading-none text-white/50">·</span>
-          <span className="leading-none text-white/50">{createdAt}</span>
+          <span className="text-white/50">·</span>
+          <span className="text-white/50">{createdAt}</span>
         </div>
       </div>
       <HoverCard.Portal>
@@ -331,7 +331,7 @@ export const User = memo(function User({
             </Avatar.Root>
             <div className="flex flex-1 flex-col gap-2">
               <div className="inline-flex flex-col gap-1">
-                <h5 className="text-sm font-semibold leading-none">
+                <h5 className="text-sm font-semibold">
                   {user?.name ||
                     user?.display_name ||
                     user?.displayName ||
@@ -341,10 +341,10 @@ export const User = memo(function User({
                   <NIP05
                     pubkey={pubkey}
                     nip05={user?.nip05}
-                    className="max-w-[15rem] truncate text-sm leading-none text-white/50"
+                    className="max-w-[15rem] truncate text-sm text-white/50"
                   />
                 ) : (
-                  <span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
+                  <span className="max-w-[15rem] truncate text-sm text-white/50">
                     {displayNpub(pubkey, 16)}
                   </span>
                 )}