diff --git a/media/OWNERS b/media/OWNERS
new file mode 100644
index 0000000..2c82e23
--- /dev/null
+++ b/media/OWNERS
@@ -0,0 +1 @@
+miguelfrde@google.com
diff --git a/media/webview-logging.css b/media/webview-logging.css
index 63ad059..16293fc 100644
--- a/media/webview-logging.css
+++ b/media/webview-logging.css
@@ -2,8 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-@import '@vscode/codicons/dist/codicon.css';
-
 :root {
   --log-list-buffer: calc(100vh - 50px);
   --log-control-height: 24px;
@@ -80,29 +78,6 @@
   width: 100%;
 }
 
-.action-icon {
-  background: none;
-  border: none;
-  color: var(--vscode-icon-foreground);
-  height: var(--log-action-height);
-  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
-  text-align: center;
-}
-
-.action-icon:hover {
-  background: var(--vscode-toolbar-hoverBackground);
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-#wrap-logs[wrap-active] {
-  color: var(--vscode-icon-foreground);
-}
-
-#wrap-logs:not([wrap-active]) {
-  color: var(--vscode-disabledForeground);
-}
-
 .column-resize {
   cursor: col-resize;
   height: 100%;
diff --git a/webviews/logging/components/base_element.ts b/webviews/logging/components/base_element.ts
index 9a773c2..aea49ca 100644
--- a/webviews/logging/components/base_element.ts
+++ b/webviews/logging/components/base_element.ts
@@ -8,8 +8,14 @@
 import vsCodeStyle from '../../../media/vscode.css';
 // @ts-ignore
 import resetStyle from '../../../media/reset.css';
+// @ts-ignore
+import codiconStyle from '../../../node_modules/@vscode/codicons/dist/codicon.css';
 
 @customElement('base-element')
 export class BaseElement extends LitElement {
-  static styles = css`${unsafeCSS(vsCodeStyle)} ${unsafeCSS(resetStyle)}` as CSSResultGroup;
+  static styles = css`
+    ${unsafeCSS(vsCodeStyle)}
+    ${unsafeCSS(resetStyle)}
+    ${unsafeCSS(codiconStyle)}
+  ` as CSSResultGroup;
 }
diff --git a/webviews/logging/components/log_view_actions.ts b/webviews/logging/components/log_view_actions.ts
index 9063bf7..b04c962 100644
--- a/webviews/logging/components/log_view_actions.ts
+++ b/webviews/logging/components/log_view_actions.ts
@@ -1,76 +1,92 @@
 // Copyright 2022 The Fuchsia Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import { State } from '../src/state';
-import { LogList } from './log_list';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseElement } from './base_element';
 
 export const DONT_WRAP_LOGS: string = 'Don\'t wrap logs';
 export const WRAP_LOGS: string = 'Wrap logs';
-export const WRAP_ACTIVE_ATTR: string = 'wrap-active';
+
+const ACTION_ICON_CLASSES: string = 'codicon icons action-icon';
 
 /**
  * Class to create action buttons that control the log list webview.
  */
-export class LogViewActions {
-  private root: HTMLDivElement;
-  private clear: HTMLDivElement;
-  private logWrap: HTMLDivElement;
+@customElement('log-view-actions')
+export class LogViewActions extends BaseElement {
+  static styles = [
+    BaseElement.styles,
+    css`
+      .action-icon {
+        background: none;
+        border: none;
+        color: var(--vscode-icon-foreground);
+        height: var(--log-action-height);
+        padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+        text-align: center;
+      }
 
-  /**
-   * Container of action buttons that interact with the log viewer.
-   * @param {LogList} logList The log list webview.
-   */
-  constructor(private logList: LogList, private state: State) {
-    this.root = document.createElement('div');
-    this.root.id = 'log-view-actions';
+      .action-icon:hover {
+        background: var(--vscode-toolbar-hoverBackground);
+        border-radius: 5px;
+        cursor: pointer;
+      }
 
-    // Clear logs button
-    this.clear = document.createElement('div');
-    this.clear.id = 'clear';
-    this.clear.title = 'Clear Logs';
-    this.clear.classList.add('codicon', 'codicon-clear-all', 'icons', 'action-icon');
+      #wrap-logs {
+        color: var(--vscode-disabledForeground);
+      }
 
-    // Clear logs onclick
-    this.clear.addEventListener('click', (e) => {
-      this.logList.reset();
-    });
+      :host([wrappingLogs]) #wrap-logs {
+        color: var(--vscode-icon-foreground);
+      }
+    `
+  ];
 
-    // Wrap logs button to toggle log line text wrapping.
-    this.logWrap = document.createElement('div');
-    this.logWrap.id = 'wrap-logs';
-    this.logWrap.classList.add('codicon', 'codicon-word-wrap', 'icons', 'action-icon');
-    this.updateLogWrapBtn(this.state.shouldWrapLogs);
+  @property({ attribute: true, reflect: true, type: Boolean })
+  public wrappingLogs: boolean = false;
 
-    this.logWrap.addEventListener('click', (e) => {
-      this.state.shouldWrapLogs = !this.state.shouldWrapLogs;
-      this.updateLogWrapBtn(this.state.shouldWrapLogs);
-    });
+  public static readonly wrapLogsChangeEvent: string = 'wrap-logs-change';
+  public static readonly clearRequestedEvent: string = 'clear-requested';
 
-    // TODO(fxbug.dev/99730): Save/Load Filter Button
-    // TODO(fxbug.dev/95332): Field Visibility Dropdown
-    this.root.appendChild(this.clear);
-    this.root.appendChild(this.logWrap);
+  constructor(wrappingLogs: boolean) {
+    super();
+    this.wrappingLogs = wrappingLogs;
   }
 
-  /**
-   * Returns the core element.
-   */
-  get element(): HTMLDivElement {
-    return this.root;
+  render() {
+    const wrapLogsTitle = this.wrappingLogs ? DONT_WRAP_LOGS : WRAP_LOGS;
+
+    return html`
+      <div
+        id="clear"
+        title="Clear Logs"
+        class="${ACTION_ICON_CLASSES} codicon-clear-all"
+        @click="${this.onClearButtonClick}"
+      ></div>
+
+      <div
+        id="wrap-logs"
+        title="Wrap Logs"
+        class="${ACTION_ICON_CLASSES} codicon-word-wrap"
+        @click="${this.onWrapLogsButtonClick}"
+        title = "${wrapLogsTitle}"
+      ></div>
+        `;
   }
 
-  /**
-   * Updates the log text wrap button state (attribute, title, etc) accordingly.
-   * @param shouldWrapLogs whether or not the log wrapping is active
-   */
-  private updateLogWrapBtn(shouldWrapLogs: boolean) {
-    this.logList.logWrapping = shouldWrapLogs;
-    if (this.state.shouldWrapLogs) {
-      this.logWrap.title = DONT_WRAP_LOGS;
-      this.logWrap.setAttribute(WRAP_ACTIVE_ATTR, '');
-    } else {
-      this.logWrap.removeAttribute(WRAP_ACTIVE_ATTR);
-      this.logWrap.title = WRAP_LOGS;
-    }
+  private onClearButtonClick() {
+    this.dispatchEvent(new CustomEvent(LogViewActions.clearRequestedEvent, {
+      detail: {},
+    }));
+  }
+
+  private onWrapLogsButtonClick() {
+    this.wrappingLogs = !this.wrappingLogs;
+    this.dispatchEvent(new CustomEvent(LogViewActions.wrapLogsChangeEvent, {
+      detail: {
+        wrapLogs: this.wrappingLogs,
+      }
+    }));
   }
 }
diff --git a/webviews/logging/components/view.ts b/webviews/logging/components/view.ts
index ef00676..d1ef29a 100644
--- a/webviews/logging/components/view.ts
+++ b/webviews/logging/components/view.ts
@@ -16,25 +16,34 @@
   private logViewActions: LogViewActions;
 
   constructor(private state: State, private root: HTMLElement) {
-    this.logActionContainer = document.createElement('div');
-    this.logActionContainer.id = 'log-action-container';
-    this.logListContainer = document.createElement('div');
-    this.logListContainer.id = 'log-list-container';
+    this.logList = new LogList(state);
 
     this.logControl = new LogControl(this.state.currentFilterText);
-
     this.logControl.addEventListener(LogControl.filterChangeEvent, (e) => {
       const event = e as CustomEvent;
       const { filter, text } = event.detail;
       this.state.registerFilter(filter, text);
     });
 
-    this.logList = new LogList(state);
-    this.logViewActions = new LogViewActions(this.logList, this.state);
+    this.logViewActions = new LogViewActions(this.state.shouldWrapLogs);
+    this.logViewActions.addEventListener(LogViewActions.clearRequestedEvent, (e) => {
+      this.logList.reset();
+    });
+    this.logViewActions.addEventListener(LogViewActions.wrapLogsChangeEvent, (e) => {
+      const event = e as CustomEvent;
+      const { wrapLogs } = event.detail;
+      this.logList.logWrapping = wrapLogs;
+      this.state.shouldWrapLogs = wrapLogs;
+    });
+
+    this.logActionContainer = document.createElement('div');
+    this.logActionContainer.id = 'log-action-container';
+    this.logListContainer = document.createElement('div');
+    this.logListContainer.id = 'log-list-container';
 
     this.root.appendChild(this.logActionContainer);
     this.logActionContainer.appendChild(this.logControl);
-    this.logActionContainer.appendChild(this.logViewActions.element);
+    this.logActionContainer.appendChild(this.logViewActions);
 
     this.root.appendChild(this.logListContainer);
     this.logListContainer.appendChild(this.logList.element);
diff --git a/webviews/logging/test/log_view_actions.test.ts b/webviews/logging/test/log_view_actions.test.ts
index 722aaaa..2beeb9b 100644
--- a/webviews/logging/test/log_view_actions.test.ts
+++ b/webviews/logging/test/log_view_actions.test.ts
@@ -2,12 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { State } from '../src/state';
-import { FakeWebviewAPi, logDataForTest } from './util';
-import chaiDom from 'chai-dom'; // not esm
 import chai from 'chai'; // not esm
-import { DONT_WRAP_LOGS, LogViewActions, WRAP_ACTIVE_ATTR, WRAP_LOGS } from '../components/log_view_actions';
-import { LogList, WRAP_LOG_TEXT_ATTR } from '../components/log_list';
+import chaiDom from 'chai-dom'; // not esm
+import { DONT_WRAP_LOGS, LogViewActions, WRAP_LOGS } from '../components/log_view_actions';
 
 before(function () {
   chai.should();
@@ -15,74 +12,91 @@
 });
 
 describe('LogViewActions', () => {
-  let root: HTMLElement;
-  let vscode: FakeWebviewAPi;
-  let state: State;
-  let logList: LogList;
+  let logViewActions: LogViewActions;
 
   beforeEach(() => {
-    root = document.createElement('div');
-    document.body.appendChild(root);
-    vscode = new FakeWebviewAPi();
-    state = new State(vscode);
-    logList = new LogList(state);
+    logViewActions = document.createElement('log-view-actions') as LogViewActions;
+    document.body.appendChild(logViewActions);
   });
 
   afterEach(() => {
-    root.remove();
+    logViewActions.remove();
   });
 
   describe('#constructor', () => {
-    it('crates log view actions buttons', () => {
-      const logViewActions = new LogViewActions(logList, state);
-      const el = logViewActions.element;
-      el.children.length.should.equal(2);
-      el.children[0].id.should.equal('clear');
+    it('crates log view actions buttons', async () => {
+      await logViewActions.updateComplete;
+      logViewActions.shadowRoot!.children.length.should.equal(2);
+      logViewActions.shadowRoot!.children[0].id.should.equal('clear');
+      logViewActions.shadowRoot!.children[1].id.should.equal('wrap-logs');
     });
 
-    it('takes state into account when creating the log wrap btn', () => {
-      state.shouldWrapLogs = false;
-      const logViewActions = new LogViewActions(logList, state);
-      const wrapLogsButton = logViewActions.element.querySelector('#wrap-logs') as HTMLDivElement;
-      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.false;
+    it('takes state into account when creating the log wrap btn', async () => {
+      let logViewActions = new LogViewActions(false);
+      document.body.appendChild(logViewActions);
+      await logViewActions.updateComplete;
+      let wrapLogsButton = logViewActions.shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
+      logViewActions.wrappingLogs.should.be.false;
       wrapLogsButton.title.should.equal(WRAP_LOGS);
-      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.false;
+      logViewActions.remove();
+
+      logViewActions = new LogViewActions(true);
+      document.body.appendChild(logViewActions);
+      await logViewActions.updateComplete;
+      wrapLogsButton = logViewActions.shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
+      logViewActions.wrappingLogs.should.be.true;
+      wrapLogsButton.title.should.equal(DONT_WRAP_LOGS);
     });
   });
 
   describe('on clear button press', () => {
-    it('reset the log list', () => {
-      const logViewActions = new LogViewActions(logList, state);
-      const el = logViewActions.element;
-      const clearButton = el.querySelector('#clear') as HTMLDivElement;
-      logList.addLog(logDataForTest('core/foo'));
-      const logsList = logList.element;
-      logsList.children.length.should.equal(2);
-      clearButton.dispatchEvent(new MouseEvent('click'));
-      logsList.children.length.should.equal(1);
+    it('emits clear requested event', async () => {
+      await logViewActions.updateComplete;
+      const clearButton = logViewActions.shadowRoot!.querySelector('#clear') as HTMLDivElement;
+      const promise = new Promise<{}>((resolve) => {
+        logViewActions.addEventListener(LogViewActions.clearRequestedEvent, (e) => {
+          resolve({});
+        });
+      });
+      clearButton.click();
+      await promise;
     });
   });
 
   describe('on wrap logs button press', () => {
-    it('sets a wrap-log-text attribute in the log list', () => {
-      const logViewActions = new LogViewActions(logList, state);
-      const el = logViewActions.element;
-      const wrapLogsButton = el.querySelector('#wrap-logs') as HTMLDivElement;
-      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.true;
-      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.true;
+    it('emits log wrapping event and updates itself', async () => {
+      await logViewActions.updateComplete;
+      const wrapLogsButton = logViewActions
+        .shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
+      let promise = new Promise<{ wrapLogs: boolean }>((resolve) => {
+        logViewActions.addEventListener(LogViewActions.wrapLogsChangeEvent, (e) => {
+          const event = e as CustomEvent;
+          resolve(event.detail);
+        });
+      });
+      wrapLogsButton.click();
+
+      let payload = await promise;
+      payload.wrapLogs.should.be.true;
+      await logViewActions.updateComplete;
+      logViewActions.wrappingLogs.should.be.true;
       wrapLogsButton.title.should.equal(DONT_WRAP_LOGS);
-      state.shouldWrapLogs.should.be.true;
 
-      wrapLogsButton.dispatchEvent(new MouseEvent('click'));
-      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.false;
-      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.false;
+      // Clicking again should toggle the state.
+
+      promise = new Promise<{ wrapLogs: boolean }>((resolve) => {
+        logViewActions.addEventListener(LogViewActions.wrapLogsChangeEvent, (e) => {
+          const event = e as CustomEvent;
+          resolve(event.detail);
+        });
+      });
+      wrapLogsButton.click();
+
+      payload = await promise;
+      payload.wrapLogs.should.be.false;
+      await logViewActions.updateComplete;
+      logViewActions.wrappingLogs.should.be.false;
       wrapLogsButton.title.should.equal(WRAP_LOGS);
-      state.shouldWrapLogs.should.be.false;
-
-      wrapLogsButton.dispatchEvent(new MouseEvent('click'));
-      wrapLogsButton.hasAttribute(WRAP_ACTIVE_ATTR).should.be.true;
-      logList.element.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.true;
-      state.shouldWrapLogs.should.be.true;
     });
   });
 });
diff --git a/webviews/logging/test/view.test.ts b/webviews/logging/test/view.test.ts
index 884875b..37b5b9d 100644
--- a/webviews/logging/test/view.test.ts
+++ b/webviews/logging/test/view.test.ts
@@ -3,13 +3,15 @@
 // found in the LICENSE file.
 
 import { CURRENT_VERSION, State } from '../src/state';
-import { FakeWebviewAPi } from './util';
+import { FakeWebviewAPi, logDataForTest } from './util';
 import { LoggingView } from '../components/view';
 import * as constant from '../src/constants';
 import chai from 'chai';
 import chaiDom from 'chai-dom'; // not esm
 import { LogControl } from '../components/log_control';
 import { Filter, FilterExpression } from '../src/filter';
+import { LogViewActions } from '../components/log_view_actions';
+import { WRAP_LOG_TEXT_ATTR } from '../components/log_list';
 
 before(function () {
   chai.should();
@@ -46,7 +48,7 @@
       const container = root.children[0];
       container.children.length.should.equal(2);
       container.children[0].tagName.toLowerCase().should.equal('log-control');
-      container.children[1].id.should.equal('log-view-actions');
+      container.children[1].tagName.toLowerCase().should.equal('log-view-actions');
     });
 
     it('initializes log control with the current state filters', async () => {
@@ -56,13 +58,34 @@
         fields: constant.LOGS_HEADERS,
         wrappingLogs: true
       });
-      // @ts-ignore
       new LoggingView(new State(vscode), root);
       let logControl = root.getElementsByTagName('log-control')[0] as LogControl;
       await logControl.updateComplete;
       logControl.value.should.equal(filterText);
     });
 
+    it('initializes log actions view with the current state wrapping logs', async () => {
+      vscode.setState({
+        version: CURRENT_VERSION,
+        filter: filterText,
+        fields: constant.LOGS_HEADERS,
+        wrappingLogs: true
+      });
+      new LoggingView(new State(vscode), root);
+      let logViewActions = root.getElementsByTagName('log-view-actions')[0] as LogViewActions;
+      await logViewActions.updateComplete;
+      logViewActions.wrappingLogs.should.be.true;
+    });
+
+    it('crates log list container with log list', () => {
+      new LoggingView(state, root);
+      const container = root.children[1];
+      container.children.length.should.equal(1);
+      container.children[0].id.should.equal('log-list');
+    });
+  });
+
+  describe('log control integration', () => {
     it('updates the state on log control filter changes', async () => {
       new LoggingView(state, root);
       let logControl = root.getElementsByTagName('log-control')[0] as LogControl;
@@ -84,12 +107,46 @@
       ]));
       state.currentFilterText.should.deep.equal(filterText);
     });
+  });
 
-    it('crates log list container with log list', () => {
-      new LoggingView(state, root);
-      const container = root.children[1];
-      container.children.length.should.equal(1);
-      container.children[0].id.should.equal('log-list');
+  describe('log actions view integration', () => {
+    it('clears the log list when the clear button is clicked', async () => {
+      const view = new LoggingView(state, root);
+      const logList = root.querySelector('#log-list') as HTMLElement;
+      view.addLog(logDataForTest('core/foo'));
+      logList.children.length.should.equal(2);
+
+      let logViewActions = root.getElementsByTagName('log-view-actions')[0] as LogViewActions;
+      await logViewActions.updateComplete;
+      let clearButton = logViewActions.shadowRoot!.querySelector('#clear') as HTMLDivElement;
+      clearButton.click();
+      logList.children.length.should.equal(1);
+    });
+
+    it('updates the state and log list when the wrap logs button is clicked', async () => {
+      const view = new LoggingView(state, root);
+      const logList = root.querySelector('#log-list') as HTMLElement;
+      view.addLog(logDataForTest('core/foo'));
+      logList.children.length.should.equal(2);
+
+      let logViewActions = root.getElementsByTagName('log-view-actions')[0] as LogViewActions;
+      await logViewActions.updateComplete;
+      let wrapLogsButton = logViewActions.shadowRoot!.querySelector('#wrap-logs') as HTMLDivElement;
+
+      // Clicking the button for the first should update the other elements to true.
+      // Since we started on true (default state value).
+      wrapLogsButton.click();
+      await logViewActions.updateComplete;
+
+      state.shouldWrapLogs.should.be.false;
+      logList.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.false;
+
+      // Clicking the button again should update the other elements to false.
+      wrapLogsButton.click();
+      await logViewActions.updateComplete;
+
+      state.shouldWrapLogs.should.be.true;
+      logList.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.true;
     });
   });
 });