diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
index 7b95efa..da54a40 100644
--- a/apps/web/src/components/navbar.tsx
+++ b/apps/web/src/components/navbar.tsx
@@ -34,84 +34,88 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
       data-tauri-drag-region
       className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-between`}
     >
-      {forMobile ? (
-        <SidebarTrigger
-          className="w-9 h-9 aspect-square rounded-lg ml-2"
-          variant="outline"
-        >
-          <ArrowLeft className="size-4.5" />
-        </SidebarTrigger>
-      ) : (
-        <Button
-          onClick={() => navigate({ to: "/" })}
-          className="w-9 h-9 aspect-square rounded-lg"
-          variant="outline"
-        >
-          <House className="size-4.5" />
-        </Button>
-      )}
-      {pathname === "/chat" && (
-        <Wrapper
-          userId={id}
-          component={(user) => (
-            <p className="font-medium text-md">{user?.display}</p>
-          )}
-          loading={<Skeleton className="ml-3 w-40 h-5" />}
-        />
-      )}
+      <div className="flex items-center justify-center gap-2">
+        {forMobile ? (
+          <SidebarTrigger
+            className="w-9 h-9 aspect-square rounded-lg ml-2"
+            variant="outline"
+          >
+            <ArrowLeft className="size-4.5" />
+          </SidebarTrigger>
+        ) : (
+          <Button
+            onClick={() => navigate({ to: "/" })}
+            className="w-9 h-9 aspect-square rounded-lg"
+            variant="outline"
+          >
+            <House className="size-4.5" />
+          </Button>
+        )}
+        {pathname === "/chat" && (
+          <Wrapper
+            userId={id}
+            component={(user) => (
+              <p className="font-medium text-md">{user?.display}</p>
+            )}
+            loading={<Skeleton className="ml-3 w-40 h-5" />}
+          />
+        )}
+      </div>
       {/* Empty space */}
-      {pathname === "/chat" && id && (
-        <>
-          {currentCalls.length === 0 ? (
-            <Button
-              disabled={state !== "closed"}
-              onClick={() => {
-                joinCall(id);
-              }}
-              className="w-9 h-9 aspect-square rounded-lg mr-2"
-              variant="outline"
-            >
-              <Phone />
-            </Button>
-          ) : currentCalls.length === 1 ? (
-            <Button
-              disabled={state !== "closed"}
-              onClick={() => {
-                joinCall(id, currentCalls[0]);
-              }}
-              className="w-9 h-9 aspect-square rounded-lg"
-            >
-              <Phone />
-            </Button>
-          ) : (
-            <>
+      <div className="flex items-center justify-center gap-2">
+        {pathname === "/chat" && id && (
+          <>
+            {currentCalls.length === 0 ? (
               <Button
-                onClick={() => setSelectOpen((prev) => !prev)}
-                className="w-9! h-9! aspect-square rounded-lg"
+                disabled={state !== "closed"}
+                onClick={() => {
+                  joinCall(id);
+                }}
+                className="w-9 h-9 aspect-square rounded-lg"
+                variant="outline"
               >
                 <Phone />
               </Button>
-              <Select onOpenChange={setSelectOpen} open={selectOpen}>
-                <SelectTrigger hidden />
-                <SelectContent>
-                  {currentCalls.map((callId) => (
-                    <SelectItem
-                      value={callId}
-                      key={callId}
-                      onSelect={() => {
-                        joinCall(id, callId);
-                      }}
-                    >
-                      {displayCallId(callId)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </>
-          )}
-        </>
-      )}
-      <Controls className="mr-2 ring-border" notPresentClassName="mr-2" />
+            ) : currentCalls.length === 1 ? (
+              <Button
+                disabled={state !== "closed"}
+                onClick={() => {
+                  joinCall(id, currentCalls[0]);
+                }}
+                className="w-9 h-9 aspect-square rounded-lg"
+              >
+                <Phone />
+              </Button>
+            ) : (
+              <>
+                <Button
+                  onClick={() => setSelectOpen((prev) => !prev)}
+                  className="w-9! h-9! aspect-square rounded-lg"
+                >
+                  <Phone />
+                </Button>
+                <Select onOpenChange={setSelectOpen} open={selectOpen}>
+                  <SelectTrigger hidden />
+                  <SelectContent>
+                    {currentCalls.map((callId) => (
+                      <SelectItem
+                        value={callId}
+                        key={callId}
+                        onSelect={() => {
+                          joinCall(id, callId);
+                        }}
+                      >
+                        {displayCallId(callId)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </>
+            )}
+          </>
+        )}
+        <Controls className="mr-2 ring-border" />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/routes/app/layout.tsx b/apps/web/src/routes/app/layout.tsx
index 9f2d140..fad88d8 100644
--- a/apps/web/src/routes/app/layout.tsx
+++ b/apps/web/src/routes/app/layout.tsx
@@ -6,7 +6,6 @@ import Navbar, { MobileNavbar } from "@/components/navbar";
 import { SidebarProvider } from "@tensamin/ui/cmp/sidebar";
 import { useIsMobile, cn } from "@tensamin/ui/utils";
 
-import { motion } from "framer-motion";
 import { isTauri } from "@tauri-apps/api/core";
 import { useLocation } from "@tanstack/react-router";
 
@@ -20,20 +19,7 @@ export default function Layout(props: { children: ReactNode }) {
   const location = useLocation();
 
   return (
-    <motion.div
-      className="w-full h-full flex bg-sidebar"
-      initial={{ y: -40, scale: 0.95, borderRadius: "1rem" }}
-      animate={{ y: 0, scale: 1, borderRadius: 0 }}
-      transition={{
-        borderRadius: { duration: animationTiming.first, ease: "easeOut" },
-        y: { duration: animationTiming.first, ease: "easeOut" },
-        scale: {
-          delay: animationTiming.first,
-          duration: animationTiming.second,
-          ease: "easeOut",
-        },
-      }}
-    >
+    <div className="w-full h-full flex bg-sidebar">
       <SidebarProvider>
         <Sidebar />
         <div
@@ -58,11 +44,6 @@ export default function Layout(props: { children: ReactNode }) {
           {isMobile && location.pathname !== "/chat" && <MobileNavbar />}
         </div>
       </SidebarProvider>
-    </motion.div>
+    </div>
   );
 }
-
-const animationTiming = {
-  first: 0.18,
-  second: 0.1,
-};