diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index 9c72b28..05b0e43 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@@ -19,6 +19,7 @@ import { UserProfile } from "@/hooks/get-user";
 import axios from "axios";
 import ProfilePicture from "./ProfilePicture";
 import App from "@/types/app";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 function MessageContainer({ message, app }: { message: Message; app: App }) {
   useEffect(() => {
@@ -41,14 +42,14 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
           url={app.profiles[message.from]?.avatar_url}
           name={String(
             app.profiles[message.from]
-              ? app.profiles[message.from].display_name
+              ? app.profiles[message.from]?.display_name
               : message.from
           )}
         />
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
             {app.profiles[message.from]
-              ? app.profiles[message.from].display_name
+              ? app.profiles[message.from]?.display_name
               : message.from}
 
             <p className="text-neutral-500 text-xs">
@@ -142,13 +143,14 @@ export default function MessageBox({
   messages: Message[];
 }) {
   const [text, setText] = useState("");
+  const isMobile = useIsMobile();
 
   return (
     <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5">
       {channelName && (
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
           <span
-            onClick={() => app.setSidebarOpen(true)}
+            onClick={() => isMobile && app.setSidebarOpen(true)}
             className="cursor-pointer flex"
           >
             <ChevronLeftIcon className="w-5 h-5" />
diff --git a/src/components/ProfilePicture.tsx b/src/components/ProfilePicture.tsx
index bd77b6a..7a17ac9 100644
--- a/src/components/ProfilePicture.tsx
+++ b/src/components/ProfilePicture.tsx
@@ -5,7 +5,7 @@ export default function ProfilePicture({
   url,
 }: {
   name: string;
-  url: string;
+  url: string | undefined;
 }) {
   return (
     <Avatar className="h-8 w-8">
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 9d1a313..d7a27b5 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -269,7 +269,7 @@ export default function AppSidebar({
           className="w-full h-full overflow-x-hidden"
           onClick={() => app.setSidebarOpen(false)}
         >
-          <div className="overflow-x-hidden min-w-max flex-shrink-0">
+          <div className="overflow-x-hidden min-w-screen flex-shrink-0">
             {children}
           </div>
         </div>
diff --git a/src/hooks/is-mobile.ts b/src/hooks/is-mobile.ts
new file mode 100644
index 0000000..d477190
--- /dev/null
+++ b/src/hooks/is-mobile.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 767px)");
+    const handleChange = () => setIsMobile(mediaQuery.matches);
+
+    // Set initial value
+    handleChange();
+
+    // Listen for changes
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return isMobile;
+}
diff --git a/src/hooks/use-app.ts b/src/hooks/use-app.ts
index 7285484..2ff6cf3 100644
--- a/src/hooks/use-app.ts
+++ b/src/hooks/use-app.ts
@@ -8,7 +8,7 @@ export default function useApp(): App {
   const node = useRef<WebSocket | null>(null);
   const [profiles, setProfiles] = useState<StringMap<UserProfile | null>>({});
   const { messages, addMessage } = useMessages();
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const profile = useUser();
 
   return {