diff --git a/packages/webview/src/component/pods/PodLogs.spec.ts b/packages/webview/src/component/pods/PodLogs.spec.ts
index 66d422ac..f620a2c2 100644
--- a/packages/webview/src/component/pods/PodLogs.spec.ts
+++ b/packages/webview/src/component/pods/PodLogs.spec.ts
@@ -16,17 +16,17 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import { render } from '@testing-library/svelte';
-import { RemoteMocks } from '/@/tests/remote-mocks';
-import { API_POD_LOGS, type PodLogsChunk, type PodLogsApi } from '@kubernetes-dashboard/channels';
-import { StreamsMocks } from '/@/tests/stream-mocks';
-import { FakeStreamObject } from '/@/stream/util/fake-stream-object.svelte';
-import PodLogs from './PodLogs.svelte';
+import { API_POD_LOGS, type PodLogsApi, type PodLogsChunk } from '@kubernetes-dashboard/channels';
 import type { V1Pod } from '@kubernetes/client-node';
-import TerminalWindow from '/@/component/terminal/TerminalWindow.svelte';
-import type { Terminal } from '@xterm/xterm';
 import { EmptyScreen } from '@podman-desktop/ui-svelte';
+import { fireEvent, render } from '@testing-library/svelte';
+import type { Terminal } from '@xterm/xterm';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
+import PodLogs from './PodLogs.svelte';
+import TerminalWindow from '/@/component/terminal/TerminalWindow.svelte';
+import { FakeStreamObject } from '/@/stream/util/fake-stream-object.svelte';
+import { RemoteMocks } from '/@/tests/remote-mocks';
+import { StreamsMocks } from '/@/tests/stream-mocks';
 
 vi.mock(import('../terminal/TerminalWindow.svelte'));
 vi.mock(import('@podman-desktop/ui-svelte'));
@@ -36,6 +36,36 @@ const streamMocks = new StreamsMocks();
 
 const streamPodLogsMock = new FakeStreamObject<PodLogsChunk>();
 
+// Helper to create a mock terminal
+function createMockTerminal(): Terminal {
+  return {
+    write: vi.fn(),
+    dispose: vi.fn(),
+    clear: vi.fn(),
+  } as unknown as Terminal;
+}
+
+// Helper to create a pod with the specified containers
+function createPod(containerNames: string[]): V1Pod {
+  return {
+    metadata: {
+      name: 'podName',
+      namespace: 'namespace',
+    },
+    spec: {
+      containers: containerNames.map(name => ({ name })),
+    },
+  } as V1Pod;
+}
+
+// Helper to setup terminal mock with binding
+function setupTerminalMock(terminal: Terminal): void {
+  vi.mocked(TerminalWindow).mockImplementation((_, props) => {
+    props.terminal = terminal;
+    return {};
+  });
+}
+
 beforeEach(() => {
   vi.resetAllMocks();
   streamMocks.reset();
@@ -45,123 +75,308 @@ beforeEach(() => {
   remoteMocks.mock(API_POD_LOGS, {} as unknown as PodLogsApi);
 });
 
-describe('pod with one container', async () => {
-  let pod: V1Pod;
-  beforeEach(() => {
-    pod = {
-      metadata: {
-        name: 'podName',
+describe('PodLogs', () => {
+  describe('EmptyScreen display', () => {
+    test.each([
+      { containerCount: 1, containers: ['containerName'] },
+      { containerCount: 2, containers: ['cnt1', 'containerName2'] },
+    ])('should display "No Log" with $containerCount container(s) when no logs received', ({ containers }) => {
+      const pod = createPod(containers);
+      render(PodLogs, { object: pod });
+
+      // EmptyScreen is now conditionally rendered (not hidden via prop)
+      expect(EmptyScreen).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          title: 'No Log',
+          message: `Log output of Pod ${pod.metadata?.name}`,
+        }),
+      );
+    });
+
+    test('should hide EmptyScreen when logs are received', () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      // EmptyScreen is rendered initially
+      expect(EmptyScreen).toHaveBeenCalled();
+      const initialCallCount = vi.mocked(EmptyScreen).mock.calls.length;
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
         namespace: 'namespace',
-      },
-      spec: {
-        containers: [
-          {
-            name: 'containerName',
-          },
-        ],
-      },
-    } as V1Pod;
-  });
+        containerName: 'containerName',
+        data: 'some logs',
+      });
 
-  test('display No Logwith no logs', async () => {
-    render(PodLogs, { object: pod });
-    expect(EmptyScreen).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.objectContaining({
-        hidden: false,
-      }),
-    );
+      // EmptyScreen should not be called again after logs are received
+      // (it's conditionally rendered with {#if noLogs})
+      expect(vi.mocked(EmptyScreen).mock.calls.length).toBe(initialCallCount);
+    });
   });
 
-  test('write received logs to the terminal', async () => {
-    const mockedTerminal: Terminal = {
-      write: vi.fn(),
-      dispose: vi.fn(),
-      clear: vi.fn(),
-    } as unknown as Terminal;
-    vi.mocked(TerminalWindow).mockImplementation((_, props) => {
-      props.terminal = mockedTerminal;
-      return {};
+  describe('log output formatting', () => {
+    test('should format single container logs without prefix', () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'containerName',
+        data: 'simple log line',
+      });
+
+      expect(mockedTerminal.write).toHaveBeenCalled();
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      expect(writtenLog).toContain('simple log line\r');
+      expect(writtenLog).not.toContain('|');
     });
-    render(PodLogs, { object: pod });
-    expect(mockedTerminal.write).not.toHaveBeenCalledWith();
-    expect(mockedTerminal.clear).toHaveBeenCalled();
-    expect(TerminalWindow).toHaveBeenCalled();
 
-    streamPodLogsMock.sendData({
-      podName: 'podName',
-      namespace: 'namespace',
-      containerName: 'containerName',
-      data: 'some logs',
+    test('should format multi-container logs with colored prefix and padding', () => {
+      const pod = createPod(['cnt1', 'containerName2']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'cnt1',
+        data: 'log from cnt1',
+      });
+
+      expect(mockedTerminal.write).toHaveBeenCalled();
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      expect(writtenLog).toContain('\u001b[36mcnt1\u001b[0m|log from cnt1');
     });
-    expect(mockedTerminal.write).toHaveBeenCalledWith('some logs\r');
-    expect(EmptyScreen).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.objectContaining({
-        hidden: true,
-      }),
-    );
-  });
-});
 
-describe('pod with two containers', async () => {
-  let pod: V1Pod;
-  beforeEach(() => {
-    pod = {
-      metadata: {
-        name: 'podName',
+    test('should apply log level colorization', () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
         namespace: 'namespace',
-      },
-      spec: {
-        containers: [
-          {
-            name: 'cnt1',
-          },
-          {
-            name: 'containerName2',
-          },
-        ],
-      },
-    } as V1Pod;
-  });
+        containerName: 'containerName',
+        data: 'info: Application started',
+      });
+
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      // Should contain ANSI color code for info: (cyan)
+      expect(writtenLog).toContain('\u001b[36m');
+      expect(writtenLog).toContain('\u001b[0m');
+      expect(writtenLog).toContain('Application started');
+    });
+
+    test('should apply JSON colorization when colorfulOutputType is FULL', () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
 
-  test('display No Logwith no logs', async () => {
-    render(PodLogs, { object: pod });
-    expect(EmptyScreen).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.objectContaining({
-        hidden: false,
-      }),
-    );
+      // Set localStorage to FULL mode for JSON colorization
+      localStorage.setItem('podlogs.terminal.colorful-output', 'full');
+
+      render(PodLogs, { object: pod });
+
+      // Send JSON log data
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'containerName',
+        data: '{"level":"info","message":"test","count":42}',
+      });
+
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      // Should contain ANSI color codes for JSON elements (braces in yellow, numbers in green)
+      expect(writtenLog).toContain('\u001b[33m{\u001b[0m'); // yellow brace
+      expect(writtenLog).toContain('\u001b[32m42\u001b[0m'); // green number
+    });
+
+    test('should handle malformed JSON gracefully', () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'containerName',
+        data: '{"level":"info"', // incomplete JSON
+      });
+
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      // Should still output the log without crashing - may have ANSI codes but text preserved
+      expect(writtenLog).toContain('level');
+      expect(writtenLog).toContain('info');
+    });
+
+    test.each([
+      { level: 'error:', color: '\u001b[31;1m', desc: 'error (bright red)' },
+      { level: 'warn:', color: '\u001b[33m', desc: 'warn (yellow)' },
+      { level: 'debug:', color: '\u001b[32m', desc: 'debug (green)' },
+    ])('should colorize $desc log level', ({ level, color }) => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'containerName',
+        data: `${level} Some message`,
+      });
+
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      expect(writtenLog).toContain(color);
+      expect(writtenLog).toContain('\u001b[0m');
+    });
+
+    test('should pad shorter container names to align with longest', () => {
+      const pod = createPod(['a', 'longername']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'a',
+        data: 'short name log',
+      });
+
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      const nineSpaces = '         '; // 9 spaces to pad 'a' to length of 'longername'
+      expect(writtenLog).equals(nineSpaces + '\u001b[36ma\u001b[0m|short name log\r');
+    });
+
+    test('should apply FULL colorization when set, regardless of content', async () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      const { container } = render(PodLogs, { object: pod });
+
+      // Open settings menu and select FULL colorization
+      const settingsButton = container.querySelector('button[name="terminal-settings-button"]') as HTMLButtonElement;
+      await fireEvent.click(settingsButton);
+      const select = container.querySelector('select[name="colorful-output"]') as HTMLSelectElement;
+      await fireEvent.change(select, { target: { value: 'full' } });
+
+      // Send JSON lines
+      const jsonLines = Array.from(
+        { length: 20 },
+        (_, i) => `{"timestamp":"2025-11-18T10:00:0${i}Z","level":"info","message":"Line ${i + 1}"}`,
+      ).join('\n');
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'containerName',
+        data: jsonLines,
+      });
+
+      const calls = vi.mocked(mockedTerminal.write).mock.calls;
+      // First call should have JSON colorization (yellow braces)
+      expect(calls[0][0]).toContain('\u001b[33m{\u001b[0m');
+    });
+
+    test('should not colorize when colorfulOutputType is NONE', async () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      const { container } = render(PodLogs, { object: pod });
+
+      // Open settings menu and select NONE colorization
+      const settingsButton = container.querySelector('button[name="terminal-settings-button"]') as HTMLButtonElement;
+      await fireEvent.click(settingsButton);
+      const select = container.querySelector('select[name="colorful-output"]') as HTMLSelectElement;
+      await fireEvent.change(select, { target: { value: 'none' } });
+
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'containerName',
+        data: 'error: Something went wrong',
+      });
+
+      const writtenLog = vi.mocked(mockedTerminal.write).mock.calls[0][0] as string;
+      // Should NOT contain ANSI color codes
+      expect(writtenLog).not.toContain('\u001b[');
+      expect(writtenLog).toContain('error: Something went wrong');
+    });
   });
 
-  test('write received logs to the terminal v2', async () => {
-    const mockedTerminal: Terminal = {
-      write: vi.fn(),
-      dispose: vi.fn(),
-      clear: vi.fn(),
-    } as unknown as Terminal;
-    vi.mocked(TerminalWindow).mockImplementation((_, props) => {
-      props.terminal = mockedTerminal;
-      return {};
+  describe('terminal initialization', () => {
+    test('should clear terminal and create TerminalWindow on mount', () => {
+      const pod = createPod(['containerName']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      expect(mockedTerminal.clear).toHaveBeenCalled();
+      expect(TerminalWindow).toHaveBeenCalled();
     });
-    render(PodLogs, { object: pod });
-    expect(mockedTerminal.write).not.toHaveBeenCalledWith();
-    expect(mockedTerminal.clear).toHaveBeenCalled();
-    expect(TerminalWindow).toHaveBeenCalled();
+  });
 
-    streamPodLogsMock.sendData({
-      podName: 'podName',
-      namespace: 'namespace',
-      containerName: 'cnt1',
-      data: 'some logs',
+  describe('multi-container prefix colors', () => {
+    test('should apply colored prefixes for each container', async () => {
+      const pod = createPod(['container1', 'container2', 'container3']);
+      const mockedTerminal = createMockTerminal();
+      setupTerminalMock(mockedTerminal);
+
+      render(PodLogs, { object: pod });
+
+      // Wait for all 3 container subscriptions to be set up (async onMount)
+      await streamPodLogsMock.waitForSubscriptions(3);
+
+      // Send log from first container
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'container1',
+        data: 'log from container1',
+      });
+
+      // Send log from second container
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'container2',
+        data: 'log from container2',
+      });
+
+      // Send log from third container
+      streamPodLogsMock.sendData({
+        podName: 'podName',
+        namespace: 'namespace',
+        containerName: 'container3',
+        data: 'log from container3',
+      });
+
+      const calls = vi.mocked(mockedTerminal.write).mock.calls;
+      // Each container should have a colored prefix with pipe separator
+      // Colors cycle: cyan, yellow, green
+      expect(calls[0][0]).toContain('\u001b[36mcontainer1\u001b[0m|log from container1');
+      expect(calls[1][0]).toContain('\u001b[33mcontainer2\u001b[0m|log from container2');
+      expect(calls[2][0]).toContain('\u001b[32mcontainer3\u001b[0m|log from container3');
     });
-    expect(mockedTerminal.write).toHaveBeenCalledWith('          \u001b[36mcnt1\u001b[0m|some logs\r');
-    expect(EmptyScreen).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.objectContaining({
-        hidden: true,
-      }),
-    );
   });
 });
diff --git a/packages/webview/src/component/pods/PodLogs.svelte b/packages/webview/src/component/pods/PodLogs.svelte
index dda0f09d..d21a2751 100644
--- a/packages/webview/src/component/pods/PodLogs.svelte
+++ b/packages/webview/src/component/pods/PodLogs.svelte
@@ -1,12 +1,21 @@
 <script lang="ts">
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import type { IDisposable } from '@kubernetes-dashboard/channels';
 import type { V1Pod } from '@kubernetes/client-node';
 import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import type { Terminal } from '@xterm/xterm';
 import { getContext, onDestroy, onMount, tick } from 'svelte';
+import Fa from 'svelte-fa';
 import { SvelteMap } from 'svelte/reactivity';
 import NoLogIcon from '/@/component/icons/NoLogIcon.svelte';
-import { ansi256Colours, colorizeLogLevel, colourizedANSIContainerName } from '/@/component/terminal/terminal-colors';
+import { ColorOutputType } from '/@/component/terminal/color-output-types';
+import { detectJsonLogs } from '/@/component/terminal/json-colorizer';
+import {
+  ansi256Colours,
+  colorizeJSON,
+  colorizeLogLevel,
+  colourizedANSIContainerName,
+} from '/@/component/terminal/terminal-colors';
 import TerminalWindow from '/@/component/terminal/TerminalWindow.svelte';
 import { Streams } from '/@/stream/streams';
 
@@ -15,78 +24,171 @@ interface Props {
 }
 let { object }: Props = $props();
 
-// Logs has been initialized
-let noLogs = $state(true);
+const jsonColorizeSampleSize = 20;
 
+let noLogs = $state(true);
+let colorfulOutputType = $state(undefined);
+let jsonDetected = $state(false);
+let settingsMenuOpen = $state(false);
 let logsTerminal = $state<Terminal>();
 
+let logBuffer: string[] = [];
 let disposables: IDisposable[] = [];
+let settingsMenuRef: HTMLDivElement | undefined;
+
 const streams = getContext<Streams>(Streams);
 
-// Create a map that will store the ANSI 256 colour for each container name
+// Map that will store the ANSI 256 colour for each container name
 // if we run out of colours, we'll start from the beginning.
-const colourizedContainerName = new SvelteMap<string, string>();
+const prefixColourMap = new SvelteMap<string, string>();
 
-onMount(async () => {
-  logsTerminal?.clear();
+// Trigger resize when logs appear so terminal can recalculate its size
+$effect(() => {
+  if (!noLogs) {
+    triggerResize();
+  }
+});
+
+function handleSettingChange(): void {
+  loadLogs().catch(console.error);
+}
+
+const addLogPrefix = (lines: string[], prefix: string, prefixLength: number): void => {
+  const safePadding = Math.max(0, prefixLength - prefix.length);
+  const padding = safePadding > 0 ? ' '.repeat(safePadding) : '';
+  const mappedPrefix = prefixColourMap.get(prefix) ?? prefix;
 
-  const containerCount = object.spec?.containers.length ?? 0;
+  lines.forEach((line, index) => {
+    if (index < lines.length - 1 || line.length > 0) {
+      lines[index] = `${padding}${mappedPrefix}|${line}`;
+    }
+  });
+};
+
+const isJsonDetected = (lines: string[]): boolean => {
+  if (logBuffer.length < jsonColorizeSampleSize) {
+    logBuffer.push(...lines.filter(l => l.trim()).slice(0, jsonColorizeSampleSize));
+    if (logBuffer.length > 0) {
+      jsonDetected = detectJsonLogs(logBuffer);
+    }
+  }
+  return jsonDetected;
+};
+
+/**
+ * Colorizes and formats log lines with optional container prefix.
+ * Applies log level colorization and JSON colorization (if detected).
+ *
+ * @param data - Raw log data from stream
+ * @param prefix - Log line prefix (for multi-container pods)
+ * @param maxPrefixLength - Length to normalize prefix with (0 for single container)
+ * @returns Formatted and colorized log lines
+ */
+const colorizeAndFormatLogs = (data: string, prefix?: string, maxPrefixLength: number = 0): string => {
+  if (colorfulOutputType === ColorOutputType.NONE || (data?.length ?? 0) === 0) {
+    return data;
+  }
+
+  let lines: string[] = data.split('\n');
+  //format json if the user asked for that or if they didn't set a preference and we auto-detected json logs
+  let isJsonFormat = colorfulOutputType === ColorOutputType.FULL || (!colorfulOutputType && isJsonDetected(lines));
+
+  lines = isJsonFormat
+    ? lines.map(line => colorizeLogLevel(colorizeJSON(line)))
+    : lines.map(line => colorizeLogLevel(line));
+
+  if (prefix) {
+    addLogPrefix(lines, prefix, maxPrefixLength);
+  }
+
+  return lines.join('\n');
+};
+
+/**
+ * Calculates the maximum container name length for padding prefixes in multi-container
+ * pods so that log lines align correctly.
+ *
+ * @returns Max container name length for prefix padding
+ */
+const calculatePrefixLength = (): number => {
+  let maxNameLength = 0;
+  object.spec?.containers.forEach(container => {
+    if (container.name.length > maxNameLength) {
+      maxNameLength = container.name.length;
+    }
+  });
+  return maxNameLength;
+};
+
+/**
+ * Sets up ANSI color mappings for container name prefixes in multi-container pods.
+ * Cycles through available colors using modulo when there are more containers than colors.
+ */
+const setupPrefixColours = (): void => {
+  object.spec?.containers.forEach((container, index) => {
+    const colour = ansi256Colours[index % ansi256Colours.length];
+    prefixColourMap.set(container.name, colourizedANSIContainerName(container.name, colour));
+  });
+};
+
+function triggerResize(): void {
+  tick()
+    .then(() => {
+      window.dispatchEvent(new Event('resize'));
+    })
+    .catch(console.error);
+}
+
+async function loadLogs(): Promise<void> {
+  disposables.forEach(disposable => disposable.dispose());
+  disposables = [];
+
+  logsTerminal?.clear();
+  noLogs = true;
 
-  // Go through each name of pod.containers array and determine
-  // how much spacing is required for each name to be printed.
   let maxNameLength = 0;
-  if (containerCount > 1) {
-    object.spec?.containers.forEach((container, index) => {
-      if (container.name.length > maxNameLength) {
-        maxNameLength = container.name.length;
-      }
-      const colour = ansi256Colours[index % ansi256Colours.length];
-      colourizedContainerName.set(container.name, colourizedANSIContainerName(container.name, colour));
-    });
+  if ((object.spec?.containers.length ?? 0) > 1) {
+    maxNameLength = calculatePrefixLength();
+    setupPrefixColours();
   }
 
-  const multiContainers =
-    containerCount > 1
-      ? (name: string, data: string, callback: (data: string) => void): void => {
-          const padding = ' '.repeat(maxNameLength - name.length);
-          const colouredName = colourizedContainerName.get(name);
-
-          // All lines are prefixed, except the last one if it's empty.
-          const lines = data
-            .split('\n')
-            .map(line => colorizeLogLevel(line))
-            .map((line, index, arr) =>
-              index < arr.length - 1 || line.length > 0 ? `${padding}${colouredName}|${line}` : line,
-            );
-          callback(lines.join('\n'));
+  const subscriptionPromises = (object.spec?.containers.map(c => c.name) ?? []).map(async containerName => {
+    const logLinePrefix = maxNameLength > 0 ? containerName : undefined;
+    return await streams.streamPodLogs.subscribe(
+      object.metadata?.name ?? '',
+      object.metadata?.namespace ?? '',
+      containerName,
+      chunk => {
+        const formattedLogs = colorizeAndFormatLogs(chunk.data, logLinePrefix, maxNameLength);
+        if (formattedLogs.length > 0) {
+          logsTerminal?.write(formattedLogs + '\r');
+          noLogs = false;
         }
-      : (_name: string, data: string, callback: (data: string) => void): void => {
-          const lines = data.split('\n').map(line => colorizeLogLevel(line));
-          callback(lines.join('\n'));
-        };
-
-  for (const containerName of object.spec?.containers.map(c => c.name) ?? []) {
-    disposables.push(
-      await streams.streamPodLogs.subscribe(
-        object.metadata?.name ?? '',
-        object.metadata?.namespace ?? '',
-        containerName,
-        chunk => {
-          multiContainers(containerName, chunk.data, data => {
-            if (noLogs) {
-              noLogs = false;
-            }
-            logsTerminal?.write(data + '\r');
-            tick()
-              .then(() => {
-                window.dispatchEvent(new Event('resize'));
-              })
-              .catch(console.error);
-          });
-        },
-      ),
+      },
     );
+  });
+
+  const results = await Promise.allSettled(subscriptionPromises);
+  for (const result of results) {
+    if (result.status === 'fulfilled') {
+      disposables.push(result.value);
+    } else {
+      console.error('Failed to subscribe to container logs:', result.reason);
+    }
   }
+}
+
+onMount(() => {
+  loadLogs().catch(console.error);
+  const handleClickOutside = (event: MouseEvent): void => {
+    if (settingsMenuOpen && settingsMenuRef && !settingsMenuRef.contains(event.target as Node)) {
+      settingsMenuOpen = false;
+    }
+  };
+  window.addEventListener('click', handleClickOutside);
+  return (): void => {
+    window.removeEventListener('click', handleClickOutside);
+  };
 });
 
 onDestroy(() => {
@@ -95,16 +197,50 @@ onDestroy(() => {
 });
 </script>
 
-<EmptyScreen
-  icon={NoLogIcon}
-  title="No Log"
-  message="Log output of Pod {object.metadata?.name}"
-  hidden={noLogs === false} />
-
-<div
-  class="min-w-full flex flex-col"
-  class:invisible={noLogs === true}
-  class:h-0={noLogs === true}
-  class:h-full={noLogs === false}>
-  <TerminalWindow class="h-full" bind:terminal={logsTerminal} convertEol disableStdIn search />
+<div class="flex flex-col h-full">
+  <div class="flex items-center gap-4 p-4 bg-(--pd-content-header-bg) border-b border-(--pd-content-divider)">
+    <div class="ml-auto flex items-center gap-2">
+      <div class="relative" bind:this={settingsMenuRef}>
+        <button
+          class="p-2 hover:bg-(--pd-content-card-hover-bg) rounded"
+          onclick={(): boolean => (settingsMenuOpen = !settingsMenuOpen)}
+          name="terminal-settings-button"
+          aria-label="Terminal settings">
+          <Fa icon={faEllipsisV} />
+        </button>
+        {#if settingsMenuOpen}
+          <div
+            class="absolute right-0 mt-1 w-64 bg-(--pd-content-card-bg) border border-(--pd-content-divider) rounded shadow-lg z-10">
+            <div class="p-3 space-y-3">
+              <label class="flex items-center justify-between gap-2">
+                <span class="text-sm">Colourize Logs</span>
+                <select
+                  bind:value={colorfulOutputType}
+                  onchange={handleSettingChange}
+                  name="colorful-output"
+                  class="bg-(--pd-content-card-bg) border border-(--pd-input-field-stroke) rounded px-2 py-1 text-sm cursor-pointer text-(--pd-content-text)">
+                  <option value={undefined} class="bg-(--pd-content-card-bg)">Auto</option>
+                  <option value={ColorOutputType.NONE} class="bg-(--pd-content-card-bg)">None</option>
+                  <option value={ColorOutputType.BASIC} class="bg-(--pd-content-card-bg)">Basic</option>
+                  <option value={ColorOutputType.FULL} class="bg-(--pd-content-card-bg)">Full</option>
+                </select>
+              </label>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+
+  {#if noLogs}
+    <EmptyScreen icon={NoLogIcon} title="No Log" message="Log output of Pod {object.metadata?.name}" />
+  {/if}
+
+  <div
+    class="min-w-full flex flex-col"
+    class:invisible={noLogs === true}
+    class:h-0={noLogs === true}
+    class:flex-1={noLogs === false}>
+    <TerminalWindow class="h-full" bind:terminal={logsTerminal} convertEol disableStdIn search />
+  </div>
 </div>
diff --git a/packages/webview/src/component/terminal/TerminalWindow.svelte b/packages/webview/src/component/terminal/TerminalWindow.svelte
index 33b6a5c0..a0a32fdc 100644
--- a/packages/webview/src/component/terminal/TerminalWindow.svelte
+++ b/packages/webview/src/component/terminal/TerminalWindow.svelte
@@ -146,7 +146,7 @@ onDestroy(() => {
 {/if}
 
 <div
-  class="{className} overflow-hidden p-[5px] pr-0 bg-(--pd-terminal-background)"
+  class="{className} overflow-hidden p-[5px] pr-0 bg-(--pd-terminal-background) h-full w-full"
   role="term"
   bind:this={logsXtermDiv}>
 </div>
diff --git a/packages/webview/src/component/terminal/color-output-types.ts b/packages/webview/src/component/terminal/color-output-types.ts
new file mode 100644
index 00000000..fd6bebc5
--- /dev/null
+++ b/packages/webview/src/component/terminal/color-output-types.ts
@@ -0,0 +1,5 @@
+export enum ColorOutputType {
+  NONE = 'none',
+  BASIC = 'basic', // log level and prefix coloring
+  FULL = 'full', // includes all available color matching
+}
diff --git a/packages/webview/src/component/terminal/json-colorizer.spec.ts b/packages/webview/src/component/terminal/json-colorizer.spec.ts
new file mode 100644
index 00000000..a8d6e18e
--- /dev/null
+++ b/packages/webview/src/component/terminal/json-colorizer.spec.ts
@@ -0,0 +1,334 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import { describe, expect, test } from 'vitest';
+
+import type { JsonColorScheme } from './json-colorizer.js';
+import { detectJsonLogs, JsonColorizer } from './json-colorizer.js';
+
+describe('JsonColorizer', () => {
+  const colorScheme: JsonColorScheme = {
+    braceColor: '\u001b[33m', // yellow
+    numberColor: '\u001b[32m', // green
+    booleanColor: '\u001b[35m', // magenta
+    nullColor: '\u001b[35m', // magenta
+    reset: '\u001b[0m',
+  };
+
+  const colorizer = new JsonColorizer(colorScheme);
+
+  test.each([
+    { jsonLine: '{"name": "test"}', open: '{', close: '}', desc: 'braces', strings: ['"name"', '"test"'] },
+    { jsonLine: '["item1", "item2"]', open: '[', close: ']', desc: 'brackets', strings: ['"item1"', '"item2"'] },
+    { jsonLine: '{}', open: '{', close: '}', desc: 'empty object', strings: [] },
+    { jsonLine: '[]', open: '[', close: ']', desc: 'empty array', strings: [] },
+  ])('should colorize $desc in yellow', ({ jsonLine, open, close, strings }) => {
+    const result = colorizer.colorize(jsonLine);
+
+    expect(result).toContain(`\u001b[33m${open}\u001b[0m`);
+    expect(result).toContain(`\u001b[33m${close}\u001b[0m`);
+
+    strings.forEach(str => expect(result).toContain(str));
+  });
+
+  test.each([
+    {
+      jsonLine: '{"count": 42, "price": 19.99}',
+      type: 'number',
+      coloredValues: ['\u001b[32m42\u001b[0m', '\u001b[32m19.99\u001b[0m'],
+      keys: ['"count"', '"price"'],
+    },
+    {
+      jsonLine: '{"enabled": true, "active": false}',
+      type: 'boolean',
+      coloredValues: ['\u001b[35mtrue\u001b[0m', '\u001b[35mfalse\u001b[0m'],
+      keys: ['"enabled"', '"active"'],
+    },
+    {
+      jsonLine: '{"value": null}',
+      type: 'null',
+      coloredValues: ['\u001b[35mnull\u001b[0m'],
+      keys: ['"value"'],
+    },
+    {
+      jsonLine: '{"value": 0}',
+      type: 'zero',
+      coloredValues: ['\u001b[32m0\u001b[0m'],
+      keys: ['"value"'],
+    },
+    {
+      jsonLine: '{"value": 0.5}',
+      type: 'decimal',
+      coloredValues: ['\u001b[32m0.5\u001b[0m'],
+      keys: ['"value"'],
+    },
+    {
+      jsonLine: '{"temperature": -15, "balance": -99.99}',
+      type: 'negative number',
+      coloredValues: ['\u001b[32m-15\u001b[0m', '\u001b[32m-99.99\u001b[0m'],
+      keys: ['"temperature"', '"balance"'],
+    },
+  ])('should colorize JSON with $type values', ({ jsonLine, coloredValues, keys }) => {
+    const result = colorizer.colorize(jsonLine);
+
+    expect(result).toContain('\u001b[33m{\u001b[0m');
+    expect(result).toContain('\u001b[33m}\u001b[0m');
+
+    coloredValues.forEach(value => expect(result).toContain(value));
+    keys.forEach(key => expect(result).toContain(key));
+  });
+
+  test.each([
+    {
+      jsonLine: '["item1", "item2", "item3"]',
+      type: 'strings',
+      expectedValues: ['"item1"', '"item2"', '"item3"'],
+    },
+    {
+      jsonLine: '[1, 2, 3, 4.5]',
+      type: 'numbers',
+      expectedValues: [
+        '\u001b[32m1\u001b[0m',
+        '\u001b[32m2\u001b[0m',
+        '\u001b[32m3\u001b[0m',
+        '\u001b[32m4.5\u001b[0m',
+      ],
+    },
+    {
+      jsonLine: '[true, false, true]',
+      type: 'booleans',
+      expectedValues: ['\u001b[35mtrue\u001b[0m', '\u001b[35mfalse\u001b[0m'],
+    },
+  ])('should colorize JSON array with $type', ({ jsonLine, expectedValues }) => {
+    const result = colorizer.colorize(jsonLine);
+
+    expect(result).toContain('\u001b[33m[\u001b[0m');
+    expect(result).toContain('\u001b[33m]\u001b[0m');
+
+    expectedValues.forEach(value => expect(result).toContain(value));
+  });
+
+  test('should colorize complex nested JSON', () => {
+    const jsonLine = '{"user": {"name": "John", "age": 30, "active": true}}';
+    const result = colorizer.colorize(jsonLine);
+
+    // Braces should be yellow (4 total: outer { }, inner { })
+    expect(result).toContain('\u001b[33m{\u001b[0m');
+    expect(result).toContain('\u001b[33m}\u001b[0m');
+
+    // Values should be appropriately colored
+    expect(result).toContain('\u001b[32m30\u001b[0m');
+    expect(result).toContain('\u001b[35mtrue\u001b[0m');
+
+    // Strings should not be colorized
+    expect(result).toContain('"user"');
+    expect(result).toContain('"name"');
+    expect(result).toContain('"age"');
+    expect(result).toContain('"active"');
+    expect(result).toContain('"John"');
+  });
+
+  test('should colorize JSON log level format', () => {
+    const jsonLine = '{"timestamp":"123","level":"information","message":"test"}';
+    const result = colorizer.colorize(jsonLine);
+
+    // Braces should be yellow
+    expect(result).toContain('\u001b[33m{\u001b[0m');
+    expect(result).toContain('\u001b[33m}\u001b[0m');
+
+    // Strings should not be colorized
+    expect(result).toContain('"timestamp"');
+    expect(result).toContain('"level"');
+    expect(result).toContain('"message"');
+    expect(result).toContain('"123"');
+    expect(result).toContain('"information"');
+    expect(result).toContain('"test"');
+  });
+
+  test('should colorize JSON with mixed types in array', () => {
+    const jsonLine = '["text", 123, true, null]';
+    const result = colorizer.colorize(jsonLine);
+
+    // Brackets should be yellow
+    expect(result).toContain('\u001b[33m[\u001b[0m');
+    expect(result).toContain('\u001b[33m]\u001b[0m');
+
+    // Each type should be colorized appropriately
+    expect(result).toContain('"text"'); // strings not colorized
+    expect(result).toContain('\u001b[32m123\u001b[0m');
+    expect(result).toContain('\u001b[35mtrue\u001b[0m');
+    expect(result).toContain('\u001b[35mnull\u001b[0m');
+  });
+
+  test('should handle JSON with escaped quotes', () => {
+    const jsonLine = '{"message": "He said \\"hello\\""}';
+    const result = colorizer.colorize(jsonLine);
+
+    // Braces should be yellow
+    expect(result).toContain('\u001b[33m{\u001b[0m');
+    expect(result).toContain('\u001b[33m}\u001b[0m');
+
+    // Should handle escaped quotes properly - strings not colorized
+    expect(result).toContain('"message"');
+    expect(result).toContain('"He said \\"hello\\""');
+  });
+
+  test('should work with custom color scheme', () => {
+    const customScheme: JsonColorScheme = {
+      braceColor: '\u001b[31m', // red
+      numberColor: '\u001b[33m', // yellow
+      booleanColor: '\u001b[34m', // blue
+      nullColor: '\u001b[35m', // magenta
+      reset: '\u001b[0m',
+    };
+
+    const customColorizer = new JsonColorizer(customScheme);
+    const jsonLine = '{"key": "value", "num": 42, "flag": true, "empty": null}';
+    const result = customColorizer.colorize(jsonLine);
+
+    // Should use custom colors
+    expect(result).toContain('\u001b[31m{\u001b[0m'); // red braces
+    expect(result).toContain('\u001b[31m}\u001b[0m'); // red braces
+    expect(result).toContain('\u001b[33m42\u001b[0m'); // yellow number
+    expect(result).toContain('\u001b[34mtrue\u001b[0m'); // blue boolean
+    expect(result).toContain('\u001b[35mnull\u001b[0m'); // magenta null
+
+    // Strings should not be colorized
+    expect(result).toContain('"key"');
+    expect(result).toContain('"value"');
+  });
+});
+
+describe('detectJsonLogs', () => {
+  test('should detect JSON logs when 80% or more lines are valid JSON', () => {
+    const logs = [
+      '{"timestamp":"2025-11-18T10:00:00Z","level":"info","message":"Starting application"}',
+      '{"timestamp":"2025-11-18T10:00:01Z","level":"info","message":"Connected to database"}',
+      '{"timestamp":"2025-11-18T10:00:02Z","level":"info","message":"Server listening on port 8080"}',
+      '{"timestamp":"2025-11-18T10:00:03Z","level":"debug","message":"Request received"}',
+      '{"timestamp":"2025-11-18T10:00:04Z","level":"debug","message":"Processing request"}',
+      '{"timestamp":"2025-11-18T10:00:05Z","level":"info","message":"Request completed"}',
+      '{"timestamp":"2025-11-18T10:00:06Z","level":"info","message":"Cache updated"}',
+      '{"timestamp":"2025-11-18T10:00:07Z","level":"info","message":"Background job started"}',
+      'Not a JSON line',
+      '{"timestamp":"2025-11-18T10:00:08Z","level":"info","message":"Job completed"}',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should not detect JSON logs when less than 80% are valid JSON', () => {
+    const logs = [
+      '{"timestamp":"2025-11-18T10:00:00Z","level":"info","message":"Starting"}',
+      '{"timestamp":"2025-11-18T10:00:01Z","level":"info","message":"Running"}',
+      'Regular log line without JSON',
+      'Another regular log line',
+      'Yet another non-JSON line',
+      'Still not JSON',
+      'Nope, not JSON either',
+      '{"timestamp":"2025-11-18T10:00:02Z","level":"info","message":"Done"}',
+      'More regular logs',
+      'Last regular log',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(false);
+  });
+
+  test('should handle empty log array', () => {
+    expect(detectJsonLogs([])).toBe(false);
+  });
+
+  test('should ignore empty lines when calculating ratio', () => {
+    const logs = [
+      '{"timestamp":"2025-11-18T10:00:00Z","level":"info","message":"Line 1"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:01Z","level":"info","message":"Line 2"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:02Z","level":"info","message":"Line 3"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:03Z","level":"info","message":"Line 4"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:04Z","level":"info","message":"Line 5"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:05Z","level":"info","message":"Line 6"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:06Z","level":"info","message":"Line 7"}',
+      '',
+      '{"timestamp":"2025-11-18T10:00:07Z","level":"info","message":"Line 8"}',
+      '',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should detect JSON with nested objects', () => {
+    const logs = [
+      '{"user":{"id":123,"name":"John"},"action":"login"}',
+      '{"user":{"id":124,"name":"Jane"},"action":"logout"}',
+      '{"data":{"key":"value","nested":{"deep":"data"}},"timestamp":"2025-11-18"}',
+      '{"array":[1,2,3],"object":{"a":"b"}}',
+      '{"simple":"test","number":42}',
+      '{"bool":true,"null":null}',
+      '{"str":"value","num":123}',
+      '{"x":1,"y":2}',
+      '{"foo":"bar"}',
+      '{"last":"one"}',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(true);
+  });
+
+  test('should not detect lines with braces but no key-value pairs', () => {
+    const logs = [
+      'Processing {item}',
+      'Found {value} in cache',
+      'Error: {error message}',
+      'Debug: {info}',
+      'Status: {ok}',
+      'Result: {success}',
+      'Output: {data}',
+      'Input: {params}',
+      'Config: {settings}',
+      'State: {ready}',
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(false);
+  });
+
+  test.each([
+    {
+      desc: 'exactly 80% threshold',
+      jsonCount: 8,
+      nonJsonCount: 2,
+      expected: true,
+    },
+    {
+      desc: 'just below 80% threshold',
+      jsonCount: 7,
+      nonJsonCount: 3,
+      expected: false,
+    },
+  ])('should detect $desc', ({ jsonCount, nonJsonCount, expected }) => {
+    const logs = [
+      ...Array.from({ length: jsonCount }, (_, i) => `{"valid":"json","line":${i + 1}}`),
+      ...Array.from({ length: nonJsonCount }, (_, i) => `Not JSON line ${jsonCount + i + 1}`),
+    ];
+
+    expect(detectJsonLogs(logs)).toBe(expected);
+  });
+});
diff --git a/packages/webview/src/component/terminal/json-colorizer.ts b/packages/webview/src/component/terminal/json-colorizer.ts
new file mode 100644
index 00000000..3f8b43b5
--- /dev/null
+++ b/packages/webview/src/component/terminal/json-colorizer.ts
@@ -0,0 +1,258 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+export interface JsonColorScheme {
+  keyColor?: string; // Color for object keys (optional)
+  stringColor?: string; // Color for string values (optional)
+  braceColor?: string; // Color for braces/brackets (optional)
+  numberColor?: string; // Color for numbers (optional)
+  booleanColor?: string; // Color for booleans (optional)
+  nullColor?: string; // Color for null (optional)
+  reset: string; // Reset code (required)
+}
+
+interface ProcessResult {
+  text: string;
+  nextIndex: number;
+}
+
+/**
+ * A class for colorizing JSON strings with ANSI escape codes.
+ * Supports customizable color schemes for keys, values, numbers, booleans, and null.
+ */
+export class JsonColorizer {
+  constructor(private readonly colorScheme: JsonColorScheme) {}
+
+  /**
+   * Colorizes a JSON string with ANSI color codes.
+   * Processes the string character by character to avoid escape code conflicts.
+   *
+   * @param jsonLine - The JSON string to colorize
+   * @returns The colorized JSON string with ANSI codes
+   */
+  colorize(jsonLine: string): string {
+    let result = '';
+    let i = 0;
+    let isAfterColon = false;
+
+    while (i < jsonLine.length) {
+      const char = jsonLine[i];
+
+      // Handle structural characters
+      const structuralResult = this.handleStructuralChar(char, isAfterColon);
+      if (structuralResult !== undefined) {
+        result += structuralResult.text;
+        isAfterColon = structuralResult.isAfterColon;
+        i++;
+        continue;
+      }
+
+      // Handle quoted strings (keys or values)
+      if (char === '"') {
+        const stringResult = this.processString(jsonLine, i, isAfterColon);
+        result += stringResult.text;
+        i = stringResult.nextIndex;
+        continue;
+      }
+
+      // Handle numbers
+      if (this.isNumberStart(jsonLine, i)) {
+        const numberResult = this.processNumber(jsonLine, i);
+        result += numberResult.text;
+        i = numberResult.nextIndex;
+        continue;
+      }
+
+      // Handle keywords (boolean/null)
+      const keywordResult = this.processKeyword(jsonLine, i);
+      if (keywordResult) {
+        result += keywordResult.text;
+        i = keywordResult.nextIndex;
+        continue;
+      }
+
+      // Regular character
+      result += char;
+      i++;
+    }
+
+    return result;
+  }
+
+  private handleStructuralChar(
+    char: string,
+    _isAfterColon: boolean,
+  ): { text: string; isAfterColon: boolean } | undefined {
+    // Handle braces and brackets
+    if (char === '{' || char === '}' || char === '[' || char === ']') {
+      const text = this.colorScheme.braceColor ? this.colorScheme.braceColor + char + this.colorScheme.reset : char;
+      return { text, isAfterColon: false };
+    }
+
+    // Track colon to distinguish keys from values
+    if (char === ':') {
+      return { text: char, isAfterColon: true };
+    }
+
+    // Track comma to reset key/value state
+    if (char === ',') {
+      return { text: char, isAfterColon: false };
+    }
+
+    return undefined;
+  }
+
+  private processString(jsonLine: string, startIndex: number, isAfterColon: boolean): ProcessResult {
+    const stringEnd = this.findStringEnd(jsonLine, startIndex);
+    const stringContent = jsonLine.substring(startIndex, stringEnd);
+
+    // Determine if this is a key (before colon) or value (after colon)
+    const isKey = !isAfterColon;
+    const colorToUse = isKey ? this.colorScheme.keyColor : this.colorScheme.stringColor;
+
+    const text = colorToUse ? colorToUse + stringContent + this.colorScheme.reset : stringContent;
+
+    return {
+      text,
+      nextIndex: stringEnd,
+    };
+  }
+
+  private findStringEnd(jsonLine: string, startIndex: number): number {
+    let i = startIndex + 1; // Skip opening quote
+
+    // Find closing quote (handle escaped quotes)
+    while (i < jsonLine.length && (jsonLine[i] !== '"' || jsonLine[i - 1] === '\\')) {
+      i++;
+    }
+    i++; // Include closing quote
+
+    return i;
+  }
+
+  private isNumberStart(jsonLine: string, index: number): boolean {
+    const char = jsonLine[index];
+    const isDigitOrMinus = /[\d-]/.test(char);
+    if (!isDigitOrMinus) return false;
+
+    // Check if we're in a number context
+    for (let k = index - 1; k >= 0; k--) {
+      const prevChar = jsonLine[k];
+      if (/\s/.test(prevChar)) continue;
+      return prevChar === ':' || prevChar === '[' || prevChar === ',';
+    }
+    return false;
+  }
+
+  private processNumber(jsonLine: string, startIndex: number): ProcessResult {
+    let i = startIndex;
+    if (jsonLine[i] === '-') i++;
+
+    while (i < jsonLine.length && /[\d.]/.test(jsonLine[i])) {
+      i++;
+    }
+
+    const number = jsonLine.substring(startIndex, i);
+    const text = this.colorScheme.numberColor ? this.colorScheme.numberColor + number + this.colorScheme.reset : number;
+    return {
+      text,
+      nextIndex: i,
+    };
+  }
+
+  private processKeyword(jsonLine: string, startIndex: number): ProcessResult | undefined {
+    // Handle boolean values
+    if (jsonLine.substring(startIndex, startIndex + 4) === 'true') {
+      const text = this.colorScheme.booleanColor
+        ? this.colorScheme.booleanColor + 'true' + this.colorScheme.reset
+        : 'true';
+      return {
+        text,
+        nextIndex: startIndex + 4,
+      };
+    }
+
+    if (jsonLine.substring(startIndex, startIndex + 5) === 'false') {
+      const text = this.colorScheme.booleanColor
+        ? this.colorScheme.booleanColor + 'false' + this.colorScheme.reset
+        : 'false';
+      return {
+        text,
+        nextIndex: startIndex + 5,
+      };
+    }
+
+    // Handle null
+    if (jsonLine.substring(startIndex, startIndex + 4) === 'null') {
+      const text = this.colorScheme.nullColor ? this.colorScheme.nullColor + 'null' + this.colorScheme.reset : 'null';
+      return {
+        text,
+        nextIndex: startIndex + 4,
+      };
+    }
+
+    return undefined;
+  }
+}
+
+/**
+ * Checks if a string appears to be valid JSON.
+ * A valid JSON line should have both { and } and contain at least one key-value pair pattern.
+ *
+ * @param line - The line to check
+ * @returns true if the line appears to be JSON
+ */
+export function isValidJSON(line: string): boolean {
+  const trimmed = line.trim();
+  if (!trimmed) return false;
+
+  // Find positions of braces
+  const openBrace = trimmed.indexOf('{');
+  const closeBrace = trimmed.lastIndexOf('}');
+
+  // Must have both braces and { must come before }
+  if (openBrace === -1 || closeBrace === -1 || openBrace >= closeBrace) return false;
+
+  // Extract content between braces and check for key-value pair pattern
+  const contentBetweenBraces = trimmed.substring(openBrace + 1, closeBrace);
+
+  // Look for key-value pair pattern: "key": value or "key":value
+  const kvpPattern = /"[^"]+"\s*:\s*[^,}]+/;
+  return kvpPattern.test(contentBetweenBraces);
+}
+
+/**
+ * Detects if log lines are predominantly JSON format.
+ *
+ * @param lines - Array of log lines to analyze
+ * @returns true if logs should be treated as JSON format
+ */
+export function detectJsonLogs(lines: string[]): boolean {
+  const threshold = 0.8; // 80%
+
+  // Filter out empty lines
+  const nonEmptyLines = lines.filter(line => line.trim().length > 0);
+
+  // Need at least a few lines to make a determination
+  if (nonEmptyLines.length === 0) return false;
+
+  const jsonCount = nonEmptyLines.filter(line => isValidJSON(line)).length;
+  const jsonRatio = jsonCount / nonEmptyLines.length;
+
+  return jsonRatio >= threshold;
+}
diff --git a/packages/webview/src/component/terminal/terminal-colors.spec.ts b/packages/webview/src/component/terminal/terminal-colors.spec.ts
index 96dfe3a6..4eb148e3 100644
--- a/packages/webview/src/component/terminal/terminal-colors.spec.ts
+++ b/packages/webview/src/component/terminal/terminal-colors.spec.ts
@@ -18,69 +18,27 @@
 
 import { describe, expect, test } from 'vitest';
 
-import { colorizeLogLevel } from './terminal-colors.js';
+import { colorizeJSON, colorizeLogLevel } from './terminal-colors.js';
 
 describe('colorizeLogLevel', () => {
-  test('should colorize INFO log level in cyan', () => {
-    const logLine = '[23:10:06 INF] Starting application';
+  test.each([
+    {
+      logLine: '[23:10:06 INF] Starting application',
+      color: '\u001b[36m',
+      message: 'Starting application',
+      level: 'INFO',
+    },
+    { logLine: '[DBG] Debug message', color: '\u001b[32m', message: 'Debug message', level: 'DEBUG' },
+    { logLine: '[ERROR] Something went wrong', color: '\u001b[31', message: 'Something went wrong', level: 'ERROR' },
+    { logLine: '[12:34:56 WARN] Warning message', color: '\u001b[33m', message: 'Warning message', level: 'WARN' },
+    { logLine: '[FATAL] Critical error', color: '\u001b[31m', message: 'Critical error', level: 'FATAL' },
+    { logLine: '[TRACE] Trace information', color: '\u001b[36;1m', message: 'Trace information', level: 'TRACE' },
+  ])('should colorize $level log level', ({ logLine, color, message }) => {
     const result = colorizeLogLevel(logLine);
 
-    // Should contain cyan ANSI code for INFO
-    expect(result).toContain('\u001b[36m');
-    // Should contain reset code
-    expect(result).toContain('\u001b[0m');
-    // Should preserve the rest of the message
-    expect(result).toContain('Starting application');
-  });
-
-  test('should colorize DEBUG log level in cyan', () => {
-    const logLine = '[DBG] Debug message';
-    const result = colorizeLogLevel(logLine);
-
-    // Should contain green ANSI code for DEBUG
-    expect(result).toContain('\u001b[32m');
-    expect(result).toContain('\u001b[0m');
-    expect(result).toContain('Debug message');
-  });
-
-  test('should colorize ERROR log level in red', () => {
-    const logLine = '[ERROR] Something went wrong';
-    const result = colorizeLogLevel(logLine);
-
-    // Should contain bright red ANSI code for ERROR
-    expect(result).toContain('\u001b[31'); // Match both \u001b[31m and \u001b[31;1m
-    expect(result).toContain('\u001b[0m');
-    expect(result).toContain('Something went wrong');
-  });
-
-  test('should colorize WARN log level in yellow', () => {
-    const logLine = '[12:34:56 WARN] Warning message';
-    const result = colorizeLogLevel(logLine);
-
-    // Should contain yellow ANSI code for WARN
-    expect(result).toContain('\u001b[33m');
+    expect(result).toContain(color);
     expect(result).toContain('\u001b[0m');
-    expect(result).toContain('Warning message');
-  });
-
-  test('should colorize FATAL log level in bright red', () => {
-    const logLine = '[FATAL] Critical error';
-    const result = colorizeLogLevel(logLine);
-
-    // Should contain red ANSI code for FATAL
-    expect(result).toContain('\u001b[31m');
-    expect(result).toContain('\u001b[0m');
-    expect(result).toContain('Critical error');
-  });
-
-  test('should colorize TRACE log level in magenta', () => {
-    const logLine = '[TRACE] Trace information';
-    const result = colorizeLogLevel(logLine);
-
-    // Should contain bright cyan ANSI code for TRACE
-    expect(result).toContain('\u001b[36;1m');
-    expect(result).toContain('\u001b[0m');
-    expect(result).toContain('Trace information');
+    expect(result).toContain(message);
   });
 
   test('should handle log line with Kubernetes timestamp prefix', () => {
@@ -94,27 +52,21 @@ describe('colorizeLogLevel', () => {
     expect(result).toContain('Server started');
   });
 
-  test('should handle case-insensitive log levels', () => {
-    const logLine1 = '[info] lowercase info';
-    const result1 = colorizeLogLevel(logLine1);
-    expect(result1).toContain('\u001b[36m');
-
-    const logLine2 = '[Info] Mixed case info';
-    const result2 = colorizeLogLevel(logLine2);
-    expect(result2).toContain('\u001b[36m');
+  test.each([
+    { input: '[info] lowercase info', level: 'lowercase' },
+    { input: '[Info] Mixed case info', level: 'mixed case' },
+  ])('should handle $level log levels', ({ input }) => {
+    const result = colorizeLogLevel(input);
+    expect(result).toContain('\u001b[36m');
   });
 
-  test('should handle abbreviated log levels', () => {
-    const testCases = [
-      { input: '[INF] Info message', color: '\u001b[36m' },
-      { input: '[WRN] Warning message', color: '\u001b[33m' },
-      { input: '[ERR] Error message', color: '\u001b[31' }, // Match both formats
-    ];
-
-    testCases.forEach(({ input, color }) => {
-      const result = colorizeLogLevel(input);
-      expect(result).toContain(color);
-    });
+  test.each([
+    { input: '[INF] Info message', color: '\u001b[36m', level: 'INF' },
+    { input: '[WRN] Warning message', color: '\u001b[33m', level: 'WRN' },
+    { input: '[ERR] Error message', color: '\u001b[31', level: 'ERR' },
+  ])('should handle abbreviated log level $level', ({ input, color }) => {
+    const result = colorizeLogLevel(input);
+    expect(result).toContain(color);
   });
 
   test('should handle log level in middle of line', () => {
@@ -145,18 +97,14 @@ describe('colorizeLogLevel', () => {
     expect(result).toBe(logLine);
   });
 
-  test('should handle full word log levels', () => {
-    const testCases = [
-      { input: '[DEBUG] Debug message', color: '\u001b[32m' },
-      { input: '[INFO] Info message', color: '\u001b[36m' },
-      { input: '[WARNING] Warning message', color: '\u001b[33m' },
-      { input: '[ERROR] Error message', color: '\u001b[31' }, // Match both formats
-    ];
-
-    testCases.forEach(({ input, color }) => {
-      const result = colorizeLogLevel(input);
-      expect(result).toContain(color);
-    });
+  test.each([
+    { input: '[DEBUG] Debug message', color: '\u001b[32m', level: 'DEBUG' },
+    { input: '[INFO] Info message', color: '\u001b[36m', level: 'INFO' },
+    { input: '[WARNING] Warning message', color: '\u001b[33m', level: 'WARNING' },
+    { input: '[ERROR] Error message', color: '\u001b[31', level: 'ERROR' },
+  ])('should handle full word log level $level', ({ input, color }) => {
+    const result = colorizeLogLevel(input);
+    expect(result).toContain(color);
   });
 
   test('should only colorize the first log level found', () => {
@@ -199,4 +147,19 @@ describe('colorizeLogLevel', () => {
     expect(result).toContain('\u001b[0m');
     expect(result).toContain('"information"');
   });
+
+  test('should work with JSON colorization function', () => {
+    const jsonLine = '{"level":"info","message":"test"}';
+    const result = colorizeJSON(jsonLine);
+
+    // Should colorize braces in yellow
+    expect(result).toContain('\u001b[33m{\u001b[0m');
+    expect(result).toContain('\u001b[33m}\u001b[0m');
+
+    // Strings should not be colorized
+    expect(result).toContain('"level"');
+    expect(result).toContain('"info"');
+    expect(result).toContain('"message"');
+    expect(result).toContain('"test"');
+  });
 });
diff --git a/packages/webview/src/component/terminal/terminal-colors.ts b/packages/webview/src/component/terminal/terminal-colors.ts
index 93fd3dc0..df909b1c 100644
--- a/packages/webview/src/component/terminal/terminal-colors.ts
+++ b/packages/webview/src/component/terminal/terminal-colors.ts
@@ -16,6 +16,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
+import type { JsonColorScheme } from './json-colorizer.js';
+import { JsonColorizer } from './json-colorizer.js';
+
 // An array of readable ANSI escape sequence colours against a black terminal background
 // these are the most "readable" colours against a black background
 // No colours like grey, normal blue (cyan instead) or red, since they don't appear very well.
@@ -115,3 +118,30 @@ export function colorizeLogLevel(logLine: string): string {
 
   return logLine;
 }
+
+// Create a default JSON colorizer instance
+const defaultJsonColorScheme: JsonColorScheme = {
+  keyColor: '\u001b[34;1m', // bright blue for keys
+  braceColor: '\u001b[33m', // yellow for {}[]
+  numberColor: '\u001b[32m', // green for numbers
+  booleanColor: '\u001b[35m', // magenta for booleans
+  nullColor: '\u001b[35m', // magenta for null
+  reset: '\u001b[0m',
+};
+
+const defaultJsonColorizer = new JsonColorizer(defaultJsonColorScheme);
+
+/**
+ * Colorizes JSON strings for terminal display.
+ * Applies ANSI colors to improve readability.
+ *
+ * Color scheme:
+ * - Keys: bright blue
+ * - Braces/brackets: yellow
+ * - Numbers: green
+ * - Booleans/null: magenta
+ * - String values: no colorization (optional)
+ */
+export function colorizeJSON(jsonLine: string): string {
+  return defaultJsonColorizer.colorize(jsonLine);
+}
diff --git a/packages/webview/src/stream/util/fake-stream-object.svelte.ts b/packages/webview/src/stream/util/fake-stream-object.svelte.ts
index a51b5fda..c6f2cf1f 100644
--- a/packages/webview/src/stream/util/fake-stream-object.svelte.ts
+++ b/packages/webview/src/stream/util/fake-stream-object.svelte.ts
@@ -16,25 +16,63 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import type { StreamObject } from './stream-object';
 import { type IDisposable } from '@kubernetes-dashboard/channels';
+import { SvelteMap } from 'svelte/reactivity';
+import type { StreamObject } from './stream-object';
 
 /**
- * Fake StreamObject for tests
+ * Fake StreamObject for tests.
+ * Supports multiple subscriptions keyed by podName/namespace/containerName.
  */
 export class FakeStreamObject<T> implements StreamObject<T> {
-  #callback: (data: T) => void;
+  #callbacks = new SvelteMap<string, (data: T) => void>();
+
   async subscribe(
     podName: string,
     namespace: string,
     containerName: string,
     callback: (data: T) => void,
   ): Promise<IDisposable> {
-    this.#callback = callback;
-    return { dispose: () => {} } as IDisposable;
+    const key = `${podName}/${namespace}/${containerName}`;
+    this.#callbacks.set(key, callback);
+    return {
+      dispose: () => {
+        this.#callbacks.delete(key);
+      },
+    } as IDisposable;
+  }
+
+  /**
+   * Send data to the callback registered for the matching podName/namespace/containerName.
+   * The data object must have these properties to route correctly.
+   */
+  sendData(data: T & { podName?: string; namespace?: string; containerName?: string }): void {
+    const key = `${data.podName}/${data.namespace}/${data.containerName}`;
+    const callback = this.#callbacks.get(key);
+    if (callback) {
+      callback(data);
+    }
+  }
+
+  /**
+   * Returns the number of active subscriptions.
+   * Useful for tests to verify subscriptions are set up.
+   */
+  get subscriptionCount(): number {
+    return this.#callbacks.size;
   }
 
-  sendData(data: T): void {
-    this.#callback(data);
+  /**
+   * Wait for a specific number of subscriptions to be registered.
+   * Useful for tests that need to wait for async onMount to complete.
+   */
+  async waitForSubscriptions(count: number, timeoutMs: number = 1000): Promise<void> {
+    const start = Date.now();
+    while (this.#callbacks.size < count) {
+      if (Date.now() - start > timeoutMs) {
+        throw new Error(`Timeout waiting for ${count} subscriptions. Current: ${this.#callbacks.size}`);
+      }
+      await new Promise(resolve => setTimeout(resolve, 10));
+    }
   }
 }