diff --git a/packages/app-frontend/src/assets/style/index.postcss b/packages/app-frontend/src/assets/style/index.postcss
index 0ce2be1a2..7e5dcc5f0 100644
--- a/packages/app-frontend/src/assets/style/index.postcss
+++ b/packages/app-frontend/src/assets/style/index.postcss
@@ -1,10 +1,3 @@
 .v-popper__popper.v-popper--theme-tooltip code {
   @apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
 }
-
-/* @TODO remove when vue-ui style is updated */
-
-.vue-ui-group:not(.vertical) > .indicator > .content {
-  margin: 0 12px;
-  width: calc(100% - 24px);
-}
diff --git a/packages/app-frontend/src/assets/style/index.styl b/packages/app-frontend/src/assets/style/index.styl
index ae61c5de4..9a71663aa 100644
--- a/packages/app-frontend/src/assets/style/index.styl
+++ b/packages/app-frontend/src/assets/style/index.styl
@@ -64,19 +64,6 @@ button:focus
 .vue-ui-icon svg
   fill currentColor
 
-.preferences
-  display flex
-  flex-wrap wrap
-  padding 12px 4px
-
-  > *
-    margin 16px 24px
-
-  .vue-ui-form-field
-    > .wrapper > .content
-      min-height 32px
-      justify-content center
-
 // Popover
 
 .v-popper--theme-dropdown
diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
index cc42dd156..d47f77cac 100644
--- a/packages/app-frontend/src/features/App.vue
+++ b/packages/app-frontend/src/features/App.vue
@@ -18,6 +18,7 @@ import {
 import { darkMode } from '@front/util/theme'
 import { useAppConnection } from './connection'
 import { showAppsSelector } from './header/header'
+import { useOrientation } from './layout/orientation'
 
 const chromeTheme = isChrome ? chrome.devtools.panels.themeName : undefined
 
@@ -72,10 +73,13 @@ export default defineComponent({
       }
     })
 
+    const { orientation } = useOrientation()
+
     return {
       isConnected,
       isInitializing,
       showAppsSelector,
+      orientation,
     }
   },
 })
@@ -83,9 +87,10 @@ export default defineComponent({
 
 <template>
   <div
-    class="app w-full h-full flex flex-col relative outline-none"
+    class="app w-full h-full flex relative outline-none"
     :class="{
-      'disconnected pointer-events-none': !isInitializing && !isConnected
+      'disconnected pointer-events-none': !isInitializing && !isConnected,
+      'flex-col': orientation === 'portrait',
     }"
     tabindex="0"
   >
diff --git a/packages/app-frontend/src/features/apps/AppSelect.vue b/packages/app-frontend/src/features/apps/AppSelect.vue
index 5b6ff267f..2767042ac 100644
--- a/packages/app-frontend/src/features/apps/AppSelect.vue
+++ b/packages/app-frontend/src/features/apps/AppSelect.vue
@@ -86,30 +86,14 @@ export default defineComponent({
   >
     <template #trigger>
       <VueButton
-        class="flat"
-        icon-left="wysiwyg"
-        :icon-right="orientation === 'landscape' ? 'arrow_drop_down' : null"
-        :class="{
-          'icon-button': orientation === 'portrait'
-        }"
+        class="flat icon-button"
       >
-        <div class="flex items-center space-x-2">
-          <template v-if="orientation === 'landscape'">
-            <span v-if="currentApp">
-              {{ currentApp.name }}
-            </span>
-            <span
-              v-else
-              class="opacity-50"
-            >
-              No app
-            </span>
-          </template>
-
+        <div class="flex items-center space-x-2 relative">
+          <img src="~@front/assets/vue-logo.svg" class="w-8 h-8">
           <VueIcon
             v-if="hasNewVueVersion"
             icon="new_releases"
-            class="text-green-500"
+            class="text-green-400 absolute right-0 bottom-0 w-4 h-4"
           />
         </div>
       </VueButton>
diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
index d0affe1e8..1157bbbdf 100644
--- a/packages/app-frontend/src/features/components/ComponentsInspector.vue
+++ b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -105,18 +105,101 @@ export default defineComponent({
     >
       <template #left>
         <div class="flex flex-col h-full">
-          <VueInput
-            ref="treeFilterInput"
-            v-model="treeFilter"
-            v-tooltip="{
-              content: $t('ComponentTree.filter.tooltip'),
-              html: true
-            }"
-            icon-left="search"
-            placeholder="Find components..."
-            select-all
-            class="search flat border-b border-gray-200 dark:border-gray-800 !min-w-0"
-          />
+          <div class="flex items-center border-b border-gray-200 dark:border-gray-800">
+            <VueInput
+              ref="treeFilterInput"
+              v-model="treeFilter"
+              v-tooltip="{
+                content: $t('ComponentTree.filter.tooltip'),
+                html: true
+              }"
+              icon-left="search"
+              placeholder="Find components..."
+              select-all
+              class="search flat !min-w-0 flex-1"
+            />
+
+            <VueButton
+              v-tooltip="{
+                content: $t('ComponentTree.select.tooltip'),
+                html: true
+              }"
+              class="icon-button flat"
+              icon-left="gps_fixed"
+              @click="startPickingComponent()"
+            />
+
+            <VueButton
+              v-tooltip="{
+                content: $t('ComponentTree.refresh.tooltip'),
+                html: true
+              }"
+              class="icon-button flat"
+              :class="{
+                'animate-icon': animateRefresh,
+              }"
+              icon-left="refresh"
+              @click="refresh()"
+            />
+
+            <VueDropdown
+              placement="bottom-end"
+            >
+              <template #trigger>
+                <VueButton
+                  icon-left="more_vert"
+                  class="icon-button flat"
+                />
+              </template>
+
+              <div class="space-y-1 px-3 py-2 text-sm">
+                <div>Component names:</div>
+
+                <VueGroup
+                  v-model="$shared.componentNameStyle"
+                >
+                  <VueGroupButton
+                    value="original"
+                    label="Original"
+                  />
+                  <VueGroupButton
+                    value="class"
+                    label="PascalCase"
+                  />
+                  <VueGroupButton
+                    value="kebab"
+                    label="kebab-case"
+                  />
+                </VueGroup>
+              </div>
+
+              <div class="space-y-1 px-3 py-2 text-sm">
+                <VueSwitch v-model="$shared.editableProps">
+                  Editable props
+                </VueSwitch>
+                <div class="flex items-center space-x-1 text-xs opacity-50">
+                  <VueIcon
+                    icon="warning"
+                    class="w-4 h-4 flex-none"
+                  />
+                  <span>May print warnings in the console</span>
+                </div>
+              </div>
+
+              <div class="space-y-1 px-3 py-2 text-sm">
+                <VueSwitch v-model="$shared.flashUpdates">
+                  Highlight updates
+                </VueSwitch>
+                <div class="flex items-center space-x-1 text-xs opacity-50">
+                  <VueIcon
+                    icon="warning"
+                    class="w-4 h-4 flex-none"
+                  />
+                  <span>Don't enable if you are sensitive to flashing</span>
+                </div>
+              </div>
+            </VueDropdown>
+          </div>
 
           <div
             ref="treeScroller"
@@ -136,82 +219,6 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <SafeTeleport to="#more-menu">
-      <div class="space-y-1 px-3 py-2 text-sm">
-        <div>Component names:</div>
-
-        <VueGroup
-          v-model="$shared.componentNameStyle"
-        >
-          <VueGroupButton
-            value="original"
-            label="Original"
-          />
-          <VueGroupButton
-            value="class"
-            label="PascalCase"
-          />
-          <VueGroupButton
-            value="kebab"
-            label="kebab-case"
-          />
-        </VueGroup>
-      </div>
-
-      <div class="space-y-1 px-3 py-2 text-sm">
-        <VueSwitch v-model="$shared.editableProps">
-          Editable props
-        </VueSwitch>
-        <div class="flex items-center space-x-1 text-xs opacity-50">
-          <VueIcon
-            icon="warning"
-            class="w-4 h-4 flex-none"
-          />
-          <span>May print warnings in the console</span>
-        </div>
-      </div>
-
-      <div class="space-y-1 px-3 py-2 text-sm">
-        <VueSwitch v-model="$shared.flashUpdates">
-          Highlight updates
-        </VueSwitch>
-        <div class="flex items-center space-x-1 text-xs opacity-50">
-          <VueIcon
-            icon="warning"
-            class="w-4 h-4 flex-none"
-          />
-          <span>Don't enable if you are sensitive to flashing</span>
-        </div>
-      </div>
-
-      <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
-    </SafeTeleport>
-
-    <SafeTeleport to="#header-end">
-      <VueButton
-        v-tooltip="{
-          content: $t('ComponentTree.select.tooltip'),
-          html: true
-        }"
-        class="icon-button flat"
-        icon-left="gps_fixed"
-        @click="startPickingComponent()"
-      />
-
-      <VueButton
-        v-tooltip="{
-          content: $t('ComponentTree.refresh.tooltip'),
-          html: true
-        }"
-        class="icon-button flat"
-        :class="{
-          'animate-icon': animateRefresh,
-        }"
-        icon-left="refresh"
-        @click="refresh()"
-      />
-    </SafeTeleport>
-
     <SafeTeleport to="#root">
       <div
         v-if="pickingComponent"
diff --git a/packages/app-frontend/src/features/header/AppHeader.vue b/packages/app-frontend/src/features/header/AppHeader.vue
index 3a00a882c..816ba2173 100644
--- a/packages/app-frontend/src/features/header/AppHeader.vue
+++ b/packages/app-frontend/src/features/header/AppHeader.vue
@@ -14,6 +14,7 @@ import { useInspectors } from '@front/features/inspector/custom/composable'
 import { useTabs } from './tabs'
 import { showAppsSelector } from './header'
 import { useOrientation } from '../layout/orientation'
+import { type Plugin, usePlugins } from '../plugin/index'
 
 interface HeaderRoute {
   icon: string
@@ -21,6 +22,7 @@ interface HeaderRoute {
   targetRoute: RouteLocationRaw
   matchRoute: (route: RouteLocation) => boolean
   pluginId?: string
+  plugin?: Plugin
 }
 
 export default defineComponent({
@@ -35,6 +37,16 @@ export default defineComponent({
   setup () {
     const route = useRoute()
 
+    // Plugins
+
+    const {
+      plugins,
+    } = usePlugins()
+
+    function getPlugin (pluginId: string) {
+      return plugins.value.find(p => p.id === pluginId)
+    }
+
     // Inspector routes
 
     const { inspectors: customInspectors } = useInspectors()
@@ -56,10 +68,26 @@ export default defineComponent({
       icon: i.icon || 'tab',
       label: i.label,
       pluginId: i.pluginId,
+      plugin: getPlugin(i.pluginId),
       targetRoute: { name: 'custom-inspector', params: { inspectorId: i.id } },
       matchRoute: route => route.params.inspectorId === i.id,
     }))))
 
+    const routesPerPlugin = computed(() => {
+      const routes: Record<string, HeaderRoute[]> = {}
+      for (const route of headerRoutes.value) {
+        if (route.pluginId) {
+          if (!routes[route.pluginId]) {
+            routes[route.pluginId] = []
+          }
+          routes[route.pluginId].push(route)
+        }
+      }
+      return routes
+    })
+
+    const logoErrors = ref(new Set<string>())
+
     const currentHeaderRoute = computed(() => headerRoutes.value.find(r => r.matchRoute(route)))
 
     const lastHeaderRoute = ref(null)
@@ -69,6 +97,13 @@ export default defineComponent({
       }
     })
 
+    function shouldDisplayLogo (item: HeaderRoute) {
+      if (item.pluginId?.startsWith('org.vuejs')) {
+        return false
+      }
+      return item.plugin?.logo && routesPerPlugin.value[item.pluginId]?.length < 2 && !logoErrors.value.has(item.pluginId)
+    }
+
     // Current tab
     const { currentTab } = useTabs()
     const { bridge } = useBridge()
@@ -89,139 +124,140 @@ export default defineComponent({
       lastHeaderRoute,
       showAppsSelector,
       orientation,
+      routesPerPlugin,
+      logoErrors,
+      shouldDisplayLogo,
     }
   },
 })
 </script>
 
 <template>
-  <div class="flex items-center space-x-2 px-2 h-8 box-content">
-    <AppHistoryNav />
-
-    <template v-if="showAppsSelector">
-      <AppSelect />
+  <div class="flex items-center border-r border-gray-200 dark:border-gray-800 p-0.5"
+    :class="{
+      'flex-col': orientation === 'landscape',
+    }"
+  >
+    <AppSelect v-if="showAppsSelector"/>
+    <img
+      v-else
+      src="~@front/assets/vue-logo.svg"
+      class="w-8 h-8"
+    >
 
-      <img src="~@front/assets/breadcrumb-separator.svg">
-    </template>
-
-    <template v-if="orientation === 'portrait' || headerRoutes.length * 200 > $responsive.width.value - 250">
-      <AppHeaderSelect
-        :items="headerRoutes"
-        :selected-item="currentHeaderRoute"
-        @select="route => $router.push(route.targetRoute)"
+    <VueGroup
+      :model-value="currentHeaderRoute"
+      class="primary"
+      :class="{
+        vertical: orientation === 'landscape',
+      }"
+      indicator
+      @update:modelValue="(route: HeaderRoute) => route && $router.push(route.targetRoute)"
+    >
+      <VTooltip
+        v-for="(item, index) of headerRoutes"
+        :key="index"
+        placement="right"
+        class="leading-none"
       >
-        <template #default="{ item }">
-          <div class="flex items-center space-x-2">
-            <span class="flex-1">{{ item.label }}</span>
-            <PluginSourceIcon
-              v-if="item.pluginId"
-              :plugin-id="item.pluginId"
-              class="flex-none"
-            />
-          </div>
-        </template>
-      </AppHeaderSelect>
-    </template>
-
-    <template v-else>
-      <VueGroup
-        :model-value="currentHeaderRoute"
-        class="primary"
-        indicator
-        @update:modelValue="(route: HeaderRoute) => route && $router.push(route.targetRoute)"
-      >
-        <VTooltip
-          v-for="(item, index) of headerRoutes"
-          :key="index"
-          :disabled="!item.pluginId"
-          class="leading-none"
+        <VueGroupButton
+          :value="item"
+          :icon-left="shouldDisplayLogo(item) ? null : item.icon"
+          class="flat icon-button"
         >
-          <VueGroupButton
-            :value="item"
-            :icon-left="item.icon"
-            class="flat"
-          >
-            {{ item.label }}
-          </VueGroupButton>
-
-          <template #popper>
-            <PluginSourceDescription
-              :plugin-id="item.pluginId"
-            />
-          </template>
-        </VTooltip>
-      </VueGroup>
-    </template>
+          <img
+            v-if="shouldDisplayLogo(item)"
+            :src="item.plugin.logo"
+            class="w-4 h-4"
+            @error="logoErrors.add(item.pluginId)"
+          />
+        </VueGroupButton>
+
+        <template #popper>
+          <div class="font-bold">{{ item.label }}</div>
+          <PluginSourceDescription
+            v-if="item.pluginId"
+            :plugin-id="item.pluginId"
+            class="mt-2"
+          />
+        </template>
+      </VTooltip>
+    </VueGroup>
 
     <div class="flex-1" />
 
-    <div class="flex items-center">
-      <TeleportTarget
-        id="header-end"
-        class="flex items-center"
+    <VueDropdown
+      :placement="orientation === 'landscape' ? 'right' : 'bottom-end'"
+    >
+      <template #trigger>
+        <VueButton
+          icon-left="settings"
+          class="icon-button flat"
+        />
+      </template>
+
+      <AppHistoryNav
+        class="px-2 py-1"
       />
-      <VueDropdown
-        :offset="[0, 0]"
+
+      <VueDropdownButton
+        :to="{
+          name: 'global-settings'
+        }"
+        icon-left="settings"
       >
-        <template #trigger>
-          <VueButton
-            icon-left="more_vert"
-            class="icon-button flat"
-          />
-        </template>
+        More settings
+      </VueDropdownButton>
 
-        <TeleportTarget id="more-menu" />
+      <VueDropdownButton
+        :to="{
+          name: 'plugins'
+        }"
+        icon-left="extension"
+      >
+        Devtools plugins
+      </VueDropdownButton>
 
-        <VueDropdownButton
-          :to="{
-            name: 'plugins'
-          }"
-          icon-left="extension"
-        >
-          Devtools plugins
-        </VueDropdownButton>
+      <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
 
-        <VueDropdownButton
-          :to="{
-            name: 'global-settings'
-          }"
-          icon-left="settings"
-        >
-          Global settings
-        </VueDropdownButton>
+      <VueDropdownButton
+        href="https://devtools.vuejs.org"
+        target="_blank"
+        icon-left="description"
+        icon-right="open_in_new"
+        class="right-icon-reveal"
+      >
+        Documentation
+      </VueDropdownButton>
 
-        <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
+      <VueDropdownButton
+        href="https://github.com/vuejs/devtools/issues/new/choose"
+        target="_blank"
+        icon-left="bug_report"
+        icon-right="open_in_new"
+        class="right-icon-reveal"
+      >
+        Report a bug
+      </VueDropdownButton>
 
-        <VueDropdownButton
-          href="https://devtools.vuejs.org"
-          target="_blank"
-          icon-left="description"
-          icon-right="open_in_new"
-          class="right-icon-reveal"
-        >
-          Documentation
-        </VueDropdownButton>
-
-        <VueDropdownButton
-          href="https://github.com/vuejs/devtools/issues/new/choose"
-          target="_blank"
-          icon-left="bug_report"
-          icon-right="open_in_new"
-          class="right-icon-reveal"
-        >
-          Report a bug
-        </VueDropdownButton>
-
-        <VueDropdownButton
-          href="https://github.com/vuejs/vue-devtools/releases"
-          target="_blank"
-          icon-left="campaign"
-          icon-right="open_in_new"
-          class="right-icon-reveal"
-        >
-          What's new
-        </VueDropdownButton>
-      </VueDropdown>
-    </div>
+      <VueDropdownButton
+        href="https://github.com/vuejs/vue-devtools/releases"
+        target="_blank"
+        icon-left="campaign"
+        icon-right="open_in_new"
+        class="right-icon-reveal"
+      >
+        What's new
+      </VueDropdownButton>
+    </VueDropdown>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.vue-ui-group :deep(.indicator) {
+  @apply !p-0.5;
+  .content {
+    @apply !border !border-green-500/30 rounded-md bg-green-500/10;
+  }
+}
+</style>
diff --git a/packages/app-frontend/src/features/header/AppHeaderSelect.vue b/packages/app-frontend/src/features/header/AppHeaderSelect.vue
index bd8f3b894..fee09b139 100644
--- a/packages/app-frontend/src/features/header/AppHeaderSelect.vue
+++ b/packages/app-frontend/src/features/header/AppHeaderSelect.vue
@@ -157,7 +157,7 @@ export default defineComponent({
 <template>
   <VueDropdown
     v-model="isShown"
-    placement="bottom-start"
+    :placement="orientation === 'landscape' ? 'right-start' : 'bottom-start'"
     :triggers="[]"
     :offset="[0, 0]"
     :delay="0"
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
index 0f83c37bd..c8e8da97b 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
@@ -96,8 +96,26 @@ export default defineComponent({
               class="search flat !min-w-0 flex-1 mr-2"
             />
 
+            <template v-if="inspector?.actions">
+              <VueButton
+                v-for="(action, index) of inspector.actions"
+                :key="index"
+                v-tooltip="action.tooltip"
+                class="icon-button flat"
+                :icon-left="action.icon"
+                @click="executeCustomAction(index)"
+              />
+            </template>
+            <VueButton
+              v-tooltip="'Refresh'"
+              class="icon-button flat"
+              icon-left="refresh"
+              @click="refreshInspector()"
+            />
+
             <PluginSourceIcon
               :plugin-id="inspector.pluginId"
+              class="ml-2"
             />
           </div>
 
@@ -120,25 +138,6 @@ export default defineComponent({
         <CustomInspectorSelectedNodePane />
       </template>
     </SplitPane>
-
-    <SafeTeleport to="#header-end">
-      <template v-if="inspector?.actions">
-        <VueButton
-          v-for="(action, index) of inspector.actions"
-          :key="index"
-          v-tooltip="action.tooltip"
-          class="icon-button flat"
-          :icon-left="action.icon"
-          @click="executeCustomAction(index)"
-        />
-      </template>
-      <VueButton
-        v-tooltip="'Refresh'"
-        class="icon-button flat"
-        icon-left="refresh"
-        @click="refreshInspector()"
-      />
-    </SafeTeleport>
   </div>
   <EmptyPane
     v-else
diff --git a/packages/app-frontend/src/features/plugin/Plugins.vue b/packages/app-frontend/src/features/plugin/Plugins.vue
index fd9ac0be1..fd2bfed86 100644
--- a/packages/app-frontend/src/features/plugin/Plugins.vue
+++ b/packages/app-frontend/src/features/plugin/Plugins.vue
@@ -47,14 +47,25 @@ export default defineComponent({
     >
       <template #left>
         <div class="h-full flex flex-col">
-          <div class="flex-none">
+          <div class="flex-none flex items-center border-b border-gray-200 dark:border-gray-800">
             <VueInput
               v-model="search"
               icon-left="search"
               placeholder="Filter devtools plugins..."
               select-all
-              class="w-full flat border-b border-gray-200 dark:border-gray-800"
+              class="flex-1 w-0 flat"
             />
+
+            <VueButton
+              :to="{
+                name: 'global-settings'
+              }"
+              icon-left="settings"
+              icon-right="arrow_forward"
+              class="flat"
+            >
+              Global settings
+            </VueButton>
           </div>
           <div class="overflow-y-auto">
             <PluginListItem
@@ -72,18 +83,6 @@ export default defineComponent({
         </div>
       </template>
     </SplitPane>
-
-    <SafeTeleport to="#header-end">
-      <VueButton
-        :to="{
-          name: 'global-settings'
-        }"
-        icon-left="settings"
-        class="flat"
-      >
-        Global settings
-      </VueButton>
-    </SafeTeleport>
   </div>
 </template>
 
diff --git a/packages/app-frontend/src/features/settings/GlobalSettings.vue b/packages/app-frontend/src/features/settings/GlobalSettings.vue
index b1af8447f..c525b81dd 100644
--- a/packages/app-frontend/src/features/settings/GlobalSettings.vue
+++ b/packages/app-frontend/src/features/settings/GlobalSettings.vue
@@ -1,20 +1,49 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { supportsScreenshot } from '../timeline/composable/screenshot'
 
-// import NewTag from './NewTag.vue'
+type Tab = 'global' | 'components' | 'timeline'
 
-// export default {
-//   components: {
-//     NewTag
-//   }
-// }
-
-export default defineComponent({})
+const tab = ref<Tab>('global')
 </script>
 
 <template>
-  <div class="global-preferences">
-    <div class="preferences">
+  <div class="global-preferences p-6">
+    <nav class="flex items-center gap-2 pb-4">
+      <VueGroup
+        v-model="tab"
+        indicator
+      >
+        <VueGroupButton
+          value="global"
+          label="Global"
+          class="flat"
+        />
+        <VueGroupButton
+          value="components"
+          label="Components"
+          class="flat"
+        />
+        <VueGroupButton
+          value="timeline"
+          label="Timeline"
+          class="flat"
+        />
+      </VueGroup>
+
+      <VueButton
+        :to="{
+          name: 'plugins'
+        }"
+        icon-left="extension"
+        icon-right="arrow_forward"
+        class="flat"
+      >
+        Plugin settings
+      </VueButton>
+    </nav>
+
+    <div v-if="tab === 'global'" class="preferences flex flex-wrap gap-8">
       <VueFormField title="Theme">
         <VueGroup
           v-model="$shared.theme"
@@ -81,16 +110,80 @@ export default defineComponent({})
       </VueFormField>
     </div>
 
-    <SafeTeleport to="#header-end">
-      <VueButton
-        :to="{
-          name: 'plugins'
-        }"
-        icon-left="extension"
-        class="flat"
+    <div v-if="tab === 'components'" class="preferences flex flex-wrap gap-8">
+      <VueFormField
+        title="Component names"
       >
-        Plugin settings
-      </VueButton>
-    </SafeTeleport>
+        <VueGroup
+          v-model="$shared.componentNameStyle"
+        >
+          <VueGroupButton
+            value="original"
+            label="Original"
+          />
+          <VueGroupButton
+            value="class"
+            label="PascalCase"
+          />
+          <VueGroupButton
+            value="kebab"
+            label="kebab-case"
+          />
+        </VueGroup>
+      </VueFormField>
+
+      <VueFormField
+        title="Editable props"
+      >
+        <VueSwitch v-model="$shared.editableProps">
+          Enable
+        </VueSwitch>
+        <template #subtitle>
+          May print warnings in the console
+        </template>
+      </VueFormField>
+
+      <VueFormField
+        title="Highlight updates"
+      >
+        <VueSwitch v-model="$shared.flashUpdates">
+          Enable
+        </VueSwitch>
+        <template #subtitle>
+          Don't enable if you are sensitive to flashing
+        </template>
+      </VueFormField>
+    </div>
+
+    <div v-if="tab === 'timeline'" class="preferences flex flex-wrap gap-8">
+      <VueFormField
+        title="Time grid"
+      >
+        <VueSwitch v-model="$shared.timelineTimeGrid">
+          Enable
+        </VueSwitch>
+      </VueFormField>
+
+      <VueFormField
+        v-if="supportsScreenshot"
+        title="Screenshots"
+      >
+        <VueSwitch v-model="$shared.timelineScreenshots">
+          Enable
+        </VueSwitch>
+      </VueFormField>
+    </div>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.preferences {
+
+  .vue-ui-form-field {
+    > .wrapper > .content {
+      min-height: 32px;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/packages/app-frontend/src/features/timeline/Timeline.vue
index 16dd13d5d..96d3643bc 100644
--- a/packages/app-frontend/src/features/timeline/Timeline.vue
+++ b/packages/app-frontend/src/features/timeline/Timeline.vue
@@ -337,7 +337,88 @@ export default defineComponent({
     >
       <template #left>
         <div class="flex flex-col h-full">
-          <div class="h-4 flex-none border-b border-gray-200 dark:border-gray-800 box-content" />
+          <div class="h-8 flex-none border-b border-gray-200 dark:border-gray-800 box-content flex items-center">
+            <VueDropdown>
+              <template #trigger>
+                <VueButton
+                  v-tooltip="'Select layers'"
+                  class="flat"
+                  icon-left="layers"
+                >
+                  {{ layers.length }} layer{{ layers.length === 1 ? '' : 's' }}
+                </VueButton>
+              </template>
+
+              <div
+                style="max-height: 250px;"
+                class="overflow-x-hidden overflow-y-auto"
+              >
+                <div class="flex flex-col">
+                  <VueSwitch
+                    v-for="layer of allLayers"
+                    :key="layer.id"
+                    :model-value="!isLayerHidden(layer)"
+                    class="extend-left px-2 py-1 hover:bg-green-100 dark:hover:bg-green-900"
+                    @update:modelValue="value => setLayerHidden(layer, !value)"
+                  >
+                    <div class="flex items-center space-x-2 max-w-xs">
+                      <div
+                        class="flex-none w-3 h-3 rounded-full"
+                        :style="{
+                          backgroundColor: `#${layer.color.toString(16).padStart(6, '0')}`
+                        }"
+                      />
+
+                      <div class="flex-1 truncate">
+                        {{ layer.label }}
+                      </div>
+
+                      <PluginSourceIcon
+                        v-if="layer.pluginId"
+                        :plugin-id="layer.pluginId"
+                        class="flex-none"
+                      />
+                    </div>
+                  </VueSwitch>
+                </div>
+              </div>
+            </VueDropdown>
+
+            <VueButton
+              v-tooltip="'Clear all timelines'"
+              class="icon-button flat"
+              icon-left="delete_sweep"
+              @click="resetTimeline()"
+            />
+
+            <div class="flex-1" />
+
+            <VueDropdown
+              placement="bottom-end"
+            >
+              <template #trigger>
+                <VueButton
+                  icon-left="more_vert"
+                  class="icon-button flat"
+                />
+              </template>
+
+              <VueSwitch
+                v-model="$shared.timelineTimeGrid"
+                class="w-full px-3 py-1 extend-left"
+              >
+                Time grid
+              </VueSwitch>
+
+              <VueSwitch
+                v-if="supportsScreenshot"
+                v-model="$shared.timelineScreenshots"
+                class="w-full px-3 py-1 extend-left"
+              >
+                Screenshots
+              </VueSwitch>
+            </VueDropdown>
+          </div>
 
           <div
             ref="layersEl"
@@ -371,7 +452,7 @@ export default defineComponent({
         >
           <template #left>
             <div class="h-full flex flex-col select-none">
-              <div class="flex items-center flex-none border-b border-gray-200 dark:border-gray-800">
+              <div class="h-8 flex items-center flex-none border-b border-gray-200 dark:border-gray-800">
                 <VueButton
                   icon-left="arrow_left"
                   class="flex-none w-4 h-4 p-0 flat zoom-btn"
@@ -450,78 +531,6 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <SafeTeleport to="#header-end">
-      <VueDropdown>
-        <template #trigger>
-          <VueButton
-            v-tooltip="'Select layers'"
-            class="icon-button flat"
-            icon-left="layers"
-          />
-        </template>
-
-        <div
-          style="max-height: 250px;"
-          class="overflow-x-hidden overflow-y-auto"
-        >
-          <div class="flex flex-col">
-            <VueSwitch
-              v-for="layer of allLayers"
-              :key="layer.id"
-              :model-value="!isLayerHidden(layer)"
-              class="extend-left px-2 py-1 hover:bg-green-100 dark:hover:bg-green-900"
-              @update:modelValue="value => setLayerHidden(layer, !value)"
-            >
-              <div class="flex items-center space-x-2 max-w-xs">
-                <div
-                  class="flex-none w-3 h-3 rounded-full"
-                  :style="{
-                    backgroundColor: `#${layer.color.toString(16).padStart(6, '0')}`
-                  }"
-                />
-
-                <div class="flex-1 truncate">
-                  {{ layer.label }}
-                </div>
-
-                <PluginSourceIcon
-                  v-if="layer.pluginId"
-                  :plugin-id="layer.pluginId"
-                  class="flex-none"
-                />
-              </div>
-            </VueSwitch>
-          </div>
-        </div>
-      </VueDropdown>
-
-      <VueButton
-        v-tooltip="'Clear all timelines'"
-        class="icon-button flat"
-        icon-left="delete_sweep"
-        @click="resetTimeline()"
-      />
-    </SafeTeleport>
-
-    <SafeTeleport to="#more-menu">
-      <VueSwitch
-        v-model="$shared.timelineTimeGrid"
-        class="w-full px-3 py-1 extend-left"
-      >
-        Time grid
-      </VueSwitch>
-
-      <VueSwitch
-        v-if="supportsScreenshot"
-        v-model="$shared.timelineScreenshots"
-        class="w-full px-3 py-1 extend-left"
-      >
-        Screenshots
-      </VueSwitch>
-
-      <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
-    </SafeTeleport>
-
     <AskScreenshotPermission
       v-if="askScreenshotPermission"
       class="ask-permission"
diff --git a/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue b/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
index e5571899c..0f6ee7d15 100644
--- a/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
+++ b/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
@@ -153,13 +153,13 @@ export default defineComponent({
 <template>
   <div
     ref="el"
-    class="h-4 bg-gray-200 dark:bg-black relative select-none"
+    class="h-6 bg-gray-200 dark:bg-gray-900 relative select-none"
   >
     <!-- Main Bar -->
     <div
-      class="absolute h-full top-0 bg-white dark:bg-gray-800 hover:bg-green-200 dark:hover:bg-green-800 cursor-move"
+      class="absolute h-full top-0 bg-green-200 dark:bg-green-900 hover:bg-green-100 dark:hover:bg-green-800 cursor-move"
       :class="{
-        'bg-green-200 dark:bg-green-800': moving
+        'bg-green-100 dark:bg-green-800': moving
       }"
       :style="{
         left: `${(start - min) / (max - min) * 100}%`,