diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts
index 66627040e3..63bd63e3c3 100644
--- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts
+++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts
@@ -20,7 +20,8 @@ export const styles = css`
     }
 
     :host {
-        background-color: var(--md-sys-color-surface);
+        background-color: var(--sys-log-viewer-color-table-bg);
+        color: var(--sys-log-viewer-color-table-text);
         display: block;
         font-family: 'Roboto Mono', monospace;
         font-size: 1rem;
@@ -52,19 +53,52 @@ export const styles = css`
     }
 
     thead {
-        background: var(--md-sys-surface-container);
+        background-color: var(--sys-log-viewer-color-table-header-bg);
+        color: var(--sys-log-viewer-color-table-header-text);
     }
 
     tr {
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        border-bottom: 1px solid var(--sys-log-viewer-color-table-cell-outline);
         display: grid;
         justify-content: flex-start;
         width: 100%;
     }
 
+    .log-row--warning {
+        --bg-color: var(--sys-log-viewer-color-surface-yellow);
+        --text-color: var(--sys-log-viewer-color-on-surface-yellow);
+        --icon-color: var(--sys-log-viewer-color-orange-bright);
+    }
+
+    .log-row--error,
+    .log-row--critical {
+        --bg-color: var(--sys-log-viewer-color-surface-error);
+        --text-color: var(--sys-log-viewer-color-on-surface-error);
+        --icon-color: var(--sys-log-viewer-color-error-bright);
+    }
+
+    .log-row--debug {
+        --bg-color: initial;
+        --text-color: var(--sys-log-viewer-color-debug);
+        --icon-color: var(--sys-log-viewer-color-debug);
+    }
+
+    .log-row--warning .cell-content--icon,
+    .log-row--error .cell-content--icon,
+    .log-row--critical .cell-content--icon {
+        color: var(--icon-color);
+    }
+
+    .log-row--warning,
+    .log-row--error,
+    .log-row--critical,
+    .log-row--debug {
+        background-color: var(--bg-color);
+        color: var(--text-color);
+    }
+
     tr:hover > td {
-        background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.1);
-        color: var(--sys-on-inverse-surface);
+        background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05);
     }
 
     th,
@@ -95,12 +129,13 @@ export const styles = css`
     }
 
     .resize-handle {
-        background-color: var(--md-sys-color-outline-variant);
+        background-color: var(--sys-log-viewer-color-table-cell-outline);
         bottom: 0;
         content: '';
         cursor: col-resize;
         height: 100%;
         left: 0;
+        mix-blend-mode: luminosity;
         opacity: 1;
         pointer-events: auto;
         position: absolute;
@@ -113,6 +148,7 @@ export const styles = css`
 
     .resize-handle:hover {
         background-color: var(--md-sys-color-primary);
+        mix-blend-mode: unset;
         outline: 1px solid var(--md-sys-color-primary);
     }
 
@@ -126,7 +162,7 @@ export const styles = css`
         width: 1rem;
     }
 
-    .cell-content--with-icon {
+    .cell-content--icon {
         padding-top: 0.125rem;
     }
 
@@ -148,7 +184,7 @@ export const styles = css`
         background: linear-gradient(
             to right,
             transparent,
-            var(--md-sys-color-surface)
+            var(--sys-log-viewer-color-overflow-indicator)
         );
         right: 0;
     }
@@ -157,15 +193,15 @@ export const styles = css`
         background: linear-gradient(
             to left,
             transparent,
-            var(--md-sys-color-surface)
+            var(--sys-log-viewer-color-overflow-indicator)
         );
         left: 0;
     }
 
     mark {
-        background-color: var(--md-sys-color-primary-container);
+        background-color: var(--sys-log-viewer-color-table-mark);
         border-radius: 2px;
         color: var(--md-sys-color-on-primary-container);
-        outline: 1px solid var(--md-sys-color-outline-variant);
+        outline: 1px solid var(--sys-log-viewer-color-table-mark);
     }
 `;
diff --git a/pw_web/log-viewer/src/components/log-list/log-list.ts b/pw_web/log-viewer/src/components/log-list/log-list.ts
index 8c0717b0a5..af8b13fb90 100644
--- a/pw_web/log-viewer/src/components/log-list/log-list.ts
+++ b/pw_web/log-viewer/src/components/log-list/log-list.ts
@@ -21,7 +21,7 @@ import {
     state,
 } from 'lit/decorators.js';
 import { styles } from './log-list.styles';
-import { FieldData, LogEntry } from '../../shared/interfaces';
+import { FieldData, LogEntry, Severity } from '../../shared/interfaces';
 import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 import '@lit-labs/virtualizer';
 
@@ -424,26 +424,14 @@ export class LogList extends LitElement {
     }
 
     private tableDataRow(log: LogEntry) {
-        let bgColor = '';
-        let textColor = '';
-
-        switch (log.severity) {
-            case 'WARNING':
-                bgColor = 'var(--sys-color-surface-yellow)';
-                textColor = 'var(--sys-color-on-surface-yellow)';
-                break;
-            case 'ERROR':
-            case 'CRITICAL':
-                bgColor = 'var(--sys-color-surface-error)';
-                textColor = 'var(--sys-color-on-surface-error)';
-                break;
-            case 'DEBUG':
-                textColor = 'var(--sys-color-debug)';
-                break;
-        }
+        const logSeverity = log.severity || Severity.INFO;
+        const className =
+            logSeverity === Severity.INFO
+                ? 'log-row'
+                : `log-row log-row--${logSeverity.toLowerCase()}`;
 
         return html`
-            <tr style="color:${textColor}; background-color:${bgColor};">
+            <tr class="${className}">
                 ${log.fields.map((field, columnIndex) =>
                     this.tableDataCell(field, columnIndex)
                 )}
@@ -452,41 +440,29 @@ export class LogList extends LitElement {
     }
 
     private tableDataCell(field: FieldData, columnIndex: number) {
-        let iconColor = '';
-        let iconId = '';
-        const toTitleCase = (input: string): string => {
-            return input.replace(/\b\w+/g, (match) => {
-                return (
-                    match.charAt(0).toUpperCase() + match.slice(1).toLowerCase()
-                );
-            });
-        };
-
         if (field.key == 'severity') {
-            switch (field.value) {
-                case 'WARNING':
-                    iconColor = 'var(--sys-color-orange-bright)';
-                    iconId = 'warning';
-                    break;
-                case 'ERROR':
-                    iconColor = 'var(--sys-color-error-bright)';
-                    iconId = 'cancel';
-                    break;
-                case 'CRITICAL':
-                    iconColor = 'var(--sys-color-error-bright)';
-                    iconId = 'brightness_alert';
-                    break;
-                case 'DEBUG':
-                    iconColor = 'var(--sys-color-debug)';
-                    iconId = 'bug_report';
-                    break;
-            }
+            const severityIcons = new Map<Severity, string>([
+                [Severity.WARNING, 'warning'],
+                [Severity.ERROR, 'cancel'],
+                [Severity.CRITICAL, 'brightness_alert'],
+                [Severity.DEBUG, 'bug_report'],
+            ]);
+
+            const severityValue = field.value as Severity;
+            const iconId = severityIcons.get(severityValue) || '';
+            const toTitleCase = (input: string): string => {
+                return input.replace(/\b\w+/g, (match) => {
+                    return (
+                        match.charAt(0).toUpperCase() +
+                        match.slice(1).toLowerCase()
+                    );
+                });
+            };
 
             return html`
                 <td>
-                    <div class="cell-content cell-content--with-icon">
+                    <div class="cell-content cell-content--icon">
                         <md-icon
-                            style="color:${iconColor}"
                             class="cell-icon"
                             title="${toTitleCase(field.value.toString())}"
                         >
@@ -495,14 +471,6 @@ export class LogList extends LitElement {
                     </div>
                 </td>
             `;
-        } else if (field.key == 'timestamp') {
-            return html`
-                <td>
-                    <div class="cell-content">
-                        ${this.highlightMatchedText(field.value.toString())}
-                    </div>
-                </td>
-            `;
         }
 
         return html`
@@ -510,7 +478,11 @@ export class LogList extends LitElement {
                 <div class="cell-content">
                     ${this.highlightMatchedText(field.value.toString())}
                 </div>
-                ${columnIndex > 0 ? this.resizeHandle(columnIndex - 1) : html``}
+                <!-- Don't add resize handles for default columns 'severity' and 'timestamp' -->
+                ${!['severity', 'timestamp'].includes(field.key) &&
+                columnIndex > 0
+                    ? this.resizeHandle(columnIndex - 1)
+                    : html``}
             </td>
         `;
     }
diff --git a/pw_web/log-viewer/src/components/log-view-controls/log-view-controls.styles.ts b/pw_web/log-viewer/src/components/log-view-controls/log-view-controls.styles.ts
index 1ba946e8dc..c5d383adba 100644
--- a/pw_web/log-viewer/src/components/log-view-controls/log-view-controls.styles.ts
+++ b/pw_web/log-viewer/src/components/log-view-controls/log-view-controls.styles.ts
@@ -17,8 +17,8 @@ import { css } from 'lit';
 export const styles = css`
     :host {
         align-items: center;
-        background: var(--md-sys-surface-container-high);
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        background-color: var(--sys-log-viewer-color-controls-bg);
+        color: var(--sys-log-viewer-color-controls-text);
         display: flex;
         flex-shrink: 0;
         gap: 1rem;
@@ -36,12 +36,12 @@ export const styles = css`
     }
 
     .button-toggle {
-        background-color: var(--md-sys-surface-container-high);
+        background-color: var(--md-sys-color-surface-container-high);
         border-radius: 100%;
     }
 
     .field-menu {
-        background-color: var(--md-sys-surface-container);
+        background-color: var(--md-sys-color-surface-container);
         border-radius: 4px;
         margin: 0;
         padding: 0.5rem 0.75rem;
@@ -67,15 +67,15 @@ export const styles = css`
     }
 
     input {
-        background: var(--md-sys-surface-container);
+        background-color: var(--sys-log-viewer-color-controls-input-bg);
         border: none;
         border-radius: 1.5rem;
         font-family: 'Google Sans';
-        height: 2rem;
+        height: 1.75rem;
         max-width: 20rem;
         padding: 0 1rem;
         width: 100%;
-        border: 1px solid var(--md-sys-color-outline-variant);
+        border: 1px solid var(--sys-log-viewer-color-controls-input-outline);
     }
 
     input::placeholder {
diff --git a/pw_web/log-viewer/src/components/log-view/log-view.styles.ts b/pw_web/log-viewer/src/components/log-view/log-view.styles.ts
index 896f29fa9d..39c1104357 100644
--- a/pw_web/log-viewer/src/components/log-view/log-view.styles.ts
+++ b/pw_web/log-viewer/src/components/log-view/log-view.styles.ts
@@ -16,8 +16,9 @@ import { css } from 'lit';
 
 export const styles = css`
     :host {
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 0.5rem;
+        border: var(--sys-log-viewer-view-outline-width) solid
+            var(--sys-log-viewer-color-view-outline);
+        border-radius: var(--sys-log-viewer-view-corner-radius);
         color: var(--md-sys-color-on-surface);
         display: flex;
         flex-direction: column;
diff --git a/pw_web/log-viewer/src/index.css b/pw_web/log-viewer/src/index.css
index c611878407..9a41e81301 100644
--- a/pw_web/log-viewer/src/index.css
+++ b/pw_web/log-viewer/src/index.css
@@ -17,7 +17,7 @@
  @import url('https://fonts.googleapis.com/css2?family=Google+Sans&family=Roboto+Mono:wght@400;500&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');
 
 :root {
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--sys-log-viewer-color-bg);
     color-scheme: light dark;
     font-family: "Google Sans", Arial, sans-serif;
     font-synthesis: none;
@@ -29,12 +29,19 @@
     -webkit-text-size-adjust: 100%;
 }
 
-/* Material component properties */
+
 :root {
+    /* Material component properties */
     --md-icon-font: 'Material Symbols Rounded';
     --md-icon-size: 1.25rem;
     --md-filled-button-label-text-type: "Google Sans", Arial, sans-serif;
     --md-outlined-button-label-text-type: "Google Sans", Arial, sans-serif;
+    --md-icon-button-unselected-icon-color: var(--md-sys-color-on-surface-variant);
+    --md-icon-button-unselected-hover-icon-color: var(--md-sys-color-on-primary-container);
+
+    /* Log View */
+    --sys-log-viewer-view-outline-width: 1px;
+    --sys-log-viewer-view-corner-radius: 0.5rem;
 }
 
 * {
@@ -69,6 +76,7 @@ body {
 @media (prefers-color-scheme: dark) {
     :root {
         --md-sys-color-primary: #A8C7FA;
+        --md-sys-color-primary-60: #4C8DF6;
         --md-sys-color-primary-container: #0842A0;
         --md-sys-color-on-primary: #062E6F;
         --md-sys-color-on-primary-container: #D3E3FD;
@@ -82,13 +90,13 @@ body {
         --md-sys-color-on-tertiary: #0A3818;
         --md-sys-color-on-tertiary-container: #C4EED0;
         --md-sys-color-surface: #131314;
-        --md-sys-surface-dim: #131314;
-        --md-sys-surface-bright: #37393B;
-        --md-sys-surface-container-lowest: #0E0E0E;
-        --md-sys-surface-container-low: #1B1B1B;
-        --md-sys-surface-container: #1E1F20;
-        --md-sys-surface-container-high: #282A2C;
-        --md-sys-surface-container-highest: #333537;
+        --md-sys-color-surface-dim: #131314;
+        --md-sys-color-surface-bright: #37393B;
+        --md-sys-color-surface-container-lowest: #0E0E0E;
+        --md-sys-color-surface-container-low: #1B1B1B;
+        --md-sys-color-surface-container: #1E1F20;
+        --md-sys-color-surface-container-high: #282A2C;
+        --md-sys-color-surface-container-highest: #333537;
         --md-sys-color-on-surface: #E3E3E3;
         --md-sys-color-on-surface-variant: #C4C7C5;
         --md-sys-color-inverse-surface: #E3E3E3;
@@ -99,22 +107,47 @@ body {
         --md-sys-color-scrim: #000000;
 
         --md-sys-inverse-surface-rgb: 230, 225, 229;
-        --sys-on-inverse-surface: #fff;
-
-        /** Colors for severity warn, error, and critical */
-        --sys-color-error-bright: #E46962;
-        --sys-color-surface-error: #601410;
-        --sys-color-on-surface-error: #F9DEDC;
-        --sys-color-orange-bright: #EE9836;
-        --sys-color-surface-yellow: #402D00;
-        --sys-color-on-surface-yellow: #FFDFA0;
-        --sys-color-debug: var(--md-sys-color-primary);
+
+        /* Log Viewer */
+        --sys-log-viewer-color-bg: var(--md-sys-color-surface);
+
+        /* Log View */
+        --sys-log-viewer-color-view-outline:  var(--md-sys-color-outline-variant);
+
+        /* Log View Controls */
+        --sys-log-viewer-color-controls-bg: var(--md-sys-color-surface-container-high);
+        --sys-log-viewer-color-controls-text: var(--md-sys-color-on-surface-variant);
+        --sys-log-viewer-color-controls-input-outline: transparent;
+        --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface);
+
+        /* Log List */
+        --sys-log-viewer-color-table-header-bg: var(--md-sys-color-surface-container);
+        --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
+        --sys-log-viewer-color-table-bg: var(--md-sys-color-surface-container-lowest);
+        --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
+        --sys-log-viewer-color-table-cell-outline: var(--md-sys-color-outline-variant);
+        --sys-log-viewer-color-overflow-indicator: var(--md-sys-color-surface-container-lowest);
+        --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
+        --sys-log-viewer-color-table-mark-text: var(--md-sys-color-on-primary-container);
+        --sys-log-viewer-color-table-mark-outline: var(--md-sys-color-outline-variant);
+
+        /* Severity */
+        --sys-log-viewer-color-error-bright: #E46962;
+        --sys-log-viewer-color-surface-error: #601410;
+        --sys-log-viewer-color-on-surface-error: #F9DEDC;
+        --sys-log-viewer-color-orange-bright: #EE9836;
+        --sys-log-viewer-color-surface-yellow: #402D00;
+        --sys-log-viewer-color-on-surface-yellow: #FFDFA0;
+        --sys-log-viewer-color-debug: var(--md-sys-color-primary-60);
     }
 }
 
 @media (prefers-color-scheme: light) {
     :root {
         --md-sys-color-primary: #0B57D0;
+        --md-sys-color-primary-90: #D3E3FD;
+        --md-sys-color-primary-95: #ECF3FE;
+        --md-sys-color-primary-99: #FAFBFF;
         --md-sys-color-primary-container: #D3E3FD;
         --md-sys-color-on-primary: #FFFFFF;
         --md-sys-color-on-primary-container: #041E49;
@@ -128,13 +161,13 @@ body {
         --md-sys-color-on-tertiary: #FFFFFF;
         --md-sys-color-on-tertiary-container: #072711;
         --md-sys-color-surface: #FFFFFF;
-        --md-sys-surface-dim: #D3DBE5;
-        --md-sys-surface-bright: #FFFFFF;
-        --md-sys-surface-container-lowest: #FFFFFF;
-        --md-sys-surface-container-low: #F8FAFD;
-        --md-sys-surface-container: #F0F4F9;
-        --md-sys-surface-container-high: #E9EEF6;
-        --md-sys-surface-container-highest: #DDE3EA;
+        --md-sys-color-surface-dim: #D3DBE5;
+        --md-sys-color-surface-bright: #FFFFFF;
+        --md-sys-color-surface-container-lowest: #FFFFFF;
+        --md-sys-color-surface-container-low: #F8FAFD;
+        --md-sys-color-surface-container: #F0F4F9;
+        --md-sys-color-surface-container-high: #E9EEF6;
+        --md-sys-color-surface-container-highest: #DDE3EA;
         --md-sys-color-on-surface: #1F1F1F;
         --md-sys-color-on-surface-variant: #444746;
         --md-sys-color-inverse-surface: #303030;
@@ -145,15 +178,37 @@ body {
         --md-sys-color-scrim: #000000;
 
         --md-sys-inverse-surface-rgb: 49, 48, 51;
-        --sys-on-inverse-surface: #000;
-
-        /** Colors for severity warn, error, and critical */
-        --sys-color-error-bright: #DC362E;
-        --sys-color-surface-error: #FCEFEE;
-        --sys-color-on-surface-error: #8C1D18;
-        --sys-color-orange-bright: #F49F2A;
-        --sys-color-surface-yellow: #FEF9EB;
-        --sys-color-on-surface-yellow: #783616;
-        --sys-color-debug: var(--md-sys-color-primary);
+
+        /* Log Viewer */
+        --sys-log-viewer-color-bg: var(--md-sys-color-surface);
+
+        /* Log View */
+        --sys-log-viewer-color-view-outline:  var(--md-sys-color-outline);
+
+        /* Log View Controls */
+        --sys-log-viewer-color-controls-bg: var(--md-sys-color-primary-90);
+        --sys-log-viewer-color-controls-text: var(--md-sys-color-on-primary-container);
+        --sys-log-viewer-color-controls-input-outline: transparent;
+        --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface-container-lowest);
+
+        /* Log List */
+        --sys-log-viewer-color-table-header-bg: var(--md-sys-color-primary-95);
+        --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
+        --sys-log-viewer-color-table-bg: var(--md-sys-color-surface-container-lowest);
+        --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
+        --sys-log-viewer-color-table-cell-outline: var(--md-sys-color-outline-variant);
+        --sys-log-viewer-color-overflow-indicator: var(--md-sys-color-surface-container);
+        --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
+        --sys-log-viewer-color-table-mark-text: var(--md-sys-color-on-primary-container);
+        --sys-log-viewer-color-table-mark-outline: var(--md-sys-color-outline-variant);
+
+        /* Severity */
+        --sys-log-viewer-color-error-bright: #DC362E;
+        --sys-log-viewer-color-surface-error: #FCEFEE;
+        --sys-log-viewer-color-on-surface-error: #8C1D18;
+        --sys-log-viewer-color-orange-bright: #F49F2A;
+        --sys-log-viewer-color-surface-yellow: #FEF9EB;
+        --sys-log-viewer-color-on-surface-yellow: #783616;
+        --sys-log-viewer-color-debug: var(--md-sys-color-primary);
     }
 }
\ No newline at end of file