diff --git a/components/global/LeftSidebar.vue b/components/global/LeftSidebar.vue
new file mode 100644
index 0000000..29f74c6
--- /dev/null
+++ b/components/global/LeftSidebar.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" style="user-select: none; flex-shrink: 0;">
+    <path fill="currentColor" fill-rule="evenodd" d="M2.25 7A2.75 2.75 0 0 1 5 4.25h14A2.75 2.75 0 0 1 21.75 7v10A2.75 2.75 0 0 1 19 19.75H5A2.75 2.75 0 0 1 2.25 17V7ZM5 5.75h5.25v12.5H5c-.69 0-1.25-.56-1.25-1.25V7c0-.69.56-1.25 1.25-1.25Zm6.75 0v12.5H19c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25h-7.25ZM6 7.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Zm-.75 3.25A.75.75 0 0 1 6 9.75h2a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 12.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Z" clip-rule="evenodd" />
+  </svg>
+</template>
diff --git a/components/layout/Root.vue b/components/layout/Root.vue
index 42f6c4f..a13b9ca 100644
--- a/components/layout/Root.vue
+++ b/components/layout/Root.vue
@@ -2,18 +2,11 @@
 defineOptions({
   name: 'LayoutRoot',
 })
-
-const sidebar = useSidebarStore()
-
-function splitpanesResize(size: number) {
-  sidebar.panSize.size = size
-  sidebar.handleMoveSize()
-}
 </script>
 
 <template>
   <LayoutBasic :border-positions="[]">
-    <Splitpanes @resize="splitpanesResize($event[0].size)">
+    <Splitpanes>
       <Sidebar />
       <SplitpanesPane :size="80" :min-size="70" :max-size="85">
         <slot />
diff --git a/components/sidebar/Sidebar.vue b/components/sidebar/Sidebar.vue
index 467b269..ac6fafc 100644
--- a/components/sidebar/Sidebar.vue
+++ b/components/sidebar/Sidebar.vue
@@ -1,21 +1,16 @@
 <script setup lang="ts">
 const sidebar = useSidebarStore()
 
-watch(() => sidebar.show, () => {
-  if (sidebar.show)
-    sidebar.handleCreateSize()
-
-  else
-    sidebar.handleClearSize()
-})
+const { panSize, show } = storeToRefs(sidebar)
 </script>
 
 <template>
   <SplitpanesPane
+    v-if="show"
     class="bg-light-50 dark:bg-#050505 border-r border-gray-400/20"
-    :size="sidebar.panSize.size"
-    :min-size="sidebar.panSize.minSize"
-    :max-size="sidebar.panSize.maxSize"
+    :size="panSize.size"
+    :min-size="panSize.minSize"
+    :max-size="panSize.maxSize"
   >
     <nav class="flex flex-col" livraison-app="sideabr">
       <SidebarIconAction />
diff --git a/components/sidebar/icon/Action.vue b/components/sidebar/icon/Action.vue
index 4cd0d06..9bf2c37 100644
--- a/components/sidebar/icon/Action.vue
+++ b/components/sidebar/icon/Action.vue
@@ -7,6 +7,15 @@ const showSidebar = useSidebarStore()
 function handleSidebarToggle() {
   showSidebar.handleToggleSidebar()
 }
+
+defineShortcuts({
+  'meta_/': {
+    usingInput: true,
+    handler: () => {
+      showSidebar.handleToggleSidebar()
+    },
+  },
+})
 </script>
 
 <template>
@@ -14,9 +23,7 @@ function handleSidebarToggle() {
     <IconButton
       @click="handleSidebarToggle"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" style="user-select: none; flex-shrink: 0;">
-        <path fill="currentColor" fill-rule="evenodd" d="M2.25 7A2.75 2.75 0 0 1 5 4.25h14A2.75 2.75 0 0 1 21.75 7v10A2.75 2.75 0 0 1 19 19.75H5A2.75 2.75 0 0 1 2.25 17V7ZM5 5.75h5.25v12.5H5c-.69 0-1.25-.56-1.25-1.25V7c0-.69.56-1.25 1.25-1.25Zm6.75 0v12.5H19c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25h-7.25ZM6 7.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Zm-.75 3.25A.75.75 0 0 1 6 9.75h2a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 12.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Z" clip-rule="evenodd" />
-      </svg>
+      <GlobalLeftSidebar />
     </IconButton>
   </div>
 </template>
diff --git a/components/sidebar/search/Search.vue b/components/sidebar/search/Search.vue
index 13f01b9..0e8ceec 100644
--- a/components/sidebar/search/Search.vue
+++ b/components/sidebar/search/Search.vue
@@ -3,11 +3,31 @@ defineOptions({
   name: 'SidebarSearch',
 })
 
-const isMac = computed(() => process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
+const { metaSymbol } = useShortcuts()
 
 const searchRef = ref(null)
 
 const { elementX, elementY, isOutside } = useMouseInElement(searchRef)
+
+const searchStore = useSearchStore()
+
+const { modalShow } = storeToRefs(searchStore)
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      searchStore.toggleModal()
+    },
+  },
+  escape: {
+    usingInput: true,
+    whenever: [modalShow],
+    handler: () => {
+      searchStore.toggleModal()
+    },
+  },
+})
 </script>
 
 <template>
@@ -15,12 +35,13 @@ const { elementX, elementY, isOutside } = useMouseInElement(searchRef)
     ref="searchRef"
     livraison-app="search"
     class="items-center border border-[color:#000000] border-op-10 dark:border-[color:#ffffff] dark:border-op-10 cursor-pointer inline-flex text-sm h-9 relative select-none w-full mx-0 my-5 px-3 py-0 rounded-lg border-solid [background:rgba(255,255,255,0.1)] dark:[background:rgba(0,0,0,0.1)] whitespace-nowrap text-ellipsis"
+    @click="searchStore.toggleModal()"
   >
     <Icon name="carbon:search" class="mr-2 text-5 color-#77757d dark:color-#a8a8a0 [user-select:none] flex-shrink-0" />
     Quick search
     <div class="flex-1" />
     <div class="text-3 text-black text-op-30 dark:text-white dark:text-op-30">
-      {{ isMac ? '⌘' : 'ctrl' }} + K
+      {{ metaSymbol }} + K
     </div>
     <div
       livraison-app="effect"
@@ -28,6 +49,7 @@ const { elementX, elementY, isOutside } = useMouseInElement(searchRef)
       class="opacity-[var(--mouse-outside)] pointer-events-none absolute transition-all duration-[0.2s] [will-change:background,opacity] z-[1] rounded-[inherit] inset-0 sidebar-search-effect"
     />
   </div>
+  <SidebarSearchModal />
 </template>
 
 <style scoped>
diff --git a/components/sidebar/search/item/Group.vue b/components/sidebar/search/item/Group.vue
new file mode 100644
index 0000000..7f0b75c
--- /dev/null
+++ b/components/sidebar/search/item/Group.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'SidebarSearchComdGroup',
+})
+
+const props = defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div livraison-app="cmd-group">
+    <div
+      livraison-app="cmd-group-title"
+      class="pt-4 p-2 text-#8e8d91 dark:text-#9c9ca0 text-xs font-semibold leading-[1.67]"
+    >
+      {{ props.title }}
+    </div>
+    <div livraison-app="cmd-group-list">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/components/sidebar/search/item/Item.vue b/components/sidebar/search/item/Item.vue
new file mode 100644
index 0000000..3e6a0c6
--- /dev/null
+++ b/components/sidebar/search/item/Item.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div livraison-app="cmd-item" class="items-center rounded cursor-default flex min-h-11 select-none px-3 py-1.5 hover:bg-#f4f4f5 dark:hover:bg-#252525 cursor-pointer">
+    <div livraison-app="cmd-item-icon" class="items-center text-#77757d dark:text-#a7a7a099 flex shrink-0 text-xl mr-4">
+      <slot name="icon" />
+    </div>
+    <div livraison-app="cmd-item-label" class="text-#424149 dark:text-#eaeaea flex-1 text-sm leading-normal overflow-hidden text-ellipsis whitespace-nowrap">
+      <div class="font-normal text-justify text-base leading-6 flex flex-nowrap">
+        <span class="text-[#1c9ee4] shrink-0 overflow-visible whitespace-pre" />
+        <div class="overflow-hidden text-ellipsis whitespace-pre">
+          <slot />
+        </div>
+      </div>
+    </div>
+    <div livraison-app="cmd-item-suffix" class="gap-x-0.5 flex text-xs">
+      <slot name="suffix" />
+    </div>
+  </div>
+</template>
diff --git a/components/sidebar/search/list/GoToSettings.vue b/components/sidebar/search/list/GoToSettings.vue
new file mode 100644
index 0000000..1555363
--- /dev/null
+++ b/components/sidebar/search/list/GoToSettings.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const searchStore = useSearchStore()
+
+const settingsStore = useSettingsStore()
+
+function handleGoToSettings() {
+  searchStore.toggleModal()
+  settingsStore.toggleModalShow()
+}
+</script>
+
+<template>
+  <SidebarSearchItem @click="handleGoToSettings">
+    <template #icon>
+      <Icon name="carbon:arrow-right" class="shrink-0 select-none" />
+    </template>
+    Go to Settings
+  </SidebarSearchItem>
+</template>
diff --git a/components/sidebar/search/list/SettingColorMode.vue b/components/sidebar/search/list/SettingColorMode.vue
new file mode 100644
index 0000000..73cbf5d
--- /dev/null
+++ b/components/sidebar/search/list/SettingColorMode.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const settingColorModeList = ref<{
+  label: string
+  value: string
+  handle: () => void
+}[]>([
+      {
+        label: 'Change Colour Mode to System',
+        value: 'system',
+        handle: () => {
+          colorMode.preference = 'system'
+        },
+      },
+      {
+        label: 'Change Colour Mode to Dark',
+        value: 'dark',
+        handle: () => {
+          colorMode.preference = 'dark'
+        },
+      },
+      {
+        label: 'Change Colour Mode to Light',
+        value: 'light',
+        handle: () => {
+          colorMode.preference = 'light'
+        },
+      },
+    ])
+</script>
+
+<template>
+  <template v-for="setting in settingColorModeList" :key="setting.label">
+    <SidebarSearchListSettingList
+      v-if="setting.value !== colorMode.preference"
+      :label="setting.label"
+      :handle="setting.handle"
+    />
+  </template>
+</template>
diff --git a/components/sidebar/search/list/SettingList.vue b/components/sidebar/search/list/SettingList.vue
new file mode 100644
index 0000000..dd1fd0d
--- /dev/null
+++ b/components/sidebar/search/list/SettingList.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  handle: () => void
+}>()
+</script>
+
+<template>
+  <SidebarSearchItem @click="props.handle">
+    <template #icon>
+      <Icon name="carbon:settings" class="shrink-0 select-none" />
+    </template>
+    {{ props.label }}
+  </SidebarSearchItem>
+</template>
diff --git a/components/sidebar/search/list/ToggleSidebar.vue b/components/sidebar/search/list/ToggleSidebar.vue
new file mode 100644
index 0000000..9c7195a
--- /dev/null
+++ b/components/sidebar/search/list/ToggleSidebar.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const searchStore = useSearchStore()
+
+const showSidebar = useSidebarStore()
+
+const { metaSymbol } = useShortcuts()
+
+function handleToggleLeftSidebar() {
+  showSidebar.handleToggleSidebar()
+  searchStore.toggleModal()
+}
+</script>
+
+<template>
+  <SidebarSearchItem @click="handleToggleLeftSidebar()">
+    <template #icon>
+      <GlobalLeftSidebar class="shrink-0 select-none" />
+    </template>
+    {{ showSidebar.show ? 'Collapse' : 'Expand' }} Left Sidebar
+    <template #suffix>
+      <Kbd :label="metaSymbol" />
+      <Kbd label="/" />
+    </template>
+  </SidebarSearchItem>
+</template>
diff --git a/components/sidebar/search/modal/Input.vue b/components/sidebar/search/modal/Input.vue
new file mode 100644
index 0000000..f9665ff
--- /dev/null
+++ b/components/sidebar/search/modal/Input.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <input
+    placeholder="Type a command or search anything..."
+    class="text-#424149 dark:text-#eaeaea shrink-0 text-xl h-16.5 w-full px-6 py-[21px] border-b-#e3e2e4 dark:border-b-#2e2e2e border-b border-solid bg-transparent caret-[#1c9ee4] rounded-none border-[none]"
+  >
+</template>
diff --git a/components/sidebar/search/modal/Label.vue b/components/sidebar/search/modal/Label.vue
new file mode 100644
index 0000000..a04bd8f
--- /dev/null
+++ b/components/sidebar/search/modal/Label.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'SidebarSearchModalLabel',
+})
+</script>
+
+<template>
+  <label class="cursor-default absolute w-px h-px overflow-hidden whitespace-nowrap -m-px p-0 border-0" style="clip: rect(0px, 0px, 0px, 0px)" />
+</template>
diff --git a/components/sidebar/search/modal/Modal.vue b/components/sidebar/search/modal/Modal.vue
new file mode 100644
index 0000000..ebe569c
--- /dev/null
+++ b/components/sidebar/search/modal/Modal.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const searchStore = useSearchStore()
+</script>
+
+<template>
+  <ModalCard
+    :show="searchStore.modalShow"
+    @click-mask="searchStore.toggleModal()"
+  >
+    <div
+      :data-state="searchStore.modalShow ? 'entered' : 'exited'"
+      class="sidebar-search-modal-box sidebar-search-modal-box-shadow"
+    >
+      <div class="flex flex-col h-full">
+        <SidebarSearchModalLabel />
+        <SidebarSearchModalInput />
+        <div
+          class="
+            h-[min(330px,calc(1500.0px_+_8px))]
+            max-h-100
+            min-h-30
+            overflow-auto
+            overscroll-contain
+            pl-1.5
+            pr-0
+            pt-0
+            pb-2
+            [scroll-padding-block:12px]
+            [scrollbar-gutter:stable]
+          "
+          style="ransition: height .1s ease;"
+        >
+          <div livraison-app="cmd-list">
+            <SidebarSearchItemGroup title="Recent" />
+            <SidebarSearchItemGroup title="Settings">
+              <SidebarSearchListSettingColorMode />
+            </SidebarSearchItemGroup>
+            <SidebarSearchItemGroup title="Layout Controls">
+              <SidebarSearchListToggleSidebar />
+            </SidebarSearchItemGroup>
+            <SidebarSearchItemGroup title="Navigation">
+              <SidebarSearchListGoToSettings />
+            </SidebarSearchItemGroup>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ModalCard>
+</template>
+
+<style scoped>
+.sidebar-search-modal-box{
+  @apply pointer-events-auto z-1000 relative;
+  @apply rounded-xl bg-#fbfbfc dark:bg-#1e1e1e;
+  @apply w-160 min-w-120 max-w-[calc(100vw-50px)];
+  outline: none;
+  will-change: transform,opacity;
+}
+.sidebar-search-modal-box-shadow{
+  box-shadow: 0px 10px 80px 0px rgba(0,0,0,.2);
+}
+.dark .sidebar-search-modal-box-shadow{
+  box-shadow: 0px 16px 80px 0px rgba(0,0,0,.8);
+}
+.sidebar-search-modal-box[data-state=entered],.sidebar-search-modal-box[data-state=entering] {
+  animation: open-modal 120ms ease-in-out;
+  animation-fill-mode: forwards
+}
+
+.sidebar-search-modal-box[data-state=exited],.sidebar-search-modal-box[data-state=exiting] {
+  animation: close-modal 120ms ease-in-out;
+  animation-fill-mode: forwards
+}
+
+@keyframes open-modal {
+  0% {
+    opacity: 0;
+    transform: translateY(-2%) scale(0.96)
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1)
+  }
+}
+
+@keyframes close-modal {
+  to {
+    opacity: 0;
+    transform: translateY(-2%) scale(0.96)
+  }
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(1)
+  }
+}
+</style>
diff --git a/components/sidebar/settings/modal/Modal.vue b/components/sidebar/settings/modal/Modal.vue
index 3e9fe7c..094ab53 100644
--- a/components/sidebar/settings/modal/Modal.vue
+++ b/components/sidebar/settings/modal/Modal.vue
@@ -6,7 +6,10 @@ const settingsStore = useSettingsStore()
 </script>
 
 <template>
-  <ModalCard :show="settingsStore.modalShow">
+  <ModalCard
+    mask
+    :show="settingsStore.modalShow"
+  >
     <div
       class="sidebar-settings-modal-box-shadow sidebar-settings-modal-box"
     >
diff --git a/composables/defineShortcuts.README.md b/composables/defineShortcuts.README.md
new file mode 100644
index 0000000..3ff305d
--- /dev/null
+++ b/composables/defineShortcuts.README.md
@@ -0,0 +1,124 @@
+# Shortcuts
+
+Learn how to display and define keyboard shortcuts in your app.
+
+## defineshortcuts
+
+```vue
+<script setup lang="ts">
+const isOpen = ref(false)
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      isOpen.value = !isOpen.value
+    }
+  }
+})
+</script>
+
+<template>
+  <ModalCard :show="isOpen" />
+</template>
+```
+
+Shortcuts keys are written as the literal keyboard key value. Combinations are made with `_` separator. Chained shortcuts are made with `-` separator.
+
+Modifiers are also available:
+
+- `meta`: acts as `Command` for MacOS and `Control` for others
+- `ctrl`: acts as `Control`
+- `shift`: acts as `Shift` and is only necessary for alphabetic keys
+
+Examples of keys:
+
+- `escape`: will trigger by hitting `Esc`
+- `meta_k`: will trigger by hitting `⌘` and `K` at the same time on MacOS, and `Ctrl` and `K` on Windows and Linux
+- `ctrl_k`: will trigger by hitting `Ctrl` and `K` at the same time on MacOS, Windows and Linux
+- `shift_e`: will trigger by hitting `Shift` and `E` at the same time on MacOS, Windows and Linux
+- `?`: will trigger by hitting `?` on some keyboard layouts, or for example Shift and `/`, which results in `?` on US Mac keyboards
+- `g-d`: will trigger by hitting `g` then `d` with a maximum delay of 800ms by default
+- `arrowleft`: will trigger by hitting `←` (also: `arrowright`, `arrowup`, `arrowdown`)
+
+> [!NOTE]
+> For a complete list of available shortcut keys, refer to the [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API docs. Note the `KeyboardEvent.key` has to be written in lowercase.
+
+### prop
+
+#### usingInput
+
+> usingInput?: string | boolean
+
+By default, `usingInput` is `false`, meaning it will only trigger when no input is focused. When set to `true`, the shortcut will also trigger when any input is focused.
+
+For a more advanced behavior, `usingInput` can be set to the name of an input, so it only triggers when focusing this specific input.
+
+```vue
+<script setup lang="ts">
+const query = ref('')
+
+defineShortcuts({
+  enter: {
+    usingInput: 'queryInput',
+    handler: () => {
+      // TODO
+    }
+  }
+})
+</script>
+
+<template>
+  <input v-model="query" name="queryInput">
+</template>
+```
+
+`enter` shortcut will only trigger when `queryInput` is focused.
+
+#### whenever
+
+> whenever?: WatchSource<boolean>[]
+
+`whenever` allows to add constraints on the shortcut triggering behavior. This array can contain `Ref<boolean>`, `ComputedRef<boolean>` or `() => boolean`.
+
+```ts
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => { isOpen.value = !isOpen.value }
+  },
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+```
+
+`escape` shortcut will only trigger when `isOpen` is `true`.
+
+#### Simple shortcut
+
+In case the shortcut does not need any config, it can be written as a function.
+
+```ts
+defineShortcuts({
+  '?': () => openHelpModal()
+})
+```
+
+## useShortcuts
+
+To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
+
+```vue
+<script setup lang="ts">
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <UKbd>{{ metaSymbol }}</UKbd>
+</template>
+```
+
+`metaSymbol` will display either `⌘` on ***MacOS*** or `Ctrl` on ***any other OS***
diff --git a/composables/defineShortcuts.ts b/composables/defineShortcuts.ts
new file mode 100644
index 0000000..880e45c
--- /dev/null
+++ b/composables/defineShortcuts.ts
@@ -0,0 +1,169 @@
+import { computed, ref } from 'vue'
+import type { ComputedRef, WatchSource } from 'vue'
+import { logicAnd, logicNot } from '@vueuse/math'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+import { useShortcuts } from './useShortcuts'
+
+export interface ShortcutConfig {
+  handler: Function
+  usingInput?: string | boolean
+  whenever?: WatchSource<boolean>[]
+}
+
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig | Function
+}
+
+export interface ShortcutsOptions {
+  chainDelay?: number
+}
+
+interface Shortcut {
+  handler: Function
+  condition: ComputedRef<boolean>
+  chained: boolean
+  // KeyboardEvent attributes
+  key: string
+  ctrlKey: boolean
+  metaKey: boolean
+  shiftKey: boolean
+  altKey: boolean
+  // code?: string
+  // keyCode?: number
+}
+
+const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
+const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/
+
+export function defineShortcuts(config: ShortcutsConfig, options: ShortcutsOptions = {}) {
+  const { macOS, usingInput } = useShortcuts()
+
+  let shortcuts: Shortcut[] = []
+
+  const chainedInputs = ref<string[]>([])
+  const clearChainedInput = () => {
+    chainedInputs.value.splice(0, chainedInputs.value.length)
+  }
+  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800)
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    // Input autocomplete triggers a keydown event
+    if (!e.key)
+      return
+
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key)
+
+    let chainedKey
+    chainedInputs.value.push(e.key)
+    // try matching a chained shortcut
+    if (chainedInputs.value.length >= 2) {
+      chainedKey = chainedInputs.value.slice(-2).join('-')
+
+      for (const shortcut of shortcuts.filter(s => s.chained)) {
+        if (shortcut.key !== chainedKey)
+          continue
+
+        if (shortcut.condition.value) {
+          e.preventDefault()
+          shortcut.handler()
+        }
+        clearChainedInput()
+        return
+      }
+    }
+
+    // try matching a standard shortcut
+    for (const shortcut of shortcuts.filter(s => !s.chained)) {
+      if (e.key.toLowerCase() !== shortcut.key)
+        continue
+      if (e.metaKey !== shortcut.metaKey)
+        continue
+      if (e.ctrlKey !== shortcut.ctrlKey)
+        continue
+      // shift modifier is only checked in combination with alphabetical keys
+      // (shift with non-alphabetical keys would change the key)
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey)
+        continue
+      // alt modifier changes the combined key anyways
+      // if (e.altKey !== shortcut.altKey) { continue }
+
+      if (shortcut.condition.value) {
+        e.preventDefault()
+        shortcut.handler()
+      }
+      clearChainedInput()
+      return
+    }
+
+    debouncedClearChainedInput()
+  }
+
+  // Map config to full detailled shortcuts
+  shortcuts = Object.entries(config).map(([key, shortcutConfig]) => {
+    if (!shortcutConfig)
+      return null
+
+    // Parse key and modifiers
+    let shortcut: Partial<Shortcut>
+
+    if (key.includes('-') && key !== '-' && !key.match(chainedShortcutRegex)?.length)
+      console.warn(`[Shortcut] Invalid key: "${key}"`)
+
+    if (key.includes('_') && key !== '_' && !key.match(combinedShortcutRegex)?.length)
+      console.warn(`[Shortcut] Invalid key: "${key}"`)
+
+    const chained = key.includes('-') && key !== '-'
+    if (chained) {
+      shortcut = {
+        key: key.toLowerCase(),
+        metaKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        altKey: false,
+      }
+    }
+    else {
+      const keySplit = key.toLowerCase().split('_').map(k => k)
+      shortcut = {
+        key: keySplit.filter(k => !['meta', 'ctrl', 'shift', 'alt'].includes(k)).join('_'),
+        metaKey: keySplit.includes('meta'),
+        ctrlKey: keySplit.includes('ctrl'),
+        shiftKey: keySplit.includes('shift'),
+        altKey: keySplit.includes('alt'),
+      }
+    }
+    shortcut.chained = chained
+
+    // Convert Meta to Ctrl for non-MacOS
+    if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+      shortcut.metaKey = false
+      shortcut.ctrlKey = true
+    }
+
+    // Retrieve handler function
+    if (typeof shortcutConfig === 'function')
+      shortcut.handler = shortcutConfig
+
+    else if (typeof shortcutConfig === 'object')
+      shortcut = { ...shortcut, handler: shortcutConfig.handler }
+
+    if (!shortcut.handler) {
+      console.warn('[Shortcut] Invalid value')
+      return null
+    }
+
+    // Create shortcut computed
+    const conditions: ComputedRef<boolean>[] = []
+    if (!(shortcutConfig as ShortcutConfig).usingInput)
+      conditions.push(logicNot(usingInput))
+
+    else if (typeof (shortcutConfig as ShortcutConfig).usingInput === 'string')
+      conditions.push(computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput))
+
+    shortcut.condition = logicAnd(...conditions, ...((shortcutConfig as ShortcutConfig).whenever || []))
+
+    return shortcut as Shortcut
+  }).filter(Boolean) as Shortcut[]
+
+  useEventListener('keydown', onKeyDown)
+}
diff --git a/composables/useShortcuts.ts b/composables/useShortcuts.ts
new file mode 100644
index 0000000..9777329
--- /dev/null
+++ b/composables/useShortcuts.ts
@@ -0,0 +1,32 @@
+import { createSharedComposable, useActiveElement } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+
+export function _useShortcuts() {
+  // eslint-disable-next-line node/prefer-global/process
+  const macOS = computed(() => process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
+
+  const metaSymbol = ref(' ')
+
+  const activeElement = useActiveElement()
+  const usingInput = computed(() => {
+    const usingInput = !!(activeElement.value?.tagName === 'INPUT' || activeElement.value?.tagName === 'TEXTAREA' || activeElement.value?.contentEditable === 'true')
+
+    if (usingInput)
+      return ((activeElement.value as any)?.name as string) || true
+
+    return false
+  })
+
+  onMounted(() => {
+    metaSymbol.value = macOS.value ? '⌘' : 'Ctrl'
+  })
+
+  return {
+    macOS,
+    metaSymbol,
+    activeElement,
+    usingInput,
+  }
+}
+
+export const useShortcuts = createSharedComposable(_useShortcuts)
diff --git a/package.json b/package.json
index ad73a75..4e6a7a3 100644
--- a/package.json
+++ b/package.json
@@ -27,11 +27,12 @@
     "@antfu/eslint-config": "^2.1.0",
     "@iconify-json/carbon": "^1.1.21",
     "@iconify-json/twemoji": "^1.1.12",
-    "@nuxt/devtools": "^1.0.3",
+    "@nuxt/devtools": "^1.0.4",
     "@nuxtjs/color-mode": "^3.3.2",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
     "@pinia/nuxt": "^0.5.1",
     "@unocss/nuxt": "^0.57.7",
+    "@vueuse/math": "^10.7.0",
     "@vueuse/nuxt": "^10.6.1",
     "bumpp": "^9.2.0",
     "eslint": "^8.54.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a413707..ee66be4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,8 +29,8 @@ devDependencies:
     specifier: ^1.1.12
     version: 1.1.12
   '@nuxt/devtools':
-    specifier: ^1.0.3
-    version: 1.0.3(nuxt@3.8.2)(vite@4.5.0)
+    specifier: ^1.0.4
+    version: 1.0.4(nuxt@3.8.2)(vite@4.5.0)
   '@nuxtjs/color-mode':
     specifier: ^3.3.2
     version: 3.3.2
@@ -43,6 +43,9 @@ devDependencies:
   '@unocss/nuxt':
     specifier: ^0.57.7
     version: 0.57.7(postcss@8.4.31)(vite@4.5.0)(webpack@5.89.0)
+  '@vueuse/math':
+    specifier: ^10.7.0
+    version: 10.7.0(vue@3.3.8)
   '@vueuse/nuxt':
     specifier: ^10.6.1
     version: 10.6.1(nuxt@3.8.2)(vue@3.3.8)
@@ -1164,9 +1167,25 @@ packages:
     transitivePeerDependencies:
       - rollup
       - supports-color
+    dev: true
 
-  /@nuxt/devtools-wizard@1.0.3:
-    resolution: {integrity: sha512-iningPOhBVMYov+7hDX5yr1tAVVA6AmJ7EgRkNfmHqPX2rerhD4eIN7Ao4KwkjGmQJ7qdM7k8w+NiL8OQOpdFQ==}
+  /@nuxt/devtools-kit@1.0.4(nuxt@3.8.2)(vite@4.5.0):
+    resolution: {integrity: sha512-AXNeI1dBilNryCmwuTd3lU7CrPBhzUJ5ntTFiXw9MmFwe5QT3NOxDFOv0gX7z1DFnmBEmx5mPKWysCwh7htEnQ==}
+    peerDependencies:
+      nuxt: ^3.8.1
+      vite: '*'
+    dependencies:
+      '@nuxt/kit': 3.8.2
+      '@nuxt/schema': 3.8.2
+      execa: 7.2.0
+      nuxt: 3.8.2(eslint@8.54.0)(typescript@5.3.2)(vite@4.5.0)
+      vite: 4.5.0
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  /@nuxt/devtools-wizard@1.0.4:
+    resolution: {integrity: sha512-3QHRfmkiITM67lAzSIOiI6N4Qzi5i705TCQ53pHQbce0+E00f5vck2hPauflN2X0/M3SZdkUV8UayaHc4egmdA==}
     hasBin: true
     dependencies:
       consola: 3.2.3
@@ -1180,16 +1199,16 @@ packages:
       rc9: 2.1.1
       semver: 7.5.4
 
-  /@nuxt/devtools@1.0.3(nuxt@3.8.2)(vite@4.5.0):
-    resolution: {integrity: sha512-2mXvQiS3KTMF0fO80Y9WLx95yubRoIp2wSCarmhhqInPe8/0K9VZ4TUiTGF20ti45h0ky3OAxiVSmLfViwDWjg==}
+  /@nuxt/devtools@1.0.4(nuxt@3.8.2)(vite@4.5.0):
+    resolution: {integrity: sha512-G1Oo9+TaOYzePIXpNX+Zzalw/rJyIZKZpZmXfzolPlOJSA1i0JKzZX6Z7iQHdqPwNJ8t+HnVaF4PghPIpo1kwg==}
     hasBin: true
     peerDependencies:
       nuxt: ^3.8.1
       vite: '*'
     dependencies:
       '@antfu/utils': 0.7.6
-      '@nuxt/devtools-kit': 1.0.3(nuxt@3.8.2)(vite@4.5.0)
-      '@nuxt/devtools-wizard': 1.0.3
+      '@nuxt/devtools-kit': 1.0.4(nuxt@3.8.2)(vite@4.5.0)
+      '@nuxt/devtools-wizard': 1.0.4
       '@nuxt/kit': 3.8.2
       birpc: 0.2.14
       consola: 3.2.3
@@ -2582,6 +2601,16 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/math@10.7.0(vue@3.3.8):
+    resolution: {integrity: sha512-JTHFTQ/Mr5nGe6YYC30evYna+981TR6HYFvjD83Aay2dLIEVZGRwM8+f6IxOGcoq9u95hFkhOcer/VsjIDvETg==}
+    dependencies:
+      '@vueuse/shared': 10.7.0(vue@3.3.8)
+      vue-demi: 0.14.6(vue@3.3.8)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@vueuse/metadata@10.6.1:
     resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==}
 
@@ -2611,6 +2640,15 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/shared@10.7.0(vue@3.3.8):
+    resolution: {integrity: sha512-kc00uV6CiaTdc3i1CDC4a3lBxzaBE9AgYNtFN87B5OOscqeWElj/uza8qVDmk7/U8JbqoONLbtqiLJ5LGRuqlw==}
+    dependencies:
+      vue-demi: 0.14.6(vue@3.3.8)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@webassemblyjs/ast@1.11.6:
     resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
     dependencies:
@@ -5694,7 +5732,7 @@ packages:
         optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.0.3(nuxt@3.8.2)(vite@4.5.0)
+      '@nuxt/devtools': 1.0.4(nuxt@3.8.2)(vite@4.5.0)
       '@nuxt/kit': 3.8.2
       '@nuxt/schema': 3.8.2
       '@nuxt/telemetry': 2.5.3
diff --git a/store/search.ts b/store/search.ts
new file mode 100644
index 0000000..999987f
--- /dev/null
+++ b/store/search.ts
@@ -0,0 +1,15 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useSearchStore = defineStore('search', () => {
+  const modalShow = ref<boolean>(false)
+  function toggleModal() {
+    modalShow.value = !modalShow.value
+  }
+  return {
+    modalShow,
+    toggleModal,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useSearchStore, import.meta.hot))
diff --git a/store/sidebar.ts b/store/sidebar.ts
index 19e6d8e..42aad62 100644
--- a/store/sidebar.ts
+++ b/store/sidebar.ts
@@ -3,8 +3,6 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 export const useSidebarStore = defineStore('sidebar', () => {
   const show = ref<boolean>(true)
 
-  const size = ref<number>(0)
-
   const panSize = ref<{
     minSize: number
     size: number
@@ -19,34 +17,10 @@ export const useSidebarStore = defineStore('sidebar', () => {
     show.value = !show.value
   }
 
-  function handleMoveSize() {
-    size.value = panSize.value.size
-  }
-
-  function handleClearSize() {
-    handleMoveSize()
-    panSize.value = {
-      minSize: 0,
-      size: 0,
-      maxSize: 0,
-    }
-  }
-
-  function handleCreateSize() {
-    panSize.value = {
-      minSize: 15,
-      size: size.value,
-      maxSize: 30,
-    }
-  }
   return {
-    size,
     show,
     panSize,
-    handleMoveSize,
     handleToggleSidebar,
-    handleClearSize,
-    handleCreateSize,
   }
 }, {
   persist: true,
diff --git a/ui/avatar/Index.vue b/ui/avatar/Index.vue
index 4438b8f..0ad0db7 100644
--- a/ui/avatar/Index.vue
+++ b/ui/avatar/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'Avatar',
+  name: 'LivraisonAvatar',
 })
 
 const props = defineProps<{
diff --git a/ui/icon/Button.vue b/ui/icon/Button.vue
index 4bf0077..af6299c 100644
--- a/ui/icon/Button.vue
+++ b/ui/icon/Button.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'IconButton',
+  name: 'LivraisonIconButton',
 })
 </script>
 
diff --git a/ui/icon/Label.vue b/ui/icon/Label.vue
index 5ca579d..ca644f3 100644
--- a/ui/icon/Label.vue
+++ b/ui/icon/Label.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-type IconLabelIconName = 'github' | 'twitter' | 'discord' | 'youtube' | 'twitch' | 'mastodon'
+defineOptions({
+  name: 'LivraisonIconLabel',
+})
 
 const props = defineProps<{
   iconName: IconLabelIconName
@@ -7,6 +9,8 @@ const props = defineProps<{
   label: string
 }>()
 
+type IconLabelIconName = 'github' | 'twitter' | 'discord' | 'youtube' | 'twitch' | 'mastodon'
+
 const iconLogos: {
   label: IconLabelIconName
   value: any
diff --git a/ui/kbd/Kbd.vue b/ui/kbd/Kbd.vue
new file mode 100644
index 0000000..8d80f5a
--- /dev/null
+++ b/ui/kbd/Kbd.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'LivraisonKbd',
+})
+const props = defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <div class="items-center bg-#eeeeee dark:bg-#303030 rounded text-#8e8d91 dark:text-#9c9ca0 flex h-5 justify-center w-6 px-1 py-0">
+    {{ props.label }}
+  </div>
+</template>
diff --git a/ui/modal/BodyWrapper.vue b/ui/modal/BodyWrapper.vue
index 293d229..551e5f9 100644
--- a/ui/modal/BodyWrapper.vue
+++ b/ui/modal/BodyWrapper.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'ModalBodyWrapper',
+  name: 'LivraisonModalBodyWrapper',
 })
 </script>
 
diff --git a/ui/modal/Card.vue b/ui/modal/Card.vue
index c8258f9..d9d3812 100644
--- a/ui/modal/Card.vue
+++ b/ui/modal/Card.vue
@@ -1,19 +1,33 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'Modal',
+  name: 'LivraisonModal',
 })
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   show: boolean
-}>()
+  mask?: boolean
+}>(), {
+  mask: false,
+})
+
+const emits = defineEmits(['clickMask'])
+
+const bodyWrapper = ref(null)
+
+const { isOutside } = useMouseInElement(bodyWrapper)
+
+function handleClickMask() {
+  if (isOutside.value)
+    emits('clickMask')
+}
 </script>
 
 <template>
   <Teleport to="body">
-    <div v-if="props.show">
-      <ModalMask />
+    <div v-if="props.show" @click="handleClickMask">
+      <ModalMask v-if="props.mask" />
       <ModalBodyWrapper>
-        <div class="m-auto dark:text-white text-black">
+        <div ref="bodyWrapper" class="m-auto dark:text-white text-black">
           <slot />
         </div>
       </ModalBodyWrapper>
diff --git a/ui/modal/Mask.vue b/ui/modal/Mask.vue
index ff4a381..29daf5b 100644
--- a/ui/modal/Mask.vue
+++ b/ui/modal/Mask.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'ModalMask',
+  name: 'LivraisonModalMask',
 })
 </script>
 
 <template>
-  <div class="pointer-events-auto fixed bg-black bg-op-75 inset-0 z-1000" />
+  <div
+    class="pointer-events-auto fixed bg-black bg-op-75 inset-0 z-1000"
+  />
   <div class="absolute h-0 w-0" />
 </template>
diff --git a/ui/radio/Group.vue b/ui/radio/Group.vue
index 9ec0928..63a9eb9 100644
--- a/ui/radio/Group.vue
+++ b/ui/radio/Group.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'RadioGroup',
+  name: 'LivraisonRadioGroup',
 })
 const props = defineProps<{
   modelValue: string
diff --git a/ui/radio/Item.vue b/ui/radio/Item.vue
index 86d84d7..af21a67 100644
--- a/ui/radio/Item.vue
+++ b/ui/radio/Item.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'LivraisonRadioItem',
+})
+
 const props = withDefaults(defineProps<{
   label: string
   value: string
diff --git a/ui/title/Label.vue b/ui/title/Label.vue
index 08484eb..93e0e63 100644
--- a/ui/title/Label.vue
+++ b/ui/title/Label.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'TitleLabel',
+  name: 'LivraisonTitleLabel',
 })
 const props = withDefaults(defineProps<{
   tag?: 'h1' | 'h2'