diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e10661858..bb3c322c1 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -65,7 +65,10 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
-    'import/no-unresolved': ['error', { ignore: ['\\.svg\\?react$'] }],
+    'import/no-unresolved': [
+      'error',
+      { ignore: ['\\.svg\\?react$', '\\.txt\\?raw$'] }
+    ],
     'import/prefer-default-export': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'no-case-declarations': 'off',
diff --git a/docs/logs.md b/docs/logs.md
new file mode 100644
index 000000000..81cf4b03a
--- /dev/null
+++ b/docs/logs.md
@@ -0,0 +1,79 @@
+<!--
+---
+linkTitle: "Logs"
+weight: 4
+---
+-->
+
+# Tekton Dashboard log viewer
+
+This guide describes the features and functionality of the log viewer provided by the Tekton Dashboard on the `TaskRun` and `PipelineRun` details pages.
+
+## Basic functionality
+
+The Tekton Dashboard log viewer supports ANSI colour codes and text styles, and will automatically detect URLs in log content and render them as clickable links opening in a new window.
+
+## Toolbar
+
+The toolbar diplayed in the log viewer includes a number of additional features, including:
+
+- maximize: increase the area available to the log viewer by hiding the task list and run header. This allows the user to eliminate distractions from other parts of the app and focus on the log content.
+- open in new window: open the raw logs in a separate browser window. This provides an unmodified and unprocessed view of the logs, without any of the added features provided by the log viewer.
+- download: download the raw logs as a text file.
+- user preferences: these are persisted to browser local storage and applied to all logs in the app. See the following sections for more details.
+
+### Timestamps
+
+The Dashboard will always request logs with timestamps from the Kubernetes pod logs API, and show / hide the timestamps in the log viewer based on the user's preference. This can be toggled from the settings menu in the toolbar at the top of the log viewer.
+
+The timestamps are localised based on users' browser settings, with the raw timestamp value received from the API provided as a tooltip on hover.
+
+In releases prior to Tekton Dashboard v0.54, the timestamp preference was found on the Settings page, and governed whether or not timestamps were requested from the Kubernetes API server.
+
+### Log levels
+
+The log viewer parses log lines to detect the associated log level and decorate them accordingly to help with log consumability. The format supported is described below.
+
+```
+<timestamp> ::<level>::<message>
+```
+
+- `timestamp` is provided by the Kubernetes API server
+- `level` is one of `error`, `warning`, `notice`, `info`, `debug`
+   - `debug` logs are hidden by default
+   - any log line without an explicit `level` is considered as `info`, but will not display the log level badge to avoid redundancy in the UI where users are not using the supported log format
+- `message` is any other content on the line, and may contain ANSI codes for formatting, etc.
+
+For example, the following snippet would output a log line at the `warning` level:
+
+```sh
+echo '::warning::Something that may require attention but is non-blocking…'
+```
+
+The displayed log levels can be changed via the settings menu in the toolbar at the top of the log viewer.
+
+## Logs persistence
+
+By default, Tekton Dashboard loads the logs from the Kubernetes API server, using the pod logs API. However, it also supports loading logs from an external source when the container logs or the pods associated with the `TaskRuns` are no longer available on the cluster.
+
+This functionality is described in detail, along with a full walk-through of an example configuration, in [Tekton Dashboard walk-through - Logs persistence](./walkthrough/walkthrough-logs.md).
+
+It can be enabled by providing the `--external-logs` flag to the installer script, or configured directly in the Dashboard deployment's args.
+
+When configured, the Dashboard will first attempt to load pod logs normally, and if they're unavailable will fallback to the provided external logs service by making a `GET` request to the provided endpoint with the following format:
+
+```
+GET <external-logs>/<namespace>/<podName>/<container>?startTime=<stepStartTime>&completionTime=<stepCompletionTime>
+```
+
+- `namespace`: the namespace containing the run
+- `podName`: the name of the `Pod` resource associated with the selected `TaskRun`
+- `container`: the name of the container associated with the selected `step`
+- `stepStartTime`: the start time of the step container
+- `stepCompletionTime`: the completion time of the step container
+
+If the start / completion times are unavailable their respective query parameters will be omitted from the request.
+
+---
+
+Except as otherwise noted, the content of this page is licensed under the [Creative Commons Attribution 4.0 License](https://creativecommons.org/licenses/by/4.0/). Code samples are licensed under the [Apache 2.0 License](https://www.apache.org/licenses/LICENSE-2.0).
diff --git a/package-lock.json b/package-lock.json
index 247790136..d5cd30ab3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4931,9 +4931,9 @@
       "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
-      "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/packages/components/src/components/ActionableNotification/ActionableNotification.jsx b/packages/components/src/components/ActionableNotification/ActionableNotification.jsx
index 7d795d33a..7245b90f2 100644
--- a/packages/components/src/components/ActionableNotification/ActionableNotification.jsx
+++ b/packages/components/src/components/ActionableNotification/ActionableNotification.jsx
@@ -18,9 +18,7 @@ import {
 
 export default function ActionableNotification(props) {
   return (
-    <FeatureFlags
-      flags={{ 'enable-experimental-focus-wrap-without-sentinels': true }}
-    >
+    <FeatureFlags enableExperimentalFocusWrapWithoutSentinels>
       <CarbonActionableNotification {...props} />
     </FeatureFlags>
   );
diff --git a/packages/components/src/components/FormattedDate/FormattedDate.jsx b/packages/components/src/components/FormattedDate/FormattedDate.jsx
index dffab487f..7f9c91e3d 100644
--- a/packages/components/src/components/FormattedDate/FormattedDate.jsx
+++ b/packages/components/src/components/FormattedDate/FormattedDate.jsx
@@ -16,6 +16,7 @@ import { FormattedDate, FormattedRelativeTime, useIntl } from 'react-intl';
 const FormattedDateWrapper = ({
   date,
   formatTooltip = formattedDate => formattedDate,
+  includeSeconds = false,
   relative
 }) => {
   const intl = useIntl();
@@ -47,6 +48,7 @@ const FormattedDateWrapper = ({
         year={yearFormat}
         hour="numeric"
         minute="numeric"
+        {...(includeSeconds ? { second: 'numeric' } : null)}
       />
     );
   }
@@ -56,7 +58,8 @@ const FormattedDateWrapper = ({
     month: 'long',
     year: 'numeric',
     hour: 'numeric',
-    minute: 'numeric'
+    minute: 'numeric',
+    ...(includeSeconds ? { second: 'numeric' } : null)
   });
   formattedDate = formatTooltip(formattedDate);
   return <span title={formattedDate}>{content}</span>;
diff --git a/packages/components/src/components/FormattedDate/FormattedDate.stories.js b/packages/components/src/components/FormattedDate/FormattedDate.stories.js
index 255e93068..e95660a2b 100644
--- a/packages/components/src/components/FormattedDate/FormattedDate.stories.js
+++ b/packages/components/src/components/FormattedDate/FormattedDate.stories.js
@@ -33,3 +33,9 @@ export const Relative = {
 };
 
 export const Absolute = {};
+
+export const Seconds = {
+  args: {
+    includeSeconds: true
+  }
+};
diff --git a/packages/components/src/components/FormattedDate/FormattedDate.test.jsx b/packages/components/src/components/FormattedDate/FormattedDate.test.jsx
index 3a6e9950c..dbddb9b70 100644
--- a/packages/components/src/components/FormattedDate/FormattedDate.test.jsx
+++ b/packages/components/src/components/FormattedDate/FormattedDate.test.jsx
@@ -21,8 +21,18 @@ describe('FormattedDate', () => {
   });
 
   it('handles absolute date formatting', () => {
-    const { queryByText } = render(<FormattedDate date="2019/12/01" />);
-    expect(queryByText(/Dec 1, 2019/i)).toBeTruthy();
+    const { queryByText } = render(
+      <FormattedDate date="2019/12/01 12:13:14" />
+    );
+    expect(queryByText(/Dec 1, 2019, 12:13/i)).toBeTruthy();
+    expect(queryByText(/:14/i)).toBeFalsy();
+  });
+
+  it('handles absolute date formatting with seconds', () => {
+    const { queryByText } = render(
+      <FormattedDate date="2019/12/01 12:13:14" includeSeconds />
+    );
+    expect(queryByText(/Dec 1, 2019, 12:13:14/i)).toBeTruthy();
   });
 
   it('handles absolute date formatting for current year', () => {
diff --git a/packages/components/src/components/Log/Log.jsx b/packages/components/src/components/Log/Log.jsx
index b3348b63b..9c0b27d4a 100644
--- a/packages/components/src/components/Log/Log.jsx
+++ b/packages/components/src/components/Log/Log.jsx
@@ -27,19 +27,16 @@ import {
 import DotSpinner from '../DotSpinner';
 import LogFormat from '../LogFormat';
 
-const LogLine = ({ data, index, style }) => (
-  <div style={style}>
-    <LogFormat>{`${data[index]}\n`}</LogFormat>
-  </div>
-);
-
-const itemSize = 15; // This should be kept in sync with the line-height in SCSS
+const itemSize = 16; // This should be kept in sync with the line-height in SCSS
 const defaultHeight = itemSize * 100 + itemSize / 2;
 
+const logFormatRegex =
+  /^((?<timestamp>\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3,9}Z)\s?)?(::(?<level>error|warning|info|notice|debug)::)?(?<message>.*)?$/s;
+
 export class LogContainer extends Component {
   constructor(props) {
     super(props);
-    this.state = { loading: true };
+    this.state = { loading: true, logs: [] };
     this.logRef = createRef();
     this.textRef = createRef();
   }
@@ -244,7 +241,27 @@ export class LogContainer extends Component {
   };
 
   getLogList = () => {
-    const { stepStatus, intl } = this.props;
+    const {
+      intl,
+      logLevels,
+      parseLogLine = line => {
+        if (!line?.length) {
+          return { message: line };
+        }
+
+        const {
+          groups: { level, message, timestamp }
+        } = logFormatRegex.exec(line);
+        return {
+          level,
+          message,
+          timestamp
+        };
+      },
+      showLevels,
+      showTimestamps,
+      stepStatus
+    } = this.props;
     const { reason } = (stepStatus && stepStatus.terminated) || {};
     const {
       logs = [
@@ -255,8 +272,35 @@ export class LogContainer extends Component {
       ]
     } = this.state;
 
-    if (logs.length < 20000) {
-      return <LogFormat>{logs.join('\n')}</LogFormat>;
+    let previousTimestamp;
+    const parsedLogs = logs.reduce((acc, line) => {
+      const parsedLogLine = parseLogLine(line);
+      if (!parsedLogLine.timestamp) {
+        // multiline log, use same timestamp as previous line
+        parsedLogLine.timestamp = previousTimestamp;
+      } else {
+        previousTimestamp = parsedLogLine.timestamp;
+      }
+
+      if (
+        !logLevels ||
+        // we treat lines with no log level as if they specified 'info'
+        // but we don't display a default level for these lines to avoid
+        // unnecessary noise for users not using the expected log format
+        (!parsedLogLine.level && logLevels.info) ||
+        logLevels[parsedLogLine.level]
+      ) {
+        acc.push(parsedLogLine);
+      }
+      return acc;
+    }, []);
+    if (parsedLogs.length < 20_000) {
+      return (
+        <LogFormat
+          fields={{ level: showLevels, timestamp: showTimestamps }}
+          logs={parsedLogs}
+        />
+      );
     }
 
     const height = reason
@@ -266,12 +310,19 @@ export class LogContainer extends Component {
     return (
       <List
         height={height}
-        itemCount={logs.length}
-        itemData={logs}
+        itemCount={parsedLogs.length}
+        itemData={parsedLogs}
         itemSize={itemSize}
         width="100%"
       >
-        {LogLine}
+        {({ data, index, style }) => (
+          <div style={style}>
+            <LogFormat
+              fields={{ level: showLevels, timestamp: showTimestamps }}
+              logs={[data[index]]}
+            />
+          </div>
+        )}
       </List>
     );
   };
@@ -333,7 +384,7 @@ export class LogContainer extends Component {
       logs += decoder.decode(value, { stream: !done });
       this.setState({
         loading: false,
-        logs: logs.split('\n')
+        logs: logs.split(/\r?\n/)
       });
     } else {
       this.setState({
@@ -376,7 +427,7 @@ export class LogContainer extends Component {
       } else {
         this.setState({
           loading: false,
-          logs: logs ? logs.split('\n') : undefined
+          logs: logs ? logs.split(/\r?\n/) : undefined
         });
         if (continuePolling) {
           clearTimeout(this.timer);
diff --git a/packages/components/src/components/Log/Log.stories.jsx b/packages/components/src/components/Log/Log.stories.jsx
index 20b0c543a..61cfd3d4b 100644
--- a/packages/components/src/components/Log/Log.stories.jsx
+++ b/packages/components/src/components/Log/Log.stories.jsx
@@ -11,14 +11,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { useArgs } from '@storybook/preview-api';
+
 import Log from './Log';
 import LogsToolbar from '../LogsToolbar';
 
 const ansiLog =
   '\n=== demo-pipeline-run-1-build-skaffold-app-2mrdg-pod-59e217: build-step-git-source-skaffold-git-ml8j4 ===\n{"level":"info","ts":1553865693.943092,"logger":"fallback-logger","caller":"git-init/main.go:100","msg":"Successfully cloned https://github.com/GoogleContainerTools/skaffold @ \\"master\\" in path \\"/workspace\\""}\n\n=== demo-pipeline-run-1-build-skaffold-app-2mrdg-pod-59e217: build-step-build-and-push ===\n\u001b[36mINFO\u001b[0m[0000] Downloading base image golang:1.10.1-alpine3.7\n2019/03/29 13:21:34 No matching credentials were found, falling back on anonymous\n\u001b[36mINFO\u001b[0m[0001] Executing 0 build triggers\n\u001b[36mINFO\u001b[0m[0001] Unpacking rootfs as cmd RUN go build -o /app . requires it.\n\u001b[36mINFO\u001b[0m[0010] Taking snapshot of full filesystem...\n\u001b[36mINFO\u001b[0m[0015] Using files from context: [/workspace/examples/microservices/leeroy-app/app.go]\n\u001b[36mINFO\u001b[0m[0015] COPY app.go .\n\u001b[36mINFO\u001b[0m[0015] Taking snapshot of files...\n\u001b[36mINFO\u001b[0m[0015] RUN go build -o /app .\n\u001b[36mINFO\u001b[0m[0015] cmd: /bin/sh\n\u001b[36mINFO\u001b[0m[0015] args: [-c go build -o /app .]\n\u001b[36mINFO\u001b[0m[0016] Taking snapshot of full filesystem...\n\u001b[36mINFO\u001b[0m[0036] CMD ["./app"]\n\u001b[36mINFO\u001b[0m[0036] COPY --from=builder /app .\n\u001b[36mINFO\u001b[0m[0036] Taking snapshot of files...\nerror pushing image: failed to push to destination gcr.io/christiewilson-catfactory/leeroy-app:latest: Get https://gcr.io/v2/token?scope=repository%3Achristiewilson-catfactory%2Fleeroy-app%3Apush%2Cpull\u0026scope=repository%3Alibrary%2Falpine%3Apull\u0026service=gcr.io exit status 1\n\n=== demo-pipeline-run-1-build-skaffold-app-2mrdg-pod-59e217: nop ===\nBuild successful\n\r\r\n';
 
-const long = Array.from({ length: 60000 }, (v, i) => `Line ${i + 1}\n`).join(
-  ''
+const long = Array.from({ length: 60000 }, (v, i) => `Line ${i + 1}`).join(
+  '\n'
 );
 
 const performanceTest = Array.from(
@@ -30,7 +32,7 @@ export default {
   component: Log,
   decorators: [
     Story => (
-      <div style={{ width: '500px' }}>
+      <div style={{ width: 'auto' }}>
         <Story />
       </div>
     )
@@ -85,6 +87,8 @@ export const ANSICodes = {
 export const Windowed = {
   args: {
     fetchLogs: () => long,
+    showLevels: true,
+    showTimestamps: true,
     stepStatus: { terminated: { reason: 'Completed', exitCode: 0 } }
   }
 };
@@ -92,6 +96,8 @@ export const Windowed = {
 export const Performance = {
   args: {
     fetchLogs: () => performanceTest,
+    showLevels: true,
+    showTimestamps: true,
     stepStatus: { terminated: { reason: 'Completed', exitCode: 0 } }
   },
   name: 'performance test (<20,000 lines with ANSI)'
@@ -109,8 +115,39 @@ export const Skipped = {
 
 export const Toolbar = {
   args: {
-    fetchLogs: () => 'A log message',
-    stepStatus: { terminated: { reason: 'Completed', exitCode: 0 } },
-    toolbar: <LogsToolbar name="step_log_filename.txt" url="/step/log/url" />
+    fetchLogs: async () =>
+      (await import('./samples/timestamps_log_levels.txt?raw')).default,
+    logLevels: {
+      error: true,
+      warning: true,
+      info: true,
+      notice: true,
+      debug: false
+    },
+    showLevels: true,
+    showTimestamps: false,
+    stepStatus: { terminated: { reason: 'Completed', exitCode: 0 } }
+  },
+  render: args => {
+    const [, updateArgs] = useArgs();
+    return (
+      <Log
+        {...args}
+        toolbar={
+          <LogsToolbar
+            logLevels={args.showLevels ? args.logLevels : null}
+            name="step_log_filename.txt"
+            onToggleLogLevel={logLevel =>
+              updateArgs({ logLevels: { ...args.logLevels, ...logLevel } })
+            }
+            onToggleShowTimestamps={showTimestamps =>
+              updateArgs({ showTimestamps })
+            }
+            showTimestamps={args.showTimestamps}
+            url="/step/log/url"
+          />
+        }
+      />
+    );
   }
 };
diff --git a/packages/components/src/components/Log/_Log.scss b/packages/components/src/components/Log/_Log.scss
index 6c125260c..3bbe1c777 100644
--- a/packages/components/src/components/Log/_Log.scss
+++ b/packages/components/src/components/Log/_Log.scss
@@ -16,17 +16,19 @@ limitations under the License.
 @use '@carbon/react/scss/type' as *;
 
 pre.tkn--log {
+  --tkn-log-inline-padding: 1.6rem;
   position: relative;
   padding-block-start: 2rem;
   padding-block-end: 1.3rem;
-  padding-inline: 1.6rem;
+  padding-inline: var(--tkn-log-inline-padding);
   @include font-family('mono');
+  // @include type-style('code-01');
   font-size: 0.75rem;
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
     font-size: 0.6875rem;
   }
 
-  line-height: 0.95rem; // Update the react-window List itemSize if changing this
+  line-height: 1rem; // Update the react-window List itemSize if changing this
   overflow: hidden;
   background-color: $background;
   color: $text-primary;
@@ -49,12 +51,16 @@ pre.tkn--log {
   code {
     white-space: pre;
     overflow-wrap: normal;
+    display: block;
+    inline-size: auto;
+    min-inline-size: max-content;
   }
 
   .#{$prefix}--btn-set {
     position: absolute;
     inset-block-start: 0;
-    inset-inline-end: 0;
+    inset-inline-end: var(--tkn-log-inline-padding);
+    align-items: center;
   }
 
   .button-container {
@@ -63,7 +69,7 @@ pre.tkn--log {
     inset-block-start: 3.125rem; //equals the maximum between padding-block-start of pre.tkn--log and between the page header height
     inset-block-end: 0;
     inset-inline-end: 0;
-    inline-size: 1.6rem; //equals the padding-inline-end of pre.tkn--log
+    inline-size: var(--tkn-log-inline-padding);
   }
 
   #log-scroll-to-start-btn, #log-scroll-to-end-btn {
@@ -83,6 +89,7 @@ pre.tkn--log {
     inset-block-end: var(--tkn-scroll-button-bottom);
   }
 
+  .#{$prefix}--btn--ghost,
   .#{$prefix}--copy-btn {
     inline-size: 2rem;
     block-size: 2rem;
@@ -103,7 +110,8 @@ pre.tkn--log {
   }
 
   .tkn--log-trailer {
-    font-family: ibm-plex-sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
+    // @include type-style('helper-text-01');
     font-weight: bold;
 
     &[data-status='Completed'] {
diff --git a/packages/components/src/components/Log/samples/timestamps_log_levels.txt b/packages/components/src/components/Log/samples/timestamps_log_levels.txt
new file mode 100644
index 000000000..581404241
--- /dev/null
+++ b/packages/components/src/components/Log/samples/timestamps_log_levels.txt
@@ -0,0 +1,160 @@
+2024-11-14T14:10:53.354144861Z ::info::APP_REPO referred as https://github.com/example-org/example-app
+2024-11-14T14:10:56.300268594Z ::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-app. Repository Name identified as example-app
+2024-11-14T14:10:56.307088791Z ::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-app. Repository Owner identified as example-org
+2024-11-14T14:10:56.700290228Z ::debug::[setup_pr:87] | INCIDENT_ISSUES_URL https://github.com/example-org/example-compliance-issues
+2024-11-14T14:10:56.815017386Z ::debug::[get_repo_params:212] | Unable to locate repository parameters for key https://github.com/example-org/example-compliance-issues in the cache. Attempt to fetch repository parameters.
+2024-11-14T14:10:56.819937688Z ::debug::[get_repo_params:39] | get_repo_server_name called for https://github.com/example-org/example-compliance-issues. Repository Server Name identified as github.com
+2024-11-14T14:10:56.869171436Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-compliance-issues. SCM Type identified as github
+2024-11-14T14:10:56.869719012Z ::debug::[get_repo_params:201] | get_api_url called for https://github.com/example-org/example-compliance-issues. Reading token from environment property https://github.com/api/v3.
+2024-11-14T14:10:56.921468475Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-compliance-issues. SCM Type identified as github
+2024-11-14T14:10:56.921926910Z ::debug::[get_repo_params:97] | get_absolute_scm_type called for https://github.com/example-org/example-compliance-issues. SCM Type identified as github
+2024-11-14T14:10:56.930606377Z ::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-compliance-issues. Repository Owner identified as PIYUSH-Mundra
+2024-11-14T14:10:56.937633991Z ::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-compliance-issues. Repository Name identified as example-compliance-issues
+2024-11-14T14:10:56.938340279Z ::debug::[get_repo_params:218] | Update the cache for key https://github.com/example-org/example-compliance-issues.
+2024-11-14T14:10:57.053269000Z ::debug::[get_repo_params:223] | get_repo_params called for https://github.com/example-org/example-compliance-issues.
+2024-11-14T14:10:57.060958330Z ::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-compliance-issues. Repository Name identified as example-compliance-issues
+2024-11-14T14:10:57.065382263Z ::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-compliance-issues. Repository Owner identified as PIYUSH-Mundra
+2024-11-14T14:10:57.144848440Z ::debug::[get_repo_params:141] | get_repo_specific_token called for https://github.com/example-org/example-compliance-issues. Reading token from environment property 
+2024-11-14T14:10:57.145289008Z ::debug::[get_repo_params:153] | get_repo_token called for https://github.com/example-org/example-compliance-issues. Reading token from environment property .
+2024-11-14T14:10:57.145311781Z ::debug::[get_repo_params:162] | Unable to retreive repo_token from environment property. Attempt to fetch Personal Access Token.
+2024-11-14T14:10:57.177880037Z ::debug::[get_repo_params:116] | get_repo_pat called for https://github.com/example-org/example-compliance-issues. Auth Type identified as oauth
+2024-11-14T14:10:57.178355945Z ::debug::[get_repo_params:167] | Unable to retreive Personal Access Token. Attempt to fetch token from Toolchain Broker.
+2024-11-14T14:10:57.211621179Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-compliance-issues. SCM Type identified as github
+2024-11-14T14:10:57.891095096Z ::debug::[get_credentials_v2:187] | Fetch Git Token for SCM Type: github, SCM ID: integrated, Repository URL: https://github.com/example-org/example-compliance-issues.
+2024-11-14T14:10:57.935248942Z ::info::Fetch git token for https://github.com/example-org/example-inventory.git
+2024-11-14T14:10:59.051060095Z ::info::Fetching IAM access token...
+2024-11-14T14:11:00.302592151Z ::info::Fetch token from toolchain broker. Query URL: https://otc-github-consolidated-broker.us-south.devops.cloud.ibm.com/github/token?git_id=integrated&toolchain_id=85f5ae2c-e4bb-43aa-96db-92aa8f54368c&service_instance_id=40478e15-8b70-40f0-93c5-932c2b958b17&repo_url=https://github.com/example-org/example-inventory.git.
+2024-11-14T14:11:02.921082406Z ::debug::[get_credentials_v2:184] | Successfully retreived token for https://github.com/example-org/example-inventory.git and updated the cache.
+2024-11-14T14:11:11.213717482Z ::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-app. Repository Name identified as example-app
+2024-11-14T14:11:11.224234563Z ::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-app. Repository Owner identified as PIYUSH-Mundra
+2024-11-14T14:11:11.333949964Z ::debug::[get_repo_params:141] | get_repo_specific_token called for https://github.com/example-org/example-app. Reading token from environment property 
+2024-11-14T14:11:11.335344502Z ::debug::[get_repo_params:153] | get_repo_token called for https://github.com/example-org/example-app. Reading token from environment property .
+2024-11-14T14:11:11.335771106Z ::debug::[get_repo_params:162] | Unable to retreive repo_token from environment property. Attempt to fetch Personal Access Token.
+2024-11-14T14:11:11.380632436Z ::debug::[get_repo_params:116] | get_repo_pat called for https://github.com/example-org/example-app. Auth Type identified as oauth
+2024-11-14T14:11:11.381059828Z ::debug::[get_repo_params:167] | Unable to retreive Personal Access Token. Attempt to fetch token from Toolchain Broker.
+2024-11-14T14:11:11.444320839Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:12.149847003Z ::debug::[get_credentials_v2:187] | Fetch Git Token for SCM Type: github, SCM ID: integrated, Repository URL: https://github.com/example-org/example-app.
+2024-11-14T14:11:12.207642299Z ::info::Fetch git token for https://github.com/example-org/example-inventory.git
+2024-11-14T14:11:12.313844262Z ::debug::[get_credentials_v2:106] | Returning git token for https://github.com/example-org/example-inventory.git as found in cache.
+2024-11-14T14:11:12.640204642Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:12.640848952Z ::debug::[get_repo_params:97] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:17.217179370Z INFO: notifications are turned off . <event_notifications.en_helpers.event_notifications object at 0x7fb02302ab10>
+2024-11-14T14:11:17.324996212Z ::info::Cloning application repository of type=github repo=https://github.com/example-org/example-app:revert-4-test/test-3 branch= commit=
+2024-11-14T14:11:17.831509554Z ::info::Cloning Repository: https://github.com/example-org/example-app, Branch: master, Commit:  at Path:  with USE_SUBMODULES flag as: 0
+2024-11-14T14:11:19.025893202Z ::debug::[clone_repo:118] | Branch master exists in https://github.com/example-org/example-app
+2024-11-14T14:11:19.033207058Z ::debug::[clone_repo:143] | Attempting to clone with retry using git clone -q -b master https://****:****@github.com/example-org/example-app
+2024-11-14T14:11:26.947198505Z ::debug::[clone_repo:185] | Origin: 
+2024-11-14T14:11:26.958713232Z ::info::Successfully Cloned Repository: https://github.com/example-org/example-app, Branch: master, Commit: f16e5a66fa78262078d3590b75a242f311da4224 at Path: example-app.
+2024-11-14T14:11:29.826267156Z From https://github.com/example-org/example-app
+2024-11-14T14:11:29.826317883Z  * [new ref]         refs/pull/5/head -> temp_revert-4-test_test-3_temp
+2024-11-14T14:11:29.994799234Z Switched to branch 'temp_revert-4-test_test-3_temp'
+2024-11-14T14:11:30.041818627Z HEAD is now at b00b89b Revert "chore: update readme"
+2024-11-14T14:11:30.069444019Z Switched to branch 'master'
+2024-11-14T14:11:30.072838820Z Your branch is up to date with 'origin/master'.
+2024-11-14T14:11:30.145860476Z Updating f16e5a6..b00b89b
+2024-11-14T14:11:30.145891405Z Fast-forward
+2024-11-14T14:11:30.167249857Z  README.md | 3 ---
+2024-11-14T14:11:30.167288759Z  1 file changed, 3 deletions(-)
+2024-11-14T14:11:30.168330372Z ::debug::[merge_pr_branch:53] | git merge of pull request with id 5 and commit b00b89b53ead4344a55d003b1f5698183e6128ab to master succeeded.
+2024-11-14T14:11:30.567714946Z ::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-app. Repository Name identified as example-app
+2024-11-14T14:11:30.572994605Z ::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-app. Repository Owner identified as PIYUSH-Mundra
+2024-11-14T14:11:30.669224685Z ::debug::[get_repo_params:141] | get_repo_specific_token called for https://github.com/example-org/example-app. Reading token from environment property 
+2024-11-14T14:11:30.669846206Z ::debug::[get_repo_params:153] | get_repo_token called for https://github.com/example-org/example-app. Reading token from environment property .
+2024-11-14T14:11:30.670304272Z ::debug::[get_repo_params:162] | Unable to retreive repo_token from environment property. Attempt to fetch Personal Access Token.
+2024-11-14T14:11:30.718736005Z ::debug::[get_repo_params:116] | get_repo_pat called for https://github.com/example-org/example-app. Auth Type identified as oauth
+2024-11-14T14:11:30.720588941Z ::debug::[get_repo_params:167] | Unable to retreive Personal Access Token. Attempt to fetch token from Toolchain Broker.
+2024-11-14T14:11:30.769049756Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:31.563713080Z ::debug::[get_credentials_v2:187] | Fetch Git Token for SCM Type: github, SCM ID: integrated, Repository URL: https://github.com/example-org/example-app.
+2024-11-14T14:11:31.612290227Z ::info::Fetch git token for https://github.com/example-org/example-inventory.git
+2024-11-14T14:11:31.699130184Z ::debug::[get_credentials_v2:106] | Returning git token for https://github.com/example-org/example-inventory.git as found in cache.
+2024-11-14T14:11:32.516948769Z ::info::Cloning Repository: https://github.com/example-org/example-app, Branch: master, Commit:  at Path: one-pipeline-config-repo with USE_SUBMODULES flag as: 1
+2024-11-14T14:11:33.636651210Z ::debug::[clone_repo:118] | Branch master exists in https://github.com/example-org/example-app
+2024-11-14T14:11:33.645486961Z ::debug::[clone_repo:143] | Attempting to clone with retry using git clone -q -b master https://****:****@github.com/example-org/example-app one-pipeline-config-repo
+2024-11-14T14:11:37.349997961Z ::debug::[clone_repo:185] | Origin: 
+2024-11-14T14:11:37.367120803Z ::info::Successfully Cloned Repository: https://github.com/example-org/example-app, Branch: master, Commit: f16e5a66fa78262078d3590b75a242f311da4224 at Path: one-pipeline-config-repo.
+2024-11-14T14:11:42.498866720Z 
+2024-11-14T14:11:42.498915345Z 
+2024-11-14T14:11:42.498922840Z YAML linting of pipeline configuration passed
+2024-11-14T14:11:42.498926150Z 
+2024-11-14T14:11:42.498929514Z 
+2024-11-14T14:11:42.498934511Z List of custom stages within pipeline configuration missing implementation. For these stages pipeline will pick the default implementations. :
+2024-11-14T14:11:42.498941481Z - 'detect-secrets'
+2024-11-14T14:11:42.498945057Z - 'compliance-checks'
+2024-11-14T14:11:42.498948957Z - 'pr-finish'
+2024-11-14T14:11:42.498953257Z For more information on the stages that can be skipped refer to the doc link below
+2024-11-14T14:11:42.498957672Z https://cloud.ibm.com/docs/devsecops?topic=devsecops-cd-devsecops-pr-pipeline
+2024-11-14T14:11:42.498961928Z 
+2024-11-14T14:11:42.498964925Z 
+2024-11-14T14:11:43.342596128Z ::debug::[set-commit-status:48] | repository: https://github.com/example-org/example-app
+2024-11-14T14:11:43.342933970Z ::debug::[set-commit-status:60] | commit-sha: b00b89b53ead4344a55d003b1f5698183e6128ab
+2024-11-14T14:11:43.342946722Z ::debug::[set-commit-status:72] | state: pending
+2024-11-14T14:11:43.342952600Z ::debug::[set-commit-status:85] | description: Running unit tests...
+2024-11-14T14:11:43.343224450Z ::debug::[set-commit-status:97] | context: tekton/code-unit-tests
+2024-11-14T14:11:43.343242477Z ::debug::[set-commit-status:109] | task-name: code-unit-tests
+2024-11-14T14:11:43.343247262Z ::debug::[set-commit-status:121] | step-name: run-stage
+2024-11-14T14:11:43.343251080Z 
+2024-11-14T14:11:43.448849244Z ::debug::[get_repo_params:212] | Unable to locate repository parameters for key https://github.com/example-org/example-app in the cache. Attempt to fetch repository parameters.
+2024-11-14T14:11:43.453672514Z ::debug::[get_repo_params:39] | get_repo_server_name called for https://github.com/example-org/example-app. Repository Server Name identified as github.com
+2024-11-14T14:11:43.496797303Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:43.497560996Z ::debug::[get_repo_params:201] | get_api_url called for https://github.com/example-org/example-app. Reading token from environment property https://github.com/api/v3.
+2024-11-14T14:11:43.529001605Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:43.529338994Z ::debug::[get_repo_params:97] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:43.533299101Z ::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-app. Repository Owner identified as PIYUSH-Mundra
+2024-11-14T14:11:43.540457519Z ::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-app. Repository Name identified as example-app
+2024-11-14T14:11:43.540474134Z ::debug::[get_repo_params:218] | Update the cache for key https://github.com/example-org/example-app.
+2024-11-14T14:11:43.623629967Z ::debug::[get_repo_params:223] | get_repo_params called for https://github.com/example-org/example-app.
+2024-11-14T14:11:43.631172957Z ::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-app. Repository Name identified as example-app
+2024-11-14T14:11:43.635020828Z ::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-app. Repository Owner identified as PIYUSH-Mundra
+2024-11-14T14:11:43.719595703Z ::debug::[get_repo_params:141] | get_repo_specific_token called for https://github.com/example-org/example-app. Reading token from environment property 
+2024-11-14T14:11:43.719784194Z ::debug::[get_repo_params:153] | get_repo_token called for https://github.com/example-org/example-app. Reading token from environment property .
+2024-11-14T14:11:43.719789683Z ::debug::[get_repo_params:162] | Unable to retreive repo_token from environment property. Attempt to fetch Personal Access Token.
+2024-11-14T14:11:43.750695266Z ::debug::[get_repo_params:116] | get_repo_pat called for https://github.com/example-org/example-app. Auth Type identified as oauth
+2024-11-14T14:11:43.750947704Z ::debug::[get_repo_params:167] | Unable to retreive Personal Access Token. Attempt to fetch token from Toolchain Broker.
+2024-11-14T14:11:43.782406568Z ::debug::[get_repo_params:89] | get_absolute_scm_type called for https://github.com/example-org/example-app. SCM Type identified as github
+2024-11-14T14:11:44.375617191Z ::debug::[get_credentials_v2:187] | Fetch Git Token for SCM Type: github, SCM ID: integrated, Repository URL: https://github.com/example-org/example-app.
+2024-11-14T14:11:44.415251742Z ::info::Fetch git token for https://github.com/example-org/example-inventory.git
+2024-11-14T14:11:44.507177971Z ::debug::[get_credentials_v2:106] | Returning git token for https://github.com/example-org/example-inventory.git as found in cache.
+2024-11-14T14:11:44.825013004Z ::debug::[set-commit-status:219] | Calling set-commit-status with params %s: --state=pending --targetURL=https://cloud.ibm.com/devops/pipelines/tekton/a3fe08ad-d5de-4cd2-98b0-f5c5219a33cd/runs/5f3949cf-de85-415c-a6cc-74a336bbe206/code-unit-tests/run-stage?env_id=ibm:yp:us-south --context=tekton/code-unit-tests --description=Running unit tests... --git-provider=github --git-token-path=/workspace/app/secrets/app-token --git-api-url=https://github.com/api/v3
+2024-11-14T14:11:47.398894541Z ::info::set-commit-status for context tekton/code-unit-tests and commit with b00b89b53ead4344a55d003b1f5698183e6128ab in https://github.com/example-org/example-app to pending
+2024-11-14T14:11:50.294887769Z ::info::Validating pipeline config
+2024-11-14T14:11:51.257435452Z ::debug::[validate_pipeline:102] | Pipeline definitions are being referenced from branch with name chore/private-compliance-baseimage-3.59.5_commons-1.20.6
+2024-11-14T14:11:51.432935896Z ::debug::[validate_pipeline:157] | get_current_tag_branch retreived metadata for pipeline definitions. BRANCH_TAG_VALUE: chore/private-compliance-baseimage-3.59.5_commons-1.20.6, IS_BRANCH_OR_TAG: branch
+2024-11-14T14:11:51.781884301Z ::debug::[validate_pipeline:364] | Successfully retrieved the metadata for pipeline definitions. Proceeding with pipeline definition validation.
+2024-11-14T14:11:51.781910560Z ::debug::[validate_pipeline:296] | Validate Pipeline Definition for branch with value chore/private-compliance-baseimage-3.59.5_commons-1.20.6 and GIT SCM Provider github with production branches.
+2024-11-14T14:11:51.781916139Z ::debug::[validate_pipeline:278] | Validating pipeline definition source chore/private-compliance-baseimage-3.59.5_commons-1.20.6 against list of stable branches chore/private-compliance-baseimage-3.59.5_commons-1.20.6 v10 v10-preprocessor v9.
+2024-11-14T14:11:51.781922526Z ::warning::[validate_pipeline:280] | Your pipeline is currently running against pipeline definition branch: chore/private-compliance-baseimage-3.59.5_commons-1.20.6. It is advised to set theses branches: chore/private-compliance-baseimage-3.59.5_commons-1.20.6 v10 v10-preprocessor v9 .
+2024-11-14T14:11:53.458588489Z INFO: notifications are turned off . <event_notifications.en_helpers.event_notifications object at 0x7f0429477550>
+2024-11-14T14:11:54.166495164Z ::info::Getting compliance versions...
+2024-11-14T14:11:54.490186086Z ::debug::[validate_pipeline:157] | get_current_tag_branch retreived metadata for pipeline definitions. BRANCH_TAG_VALUE: , IS_BRANCH_OR_TAG: 
+2024-11-14T14:11:54.833949298Z ::info::Core BaseImage Version:           3.59.5
+2024-11-14T14:11:54.833995892Z ::info::Commons Version:                  1.20.6
+2024-11-14T14:11:54.834000728Z ::info::Pipeline Definition Source:       branch
+2024-11-14T14:11:54.836379443Z ::info::Pipeline Definition Source Value: chore/private-compliance-baseimage-3.59.5_commons-1.20.6
+2024-11-14T14:12:08.065631069Z ::error::Sample error
+2024-11-14T14:12:08.065631069Z ::warning::Sample warning
+2024-11-14T14:12:08.065631069Z ::notice::Sample notice
+2024-11-14T14:12:08.065631069Z ::info::Sample info
+2024-11-14T14:12:08.065631069Z Sample with no log level
+2024-11-14T14:12:08.065631069Z ::debug::Sample debug
+2024-11-14T14:12:08.065631069Z ::info::Details of asset created:
+2024-11-14T14:12:11.849912684Z ┌─────┬──────┬────┬─────┐
+2024-11-14T14:12:11.849981080Z │ Key │ Type │ ID │ URL │
+2024-11-14T14:12:11.849987327Z └─────┴──────┴────┴─────┘
+2024-11-14T14:12:11.869437298Z ::info::Details of evidence collected:
+2024-11-14T14:12:15.892827575Z ┌─────────────────┬────────────────────┐
+2024-11-14T14:12:15.892883264Z │ Attribute       │ Value              │
+2024-11-14T14:12:15.892888519Z ├─────────────────┼────────────────────┤
+2024-11-14T14:12:15.892895717Z │ Status          │ success            │
+2024-11-14T14:12:15.892900191Z ├─────────────────┼────────────────────┤
+2024-11-14T14:12:15.892904785Z │ Tool Type       │ jest               │
+2024-11-14T14:12:15.892908480Z ├─────────────────┼────────────────────┤
+2024-11-14T14:12:15.892912390Z │ Evidence ID     │ -                  │
+2024-11-14T14:12:15.892916374Z ├─────────────────┼────────────────────┤
+2024-11-14T14:12:15.892920207Z │ Evidence Type   │ com.ibm.unit_tests │
+2024-11-14T14:12:15.892924894Z ├─────────────────┼────────────────────┤
+2024-11-14T14:12:15.892930294Z │ Issues          │ -                  │
+2024-11-14T14:12:15.892933984Z ├─────────────────┼────────────────────┤
+2024-11-14T14:12:15.892938649Z │ Attachment URLs │                    │
+2024-11-14T14:12:15.892942307Z │                 │                    │
+2024-11-14T14:12:15.892947043Z └─────────────────┴────────────────────┘
+2024-11-14T14:12:15.989838531Z success
\ No newline at end of file
diff --git a/packages/components/src/components/LogFormat/LogFormat.jsx b/packages/components/src/components/LogFormat/LogFormat.jsx
index 3c868359c..8b980b33e 100644
--- a/packages/components/src/components/LogFormat/LogFormat.jsx
+++ b/packages/components/src/components/LogFormat/LogFormat.jsx
@@ -11,12 +11,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PropTypes from 'prop-types';
 import tlds from 'tlds';
 import LinkifyIt from 'linkify-it';
 import { classNames } from '@tektoncd/dashboard-utils';
 
 import { colors } from './defaults';
+import FormattedDate from '../FormattedDate';
 
 const linkifyIt = LinkifyIt().tlds(tlds);
 
@@ -24,6 +24,14 @@ const linkifyIt = LinkifyIt().tlds(tlds);
 const ansiRegex = /^\u001b([@-_])(.*?)([@-~])/;
 const characterRegex = /[^]/m;
 
+const getDecoratedLevel = level => {
+  if (!level) {
+    return null;
+  }
+
+  return <span className="tkn--log-line--level">{level}</span>;
+};
+
 const getXtermColor = commandStack => {
   if (commandStack.length >= 2 && commandStack[0] === '5') {
     commandStack.shift();
@@ -84,7 +92,7 @@ const linkify = (str, styleObj, classNameString) => {
   return elements;
 };
 
-const LogFormat = ({ children }) => {
+const LogFormat = ({ fields = { message: true }, logs = [] }) => {
   let properties = {
     classes: {},
     foregroundColor: null,
@@ -240,13 +248,14 @@ const LogFormat = ({ children }) => {
     };
   };
 
-  const parse = (ansi, index) => {
-    if (ansi.length === 0) {
+  const parse = (log, index) => {
+    const { level, message = '', timestamp } = log;
+    if (!message?.length && !timestamp && !level) {
       return <br key={index} />;
     }
     let offset = 0;
-    while (offset !== ansi.length) {
-      const str = ansi.substring(offset);
+    while (offset !== message.length) {
+      const str = message.substring(offset);
       const controlSequence = str.match(ansiRegex);
       if (controlSequence) {
         offset += controlSequence.index + controlSequence[0].length;
@@ -270,21 +279,36 @@ const LogFormat = ({ children }) => {
         )
       );
     }
-    return <div key={index}>{line}</div>;
+
+    return (
+      <div
+        className={classNames('tkn--log-line', {
+          [`tkn--log-level--${level}`]: level
+        })}
+        key={index}
+      >
+        {fields.timestamp && (
+          <span className="tkn--log-line--timestamp">
+            <FormattedDate
+              date={timestamp}
+              formatTooltip={() => timestamp}
+              includeSeconds
+            />
+          </span>
+        )}
+        {fields.level && getDecoratedLevel(level)}
+        {line}
+      </div>
+    );
   };
 
-  const convert = ansi =>
-    ansi.split(/\r?\n/).map((part, index) => {
+  const convert = () =>
+    logs.map((part, index) => {
       text = '';
       line = [];
       return parse(part, index);
     });
-
-  return <code>{convert(children)}</code>;
-};
-
-LogFormat.propTypes = {
-  children: PropTypes.string.isRequired
+  return <code>{convert()}</code>;
 };
 
 export default LogFormat;
diff --git a/packages/components/src/components/LogFormat/LogFormat.stories.js b/packages/components/src/components/LogFormat/LogFormat.stories.js
index 02d9adbab..48a0f030e 100644
--- a/packages/components/src/components/LogFormat/LogFormat.stories.js
+++ b/packages/components/src/components/LogFormat/LogFormat.stories.js
@@ -14,26 +14,29 @@ limitations under the License.
 import LogFormat from './LogFormat';
 
 const ansiColors = (() => {
-  let text = '';
+  const logs = [];
   // 16 named 'system' colors
   [30, 90, 40, 100].forEach(seq => {
+    let line = '';
     for (let i = 0; i < 8; i += 1) {
-      text += `\u001b[${seq + i}m${i}  \u001b[0m`;
+      line += `\u001b[${seq + i}m${i}  \u001b[0m`;
     }
-    text += '\n';
+    logs.push(line);
   });
-  text += '\n';
+  logs.push('');
   // 256-colors
   [38, 48].forEach(seq => {
+    let line = '';
     for (let i = 0; i < 256; i += 1) {
-      text += `\u001b[${seq};5;${i}m${i}  \u001b[0m`;
+      line += `\u001b[${seq};5;${i}m${i}  \u001b[0m`;
       if ((i + 1) % 6 === 4) {
-        text += '\n';
+        logs.push(line);
+        line = '';
       }
     }
-    text += '\n';
+    logs.push('');
   });
-  return text;
+  return logs.map(message => ({ message }));
 })();
 
 const ansiTextStyles = (() => {
@@ -45,11 +48,10 @@ const ansiTextStyles = (() => {
     cross: 9
   };
 
-  let text = '';
-  Object.entries(textStyles).forEach(([key, value]) => {
-    text += `\u001b[${value}m${key}\u001b[0m\n`;
-  });
-  return text;
+  const logs = Object.entries(textStyles).map(([key, value]) => ({
+    message: `\u001b[${value}m${key}\u001b[0m`
+  }));
+  return logs;
 })();
 
 export default {
@@ -64,19 +66,19 @@ export default {
 
 export const Colors = {
   args: {
-    children: ansiColors
+    logs: ansiColors
   }
 };
 
 export const TextStyles = {
   args: {
-    children: ansiTextStyles
+    logs: ansiTextStyles
   }
 };
 
 export const URLDetection = {
   args: {
-    children: `
+    logs: `
 + curl https://raw.githubusercontent.com/tektoncd/pipeline/master/tekton/koparse/koparse.py --output /usr/bin/koparse.py
   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                   Dload  Upload   Total   Spent    Left  Speed
@@ -86,5 +88,67 @@ export const URLDetection = {
 + IMAGES=(gcr.io/tekton-releases/github.com/tektoncd/dashboard/cmd/dashboard)
 + BUILT_IMAGES=($(/usr/bin/koparse.py --path /workspace/output/bucket-for-dashboard/latest/tekton-dashboard-release.yaml --base gcr.io/tekton-releases/github.com/tektoncd/dashboard --images \${IMAGES[@]}))
 `
+      .split('\n')
+      .map(message => ({ message }))
+  }
+};
+
+export const LogLevelsAndTimestamps = {
+  args: {
+    fields: {
+      level: true,
+      timestamp: true
+    },
+    logs: [
+      {
+        timestamp: '2024-11-14T14:10:53.354144861Z',
+        level: 'info',
+        message: 'Cloning repo'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.300268594Z',
+        level: 'debug',
+        message:
+          '[get_repo_params:30] | get_repo_name called for https://github.com/example-org/example-app. Repository Name identified as example-app'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.307088791Z',
+        level: 'debug',
+        message:
+          '[get_repo_params:18] | get_repo_owner called for https://github.com/example-org/example-app. Repository Owner identified as example-org'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.815017386Z',
+        level: 'debug',
+        message:
+          '[get_repo_params:212] | Unable to locate repository parameters for key https://github.com/example-org/example-app in the cache. Attempt to fetch repository parameters.'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.819937688Z',
+        level: 'debug',
+        message:
+          '[get_repo_params:39] | get_repo_server_name called for https://github.com/example-org/example-app. Repository Server Name identified as github.com'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.869719012Z',
+        level: null,
+        message: 'Sample with no log level'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.869719012Z',
+        level: 'error',
+        message: 'Sample error'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.869719012Z',
+        level: 'warning',
+        message: 'Sample warning'
+      },
+      {
+        timestamp: '2024-11-14T14:10:56.869719012Z',
+        level: 'notice',
+        message: 'Sample notice'
+      }
+    ]
   }
 };
diff --git a/packages/components/src/components/LogFormat/LogFormat.test.jsx b/packages/components/src/components/LogFormat/LogFormat.test.jsx
index 04d83bcff..f9a379445 100644
--- a/packages/components/src/components/LogFormat/LogFormat.test.jsx
+++ b/packages/components/src/components/LogFormat/LogFormat.test.jsx
@@ -14,8 +14,8 @@ limitations under the License.
 import { render } from '../../utils/test';
 import LogFormat from './LogFormat';
 
-const getElement = (text, query) => {
-  const { queryByText } = render(<LogFormat>{text}</LogFormat>);
+const getElement = (logs, query) => {
+  const { queryByText } = render(<LogFormat logs={logs} />);
   const queryRegex = new RegExp(query, 'i');
   return queryByText(queryRegex);
 };
@@ -26,82 +26,109 @@ const textClassPrefix = 'tkn--ansi--text-';
 
 describe('LogFormat', () => {
   it('displays text', () => {
-    const element = getElement('Hello World', 'Hello World');
+    const element = getElement([{ message: 'Hello World' }], 'Hello World');
     expect(element).toBeTruthy();
   });
 
   it('displays red text', () => {
-    const element = getElement('\u001b[31mHello World\u001b[0m', 'Hello World');
+    const element = getElement(
+      [{ message: '\u001b[31mHello World\u001b[0m' }],
+      'Hello World'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-red">Hello World</span>`
     );
   });
 
   it('displays green text', () => {
-    const element = getElement('\u001b[32mHello World\u001b[0m', 'Hello World');
+    const element = getElement(
+      [{ message: '\u001b[32mHello World\u001b[0m' }],
+      'Hello World'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-green">Hello World</span>`
     );
   });
 
   it('displays yellow text', () => {
-    const element = getElement('\u001b[33mHello World\u001b[0m', 'Hello World');
+    const element = getElement(
+      [{ message: '\u001b[33mHello World\u001b[0m' }],
+      'Hello World'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-yellow">Hello World</span>`
     );
   });
 
   it('displays blue text', () => {
-    const element = getElement('\u001b[34mHello World\u001b[0m', 'Hello World');
+    const element = getElement(
+      [{ message: '\u001b[34mHello World\u001b[0m' }],
+      'Hello World'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-blue">Hello World</span>`
     );
   });
 
   it('displays a magenta background', () => {
-    const element = getElement('\u001b[45mHello World', 'Hello World');
+    const element = getElement(
+      [{ message: '\u001b[45mHello World' }],
+      'Hello World'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${bgColorClassPrefix}-magenta">Hello World</span>`
     );
   });
 
   it('displays a cyan background', () => {
-    const element = getElement('\u001b[46mHello World\u001b[0m', 'Hello World');
+    const element = getElement(
+      [{ message: '\u001b[46mHello World\u001b[0m' }],
+      'Hello World'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${bgColorClassPrefix}-cyan">Hello World</span>`
     );
   });
 
   it('displays a white background', () => {
-    const element = getElement('\u001b[47mHello World', 'Hello World');
+    const element = getElement(
+      [{ message: '\u001b[47mHello World' }],
+      'Hello World'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${bgColorClassPrefix}-white">Hello World</span>`
     );
   });
 
   it('displays cyan text without a trailing reset', () => {
-    const element = getElement('\u001b[36mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[36mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-cyan">Hello</span>`
     );
   });
 
   it('displays red text on a blue background', () => {
-    const element = getElement('\u001b[31;44mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[31;44mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-red ${bgColorClassPrefix}-blue">Hello</span>`
     );
   });
 
   it('resets colors after red text on blue background', () => {
-    const element = getElement('\u001b[31;44mHello\u001b[0m world', 'world');
+    const element = getElement(
+      [{ message: '\u001b[31;44mHello\u001b[0m world' }],
+      'world'
+    );
     expect(element.innerHTML).toBe(
       `<span class="${fgColorClassPrefix}-red ${bgColorClassPrefix}-blue">Hello</span> world`
     );
   });
 
   it('performs a color change from red/blue to yellow/blue', () => {
-    const element = getElement('\u001b[31;44mHello\u001b[33m world', 'Hello');
+    const element = getElement(
+      [{ message: '\u001b[31;44mHello\u001b[33m world' }],
+      'Hello'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-red ${bgColorClassPrefix}-blue">Hello</span>`
     );
@@ -112,7 +139,7 @@ describe('LogFormat', () => {
 
   it('performs color change from red/blue to yellow/green', () => {
     const element = getElement(
-      '\u001b[31;44mHello\u001b[33;42m world',
+      [{ message: '\u001b[31;44mHello\u001b[33;42m world' }],
       'Hello'
     );
     expect(element.outerHTML).toBe(
@@ -124,110 +151,137 @@ describe('LogFormat', () => {
   });
 
   it('ignores unsupported codes', () => {
-    const element = getElement('\u001b[51mHello\u001b[0m', 'Hello');
+    const element = getElement(
+      [{ message: '\u001b[51mHello\u001b[0m' }],
+      'Hello'
+    );
     expect(element.innerHTML).toBe('Hello');
   });
 
   it('displays bright red text', () => {
-    const element = getElement('\u001b[91mHello\u001b[0m', 'Hello');
+    const element = getElement(
+      [{ message: '\u001b[91mHello\u001b[0m' }],
+      'Hello'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${fgColorClassPrefix}-bright-red">Hello</span>`
     );
   });
 
   it('displays bright red background', () => {
-    const element = getElement('\u001b[101mHello\u001b[0m', 'Hello');
+    const element = getElement(
+      [{ message: '\u001b[101mHello\u001b[0m' }],
+      'Hello'
+    );
     expect(element.outerHTML).toBe(
       `<span class="${bgColorClassPrefix}-bright-red">Hello</span>`
     );
   });
 
   it('displays a xterm color as a background', () => {
-    const element = getElement('\u001b[48;5;200mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[48;5;200mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       '<span style="background-color: rgb(255, 0, 215);">Hello</span>'
     );
   });
 
   it('displays a xterm color as a foreground', () => {
-    const element = getElement('\u001b[38;5;100mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[38;5;100mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       '<span style="color: rgb(135, 135, 0);">Hello</span>'
     );
   });
 
   it('displays bold text', () => {
-    const element = getElement('\u001b[1mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[1mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       `<span class="${textClassPrefix}-bold">Hello</span>`
     );
   });
 
   it('can reset bold text (bold off)', () => {
-    const element = getElement('\u001b[1mHello\u001b[21m world', 'world');
+    const element = getElement(
+      [{ message: '\u001b[1mHello\u001b[21m world' }],
+      'world'
+    );
     expect(element.innerHTML).toBe(
       `<span class="${textClassPrefix}-bold">Hello</span> world`
     );
   });
 
   it('can reset bold text (normal color / intensity)', () => {
-    const element = getElement('\u001b[1mHello\u001b[22m world', 'world');
+    const element = getElement(
+      [{ message: '\u001b[1mHello\u001b[22m world' }],
+      'world'
+    );
     expect(element.innerHTML).toBe(
       `<span class="${textClassPrefix}-bold">Hello</span> world`
     );
   });
 
   it('displays italic text', () => {
-    const element = getElement('\u001b[3mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[3mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       `<span class="${textClassPrefix}-italic">Hello</span>`
     );
   });
 
   it('can reset italic text', () => {
-    const element = getElement('\u001b[3mHello\u001b[23m world', 'world');
+    const element = getElement(
+      [{ message: '\u001b[3mHello\u001b[23m world' }],
+      'world'
+    );
     expect(element.innerHTML).toBe(
       `<span class="${textClassPrefix}-italic">Hello</span> world`
     );
   });
 
   it('displays underline text', () => {
-    const element = getElement('\u001b[4mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[4mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       `<span class="${textClassPrefix}-underline">Hello</span>`
     );
   });
 
   it('can resets underline text', () => {
-    const element = getElement('\u001b[4mHello\u001b[24m world', 'world');
+    const element = getElement(
+      [{ message: '\u001b[4mHello\u001b[24m world' }],
+      'world'
+    );
     expect(element.innerHTML).toBe(
       `<span class="${textClassPrefix}-underline">Hello</span> world`
     );
   });
 
   it('displays concealed text', () => {
-    const element = getElement('\u001b[8mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[8mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       `<span class="${textClassPrefix}-conceal">Hello</span>`
     );
   });
 
   it('can resets concealed text', () => {
-    const element = getElement('\u001b[8mHello\u001b[28m world', 'world');
+    const element = getElement(
+      [{ message: '\u001b[8mHello\u001b[28m world' }],
+      'world'
+    );
     expect(element.innerHTML).toBe(
       `<span class="${textClassPrefix}-conceal">Hello</span> world`
     );
   });
 
   it('displays crossed text', () => {
-    const element = getElement('\u001b[9mHello', 'Hello');
+    const element = getElement([{ message: '\u001b[9mHello' }], 'Hello');
     expect(element.outerHTML).toBe(
       `<span class="${textClassPrefix}-cross">Hello</span>`
     );
   });
 
   it('can reset crossed-out text', () => {
-    const element = getElement('\u001b[9mHello\u001b[29m world', 'world');
+    const element = getElement(
+      [{ message: '\u001b[9mHello\u001b[29m world' }],
+      'world'
+    );
     expect(element.innerHTML).toBe(
       `<span class="${textClassPrefix}-cross">Hello</span> world`
     );
@@ -235,7 +289,12 @@ describe('LogFormat', () => {
 
   it('displays links', () => {
     const element = getElement(
-      'A dashboard for Tekton! https://github.com/tektoncd/dashboard',
+      [
+        {
+          message:
+            'A dashboard for Tekton! https://github.com/tektoncd/dashboard'
+        }
+      ],
       'https://github.com/tektoncd/dashboard'
     );
     expect(element.outerHTML).toBe(
@@ -245,7 +304,12 @@ describe('LogFormat', () => {
 
   it('displays links with styles', () => {
     const element = getElement(
-      'A dashboard for Tekton!\u001b[9m\u001b[48;5;194mhttps://github.com/tektoncd/dashboard',
+      [
+        {
+          message:
+            'A dashboard for Tekton!\u001b[9m\u001b[48;5;194mhttps://github.com/tektoncd/dashboard'
+        }
+      ],
       'https://github.com/tektoncd/dashboard'
     );
     expect(element.outerHTML).toBe(
@@ -253,30 +317,62 @@ describe('LogFormat', () => {
     );
   });
 
-  it('converts new lines as line breaks', () => {
-    const text = 'Hello\n\nWorld';
-    const { container } = render(<LogFormat>{text}</LogFormat>);
+  it('handles empty lines', () => {
+    const logs = [{ message: 'Hello' }, { message: '' }, { message: 'World' }];
+    const { container } = render(<LogFormat logs={logs} />);
     expect(container.childNodes[0].innerHTML).toBe(
-      '<div>Hello</div><br><div>World</div>'
+      '<div class="tkn--log-line">Hello</div><br><div class="tkn--log-line">World</div>'
     );
   });
 
-  it('separates text by new lines', () => {
-    const text =
-      'Hello World\nA dashboard for Tekton! https://github.com/tektoncd/dashboard\nTekon is cool!';
-    const { container } = render(<LogFormat>{text}</LogFormat>);
+  it('handles multiple lines', () => {
+    const logs = [
+      {
+        message: 'Hello World'
+      },
+      {
+        message: 'A dashboard for Tekton! https://github.com/tektoncd/dashboard'
+      },
+      { message: 'Tekton is cool!' }
+    ];
+    const { container } = render(<LogFormat logs={logs} />);
     expect(container.childNodes[0].childNodes).toHaveLength(3);
   });
 
-  it('separates text by new lines and carriage returns', () => {
-    const text = '\r \n \r \n\r \n';
-    const { container } = render(<LogFormat>{text}</LogFormat>);
-    expect(container.childNodes[0].childNodes).toHaveLength(4);
-  });
-
   it('handles consecutive carriage returns without error', () => {
-    const text = '\r\r';
-    const { container } = render(<LogFormat>{text}</LogFormat>);
+    const logs = [{ message: '\r\r' }];
+    const { container } = render(<LogFormat logs={logs} />);
     expect(container.childNodes[0].childNodes).toHaveLength(1);
   });
+
+  it('handles timestamps', () => {
+    const timestamp = '2024-11-20 12:13:14';
+    const logs = [{ timestamp, message: 'Hello' }];
+    const { container, rerender } = render(
+      <LogFormat fields={{ timestamp: false }} logs={logs} />
+    );
+    expect(container.childNodes[0].innerHTML).toBe(
+      '<div class="tkn--log-line">Hello</div>'
+    );
+    rerender(<LogFormat fields={{ timestamp: true }} logs={logs} />);
+    expect(container.childNodes[0].innerHTML).toMatch(
+      // uses raw timestamp from input as title attribute
+      // contains formatted timestamp for display
+      // accept anything (`.*`) for test purposes as it may be localised
+      // and we're more concerned with the structure here
+      new RegExp(
+        `<div class="tkn--log-line"><span class="tkn--log-line--timestamp"><span title="${timestamp}">.*</span></span>Hello</div>`
+      )
+    );
+  });
+
+  it('handles levels', () => {
+    const logs = [{ level: 'debug', message: 'Hello' }];
+    const { queryByText, rerender } = render(
+      <LogFormat fields={{ level: false }} logs={logs} />
+    );
+    expect(queryByText('debug')).toBeFalsy();
+    rerender(<LogFormat fields={{ level: true }} logs={logs} />);
+    expect(queryByText('debug')).toBeTruthy();
+  });
 });
diff --git a/packages/components/src/components/LogFormat/_LogFormat.scss b/packages/components/src/components/LogFormat/_LogFormat.scss
index cea05a8d4..8a793f6cd 100644
--- a/packages/components/src/components/LogFormat/_LogFormat.scss
+++ b/packages/components/src/components/LogFormat/_LogFormat.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-2024 The Tekton Authors
 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
@@ -68,3 +68,71 @@ $colors: (
     text-decoration: line-through;
   }
 }
+
+.tkn--log-line {
+  min-block-size: 1rem; // explicitly set height to hold space for empty log line when timestamps disabled
+  transition: 0s background-color;
+  &:hover {
+    background-color: #ffffff10;
+    transition-delay: 0.5s;
+  }
+
+  // set default colours for the log level badge, this will be used for 'info'
+  --tkn-log-level-badge-background: var(--cds-tag-background-gray);
+  --tkn-log-level-badge-color: var(--cds-text-primary);
+
+  &.tkn--log-level--error {
+    --tkn-log-level-badge-background: rgb(from var(--cds-tag-background-red) r g b / 80%);
+    --tkn-log-level-badge-color: var(--cds-tag-color-red);
+
+    background-color: rgb(from var(--cds-support-error-inverse) r g b / 15%);
+
+    &:hover {
+      background-color: rgb(from var(--cds-support-error-inverse) r g b / 30%);
+    }
+  }
+
+  &.tkn--log-level--warning {
+    --tkn-log-level-badge-background: rgb(from var(--cds-support-warning) r g b / 35%);
+
+    background-color: rgb(from var(--cds-support-warning-inverse) r g b / 15%);
+
+    &:hover {
+      background-color: rgb(from var(--cds-support-warning-inverse) r g b / 30%);
+    }
+  }
+
+  &.tkn--log-level--notice {
+    --tkn-log-level-badge-background: var(--cds-tag-background-teal);
+    --tkn-log-level-badge-color: var(--cds-tag-color-teal);
+  }
+
+  &.tkn--log-level--debug {
+    --tkn-log-level-badge-background: rgb(from var(--cds-tag-background-purple) r g b / 60%);
+    --tkn-log-level-badge-color: var(--cds-tag-color-purple);
+  }
+
+  .tkn--log-line--timestamp {
+    color: var(--cds-text-helper);
+    font-weight: 300;
+  }
+
+  .tkn--log-line--level {
+    display: inline-block;
+    padding-inline: 4px;
+    background-color: var(--tkn-log-level-badge-background);
+    color: var(--tkn-log-level-badge-color);
+  }
+}
+
+// only add margin after timestamp if there's at least one log line with a
+// visible timestamp so we don't add unnecessary space when 'Show timestamps' is
+// enabled but for some reason there are no timestamps to show (maybe external
+// logs that didn't capture timestamps at runtime)
+.tkn--log:has(.tkn--log-line--timestamp:not(:empty)) .tkn--log-line--timestamp {
+  margin-inline-end: 0.5rem;
+}
+
+.tkn--log-line--level {
+  margin-inline-end: 0.5rem;
+}
diff --git a/packages/components/src/components/LogsToolbar/LogsToolbar.jsx b/packages/components/src/components/LogsToolbar/LogsToolbar.jsx
index 089bdda8f..a30843578 100644
--- a/packages/components/src/components/LogsToolbar/LogsToolbar.jsx
+++ b/packages/components/src/components/LogsToolbar/LogsToolbar.jsx
@@ -12,18 +12,41 @@ limitations under the License.
 */
 /* istanbul ignore file */
 import { useIntl } from 'react-intl';
-import { Download, Launch, Maximize, Minimize } from '@carbon/react/icons';
-import { usePrefix } from '@carbon/react';
+import {
+  Download,
+  Launch,
+  Maximize,
+  Minimize,
+  Settings
+} from '@carbon/react/icons';
+import {
+  unstable_FeatureFlags as FeatureFlags,
+  MenuItemDivider,
+  MenuItemGroup,
+  MenuItemSelectable,
+  OverflowMenu,
+  usePrefix
+} from '@carbon/react';
 
-const LogsToolbar = ({ isMaximized, name, toggleMaximized, url }) => {
+const LogsToolbar = ({
+  isMaximized,
+  name,
+  logLevels,
+  onToggleShowTimestamps,
+  onToggleLogLevel,
+  onToggleMaximized,
+  showTimestamps,
+  url
+}) => {
   const carbonPrefix = usePrefix();
   const intl = useIntl();
+
   return (
     <div className={`${carbonPrefix}--btn-set`}>
-      {toggleMaximized ? (
+      {onToggleMaximized ? (
         <button
           className={`${carbonPrefix}--btn ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
-          onClick={toggleMaximized}
+          onClick={onToggleMaximized}
           type="button"
         >
           {isMaximized ? (
@@ -47,35 +70,107 @@ const LogsToolbar = ({ isMaximized, name, toggleMaximized, url }) => {
           )}
         </button>
       ) : null}
-      <a
-        className={`${carbonPrefix}--btn ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
-        href={url}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Launch>
-          <title>
-            {intl.formatMessage({
-              id: 'dashboard.logs.launchButtonTooltip',
-              defaultMessage: 'Open logs in a new window'
-            })}
-          </title>
-        </Launch>
-      </a>
-      <a
-        className={`${carbonPrefix}--btn ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
-        download={name}
-        href={url}
-      >
-        <Download>
-          <title>
-            {intl.formatMessage({
-              id: 'dashboard.logs.downloadButtonTooltip',
-              defaultMessage: 'Download logs'
+      {url ? (
+        <>
+          <a
+            className={`${carbonPrefix}--btn ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Launch>
+              <title>
+                {intl.formatMessage({
+                  id: 'dashboard.logs.launchButtonTooltip',
+                  defaultMessage: 'Open logs in a new window'
+                })}
+              </title>
+            </Launch>
+          </a>
+          <a
+            className={`${carbonPrefix}--btn ${carbonPrefix}--btn--icon-only ${carbonPrefix}--copy-btn`}
+            download={name}
+            href={url}
+          >
+            <Download>
+              <title>
+                {intl.formatMessage({
+                  id: 'dashboard.logs.downloadButtonTooltip',
+                  defaultMessage: 'Download logs'
+                })}
+              </title>
+            </Download>
+          </a>
+        </>
+      ) : null}
+      <FeatureFlags enableV12Overflowmenu>
+        <OverflowMenu
+          className="tkn--log-settings-menu"
+          renderIcon={Settings}
+          size="sm"
+        >
+          <MenuItemSelectable
+            label={intl.formatMessage({
+              id: 'dashboard.logs.showTimestamps.label',
+              defaultMessage: 'Show timestamps'
             })}
-          </title>
-        </Download>
-      </a>
+            onChange={onToggleShowTimestamps}
+            selected={showTimestamps}
+          />
+          {logLevels && onToggleLogLevel ? (
+            <>
+              <MenuItemDivider />
+              <MenuItemGroup
+                label={intl.formatMessage({
+                  id: 'dashboard.logs.logLevels.label',
+                  defaultMessage: 'Log levels'
+                })}
+              >
+                <MenuItemSelectable
+                  label={intl.formatMessage({
+                    id: 'dashboard.logs.logLevels.error',
+                    defaultMessage: 'Error'
+                  })}
+                  onChange={error => onToggleLogLevel({ error })}
+                  selected={logLevels.error}
+                />
+                <MenuItemSelectable
+                  label={intl.formatMessage({
+                    id: 'dashboard.logs.logLevels.warning',
+                    defaultMessage: 'Warning'
+                  })}
+                  onChange={warning => onToggleLogLevel({ warning })}
+                  selected={logLevels.warning}
+                />
+                <MenuItemSelectable
+                  label={intl.formatMessage({
+                    id: 'dashboard.logs.logLevels.notice',
+                    defaultMessage: 'Notice'
+                  })}
+                  onChange={notice => onToggleLogLevel({ notice })}
+                  selected={logLevels.notice}
+                />
+                <MenuItemSelectable
+                  label={intl.formatMessage({
+                    id: 'dashboard.logs.logLevels.info',
+                    defaultMessage: 'Info (default)'
+                  })}
+                  onChange={info => onToggleLogLevel({ info })}
+                  selected={logLevels.info}
+                />
+                <MenuItemSelectable
+                  label={intl.formatMessage({
+                    id: 'dashboard.logs.logLevels.debug',
+                    defaultMessage: 'Debug'
+                  })}
+                  onChange={debug => onToggleLogLevel({ debug })}
+                  selected={logLevels.debug}
+                />
+              </MenuItemGroup>
+            </>
+          ) : null}
+        </OverflowMenu>
+      </FeatureFlags>
     </div>
   );
 };
diff --git a/packages/components/src/components/LogsToolbar/LogsToolbar.stories.jsx b/packages/components/src/components/LogsToolbar/LogsToolbar.stories.jsx
new file mode 100644
index 000000000..2825226ba
--- /dev/null
+++ b/packages/components/src/components/LogsToolbar/LogsToolbar.stories.jsx
@@ -0,0 +1,121 @@
+/*
+Copyright 2019-2024 The Tekton Authors
+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.
+*/
+
+import { useArgs } from '@storybook/preview-api';
+
+import LogsToolbar from './LogsToolbar';
+
+export default {
+  component: LogsToolbar,
+  decorators: [
+    Story => (
+      <pre className="tkn--log" style={{ width: '300px' }}>
+        <Story />
+      </pre>
+    )
+  ],
+  title: 'LogsToolbar'
+};
+
+export const Default = {
+  args: {
+    showTimestamps: false
+  },
+  render: args => {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <LogsToolbar
+        {...args}
+        onToggleShowTimestamps={showTimestamps =>
+          updateArgs({ showTimestamps })
+        }
+      />
+    );
+  }
+};
+
+export const WithLogLevels = {
+  args: {
+    ...Default.args,
+    logLevels: {
+      error: true,
+      warning: true,
+      info: true,
+      notice: true,
+      debug: false
+    }
+  },
+  render: args => {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <LogsToolbar
+        {...args}
+        onToggleLogLevel={logLevel =>
+          updateArgs({ logLevels: { ...args.logLevels, ...logLevel } })
+        }
+        onToggleShowTimestamps={showTimestamps =>
+          updateArgs({ showTimestamps })
+        }
+      />
+    );
+  }
+};
+
+export const WithMaximize = {
+  args: {
+    ...WithLogLevels.args,
+    isMaximized: false
+  },
+  render: args => {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <LogsToolbar
+        {...args}
+        onToggleLogLevel={logLevel =>
+          updateArgs({ logLevels: { ...args.logLevels, ...logLevel } })
+        }
+        onToggleMaximized={() => updateArgs({ isMaximized: !args.isMaximized })}
+        onToggleShowTimestamps={showTimestamps =>
+          updateArgs({ showTimestamps })
+        }
+      />
+    );
+  }
+};
+
+export const WithURL = {
+  args: {
+    ...WithMaximize.args,
+    name: 'some_filename.txt',
+    url: '/some/logs/url'
+  },
+  render: args => {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <LogsToolbar
+        {...args}
+        onToggleLogLevel={logLevel =>
+          updateArgs({ logLevels: { ...args.logLevels, ...logLevel } })
+        }
+        onToggleMaximized={() => updateArgs({ isMaximized: !args.isMaximized })}
+        onToggleShowTimestamps={showTimestamps =>
+          updateArgs({ showTimestamps })
+        }
+      />
+    );
+  }
+};
diff --git a/packages/components/src/components/PipelineRun/PipelineRun.jsx b/packages/components/src/components/PipelineRun/PipelineRun.jsx
index c74f6b3c3..ea335202a 100644
--- a/packages/components/src/components/PipelineRun/PipelineRun.jsx
+++ b/packages/components/src/components/PipelineRun/PipelineRun.jsx
@@ -51,6 +51,7 @@ export default /* istanbul ignore next */ function PipelineRun({
   handleTaskSelected = /* istanbul ignore next */ () => {},
   icon,
   loading,
+  logLevels,
   maximizedLogsContainer,
   onRetryChange,
   onViewChange = /* istanbul ignore next */ () => {},
@@ -63,6 +64,8 @@ export default /* istanbul ignore next */ function PipelineRun({
   selectedStepId = null,
   selectedTaskId = null,
   selectedTaskRunName,
+  showLogLevels,
+  showLogTimestamps,
   taskRuns,
   tasks,
   triggerHeader,
@@ -88,7 +91,7 @@ export default /* istanbul ignore next */ function PipelineRun({
     );
   }
 
-  function toggleLogsMaximized() {
+  function onToggleLogsMaximized() {
     setIsLogsMaximized(prevIsLogsMaximized => !prevIsLogsMaximized);
   }
 
@@ -110,19 +113,23 @@ export default /* istanbul ignore next */ function PipelineRun({
             stepStatus &&
             getLogsToolbar({
               isMaximized: isLogsMaximized,
+              onToggleMaximized:
+                !!maximizedLogsContainer && onToggleLogsMaximized,
               stepStatus,
-              taskRun,
-              toggleMaximized: !!maximizedLogsContainer && toggleLogsMaximized
+              taskRun
             })
           }
           fetchLogs={() => fetchLogs(stepName, stepStatus, taskRun)}
           forcePolling={forceLogPolling}
           key={`${selectedTaskId}:${selectedStepId}:${selectedRetry}`}
+          logLevels={logLevels}
           pollingInterval={pollingInterval}
           stepStatus={stepStatus}
           isLogsMaximized={isLogsMaximized}
           enableLogAutoScroll={enableLogAutoScroll}
           enableLogScrollButtons={enableLogScrollButtons}
+          showLevels={showLogLevels}
+          showTimestamps={showLogTimestamps}
         />
       </LogsRoot>
     );
diff --git a/packages/components/src/components/PipelineRun/PipelineRun.stories.jsx b/packages/components/src/components/PipelineRun/PipelineRun.stories.jsx
index 7b1efef3e..da5aa41c7 100644
--- a/packages/components/src/components/PipelineRun/PipelineRun.stories.jsx
+++ b/packages/components/src/components/PipelineRun/PipelineRun.stories.jsx
@@ -15,6 +15,7 @@ import { useArgs } from '@storybook/preview-api';
 import { labels as labelConstants } from '@tektoncd/dashboard-utils';
 
 import PipelineRun from '.';
+import LogsToolbar from '../LogsToolbar';
 
 const task = {
   metadata: {
@@ -197,6 +198,38 @@ export default {
   title: 'PipelineRun'
 };
 
+const logsWithTimestampsAndLevels = `2024-11-14T14:10:53.354144861Z::info::Cloning repo
+2024-11-14T14:10:56.300268594Z::debug::[get_repo_params:30] | get_repo_name called for https://github.com/example/app. Repository Name identified as app
+2024-11-14T14:10:56.307088791Z::debug::[get_repo_params:18] | get_repo_owner called for https://github.com/example/app. Repository Owner identified as example
+2024-11-14T14:10:56.815017386Z::debug::[get_repo_params:212] | Unable to locate repository parameters for key https://github.com/example/app in the cache. Attempt to fetch repository parameters.
+2024-11-14T14:10:56.819937688Z::debug::[get_repo_params:39] | get_repo_server_name called for https://github.com/example/app. Repository Server Name identified as github.com
+2024-11-14T14:10:56.869719012Z Sample with no log level
+2024-11-14T14:10:56.869719012Z::error::Sample error
+2024-11-14T14:10:56.869719012Z::warning::Sample warning
+2024-11-14T14:10:56.869719012Z::notice::Sample notice
+2024-11-14T14:11:08.065631069Z ::info::Details of asset created:
+2024-11-14T14:11:11.849912684Z ┌─────┬──────┬────┬─────┐
+2024-11-14T14:11:11.849981080Z │ Key │ Type │ ID │ URL │
+2024-11-14T14:11:11.849987327Z └─────┴──────┴────┴─────┘
+2024-11-14T14:11:11.869437298Z ::info::Details of evidence collected:
+2024-11-14T14:11:15.892827575Z ┌─────────────────┬────────────────────┐
+2024-11-14T14:11:15.892883264Z │ Attribute       │ Value              │
+2024-11-14T14:11:15.892888519Z ├─────────────────┼────────────────────┤
+2024-11-14T14:11:15.892895717Z │ Status          │ \x1B[32msuccess\x1B[39m            │
+2024-11-14T14:11:15.892900191Z ├─────────────────┼────────────────────┤
+2024-11-14T14:11:15.892904785Z │ Tool Type       │ jest               │
+2024-11-14T14:11:15.892908480Z ├─────────────────┼────────────────────┤
+2024-11-14T14:11:15.892912390Z │ Evidence ID     │ -                  │
+2024-11-14T14:11:15.892916374Z ├─────────────────┼────────────────────┤
+2024-11-14T14:11:15.892920207Z │ Evidence Type   │ com.ibm.unit_tests │
+2024-11-14T14:11:15.892924894Z ├─────────────────┼────────────────────┤
+2024-11-14T14:11:15.892930294Z │ Issues          │ -                  │
+2024-11-14T14:11:15.892933984Z ├─────────────────┼────────────────────┤
+2024-11-14T14:11:15.892938649Z │ Attachment URLs │                    │
+2024-11-14T14:11:15.892942307Z │                 │                    │
+2024-11-14T14:11:15.892947043Z └─────────────────┴────────────────────┘
+2024-11-14T14:11:15.989838531Z success`;
+
 export const Default = args => {
   const [, updateArgs] = useArgs();
 
@@ -320,12 +353,71 @@ export const WithPodDetails = args => {
           }
         }
       }}
+      selectedTaskId="task1"
       taskRuns={[taskRun]}
       tasks={[task]}
+      view="pod"
     />
   );
 };
 
+export const LogsWithTimestampsAndLevels = {
+  args: {
+    fetchLogs: () => logsWithTimestampsAndLevels,
+    logLevels: {
+      error: true,
+      warning: true,
+      notice: true,
+      info: true,
+      debug: false
+    },
+    pipelineRun: pipelineRunWithMinimalStatus,
+    selectedStepId: 'build',
+    selectedTaskId: task.metadata.name,
+    showLogLevels: true,
+    showLogTimestamps: true,
+    taskRuns: [taskRun],
+    tasks: [task]
+  },
+  render: args => {
+    const [, updateArgs] = useArgs();
+
+    return (
+      <PipelineRun
+        {...args}
+        getLogsToolbar={toolbarProps => (
+          <LogsToolbar
+            {...toolbarProps}
+            logLevels={args.logLevels}
+            onToggleLogLevel={level =>
+              updateArgs({ logLevels: { ...args.logLevels, ...level } })
+            }
+            onToggleShowTimestamps={showLogTimestamps =>
+              updateArgs({ showLogTimestamps })
+            }
+            showTimestamps={args.showLogTimestamps}
+          />
+        )}
+        handleTaskSelected={({
+          selectedStepId: stepId,
+          selectedTaskId: taskId
+        }) => {
+          updateArgs({ selectedStepId: stepId, selectedTaskId: taskId });
+        }}
+        onViewChange={selectedView => updateArgs({ view: selectedView })}
+        pipelineRun={pipelineRun}
+        taskRuns={[
+          taskRun,
+          taskRunWithWarning,
+          taskRunSkipped,
+          taskRunWithSkippedStep
+        ]}
+        tasks={[task]}
+      />
+    );
+  }
+};
+
 export const Empty = {};
 
 export const Error = { args: { error: 'Internal server error' } };
diff --git a/packages/e2e/cypress/e2e/common/pipelinerun.cy.js b/packages/e2e/cypress/e2e/common/pipelinerun.cy.js
index 9a8cbec14..f93ecc1e2 100644
--- a/packages/e2e/cypress/e2e/common/pipelinerun.cy.js
+++ b/packages/e2e/cypress/e2e/common/pipelinerun.cy.js
@@ -41,6 +41,7 @@ spec:
               script: |
                 #!/bin/ash
                 echo "Hello World!"
+                echo "::debug::This line should be hidden by default"
     `;
     cy.applyResource(pipelineRun);
 
@@ -52,5 +53,20 @@ spec:
     cy.get('header[class="tkn--pipeline-run-header"]')
       .find('span[class="tkn--status-label"]', { timeout: 15000 })
       .should('have.text', 'Succeeded');
+
+    cy.contains('.tkn--log', 'Hello World!');
+    cy.contains('.tkn--log', '2024').should('not.exist');
+    cy.get('.tkn--log-settings-menu button').click();
+    cy.contains('Show timestamps').click();
+    cy.contains(
+      // title starts with date formatted as 'yyyy-MM-dd'
+      `.tkn--log [title^="${new Date().toISOString().substring(0, 10)}"]`,
+      // something that looks like part of a timestamp: `mm:ss`
+      /\d{2}:\d{2}/
+    );
+    cy.contains('.tkn--log', 'hidden by default').should('not.exist');
+    cy.get('.tkn--log-settings-menu button').click();
+    cy.contains('Debug').click();
+    cy.contains('.tkn--log', 'hidden by default');
   });
 });
diff --git a/src/api/index.js b/src/api/index.js
index 8e2d6e3be..8e235c6e0 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -22,7 +22,6 @@ import {
   apiRoot,
   getKubeAPI,
   getTektonPipelinesAPIVersion,
-  isLogTimestampsEnabled,
   tektonAPIGroup,
   useCollection,
   useResource
@@ -157,11 +156,10 @@ export function getExternalLogURL({
 }
 
 export function getPodLogURL({ container, name, namespace, follow }) {
-  const timestamps = isLogTimestampsEnabled();
   const queryParams = {
     ...(container && { container }),
     ...(follow && { follow }),
-    ...(timestamps && { timestamps })
+    timestamps: true
   };
   const uri = `${getKubeAPI({
     group: 'core',
diff --git a/src/api/utils.js b/src/api/utils.js
index c22e9572e..97cc469f8 100644
--- a/src/api/utils.js
+++ b/src/api/utils.js
@@ -320,6 +320,34 @@ export function setLogTimestampsEnabled(enabled) {
   localStorage.setItem('tkn-logs-timestamps', enabled);
 }
 
+export function getLogLevels() {
+  let logLevels = localStorage.getItem('tkn-logs-levels');
+  if (logLevels) {
+    try {
+      logLevels = JSON.parse(logLevels);
+    } catch (e) {
+      // we'll fallback to a default config below
+      logLevels = null;
+    }
+  }
+
+  if (!logLevels) {
+    logLevels = {
+      error: true,
+      warning: true,
+      info: true,
+      notice: true,
+      debug: false
+    };
+  }
+
+  return logLevels;
+}
+
+export function setLogLevels(levels) {
+  localStorage.setItem('tkn-logs-levels', JSON.stringify(levels));
+}
+
 export function removeSystemAnnotations(resource) {
   Object.keys(resource.metadata.annotations).forEach(annotation => {
     if (annotation.startsWith('tekton.dev/')) {
diff --git a/src/api/utils.test.js b/src/api/utils.test.js
index f80f42d6c..4187ae146 100644
--- a/src/api/utils.test.js
+++ b/src/api/utils.test.js
@@ -377,24 +377,6 @@ describe('isLogTimestampsEnabled', () => {
   });
 });
 
-describe('isLogTimestampsEnabled', () => {
-  afterEach(() => {
-    localStorage.removeItem('tkn-logs-timestamps');
-  });
-
-  it('handles valid values', () => {
-    localStorage.setItem('tkn-logs-timestamps', true);
-    expect(utils.isLogTimestampsEnabled()).toBe(true);
-    localStorage.setItem('tkn-logs-timestamps', false);
-    expect(utils.isLogTimestampsEnabled()).toBe(false);
-  });
-
-  it('handles invalid values', () => {
-    localStorage.setItem('tkn-logs-timestamps', 'foo');
-    expect(utils.isLogTimestampsEnabled()).toBe(false);
-  });
-});
-
 describe('setLogTimestampsEnabled', () => {
   afterEach(() => {
     localStorage.removeItem('tkn-logs-timestamps');
diff --git a/src/containers/LogsToolbar/LogsToolbar.jsx b/src/containers/LogsToolbar/LogsToolbar.jsx
new file mode 100644
index 000000000..7cf7bafa9
--- /dev/null
+++ b/src/containers/LogsToolbar/LogsToolbar.jsx
@@ -0,0 +1,54 @@
+/*
+Copyright 2020-2024 The Tekton Authors
+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.
+*/
+
+import { LogsToolbar } from '@tektoncd/dashboard-components';
+
+import { getExternalLogURL, getPodLogURL } from '../../api';
+
+export default function LogsToolbarContainer({
+  externalLogsURL,
+  isMaximized,
+  isUsingExternalLogs,
+  logLevels,
+  onToggleLogLevel,
+  onToggleMaximized,
+  onToggleShowTimestamps,
+  showTimestamps,
+  stepStatus,
+  taskRun
+}) {
+  const { container } = stepStatus;
+  const { namespace } = taskRun.metadata;
+  const { podName } = taskRun.status;
+
+  const logURL = isUsingExternalLogs
+    ? getExternalLogURL({ container, externalLogsURL, namespace, podName })
+    : getPodLogURL({
+        container,
+        name: podName,
+        namespace
+      });
+
+  return (
+    <LogsToolbar
+      isMaximized={isMaximized}
+      logLevels={logLevels}
+      name={`${podName}__${container}__log.txt`}
+      showTimestamps={showTimestamps}
+      onToggleLogLevel={onToggleLogLevel}
+      onToggleMaximized={onToggleMaximized}
+      onToggleShowTimestamps={onToggleShowTimestamps}
+      url={logURL}
+    />
+  );
+}
diff --git a/src/containers/LogsToolbar/LogsToolbar.test.jsx b/src/containers/LogsToolbar/LogsToolbar.test.jsx
new file mode 100644
index 000000000..510ac0813
--- /dev/null
+++ b/src/containers/LogsToolbar/LogsToolbar.test.jsx
@@ -0,0 +1,66 @@
+/*
+Copyright 2020-2024 The Tekton Authors
+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.
+*/
+
+import * as API from '../../api';
+import { render } from '../../utils/test';
+
+import LogsToolbarContainer from './LogsToolbar';
+
+describe('getLogsToolbar', () => {
+  it('should handle pod logs (default)', () => {
+    const container = 'fake_container';
+    const namespace = 'fake_namespace';
+    const podName = 'fake_podname';
+    const stepStatus = { container };
+    const taskRun = { metadata: { namespace }, status: { podName } };
+    vi.spyOn(API, 'getPodLogURL');
+    vi.spyOn(API, 'getExternalLogURL');
+
+    render(<LogsToolbarContainer stepStatus={stepStatus} taskRun={taskRun} />);
+
+    expect(API.getExternalLogURL).not.toHaveBeenCalled();
+    expect(API.getPodLogURL).toHaveBeenCalledWith({
+      container,
+      name: podName,
+      namespace
+    });
+  });
+
+  it('should handle external logs', () => {
+    const container = 'fake_container';
+    const externalLogsURL = 'fake_externalLogsURL';
+    const namespace = 'fake_namespace';
+    const podName = 'fake_podname';
+    const stepStatus = { container };
+    const taskRun = { metadata: { namespace }, status: { podName } };
+    vi.spyOn(API, 'getPodLogURL');
+    vi.spyOn(API, 'getExternalLogURL');
+
+    render(
+      <LogsToolbarContainer
+        externalLogsURL={externalLogsURL}
+        isUsingExternalLogs
+        stepStatus={stepStatus}
+        taskRun={taskRun}
+      />
+    );
+
+    expect(API.getPodLogURL).not.toHaveBeenCalled();
+    expect(API.getExternalLogURL).toHaveBeenCalledWith({
+      container,
+      externalLogsURL,
+      namespace,
+      podName
+    });
+  });
+});
diff --git a/packages/components/src/components/LogsToolbar/LogsToolbar.stories.js b/src/containers/LogsToolbar/index.js
similarity index 67%
rename from packages/components/src/components/LogsToolbar/LogsToolbar.stories.js
rename to src/containers/LogsToolbar/index.js
index 5b26c9b76..128b61b5b 100644
--- a/packages/components/src/components/LogsToolbar/LogsToolbar.stories.js
+++ b/src/containers/LogsToolbar/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2024 The Tekton Authors
+Copyright 2024 The Tekton Authors
 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
@@ -10,17 +10,6 @@ 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.
 */
+/* istanbul ignore file */
 
-import LogsToolbar from './LogsToolbar';
-
-export default {
-  component: LogsToolbar,
-  title: 'LogsToolbar'
-};
-
-export const Default = {
-  args: {
-    name: 'some_filename.txt',
-    url: '/some/logs/url'
-  }
-};
+export { default } from './LogsToolbar';
diff --git a/src/containers/PipelineRun/PipelineRun.jsx b/src/containers/PipelineRun/PipelineRun.jsx
index 303e75f38..6c9bf715a 100644
--- a/src/containers/PipelineRun/PipelineRun.jsx
+++ b/src/containers/PipelineRun/PipelineRun.jsx
@@ -33,6 +33,7 @@ import { InlineNotification, RadioTile, TileGroup } from '@carbon/react';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 
+import LogsToolbar from '../LogsToolbar';
 import {
   cancelPipelineRun,
   deletePipelineRun,
@@ -49,21 +50,49 @@ import {
   useTaskRuns,
   useTasks
 } from '../../api';
-import {
-  getLogsRetriever,
-  getLogsToolbar,
-  getViewChangeHandler
-} from '../../utils';
+import { getLogsRetriever, getViewChangeHandler } from '../../utils';
 import NotFound from '../NotFound';
+import {
+  getLogLevels,
+  isLogTimestampsEnabled,
+  setLogLevels,
+  setLogTimestampsEnabled
+} from '../../api/utils';
 
 const { PIPELINE_TASK, RETRY, STEP, TASK_RUN_NAME, VIEW } = queryParamConstants;
 
-export /* istanbul ignore next */ function PipelineRunContainer() {
+export /* istanbul ignore next */ function PipelineRunContainer({
+  // we may consider customisation of the log format in future
+  showLogLevels = true
+}) {
   const intl = useIntl();
   const location = useLocation();
   const navigate = useNavigate();
   const params = useParams();
 
+  const [logLevels, setLogLevelsState] = useState(getLogLevels());
+  const [showTimestamps, setShowTimestamps] = useState(
+    isLogTimestampsEnabled()
+  );
+
+  function onToggleLogLevel(logLevel) {
+    setLogLevelsState(levels => {
+      const newLevels = { ...levels, ...logLevel };
+      // if (!Object.values(newLevels).filter(Boolean).length) {
+      //   // TODO: logs - notification or allow?
+      //   alert('must have at least 1 log level enabled');
+      //   return levels;
+      // }
+      setLogLevels(newLevels);
+      return newLevels;
+    });
+  }
+
+  function onToggleShowTimestamps(show) {
+    setShowTimestamps(show);
+    setLogTimestampsEnabled(show);
+  }
+
   const { name, namespace } = params;
 
   const queryParams = new URLSearchParams(location.search);
@@ -531,13 +560,18 @@ export /* istanbul ignore next */ function PipelineRunContainer() {
         })}
         handleTaskSelected={handleTaskSelected}
         loading={isLoading}
-        getLogsToolbar={toolbarParams =>
-          getLogsToolbar({
-            ...toolbarParams,
-            externalLogsURL,
-            isUsingExternalLogs
-          })
-        }
+        logLevels={logLevels}
+        getLogsToolbar={toolbarProps => (
+          <LogsToolbar
+            {...toolbarProps}
+            externalLogsURL={externalLogsURL}
+            isUsingExternalLogs={isUsingExternalLogs}
+            logLevels={showLogLevels && logLevels}
+            onToggleLogLevel={onToggleLogLevel}
+            onToggleShowTimestamps={onToggleShowTimestamps}
+            showTimestamps={showTimestamps}
+          />
+        )}
         maximizedLogsContainer={maximizedLogsContainer.current}
         onRetryChange={retry => {
           if (Number.isInteger(retry)) {
@@ -562,6 +596,8 @@ export /* istanbul ignore next */ function PipelineRunContainer() {
         selectedStepId={currentSelectedStepId}
         selectedTaskId={selectedTaskId}
         selectedTaskRunName={currentTaskRunName}
+        showLogLevels={showLogLevels}
+        showLogTimestamps={showTimestamps}
         taskRuns={taskRuns}
         tasks={tasks.concat(clusterTasks)}
         view={view}
diff --git a/src/containers/Settings/Settings.jsx b/src/containers/Settings/Settings.jsx
index ad342413f..ad51e9118 100644
--- a/src/containers/Settings/Settings.jsx
+++ b/src/containers/Settings/Settings.jsx
@@ -22,9 +22,7 @@ import {
 
 import { getTheme, setTheme } from '../../utils';
 import {
-  isLogTimestampsEnabled,
   isPipelinesV1ResourcesEnabled,
-  setLogTimestampsEnabled,
   setPipelinesV1ResourcesEnabled
 } from '../../api/utils';
 
@@ -79,24 +77,6 @@ export function Settings() {
         </TileGroup>
 
         <Stack gap={7}>
-          <Toggle
-            defaultToggled={isLogTimestampsEnabled()}
-            id="tkn--log-timestamps-toggle"
-            labelText={intl.formatMessage({
-              id: 'dashboard.logs.showTimestamps.label',
-              defaultMessage: 'Show log timestamps'
-            })}
-            labelA={intl.formatMessage({
-              id: 'dashboard.toggle.off',
-              defaultMessage: 'Off'
-            })}
-            labelB={intl.formatMessage({
-              id: 'dashboard.toggle.on',
-              defaultMessage: 'On'
-            })}
-            onToggle={checked => setLogTimestampsEnabled(checked)}
-          />
-
           <Toggle
             defaultToggled={isPipelinesV1ResourcesEnabled()}
             id="tkn--pipelines-v1-resources-toggle"
diff --git a/src/containers/Settings/Settings.test.jsx b/src/containers/Settings/Settings.test.jsx
index 9fa687484..80880f465 100644
--- a/src/containers/Settings/Settings.test.jsx
+++ b/src/containers/Settings/Settings.test.jsx
@@ -36,21 +36,6 @@ describe('Settings', () => {
     expect(Utils.setTheme).toHaveBeenCalledWith('dark');
   });
 
-  it('should render the log timestamp settings correctly', () => {
-    vi.spyOn(APIUtils, 'isLogTimestampsEnabled').mockImplementation(() => true);
-    vi.spyOn(APIUtils, 'setLogTimestampsEnabled');
-
-    const { getByRole } = render(<Settings />);
-
-    const logTimestampToggle = getByRole('switch', {
-      name: /show log timestamps/i
-    });
-    expect(logTimestampToggle).toBeTruthy();
-    expect(within(logTimestampToggle.parentNode).getByText('On')).toBeTruthy();
-    fireEvent.click(logTimestampToggle);
-    expect(APIUtils.setLogTimestampsEnabled).toHaveBeenCalledWith(false);
-  });
-
   it('should render the v1 API settings correctly', () => {
     vi.spyOn(APIUtils, 'isPipelinesV1ResourcesEnabled').mockImplementation(
       () => true
diff --git a/src/containers/TaskRun/TaskRun.jsx b/src/containers/TaskRun/TaskRun.jsx
index 6c4094dca..57cf547b4 100644
--- a/src/containers/TaskRun/TaskRun.jsx
+++ b/src/containers/TaskRun/TaskRun.jsx
@@ -37,11 +37,8 @@ import {
   useTitleSync
 } from '@tektoncd/dashboard-utils';
 
-import {
-  getLogsRetriever,
-  getLogsToolbar,
-  getViewChangeHandler
-} from '../../utils';
+import LogsToolbar from '../LogsToolbar';
+import { getLogsRetriever, getViewChangeHandler } from '../../utils';
 import {
   cancelTaskRun,
   deleteTaskRun,
@@ -56,15 +53,47 @@ import {
   useTaskRun
 } from '../../api';
 import NotFound from '../NotFound';
+import {
+  getLogLevels,
+  isLogTimestampsEnabled,
+  setLogLevels,
+  setLogTimestampsEnabled
+} from '../../api/utils';
 
 const { STEP, RETRY, TASK_RUN_DETAILS, VIEW } = queryParamConstants;
 
-export function TaskRunContainer() {
+export function TaskRunContainer({
+  // we may consider customisation of the log format in future
+  showLogLevels = true
+}) {
   const intl = useIntl();
   const location = useLocation();
   const navigate = useNavigate();
   const params = useParams();
 
+  const [logLevels, setLogLevelsState] = useState(getLogLevels());
+  const [showTimestamps, setShowTimestamps] = useState(
+    isLogTimestampsEnabled()
+  );
+
+  function onToggleLogLevel(logLevel) {
+    setLogLevelsState(levels => {
+      const newLevels = { ...levels, ...logLevel };
+      // if (!Object.values(newLevels).filter(Boolean).length) {
+      //   // TODO: logs - notification or allow?
+      //   alert('must have at least 1 log level enabled');
+      //   return levels;
+      // }
+      setLogLevels(newLevels);
+      return newLevels;
+    });
+  }
+
+  function onToggleShowTimestamps(show) {
+    setShowTimestamps(show);
+    setLogTimestampsEnabled(show);
+  }
+
   const { name, namespace: namespaceParam } = params;
 
   const queryParams = new URLSearchParams(location.search);
@@ -134,7 +163,7 @@ export function TaskRunContainer() {
     { enabled: !!podName && view === 'pod' }
   );
 
-  function toggleLogsMaximized() {
+  function onToggleLogsMaximized() {
     setIsLogsMaximized(state => !state);
   }
 
@@ -158,20 +187,31 @@ export function TaskRunContainer() {
           : null)}
       >
         <Log
-          toolbar={getLogsToolbar({
-            externalLogsURL,
-            isMaximized: isLogsMaximized,
-            isUsingExternalLogs,
-            stepStatus,
-            taskRun: run,
-            toggleMaximized: !!maximizedLogsContainer && toggleLogsMaximized
-          })}
           fetchLogs={() => logsRetriever(stepName, stepStatus, run)}
-          key={`${stepName}:${currentRetry}`}
-          stepStatus={stepStatus}
           isLogsMaximized={isLogsMaximized}
           enableLogAutoScroll
           enableLogScrollButtons
+          key={`${stepName}:${currentRetry}`}
+          logLevels={logLevels}
+          showLevels={showLogLevels}
+          showTimestamps={showTimestamps}
+          stepStatus={stepStatus}
+          toolbar={
+            <LogsToolbar
+              externalLogsURL={externalLogsURL}
+              isMaximized={isLogsMaximized}
+              isUsingExternalLogs={isUsingExternalLogs}
+              logLevels={showLogLevels && logLevels}
+              onToggleLogLevel={onToggleLogLevel}
+              onToggleMaximized={
+                !!maximizedLogsContainer && onToggleLogsMaximized
+              }
+              onToggleShowTimestamps={onToggleShowTimestamps}
+              showTimestamps={showTimestamps}
+              stepStatus={stepStatus}
+              taskRun={run}
+            />
+          }
         />
       </LogsRoot>
     );
diff --git a/src/containers/index.js b/src/containers/index.js
index 5dacdc021..79a369bdf 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -30,6 +30,7 @@ export { default as LabelFilter } from './LabelFilter';
 export { default as ListPageLayout } from './ListPageLayout';
 export { default as LoadingShell } from './LoadingShell';
 export { default as LogoutButton } from './LogoutButton';
+export { default as LogsToolbar } from './LogsToolbar';
 export { default as NamespacesDropdown } from './NamespacesDropdown';
 export { default as NotFound } from './NotFound';
 export { default as PipelineRun } from './PipelineRun';
diff --git a/src/nls/messages_de.json b/src/nls/messages_de.json
index 6b9f57148..7f8c89c11 100644
--- a/src/nls/messages_de.json
+++ b/src/nls/messages_de.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "",
   "dashboard.logs.downloadButtonTooltip": "",
   "dashboard.logs.launchButtonTooltip": "",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "",
diff --git a/src/nls/messages_en.json b/src/nls/messages_en.json
index 50d636874..a7c756513 100644
--- a/src/nls/messages_en.json
+++ b/src/nls/messages_en.json
@@ -149,12 +149,18 @@
   "dashboard.logo.tooltip": "Meow",
   "dashboard.logs.downloadButtonTooltip": "Download logs",
   "dashboard.logs.launchButtonTooltip": "Open logs in a new window",
+  "dashboard.logs.logLevels.debug": "Debug",
+  "dashboard.logs.logLevels.error": "Error",
+  "dashboard.logs.logLevels.info": "Info (default)",
+  "dashboard.logs.logLevels.label": "Log levels",
+  "dashboard.logs.logLevels.notice": "Notice",
+  "dashboard.logs.logLevels.warning": "Warning",
   "dashboard.logs.maximize": "Maximize",
   "dashboard.logs.pending": "Final logs pending",
   "dashboard.logs.restore": "Return to default",
   "dashboard.logs.scrollToBottom": "Scroll to end of logs",
   "dashboard.logs.scrollToTop": "Scroll to start of logs",
-  "dashboard.logs.showTimestamps.label": "Show log timestamps",
+  "dashboard.logs.showTimestamps.label": "Show timestamps",
   "dashboard.metadata.dateCreated": "Date created:",
   "dashboard.metadata.labels": "Labels:",
   "dashboard.metadata.namespace": "Namespace:",
diff --git a/src/nls/messages_es.json b/src/nls/messages_es.json
index 75bd5f972..4652ed237 100644
--- a/src/nls/messages_es.json
+++ b/src/nls/messages_es.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "",
   "dashboard.logs.downloadButtonTooltip": "",
   "dashboard.logs.launchButtonTooltip": "",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "",
diff --git a/src/nls/messages_fr.json b/src/nls/messages_fr.json
index b3d4046d5..520e4e57c 100644
--- a/src/nls/messages_fr.json
+++ b/src/nls/messages_fr.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "",
   "dashboard.logs.downloadButtonTooltip": "",
   "dashboard.logs.launchButtonTooltip": "",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "",
diff --git a/src/nls/messages_it.json b/src/nls/messages_it.json
index a591aca33..bae5c6379 100644
--- a/src/nls/messages_it.json
+++ b/src/nls/messages_it.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "",
   "dashboard.logs.downloadButtonTooltip": "",
   "dashboard.logs.launchButtonTooltip": "",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "",
diff --git a/src/nls/messages_ja.json b/src/nls/messages_ja.json
index 0b40b3095..83fb389b7 100644
--- a/src/nls/messages_ja.json
+++ b/src/nls/messages_ja.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "ニャー",
   "dashboard.logs.downloadButtonTooltip": "ログをダウンロード",
   "dashboard.logs.launchButtonTooltip": "新しいウィンドウでログを開く",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "最大化",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "デフォルトに戻す",
diff --git a/src/nls/messages_ko.json b/src/nls/messages_ko.json
index 5e519bfc9..ffe20b4ec 100644
--- a/src/nls/messages_ko.json
+++ b/src/nls/messages_ko.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "야옹",
   "dashboard.logs.downloadButtonTooltip": "로그 다운로드",
   "dashboard.logs.launchButtonTooltip": "새 창에서 로그 열기",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "최대화",
   "dashboard.logs.pending": "보류 중인 최종 로그",
   "dashboard.logs.restore": "기본값으로 돌아가기",
diff --git a/src/nls/messages_pt.json b/src/nls/messages_pt.json
index babfcffb3..c6198b6c7 100644
--- a/src/nls/messages_pt.json
+++ b/src/nls/messages_pt.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "",
   "dashboard.logs.downloadButtonTooltip": "",
   "dashboard.logs.launchButtonTooltip": "",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "",
diff --git a/src/nls/messages_zh-Hans.json b/src/nls/messages_zh-Hans.json
index 13612239d..b3411660b 100644
--- a/src/nls/messages_zh-Hans.json
+++ b/src/nls/messages_zh-Hans.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "Meow",
   "dashboard.logs.downloadButtonTooltip": "下载日志",
   "dashboard.logs.launchButtonTooltip": "在新窗口中打开日志",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "最大化",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "",
diff --git a/src/nls/messages_zh-Hant.json b/src/nls/messages_zh-Hant.json
index 7dd0f66d9..f12dea08e 100644
--- a/src/nls/messages_zh-Hant.json
+++ b/src/nls/messages_zh-Hant.json
@@ -149,6 +149,12 @@
   "dashboard.logo.tooltip": "",
   "dashboard.logs.downloadButtonTooltip": "",
   "dashboard.logs.launchButtonTooltip": "",
+  "dashboard.logs.logLevels.debug": "",
+  "dashboard.logs.logLevels.error": "",
+  "dashboard.logs.logLevels.info": "",
+  "dashboard.logs.logLevels.label": "",
+  "dashboard.logs.logLevels.notice": "",
+  "dashboard.logs.logLevels.warning": "",
   "dashboard.logs.maximize": "",
   "dashboard.logs.pending": "",
   "dashboard.logs.restore": "",
diff --git a/src/scss/_carbon.scss b/src/scss/_carbon.scss
index 8fc1f5e9f..bad69f1bb 100644
--- a/src/scss/_carbon.scss
+++ b/src/scss/_carbon.scss
@@ -12,7 +12,8 @@ limitations under the License.
 */
 
 @use '@carbon/react/scss/config' with (
-  $font-path: '@ibm/plex'
+  $font-path: '@ibm/plex',
+  $use-per-family-plex: true
 );
 
 @use '@carbon/react/scss/reset';
diff --git a/src/utils/index.jsx b/src/utils/index.js
similarity index 87%
rename from src/utils/index.jsx
rename to src/utils/index.js
index 6d3867d63..f8f084542 100644
--- a/src/utils/index.jsx
+++ b/src/utils/index.js
@@ -11,9 +11,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { LogsToolbar } from '@tektoncd/dashboard-components';
+import { getExternalLogURL, getPodLog } from '../api';
 
-import { getExternalLogURL, getPodLog, getPodLogURL } from '../api';
 import { get } from '../api/comms';
 
 const buildLocales = import.meta.env.VITE_LOCALES_BUILD.split(',');
@@ -150,36 +149,6 @@ export function getViewChangeHandler({ location, navigate }) {
   };
 }
 
-export function getLogsToolbar({
-  externalLogsURL,
-  isMaximized,
-  isUsingExternalLogs,
-  stepStatus,
-  taskRun,
-  toggleMaximized
-}) {
-  const { container } = stepStatus;
-  const { namespace } = taskRun.metadata;
-  const { podName } = taskRun.status;
-
-  const logURL = isUsingExternalLogs
-    ? getExternalLogURL({ container, externalLogsURL, namespace, podName })
-    : getPodLogURL({
-        container,
-        name: podName,
-        namespace
-      });
-
-  return (
-    <LogsToolbar
-      isMaximized={isMaximized}
-      name={`${podName}__${container}__log.txt`}
-      toggleMaximized={toggleMaximized}
-      url={logURL}
-    />
-  );
-}
-
 export function formatLocale(locale) {
   switch (locale) {
     case 'zh':
diff --git a/src/utils/index.test.js b/src/utils/index.test.js
index e368fc48a..d438d0876 100644
--- a/src/utils/index.test.js
+++ b/src/utils/index.test.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2023 The Tekton Authors
+Copyright 2019-2024 The Tekton Authors
 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
@@ -19,7 +19,6 @@ import {
   followLogs,
   getLocale,
   getLogsRetriever,
-  getLogsToolbar,
   getTheme,
   getViewChangeHandler,
   I18N_DEV_KEY,
@@ -293,55 +292,6 @@ it('getViewChangeHandler', () => {
   );
 });
 
-describe('getLogsToolbar', () => {
-  it('should handle pod logs (default)', () => {
-    const container = 'fake_container';
-    const namespace = 'fake_namespace';
-    const podName = 'fake_podname';
-    const stepStatus = { container };
-    const taskRun = { metadata: { namespace }, status: { podName } };
-    vi.spyOn(API, 'getPodLogURL');
-    vi.spyOn(API, 'getExternalLogURL');
-
-    const logsToolbar = getLogsToolbar({ stepStatus, taskRun });
-
-    expect(API.getExternalLogURL).not.toHaveBeenCalled();
-    expect(API.getPodLogURL).toHaveBeenCalledWith({
-      container,
-      name: podName,
-      namespace
-    });
-    expect(logsToolbar).toBeTruthy();
-  });
-
-  it('should handle external logs', () => {
-    const container = 'fake_container';
-    const externalLogsURL = 'fake_externalLogsURL';
-    const namespace = 'fake_namespace';
-    const podName = 'fake_podname';
-    const stepStatus = { container };
-    const taskRun = { metadata: { namespace }, status: { podName } };
-    vi.spyOn(API, 'getPodLogURL');
-    vi.spyOn(API, 'getExternalLogURL');
-
-    const logsToolbar = getLogsToolbar({
-      externalLogsURL,
-      isUsingExternalLogs: true,
-      stepStatus,
-      taskRun
-    });
-
-    expect(API.getPodLogURL).not.toHaveBeenCalled();
-    expect(API.getExternalLogURL).toHaveBeenCalledWith({
-      container,
-      externalLogsURL,
-      namespace,
-      podName
-    });
-    expect(logsToolbar).toBeTruthy();
-  });
-});
-
 describe('getLocale', () => {
   it('handles exact matches for supported locales', () => {
     const locale = 'en';