diff --git a/messages/en.json b/messages/en.json
index 3d3d885..d42be37 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -163,6 +163,6 @@
     "quickLinksTitle": "Quick Links",
     "connectTitle": "Connect",
     "backToTop": "Back to top",
-    "copyright": "Yolando. All Rights Reserved."
+    "copyright": "Simanullang Dev. All Rights Reserved."
   }
-}
\ No newline at end of file
+}
diff --git a/messages/id.json b/messages/id.json
index d521204..a84a377 100644
--- a/messages/id.json
+++ b/messages/id.json
@@ -163,6 +163,6 @@
     "quickLinksTitle": "Tautan Cepat",
     "connectTitle": "Terhubung",
     "backToTop": "Kembali ke atas",
-    "copyright": "Yolando. Semua Hak Cipta Dilindungi."
+    "copyright": "Simanullang Dev. Semua Hak Cipta Dilindungi."
   }
-}
\ No newline at end of file
+}
diff --git a/public/brand/.gitkeep b/public/brand/.gitkeep
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/public/brand/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/public/brand/icon.png b/public/brand/icon.png
new file mode 100644
index 0000000..8b9442b
Binary files /dev/null and b/public/brand/icon.png differ
diff --git a/public/uploads/1775219874524-graphic_Fitures.jpg b/public/uploads/1775219874524-graphic_Fitures.jpg
new file mode 100644
index 0000000..edb288f
Binary files /dev/null and b/public/uploads/1775219874524-graphic_Fitures.jpg differ
diff --git a/public/uploads/1775219874526-Group_13.png b/public/uploads/1775219874526-Group_13.png
new file mode 100644
index 0000000..effe0c0
Binary files /dev/null and b/public/uploads/1775219874526-Group_13.png differ
diff --git a/src/shared/components/brand-logo.tsx b/src/shared/components/brand-logo.tsx
new file mode 100644
index 0000000..e0bd07f
--- /dev/null
+++ b/src/shared/components/brand-logo.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+
+type BrandLogoProps = {
+  href?: string;
+  className?: string;
+  iconClassName?: string;
+  textClassName?: string;
+  iconSize?: number;
+  priority?: boolean;
+};
+
+export function BrandLogo({
+  href = "#",
+  className = "",
+  iconClassName = "",
+  textClassName = "font-mono font-bold text-lg tracking-tight",
+  iconSize = 36,
+  priority = false,
+}: BrandLogoProps) {
+  const [imageFailed, setImageFailed] = useState(false);
+
+  return (
+    <a href={href} className={`flex items-center gap-2 group ${className}`.trim()}>
+      <div
+        className={`relative overflow-hidden rounded-lg bg-gradient-to-br from-accent to-purple-500 text-white shadow-lg shadow-accent/25 ${iconClassName}`.trim()}
+        style={{ width: iconSize, height: iconSize }}
+      >
+        {imageFailed ? (
+          <div className="flex h-full w-full items-center justify-center font-bold text-sm">
+            S
+          </div>
+        ) : (
+          <Image
+            src="/brand/icon.png"
+            alt="Simanullang Dev logo"
+            fill
+            sizes={`${iconSize}px`}
+            className="object-cover"
+            priority={priority}
+            onError={() => setImageFailed(true)}
+          />
+        )}
+      </div>
+
+      <span className={textClassName}>
+        simanullang<span className="text-accent">.dev</span>
+      </span>
+    </a>
+  );
+}
diff --git a/src/shared/components/footer.tsx b/src/shared/components/footer.tsx
index 24ae637..0ca4982 100644
--- a/src/shared/components/footer.tsx
+++ b/src/shared/components/footer.tsx
@@ -1,5 +1,6 @@
 import { GitFork, Link2, Mail, ArrowUp, Heart, MapPin } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { BrandLogo } from "@/shared/components/brand-logo";
 
 const quickLinks = [
   { href: "#experience", label: "Experience" },
@@ -21,13 +22,8 @@ export function Footer() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
           {/* Brand & tagline */}
           <div className="md:col-span-1">
-            <div className="flex items-center gap-2 mb-4">
-              <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-accent to-purple-500 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-accent/25">
-                A
-              </div>
-              <span className="font-mono font-bold text-lg tracking-tight">
-                ando<span className="text-accent">.dev</span>
-              </span>
+            <div className="mb-4">
+              <BrandLogo />
             </div>
             <p className="text-sm text-muted-foreground leading-relaxed mb-4 max-w-xs">
               {t("description")}
diff --git a/src/shared/components/navbar.tsx b/src/shared/components/navbar.tsx
index 4cb4b98..ae92a86 100644
--- a/src/shared/components/navbar.tsx
+++ b/src/shared/components/navbar.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useTransition } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X, Languages } from "lucide-react";
 import { ThemeToggle } from "@/shared/components/theme-toggle";
+import { BrandLogo } from "@/shared/components/brand-logo";
 import { useTranslations, useLocale } from "next-intl";
 import { usePathname, useRouter } from "@/i18n/routing";
 
@@ -72,15 +73,10 @@ export function Navbar() {
       }`}
     >
       <nav className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-        {/* #12 Logo with hover glow */}
-        <a href="#" className="flex items-center gap-2 group">
-          <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-accent to-purple-500 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-accent/25 group-hover:shadow-accent/50 group-hover:scale-110 transition-all duration-300">
-            A
-          </div>
-          <span className="font-mono font-bold text-lg tracking-tight">
-            ando<span className="text-accent">.dev</span>
-          </span>
-        </a>
+        <BrandLogo
+          priority
+          iconClassName="group-hover:shadow-accent/50 group-hover:scale-110 transition-all duration-300"
+        />
 
         {/* Desktop Nav with scroll spy */}
         <div className="hidden md:flex items-center gap-1">