diff --git a/README.md b/README.md
index 45dbe11..5d4ce9e 100644
--- a/README.md
+++ b/README.md
@@ -259,6 +259,9 @@
 - `GET /api/v1/shares/{id}/samples?since=…` — история заполнения хранилища
 - `GET/POST/PATCH/DELETE /api/v1/services[/{id}]` — health-чеки сервисов (CRUD)
 - `GET /api/v1/services/{id}/samples?since=…` — история проб
+- `GET /api/v1/services/{id}/incidents?limit=50` — журнал моментов
+  недоступности (периоды down+degraded из истории проб; у идущего периода
+  `end=null`)
 - `GET/PATCH /api/v1/me` — профиль + язык (GET), override языка (PATCH; только
   cookie-сессия — у Bearer-админа нет личности)
 
@@ -281,6 +284,15 @@
 чипами в карточке). Сырое тело не хранится; известные поля берутся по белому
 списку.
 
+Общий график «все сервисы» в списке не показывается (масштабы latency не
+сравнимы). У каждого сервиса своя страница (`/services/{id}`): персональный
+график времени отклика с периодами 1h/6h/24h/7d (down-точки — разрыв линии),
+журнал моментов недоступности — периоды бездействия `down` + `degraded`
+по истории проб со «сворачиванием» подряд идущих не-up точек (worst-состояние
+в периоде, код/причина из первой точки; идущий период — метка
+«продолжается»). Там же — редактирование (имя/URL; смена URL даёт
+немедленный повторный замер) и удаление сервиса.
+
 ## Язык интерфейса
 
 Три языка: en, uk, ru. По умолчанию панель следует языку аккаунта gnexus-auth
diff --git a/panel/backend/app/api/services.py b/panel/backend/app/api/services.py
index dea3e0f..7b78c9f 100644
--- a/panel/backend/app/api/services.py
+++ b/panel/backend/app/api/services.py
@@ -118,6 +118,61 @@
     return dict(await cursor.fetchone()) | ({"probe": probe} if probe else {})
 
 
+@router.get("/services/{service_id}/incidents")
+async def service_incidents(
+    service_id: int,
+    limit: int = Query(default=50, ge=1, le=500),
+) -> list[dict]:
+    """Журнал моментов недоступности.
+
+    Период = последовательные не-up пробы (down|degraded); закрывается первой
+    up-пробой. worst = худшее состояние в периоде (down > degraded); причина —
+    code/message первой точки периода. end NULL = идёт сейчас.
+    """
+    db = get_db()
+    cursor = await db.execute("SELECT 1 FROM services WHERE id = ?", (service_id,))
+    if not await cursor.fetchone():
+        raise HTTPException(status_code=404, detail="service not found")
+    cursor = await db.execute(
+        "SELECT ts, state, code, message FROM service_samples WHERE service_id = ?"
+        " ORDER BY ts ASC",
+        (service_id,),
+    )
+    rows = await cursor.fetchall()
+    now_s = datetime.now(timezone.utc).timestamp()
+
+    def duration(start: str, end: str) -> float:
+        span = (datetime.fromisoformat(end) - datetime.fromisoformat(start)).total_seconds()
+        return max(0.0, round(span, 1))
+
+    open_period = None
+    incidents: list[dict] = []
+    for row in rows:
+        if row["state"] == "up":
+            if open_period is not None:
+                open_period["end"] = row["ts"]
+                open_period["duration_s"] = duration(open_period["start"], row["ts"])
+                incidents.append(open_period)
+                open_period = None
+        elif open_period is None:
+            open_period = {
+                "start": row["ts"],
+                "end": None,
+                "duration_s": None,
+                "worst": row["state"],  # начало периода: что случилось
+                "code": row["code"],
+                "message": row["message"],
+            }
+        elif row["state"] == "down" and open_period["worst"] != "down":
+            open_period["worst"] = "down"  # деградация могла углубиться до down
+    if open_period is not None:  # продолжается сейчас
+        open_period["duration_s"] = round(
+            max(0.0, now_s - datetime.fromisoformat(open_period["start"]).timestamp()), 1
+        )
+        incidents.append(open_period)
+    return list(reversed(incidents))[:limit]
+
+
 @router.delete("/services/{service_id}", status_code=204)
 async def delete_service(service_id: int) -> None:
     db = get_db()
diff --git a/panel/frontend/src/api.js b/panel/frontend/src/api.js
index a7f8902..0ff2c72 100644
--- a/panel/frontend/src/api.js
+++ b/panel/frontend/src/api.js
@@ -80,6 +80,8 @@
     params.set('limit', String(limit))
     return request(`/services/${id}/samples?${params}`)
   },
+  serviceIncidents: (id, limit = 50) =>
+    request(`/services/${id}/incidents?limit=${limit}`),
   // OAuth не под /api/v1 — служебные пути панели
   logout: async () => {
     return fetch('/auth/logout', { method: 'POST' })
diff --git a/panel/frontend/src/i18n/messages/en.js b/panel/frontend/src/i18n/messages/en.js
index 196abd9..556fb7b 100644
--- a/panel/frontend/src/i18n/messages/en.js
+++ b/panel/frontend/src/i18n/messages/en.js
@@ -132,9 +132,26 @@
   "services.serviceAdded": "Service added",
   "services.historyFailed": "Service history failed to load",
   "services.serviceDeleted": "Service deleted",
+  "services.serviceUpdated": "Service updated",
   "services.deleteTitle": "Delete service?",
   "services.deleteMessage": "\"{name}\" will be removed from health monitoring. The service itself is not touched.",
-  "services.historyTitle": "Response time over 24 h, ms",
+  "services.back": "Back to list",
+  "services.notFound": "Service not found",
+  "services.notFoundText": "It may have been removed from monitoring",
+  "services.edit": "Edit",
+  "services.editTitle": "Edit service",
+  "services.chartTitle": "Response time, ms",
+  "services.logTitle": "Downtime incidents",
+  "services.colStart": "Start",
+  "services.colDuration": "Duration",
+  "services.colWhat": "What",
+  "services.colReason": "Reason",
+  "services.ongoing": "ongoing",
+  "services.noIncidents": "No downtime incidents recorded",
+  "services.durD": "d",
+  "services.durH": "h",
+  "services.durM": "min",
+  "services.durS": "s",
 
   // settings
   "settings.title": "Settings",
diff --git a/panel/frontend/src/i18n/messages/ru.js b/panel/frontend/src/i18n/messages/ru.js
index ce33e7d..ce941ac 100644
--- a/panel/frontend/src/i18n/messages/ru.js
+++ b/panel/frontend/src/i18n/messages/ru.js
@@ -131,9 +131,26 @@
   "services.serviceAdded": "Сервис добавлен",
   "services.historyFailed": "Не удалось загрузить историю сервисов",
   "services.serviceDeleted": "Сервис удалён",
+  "services.serviceUpdated": "Сервис обновлён",
   "services.deleteTitle": "Удалить сервис?",
   "services.deleteMessage": "«{name}» будет убран из health-мониторинга. Сам сервис не затрагивается.",
-  "services.historyTitle": "Время отклика за 24 ч, ms",
+  "services.back": "К списку",
+  "services.notFound": "Сервис не найден",
+  "services.notFoundText": "Возможно, он был убран из мониторинга",
+  "services.edit": "Редактировать",
+  "services.editTitle": "Редактировать сервис",
+  "services.chartTitle": "Время отклика, ms",
+  "services.logTitle": "Моменты недоступности",
+  "services.colStart": "Начало",
+  "services.colDuration": "Длительность",
+  "services.colWhat": "Что",
+  "services.colReason": "Причина",
+  "services.ongoing": "продолжается",
+  "services.noIncidents": "Недоступности не зафиксировано",
+  "services.durD": "д",
+  "services.durH": "ч",
+  "services.durM": "мин",
+  "services.durS": "с",
 
   // settings
   "settings.title": "Настройки",
diff --git a/panel/frontend/src/i18n/messages/uk.js b/panel/frontend/src/i18n/messages/uk.js
index 0f8f01c..bb447a5 100644
--- a/panel/frontend/src/i18n/messages/uk.js
+++ b/panel/frontend/src/i18n/messages/uk.js
@@ -131,9 +131,26 @@
   "services.serviceAdded": "Сервіс додано",
   "services.historyFailed": "Не вдалося завантажити історію сервісів",
   "services.serviceDeleted": "Сервіс видалено",
+  "services.serviceUpdated": "Сервіс оновлено",
   "services.deleteTitle": "Видалити сервіс?",
   "services.deleteMessage": "«{name}» буде прибрано з health-моніторингу. Сам сервіс не зачіпається.",
-  "services.historyTitle": "Час відгуку за 24 год, ms",
+  "services.back": "До списку",
+  "services.notFound": "Сервіс не знайдено",
+  "services.notFoundText": "Можливо, його прибрали з моніторингу",
+  "services.edit": "Редагувати",
+  "services.editTitle": "Редагувати сервіс",
+  "services.chartTitle": "Час відгуку, ms",
+  "services.logTitle": "Моменти недоступності",
+  "services.colStart": "Початок",
+  "services.colDuration": "Тривалість",
+  "services.colWhat": "Що",
+  "services.colReason": "Причина",
+  "services.ongoing": "триває",
+  "services.noIncidents": "Недоступності не зафіксовано",
+  "services.durD": "д",
+  "services.durH": "год",
+  "services.durM": "хв",
+  "services.durS": "с",
 
   // settings
   "settings.title": "Налаштування",
diff --git a/panel/frontend/src/pages/ServicePage.vue b/panel/frontend/src/pages/ServicePage.vue
new file mode 100644
index 0000000..665f898
--- /dev/null
+++ b/panel/frontend/src/pages/ServicePage.vue
@@ -0,0 +1,357 @@
+<script setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  GnBadge, GnButton, GnCard, GnConfirmDialog, GnEmptyState, GnIconButton,
+  GnInput, GnModal, GnPageHeader, GnSkeleton, GnTable,
+} from 'gnexus-ui-kit/vue'
+import { useToast } from 'gnexus-ui-kit/vue'
+
+import { api } from '../api.js'
+import ChartLine from '../components/ChartLine.vue'
+import { fmtAgo, fmtUptime } from '../format.js'
+import { t } from '../i18n/index.js'
+
+const props = defineProps({ id: { type: String, required: true } })
+const router = useRouter()
+const toast = useToast()
+
+const service = ref(null)
+const samples = ref([])
+const incidents = ref([])
+const loading = ref(true)
+
+// --- Период графика + поллинг (пробер пишет раз в GHARD_HEALTH_INTERVAL) -----
+
+const PERIODS = [
+  { id: '1h', label: '1 h', hours: 1 },
+  { id: '6h', label: '6 h', hours: 6 },
+  { id: '24h', label: '24 h', hours: 24 },
+  { id: '7d', label: '7 d', hours: 24 * 7 },
+]
+const period = ref('24h')
+const periodHours = computed(() => PERIODS.find((p) => p.id === period.value).hours)
+
+let serviceTimer = null
+let samplesTimer = null
+
+async function loadService() {
+  try {
+    // состав страницы: карточка сервиса есть в общем списке
+    const all = await api.services()
+    service.value = all.find((s) => String(s.id) === String(props.id)) || null
+  } catch (e) {
+    if (e.status !== 401) service.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadSamples() {
+  try {
+    const since = new Date(Date.now() - periodHours.value * 3600 * 1000)
+    samples.value = await api.serviceSamples(props.id, since, 5000)
+  } catch (e) {
+    if (e.status !== 401) toast.warning({ title: t('services.historyFailed'), text: e.message })
+  }
+}
+
+async function loadIncidents() {
+  try {
+    incidents.value = await api.serviceIncidents(props.id)
+  } catch (e) {
+    if (e.status !== 401) toast.warning({ title: t('services.historyFailed'), text: e.message })
+  }
+}
+
+function startTimers() {
+  stopTimers()
+  loadService()
+  loadSamples()
+  loadIncidents()
+  serviceTimer = setInterval(loadService, 15000)
+  samplesTimer = setInterval(() => { loadSamples(); loadIncidents() }, 60000)
+}
+
+function stopTimers() {
+  clearInterval(serviceTimer)
+  clearInterval(samplesTimer)
+}
+
+watch(() => props.id, startTimers, { immediate: true })
+watch(period, loadSamples)
+onUnmounted(stopTimers)
+
+// --- График latency -----------------------------------------------------------
+
+function timeLabel(iso) {
+  const d = new Date(iso)
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  if (periodHours.value >= 24) {
+    const dd = String(d.getDate()).padStart(2, '0')
+    const mo = String(d.getMonth() + 1).padStart(2, '0')
+    return `${dd}.${mo} ${hh}:${mm}`
+  }
+  return `${hh}:${mm}`
+}
+
+const chartLabels = computed(() => samples.value.map((p) => timeLabel(p.ts)))
+const chartDatasets = computed(() => [
+  { label: t('services.latency', { n: '' }).trim(), data: samples.value.map((p) => (p.state === 'up' ? p.latency_ms : null)) },
+])
+
+// --- Состояние / самосвидетельство -------------------------------------------
+
+const stateVariant = (status) =>
+  status === 'up' ? 'success'
+    : status === 'degraded' ? 'warning'
+    : status === 'down' ? 'danger'
+    : 'warning'
+
+const stateText = (status) => ({
+  up: t('services.stateUp'),
+  degraded: t('services.stateDegraded'),
+  down: t('services.stateDown'),
+}[status] || t('services.statePending'))
+
+const modeText = (mode) => ({
+  maintenance: t('services.modeMaintenance'),
+  readonly: t('services.modeReadonly'),
+  draining: t('services.modeDraining'),
+}[mode] || mode)
+
+// --- Журнал недоступности ------------------------------------------------------
+
+const incidentColumns = computed(() => [
+  { key: 'start', label: t('services.colStart') },
+  { key: 'duration', label: t('services.colDuration') },
+  { key: 'what', label: t('services.colWhat') },
+  { key: 'reason', label: t('services.colReason') },
+])
+
+const incidentRows = computed(() =>
+  incidents.value.map((inc, i) => ({
+    id: i,
+    start: fmtDateTime(inc.start),
+    duration: inc.end === null ? null : fmtDurationShort(inc.duration_s),
+    what: inc.worst,
+    reason: reasonText(inc),
+    ongoing: inc.end === null,
+  })),
+)
+
+function fmtDateTime(iso) {
+  const d = new Date(iso)
+  const dd = String(d.getDate()).padStart(2, '0')
+  const mo = String(d.getMonth() + 1).padStart(2, '0')
+  return `${dd}.${mo} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+}
+
+function fmtDurationShort(seconds) {
+  const s = Math.round(seconds)
+  const days = Math.floor(s / 86400)
+  const hours = Math.floor((s % 86400) / 3600)
+  const mins = Math.ceil((s % 3600) / 60)
+  if (days) return `${days} ${t('services.durD')} ${hours} ${t('services.durH')}`
+  if (hours) return `${hours} ${t('services.durH')} ${mins} ${t('services.durM')}`
+  return `${s} ${t('services.durS')}`
+}
+
+function reasonText(inc) {
+  if (inc.message && inc.code != null) return `http ${inc.code} · ${inc.message}`
+  if (inc.message) return inc.message
+  return '—'
+}
+
+// --- Редактирование / удаление --------------------------------------------------
+
+const editOpen = ref(false)
+const editName = ref('')
+const editUrl = ref('')
+const editSaving = ref(false)
+
+function openEdit() {
+  editName.value = service.value.name
+  editUrl.value = service.value.url
+  editOpen.value = true
+}
+
+async function save() {
+  if (!editName.value.trim() || !editUrl.value.trim() || editSaving.value) return
+  editSaving.value = true
+  try {
+    await api.updateService(props.id, { name: editName.value.trim(), url: editUrl.value.trim() })
+    editOpen.value = false
+    await loadService()
+    loadIncidents() // PATCH url даёт новый замер — период мог открыться/закрыться
+    toast.success({ title: t('services.serviceUpdated') })
+  } catch (e) {
+    toast.danger({ title: t('server.failedToSave'), text: e.message })
+  } finally {
+    editSaving.value = false
+  }
+}
+
+const deleteOpen = ref(false)
+
+async function removeService() {
+  try {
+    await api.deleteService(props.id)
+    toast.success({ title: t('services.serviceDeleted') })
+    router.push('/services')
+  } catch (e) {
+    toast.danger({ title: t('server.failedToDelete'), text: e.message })
+  }
+}
+</script>
+
+<template>
+  <div class="back-row">
+    <GnIconButton icon="ph-arrow-left" :label="t('services.back')" size="sm" @click="router.push('/services')" />
+  </div>
+
+  <div v-if="loading">
+    <GnSkeleton type="card" :count="3" />
+  </div>
+
+  <GnEmptyState
+    v-else-if="!service"
+    :title="t('services.notFound')"
+    :text="t('services.notFoundText')"
+    icon="ph-heartbeat"
+  >
+    <template #actions>
+      <GnButton variant="secondary" @click="router.push('/services')">{{ t('services.back') }}</GnButton>
+    </template>
+  </GnEmptyState>
+
+  <template v-else>
+    <GnPageHeader :title="service.name" :subtitle="service.url" kicker="GHard Monitor">
+      <template #meta>
+        <GnBadge :variant="stateVariant(service.status)">{{ stateText(service.status) }}</GnBadge>
+        <GnBadge v-if="service.report?.mode" variant="secondary">
+          {{ modeText(service.report.mode) }}
+        </GnBadge>
+      </template>
+      <template #actions>
+        <GnButton variant="primary" icon="ph-pencil-simple" @click="openEdit">{{ t('services.edit') }}</GnButton>
+        <GnButton variant="danger" icon="ph-trash" @click="deleteOpen = true">{{ t('common.delete') }}</GnButton>
+      </template>
+    </GnPageHeader>
+
+    <!-- Самосвидетельство + замер -->
+    <div class="meta-row" v-if="service.report?.version || service.report?.gauges || service.latency_ms != null">
+      <span v-if="service.report?.version">v{{ service.report.version }}</span>
+      <span v-if="service.report?.environment">{{ service.report.environment }}</span>
+      <span v-if="service.report?.uptime !== undefined">
+        {{ t('server.uptime', { value: fmtUptime(service.report.uptime) }) }}
+      </span>
+      <span v-for="g in Object.entries(service.report?.gauges || {})" :key="g[0]" class="gauge">
+        {{ g[0] }}: {{ g[1] }}
+      </span>
+      <span v-if="service.latency_ms != null">{{ t('services.latency', { n: service.latency_ms }) }}</span>
+      <span v-if="service.last_sample">{{ t('storage.sampledAt', { time: fmtDateTime(service.last_sample) }) }}</span>
+    </div>
+
+    <!-- Персональный график -->
+    <GnCard :title="t('services.chartTitle')" class="chart-card">
+      <div class="period-row">
+        <GnButton
+          v-for="p in PERIODS"
+          :key="p.id"
+          size="sm"
+          :variant="period === p.id ? 'secondary' : 'primary'"
+          @click="period = p.id"
+        >
+          {{ p.label }}
+        </GnButton>
+      </div>
+      <ChartLine :labels="chartLabels" :datasets="chartDatasets" y-unit=" ms" />
+    </GnCard>
+
+    <!-- Журнал моментов недоступности -->
+    <GnCard :title="t('services.logTitle')" class="log-card">
+      <GnTable :columns="incidentColumns" :rows="incidentRows" :empty-text="t('services.noIncidents')">
+        <template #cell-duration="{ row }">
+          <span v-if="row.ongoing" class="ongoing">{{ t('services.ongoing') }}</span>
+          <template v-else>{{ row.duration }}</template>
+        </template>
+        <template #cell-what="{ value }">
+          <GnBadge :variant="value === 'down' ? 'danger' : 'warning'">{{ stateText(value) }}</GnBadge>
+        </template>
+      </GnTable>
+    </GnCard>
+
+    <!-- Редактирование -->
+    <GnModal v-model:open="editOpen" :title="t('services.editTitle')">
+      <GnInput v-model="editName" :label="t('services.name')" icon="ph-gear" />
+      <GnInput v-model="editUrl" :label="t('services.url')" icon="ph-globe" />
+      <p class="input-info">{{ t('services.urlHint') }}</p>
+      <template #actions="{ close }">
+        <GnButton variant="primary" @click="close">{{ t('common.cancel') }}</GnButton>
+        <GnButton
+          variant="secondary"
+          :loading="editSaving"
+          :disabled="!editName.trim() || !editUrl.trim()"
+          @click="save"
+        >
+          {{ t('common.save') }}
+        </GnButton>
+      </template>
+    </GnModal>
+
+    <!-- Удаление -->
+    <GnConfirmDialog
+      v-model:open="deleteOpen"
+      :title="t('services.deleteTitle')"
+      :message="t('services.deleteMessage', { name: service.name })"
+      :confirm-text="t('common.delete')"
+      :cancel-text="t('common.cancel')"
+      confirm-variant="danger"
+      @confirm="removeService"
+    />
+  </template>
+</template>
+
+<style scoped>
+.back-row {
+  margin-bottom: 16px;
+}
+.meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  font-size: 13px;
+  opacity: 0.8;
+  margin-top: 16px;
+}
+.gauge {
+  font-family: 'JetBrains Mono', monospace;
+}
+.chart-card {
+  margin-top: 20px;
+  max-width: none;
+  width: 100%;
+}
+.period-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.log-card {
+  margin-top: 20px;
+  max-width: none;
+  width: 100%;
+}
+.ongoing {
+  color: var(--gn-danger, #e05252);
+  font-weight: 600;
+}
+.input-info {
+  opacity: 0.6;
+  font-size: 13px;
+  margin-top: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/panel/frontend/src/pages/ServicesPage.vue b/panel/frontend/src/pages/ServicesPage.vue
index b173adb..59d07d5 100644
--- a/panel/frontend/src/pages/ServicesPage.vue
+++ b/panel/frontend/src/pages/ServicesPage.vue
@@ -1,32 +1,29 @@
 <script setup>
-import { computed, onUnmounted, ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import {
-  GnBadge, GnButton, GnCard, GnConfirmDialog, GnEmptyState, GnInput,
+  GnBadge, GnButton, GnCard, GnEmptyState, GnInput,
   GnModal, GnPageHeader, GnSkeleton,
 } from 'gnexus-ui-kit/vue'
 import { useToast } from 'gnexus-ui-kit/vue'
 
 import { api } from '../api.js'
-import ChartLine from '../components/ChartLine.vue'
-import { CHART_COLORS } from '../chartTheme.js'
 import { fmtUptime } from '../format.js'
 import { t } from '../i18n/index.js'
 
 const toast = useToast()
+const router = useRouter()
 
 const services = ref([])
-const samples = ref({}) // service_id -> [{ts, latency_ms, state}]
 const loading = ref(true)
 
 // --- Загрузка + поллинг (пробер пишет точки раз в GHARD_HEALTH_INTERVAL) ----
 
 let pollTimer = null
-const HISTORY_HOURS = 24
 
 async function load() {
   try {
     services.value = await api.services()
-    await Promise.all(services.value.map((sv) => loadSamples(sv.id)))
     loading.value = false
   } catch (e) {
     toast.danger({ title: t('common.failedToLoad'), text: e.message })
@@ -34,16 +31,6 @@
   }
 }
 
-async function loadSamples(serviceId) {
-  try {
-    const since = new Date(Date.now() - HISTORY_HOURS * 3600 * 1000)
-    const raw = await api.serviceSamples(serviceId, since, 2880)
-    samples.value = { ...samples.value, [serviceId]: raw }
-  } catch (e) {
-    if (e.status !== 401) toast.warning({ title: t('services.historyFailed'), text: e.message })
-  }
-}
-
 load()
 pollTimer = setInterval(load, 30000)
 onUnmounted(() => clearInterval(pollTimer))
@@ -77,30 +64,7 @@
 const hasIdentity = (report) =>
   report && (report.version || report.environment || report.uptime !== undefined)
 
-// --- График: датасет на сервис; down/ошибки — null (разрыв линии) ------------
-
-const chartDatasets = computed(() =>
-  services.value.map((sv, i) => ({
-    label: sv.name,
-    data: (samples.value[sv.id] || []).map((p) => (p.state === 'up' ? p.latency_ms : null)),
-    color: CHART_COLORS[i % CHART_COLORS.length],
-  })),
-)
-
-const chartLabels = computed(() => {
-  const longest = services.value.reduce(
-    (acc, sv) => ((samples.value[sv.id] || []).length > acc.length ? samples.value[sv.id] || [] : acc),
-    [],
-  )
-  return longest.map((p) => {
-    const d = new Date(p.ts)
-    const dd = String(d.getDate()).padStart(2, '0')
-    const mo = String(d.getMonth() + 1).padStart(2, '0')
-    return `${dd}.${mo} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
-  })
-})
-
-// --- Добавление / удаление ---------------------------------------------------
+// --- Добавление --------------------------------------------------------------
 
 const addOpen = ref(false)
 const newName = ref('')
@@ -127,26 +91,6 @@
     creating.value = false
   }
 }
-
-const deleteOpen = ref(false)
-const deleteTarget = ref(null)
-
-function openDelete(service) {
-  deleteTarget.value = service
-  deleteOpen.value = true
-}
-
-async function removeService() {
-  try {
-    await api.deleteService(deleteTarget.value.id)
-    toast.success({ title: t('services.serviceDeleted') })
-    await load()
-  } catch (e) {
-    toast.danger({ title: t('server.failedToDelete'), text: e.message })
-  } finally {
-    deleteOpen.value = false
-  }
-}
 </script>
 
 <template>
@@ -218,15 +162,13 @@
                 ? t('storage.sampledAt', { time: new Date(service.last_sample).toLocaleTimeString() })
                 : t('storage.notSampled')
             }}</span>
-            <GnButton size="sm" variant="danger" icon="ph-trash" @click="openDelete(service)">{{ t('common.delete') }}</GnButton>
+            <GnButton size="sm" variant="secondary" icon="ph-arrow-right" @click="router.push('/services/' + service.id)">
+              {{ t('server.open') }}
+            </GnButton>
           </div>
         </template>
       </GnCard>
     </div>
-
-    <GnCard :title="t('services.historyTitle')" class="history-card">
-      <ChartLine :labels="chartLabels" :datasets="chartDatasets" y-unit=" ms" />
-    </GnCard>
   </template>
 
   <!-- Добавление -->
@@ -246,17 +188,6 @@
       </GnButton>
     </template>
   </GnModal>
-
-  <!-- Удаление -->
-  <GnConfirmDialog
-    v-model:open="deleteOpen"
-    :title="t('services.deleteTitle')"
-    :message="t('services.deleteMessage', { name: deleteTarget?.name })"
-    :confirm-text="t('common.delete')"
-    :cancel-text="t('common.cancel')"
-    confirm-variant="danger"
-    @confirm="removeService"
-  />
 </template>
 
 <style scoped>
@@ -336,9 +267,4 @@
   opacity: 0.6;
   font-size: 13px;
 }
-.history-card {
-  max-width: none;
-  width: 100%;
-  margin-top: 24px;
-}
 </style>
\ No newline at end of file
diff --git a/panel/frontend/src/router.js b/panel/frontend/src/router.js
index 8b2cb4d..245511a 100644
--- a/panel/frontend/src/router.js
+++ b/panel/frontend/src/router.js
@@ -19,6 +19,12 @@
       component: () => import('./pages/ServicesPage.vue'),
     },
     {
+      path: '/services/:id',
+      name: 'service',
+      component: () => import('./pages/ServicePage.vue'),
+      props: true,
+    },
+    {
       path: '/settings',
       name: 'settings',
       component: () => import('./pages/SettingsPage.vue'),