diff --git a/src/shared/ui/button/index.tsx b/src/shared/ui/button/index.tsx
index 834394e..7bb2e52 100644
--- a/src/shared/ui/button/index.tsx
+++ b/src/shared/ui/button/index.tsx
@@ -1,8 +1,8 @@
 import {styled} from 'solid-styled-components';
 
 export const Button = styled.button`
+  white-space: nowrap;
   margin: 0;
-  margin-left: 1rem;
   padding: 0.2rem 0.4rem;
 
   color: var(--primary-text);
@@ -24,10 +24,14 @@ export const Button = styled.button`
 const playSymbol = String.fromCharCode(parseInt('25B6', 16));
 const pauseSymbol = String.fromCharCode(parseInt('25A0', 16));
 
+const SwitchButton = styled(Button)`
+  white-space: nowrap;
+`;
+
 export function RunButton(props: {onClick: () => void}) {
-  return <Button onClick={props.onClick}>{playSymbol} Run</Button>;
+  return <SwitchButton onClick={props.onClick}>{playSymbol} Run</SwitchButton>;
 }
 
 export function PauseButton(props: {onClick: () => void}) {
-  return <Button onClick={props.onClick}>{pauseSymbol} Pause</Button>;
+  return <SwitchButton onClick={props.onClick}>{pauseSymbol} Pause</SwitchButton>;
 }
diff --git a/src/shared/ui/forms/checkbox.tsx b/src/shared/ui/forms/checkbox.tsx
index d277e16..c4b8813 100644
--- a/src/shared/ui/forms/checkbox.tsx
+++ b/src/shared/ui/forms/checkbox.tsx
@@ -13,5 +13,4 @@ const Label = styled.label`
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  padding: 0 0.5rem;
 `;
diff --git a/src/shared/ui/templates/template.tsx b/src/shared/ui/templates/template.tsx
new file mode 100644
index 0000000..097644c
--- /dev/null
+++ b/src/shared/ui/templates/template.tsx
@@ -0,0 +1,37 @@
+import {JSX} from 'solid-js';
+import {styled} from 'solid-styled-components';
+
+export function TabTemplate(props: {header: JSX.Element; content: JSX.Element}) {
+  return (
+    <TabTemplateRoot>
+      <Header>{props.header}</Header>
+      <Content>{props.content}</Content>
+    </TabTemplateRoot>
+  );
+}
+
+export const Header = styled.header`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  width: fit-content;
+  min-width: 100%;
+  box-sizing: border-box;
+
+  background-color: var(--content-bg);
+
+  position: sticky;
+  top: 0;
+`;
+
+export const Content = styled.section`
+  flex: 1;
+  width: max-content;
+`;
+
+export const TabTemplateRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
diff --git a/src/tabs/log/view.tsx b/src/tabs/log/view.tsx
index ba278f5..cefef93 100644
--- a/src/tabs/log/view.tsx
+++ b/src/tabs/log/view.tsx
@@ -5,6 +5,7 @@ import {styled} from 'solid-styled-components';
 import {UnitContent} from '../../entities/units';
 import {Button, PauseButton, RunButton} from '../../shared/ui/button';
 import {Checkbox, Input} from '../../shared/ui/forms';
+import {TabTemplate} from '../../shared/ui/templates/template';
 import {ValueView} from '../../shared/ui/values';
 
 import {
@@ -27,65 +28,81 @@ export function Logs() {
   ]);
 
   return (
-    <>
-      <Panel>
-        Show:
-        <Checkbox
-          value={kinds().includes('event')}
-          onClick={() => toggleKind('event')}
-          label="Event"
-        />
-        <Checkbox
-          value={kinds().includes('store')}
-          onClick={() => toggleKind('store')}
-          label="Store"
-        />
-        <Checkbox
-          value={kinds().includes('effect')}
-          onClick={() => toggleKind('effect')}
-          label="Effect"
-        />
-        Filter:
-        <Input value={filterText()} onInput={(e) => filterChanged(e.currentTarget.value)} />
-        <Button onClick={() => logCleared()}>Clear</Button>
-        <Show
-          when={!isLogEnabled()}
-          fallback={<PauseButton onClick={() => isLogEnabledToggle()} />}
-        >
-          <RunButton onClick={() => isLogEnabledToggle()} />
-        </Show>
-      </Panel>
-      <LogList>
-        <For each={logs()}>
-          {(log) => {
-            const textMatched = log.name.includes(filterText());
+    <TabTemplate
+      header={
+        <>
+          <PanelSection>
+            Show:
+            <Checkbox
+              value={kinds().includes('event')}
+              onClick={() => toggleKind('event')}
+              label="Event"
+            />
+            <Checkbox
+              value={kinds().includes('store')}
+              onClick={() => toggleKind('store')}
+              label="Store"
+            />
+            <Checkbox
+              value={kinds().includes('effect')}
+              onClick={() => toggleKind('effect')}
+              label="Effect"
+            />
+          </PanelSection>
+          <PanelSection>
+            Filter:
+            <FilterInput
+              value={filterText()}
+              onInput={(e) => filterChanged(e.currentTarget.value)}
+            />
+          </PanelSection>
+          <PanelSection>
+            <Button onClick={() => logCleared()}>Clear</Button>
+            <Show
+              when={!isLogEnabled()}
+              fallback={<PauseButton onClick={() => isLogEnabledToggle()} />}
+            >
+              <RunButton onClick={() => isLogEnabledToggle()} />
+            </Show>
+          </PanelSection>
+        </>
+      }
+      content={
+        <LogList>
+          <For each={logs()}>
+            {(log) => {
+              const textMatched = log.name.includes(filterText());
 
-            if (!textMatched) {
-              return null;
-            }
+              if (!textMatched) {
+                return null;
+              }
 
-            const time = log.datetime.toLocaleTimeString();
-            return (
-              <LogItem>
-                <LogTitle>{time} ▸</LogTitle>
-                <LogTitle>{log.kind}</LogTitle>
-                <LogTitle> «{log.name}» </LogTitle>
-                <UnitContent>
-                  <ValueView value={log.payload} />
-                </UnitContent>
-              </LogItem>
-            );
-          }}
-        </For>
-      </LogList>
-    </>
+              const time = log.datetime.toLocaleTimeString();
+              return (
+                <LogItem>
+                  <LogTitle>{time} ▸</LogTitle>
+                  <LogTitle>{log.kind}</LogTitle>
+                  <LogTitle> «{log.name}» </LogTitle>
+                  <UnitContent>
+                    <ValueView value={log.payload} />
+                  </UnitContent>
+                </LogItem>
+              );
+            }}
+          </For>
+        </LogList>
+      }
+    />
   );
 }
 
-const Panel = styled.div`
+const FilterInput = styled(Input)`
+  line-height: 1.5rem;
+`;
+
+const PanelSection = styled.div`
   display: flex;
-  flex-shrink: 0;
-  padding: 1rem;
+  gap: 0.5rem;
 `;
 
 const LogTitle = styled.pre`
@@ -96,7 +113,7 @@ const LogTitle = styled.pre`
   font-family: 'JetBrains Mono', hasklig, monofur, monospace;
 `;
 
-const LogItem = styled.div`
+const LogItem = styled.li`
   display: flex;
   margin: 0 0;
   padding: 6px 10px;
@@ -111,7 +128,7 @@ const LogList = styled.ul`
   flex-grow: 1;
   margin: 0 0;
   padding: 0 0;
-  overflow-x: auto;
+  width: 100%;
 
   list-style-type: none;
 `;
diff --git a/src/tabs/trace/view.tsx b/src/tabs/trace/view.tsx
index f638c86..a30b8bf 100644
--- a/src/tabs/trace/view.tsx
+++ b/src/tabs/trace/view.tsx
@@ -4,6 +4,7 @@ import {styled} from 'solid-styled-components';
 
 import {UnitContent} from '../../entities/units';
 import {Button, PauseButton, RunButton} from '../../shared/ui/button';
+import {TabTemplate} from '../../shared/ui/templates/template';
 import {ValueView} from '../../shared/ui/values';
 import {TraceEffectRun, TraceEventTrigger, TraceStoreChange} from '../../types.h';
 
@@ -13,45 +14,49 @@ export function Trace() {
   const [isTraceEnabled, traces] = useUnit([$isTraceEnabled, $traces]);
 
   return (
-    <>
-      <Actions>
-        <Button onClick={() => traceCleared()}>Clear</Button>
-        <Show
-          when={!isTraceEnabled()}
-          fallback={<PauseButton onClick={() => traceEnableToggled()} />}
-        >
-          <RunButton onClick={() => traceEnableToggled()} />
-        </Show>
-      </Actions>
-      <TraceList>
-        <For each={traces()}>
-          {(trace) => (
-            <>
-              <TraceTitle>
-                <ValueView value={new Date(trace.time)} />
-              </TraceTitle>
-              <For each={trace.traces}>
-                {(line) => (
-                  <Node>
-                    <Switch>
-                      <Match when={line.type === 'event'}>
-                        <TraceEvent trace={line as TraceEventTrigger} />
-                      </Match>
-                      <Match when={line.type === 'store'}>
-                        <TraceStore trace={line as TraceStoreChange} />
-                      </Match>
-                      <Match when={line.type === 'effect'}>
-                        <TraceEffect trace={line as TraceEffectRun} />
-                      </Match>
-                    </Switch>
-                  </Node>
-                )}
-              </For>
-            </>
-          )}
-        </For>
-      </TraceList>
-    </>
+    <TabTemplate
+      header={
+        <Actions>
+          <Button onClick={() => traceCleared()}>Clear</Button>
+          <Show
+            when={!isTraceEnabled()}
+            fallback={<PauseButton onClick={() => traceEnableToggled()} />}
+          >
+            <RunButton onClick={() => traceEnableToggled()} />
+          </Show>
+        </Actions>
+      }
+      content={
+        <TraceList>
+          <For each={traces()}>
+            {(trace) => (
+              <>
+                <TraceTitle>
+                  <ValueView value={new Date(trace.time)} />
+                </TraceTitle>
+                <For each={trace.traces}>
+                  {(line) => (
+                    <Node>
+                      <Switch>
+                        <Match when={line.type === 'event'}>
+                          <TraceEvent trace={line as TraceEventTrigger} />
+                        </Match>
+                        <Match when={line.type === 'store'}>
+                          <TraceStore trace={line as TraceStoreChange} />
+                        </Match>
+                        <Match when={line.type === 'effect'}>
+                          <TraceEffect trace={line as TraceEffectRun} />
+                        </Match>
+                      </Switch>
+                    </Node>
+                  )}
+                </For>
+              </>
+            )}
+          </For>
+        </TraceList>
+      }
+    />
   );
 }
 
@@ -108,8 +113,8 @@ function TraceEffect(props: {trace: TraceEffectRun}) {
 
 const Actions = styled.div`
   display: flex;
+  gap: 0.5rem;
   flex-shrink: 0;
-  padding: 1rem;
 `;
 
 const TraceList = styled.ul`
@@ -118,7 +123,6 @@ const TraceList = styled.ul`
   flex-grow: 1;
   margin: 0 0;
   padding: 0 0;
-  overflow-x: auto;
 
   list-style-type: none;
 `;