diff --git a/backend/internal/service/project.go b/backend/internal/service/project.go
index 14138f3..30fde5a 100644
--- a/backend/internal/service/project.go
+++ b/backend/internal/service/project.go
@@ -198,7 +198,7 @@ func (s *ProjectService) GetTasks(ctx context.Context, userID uint, projectID ui
 	response := make([]model.TaskResponse, len(tasks))
 	for i, t := range tasks {
 		response[i] = model.TaskResponse{
-			ID:         fmt.Sprintf("%d", t.ID),
+			ID:         t.ExternalID,
 			ProjectID:  fmt.Sprintf("%d", t.ProjectID),
 			Prompt:     t.Prompt,
 			AssetType:  t.AssetType,
diff --git a/frontend/src/components/TaskListPanel.tsx b/frontend/src/components/TaskListPanel.tsx
index 61f55f4..ad0d90a 100644
--- a/frontend/src/components/TaskListPanel.tsx
+++ b/frontend/src/components/TaskListPanel.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react'
-import { useParams } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import { getTasks } from '../api/project'
 import type { Task } from '../api/types'
 import StatusBadge from './StatusBadge'
@@ -67,9 +67,9 @@ export default function TaskListPanel() {
           </p>
         ) : (
           tasks.map(task => (
-            <a
+            <Link
               key={task.id}
-              href={task.status === 'completed' ? `/projects/${projectId}/tasks/${task.id}` : undefined}
+              to={task.status === 'completed' ? `/projects/${projectId}/tasks/${task.id}` : '#'}
               style={{
                 display: 'block',
                 padding: '12px 16px',
@@ -77,8 +77,12 @@ export default function TaskListPanel() {
                 textDecoration: 'none',
                 color: 'inherit',
                 cursor: task.status === 'completed' ? 'pointer' : 'default',
+                pointerEvents: task.status === 'completed' ? 'auto' : 'none',
                 transition: 'background 0.15s',
               }}
+              onClick={e => {
+                if (task.status !== 'completed') e.preventDefault()
+              }}
               onMouseEnter={e => {
                 if (task.status === 'completed')
                   (e.currentTarget as HTMLElement).style.background = 'var(--accent-dim)'
@@ -115,7 +119,7 @@ export default function TaskListPanel() {
                 )}
               </div>
               <PipelineStages currentStage={task.stage ?? null} status={task.status} />
-            </a>
+            </Link>
           ))
         )}
       </div>
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 6a34804..7a9fb92 100755
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -22,7 +22,7 @@ interface AuthState {
 
 export const useAuthStore = create<AuthState>((set) => ({
   user: null,
-  isAuthenticated: false,
+  isAuthenticated: getToken() !== null,
   loading: false,
   error: null,
 
diff --git a/frontend/src/stores/task.ts b/frontend/src/stores/task.ts
index a156691..244a7a2 100755
--- a/frontend/src/stores/task.ts
+++ b/frontend/src/stores/task.ts
@@ -28,6 +28,13 @@ interface TaskState {
   reset: () => void
 }
 
+const DEFAULT_FORMAT: Record<AssetType, 'spritesheet' | 'individual'> = {
+  sprite: 'spritesheet',
+  background: 'individual',
+  ui: 'individual',
+  animation: 'spritesheet',
+}
+
 const DEFAULT_PARAMS: TaskParams = {
   resolution: 1024,
   format: 'spritesheet',
@@ -44,7 +51,12 @@ export const useTaskStore = create<TaskState>((set, get) => ({
 
   setPrompt: (text) => set({ prompt: text, optimizedPrompt: null }),
 
-  setAssetType: (type) => set({ assetType: type, optimizedPrompt: null }),
+  setAssetType: (type) =>
+    set({
+      assetType: type,
+      params: { ...get().params, format: DEFAULT_FORMAT[type] },
+      optimizedPrompt: null,
+    }),
 
   toggleTaskStyle: (key, value) =>
     set(state => {