diff --git a/src/App.vue b/src/App.vue
index d20ea8c..1328fa4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,8 @@ import {
   Trash2, 
   ArrowRightLeft,
   Loader2,
-  Check
+  Check,
+  FileText
 } from 'lucide-vue-next';
 import { fetch } from '@tauri-apps/plugin-http';
 import { useSettingsStore, LANGUAGES, DEFAULT_TEMPLATE } from './stores/settings';
@@ -20,7 +21,7 @@ function cn(...inputs: ClassValue[]) {
 }
 
 const settings = useSettingsStore();
-const view = ref<'translate' | 'settings'>('translate');
+const view = ref<'translate' | 'settings' | 'logs'>('translate');
 
 // Translation State
 const sourceText = ref('');
@@ -149,17 +150,26 @@ const translate = async () => {
   <div class="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100 flex flex-col">
     <!-- Header -->
     <header class="h-14 border-b bg-white flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
-      <div class="flex items-center gap-2">
-        <Languages class="w-6 h-6 text-blue-600" />
+      <div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
+        <Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" />
         <h1 class="font-semibold text-lg tracking-tight">GemmaTrans</h1>
       </div>
-      <button 
-        @click="view = view === 'translate' ? 'settings' : 'translate'"
-        class="p-2 hover:bg-slate-100 rounded-full transition-colors"
-      >
-        <Settings v-if="view === 'translate'" class="w-5 h-5 text-slate-600" />
-        <Languages v-else class="w-5 h-5 text-slate-600" />
-      </button>
+      <div class="flex items-center gap-2">
+        <button 
+          @click="view = 'settings'"
+          :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600' : 'hover:bg-slate-100 text-slate-600')"
+          title="Settings"
+        >
+          <Settings class="w-5 h-5" />
+        </button>
+        <button 
+          @click="view = 'logs'"
+          :class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600' : 'hover:bg-slate-100 text-slate-600')"
+          title="Debug Logs"
+        >
+          <FileText class="w-5 h-5" />
+        </button>
+      </div>
     </header>
 
     <main class="flex-1 flex overflow-hidden">
@@ -227,7 +237,7 @@ const translate = async () => {
       </div>
 
       <!-- Settings View -->
-      <div v-else class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10">
+      <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10">
         <div class="max-w-2xl mx-auto space-y-8">
           <section>
             <h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">API Configuration</h2>
@@ -290,33 +300,45 @@ const translate = async () => {
               </div>
             </div>
           </section>
+        </div>
+      </div>
 
-          <section>
-            <h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">Debug Logs</h2>
-            <div class="bg-white rounded-xl shadow-sm border p-4 space-y-2 overflow-hidden">
-              <div v-if="settings.logs.length === 0" class="text-xs text-slate-400 text-center py-4 italic">
-                No logs recorded yet. Try translating something.
-              </div>
-              <div 
-                v-for="(log, idx) in settings.logs" 
-                :key="idx" 
-                class="text-[10px] font-mono border-b last:border-0 pb-2 flex flex-col gap-1"
-              >
-                <div class="flex items-center gap-2">
-                  <span class="text-slate-400">[{{ log.timestamp }}]</span>
-                  <span 
-                    :class="cn(
-                      'px-1 rounded uppercase font-bold',
-                      log.type === 'request' ? 'bg-blue-100 text-blue-700' :
-                      log.type === 'response' ? 'bg-green-100 text-green-700' :
-                      'bg-red-100 text-red-700'
-                    )"
-                  >{{ log.type }}</span>
-                </div>
-                <pre class="bg-slate-50 p-2 rounded overflow-x-auto text-slate-600 max-h-32">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
-              </div>
+      <!-- Logs View -->
+      <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10">
+        <div class="max-w-3xl mx-auto space-y-6">
+          <div class="flex items-center justify-between">
+            <h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider">Debug Logs</h2>
+            <button 
+              @click="settings.logs = []" 
+              class="text-xs text-red-600 hover:underline flex items-center gap-1"
+            >
+              <Trash2 class="w-3 h-3" />
+              Clear All Logs
+            </button>
+          </div>
+          <div class="bg-white rounded-xl shadow-sm border p-4 space-y-4">
+            <div v-if="settings.logs.length === 0" class="text-sm text-slate-400 text-center py-10 italic">
+              No logs recorded yet. Try translating something.
             </div>
-          </section>
+            <div 
+              v-for="(log, idx) in settings.logs" 
+              :key="idx" 
+              class="text-[11px] font-mono border-b last:border-0 pb-4 flex flex-col gap-2"
+            >
+              <div class="flex items-center gap-2">
+                <span class="text-slate-400">[{{ log.timestamp }}]</span>
+                <span 
+                  :class="cn(
+                    'px-2 py-0.5 rounded uppercase font-bold text-[9px]',
+                    log.type === 'request' ? 'bg-blue-100 text-blue-700' :
+                    log.type === 'response' ? 'bg-green-100 text-green-700' :
+                    'bg-red-100 text-red-700'
+                  )"
+                >{{ log.type }}</span>
+              </div>
+              <pre class="bg-slate-50 p-3 rounded-lg overflow-x-auto text-slate-600 max-h-48 leading-relaxed shadow-inner border border-slate-100">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
+            </div>
+          </div>
         </div>
       </div>
     </main>