diff --git a/apps/web/public/logo/logo.png b/apps/web/public/logo/logo.png
new file mode 100644
index 0000000..4156210
Binary files /dev/null and b/apps/web/public/logo/logo.png differ
diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index bb8d564..c0f7416 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -2,12 +2,12 @@
 
 import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import Image from "next/image";
 import { useAuth } from "@/hooks/useAuth";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ErrorBanner } from "@/components/ErrorBanner";
-import { MapPin } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export default function LoginPage() {
@@ -50,13 +50,15 @@ export default function LoginPage() {
       <div className="relative z-10 w-full max-w-sm">
         {/* Logo + wordmark */}
         <div className="mb-8 flex flex-col items-center gap-4">
-          <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl bg-primary shadow-brand">
-            <svg viewBox="0 0 28 28" fill="none" className="h-7 w-7">
-              <path d="M6 5h16v3H9v4.5H20v3H9v8H6V5z" fill="white" fillOpacity="0.95" />
-            </svg>
-            <div className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-[#1A4FD0] ring-2 ring-background">
-              <MapPin className="h-2.5 w-2.5 text-white" strokeWidth={2.5} />
-            </div>
+          <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl overflow-hidden shadow-brand">
+            <Image
+              src="/logo/logo.png"
+              alt="FieldTrack"
+              width={56}
+              height={56}
+              className="h-full w-full object-cover"
+              priority
+            />
           </div>
           <div className="text-center">
             <h1 className="text-xl font-bold tracking-tight text-foreground">FieldTrack</h1>
diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index 382d2f2..7260acf 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/apps/web/src/components/layout/Header.tsx
@@ -2,13 +2,13 @@
 
 import { useMemo, useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import {
   Menu,
   LogOut,
   ChevronDown,
   UserCircle,
   Search,
-  MapPin,
   Activity,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -143,13 +143,15 @@ export function Header() {
             <SheetContent side="left" className="w-64 p-0 bg-sidebar border-r border-border/60">
               <SheetHeader className="flex h-14 items-center justify-start px-4 border-b border-border/60">
                 <SheetTitle className="flex items-center gap-2 text-[15px] font-bold">
-                  <div className="relative flex h-7 w-7 items-center justify-center rounded-lg bg-primary">
-                    <svg viewBox="0 0 20 20" fill="none" className="h-4 w-4">
-                      <path d="M5 4h10v2H7v3h7v2H7v5H5V4z" fill="white" />
-                    </svg>
-                    <div className="absolute -right-1 -top-1 flex h-3 w-3 items-center justify-center rounded-full bg-[#1A4FD0] ring-2 ring-sidebar">
-                      <MapPin className="h-1.5 w-1.5 text-white" strokeWidth={3} />
-                    </div>
+                  <div className="relative flex h-7 w-7 items-center justify-center rounded-lg overflow-hidden shrink-0">
+                    <Image
+                      src="/logo/logo.png"
+                      alt="FieldTrack"
+                      width={28}
+                      height={28}
+                      className="h-full w-full object-cover"
+                      priority
+                    />
                   </div>
                   FieldTrack
                 </SheetTitle>
diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index e7e7d7e..da7b322 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import {
@@ -12,7 +13,6 @@ import {
   Activity,
   UserCircle,
   Trophy,
-  MapPin,
   ChevronLeft,
   ChevronRight,
   Users,
@@ -27,20 +27,16 @@ import { useMyProfile } from "@/hooks/queries/useProfile";
 function BrandMark({ collapsed }: { collapsed: boolean }) {
   return (
     <div className={cn("flex items-center gap-2.5 transition-all duration-300", collapsed && "justify-center")}>
-      {/* Logo mark: matches "F + location pin" from brand logo */}
-      <div className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary shadow-sm">
-        {/* Geometric "F" shape — white */}
-        <svg viewBox="0 0 20 20" fill="none" className="h-[18px] w-[18px]">
-          <path
-            d="M5 4h10v2H7v3h7v2H7v5H5V4z"
-            fill="white"
-            fillOpacity="0.95"
-          />
-        </svg>
-        {/* Blue location pin overlay badge */}
-        <div className="absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[#1A4FD0] ring-2 ring-sidebar">
-          <MapPin className="h-2 w-2 text-white" strokeWidth={2.5} />
-        </div>
+      {/* Logo mark: image asset */}
+      <div className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-lg overflow-hidden">
+        <Image
+          src="/logo/logo.png"
+          alt="FieldTrack"
+          width={32}
+          height={32}
+          className="h-full w-full object-cover"
+          priority
+        />
       </div>
 
       <AnimatePresence>