diff --git a/frontend/e2e/qemu/clusters.spec.ts b/frontend/e2e/qemu/clusters.spec.ts
index 9697329a9..3985be3eb 100644
--- a/frontend/e2e/qemu/clusters.spec.ts
+++ b/frontend/e2e/qemu/clusters.spec.ts
@@ -354,7 +354,7 @@ test('node overview tabs', async ({ page }) => {
   })
 
   await test.step('Validate console logs tab', async () => {
-    await page.getByRole('tab', { name: 'Console Logs', exact: true }).click()
+    await page.getByRole('tab', { name: 'Logs', exact: true }).click()
 
     await page.getByPlaceholder('Search').fill('[talos] [initramfs] booting Talos')
     await expect
diff --git a/frontend/eslint-suppressions.json b/frontend/eslint-suppressions.json
index a57a2183b..bc378e4b8 100644
--- a/frontend/eslint-suppressions.json
+++ b/frontend/eslint-suppressions.json
@@ -108,11 +108,6 @@
       "count": 1
     }
   },
-  "src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[service].vue": {
-    "vue/no-ref-object-reactivity-loss": {
-      "count": 1
-    }
-  },
   "src/views/ClusterMachines/MachineRequest.vue": {
     "vue/define-props-destructuring": {
       "count": 1
diff --git a/frontend/src/api/options.ts b/frontend/src/api/options.ts
index f4d9c9222..c43ec5b14 100644
--- a/frontend/src/api/options.ts
+++ b/frontend/src/api/options.ts
@@ -2,8 +2,6 @@
 //
 // Use of this software is governed by the Business Source License
 // included in the LICENSE file.
-
-import { clusterName } from '@/context'
 import type { OmniRequestOptions } from '@/methods/interceptor'
 
 import { Runtime } from './common/omni.pb'
@@ -56,11 +54,6 @@ export const withContext = (context: WatchContext) => {
 
     if (context.cluster) {
       md.cluster = context.cluster
-    } else {
-      const currentContext = clusterName()
-      if (currentContext) {
-        md.cluster = md.cluster || currentContext
-      }
     }
 
     if (context.node) {
diff --git a/frontend/src/components/TInput/TInput.vue b/frontend/src/components/TInput/TInput.vue
index e97b4b541..a428ff3d6 100644
--- a/frontend/src/components/TInput/TInput.vue
+++ b/frontend/src/components/TInput/TInput.vue
@@ -97,7 +97,7 @@ onMounted(() => focus && inputRef.value?.focus())
     <div
       class="flex max-h-full items-center justify-start gap-x-2 gap-y-3 rounded border transition-colors focus-within:border-naturals-n5 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:border-naturals-n6 has-disabled:bg-naturals-n3 has-disabled:text-naturals-n9 has-disabled:select-none"
       :class="[
-        compact ? 'px-2 py-1' : 'p-2',
+        compact ? 'px-2 py-1' : 'px-2 py-2.25',
         secondary ? 'border-transparent' : 'border-naturals-n8',
       ]"
     >
diff --git a/frontend/src/context.ts b/frontend/src/context.ts
index d275252eb..b8cb3cc78 100644
--- a/frontend/src/context.ts
+++ b/frontend/src/context.ts
@@ -10,6 +10,9 @@ import type { WatchContext } from '@/api/watch'
 
 export const current = useLocalStorage<string>('context', null)
 
+/**
+ * @deprecated Pass context in explicitly instead of using this function. It relies on routing & local storage and can be flimsy.
+ */
 export function getContext(route = useRoute()): WatchContext {
   const cluster = clusterName(route)
 
@@ -25,7 +28,7 @@ export function getContext(route = useRoute()): WatchContext {
   return res
 }
 
-export function clusterName(route = useRoute()) {
+function clusterName(route: ReturnType<typeof useRoute>) {
   if ('cluster' in route.params) {
     return route.params.cluster
   }
diff --git a/frontend/src/methods/logs.ts b/frontend/src/methods/logs.ts
index e4150e242..f62ed1a9c 100644
--- a/frontend/src/methods/logs.ts
+++ b/frontend/src/methods/logs.ts
@@ -79,8 +79,8 @@ export class LineDelimitedLogParser {
 export const setupLogStream = <R extends Data, T>(
   logs: Ref<LogLine[]>,
   method: StreamingRequest<R, T>,
-  params: MaybeRefOrGetter<T | undefined>,
-  logParser: LogParser = new DefaultLogParser((msg) => ({ msg })),
+  params: MaybeRefOrGetter<T>,
+  logParser: MaybeRefOrGetter<LogParser> = new DefaultLogParser((msg) => ({ msg })),
   ...options: fetchOption[]
 ) => {
   let clearLogs = false
@@ -89,19 +89,13 @@ export const setupLogStream = <R extends Data, T>(
 
   const reset = () => {
     logs.value = []
-    logParser.reset()
+    toValue(logParser).reset()
     clearTimeout(flush)
   }
 
-  const p = toValue(params)
-
-  if (!p) {
-    return
-  }
-
   const stream = subscribe(
     method,
-    p,
+    toValue(params),
     (resp: Data & { error?: string }) => {
       clearTimeout(flush)
 
@@ -118,7 +112,7 @@ export const setupLogStream = <R extends Data, T>(
         const line = window.atob(resp.bytes.toString())
 
         try {
-          buffer.push(...logParser.parse(line))
+          buffer.push(...toValue(logParser).parse(line))
         } catch (e) {
           console.error(`failed to parse line ${line}`, e)
         }
@@ -134,7 +128,7 @@ export const setupLogStream = <R extends Data, T>(
   )
 
   return {
-    ...stream,
+    stream,
     shutdown() {
       reset()
       stream.shutdown()
diff --git a/frontend/src/methods/useMachineServices.ts b/frontend/src/methods/useMachineServices.ts
new file mode 100644
index 000000000..f6c1a929b
--- /dev/null
+++ b/frontend/src/methods/useMachineServices.ts
@@ -0,0 +1,73 @@
+// Copyright (c) 2026 Sidero Labs, Inc.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+import { type MaybeRefOrGetter, ref, toValue, watchEffect } from 'vue'
+
+import { Runtime } from '@/api/common/omni.pb'
+import { subscribe } from '@/api/grpc'
+import { withAbortController, withContext, withRuntime } from '@/api/options'
+import { MachineService, type ServiceEvent } from '@/api/talos/machine/machine.pb'
+import type { WatchContext } from '@/api/watch'
+import { TCommonStatuses } from '@/constants'
+
+interface Service {
+  name?: string
+  state?: string
+  status: TCommonStatuses
+  events?: ServiceEvent[]
+}
+
+export function useMachineServices(context: MaybeRefOrGetter<WatchContext>) {
+  const services = ref<Service[]>([])
+  const serviceListVersion = ref(0)
+
+  watchEffect(async (onCleanup) => {
+    // To track for forced updates
+    void serviceListVersion.value
+
+    const abortController = new AbortController()
+    onCleanup(() => abortController.abort())
+
+    const { messages = [] } = await MachineService.ServiceList(
+      {},
+      withRuntime(Runtime.Talos),
+      withContext(toValue(context)),
+      withAbortController(abortController),
+    )
+
+    services.value = messages.flatMap(({ services = [] }) =>
+      services.map((service) => ({
+        name: service.id,
+        state: service.state,
+        status: service.health?.unknown
+          ? TCommonStatuses.HEALTH_UNKNOWN
+          : service.health?.healthy
+            ? TCommonStatuses.HEALTHY
+            : TCommonStatuses.UNHEALTHY,
+        events: service.events?.events,
+      })),
+    )
+  })
+
+  watchEffect((onCleanup) => {
+    const stream = subscribe(
+      MachineService.Events,
+      {},
+      (event) => {
+        // For some reason @type is not typed on Any
+        const data = event.data as (typeof event.data & { ['@type']?: string }) | undefined
+
+        if (data?.['@type']?.includes('machine.ServiceStateEvent')) {
+          // Trigger a services refetch
+          serviceListVersion.value++
+        }
+      },
+      [withRuntime(Runtime.Talos), withContext(toValue(context))],
+    )
+
+    onCleanup(() => stream.shutdown())
+  })
+
+  return { services }
+}
diff --git a/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine].vue b/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine].vue
index a62a3e3d4..d292fe8d8 100644
--- a/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine].vue
+++ b/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine].vue
@@ -32,8 +32,8 @@ const routes = computed(() => {
       to: { name: 'NodeMonitor', params: { machine: machine.value } },
     },
     {
-      name: 'Console Logs',
-      to: { name: 'NodeLogs', params: { machine: machine.value, service: 'machine' } },
+      name: 'Logs',
+      to: { name: 'NodeLogs', params: { machine: machine.value } },
     },
     {
       name: 'Config',
diff --git a/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/index.vue b/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/index.vue
index 6314781ab..8022e7f15 100644
--- a/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/index.vue
+++ b/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/index.vue
@@ -7,15 +7,13 @@ included in the LICENSE file.
 <script setup lang="ts">
 import type { NodeSpec as V1NodeSpec, NodeStatus as V1NodeStatus } from 'kubernetes-types/core/v1'
 import { DateTime } from 'luxon'
-import { computed, ref, useId, watchEffect } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { Runtime } from '@/api/common/omni.pb'
-import { subscribe } from '@/api/grpc'
 import type { MachineStatusLinkSpec } from '@/api/omni/specs/ephemeral.pb'
 import type { ClusterMachineStatusSpec } from '@/api/omni/specs/omni.pb'
 import { ConfigApplyStatus } from '@/api/omni/specs/omni.pb'
-import { withAbortController, withContext, withRuntime } from '@/api/options'
 import {
   ClusterMachineStatusType,
   DefaultNamespace,
@@ -32,8 +30,6 @@ import {
   TalosNodenameType,
   TalosRuntimeNamespace,
 } from '@/api/resources'
-import type { ServiceEvent } from '@/api/talos/machine/machine.pb'
-import { MachineService } from '@/api/talos/machine/machine.pb'
 import TGroupAnimation from '@/components/Animation/TGroupAnimation.vue'
 import TIcon from '@/components/Icon/TIcon.vue'
 import TListItem from '@/components/List/TListItem.vue'
@@ -45,6 +41,7 @@ import { TCommonStatuses } from '@/constants'
 import { getContext } from '@/context'
 import { formatBytes, getStatus } from '@/methods'
 import { addMachineLabels, removeMachineLabels } from '@/methods/machine'
+import { useMachineServices } from '@/methods/useMachineServices'
 import { useResourceWatch } from '@/methods/useResourceWatch'
 import ClusterMachinePhase from '@/views/ClusterMachines/ClusterMachinePhase.vue'
 import ItemLabels from '@/views/ItemLabels/ItemLabels.vue'
@@ -57,72 +54,7 @@ definePage({ name: 'NodeOverview' })
 const route = useRoute()
 const context = computed(() => getContext(route))
 
-const services = ref<
-  {
-    name?: string
-    state?: string
-    status: TCommonStatuses
-    events?: ServiceEvent[]
-  }[]
->([])
-
-let abortController: AbortController | undefined
-
-const fetchServices = async () => {
-  if (abortController) {
-    abortController.abort()
-  }
-
-  abortController = new AbortController()
-
-  const res = await MachineService.ServiceList(
-    {},
-    withContext(context.value),
-    withRuntime(Runtime.Talos),
-    withAbortController(abortController),
-  )
-
-  abortController = undefined
-
-  services.value = []
-
-  res.messages?.forEach((message) =>
-    message.services?.forEach((service) =>
-      services.value.push({
-        name: service.id,
-        state: service.state,
-        status: service.health?.unknown
-          ? TCommonStatuses.HEALTH_UNKNOWN
-          : service.health?.healthy
-            ? TCommonStatuses.HEALTHY
-            : TCommonStatuses.UNHEALTHY,
-        events: service.events?.events,
-      }),
-    ),
-  )
-}
-
-fetchServices()
-
-watchEffect((onCleanup) => {
-  const stream = subscribe(
-    MachineService.Events,
-    {},
-    (event) => {
-      // For some reason @type is not typed on Any
-      const data = event.data as (typeof event.data & { ['@type']?: string }) | undefined
-
-      if (data?.['@type']?.includes('machine.ServiceStateEvent')) {
-        fetchServices()
-      }
-    },
-    [withRuntime(Runtime.Talos), withContext(context.value)],
-  )
-
-  onCleanup(() => {
-    stream.shutdown()
-  })
-})
+const { services } = useMachineServices(context)
 
 const configApplyStatusToConfigApplyStatusName = (status?: ConfigApplyStatus): string => {
   switch (status) {
diff --git a/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[[service]].vue b/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[[service]].vue
new file mode 100644
index 000000000..a3cf8fd52
--- /dev/null
+++ b/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[[service]].vue
@@ -0,0 +1,23 @@
+<!--
+Copyright (c) 2026 Sidero Labs, Inc.
+
+Use of this software is governed by the Business Source License
+included in the LICENSE file.
+-->
+<script setup lang="ts">
+import PageContainer from '@/components/PageContainer/PageContainer.vue'
+import MachineLogsContainer from '@/views/Machines/MachineLogsContainer.vue'
+
+definePage({ name: 'NodeLogs' })
+</script>
+
+<template>
+  <PageContainer class="flex h-full max-h-[calc(100vh-150px)] flex-col overflow-hidden">
+    <MachineLogsContainer
+      :cluster-id="$route.params.cluster"
+      :machine-id="$route.params.machine"
+      class="flex grow flex-col"
+      :service="$route.params.service"
+    />
+  </PageContainer>
+</template>
diff --git a/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[service].vue b/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[service].vue
deleted file mode 100644
index d349a17ce..000000000
--- a/frontend/src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[service].vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<!--
-Copyright (c) 2026 Sidero Labs, Inc.
-
-Use of this software is governed by the Business Source License
-included in the LICENSE file.
--->
-<script setup lang="ts">
-import { DateTime } from 'luxon'
-import type { Ref } from 'vue'
-import { computed, ref, shallowRef, watch, watchEffect } from 'vue'
-import { useRoute } from 'vue-router'
-
-import type { Data } from '@/api/common/common.pb'
-import { Runtime } from '@/api/common/omni.pb'
-import { withContext, withRuntime } from '@/api/options'
-import type { LogsRequest } from '@/api/talos/machine/machine.pb'
-import { MachineService } from '@/api/talos/machine/machine.pb'
-import LogViewer from '@/components/LogViewer/LogViewer.vue'
-import PageContainer from '@/components/PageContainer/PageContainer.vue'
-import TAlert from '@/components/TAlert.vue'
-import TInput from '@/components/TInput/TInput.vue'
-import { getContext } from '@/context'
-import type { LogLine } from '@/methods/logs'
-import { LineDelimitedLogParser, setupLogStream } from '@/methods/logs'
-import MachineLogsContainer from '@/views/Machines/MachineLogsContainer.vue'
-
-definePage({ name: 'NodeLogs' })
-
-const route = useRoute()
-const inputValue = ref('')
-const logs: Ref<LogLine[]> = ref([])
-const context = computed(() => getContext(route))
-const service = ref(route.params.service as string)
-
-const formatLoggingContext = (logRecord: Record<string, string>, ...exceptFields: string[]) => {
-  const res: string[] = []
-
-  for (const key in logRecord) {
-    if (exceptFields.includes(key)) {
-      continue
-    }
-
-    res.push(`${key}=${logRecord[key]}`)
-  }
-
-  return res.join(' ')
-}
-
-const parsers: Record<string, (line: string) => LogLine> = {
-  containerd: (line: string): LogLine => {
-    const parsed = JSON.parse(line)
-
-    return {
-      date: parsed.time,
-      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
-    }
-  },
-  cri: (line: string): LogLine => {
-    const parsed = JSON.parse(line)
-
-    return {
-      date: parsed.time,
-      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
-    }
-  },
-  etcd: (line: string): LogLine => {
-    const parsed = JSON.parse(line)
-
-    return {
-      date: parsed.ts,
-      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
-    }
-  },
-  kubelet: (line: string): LogLine => {
-    const parsed = JSON.parse(line)
-    const date = DateTime.fromSeconds(parseFloat(parsed.ts) / 1000)
-
-    return {
-      date: date.toISO() ?? undefined,
-      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
-    }
-  },
-}
-
-const plainText = (line: string) => {
-  return {
-    msg: line,
-  }
-}
-
-const params = computed<LogsRequest | undefined>(() => {
-  if (route.params.service === 'machine') {
-    return
-  }
-
-  return {
-    namespace: 'system',
-    id: service.value,
-    follow: true,
-    tail_lines: -1,
-  }
-})
-
-const getLineParser = (svc: string) => {
-  return parsers[svc]
-    ? (line: string): LogLine => {
-        try {
-          return parsers[svc](line)
-        } catch {
-          return plainText(line)
-        }
-      }
-    : plainText
-}
-
-const logParser = new LineDelimitedLogParser(getLineParser(service.value))
-
-watch(
-  () => route.params.service,
-  () => {
-    const svc = route.params.service as string
-
-    logParser.setLineParser(getLineParser(svc))
-    service.value = svc
-  },
-)
-
-const stream = shallowRef<ReturnType<typeof setupLogStream<Data, LogsRequest>>>()
-
-watchEffect((onCleanup) => {
-  stream.value = setupLogStream(
-    logs,
-    MachineService.Logs,
-    params,
-    logParser,
-    withRuntime(Runtime.Talos),
-    withContext(context.value),
-  )
-
-  onCleanup(() => {
-    stream.value?.shutdown()
-  })
-})
-
-const err = computed(() => {
-  return stream.value?.err
-})
-</script>
-
-<template>
-  <PageContainer class="logs">
-    <MachineLogsContainer
-      v-if="$route.params.service === 'machine'"
-      :machine-id="$route.params.machine"
-      class="logs-container"
-    />
-    <div v-else class="logs-container">
-      <div class="mb-4">
-        <TInput v-model="inputValue" placeholder="Search..." icon="search" />
-      </div>
-      <TAlert
-        v-if="err"
-        :title="logs ? 'Disconnected' : 'Failed to Fetch Logs'"
-        type="error"
-        class="mb-2"
-      >
-        {{ err }}
-      </TAlert>
-      <LogViewer
-        :logs="logs"
-        :search-option="inputValue"
-        class="flex-1"
-        :without-date="!parsers[$route.params.service as string]"
-      />
-    </div>
-  </PageContainer>
-</template>
-
-<style scoped>
-@reference "../../../../../../../index.css";
-
-.logs {
-  @apply flex h-full flex-col;
-  max-height: calc(100vh - 150px);
-  overflow: hidden;
-}
-.logs-container {
-  @apply flex grow flex-col;
-}
-</style>
diff --git a/frontend/src/pages/(authenticated)/machines/[machine]/logs.vue b/frontend/src/pages/(authenticated)/machines/[machine]/logs/[[service]].vue
similarity index 75%
rename from frontend/src/pages/(authenticated)/machines/[machine]/logs.vue
rename to frontend/src/pages/(authenticated)/machines/[machine]/logs/[[service]].vue
index 7cb8ad962..74bc44c47 100644
--- a/frontend/src/pages/(authenticated)/machines/[machine]/logs.vue
+++ b/frontend/src/pages/(authenticated)/machines/[machine]/logs/[[service]].vue
@@ -13,6 +13,10 @@ definePage({ name: 'MachineLogs' })
 
 <template>
   <PageContainer>
-    <MachineLogsContainer :machine-id="$route.params.machine" class="h-full" />
+    <MachineLogsContainer
+      :machine-id="$route.params.machine"
+      class="h-full"
+      :service="$route.params.service"
+    />
   </PageContainer>
 </template>
diff --git a/frontend/src/views/Machines/MachineLogsContainer.vue b/frontend/src/views/Machines/MachineLogsContainer.vue
index 6097af52c..683d763e7 100644
--- a/frontend/src/views/Machines/MachineLogsContainer.vue
+++ b/frontend/src/views/Machines/MachineLogsContainer.vue
@@ -5,56 +5,201 @@ Use of this software is governed by the Business Source License
 included in the LICENSE file.
 -->
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import { ref, watchEffect } from 'vue'
+import { DateTime } from 'luxon'
+import { computed, ref, watchEffect } from 'vue'
 
+import type { Data } from '@/api/common/common.pb'
+import { Runtime } from '@/api/common/omni.pb'
+import type { Stream } from '@/api/grpc'
 import { ManagementService } from '@/api/omni/management/management.pb'
+import { withContext, withRuntime } from '@/api/options'
+import { type LogsRequest, MachineService } from '@/api/talos/machine/machine.pb'
 import LogViewer from '@/components/LogViewer/LogViewer.vue'
+import TSelectList from '@/components/SelectList/TSelectList.vue'
+import TAlert from '@/components/TAlert.vue'
 import TInput from '@/components/TInput/TInput.vue'
 import type { LogLine } from '@/methods/logs'
-import { DefaultLogParser, setupLogStream } from '@/methods/logs'
+import { DefaultLogParser, LineDelimitedLogParser, setupLogStream } from '@/methods/logs'
 import { formatISO } from '@/methods/time'
+import { useMachineServices } from '@/methods/useMachineServices'
 
-const logs: Ref<LogLine[]> = ref([])
+const { clusterId, machineId, service } = defineProps<{
+  clusterId?: string
+  machineId: string
+  service?: string
+}>()
 
 const searchInput = ref('')
+const logs = ref<LogLine[]>([])
+const context = computed(() => ({
+  cluster: clusterId,
+  node: machineId,
+}))
 
-interface Props {
-  machineId: string
+const MACHINE_LOGS = 'machine' // dummy value to represent non-service machine logs
+const CONTROLLER_RUNTIME = 'controller-runtime' // service with logs that isn't reported in services list
+
+// 'machine' check to continue support for /logs/machine but it is equivalent to /logs
+const isMachineLogs = computed(() => !service || service === MACHINE_LOGS)
+
+const { services } = useMachineServices(context)
+
+const servicesSelectValues = computed(() => [
+  MACHINE_LOGS,
+  CONTROLLER_RUNTIME,
+  ...services.value.map((s) => s.name ?? ''),
+])
+
+const formatLoggingContext = (logRecord: Record<string, string>, ...exceptFields: string[]) => {
+  const res: string[] = []
+
+  for (const key in logRecord) {
+    if (exceptFields.includes(key)) {
+      continue
+    }
+
+    res.push(`${key}=${logRecord[key]}`)
+  }
+
+  return res.join(' ')
 }
 
-const { machineId } = defineProps<Props>()
+const parsers: Record<string, (line: string) => LogLine> = {
+  containerd(line) {
+    const parsed = JSON.parse(line)
 
-watchEffect((onCleanup) => {
-  const stream = setupLogStream(
-    logs,
-    ManagementService.MachineLogs,
-    () => ({
-      machine_id: machineId,
-      tail_lines: -1,
-      follow: true,
-    }),
-    new DefaultLogParser((line: string): LogLine => {
-      const data = JSON.parse(line)
-
-      return {
-        date: formatISO(data['talos-time'], 'dd/MM/yyyy HH:mm:ss'),
-        msg: data.msg,
+    return {
+      date: parsed.time,
+      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
+    }
+  },
+  cri(line) {
+    const parsed = JSON.parse(line)
+
+    return {
+      date: parsed.time,
+      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
+    }
+  },
+  etcd(line) {
+    const parsed = JSON.parse(line)
+
+    return {
+      date: parsed.ts,
+      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
+    }
+  },
+  kubelet(line) {
+    const parsed = JSON.parse(line)
+    const date = DateTime.fromSeconds(parseFloat(parsed.ts) / 1000)
+
+    return {
+      date: date.toISO() ?? undefined,
+      msg: `[${parsed.level ?? 'info'}] ${parsed.msg} ${formatLoggingContext(parsed, 'msg', 'ts', 'level')}`,
+    }
+  },
+  [CONTROLLER_RUNTIME](line) {
+    // Format: <ISO timestamp> <ANSI>LEVEL<ANSI_RESET> <message> <JSON context>
+    const stripped = line.replace(/\x1b\[[\d;]*m/g, '')
+    const match = stripped.match(/^(\S+)\s+(\w+)\s+(.*?)\s+(\{.*\})$/)
+    if (!match) throw new Error('Unexpected line format')
+
+    const [, date, level, msg, contextJson] = match
+    const parsed = JSON.parse(contextJson)
+
+    return {
+      date,
+      msg: `[${level.toLowerCase()}] ${msg} ${formatLoggingContext(parsed, 'component')}`,
+    }
+  },
+}
+
+const plainText = (line: string) => {
+  return {
+    msg: line,
+  }
+}
+
+const getLineParser = (svc: string) => {
+  return parsers[svc]
+    ? (line: string): LogLine => {
+        try {
+          return parsers[svc](line)
+        } catch {
+          return plainText(line)
+        }
       }
-    }),
-  )
+    : plainText
+}
 
-  onCleanup(() => {
-    stream?.shutdown()
-  })
+const stream = ref<Stream<Data, LogsRequest>>()
+
+watchEffect((onCleanup) => {
+  const { stream: newStream, shutdown } = isMachineLogs.value
+    ? setupLogStream(
+        logs,
+        ManagementService.MachineLogs,
+        {
+          machine_id: context.value.node,
+          follow: true,
+          tail_lines: -1,
+        },
+        new DefaultLogParser((line) => {
+          const data = JSON.parse(line)
+
+          return {
+            date: formatISO(data['talos-time'], 'dd/MM/yyyy HH:mm:ss'),
+            msg: data.msg,
+          }
+        }),
+      )
+    : setupLogStream(
+        logs,
+        MachineService.Logs,
+        {
+          namespace: 'system',
+          id: service,
+          follow: true,
+          tail_lines: -1,
+        },
+        new LineDelimitedLogParser(getLineParser(service!)),
+        withRuntime(Runtime.Talos),
+        withContext(context.value),
+      )
+
+  stream.value = newStream
+
+  onCleanup(() => shutdown())
 })
 </script>
 
 <template>
   <div class="flex flex-col">
-    <div class="mb-4">
-      <TInput v-model="searchInput" placeholder="Search..." icon="search" />
+    <div class="mb-4 flex gap-2">
+      <TSelectList
+        title="Logs"
+        :values="servicesSelectValues"
+        :model-value="service || MACHINE_LOGS"
+        @update:model-value="
+          (v) => $router.replace({ params: { service: v === MACHINE_LOGS ? '' : v } })
+        "
+      />
+
+      <TInput v-model="searchInput" placeholder="Search..." icon="search" class="grow" />
     </div>
-    <LogViewer class="flex-1" :logs="logs" :search-option="searchInput" />
+    <TAlert
+      v-if="stream?.err"
+      :title="logs ? 'Disconnected' : 'Failed to Fetch Logs'"
+      type="error"
+      class="mb-2"
+    >
+      {{ stream.err }}
+    </TAlert>
+    <LogViewer
+      class="flex-1"
+      :logs="logs"
+      :search-option="searchInput"
+      :without-date="!isMachineLogs && !parsers[service!]"
+    />
   </div>
 </template>
diff --git a/frontend/typed-router.d.ts b/frontend/typed-router.d.ts
index 1886e02a3..8025f4e39 100644
--- a/frontend/typed-router.d.ts
+++ b/frontend/typed-router.d.ts
@@ -218,9 +218,9 @@ declare module 'vue-router/auto-routes' {
     >,
     'NodeLogs': RouteRecordInfo<
       'NodeLogs',
-      '/clusters/:cluster/machine/:machine/logs/:service',
-      { cluster: ParamValue<true>, machine: ParamValue<true>, service: ParamValue<true> },
-      { cluster: ParamValue<false>, machine: ParamValue<false>, service: ParamValue<false> },
+      '/clusters/:cluster/machine/:machine/logs/:service?',
+      { cluster: ParamValue<true>, machine: ParamValue<true>, service?: ParamValueZeroOrOne<true> },
+      { cluster: ParamValue<false>, machine: ParamValue<false>, service?: ParamValueZeroOrOne<false> },
       | never
     >,
     'NodeMonitor': RouteRecordInfo<
@@ -371,9 +371,9 @@ declare module 'vue-router/auto-routes' {
     >,
     'MachineLogs': RouteRecordInfo<
       'MachineLogs',
-      '/machines/:machine/logs',
-      { machine: ParamValue<true> },
-      { machine: ParamValue<false> },
+      '/machines/:machine/logs/:service?',
+      { machine: ParamValue<true>, service?: ParamValueZeroOrOne<true> },
+      { machine: ParamValue<false>, service?: ParamValueZeroOrOne<false> },
       | never
     >,
     'MachineConfigPatches': RouteRecordInfo<
@@ -850,7 +850,7 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
-    'src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[service].vue': {
+    'src/pages/(authenticated)/clusters/[cluster]/machine/[machine]/logs/[[service]].vue': {
       routes:
         | 'NodeLogs'
       views:
@@ -983,7 +983,7 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
-    'src/pages/(authenticated)/machines/[machine]/logs.vue': {
+    'src/pages/(authenticated)/machines/[machine]/logs/[[service]].vue': {
       routes:
         | 'MachineLogs'
       views: