diff --git a/README.md b/README.md
index 4981823..29ef3af 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,20 @@
 
 ---
 
+## 開発環境のトラブルシューティング
+
+### SSH接続エラー (Host Key Mismatch)
+
+サーバーの再構築等により `REMOTE HOST IDENTIFICATION HAS CHANGED!` エラーが発生した場合は、以下のコマンドで古いホストキーを削除してください。
+
+```powershell
+ssh-keygen -R [ホスト名]
+```
+
+例: `ssh-keygen -R server2022`
+
+---
+
 ## 開発者向け情報
 
 ### ログ
diff --git a/src-tauri/telos.db b/src-tauri/telos.db
index e69de29..a4c308f 100644
--- a/src-tauri/telos.db
+++ b/src-tauri/telos.db
Binary files differ
diff --git a/src-tauri/telos.db-shm b/src-tauri/telos.db-shm
new file mode 100644
index 0000000..14ef4a8
--- /dev/null
+++ b/src-tauri/telos.db-shm
Binary files differ
diff --git a/src-tauri/telos.db-wal b/src-tauri/telos.db-wal
new file mode 100644
index 0000000..1f1d266
--- /dev/null
+++ b/src-tauri/telos.db-wal
Binary files differ
diff --git a/src/App.css b/src/App.css
index b9d355d..695957c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,40 +3,63 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+:root{
+  --bg: #0f172a;
+  --panel: #0b1220;
+  --muted: #94a3b8;
+  --accent-purple: #c084fc;
+  --glass: rgba(255,255,255,0.04);
+  --glass-2: rgba(255,255,255,0.02);
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+body{
+  background: linear-gradient(180deg, #05060a 0%, #0f172a 100%);
+  color: #e2e8f0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  margin: 0;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.container{
+  max-width: 980px;
+  margin: 24px auto;
+  padding: 16px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.header{
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.card {
-  padding: 2em;
+.status-badge{
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 8px;
 }
 
-.read-the-docs {
-  color: #888;
+.status-dot{
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  background: var(--muted);
 }
+
+.status-dot.idle{ background: var(--muted) }
+.status-dot.ok{ background: #34d399 }
+.status-dot.error{ background: #fb7185 }
+
+.accent-purple{ color: var(--accent-purple) }
+
+.actions{ margin-top: 12px; display: flex; gap: 8px }
+
+.secondary-btn{
+  background: transparent;
+  border: 1px solid rgba(255,255,255,0.06);
+  color: inherit;
+  padding: 8px 10px;
+  border-radius: 6px;
+}
+
+.hidden{ display: none }
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..d1967f0
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,10 @@
+import { ModelName } from './ModelName';
+
+export default function App() {
+  return (
+    <>
+      <ModelName />
+      {/* ...既存UIコンポーネントやレイアウト... */}
+    </>
+  );
+}
diff --git a/src/ModelName.tsx b/src/ModelName.tsx
new file mode 100644
index 0000000..1b20f61
--- /dev/null
+++ b/src/ModelName.tsx
@@ -0,0 +1,14 @@
+import { invoke } from '@tauri-apps/api/tauri';
+import { useEffect, useState } from 'react';
+
+export function ModelName() {
+  const [modelName, setModelName] = useState('');
+
+  useEffect(() => {
+    invoke<string>('get_model_name').then((name) => setModelName(name));
+  }, []);
+
+  return (
+    <div className="model-name">使用モデル: {modelName}</div>
+  );
+}
diff --git a/src/types/tauri.d.ts b/src/types/tauri.d.ts
new file mode 100644
index 0000000..5e143c9
--- /dev/null
+++ b/src/types/tauri.d.ts
@@ -0,0 +1,3 @@
+declare module '@tauri-apps/api/tauri' {
+  export function invoke<T = unknown>(cmd: string, args?: Record<string, unknown>): Promise<T>;
+}