diff --git a/.prettierrc.js b/.prettierrc.js
index 3def2a11..f27575af 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -4,10 +4,4 @@ module.exports = {
     singleQuote: true,
     tabWidth: 4,
     trailingComma: 'all',
-    overrides: [
-        {
-            files: '*.edge',
-            options: { parser: 'html' },
-        },
-    ],
 }
diff --git a/cypress/integration/component.js b/cypress/integration/component.js
index 0ef00697..ef4e21ae 100644
--- a/cypress/integration/component.js
+++ b/cypress/integration/component.js
@@ -133,6 +133,7 @@ it('should add/remove hover overlay on component mouseenter/leave', () => {
     })
     cy.iframe('#target').find('[data-testid=hover-element]').should('not.exist')
 })
+
 it('should support selecting/unselecting a component', () => {
     cy.visit('/')
 
@@ -217,3 +218,12 @@ it('should allow editing of booleans, numbers and strings', () => {
 
     cy.iframe('#target').contains('Str, type: "string", value: "devtools"')
 })
+
+it('should display message with number of components watched', () => {
+    cy.visit('/')
+        .get('[data-testid=component-name]')
+        .should('have.length.above', 0)
+        .then((components) => {
+            cy.get('[data-testid=footer-line]').should('contain', `Watching ${components.length} components`)
+        })
+})
diff --git a/cypress/integration/load.js b/cypress/integration/load.js
index 04c27796..32756589 100644
--- a/cypress/integration/load.js
+++ b/cypress/integration/load.js
@@ -14,9 +14,7 @@ it('should load devtools', () => {
         .should('equal', AlpineVersion)
 
     // Devtools initialised
-    cy.get('[data-testid=status-line]')
-        .should('have.attr', 'title', 'Latest Version')
-        .contains(`Alpine.js v${AlpineVersion} detected`)
+    cy.get('[data-testid=version-line]').should('have.attr', 'title', 'Latest Version').contains(`v${AlpineVersion}`)
 
     cy.get('[data-testid=component-name]').should('have.length.above', 0)
     cy.get('[data-testid=select-component-message]').should('have.text', 'Select a component to view')
@@ -38,9 +36,7 @@ it('should load devtools when no components found', () => {
         .should('equal', AlpineVersion)
 
     // Devtools initialised
-    cy.get('[data-testid=status-line]')
-        .should('have.attr', 'title', 'Latest Version')
-        .contains(`Alpine.js v${AlpineVersion} detected`)
+    cy.get('[data-testid=version-line]').should('have.attr', 'title', 'Latest Version').contains(`v${AlpineVersion}`)
 
     cy.get('[data-testid=component-name]').should('have.length', 0)
     cy.get('[data-testid=no-components-message]').should('be.visible').should('contain.text', 'No components found')
diff --git a/cypress/integration/version.js b/cypress/integration/version.js
index b530a8e0..3419a5a3 100644
--- a/cypress/integration/version.js
+++ b/cypress/integration/version.js
@@ -23,10 +23,10 @@ it('should display link + message for undefined outdated Alpine version (pre 2.3
         .window()
         .its('Alpine.version')
         .should('equal', AlpineVersion)
-        .get('[data-testid=status-line]')
+        .get('[data-testid=version-line]')
         .should('have.attr', 'title', `Latest Version: ${AlpineVersion}`)
-        .should('contain', 'Alpine.js <v2.3.1 detected')
-        .get('a')
+        .should('contain', '<v2.3.1')
+        .get('[data-testid=version-line] a')
         .should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases')
 })
 
@@ -39,10 +39,10 @@ it('should display link + message for outdated version', () => {
         .window()
         .its('Alpine.version')
         .should('equal', AlpineVersion)
-        .get('[data-testid=status-line]')
+        .get('[data-testid=version-line]')
         .should('have.attr', 'title', `Latest Version: ${AlpineVersion}`)
-        .should('contain', 'Alpine.js v2.6.0 detected')
-        .get('a')
+        .should('contain', 'v2.6.0')
+        .get('[data-testid=version-line] a')
         .should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases')
 })
 
@@ -55,10 +55,10 @@ it('should display message for up to date version of Alpine.version', () => {
         .window()
         .its('Alpine.version')
         .should('equal', AlpineVersion)
-        .get('[data-testid=status-line]')
+        .get('[data-testid=version-line]')
         .should('have.attr', 'title', `Latest Version`)
-        .should('contain', `Alpine.js v${AlpineVersion} detected`)
-        .get('a')
+        .should('contain', `v${AlpineVersion}`)
+        .get('[data-testid=version-line] a')
         .should('have.attr', 'href', '#')
 })
 
@@ -71,10 +71,10 @@ it('should display message for future Alpine versions', () => {
         .window()
         .its('Alpine.version')
         .should('equal', AlpineVersion)
-        .get('[data-testid=status-line]')
+        .get('[data-testid=version-line]')
         .should('have.attr', 'title', `Latest Version`)
-        .should('contain', `Alpine.js v4.0.0 detected`)
-        .get('a')
+        .should('contain', 'v4.0.0')
+        .get('[data-testid=version-line] a')
         .should('have.attr', 'href', '#')
 })
 
@@ -99,9 +99,9 @@ it('should display message with latest Alpine version from npm registry', () =>
         .its('Alpine.version')
         .should('equal', AlpineVersion)
         .wait('@registryRequest')
-        .get('[data-testid=status-line]')
+        .get('[data-testid=version-line]')
         .should('have.attr', 'title', `Latest Version: 5.0.0`)
-        .should('contain', `Alpine.js v4.0.0 detected`)
-        .get('a')
+        .should('contain', 'v4.0.0')
+        .get('[data-testid=version-line] a')
         .should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases')
 })
diff --git a/lib/edge/render.js b/lib/edge/render.js
index 86760414..2606f039 100644
--- a/lib/edge/render.js
+++ b/lib/edge/render.js
@@ -3,11 +3,15 @@ import path from 'path'
 import * as edge from 'edge.js'
 import VerbatimTag from './VerbatimTag'
 
+const viewData = {
+    devOnly: process.env.NODE_ENV !== 'production',
+}
+
 edge.registerViews(path.join(__dirname, './packages/shell-chrome/views'))
 edge.tag(new VerbatimTag())
 
 export function renderView(view, outputFilename, outputPath) {
-    let contents = edge.render(view)
+    let contents = edge.render(view, viewData)
     let dir = outputPath || path.join(__dirname, './dist/chrome')
 
     if (process.env.NODE_ENV === 'production') {
diff --git a/package.json b/package.json
index d2aef705..54a0aa49 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
         "test": "jest",
         "cy:run": "cypress run",
         "cy:open": "cypress open",
-        "format": "prettier './{packages/**/,cypress/**/*,}*.{js,html,edge,css}' --write",
+        "format": "prettier './{packages/**/,cypress/**/*,}*.{js,html,css}' --write",
         "check:format": "prettier './{packages/**/,cypress/**/*,}*.{js,html,css}' -c",
         "prepackage": "npm run build",
         "package": "cd ./dist/chrome && zip -r ../alpine-devtools-$npm_package_version.zip . && rm -rf ../chrome"
@@ -46,6 +46,6 @@
         }
     },
     "lint-staged": {
-        "*.{js,css,md,html,edge}": "prettier --write"
+        "*.{js,css,md,html}": "prettier --write"
     }
 }
diff --git a/packages/shell-chrome/src/devtools/devtools.js b/packages/shell-chrome/src/devtools/devtools.js
index 605e2d84..7058d17b 100644
--- a/packages/shell-chrome/src/devtools/devtools.js
+++ b/packages/shell-chrome/src/devtools/devtools.js
@@ -41,6 +41,7 @@ export default function devtools() {
         showTools: false,
         showTimeout: 1500,
         activeTheme: 'dark-header',
+        loadingText: 'Alpine.js tools loading',
 
         orientation: getOrientation(),
         split: null,
@@ -50,6 +51,9 @@ export default function devtools() {
         settingsPanelEnabled: process.env.NODE_ENV !== 'production',
         settingsPanelOpen: false,
 
+        tabsEnabled: process.env.NODE_ENV !== 'production',
+        activeTab: 'components',
+
         get isLatest() {
             if (!this.version || !this.latest) return null
             return isRequiredVersion(this.latest, this.version)
@@ -60,11 +64,11 @@ export default function devtools() {
         },
 
         get detected() {
-            if (!this.showTools) {
-                return 'Alpine.js tools loading'
-            }
+            return this.version ? `v${this.version}` : '<v2.3.1'
+        },
 
-            return this.version ? `Alpine.js v${this.version} detected` : 'Alpine.js <v2.3.1 detected'
+        get footerText() {
+            return `Watching ${this.components.length} components`
         },
 
         get openComponent() {
@@ -81,6 +85,7 @@ export default function devtools() {
 
         init() {
             this.initSplitPanes()
+
             this.$watch('components', () => {
                 if (!this.showTools) {
                     fetchWithTimeout('https://registry.npmjs.com/alpinejs', { timeout: this.showTimeout })
@@ -114,14 +119,14 @@ export default function devtools() {
             }
             const key = this.isLandscape ? 'columnGutters' : 'rowGutters'
 
-            splitOptions[key] = [
-                {
-                    track: 1,
-                    element: this.$refs.handle,
-                },
-            ]
-
             this.$nextTick(() => {
+                splitOptions[key] = [
+                    {
+                        track: 1,
+                        element: this.$refs.handle,
+                    },
+                ]
+
                 this.split = Split(splitOptions)
             })
         },
diff --git a/packages/shell-chrome/views/_components/tab-link.edge b/packages/shell-chrome/views/_components/tab-link.edge
new file mode 100644
index 00000000..f6d51a00
--- /dev/null
+++ b/packages/shell-chrome/views/_components/tab-link.edge
@@ -0,0 +1,13 @@
+<a
+    href="#"
+    title="{{ label || upperFirst(tab) }}"
+    :class="{
+        'text-white border-ice-500 cursor-default': activeTab === '{{ tab }}',
+        'border-transparent hover:text-white hover:border-ice-700': activeTab !== '{{ tab }}',
+    }"
+    class="px-4 border-b-3 xs:pl-2 xs:pr-3"
+    @click="activeTab = '{{ tab }}'"
+>
+    @!yield($slot.main)
+    <span class="hidden xs:inline-block">{{ label || upperFirst(tab) }}</span>
+</a>
diff --git a/packages/shell-chrome/views/_partials/component.edge b/packages/shell-chrome/views/_partials/component.edge
index 5c97a4d0..3a4d41c1 100644
--- a/packages/shell-chrome/views/_partials/component.edge
+++ b/packages/shell-chrome/views/_partials/component.edge
@@ -1,8 +1,8 @@
 @verbatim
 <a
     :class="{
-        'text-white bg-alpine-300' : component.isOpened,
-        'text-gray-600 hover:bg-blue-200' : !component.isOpened,
+        'text-white bg-alpine-300': component.isOpened,
+        'text-gray-600 hover:bg-blue-200': !component.isOpened,
     }"
     class="block cursor-pointer rounded"
     :style="`padding-left: ${component.depth * 20}px; `"
diff --git a/packages/shell-chrome/views/_partials/footer.edge b/packages/shell-chrome/views/_partials/footer.edge
new file mode 100644
index 00000000..9a463f37
--- /dev/null
+++ b/packages/shell-chrome/views/_partials/footer.edge
@@ -0,0 +1,102 @@
+<div
+    x-show="showTools"
+    class="flex font-bold text-gray-400 border-t border-gray-300 bg-white"
+>
+    <div class="flex-1">
+        <div class="flex items-center text-xs leading-9 font-medium font-mono">
+            <div 
+                class="flex-1 pl-3" 
+                x-text="footerText"
+                data-testid="footer-line"
+            ></div>
+
+            @verbatim
+            <div
+                data-testid="version-line"
+                class="flex items-center transition transition-colors duration-700 ease-in-out"
+                :title="'Latest Version' + (isLatest? '' : `: ${latest}`)"
+            >
+                <svg
+                    :class="{
+                            'text-green-500': showTools && isLatest,
+                            'text-orange-500': showTools && !isLatest,
+                        }"
+                    class="mr-1.5 h-2 w-2 transition transition-colors duration-700 ease-in-out"
+                    fill="currentColor"
+                    viewBox="0 0 8 8"
+                >
+                    <circle cx="4" cy="4" r="3" />
+                </svg>
+                <a
+                    :class="isLatest ? 'pointer-events-none' : ''"
+                    class="inline-flex items-center xs:space-x-1"
+                    :href="isLatest ? '#' : 'https://github.com/alpinejs/alpine/releases'"
+                >
+                    <span class="hidden xs:block">Alpine.js</span>
+                    <span x-text="detected"></span>
+                    <span class="hidden xs:block">detected</span>
+                </a>
+            </div>
+            @endverbatim
+        </div>
+    </div>
+
+    <div class="flex items-center ml-3 px-2.5 space-x-1 border-l border-gray-300 transition transition-colors duration-700">
+        <a href="https://github.com/alpinejs/alpine" target="_blank" title="Alpine.js Docs" class="hover:opacity-75">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                class="w-5 h-5"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
+            </svg>
+        </a>
+        <a
+            href="https://github.com/alpine-collective/alpinejs-devtools"
+            target="_blank"
+            title="Alpine Collective GitHub"
+            class="hover:opacity-75"
+        >
+            <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
+                <path
+                    d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"
+                ></path>
+            </svg>
+        </a>
+        <button
+            data-testid="settings-panel-open-button"
+            class="hover:opacity-75 focus:outline-none"
+            x-show="settingsPanelEnabled"
+            @click="settingsPanelOpen = true"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                class="w-5 h-5"
+            >
+                <title>Settings</title>
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                />
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+            </svg>
+        </button>
+    </div>
+</div>
diff --git a/packages/shell-chrome/views/_partials/header.edge b/packages/shell-chrome/views/_partials/header.edge
index 0c3fe13d..7b4cfa74 100644
--- a/packages/shell-chrome/views/_partials/header.edge
+++ b/packages/shell-chrome/views/_partials/header.edge
@@ -3,7 +3,7 @@
         'bg-gray-100': !showTools,
         [theme['bg-header']]: showTools,
     }"
-    class="flex py-2 pl-3 pr-4 text-base leading-9 tracking-tight font-bold text-white border-b border-gray-300 transition duration-700 transition-colors ease-in-out sm:leading-10"
+    class="{{ devOnly ? '' : 'py-2' }} flex items-center h-15 pl-3 pr-1 xs:pr-3 text-base tracking-tight font-bold text-white border-b border-gray-300 transition duration-700 transition-colors ease-in-out"
 >
     <div class="flex-1">
         <div class="flex items-center">
@@ -34,82 +34,78 @@
 
             @verbatim
             <div
-                :class="{
-                        'animate-pulse-fast': !showTools,
-                        'bg-gray-300 bg-opacity-50 text-gray-600': !showTools,
-                        'bg-green-100 text-green-700': showTools && isLatest,
-                        'bg-orange-100 text-orange-700': showTools && !isLatest,
-                    }"
                 data-testid="status-line"
-                class="flex items-center px-1 py-0.5 rounded text-xs font-medium leading-4 transition transition-colors duration-700 ease-in-out"
+                :class="{
+                    'hidden': showTools,
+                }"
+                class="flex items-center px-1 py-0.5 rounded text-xs text-gray-600 font-medium leading-4 bg-gray-300 bg-opacity-50 animate-pulse-fast transition transition-colors duration-700 ease-in-out"
                 :title="isLatest? 'Latest Version' : `Latest Version: ${latest}`"
             >
                 <svg
-                    :class="{
-                            'text-gray-400': !showTools ,
-                            'text-green-500': showTools && isLatest,
-                            'text-orange-500': showTools && !isLatest,
-                        }"
-                    class="mr-1.5 h-2 w-2 transition transition-colors duration-700 ease-in-out"
+                    class="mr-1.5 h-2 w-2 text-gray-400 transition transition-colors duration-700 ease-in-out"
                     fill="currentColor"
                     viewBox="0 0 8 8"
                 >
                     <circle cx="4" cy="4" r="3" />
                 </svg>
-                <a
-                    :class="isLatest ? 'pointer-events-none' : ''"
-                    :href="isLatest ? '#' : 'https://github.com/alpinejs/alpine/releases'"
-                    x-text="detected"
-                ></a>
+                <span x-text="loadingText"></span>
             </div>
             @endverbatim
         </div>
     </div>
 
-    <div
-        :class="{
-            'text-gray-400': !showTools,
-            [theme['text-header']]: showTools,
+    @if(devOnly)
+        <div
+            :class="{
+            'opacity-0': !showTools,
         }"
-        class="flex items-center space-x-2 transition transition-colors duration-700"
-    >
-        <a href="https://github.com/alpinejs/alpine" target="_blank" title="Alpine.js Docs" class="hover:opacity-75">
-            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            class="flex items-center text-sm text-ice-500 xs:space-x-3 pb-px transition"
+            style="line-height: 3.25rem"
+        >
+            @set('iconClasses', 'inline-block w-6 h-6 xs:w-5 xs:h-5 xs:mr-0.5 xs:opacity-50')
+            @component('_components.tab-link', { tab: 'components' })
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="{{ iconClasses }}"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
                 <path
-                    fill-rule="evenodd"
-                    d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
-                    clip-rule="evenodd"
-                ></path>
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+                />
             </svg>
-        </a>
-        <a
-            href="https://github.com/alpine-collective/alpinejs-devtools"
-            target="_blank"
-            title="Alpine Collective GitHub"
-            class="hover:opacity-75"
-        >
-            <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+            @endcomponent 
+
+            @component('_components.tab-link', { tab: 'events' })
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="{{ iconClasses }}"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
                 <path
-                    d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"
-                ></path>
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
+                />
             </svg>
-        </a>
-        <button
-            data-testid="settings-panel-open-button"
-            class="hover:opacity-75 focus:outline-none"
-            x-show="settingsPanelEnabled"
-            @click="settingsPanelOpen = true"
-        >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current w-5 h-5">
-                <title>Settings</title>
-                <g stroke="none" stroke-width="1" fill-rule="evenodd">
-                    <g>
-                        <path
-                            d="M3.93830521,6.49683865 C3.63405147,7.02216933 3.39612833,7.5907092 3.23599205,8.19100199 L5.9747955e-16,9 L9.6487359e-16,11 L3.23599205,11.808998 C3.39612833,12.4092908 3.63405147,12.9778307 3.93830521,13.5031614 L2.22182541,16.363961 L3.63603897,17.7781746 L6.49683865,16.0616948 C7.02216933,16.3659485 7.5907092,16.6038717 8.19100199,16.7640079 L9,20 L11,20 L11.808998,16.7640079 C12.4092908,16.6038717 12.9778307,16.3659485 13.5031614,16.0616948 L16.363961,17.7781746 L17.7781746,16.363961 L16.0616948,13.5031614 C16.3659485,12.9778307 16.6038717,12.4092908 16.7640079,11.808998 L20,11 L20,9 L16.7640079,8.19100199 C16.6038717,7.5907092 16.3659485,7.02216933 16.0616948,6.49683865 L17.7781746,3.63603897 L16.363961,2.22182541 L13.5031614,3.93830521 C12.9778307,3.63405147 12.4092908,3.39612833 11.808998,3.23599205 L11,0 L9,0 L8.19100199,3.23599205 C7.5907092,3.39612833 7.02216933,3.63405147 6.49683865,3.93830521 L3.63603897,2.22182541 L2.22182541,3.63603897 L3.93830521,6.49683865 L3.93830521,6.49683865 Z M10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 L10,13 Z"
-                        ></path>
-                    </g>
-                </g>
+            @endcomponent 
+
+            @component('_components.tab-link', { tab: 'warnings' })
+            <svg xmlns="http://www.w3.org/2000/svg" class="{{ iconClasses }}" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                    fill-rule="evenodd"
+                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                    clip-rule="evenodd"
+                />
             </svg>
-        </button>
-    </div>
+            @endcomponent
+        </div>
+    @endif
 </div>
diff --git a/packages/shell-chrome/views/_partials/tabs/components.edge b/packages/shell-chrome/views/_partials/tabs/components.edge
new file mode 100644
index 00000000..9a6f4811
--- /dev/null
+++ b/packages/shell-chrome/views/_partials/tabs/components.edge
@@ -0,0 +1,76 @@
+<div
+    x-ref="panes"
+    :class="{
+        'opacity-75': !showTools,
+        'grid-cols-panes': orientation === 'landscape',
+        'grid-rows-panes': orientation === 'portrait',
+    }"
+    class="grid h-full w-full overflow-hidden"
+>
+    <!-- Components -->
+    <div class="relative flex-1 flex flex-col max-h-full overflow-scroll">
+        <template x-if="showTools && components.length === 0">
+            <div
+                data-testid="no-components-message"
+                class="flex flex-1 h-full w-full items-center justify-center p-4 text-gray-400 text-sm"
+            >
+                No components found
+            </div>
+        </template>
+        <div
+            :class="{
+                'hidden': !showTools,
+            }"
+            class="absolute min-w-full min-h-full p-2"
+        >
+            <template x-for="(component, index) in components">
+                @include('_partials.component')
+            </template>
+        </div>
+    </div>
+
+    <!-- Split Pane Drag Handle -->
+    @include('_partials.handle')
+
+    <!-- Active Component/Data -->
+    <div class="flex-1 relative flex flex-col max-h-full overflow-scroll">
+        <template x-if="openComponent.name">
+            <div
+                class="sticky top-0 left-0 z-20 w-full flex items-center px-3 py-2 text-base font-mono text-gray-600 bg-gray-100"
+            >
+                <span class="opacity-25">&lt;</span>
+                <span x-text="openComponent.name"></span>
+                <span class="opacity-25">&gt;</span>
+            </div>
+        </template>
+
+        <template x-if="!openComponent.name">
+            <div
+                data-testid="select-component-message"
+                x-text="showTools && components.length > 0 ? 'Select a component to view' : ''"
+                class="flex h-full w-full items-center justify-center p-4 text-gray-400 text-sm bg-gray-50"
+            ></div>
+        </template>
+
+        <div
+            :class="{
+            'hidden': !showTools || !openComponent.name,
+        }"
+            class="flex-1 px-3 py-2"
+        >
+            <template x-for="(singleComponent, componentIndex) in components">
+                <div x-show="singleComponent.isOpened" class="font-mono">
+                    <div class="leading-6 text-gray-300">x-data: {</div>
+
+                    <div>
+                        <template x-for="(singleData, index) in singleComponent.flattenedData">
+                            @include('_partials.data.attribute')
+                        </template>
+                    </div>
+
+                    <div class="leading-7 text-gray-300">}</div>
+                </div>
+            </template>
+        </div>
+    </div>
+</div>
diff --git a/packages/shell-chrome/views/panel.edge b/packages/shell-chrome/views/panel.edge
index 0c580e96..05b1cc98 100644
--- a/packages/shell-chrome/views/panel.edge
+++ b/packages/shell-chrome/views/panel.edge
@@ -19,77 +19,25 @@
             <div class="bg-white flex flex-col relative h-full w-full mx-auto">
                 @include('_partials.header')
 
-                <div
-                    x-ref="panes"
-                    :class="{
-                        'opacity-75': !showTools,
-                        'grid-cols-panes': orientation === 'landscape',
-                        'grid-rows-panes': orientation === 'portrait',
-                    }"
-                    class="flex-1 h-full grid sm:flex-row overflow-hidden"
-                >
-                    <!-- Components -->
-                    <div class="relative flex-1 flex flex-col max-h-full overflow-scroll">
-                        <template x-if="showTools && components.length === 0">
-                            <div
-                                data-testid="no-components-message"
-                                class="flex flex-1 h-full w-full items-center justify-center p-4 text-gray-400 text-sm"
-                            >
-                                No components found
-                            </div>
-                        </template>
-                        <div
-                            :class="{
-                                'hidden': !showTools,
-                            }"
-                            class="absolute min-w-full min-h-full p-2"
-                        >
-                            <template x-for="(component, index) in components">
-                                @include('_partials.component')
-                            </template>
+                <div x-show="activeTab === 'components'" class="flex-1 overflow-hidden">
+                    @include('_partials.tabs.components')
+                </div>
+
+                @if(devOnly)
+                    <div x-show="activeTab === 'events'" class="flex-1">
+                        <div class="flex h-full items-center justify-center text-gray-400 uppercase bg-gray-50">
+                            Events Tab
                         </div>
                     </div>
 
-                    <!-- Split Pane Drag Handle -->
-                    @include('_partials.handle')
-
-                    <!-- Active Component/Data -->
-                    <div class="flex-1 relative flex flex-col max-h-full overflow-scroll">
-                        <template x-if="openComponent.name">
-                            <div
-                                class="sticky top-0 left-0 z-20 w-full flex items-center px-3 py-2 text-base font-mono text-gray-600 bg-gray-100"
-                            >
-                                <span class="opacity-25">&lt;</span>
-                                <span x-text="openComponent.name"></span>
-                                <span class="opacity-25">&gt;</span>
-                            </div>
-                        </template>
-
-                        <template x-if="!openComponent.name">
-                            <div
-                                data-testid="select-component-message"
-                                x-text="showTools && components.length > 0 ? 'Select a component to view' : ''"
-                                class="flex h-full w-full items-center justify-center p-4 text-gray-400 text-sm bg-gray-50"
-                            ></div>
-                        </template>
-
-                        <div class="flex-1 px-3 py-2">
-                            <template x-for="(singleComponent, componentIndex) in components">
-                                <div x-show="singleComponent.isOpened" class="font-mono">
-                                    <div class="leading-6 text-gray-300">x-data: {</div>
-
-                                    <div>
-                                        <template x-for="(singleData, index) in singleComponent.flattenedData">
-                                            @include('_partials.data.attribute')
-                                        </template>
-                                    </div>
-
-                                    <div class="leading-7 text-gray-300">}</div>
-                                </div>
-                            </template>
+                    <div x-show="activeTab === 'warnings'" class="flex-1">
+                        <div class="flex h-full items-center justify-center text-gray-400 uppercase bg-gray-50">
+                            Warnings Tab
                         </div>
                     </div>
-                </div>
+                @endif
+
+                @include('_partials.footer')
 
                 @include('_partials.settings')
             </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index ecc7f113..04fbd476 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -67,6 +67,12 @@ module.exports = {
             zIndex: {
                 max: '2147483647',
             },
+            borderWidth: {
+                3: '3px',
+            },
+            screens: {
+                xs: '560px',
+            },
         },
     },
     variants: {