diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
index 5bb9830..53fb740 100644
--- a/apps/web/src/components/navbar.tsx
+++ b/apps/web/src/components/navbar.tsx
@@ -96,7 +96,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                 </Popover>
               )
             }
-            loading={<Skeleton className="ml-3 w-40 h-5" />}
+            loading={<Skeleton className="w-30 h-5" />}
           />
         )}
       </div>
diff --git a/packages/chat/src/components/message.tsx b/packages/chat/src/components/message.tsx
index d088a57..3ea2f1e 100644
--- a/packages/chat/src/components/message.tsx
+++ b/packages/chat/src/components/message.tsx
@@ -21,9 +21,7 @@ import {
   Card,
   cn,
   Separator,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
+  Skeleton,
 } from "@tensamin/ui";
 import MessageContextMenu from "./messageContextMenu";
 import Media from "./media";
@@ -44,13 +42,15 @@ function MessageComponent({
   };
   user: User | null;
 }) {
-  const actuallyFailed = message.failed && message.MessageState === "awaiting";
+  const [decryptionFailed, setDecryptionFailed] = useState(false);
+  const actuallyFailed =
+    (message.failed && message.MessageState === "awaiting") || decryptionFailed;
 
   // Fade-in
   const [hasFadedIn, setHasFadedIn] = useState(false);
   const opacityClass = !hasFadedIn
     ? "opacity-0"
-    : actuallyFailed || message.MessageState === "awaiting"
+    : message.MessageState === "awaiting"
       ? "opacity-50"
       : "opacity-100";
   useEffect(() => {
@@ -63,19 +63,6 @@ function MessageComponent({
     };
   }, []);
 
-  // Check if message is a url
-  const [isValidURL, setIsValidURL] = useState(false);
-  useEffect(() => {
-    try {
-      if (message.Content.split(" ").length > 1) throw new Error();
-
-      new URL(message.Content);
-      setIsValidURL(true);
-    } catch {
-      setIsValidURL(false);
-    }
-  }, [message.Content]);
-
   // Message states
   const { load } = useStorage();
   const { send } = useMTP();
@@ -141,109 +128,126 @@ function MessageComponent({
       (err) => {
         toast("error", "Failed to decrypt message", String(err));
         log(1, "chat", "red", err);
+        setDecryptionFailed(true);
       },
     );
   }, [chatSecret, message.Content]);
 
+  // Check if message is a url
+  const [isValidURL, setIsValidURL] = useState(false);
+  useEffect(() => {
+    if (!decryptedContent) return;
+
+    try {
+      if (decryptedContent.split(" ").length > 1) throw new Error();
+
+      new URL(decryptedContent);
+      setIsValidURL(true);
+    } catch {
+      setIsValidURL(false);
+    }
+  }, [decryptedContent]);
+
   return (
     <div
       // pt-3 is to get a gap between messages
       className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${opacityClass}`}
     >
-      {user && decryptedContent ? (
-        <MessageContextMenu
-          content={message.Content}
-          messageId={message.SendTime}
+      {user ? (
+        <div
+          className={cn(
+            "group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
+            {
+              "bg-(--destructive)/15 text-destructive-foreground":
+                actuallyFailed,
+            },
+          )}
         >
-          <div
-            className={cn(
-              "group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
-              {
-                "bg-(--destructive)/15 text-destructive-foreground":
-                  actuallyFailed,
-              },
+          <>
+            {grouped ? (
+              <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
+                {new Date(message.SendTime).toLocaleString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </p>
+            ) : (
+              <Avatar className="mr-1 mb-auto mt-1 w-10">
+                <AvatarImage src={user.Avatar} />
+                <AvatarFallback>
+                  {user.Display.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
             )}
-          >
-            <>
-              {grouped ? (
-                <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
-                  {new Date(message.SendTime).toLocaleString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                  })}
-                </p>
-              ) : (
-                <Avatar className="mr-1 mb-auto mt-1 w-10">
-                  <AvatarImage src={user.Avatar} />
-                  <AvatarFallback>
-                    {user.Display.slice(0, 2).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-              )}
-              {message.failed && message.MessageState === "awaiting" && (
-                <Tooltip>
-                  <TooltipContent>
-                    <p>Failed to send message</p>
-                  </TooltipContent>
-                  <TooltipTrigger render={<AlertTriangle size={17} />} />
-                </Tooltip>
-              )}
-              <div className="flex flex-col group">
-                <Card className="absolute right-4 -top-3 opacity-0 group-hover:opacity-100 flex flex-row justify-end gap-0! z-10 p-0! shadow-lg rounded-lg!">
-                  {[0, 1, 2].map((item) => (
-                    <Button key={item} variant="ghost" className="h-8 w-8">
-                      {item === 0 && "👍"}
-                      {item === 1 && "🔥"}
-                      {item === 2 && "✅"}
-                    </Button>
-                  ))}
-                  <Separator orientation="vertical" className="my-1" />
-                  <Button variant="ghost" className="h-8 w-8">
-                    <Laugh />
+            <div className="flex flex-col group">
+              <Card className="absolute right-4 -top-3 opacity-0 group-hover:opacity-100 flex flex-row justify-end gap-0! z-10 p-0! shadow-lg rounded-lg!">
+                {[0, 1, 2].map((item) => (
+                  <Button key={item} variant="ghost" className="h-8 w-8">
+                    {item === 0 && "👍"}
+                    {item === 1 && "🔥"}
+                    {item === 2 && "✅"}
                   </Button>
-                  <Button variant="ghost" className="h-8 w-8">
-                    <Reply />
-                  </Button>
-                  <Button variant="ghost" className="h-8 w-8">
-                    <Forward />
-                  </Button>
-                </Card>
-                {!grouped && (
-                  <div className="flex items-center gap-1">
-                    <p className="font-medium">{user.Display}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {new Date(message.SendTime).toLocaleString([], {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })}
-                    </p>
-                    <div>
-                      {message.MessageState === "read" ? (
-                        <Check
-                          size={12}
-                          color="var(--primary-foreground-alt)"
-                        />
-                      ) : message.MessageState === "received" ? (
-                        <Check size={12} color="var(--muted-foreground)" />
-                      ) : message.MessageState === "sent" ? (
-                        <RefreshCw size={12} color="var(--muted-foreground)" />
-                      ) : message.MessageState === "sending" ? (
-                        <Ellipse size={12} color="var(--muted-foreground)" />
-                      ) : null}
-                    </div>
+                ))}
+                <Separator orientation="vertical" className="my-1" />
+                <Button variant="ghost" className="h-8 w-8">
+                  <Laugh />
+                </Button>
+                <Button variant="ghost" className="h-8 w-8">
+                  <Reply />
+                </Button>
+                <Button variant="ghost" className="h-8 w-8">
+                  <Forward />
+                </Button>
+              </Card>
+              {!grouped && (
+                <div className="flex items-center gap-1">
+                  <p className="font-medium">{user.Display}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {new Date(message.SendTime).toLocaleString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                  <div className="flex items-center justify-start gap-1">
+                    {message.MessageState === "read" ? (
+                      <Check size={12} color="var(--primary-foreground-alt)" />
+                    ) : message.MessageState === "received" ? (
+                      <Check size={12} color="var(--muted-foreground)" />
+                    ) : message.MessageState === "sent" ? (
+                      <RefreshCw size={12} color="var(--muted-foreground)" />
+                    ) : message.MessageState === "sending" ? (
+                      <Ellipse size={12} color="var(--muted-foreground)" />
+                    ) : null}
+                    {actuallyFailed && (
+                      <AlertTriangle color="var(--destructive)" size={12} />
+                    )}
                   </div>
-                )}
-                {isValidURL ? (
-                  <Media link={message.Content} />
-                ) : (
-                  <Text value={message.Content} />
-                )}
-              </div>
-            </>
-          </div>
-        </MessageContextMenu>
+                </div>
+              )}
+
+              {decryptedContent ? (
+                <MessageContextMenu
+                  content={decryptedContent}
+                  messageId={message.SendTime}
+                >
+                  {isValidURL ? (
+                    <Media link={decryptedContent} />
+                  ) : (
+                    <Text value={decryptedContent} />
+                  )}
+                </MessageContextMenu>
+              ) : decryptionFailed ? (
+                <Text value="Failed to decrypt message" />
+              ) : (
+                <Skeleton
+                  className={`w-25 h-5 ${grouped ? "my-1" : "mb-1"} rounded-sm!`}
+                />
+              )}
+            </div>
+          </>
+        </div>
       ) : (
-        "Loading"
+        <Skeleton className="h-10 w-30" />
       )}
     </div>
   );