diff --git a/frontend/index.html b/frontend/index.html
index 508437d..b373868 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Private Image</title>
     </head>
diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png
new file mode 100644
index 0000000..c97aace
Binary files /dev/null and b/frontend/public/favicon.png differ
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..98707ab
Binary files /dev/null and b/frontend/public/logo.png differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5e1bb62..2538b26 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,3 +1,6 @@
 <template>
-    <router-view />
+    <div class="flex min-h-screen flex-col bg-background">
+        <AppHeader />
+        <router-view />
+    </div>
 </template>
diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue
new file mode 100644
index 0000000..c0f6053
--- /dev/null
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -0,0 +1,47 @@
+<template>
+    <header class="border-b border-border bg-card">
+        <div class="mx-auto flex h-14 max-w-5xl items-center justify-between gap-4 px-4 sm:px-6">
+            <RouterLink
+                :to="{ name: ROUTE_NAMES.Upload }"
+                class="shrink-0 transition-opacity hover:opacity-80"
+            >
+                <img
+                    src="/logo.png"
+                    alt="Private Image"
+                    class="h-8 w-auto sm:h-9"
+                    width="1024"
+                    height="228"
+                    decoding="async"
+                />
+            </RouterLink>
+
+            <nav class="flex items-center gap-1 sm:gap-2">
+                <RouterLink
+                    v-for="item in navItems"
+                    :key="item.name"
+                    :to="{ name: item.name }"
+                    class="rounded-md px-3 py-2 text-sm transition-colors"
+                    :class="
+                        route.name === item.name
+                            ? 'bg-muted font-medium text-foreground'
+                            : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+                    "
+                >
+                    {{ item.label }}
+                </RouterLink>
+            </nav>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { ROUTE_NAMES } from '@/consts/routeNames';
+
+const route = useRoute();
+
+const navItems = [
+    { name: ROUTE_NAMES.Upload, label: 'Upload' },
+    { name: ROUTE_NAMES.About, label: 'About' }
+];
+</script>
diff --git a/frontend/src/consts/routeNames.ts b/frontend/src/consts/routeNames.ts
index ed23340..23913d5 100644
--- a/frontend/src/consts/routeNames.ts
+++ b/frontend/src/consts/routeNames.ts
@@ -1,5 +1,6 @@
 export const ROUTE_NAMES = {
     Upload: 'Upload',
+    About: 'About',
     Viewer: 'Viewer',
     HotlinkViewer: 'HotlinkViewer',
     Delete: 'Delete'
diff --git a/frontend/src/views/UploadView.vue b/frontend/src/views/UploadView.vue
index d6b7910..c807a9b 100644
--- a/frontend/src/views/UploadView.vue
+++ b/frontend/src/views/UploadView.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="mx-auto flex min-h-screen max-w-3xl flex-col gap-6 p-8">
+    <main class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-8">
         <div>
             <h1 class="text-2xl font-semibold tracking-tight">Upload</h1>
             <p class="mt-2 text-sm text-muted-foreground">