diff --git a/docs/model-management-plan.md b/docs/model-management-plan.md
new file mode 100644
index 000000000..ef71d5150
--- /dev/null
+++ b/docs/model-management-plan.md
@@ -0,0 +1,153 @@
+# Model Management & Downloads Panel Plan
+
+## Goal
+
+Bring the desktop/ComfyUI_frontend model management experience into the
+Launcher's **Models** view, and add a global **Downloads sidebar panel** — a
+toggleable drawer docked to the left sidebar (like browser download drawers, or
+the existing `comfyContentScript.ts` floating toast in the ComfyUI windows).
+
+---
+
+## Current State
+
+### What the Launcher already has
+- **`ModelsView.vue`** — shows configured model directories with DirCard
+  widgets (browse, add, remove, reorder). No model file listing, no browsing,
+  no search.
+- **`DownloadsPanel.vue`** — renders active & finished downloads as inline
+  cards. Currently embedded *inside* ModelsView at the bottom.
+- **`downloadStore.ts`** — Pinia store that subscribes to
+  `model-download-progress` IPC events from the main process and tracks them
+  in a reactive `Map<url, ModelDownloadProgress>`.
+- **`comfyDownloadManager.ts`** (main process) — handles Electron
+  `will-download`, temp files, managed model downloads and general
+  browser-like downloads. Broadcasts progress to both the originating
+  ComfyUI window and the Launcher window.
+- **`comfyContentScript.ts`** — injected into ComfyUI webview pages; creates a
+  floating download toast panel with a collapsible tab, drag-to-undock, and
+  inline pause/resume/cancel buttons. Theme-aware.
+
+### What the desktop app / frontend has
+- **`DownloadManager.ts`** (desktop) — singleton managing `.safetensors`
+  downloads via Electron `session.downloadURL`. IPC handlers for start / pause
+  / resume / cancel / getAllDownloads / deleteModel.
+- **`AssetBrowserModal.vue`** — full model browser with search, left nav by
+  category, filter bar (architecture, ownership), asset grid, right info panel.
+  Uses `useAssetBrowser`, `useModelTypes`, `useModelUpload` composables.
+- **`UploadModelDialog.vue`** — 3-step wizard: enter URL → confirm metadata →
+  upload progress.
+- **`ModelImportProgressDialog.vue`** — uses `HoneyToast` (expandable toast)
+  with `ProgressToastItem` cards, filter popover (all/completed/failed).
+- **`modelStore.ts`** — `ComfyModelDef` class (metadata from safetensors),
+  `ModelFolder` (lazy-load per directory). Loaded from ComfyUI API.
+
+---
+
+## Design
+
+### 1. Downloads Sidebar Panel (global, always accessible)
+
+Replace the current approach of embedding `DownloadsPanel` inside `ModelsView`
+with a **sidebar-attached drawer** that is accessible from any view.
+
+**Behaviour:**
+- A persistent **download indicator** appears in the sidebar when there are
+  active or recent downloads — a small icon/badge next to the Models tab (this
+  already exists as `sidebar-count`).
+- Clicking the indicator (or a dedicated button) toggles a **drawer panel**
+  that slides out from the left sidebar, overlaying the content area.
+- The drawer stays open across view switches. Clicking outside or pressing
+  Escape closes it.
+- The drawer shows the same content currently in `DownloadsPanel.vue`: active
+  downloads with progress bars, pause/resume/cancel, and finished downloads
+  with dismiss/show-in-folder.
+
+**Implementation:**
+
+| Layer | File | Change |
+|-------|------|--------|
+| Component | `src/renderer/src/components/DownloadsDrawer.vue` | **New.** Renders a slide-out drawer panel anchored to the sidebar. Reuses all the formatting logic from `DownloadsPanel.vue` (move or import). Add a close button and "clear completed" button in the header. |
+| App shell | `src/renderer/src/App.vue` | Add `<DownloadsDrawer>` alongside the sidebar. Add `downloadsDrawerOpen` ref. Wire sidebar indicator click to toggle it. Remove `<DownloadsPanel>` from ModelsView embedding. |
+| View | `src/renderer/src/views/ModelsView.vue` | Remove the `<DownloadsPanel />` include (downloads move to the global drawer). |
+| Style | `src/renderer/src/assets/main.css` | Add `.downloads-drawer` styles: fixed position left of content, slide transition, backdrop, z-index layering. |
+| Store | `downloadStore.ts` | No changes needed — already provides the reactive data. |
+
+**Drawer visual spec:**
+```
+┌──────────┬──────────────────┬──────────────────────┐
+│ Sidebar  │ Downloads Drawer │ Content area (dimmed) │
+│          │ ┌──────────────┐ │                       │
+│ ● Dash   │ │ Downloads    │ │                       │
+│   Inst   │ │              │ │                       │
+│   Run    │ │ [card]       │ │                       │
+│ ● Models │ │ [card]       │ │                       │
+│   Media  │ │ [card]       │ │                       │
+│   Sett   │ └──────────────┘ │                       │
+└──────────┴──────────────────┴──────────────────────┘
+```
+
+Width: ~340px. Background: `var(--surface)`. Border-right: `var(--border)`.
+
+### 2. Model Browser in ModelsView
+
+Replace the current directory-card-only Models view with a tabbed layout:
+
+**Tab 1: "Directories"** (current content) — model directory configuration.
+
+**Tab 2: "Browse Models"** — a file browser that lists model files in the
+configured directories, grouped by folder type.
+
+**Implementation:**
+
+| Layer | File | Change |
+|-------|------|--------|
+| IPC type | `src/types/ipc.ts` | Add `ModelFileInfo` type (`name`, `directory`, `sizeBytes`, `modified`). Add `getModelFiles(directory: string): Promise<ModelFileInfo[]>` to `ElectronApi`. |
+| Main | `src/main/lib/models.ts` | Add `listModelFiles(baseDir, directory)` function that scans a model subdirectory and returns file info. |
+| Main IPC | `src/main/lib/ipc.ts` | Register `get-model-files` handler. |
+| Preload | `src/preload/index.ts` | Expose `getModelFiles`. |
+| Component | `src/renderer/src/components/ModelBrowser.vue` | **New.** Left sidebar listing model folder types (`checkpoints`, `loras`, etc. from `MODEL_FOLDER_TYPES`). Main area shows a file list/grid for the selected folder. Search bar at top. File cards show name, size, date. |
+| Component | `src/renderer/src/components/ModelFileCard.vue` | **New.** Single model file card — name, size, modified date, "Show in Folder" button, optional delete button. |
+| View | `src/renderer/src/views/ModelsView.vue` | Add tab switcher (Directories / Browse). Conditionally render `ModelBrowser` or the existing dir-card content. |
+
+### 3. Download from URL (stretch)
+
+Add the ability to initiate a model download from the Launcher's Models view
+(similar to the frontend's `UploadModelDialog` wizard).
+
+| Layer | File | Change |
+|-------|------|--------|
+| Component | `src/renderer/src/components/DownloadModelDialog.vue` | **New.** Simple dialog: URL input, destination folder dropdown (from `MODEL_FOLDER_TYPES`), optional filename override, Download button. |
+| Main | `src/main/lib/comfyDownloadManager.ts` | Add a `startLauncherDownload(url, filename, directory)` variant that works from the Launcher window directly (not from a ComfyUI webview). The infrastructure is already there — we just need an IPC handler that calls `startModelDownload` with the launcher window. |
+| Preload | `src/preload/index.ts` | Expose `startModelDownload(url, filename, directory)`. |
+| IPC type | `src/types/ipc.ts` | Add `startModelDownload` to `ElectronApi`. |
+
+---
+
+## Implementation Order
+
+1. **Phase 1: Downloads Drawer** — Extract `DownloadsPanel` into
+   `DownloadsDrawer`, wire it into the App shell sidebar. This is the most
+   impactful UX improvement and is self-contained.
+
+2. **Phase 2: Model Browser** — Add the file-listing backend IPC + the
+   `ModelBrowser` component in `ModelsView`.
+
+3. **Phase 3: Download from URL** — Add the download dialog and
+   launcher-initiated download path.
+
+---
+
+## Notes
+
+- The Launcher already uses `lucide-vue-next` for sidebar icons — use the same
+  for the drawer's close/clear/folder icons.
+- The existing CSS design system (`--surface`, `--border`, `--accent`, etc.)
+  should be used throughout — no new design tokens needed.
+- The drawer should work with all existing themes (dark, light, nord, etc.).
+- The `comfyContentScript.ts` floating toast in ComfyUI windows is independent
+  and should NOT be changed — it serves a different context (inside the
+  webview).
+- General (non-model) downloads already flow through the same pipeline via the
+  `will-download` fallback in `comfyDownloadManager.ts`, so the drawer will
+  automatically show those too.
diff --git a/locales/en.json b/locales/en.json
index 25c91066a..e9f0e745c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -52,7 +52,16 @@
     "completed": "Complete",
     "cancelled": "Cancelled",
     "error": "Failed",
-    "sizeProgress": "{received} / {total}"
+    "sizeProgress": "{received} / {total}",
+    "clearCompleted": "Clear completed",
+    "downloadModel": "Download Model",
+    "urlLabel": "URL",
+    "urlPlaceholder": "https://example.com/model.safetensors",
+    "filenameLabel": "Filename",
+    "filenamePlaceholder": "model.safetensors",
+    "directoryLabel": "Destination Folder",
+    "startDownload": "Download",
+    "downloadFailed": "Download failed. Please check the URL and try again."
   },
 
   "media": {
@@ -70,7 +79,14 @@
     "removeDir": "Remove",
     "primary": "primary",
     "default": "default",
-    "makePrimary": "Make Primary"
+    "makePrimary": "Make Primary",
+    "browse": "Browse",
+    "directoriesTab": "Directories",
+    "folderTypes": "Model Types",
+    "searchPlaceholder": "Search files…",
+    "noFiles": "No model files found",
+    "openFolder": "Open folder",
+    "fileCount": "{count} files"
   },
 
   "common": {
@@ -102,6 +118,7 @@
     "extract": "Extract",
     "useSharedPaths": "Use Shared Directories",
     "done": "Done",
+    "loading": "Loading…",
     "noItems": "No items available.",
     "advanced": "Advanced",
     "tabStatus": "Status",
diff --git a/src/main/lib/comfyDownloadManager.ts b/src/main/lib/comfyDownloadManager.ts
index 1a82cc006..2809b5c94 100644
--- a/src/main/lib/comfyDownloadManager.ts
+++ b/src/main/lib/comfyDownloadManager.ts
@@ -476,4 +476,13 @@ export function registerDownloadIpc(): void {
       shell.showItemInFolder(path.resolve(savePath))
     }
   })
+
+  ipcMain.handle(
+    'launcher-start-download',
+    (event, { url, filename, directory }: { url: string; filename: string; directory: string }) => {
+      const win = BrowserWindow.fromWebContents(event.sender)
+      if (!win) return false
+      return startModelDownload(win, url, filename, directory)
+    },
+  )
 }
diff --git a/src/main/lib/ipc.ts b/src/main/lib/ipc.ts
index c8fb1a0cb..a8a9ef62e 100644
--- a/src/main/lib/ipc.ts
+++ b/src/main/lib/ipc.ts
@@ -26,7 +26,7 @@ import { formatTime } from './util'
 import { getActiveDownloads } from './comfyDownloadManager'
 import * as releaseCache from './release-cache'
 import * as i18n from './i18n'
-import { ensureModelPathsConfig } from './models'
+import { ensureModelPathsConfig, MODEL_FOLDER_TYPES } from './models'
 import { copyDirWithProgress } from './copy'
 import { fetchJSON } from './fetch'
 import { fetchLatestRelease, truncateNotes } from './comfyui-releases'
@@ -1175,6 +1175,43 @@ export function register(callbacks: RegisterCallbacks = {}): void {
     }
   })
 
+  ipcMain.handle('get-model-folders', () => {
+    return [...MODEL_FOLDER_TYPES]
+  })
+
+  ipcMain.handle('get-model-files', (_event, directory: string) => {
+    const modelsDirs = (settings.get('modelsDirs') as string[]) || settings.defaults.modelsDirs
+    const files: Array<{ name: string; directory: string; fullPath: string; sizeBytes: number; modifiedAt: number }> = []
+    const ALLOWED_EXTS = new Set(['.safetensors', '.sft', '.ckpt', '.pth', '.pt', '.bin', '.onnx'])
+
+    for (const baseDir of modelsDirs) {
+      const dirPath = path.join(baseDir, directory)
+      try {
+        if (!fs.existsSync(dirPath)) continue
+        const entries = fs.readdirSync(dirPath, { withFileTypes: true })
+        for (const entry of entries) {
+          if (!entry.isFile()) continue
+          const ext = path.extname(entry.name).toLowerCase()
+          if (!ALLOWED_EXTS.has(ext)) continue
+          try {
+            const filePath = path.join(dirPath, entry.name)
+            const stat = fs.statSync(filePath)
+            files.push({
+              name: entry.name,
+              directory,
+              fullPath: filePath,
+              sizeBytes: stat.size,
+              modifiedAt: stat.mtimeMs,
+            })
+          } catch {}
+        }
+      } catch {}
+    }
+
+    files.sort((a, b) => b.modifiedAt - a.modifiedAt)
+    return files
+  })
+
   ipcMain.handle('get-media-sections', () => {
     const s = settings.getAll()
     return [
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 817419820..5b69c66b1 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -96,6 +96,12 @@ const api: ElectronApi = {
   resumeModelDownload: (url) => ipcRenderer.invoke('model-download-resume', { url }),
   cancelModelDownload: (url) => ipcRenderer.invoke('model-download-cancel', { url }),
   showDownloadInFolder: (savePath) => ipcRenderer.invoke('show-download-in-folder', { savePath }),
+  startModelDownload: (url, filename, directory) =>
+    ipcRenderer.invoke('launcher-start-download', { url, filename, directory }),
+
+  // Model file browser
+  getModelFolders: () => ipcRenderer.invoke('get-model-folders'),
+  getModelFiles: (directory: string) => ipcRenderer.invoke('get-model-files', directory),
 
   // Updates
   checkForUpdate: () => ipcRenderer.invoke('check-for-update'),
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 8c4a54ac3..e0b577e97 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -604,6 +604,27 @@ input[type="checkbox"]:checked::after { transform: translateX(16px); }
 .modal-select-item-label { flex: 1; font-weight: 500; }
 .modal-select-item-desc { color: var(--text-muted); font-size: 12px; }
 
+/* Modal layout (for structured dialogs with header/body/footer) */
+.modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 24px; border-bottom: 1px solid var(--border);
+}
+.modal-body { padding: 16px 24px; }
+.modal-footer {
+  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
+  padding: 12px 24px; border-top: 1px solid var(--border);
+}
+
+/* Form field inputs */
+.field-input {
+  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
+  background: var(--surface); color: var(--text); font-size: 14px;
+  outline: none; width: 100%;
+}
+.field-input:focus { border-color: var(--accent); }
+.field-input::placeholder { color: var(--text-faint); }
+select.field-input { cursor: pointer; }
+
 /* Update banner */
 .update-banner {
   display: flex; align-items: center; gap: 12px;
@@ -881,3 +902,37 @@ button.detail-header-btn.active:hover:not(:disabled) {
 button.detail-header-btn:disabled {
   cursor: default; opacity: 0.4;
 }
+
+/* Downloads drawer */
+.downloads-drawer-backdrop {
+  position: fixed; inset: 0; z-index: 40;
+  background: var(--overlay-bg);
+  transition: opacity 0.2s ease;
+}
+.downloads-drawer {
+  position: fixed; top: 0; bottom: 0; left: 200px; z-index: 45;
+  width: 340px; background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  transition: transform 0.2s ease;
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
+}
+.downloads-drawer-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.downloads-drawer-title {
+  font-size: 15px; font-weight: 600; color: var(--text);
+}
+.downloads-drawer-actions {
+  display: flex; align-items: center; gap: 4px;
+}
+.downloads-drawer-body {
+  flex: 1; overflow-y: auto; padding: 12px;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.downloads-drawer-empty {
+  display: flex; align-items: center; justify-content: center;
+  height: 100%; color: var(--text-muted); font-size: 14px;
+}
diff --git a/src/renderer/src/components/DownloadModelDialog.vue b/src/renderer/src/components/DownloadModelDialog.vue
new file mode 100644
index 000000000..f1513bd83
--- /dev/null
+++ b/src/renderer/src/components/DownloadModelDialog.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Download, X } from 'lucide-vue-next'
+
+const { t } = useI18n()
+
+const open = defineModel<boolean>({ default: false })
+
+const url = ref('')
+const filename = ref('')
+const directory = ref('')
+const folders = ref<string[]>([])
+const submitting = ref(false)
+const error = ref('')
+
+function extractFilename(rawUrl: string): string {
+  try {
+    const parsed = new URL(rawUrl)
+    const segments = parsed.pathname.split('/')
+    const last = segments[segments.length - 1] || ''
+    const clean = last.split('?')[0] || ''
+    if (clean) return decodeURIComponent(clean)
+  } catch {}
+  return ''
+}
+
+watch(url, (newUrl) => {
+  if (newUrl && !filename.value) {
+    filename.value = extractFilename(newUrl)
+  }
+})
+
+const canSubmit = computed(() => {
+  return url.value.trim() && filename.value.trim() && directory.value && !submitting.value
+})
+
+function formatFolderLabel(folder: string): string {
+  return folder.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+async function handleSubmit(): Promise<void> {
+  if (!canSubmit.value) return
+  error.value = ''
+  submitting.value = true
+  try {
+    const ok = await window.api.startModelDownload(url.value.trim(), filename.value.trim(), directory.value)
+    if (ok) {
+      url.value = ''
+      filename.value = ''
+      open.value = false
+    } else {
+      error.value = t('downloads.downloadFailed')
+    }
+  } catch (e) {
+    error.value = (e as Error).message || t('downloads.downloadFailed')
+  } finally {
+    submitting.value = false
+  }
+}
+
+function handleClose(): void {
+  open.value = false
+  error.value = ''
+}
+
+onMounted(async () => {
+  folders.value = await window.api.getModelFolders()
+  if (folders.value.length > 0 && !directory.value) {
+    directory.value = folders.value[0]!
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="modal-overlay" @click.self="handleClose">
+      <div class="modal-box" style="max-width: 520px; padding: 0;">
+        <div class="modal-header">
+          <span class="modal-title" style="margin-bottom: 0;">{{ t('downloads.downloadModel') }}</span>
+          <button class="detail-header-btn" @click="handleClose">
+            <X :size="16" />
+          </button>
+        </div>
+        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px;">
+          <div class="field" style="margin-bottom: 0;">
+            <label>{{ t('downloads.urlLabel') }}</label>
+            <input
+              v-model="url"
+              type="text"
+              :placeholder="t('downloads.urlPlaceholder')"
+              class="field-input"
+              @keydown.enter="handleSubmit"
+            />
+          </div>
+          <div class="field" style="margin-bottom: 0;">
+            <label>{{ t('downloads.filenameLabel') }}</label>
+            <input
+              v-model="filename"
+              type="text"
+              :placeholder="t('downloads.filenamePlaceholder')"
+              class="field-input"
+            />
+          </div>
+          <div class="field" style="margin-bottom: 0;">
+            <label>{{ t('downloads.directoryLabel') }}</label>
+            <select v-model="directory" class="field-input">
+              <option v-for="folder in folders" :key="folder" :value="folder">
+                {{ formatFolderLabel(folder) }}
+              </option>
+            </select>
+          </div>
+          <div v-if="error" class="field-error">{{ error }}</div>
+        </div>
+        <div class="modal-footer">
+          <button @click="handleClose">{{ t('common.cancel') }}</button>
+          <button class="primary" :disabled="!canSubmit" @click="handleSubmit">
+            <Download :size="14" style="vertical-align: -2px; margin-right: 4px;" />
+            {{ t('downloads.startDownload') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/src/renderer/src/components/DownloadsDrawer.vue b/src/renderer/src/components/DownloadsDrawer.vue
new file mode 100644
index 000000000..a5d1e2d5c
--- /dev/null
+++ b/src/renderer/src/components/DownloadsDrawer.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { X } from 'lucide-vue-next'
+import { useDownloadStore } from '../stores/downloadStore'
+import type { ModelDownloadProgress } from '../types/ipc'
+
+const { t } = useI18n()
+const downloadStore = useDownloadStore()
+const open = defineModel<boolean>({ default: false })
+
+function close(): void {
+  open.value = false
+}
+
+function fmtBytes(b: number): string {
+  if (!b || b <= 0) return ''
+  if (b < 1048576) return (b / 1024).toFixed(0) + ' KB'
+  if (b < 1073741824) return (b / 1048576).toFixed(1) + ' MB'
+  return (b / 1073741824).toFixed(2) + ' GB'
+}
+
+function fmtSpeed(bytesPerSec: number): string {
+  if (bytesPerSec < 1048576) return (bytesPerSec / 1024).toFixed(0) + ' KB/s'
+  return (bytesPerSec / 1048576).toFixed(1) + ' MB/s'
+}
+
+function fmtEta(seconds: number): string {
+  if (seconds < 60) return `${Math.ceil(seconds)}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${Math.ceil(seconds % 60)}s`
+  const h = Math.floor(seconds / 3600)
+  const m = Math.ceil((seconds % 3600) / 60)
+  return `${h}h ${m}m`
+}
+
+function statusLabel(d: ModelDownloadProgress): string {
+  const pct = Math.round(d.progress * 100)
+  switch (d.status) {
+    case 'pending':
+      return t('downloads.pending')
+    case 'downloading': {
+      const parts: string[] = []
+      if (d.totalBytes && d.totalBytes > 0 && d.receivedBytes != null) {
+        parts.push(`${fmtBytes(d.receivedBytes)} / ${fmtBytes(d.totalBytes)}`)
+      }
+      parts.push(`${pct}%`)
+      if (d.speedBytesPerSec && d.speedBytesPerSec > 0) {
+        parts.push(fmtSpeed(d.speedBytesPerSec))
+      }
+      if (d.etaSeconds != null && d.etaSeconds > 0 && isFinite(d.etaSeconds)) {
+        parts.push(fmtEta(d.etaSeconds))
+      }
+      return parts.join(' · ')
+    }
+    case 'paused': {
+      const parts: string[] = [t('downloads.paused', { percent: pct })]
+      if (d.totalBytes && d.totalBytes > 0 && d.receivedBytes != null) {
+        parts.push(`${fmtBytes(d.receivedBytes)} / ${fmtBytes(d.totalBytes)}`)
+      }
+      return parts.join(' · ')
+    }
+    case 'completed':
+      return t('downloads.completed')
+    case 'error':
+      return d.error || t('downloads.error')
+    case 'cancelled':
+      return t('downloads.cancelled')
+    default:
+      return ''
+  }
+}
+
+function statusClass(d: ModelDownloadProgress): string {
+  switch (d.status) {
+    case 'downloading':
+    case 'pending':
+      return 'status-running'
+    case 'paused':
+      return 'status-update'
+    case 'completed':
+      return ''
+    case 'error':
+      return 'status-danger'
+    default:
+      return ''
+  }
+}
+
+function barClass(d: ModelDownloadProgress): string {
+  switch (d.status) {
+    case 'paused':
+      return 'dl-bar-paused'
+    case 'error':
+      return 'dl-bar-error'
+    case 'completed':
+      return 'dl-bar-success'
+    default:
+      return ''
+  }
+}
+
+function fileLabel(d: ModelDownloadProgress): string {
+  const dir = d.directory || ''
+  return dir ? `${dir} / ${d.filename}` : d.filename
+}
+
+function pause(url: string): void {
+  window.api.pauseModelDownload(url)
+}
+
+function resume(url: string): void {
+  window.api.resumeModelDownload(url)
+}
+
+function cancel(url: string): void {
+  window.api.cancelModelDownload(url)
+}
+
+function showInFolder(savePath: string): void {
+  window.api.showDownloadInFolder(savePath)
+}
+
+function dismiss(url: string): void {
+  downloadStore.dismiss(url)
+}
+
+function clearCompleted(): void {
+  for (const d of downloadStore.finishedDownloads) {
+    downloadStore.dismiss(d.url)
+  }
+}
+</script>
+
+<template>
+  <Transition name="drawer-backdrop">
+    <div
+      v-if="open"
+      class="downloads-drawer-backdrop"
+      @click="close"
+    />
+  </Transition>
+
+  <Transition name="drawer-slide">
+    <div v-if="open" class="downloads-drawer">
+      <div class="downloads-drawer-header">
+        <span class="downloads-drawer-title">{{ t('downloads.title') }}</span>
+        <div class="downloads-drawer-actions">
+          <button
+            v-if="downloadStore.finishedDownloads.length > 0"
+            class="drawer-clear-btn"
+            @click="clearCompleted"
+          >
+            {{ t('downloads.clearCompleted') }}
+          </button>
+          <button class="drawer-close-btn" @click="close">
+            <X :size="16" />
+          </button>
+        </div>
+      </div>
+
+      <div class="downloads-drawer-body">
+        <template v-if="downloadStore.hasDownloads">
+          <!-- Active downloads -->
+          <div
+            v-for="d in downloadStore.activeDownloads"
+            :key="d.url"
+            class="instance-card dl-card"
+          >
+            <div class="instance-info">
+              <div class="instance-name dl-filename" :title="d.filename">
+                {{ fileLabel(d) }}
+              </div>
+              <div class="instance-meta">
+                <span :class="statusClass(d)">{{ statusLabel(d) }}</span>
+              </div>
+              <div class="card-progress">
+                <div class="card-progress-track">
+                  <div
+                    class="card-progress-fill"
+                    :class="[barClass(d), { indeterminate: d.status === 'pending' }]"
+                    :style="d.status !== 'pending' ? { width: Math.round(d.progress * 100) + '%' } : { width: '100%' }"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="instance-actions">
+              <button
+                v-if="d.status === 'downloading'"
+                @click="pause(d.url)"
+              >
+                {{ t('downloads.pause') }}
+              </button>
+              <button
+                v-if="d.status === 'paused'"
+                class="primary"
+                @click="resume(d.url)"
+              >
+                {{ t('downloads.resume') }}
+              </button>
+              <button
+                v-if="d.status !== 'completed'"
+                class="danger"
+                @click="cancel(d.url)"
+              >
+                {{ t('downloads.cancel') }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Finished downloads -->
+          <div
+            v-for="d in downloadStore.finishedDownloads"
+            :key="d.url"
+            class="instance-card dl-card"
+          >
+            <div class="instance-info">
+              <div class="instance-name dl-filename" :title="d.filename">
+                {{ fileLabel(d) }}
+              </div>
+              <div class="instance-meta">
+                <span :class="statusClass(d)">{{ statusLabel(d) }}</span>
+              </div>
+            </div>
+            <div class="instance-actions">
+              <button
+                v-if="d.status === 'completed' && d.savePath"
+                @click="showInFolder(d.savePath)"
+              >
+                {{ t('downloads.view') }}
+              </button>
+              <button @click="dismiss(d.url)">
+                {{ t('downloads.dismiss') }}
+              </button>
+            </div>
+          </div>
+        </template>
+
+        <div v-else class="downloads-drawer-empty">
+          {{ t('downloads.empty') }}
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.dl-filename {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dl-card .card-progress {
+  margin-top: 6px;
+}
+.dl-bar-paused {
+  background: var(--warning) !important;
+}
+.dl-bar-error {
+  background: var(--danger) !important;
+}
+.dl-bar-success {
+  background: var(--success) !important;
+}
+.drawer-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 6px;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.drawer-close-btn:hover {
+  color: var(--text);
+  border-color: var(--border);
+  background: none;
+}
+.drawer-clear-btn {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 4px;
+}
+
+/* Backdrop transition */
+.drawer-backdrop-enter-active,
+.drawer-backdrop-leave-active {
+  transition: opacity 0.2s ease;
+}
+.drawer-backdrop-enter-from,
+.drawer-backdrop-leave-to {
+  opacity: 0;
+}
+
+/* Slide transition */
+.drawer-slide-enter-active,
+.drawer-slide-leave-active {
+  transition: transform 0.2s ease;
+}
+.drawer-slide-enter-from,
+.drawer-slide-leave-to {
+  transform: translateX(-100%);
+}
+</style>
diff --git a/src/renderer/src/components/ModelBrowser.vue b/src/renderer/src/components/ModelBrowser.vue
new file mode 100644
index 000000000..62af31b01
--- /dev/null
+++ b/src/renderer/src/components/ModelBrowser.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Search, FolderOpen, File, ExternalLink } from 'lucide-vue-next'
+import type { ModelFileInfo } from '../types/ipc'
+
+const { t } = useI18n()
+
+const folders = ref<string[]>([])
+const selectedFolder = ref('')
+const files = ref<ModelFileInfo[]>([])
+const searchQuery = ref('')
+const loading = ref(false)
+
+const filteredFiles = computed(() => {
+  if (!searchQuery.value) return files.value
+  const q = searchQuery.value.toLowerCase()
+  return files.value.filter((f) => f.name.toLowerCase().includes(q))
+})
+
+function fmtSize(bytes: number): string {
+  if (bytes < 1048576) return (bytes / 1024).toFixed(0) + ' KB'
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB'
+  return (bytes / 1073741824).toFixed(2) + ' GB'
+}
+
+function fmtDate(ms: number): string {
+  return new Date(ms).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+async function loadFolders(): Promise<void> {
+  folders.value = await window.api.getModelFolders()
+  if (folders.value.length > 0 && !selectedFolder.value) {
+    selectedFolder.value = folders.value[0]!
+  }
+}
+
+async function loadFiles(): Promise<void> {
+  if (!selectedFolder.value) return
+  loading.value = true
+  try {
+    files.value = await window.api.getModelFiles(selectedFolder.value)
+  } finally {
+    loading.value = false
+  }
+}
+
+function showInFolder(file: ModelFileInfo): void {
+  window.api.showDownloadInFolder(file.fullPath)
+}
+
+watch(selectedFolder, () => loadFiles())
+
+onMounted(async () => {
+  await loadFolders()
+  await loadFiles()
+})
+
+defineExpose({ refresh: loadFiles })
+</script>
+
+<template>
+  <div class="model-browser">
+    <div class="model-browser-sidebar">
+      <div class="model-browser-sidebar-title">{{ t('models.folderTypes') }}</div>
+      <button
+        v-for="folder in folders"
+        :key="folder"
+        class="model-browser-folder-item"
+        :class="{ active: selectedFolder === folder }"
+        @click="selectedFolder = folder"
+      >
+        <FolderOpen :size="14" style="flex-shrink: 0" />
+        <span>{{ folder }}</span>
+      </button>
+    </div>
+    <div class="model-browser-main">
+      <div class="model-browser-search">
+        <Search :size="16" class="model-browser-search-icon" />
+        <input
+          v-model="searchQuery"
+          type="text"
+          :placeholder="t('models.searchPlaceholder')"
+          class="model-browser-search-input"
+        />
+      </div>
+      <div class="model-browser-list">
+        <div v-if="loading" class="model-browser-empty">{{ t('common.loading') }}</div>
+        <div v-else-if="filteredFiles.length === 0" class="model-browser-empty">
+          {{ t('models.noFiles') }}
+        </div>
+        <div
+          v-for="file in filteredFiles"
+          :key="file.name"
+          class="model-file-card"
+        >
+          <div class="model-file-info">
+            <File :size="14" style="flex-shrink: 0; opacity: 0.5" />
+            <div class="model-file-details">
+              <div class="model-file-name" :title="file.name">{{ file.name }}</div>
+              <div class="model-file-meta">
+                {{ fmtSize(file.sizeBytes) }} · {{ fmtDate(file.modifiedAt) }}
+              </div>
+            </div>
+          </div>
+          <button
+            class="model-file-action"
+            :title="t('models.openFolder')"
+            @click="showInFolder(file)"
+          >
+            <ExternalLink :size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.model-browser {
+  display: flex;
+  height: 100%;
+  min-height: 300px;
+  gap: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg);
+}
+.model-browser-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  padding: 12px 0;
+  overflow-y: auto;
+}
+.model-browser-sidebar-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 14px 8px;
+}
+.model-browser-folder-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+.model-browser-folder-item:hover {
+  background: var(--border);
+  color: var(--text);
+}
+.model-browser-folder-item.active {
+  background: var(--border);
+  color: var(--text);
+  font-weight: 600;
+}
+.model-browser-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.model-browser-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.model-browser-search-icon {
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+.model-browser-search-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text);
+  font-size: 14px;
+}
+.model-browser-search-input::placeholder {
+  color: var(--text-faint);
+}
+.model-browser-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.model-browser-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+.model-file-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-radius: 6px;
+  gap: 8px;
+}
+.model-file-card:hover {
+  background: var(--surface);
+}
+.model-file-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+.model-file-details {
+  min-width: 0;
+  flex: 1;
+}
+.model-file-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-file-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.model-file-action {
+  flex-shrink: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--text-faint);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+.model-file-action:hover {
+  color: var(--text);
+  border-color: var(--border);
+  background: none;
+}
+</style>
diff --git a/src/renderer/src/types/ipc.ts b/src/renderer/src/types/ipc.ts
index 055706593..401b14513 100644
--- a/src/renderer/src/types/ipc.ts
+++ b/src/renderer/src/types/ipc.ts
@@ -43,6 +43,7 @@ export type {
   UpdateDownloadProgress,
   ModelDownloadStatus,
   ModelDownloadProgress,
+  ModelFileInfo,
   TrackResult,
   CopyEvent,
   SnapshotDiffSummary,
diff --git a/src/renderer/src/views/ModelsView.vue b/src/renderer/src/views/ModelsView.vue
index f5567218c..32f173e76 100644
--- a/src/renderer/src/views/ModelsView.vue
+++ b/src/renderer/src/views/ModelsView.vue
@@ -2,8 +2,11 @@
 import { ref, onMounted } from 'vue'
 import DirCard from '../components/DirCard.vue'
 import DownloadsPanel from '../components/DownloadsPanel.vue'
+import ModelBrowser from '../components/ModelBrowser.vue'
 import type { ModelsSection } from '../types/ipc'
 
+const activeTab = ref<'directories' | 'browse'>('directories')
+
 const systemDefault = ref('')
 const sections = ref<ModelsSection[]>([])
 
@@ -69,8 +72,24 @@ defineExpose({ loadModels })
         <span class="breadcrumb-current">{{ $t('models.title') }}</span>
       </div>
     </div>
+    <div class="filter-tabs">
+      <button
+        class="filter-tab"
+        :class="{ active: activeTab === 'directories' }"
+        @click="activeTab = 'directories'"
+      >
+        {{ $t('models.directoriesTab') }}
+      </button>
+      <button
+        class="filter-tab"
+        :class="{ active: activeTab === 'browse' }"
+        @click="activeTab = 'browse'"
+      >
+        {{ $t('models.browse') }}
+      </button>
+    </div>
 
-    <div class="view-scroll">
+    <div v-if="activeTab === 'directories'" class="view-scroll">
       <div
         v-for="(section, sIdx) in sections"
         :key="sIdx"
@@ -102,5 +121,9 @@ defineExpose({ loadModels })
 
       <DownloadsPanel />
     </div>
+
+    <div v-else class="view-scroll" style="padding: 16px;">
+      <ModelBrowser />
+    </div>
   </div>
 </template>
diff --git a/src/types/ipc.ts b/src/types/ipc.ts
index 3a204157d..bea24ab9c 100644
--- a/src/types/ipc.ts
+++ b/src/types/ipc.ts
@@ -342,6 +342,15 @@ export interface ModelDownloadProgress {
   error?: string
 }
 
+// --- Model file browser types ---
+export interface ModelFileInfo {
+  name: string
+  directory: string
+  fullPath: string
+  sizeBytes: number
+  modifiedAt: number
+}
+
 // --- Track types ---
 export interface TrackResult {
   ok: boolean
@@ -552,6 +561,11 @@ export interface ElectronApi {
   resumeModelDownload(url: string): Promise<boolean>
   cancelModelDownload(url: string): Promise<boolean>
   showDownloadInFolder(savePath: string): Promise<void>
+  startModelDownload(url: string, filename: string, directory: string): Promise<boolean>
+
+  // Model file browser
+  getModelFolders(): Promise<string[]>
+  getModelFiles(directory: string): Promise<ModelFileInfo[]>
 
   // Event listeners (return unsubscribe functions)
   onInstallProgress(callback: (data: ProgressData) => void): Unsubscribe