diff --git a/docs/work-plan.md b/docs/work-plan.md
index 33b56fd..d175182 100644
--- a/docs/work-plan.md
+++ b/docs/work-plan.md
@@ -87,7 +87,7 @@
 
 ### День 2
 
-- [ ] `d2-1` UI Problems: список, фильтры, `Ack/Resolve`, карточка с таймлайном
+- [x] `d2-1` UI Problems: список, фильтры, `Ack/Resolve`, карточка с таймлайном
 - [ ] `d2-2` Dashboard: top hosts/types, `open vs resolved 24h`, drill-down
 - [ ] `d2-3` Ops: retention, health checks, runbook backup/restore/deploy
 - [ ] `dod` DoD: нет дублей `event_id`, Problems e2e, 3 правила, UI MVP, docs, push в kalinamall
@@ -116,8 +116,8 @@
 
 #### День 2
 
-- [ ] `09:00–11:00` UI Problems: таблица + фильтры (`status/severity/host`)
-- [ ] `11:00–12:00` карточка проблемы + таймлайн событий
+- [x] `09:00–11:00` UI Problems: таблица + фильтры (`status/severity/host`)
+- [x] `11:00–12:00` карточка проблемы + таймлайн событий
 - [ ] `13:00–14:30` Dashboard: виджеты top hosts/types
 - [ ] `14:30–16:00` Dashboard: `open/resolved 24h` + drill-down
 - [ ] `16:00–17:00` retention job (`events 30–90d`, `problems 180d+`)
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index eb60443..8ee422d 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -111,6 +111,24 @@ export interface ProblemListResponse {
   page_size: number;
 }
 
+export interface ProblemEventItem {
+  id: number;
+  event_id: string;
+  occurred_at: string;
+  type: string;
+  severity: string;
+  title: string;
+  summary: string;
+}
+
+export interface ProblemDetail extends ProblemSummary {
+  events: ProblemEventItem[];
+}
+
+export function fetchProblem(id: number): Promise<ProblemDetail> {
+  return apiFetch<ProblemDetail>(`/api/v1/problems/${id}`);
+}
+
 export async function ackProblem(problemId: number): Promise<{ id: number; status: string }> {
   return apiFetch(`/api/v1/problems/${problemId}/ack`, { method: "POST" });
 }
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index 057ab8c..9794873 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -5,6 +5,7 @@ import EventDetailView from "./views/EventDetailView.vue";
 import HostsView from "./views/HostsView.vue";
 import LoginView from "./views/LoginView.vue";
 import ProblemsView from "./views/ProblemsView.vue";
+import ProblemDetailView from "./views/ProblemDetailView.vue";
 import DashboardView from "./views/DashboardView.vue";
 import ReportsView from "./views/ReportsView.vue";
 
@@ -19,6 +20,7 @@ const router = createRouter({
     { path: "/reports", component: ReportsView },
     { path: "/hosts", component: HostsView },
     { path: "/problems", component: ProblemsView },
+    { path: "/problems/:id", component: ProblemDetailView, props: true },
   ],
 });
 
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 5692080..f397666 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -94,6 +94,11 @@ td.actions {
   margin-bottom: 1rem;
 }
 
+.timeline-table td:nth-child(5) {
+  max-width: 28rem;
+  word-break: break-word;
+}
+
 input,
 select,
 button {
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 1147cb8..3587e65 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -12,7 +12,7 @@
       <div class="dash-card">
         <div class="dash-value">{{ data.problems_open }}</div>
         <div class="dash-label">Открытых проблем</div>
-        <RouterLink to="/problems">Проблемы →</RouterLink>
+        <RouterLink :to="{ path: '/problems', query: { status: 'open' } }">Проблемы →</RouterLink>
       </div>
       <div class="dash-card">
         <div class="dash-value">{{ data.hosts_total }}</div>
diff --git a/frontend/src/views/ProblemDetailView.vue b/frontend/src/views/ProblemDetailView.vue
new file mode 100644
index 0000000..075a12a
--- /dev/null
+++ b/frontend/src/views/ProblemDetailView.vue
@@ -0,0 +1,135 @@
+<template>
+  <p><RouterLink to="/problems">← Проблемы</RouterLink></p>
+  <p v-if="error" class="error">{{ error }}</p>
+  <p v-else-if="loading">Загрузка…</p>
+  <template v-else-if="problem">
+    <h1>{{ problem.title }}</h1>
+    <div class="card report-meta">
+      <p>
+        <strong>ID:</strong> {{ problem.id }}
+        · <strong>Status:</strong>
+        <span :class="'status-' + problem.status">{{ problem.status }}</span>
+        · <strong>Severity:</strong>
+        <span :class="'sev-' + problem.severity">{{ problem.severity }}</span>
+      </p>
+      <p>
+        <strong>Хост:</strong>
+        <RouterLink
+          v-if="problem.hostname"
+          :to="{ path: '/reports', query: { hostname: problem.hostname } }"
+        >
+          {{ problem.hostname }}
+        </RouterLink>
+        <span v-else>—</span>
+        · <strong>Rule:</strong> <code>{{ problem.rule_id ?? "—" }}</code>
+      </p>
+      <p><strong>Summary:</strong> {{ problem.summary }}</p>
+      <p>
+        <strong>Событий:</strong> {{ problem.event_count ?? "—" }}
+        · <strong>Last seen:</strong> {{ formatDt(problem.last_seen_at ?? problem.updated_at) }}
+        · <strong>Обновлено:</strong> {{ formatDt(problem.updated_at) }}
+      </p>
+      <p v-if="problem.fingerprint">
+        <strong>Fingerprint:</strong> <code>{{ problem.fingerprint }}</code>
+      </p>
+      <p class="actions">
+        <button
+          v-if="problem.status === 'open'"
+          type="button"
+          class="secondary"
+          :disabled="acting"
+          @click="doAck"
+        >
+          Ack
+        </button>
+        <button v-if="problem.status !== 'resolved'" type="button" :disabled="acting" @click="doResolve">
+          Resolve
+        </button>
+      </p>
+    </div>
+
+    <h2>Таймлайн событий</h2>
+    <p v-if="!problem.events.length">Нет связанных событий.</p>
+    <table v-else class="timeline-table">
+      <thead>
+        <tr>
+          <th>Время</th>
+          <th>Severity</th>
+          <th>Type</th>
+          <th>Title</th>
+          <th>Summary</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="e in problem.events" :key="e.id">
+          <td>{{ formatDt(e.occurred_at) }}</td>
+          <td :class="'sev-' + e.severity">{{ e.severity }}</td>
+          <td>
+            <RouterLink :to="`/events/${e.id}`"><code>{{ e.type }}</code></RouterLink>
+          </td>
+          <td>{{ e.title }}</td>
+          <td>{{ e.summary }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { ackProblem, fetchProblem, resolveProblem, type ProblemDetail } from "../api";
+
+const props = defineProps<{ id: string }>();
+
+const problem = ref<ProblemDetail | null>(null);
+const loading = ref(false);
+const error = ref("");
+const acting = ref(false);
+
+function formatDt(iso: string) {
+  return new Date(iso).toLocaleString("ru-RU");
+}
+
+async function load() {
+  loading.value = true;
+  error.value = "";
+  try {
+    problem.value = await fetchProblem(Number(props.id));
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Не найдено";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function doAck() {
+  if (!problem.value) return;
+  acting.value = true;
+  error.value = "";
+  try {
+    await ackProblem(problem.value.id);
+    await load();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Ошибка ack";
+  } finally {
+    acting.value = false;
+  }
+}
+
+async function doResolve() {
+  if (!problem.value) return;
+  acting.value = true;
+  error.value = "";
+  try {
+    await resolveProblem(problem.value.id);
+    await load();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Ошибка resolve";
+  } finally {
+    acting.value = false;
+  }
+}
+
+onMounted(load);
+watch(() => props.id, load);
+</script>
diff --git a/frontend/src/views/ProblemsView.vue b/frontend/src/views/ProblemsView.vue
index 6fab506..3a71440 100644
--- a/frontend/src/views/ProblemsView.vue
+++ b/frontend/src/views/ProblemsView.vue
@@ -7,7 +7,15 @@
       <option value="acknowledged">acknowledged</option>
       <option value="resolved">resolved</option>
     </select>
-    <button type="button" @click="load(1)">Обновить</button>
+    <select v-model="severityFilter" @change="load(1)">
+      <option value="">Все severity</option>
+      <option>info</option>
+      <option>warning</option>
+      <option>high</option>
+      <option>critical</option>
+    </select>
+    <input v-model="hostnameFilter" placeholder="hostname" @keyup.enter="load(1)" />
+    <button type="button" @click="load(1)">Применить</button>
   </div>
   <p v-if="error" class="error">{{ error }}</p>
   <p v-else-if="loading">Загрузка…</p>
@@ -28,13 +36,17 @@
       </thead>
       <tbody>
         <tr v-for="p in data?.items ?? []" :key="p.id">
-          <td>{{ p.id }}</td>
+          <td>
+            <RouterLink :to="`/problems/${p.id}`">{{ p.id }}</RouterLink>
+          </td>
           <td>{{ formatDt(p.updated_at) }}</td>
           <td>{{ p.hostname ?? "—" }}</td>
           <td :class="'sev-' + p.severity">{{ p.severity }}</td>
           <td :class="'status-' + p.status">{{ p.status }}</td>
           <td><code>{{ p.rule_id ?? "—" }}</code></td>
-          <td>{{ p.title }}</td>
+          <td>
+            <RouterLink :to="`/problems/${p.id}`">{{ p.title }}</RouterLink>
+          </td>
           <td class="actions">
             <button
               v-if="p.status === 'open'"
@@ -73,15 +85,20 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import { ackProblem, apiFetch, resolveProblem, type ProblemListResponse } from "../api";
 
+const route = useRoute();
+
 const data = ref<ProblemListResponse | null>(null);
 const loading = ref(false);
 const error = ref("");
 const page = ref(1);
 const pageSize = 50;
 const statusFilter = ref("");
+const severityFilter = ref("");
+const hostnameFilter = ref("");
 const actingId = ref<number | null>(null);
 
 function formatDt(iso: string) {
@@ -98,6 +115,8 @@ async function load(p: number) {
       page_size: String(pageSize),
     });
     if (statusFilter.value) params.set("status", statusFilter.value);
+    if (severityFilter.value) params.set("severity", severityFilter.value);
+    if (hostnameFilter.value.trim()) params.set("hostname", hostnameFilter.value.trim());
     data.value = await apiFetch<ProblemListResponse>(`/api/v1/problems?${params}`);
   } catch (e) {
     error.value = e instanceof Error ? e.message : "Ошибка загрузки";
@@ -132,5 +151,23 @@ async function doResolve(id: number) {
   }
 }
 
-onMounted(() => load(1));
+onMounted(() => {
+  const status = route.query.status;
+  if (typeof status === "string" && status) statusFilter.value = status;
+  const severity = route.query.severity;
+  if (typeof severity === "string" && severity) severityFilter.value = severity;
+  const hostname = route.query.hostname;
+  if (typeof hostname === "string" && hostname) hostnameFilter.value = hostname;
+  load(1);
+});
+
+watch(
+  () => [route.query.status, route.query.severity, route.query.hostname] as const,
+  ([status, severity, hostname]) => {
+    if (typeof status === "string") statusFilter.value = status;
+    if (typeof severity === "string") severityFilter.value = severity;
+    if (typeof hostname === "string") hostnameFilter.value = hostname;
+    load(1);
+  }
+);
 </script>