diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index f924d1a4..5fa8112b 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Inter } from "next/font/google";
+import { Geist, Geist_Mono, Inter, Playfair_Display } from "next/font/google";
 import "@multica/ui/globals.css";
 import {
   SidebarProvider,
@@ -22,6 +22,12 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const playfair = Playfair_Display({
+  variable: "--font-brand",
+  subsets: ["latin"],
+  weight: ["400"],
+});
+
 export const metadata: Metadata = {
   title: "Multica",
   description: "Distributed AI agent framework",
@@ -41,7 +47,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={inter.variable} suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${playfair.variable} antialiased`}
       >
         <ThemeProvider
           attribute="class"
diff --git a/packages/ui/src/components/app-sidebar.tsx b/packages/ui/src/components/app-sidebar.tsx
index 77b5414a..6e780abf 100644
--- a/packages/ui/src/components/app-sidebar.tsx
+++ b/packages/ui/src/components/app-sidebar.tsx
@@ -25,7 +25,16 @@ export function AppSidebar({ items }: AppSidebarProps) {
   return (
     <Sidebar>
       <SidebarHeader>
-        <span className="text-lg font-semibold px-2 py-1">Multica</span>
+        <div className="flex items-center gap-2.5 px-2 py-1">
+          <img
+            src="/icon.png"
+            alt="Multica"
+            className="size-7 rounded-md"
+          />
+          <span className="text-sm tracking-wide font-[family-name:var(--font-brand)]">
+            Multica
+          </span>
+        </div>
       </SidebarHeader>
       <SidebarContent>
         <SidebarGroup>
