diff --git a/frontend/.biomelintrc-auto-import.json b/frontend/.biomelintrc-auto-import.json
index 848bccc..86140a5 100644
--- a/frontend/.biomelintrc-auto-import.json
+++ b/frontend/.biomelintrc-auto-import.json
@@ -5,6 +5,13 @@
       "ApiClient",
       "ApiKey",
       "ApiPlugin",
+      "Breadcrumb",
+      "BreadcrumbEllipsis",
+      "BreadcrumbItem",
+      "BreadcrumbLink",
+      "BreadcrumbList",
+      "BreadcrumbPage",
+      "BreadcrumbSeparator",
       "Button",
       "ButtonVariants",
       "ColumnInfo",
@@ -24,6 +31,21 @@
       "DropTargetType",
       "DropValidation",
       "DropZoneConfig",
+      "DropdownMenu",
+      "DropdownMenuCheckboxItem",
+      "DropdownMenuContent",
+      "DropdownMenuGroup",
+      "DropdownMenuItem",
+      "DropdownMenuLabel",
+      "DropdownMenuPortal",
+      "DropdownMenuRadioGroup",
+      "DropdownMenuRadioItem",
+      "DropdownMenuSeparator",
+      "DropdownMenuShortcut",
+      "DropdownMenuSub",
+      "DropdownMenuSubContent",
+      "DropdownMenuSubTrigger",
+      "DropdownMenuTrigger",
       "EffectScope",
       "ExtendedError",
       "ExtendedErrorCode",
@@ -35,6 +57,7 @@
       "FileUploadUploaderEvent",
       "FrontendErrorCode",
       "InjectionKey",
+      "Input",
       "ItemSchema",
       "Label",
       "MaybeRef",
@@ -51,10 +74,52 @@
       "Ref",
       "ReferenceSchemaMapping",
       "RequiredFieldHighlight",
+      "SIDEBAR_COOKIE_MAX_AGE",
+      "SIDEBAR_COOKIE_NAME",
+      "SIDEBAR_KEYBOARD_SHORTCUT",
+      "SIDEBAR_WIDTH",
+      "SIDEBAR_WIDTH_ICON",
+      "SIDEBAR_WIDTH_MOBILE",
       "SchemaCompletenessResult",
       "SchemaDragDropContext",
       "SchemaRequest",
+      "Separator",
       "ShallowRef",
+      "Sheet",
+      "SheetClose",
+      "SheetContent",
+      "SheetDescription",
+      "SheetFooter",
+      "SheetHeader",
+      "SheetTitle",
+      "SheetTrigger",
+      "Sidebar",
+      "SidebarContent",
+      "SidebarFooter",
+      "SidebarGroup",
+      "SidebarGroupAction",
+      "SidebarGroupContent",
+      "SidebarGroupLabel",
+      "SidebarHeader",
+      "SidebarInput",
+      "SidebarInset",
+      "SidebarMenu",
+      "SidebarMenuAction",
+      "SidebarMenuBadge",
+      "SidebarMenuButton",
+      "SidebarMenuButtonProps",
+      "SidebarMenuButtonVariants",
+      "SidebarMenuItem",
+      "SidebarMenuSkeleton",
+      "SidebarMenuSub",
+      "SidebarMenuSubButton",
+      "SidebarMenuSubItem",
+      "SidebarProps",
+      "SidebarProvider",
+      "SidebarRail",
+      "SidebarSeparator",
+      "SidebarTrigger",
+      "Skeleton",
       "Slot",
       "Slots",
       "StatementRank",
@@ -63,6 +128,10 @@
       "StatementSchemaMapping",
       "TermsSchemaMapping",
       "TieredMenu",
+      "Tooltip",
+      "TooltipContent",
+      "TooltipProvider",
+      "TooltipTrigger",
       "TransformationFunction",
       "TransformationParameter",
       "TransformationRule",
@@ -160,6 +229,7 @@
       "pausableWatch",
       "provide",
       "provideLocal",
+      "provideSidebarContext",
       "reactify",
       "reactifyObject",
       "reactive",
@@ -182,6 +252,7 @@
       "shallowReactive",
       "shallowReadonly",
       "shallowRef",
+      "sidebarMenuButtonVariants",
       "storeToRefs",
       "syncRef",
       "syncRefs",
@@ -351,6 +422,7 @@
       "useScrollLock",
       "useSessionStorage",
       "useShare",
+      "useSidebar",
       "useSlots",
       "useSorted",
       "useSpeechRecognition",
diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
index 5484359..043c0e4 100644
--- a/frontend/auto-imports.d.ts
+++ b/frontend/auto-imports.d.ts
@@ -8,10 +8,77 @@ export {}
 declare global {
   const ApiKey: typeof import('./src/core/plugins/api')['ApiKey']
   const ApiPlugin: typeof import('./src/core/plugins/api')['ApiPlugin']
+  const Breadcrumb: typeof import('./src/components/ui/breadcrumb/index')['Breadcrumb']
+  const BreadcrumbEllipsis: typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbEllipsis']
+  const BreadcrumbItem: typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbItem']
+  const BreadcrumbLink: typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbLink']
+  const BreadcrumbList: typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbList']
+  const BreadcrumbPage: typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbPage']
+  const BreadcrumbSeparator: typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbSeparator']
   const Button: typeof import('./src/components/ui/button/index')['Button']
+  const DropdownMenu: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenu']
+  const DropdownMenuCheckboxItem: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuCheckboxItem']
+  const DropdownMenuContent: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuContent']
+  const DropdownMenuGroup: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuGroup']
+  const DropdownMenuItem: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuItem']
+  const DropdownMenuLabel: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuLabel']
+  const DropdownMenuPortal: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuPortal']
+  const DropdownMenuRadioGroup: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuRadioGroup']
+  const DropdownMenuRadioItem: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuRadioItem']
+  const DropdownMenuSeparator: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSeparator']
+  const DropdownMenuShortcut: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuShortcut']
+  const DropdownMenuSub: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSub']
+  const DropdownMenuSubContent: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSubContent']
+  const DropdownMenuSubTrigger: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSubTrigger']
+  const DropdownMenuTrigger: typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuTrigger']
   const EffectScope: typeof import('vue')['EffectScope']
+  const Input: typeof import('./src/components/ui/input/index')['Input']
+  const Label: typeof import('./src/components/ui/label/index')['Label']
   const MenuItem: typeof import('primevue/menuitem')['MenuItem']
   const RefreshCcw: typeof import('lucide-vue-next')['RefreshCcw']
+  const SIDEBAR_COOKIE_MAX_AGE: typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_COOKIE_MAX_AGE']
+  const SIDEBAR_COOKIE_NAME: typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_COOKIE_NAME']
+  const SIDEBAR_KEYBOARD_SHORTCUT: typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_KEYBOARD_SHORTCUT']
+  const SIDEBAR_WIDTH: typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_WIDTH']
+  const SIDEBAR_WIDTH_ICON: typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_WIDTH_ICON']
+  const SIDEBAR_WIDTH_MOBILE: typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_WIDTH_MOBILE']
+  const Separator: typeof import('./src/components/ui/separator/index')['Separator']
+  const Sheet: typeof import('./src/components/ui/sheet/index')['Sheet']
+  const SheetClose: typeof import('./src/components/ui/sheet/index')['SheetClose']
+  const SheetContent: typeof import('./src/components/ui/sheet/index')['SheetContent']
+  const SheetDescription: typeof import('./src/components/ui/sheet/index')['SheetDescription']
+  const SheetFooter: typeof import('./src/components/ui/sheet/index')['SheetFooter']
+  const SheetHeader: typeof import('./src/components/ui/sheet/index')['SheetHeader']
+  const SheetTitle: typeof import('./src/components/ui/sheet/index')['SheetTitle']
+  const SheetTrigger: typeof import('./src/components/ui/sheet/index')['SheetTrigger']
+  const Sidebar: typeof import('./src/components/ui/sidebar/index')['Sidebar']
+  const SidebarContent: typeof import('./src/components/ui/sidebar/index')['SidebarContent']
+  const SidebarFooter: typeof import('./src/components/ui/sidebar/index')['SidebarFooter']
+  const SidebarGroup: typeof import('./src/components/ui/sidebar/index')['SidebarGroup']
+  const SidebarGroupAction: typeof import('./src/components/ui/sidebar/index')['SidebarGroupAction']
+  const SidebarGroupContent: typeof import('./src/components/ui/sidebar/index')['SidebarGroupContent']
+  const SidebarGroupLabel: typeof import('./src/components/ui/sidebar/index')['SidebarGroupLabel']
+  const SidebarHeader: typeof import('./src/components/ui/sidebar/index')['SidebarHeader']
+  const SidebarInput: typeof import('./src/components/ui/sidebar/index')['SidebarInput']
+  const SidebarInset: typeof import('./src/components/ui/sidebar/index')['SidebarInset']
+  const SidebarMenu: typeof import('./src/components/ui/sidebar/index')['SidebarMenu']
+  const SidebarMenuAction: typeof import('./src/components/ui/sidebar/index')['SidebarMenuAction']
+  const SidebarMenuBadge: typeof import('./src/components/ui/sidebar/index')['SidebarMenuBadge']
+  const SidebarMenuButton: typeof import('./src/components/ui/sidebar/index')['SidebarMenuButton']
+  const SidebarMenuItem: typeof import('./src/components/ui/sidebar/index')['SidebarMenuItem']
+  const SidebarMenuSkeleton: typeof import('./src/components/ui/sidebar/index')['SidebarMenuSkeleton']
+  const SidebarMenuSub: typeof import('./src/components/ui/sidebar/index')['SidebarMenuSub']
+  const SidebarMenuSubButton: typeof import('./src/components/ui/sidebar/index')['SidebarMenuSubButton']
+  const SidebarMenuSubItem: typeof import('./src/components/ui/sidebar/index')['SidebarMenuSubItem']
+  const SidebarProvider: typeof import('./src/components/ui/sidebar/index')['SidebarProvider']
+  const SidebarRail: typeof import('./src/components/ui/sidebar/index')['SidebarRail']
+  const SidebarSeparator: typeof import('./src/components/ui/sidebar/index')['SidebarSeparator']
+  const SidebarTrigger: typeof import('./src/components/ui/sidebar/index')['SidebarTrigger']
+  const Skeleton: typeof import('./src/components/ui/skeleton/index')['Skeleton']
+  const Tooltip: typeof import('./src/components/ui/tooltip/index')['Tooltip']
+  const TooltipContent: typeof import('./src/components/ui/tooltip/index')['TooltipContent']
+  const TooltipProvider: typeof import('./src/components/ui/tooltip/index')['TooltipProvider']
+  const TooltipTrigger: typeof import('./src/components/ui/tooltip/index')['TooltipTrigger']
   const ValidationMessages: typeof import('./src/shared/types/wikibase-schema')['ValidationMessages']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const api: typeof import('./src/core/plugins/api')['api']
@@ -93,6 +160,7 @@ declare global {
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const provideSidebarContext: typeof import('./src/components/ui/sidebar/utils')['provideSidebarContext']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -115,6 +183,7 @@ declare global {
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const sidebarMenuButtonVariants: typeof import('./src/components/ui/sidebar/index')['sidebarMenuButtonVariants']
   const storeToRefs: typeof import('pinia')['storeToRefs']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
@@ -284,6 +353,7 @@ declare global {
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
+  const useSidebar: typeof import('./src/components/ui/sidebar/utils')['useSidebar']
   const useSlots: typeof import('vue')['useSlots']
   const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
@@ -358,25 +428,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    Slot,
-    Slots,
-    ComponentPublicInstance,
-    ComputedRef,
-    DirectiveBinding,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    ShallowRef,
-    MaybeRef,
-    MaybeRefOrGetter,
-    VNode,
-    WritableComputedRef,
-  } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
   export type { FileUploadUploaderEvent } from 'primevue/fileupload'
@@ -394,92 +446,43 @@ declare global {
   export type { UUID } from 'crypto'
   import('crypto')
   // @ts-ignore
-  export type {
-    TransformationRule,
-    ColumnMapping,
-    PropertyReference,
-    WikibaseDataType,
-    ValueMapping,
-    PropertyValueMap,
-    ReferenceSchemaMapping,
-    StatementRank,
-    StatementSchemaMapping,
-    Label,
-    Alias,
-    TermsSchemaMapping,
-    ItemSchema,
-    WikibaseSchemaResponse,
-  } from '@backend/api/project/project.wikibase'
+  export type { TransformationRule, ColumnMapping, PropertyReference, WikibaseDataType, ValueMapping, PropertyValueMap, ReferenceSchemaMapping, StatementRank, StatementSchemaMapping, Alias, TermsSchemaMapping, ItemSchema, WikibaseSchemaResponse } from '@backend/api/project/project.wikibase'
   import('@backend/api/project/project.wikibase')
   // @ts-ignore
   export type { ButtonVariants } from './src/components/ui/button/index'
   import('./src/components/ui/button/index')
   // @ts-ignore
+  export type { SidebarMenuButtonProps } from './src/components/ui/sidebar/SidebarMenuButtonChild.vue'
+  import('./src/components/ui/sidebar/SidebarMenuButtonChild.vue')
+  // @ts-ignore
+  export type { SidebarProps, SidebarMenuButtonVariants } from './src/components/ui/sidebar/index'
+  import('./src/components/ui/sidebar/index')
+  // @ts-ignore
   export type { ProjectColumn } from './src/features/data-processing/composables/useColumnGeneration'
   import('./src/features/data-processing/composables/useColumnGeneration')
   // @ts-ignore
-  export type {
-    PropertyValueEditorState,
-    PropertyValueEditorActions,
-  } from './src/features/wikibase-schema/composables/usePropertyValueEditor'
+  export type { PropertyValueEditorState, PropertyValueEditorActions } from './src/features/wikibase-schema/composables/usePropertyValueEditor'
   import('./src/features/wikibase-schema/composables/usePropertyValueEditor')
   // @ts-ignore
   export type { SchemaRequest } from './src/features/wikibase-schema/composables/useSchemaApi'
   import('./src/features/wikibase-schema/composables/useSchemaApi')
   // @ts-ignore
-  export type {
-    SchemaCompletenessResult,
-    RequiredFieldHighlight,
-  } from './src/features/wikibase-schema/composables/useSchemaCompletenessValidation'
+  export type { SchemaCompletenessResult, RequiredFieldHighlight } from './src/features/wikibase-schema/composables/useSchemaCompletenessValidation'
   import('./src/features/wikibase-schema/composables/useSchemaCompletenessValidation')
   // @ts-ignore
   export type { ValidationRuleConfig } from './src/features/wikibase-schema/stores/validation.store'
   import('./src/features/wikibase-schema/stores/validation.store')
   // @ts-ignore
-  export type {
-    FrontendErrorCode,
-    ExtendedErrorCode,
-    ExtendedError,
-  } from './src/shared/types/client-errors'
+  export type { FrontendErrorCode, ExtendedErrorCode, ExtendedError } from './src/shared/types/client-errors'
   import('./src/shared/types/client-errors')
   // @ts-ignore
-  export type {
-    SchemaDragDropContext,
-    DropZoneConfig,
-    DropFeedback,
-    DragDropContext,
-    DropTarget,
-    DropTargetType,
-    DragState,
-    DropValidation,
-    DragEventData,
-    DropEventData,
-    DragVisualState,
-    DragDropConfig,
-  } from './src/shared/types/drag-drop'
+  export type { SchemaDragDropContext, DropZoneConfig, DropFeedback, DragDropContext, DropTarget, DropTargetType, DragState, DropValidation, DragEventData, DropEventData, DragVisualState, DragDropConfig } from './src/shared/types/drag-drop'
   import('./src/shared/types/drag-drop')
   // @ts-ignore
-  export type {
-    ProjectFile,
-    FileSelectEvent,
-    FileRemoveEvent,
-    ApiClient,
-  } from './src/shared/types/index'
+  export type { ProjectFile, FileSelectEvent, FileRemoveEvent, ApiClient } from './src/shared/types/index'
   import('./src/shared/types/index')
   // @ts-ignore
-  export type {
-    ValidationErrorType,
-    ValidationErrorCode,
-    ValidationError,
-    ValidationResult,
-    ValidationContext,
-    WikibaseSchemaMapping,
-    TransformationFunction,
-    TransformationParameter,
-    StatementSchema,
-    StatementSchema1,
-    ColumnInfo,
-  } from './src/shared/types/wikibase-schema'
+  export type { ValidationErrorType, ValidationErrorCode, ValidationError, ValidationResult, ValidationContext, WikibaseSchemaMapping, TransformationFunction, TransformationParameter, StatementSchema, StatementSchema1, ColumnInfo } from './src/shared/types/wikibase-schema'
   import('./src/shared/types/wikibase-schema')
 }
 
@@ -490,18 +493,81 @@ declare module 'vue' {
   interface ComponentCustomProperties {
     readonly ApiKey: UnwrapRef<typeof import('./src/core/plugins/api')['ApiKey']>
     readonly ApiPlugin: UnwrapRef<typeof import('./src/core/plugins/api')['ApiPlugin']>
+    readonly Breadcrumb: UnwrapRef<typeof import('./src/components/ui/breadcrumb/index')['Breadcrumb']>
+    readonly BreadcrumbEllipsis: UnwrapRef<typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbEllipsis']>
+    readonly BreadcrumbItem: UnwrapRef<typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbItem']>
+    readonly BreadcrumbLink: UnwrapRef<typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbLink']>
+    readonly BreadcrumbList: UnwrapRef<typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbList']>
+    readonly BreadcrumbPage: UnwrapRef<typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbPage']>
+    readonly BreadcrumbSeparator: UnwrapRef<typeof import('./src/components/ui/breadcrumb/index')['BreadcrumbSeparator']>
     readonly Button: UnwrapRef<typeof import('./src/components/ui/button/index')['Button']>
+    readonly DropdownMenu: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenu']>
+    readonly DropdownMenuCheckboxItem: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuCheckboxItem']>
+    readonly DropdownMenuContent: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuContent']>
+    readonly DropdownMenuGroup: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuGroup']>
+    readonly DropdownMenuItem: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuItem']>
+    readonly DropdownMenuLabel: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuLabel']>
+    readonly DropdownMenuPortal: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuPortal']>
+    readonly DropdownMenuRadioGroup: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuRadioGroup']>
+    readonly DropdownMenuRadioItem: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuRadioItem']>
+    readonly DropdownMenuSeparator: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSeparator']>
+    readonly DropdownMenuShortcut: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuShortcut']>
+    readonly DropdownMenuSub: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSub']>
+    readonly DropdownMenuSubContent: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSubContent']>
+    readonly DropdownMenuSubTrigger: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuSubTrigger']>
+    readonly DropdownMenuTrigger: UnwrapRef<typeof import('./src/components/ui/dropdown-menu/index')['DropdownMenuTrigger']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly ValidationMessages: UnwrapRef<
-      typeof import('./src/shared/types/wikibase-schema')['ValidationMessages']
-    >
+    readonly Input: UnwrapRef<typeof import('./src/components/ui/input/index')['Input']>
+    readonly Label: UnwrapRef<typeof import('./src/components/ui/label/index')['Label']>
+    readonly SIDEBAR_COOKIE_MAX_AGE: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_COOKIE_MAX_AGE']>
+    readonly SIDEBAR_COOKIE_NAME: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_COOKIE_NAME']>
+    readonly SIDEBAR_KEYBOARD_SHORTCUT: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_KEYBOARD_SHORTCUT']>
+    readonly SIDEBAR_WIDTH: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_WIDTH']>
+    readonly SIDEBAR_WIDTH_ICON: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_WIDTH_ICON']>
+    readonly SIDEBAR_WIDTH_MOBILE: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['SIDEBAR_WIDTH_MOBILE']>
+    readonly Separator: UnwrapRef<typeof import('./src/components/ui/separator/index')['Separator']>
+    readonly Sheet: UnwrapRef<typeof import('./src/components/ui/sheet/index')['Sheet']>
+    readonly SheetClose: UnwrapRef<typeof import('./src/components/ui/sheet/index')['SheetClose']>
+    readonly SheetContent: UnwrapRef<typeof import('./src/components/ui/sheet/index')['SheetContent']>
+    readonly SheetDescription: UnwrapRef<typeof import('./src/components/ui/sheet/index')['SheetDescription']>
+    readonly SheetFooter: UnwrapRef<typeof import('./src/components/ui/sheet/index')['SheetFooter']>
+    readonly SheetHeader: UnwrapRef<typeof import('./src/components/ui/sheet/index')['SheetHeader']>
+    readonly SheetTitle: UnwrapRef<typeof import('./src/components/ui/sheet/index')['SheetTitle']>
+    readonly SheetTrigger: UnwrapRef<typeof import('./src/components/ui/sheet/index')['SheetTrigger']>
+    readonly Sidebar: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['Sidebar']>
+    readonly SidebarContent: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarContent']>
+    readonly SidebarFooter: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarFooter']>
+    readonly SidebarGroup: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarGroup']>
+    readonly SidebarGroupAction: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarGroupAction']>
+    readonly SidebarGroupContent: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarGroupContent']>
+    readonly SidebarGroupLabel: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarGroupLabel']>
+    readonly SidebarHeader: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarHeader']>
+    readonly SidebarInput: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarInput']>
+    readonly SidebarInset: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarInset']>
+    readonly SidebarMenu: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenu']>
+    readonly SidebarMenuAction: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuAction']>
+    readonly SidebarMenuBadge: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuBadge']>
+    readonly SidebarMenuButton: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuButton']>
+    readonly SidebarMenuItem: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuItem']>
+    readonly SidebarMenuSkeleton: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuSkeleton']>
+    readonly SidebarMenuSub: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuSub']>
+    readonly SidebarMenuSubButton: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuSubButton']>
+    readonly SidebarMenuSubItem: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarMenuSubItem']>
+    readonly SidebarProvider: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarProvider']>
+    readonly SidebarRail: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarRail']>
+    readonly SidebarSeparator: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarSeparator']>
+    readonly SidebarTrigger: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['SidebarTrigger']>
+    readonly Skeleton: UnwrapRef<typeof import('./src/components/ui/skeleton/index')['Skeleton']>
+    readonly Tooltip: UnwrapRef<typeof import('./src/components/ui/tooltip/index')['Tooltip']>
+    readonly TooltipContent: UnwrapRef<typeof import('./src/components/ui/tooltip/index')['TooltipContent']>
+    readonly TooltipProvider: UnwrapRef<typeof import('./src/components/ui/tooltip/index')['TooltipProvider']>
+    readonly TooltipTrigger: UnwrapRef<typeof import('./src/components/ui/tooltip/index')['TooltipTrigger']>
+    readonly ValidationMessages: UnwrapRef<typeof import('./src/shared/types/wikibase-schema')['ValidationMessages']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly api: UnwrapRef<typeof import('./src/core/plugins/api')['api']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
-    readonly buttonVariants: UnwrapRef<
-      typeof import('./src/components/ui/button/index')['buttonVariants']
-    >
+    readonly buttonVariants: UnwrapRef<typeof import('./src/components/ui/button/index')['buttonVariants']>
     readonly cn: UnwrapRef<typeof import('./src/lib/utils')['cn']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
@@ -512,23 +578,15 @@ declare module 'vue' {
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
-    readonly createFrontendError: UnwrapRef<
-      typeof import('./src/shared/types/client-errors')['createFrontendError']
-    >
+    readonly createFrontendError: UnwrapRef<typeof import('./src/shared/types/client-errors')['createFrontendError']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
     readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
-    readonly createReusableTemplate: UnwrapRef<
-      typeof import('@vueuse/core')['createReusableTemplate']
-    >
-    readonly createSharedComposable: UnwrapRef<
-      typeof import('@vueuse/core')['createSharedComposable']
-    >
-    readonly createTemplatePromise: UnwrapRef<
-      typeof import('@vueuse/core')['createTemplatePromise']
-    >
+    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
@@ -585,6 +643,7 @@ declare module 'vue' {
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly provideSidebarContext: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['provideSidebarContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -607,6 +666,7 @@ declare module 'vue' {
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly sidebarMenuButtonVariants: UnwrapRef<typeof import('./src/components/ui/sidebar/index')['sidebarMenuButtonVariants']>
     readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
     readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
@@ -656,45 +716,31 @@ declare module 'vue' {
     readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
-    readonly useColumnDataTypeIndicators: UnwrapRef<
-      typeof import('./src/features/data-processing/composables/useColumnDataTypeIndicators')['useColumnDataTypeIndicators']
-    >
-    readonly useColumnGeneration: UnwrapRef<
-      typeof import('./src/features/data-processing/composables/useColumnGeneration')['useColumnGeneration']
-    >
+    readonly useColumnDataTypeIndicators: UnwrapRef<typeof import('./src/features/data-processing/composables/useColumnDataTypeIndicators')['useColumnDataTypeIndicators']>
+    readonly useColumnGeneration: UnwrapRef<typeof import('./src/features/data-processing/composables/useColumnGeneration')['useColumnGeneration']>
     readonly useConfirm: UnwrapRef<typeof import('primevue/useconfirm')['useConfirm']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
-    readonly useCreateProjectStore: UnwrapRef<
-      typeof import('./src/features/project-management/stores/create-project.store')['useCreateProjectStore']
-    >
+    readonly useCreateProjectStore: UnwrapRef<typeof import('./src/features/project-management/stores/create-project.store')['useCreateProjectStore']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
     readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
     readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
     readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
-    readonly useDataTypeCompatibility: UnwrapRef<
-      typeof import('./src/features/data-processing/composables/useDataTypeCompatibility')['useDataTypeCompatibility']
-    >
+    readonly useDataTypeCompatibility: UnwrapRef<typeof import('./src/features/data-processing/composables/useDataTypeCompatibility')['useDataTypeCompatibility']>
     readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
     readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
     readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
-    readonly useDebouncedRefHistory: UnwrapRef<
-      typeof import('@vueuse/core')['useDebouncedRefHistory']
-    >
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
     readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
     readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
     readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
     readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
     readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
-    readonly useDocumentVisibility: UnwrapRef<
-      typeof import('@vueuse/core')['useDocumentVisibility']
-    >
-    readonly useDragDropStore: UnwrapRef<
-      typeof import('./src/features/data-processing/stores/drag-drop.store')['useDragDropStore']
-    >
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDragDropStore: UnwrapRef<typeof import('./src/features/data-processing/stores/drag-drop.store')['useDragDropStore']>
     readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
     readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
     readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
@@ -702,9 +748,7 @@ declare module 'vue' {
     readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
     readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
     readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
-    readonly useErrorHandling: UnwrapRef<
-      typeof import('./src/shared/composables/useErrorHandling')['useErrorHandling']
-    >
+    readonly useErrorHandling: UnwrapRef<typeof import('./src/shared/composables/useErrorHandling')['useErrorHandling']>
     readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
     readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
     readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
@@ -724,9 +768,7 @@ declare module 'vue' {
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
-    readonly useIntersectionObserver: UnwrapRef<
-      typeof import('@vueuse/core')['useIntersectionObserver']
-    >
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
     readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
@@ -754,77 +796,39 @@ declare module 'vue' {
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
-    readonly usePerformanceObserver: UnwrapRef<
-      typeof import('@vueuse/core')['usePerformanceObserver']
-    >
+    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
-    readonly usePreferredColorScheme: UnwrapRef<
-      typeof import('@vueuse/core')['usePreferredColorScheme']
-    >
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
     readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
-    readonly usePreferredLanguages: UnwrapRef<
-      typeof import('@vueuse/core')['usePreferredLanguages']
-    >
-    readonly usePreferredReducedMotion: UnwrapRef<
-      typeof import('@vueuse/core')['usePreferredReducedMotion']
-    >
-    readonly usePreferredReducedTransparency: UnwrapRef<
-      typeof import('@vueuse/core')['usePreferredReducedTransparency']
-    >
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
-    readonly useProjectCreationComposable: UnwrapRef<
-      typeof import('./src/features/project-management/composables/useProjectCreationComposable')['useProjectCreationComposable']
-    >
-    readonly useProjectListComposable: UnwrapRef<
-      typeof import('./src/features/project-management/composables/useProjectListComposable')['useProjectListComposable']
-    >
-    readonly useProjectListStore: UnwrapRef<
-      typeof import('./src/features/project-management/stores/project-list.store')['useProjectListStore']
-    >
-    readonly useProjectStore: UnwrapRef<
-      typeof import('./src/features/project-management/stores/project.store')['useProjectStore']
-    >
-    readonly usePropertySelection: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/usePropertySelection')['usePropertySelection']
-    >
-    readonly usePropertyValueDisplay: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/usePropertyValueDisplay')['usePropertyValueDisplay']
-    >
-    readonly usePropertyValueEditor: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/usePropertyValueEditor')['usePropertyValueEditor']
-    >
+    readonly useProjectCreationComposable: UnwrapRef<typeof import('./src/features/project-management/composables/useProjectCreationComposable')['useProjectCreationComposable']>
+    readonly useProjectListComposable: UnwrapRef<typeof import('./src/features/project-management/composables/useProjectListComposable')['useProjectListComposable']>
+    readonly useProjectListStore: UnwrapRef<typeof import('./src/features/project-management/stores/project-list.store')['useProjectListStore']>
+    readonly useProjectStore: UnwrapRef<typeof import('./src/features/project-management/stores/project.store')['useProjectStore']>
+    readonly usePropertySelection: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/usePropertySelection')['usePropertySelection']>
+    readonly usePropertyValueDisplay: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/usePropertyValueDisplay')['usePropertyValueDisplay']>
+    readonly usePropertyValueEditor: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/usePropertyValueEditor')['usePropertyValueEditor']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
-    readonly useReferenceValueMapping: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useReferenceValueMapping')['useReferenceValueMapping']
-    >
+    readonly useReferenceValueMapping: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useReferenceValueMapping')['useReferenceValueMapping']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouteParams: UnwrapRef<typeof import('@vueuse/router')['useRouteParams']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
-    readonly useSchemaApi: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useSchemaApi')['useSchemaApi']
-    >
-    readonly useSchemaBuilder: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useSchemaBuilder')['useSchemaBuilder']
-    >
-    readonly useSchemaCompletenessValidation: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useSchemaCompletenessValidation')['useSchemaCompletenessValidation']
-    >
-    readonly useSchemaSelection: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useSchemaSelection')['useSchemaSelection']
-    >
-    readonly useSchemaStore: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/stores/schema.store')['useSchemaStore']
-    >
-    readonly useSchemaValidationUI: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useSchemaValidationUI')['useSchemaValidationUI']
-    >
+    readonly useSchemaApi: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useSchemaApi')['useSchemaApi']>
+    readonly useSchemaBuilder: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useSchemaBuilder')['useSchemaBuilder']>
+    readonly useSchemaCompletenessValidation: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useSchemaCompletenessValidation')['useSchemaCompletenessValidation']>
+    readonly useSchemaSelection: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useSchemaSelection')['useSchemaSelection']>
+    readonly useSchemaStore: UnwrapRef<typeof import('./src/features/wikibase-schema/stores/schema.store')['useSchemaStore']>
+    readonly useSchemaValidationUI: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useSchemaValidationUI')['useSchemaValidationUI']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -832,22 +836,15 @@ declare module 'vue' {
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSidebar: UnwrapRef<typeof import('./src/components/ui/sidebar/utils')['useSidebar']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
-    readonly useStatementConfig: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useStatementConfig')['useStatementConfig']
-    >
-    readonly useStatementDataTypeValidation: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useStatementDataTypeValidation')['useStatementDataTypeValidation']
-    >
-    readonly useStatementEditor: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useStatementEditor')['useStatementEditor']
-    >
-    readonly useStatementValidationDisplay: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useStatementValidationDisplay')['useStatementValidationDisplay']
-    >
+    readonly useStatementConfig: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useStatementConfig')['useStatementConfig']>
+    readonly useStatementDataTypeValidation: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useStatementDataTypeValidation')['useStatementDataTypeValidation']>
+    readonly useStatementEditor: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useStatementEditor')['useStatementEditor']>
+    readonly useStatementValidationDisplay: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useStatementValidationDisplay')['useStatementValidationDisplay']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
@@ -856,17 +853,13 @@ declare module 'vue' {
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
-    readonly useTermsEditor: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useTermsEditor')['useTermsEditor']
-    >
+    readonly useTermsEditor: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useTermsEditor')['useTermsEditor']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
     readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
     readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
     readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
-    readonly useThrottledRefHistory: UnwrapRef<
-      typeof import('@vueuse/core')['useThrottledRefHistory']
-    >
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
     readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
     readonly useTimeAgoIntl: UnwrapRef<typeof import('@vueuse/core')['useTimeAgoIntl']>
     readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
@@ -883,21 +876,11 @@ declare module 'vue' {
     readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
     readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
     readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
-    readonly useValidation: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useValidation')['useValidation']
-    >
-    readonly useValidationCore: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useValidationCore')['useValidationCore']
-    >
-    readonly useValidationErrors: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useValidationErrors')['useValidationErrors']
-    >
-    readonly useValidationStore: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/stores/validation.store')['useValidationStore']
-    >
-    readonly useValueMapping: UnwrapRef<
-      typeof import('./src/features/wikibase-schema/composables/useValueMapping')['useValueMapping']
-    >
+    readonly useValidation: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useValidation')['useValidation']>
+    readonly useValidationCore: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useValidationCore')['useValidationCore']>
+    readonly useValidationErrors: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useValidationErrors')['useValidationErrors']>
+    readonly useValidationStore: UnwrapRef<typeof import('./src/features/wikibase-schema/stores/validation.store')['useValidationStore']>
+    readonly useValueMapping: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useValueMapping')['useValueMapping']>
     readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
     readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
     readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
@@ -925,4 +908,4 @@ declare module 'vue' {
     readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
     readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index a572a57..4e5d380 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -10,6 +10,13 @@ declare module 'vue' {
   export interface GlobalComponents {
     AutoComplete: typeof import('primevue/autocomplete')['default']
     BasePropertyValueEditor: typeof import('./src/features/wikibase-schema/components/BasePropertyValueEditor.vue')['default']
+    Breadcrumb: typeof import('./src/components/ui/breadcrumb/Breadcrumb.vue')['default']
+    BreadcrumbEllipsis: typeof import('./src/components/ui/breadcrumb/BreadcrumbEllipsis.vue')['default']
+    BreadcrumbItem: typeof import('./src/components/ui/breadcrumb/BreadcrumbItem.vue')['default']
+    BreadcrumbLink: typeof import('./src/components/ui/breadcrumb/BreadcrumbLink.vue')['default']
+    BreadcrumbList: typeof import('./src/components/ui/breadcrumb/BreadcrumbList.vue')['default']
+    BreadcrumbPage: typeof import('./src/components/ui/breadcrumb/BreadcrumbPage.vue')['default']
+    BreadcrumbSeparator: typeof import('./src/components/ui/breadcrumb/BreadcrumbSeparator.vue')['default']
     Button: typeof import('./src/components/ui/button/Button.vue')['default']
     Card: typeof import('primevue/card')['default']
     Checkbox: typeof import('primevue/checkbox')['default']
@@ -25,9 +32,27 @@ declare module 'vue' {
     DataTabPanel: typeof import('./src/features/data-processing/components/DataTabPanel.vue')['default']
     DefaultLayout: typeof import('./src/core/layouts/DefaultLayout.vue')['default']
     Dialog: typeof import('primevue/dialog')['default']
+    Divider: typeof import('primevue/divider')['default']
+    DropdownMenu: typeof import('./src/components/ui/dropdown-menu/DropdownMenu.vue')['default']
+    DropdownMenuCheckboxItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue')['default']
+    DropdownMenuContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuContent.vue')['default']
+    DropdownMenuGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuGroup.vue')['default']
+    DropdownMenuItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuItem.vue')['default']
+    DropdownMenuLabel: typeof import('./src/components/ui/dropdown-menu/DropdownMenuLabel.vue')['default']
+    DropdownMenuRadioGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue')['default']
+    DropdownMenuRadioItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue')['default']
+    DropdownMenuSeparator: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSeparator.vue')['default']
+    DropdownMenuShortcut: typeof import('./src/components/ui/dropdown-menu/DropdownMenuShortcut.vue')['default']
+    DropdownMenuSub: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSub.vue')['default']
+    DropdownMenuSubContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubContent.vue')['default']
+    DropdownMenuSubTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue')['default']
+    DropdownMenuTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuTrigger.vue')['default']
     DropZone: typeof import('./src/features/wikibase-schema/components/DropZone.vue')['default']
+    FileUpload: typeof import('primevue/fileupload')['default']
     Header: typeof import('./src/shared/components/Header.vue')['default']
+    Input: typeof import('./src/components/ui/input/Input.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
+    Label: typeof import('./src/components/ui/label/Label.vue')['default']
     MainContent: typeof import('./src/shared/components/MainContent.vue')['default']
     OpenProject: typeof import('./src/features/project-management/pages/OpenProject.vue')['default']
     Paginator: typeof import('primevue/paginator')['default']
@@ -46,7 +71,41 @@ declare module 'vue' {
     SchemaSelector: typeof import('./src/features/wikibase-schema/components/SchemaSelector.vue')['default']
     SchemaTabPanel: typeof import('./src/features/wikibase-schema/components/SchemaTabPanel.vue')['default']
     Select: typeof import('primevue/select')['default']
-    Sidebar: typeof import('./src/shared/components/Sidebar.vue')['default']
+    Separator: typeof import('./src/components/ui/separator/Separator.vue')['default']
+    Sheet: typeof import('./src/components/ui/sheet/Sheet.vue')['default']
+    SheetClose: typeof import('./src/components/ui/sheet/SheetClose.vue')['default']
+    SheetContent: typeof import('./src/components/ui/sheet/SheetContent.vue')['default']
+    SheetDescription: typeof import('./src/components/ui/sheet/SheetDescription.vue')['default']
+    SheetFooter: typeof import('./src/components/ui/sheet/SheetFooter.vue')['default']
+    SheetHeader: typeof import('./src/components/ui/sheet/SheetHeader.vue')['default']
+    SheetOverlay: typeof import('./src/components/ui/sheet/SheetOverlay.vue')['default']
+    SheetTitle: typeof import('./src/components/ui/sheet/SheetTitle.vue')['default']
+    SheetTrigger: typeof import('./src/components/ui/sheet/SheetTrigger.vue')['default']
+    Sidebar: typeof import('./src/components/ui/sidebar/Sidebar.vue')['default']
+    SidebarContent: typeof import('./src/components/ui/sidebar/SidebarContent.vue')['default']
+    SidebarFooter: typeof import('./src/components/ui/sidebar/SidebarFooter.vue')['default']
+    SidebarGroup: typeof import('./src/components/ui/sidebar/SidebarGroup.vue')['default']
+    SidebarGroupAction: typeof import('./src/components/ui/sidebar/SidebarGroupAction.vue')['default']
+    SidebarGroupContent: typeof import('./src/components/ui/sidebar/SidebarGroupContent.vue')['default']
+    SidebarGroupLabel: typeof import('./src/components/ui/sidebar/SidebarGroupLabel.vue')['default']
+    SidebarHeader: typeof import('./src/components/ui/sidebar/SidebarHeader.vue')['default']
+    SidebarInput: typeof import('./src/components/ui/sidebar/SidebarInput.vue')['default']
+    SidebarInset: typeof import('./src/components/ui/sidebar/SidebarInset.vue')['default']
+    SidebarMenu: typeof import('./src/components/ui/sidebar/SidebarMenu.vue')['default']
+    SidebarMenuAction: typeof import('./src/components/ui/sidebar/SidebarMenuAction.vue')['default']
+    SidebarMenuBadge: typeof import('./src/components/ui/sidebar/SidebarMenuBadge.vue')['default']
+    SidebarMenuButton: typeof import('./src/components/ui/sidebar/SidebarMenuButton.vue')['default']
+    SidebarMenuButtonChild: typeof import('./src/components/ui/sidebar/SidebarMenuButtonChild.vue')['default']
+    SidebarMenuItem: typeof import('./src/components/ui/sidebar/SidebarMenuItem.vue')['default']
+    SidebarMenuSkeleton: typeof import('./src/components/ui/sidebar/SidebarMenuSkeleton.vue')['default']
+    SidebarMenuSub: typeof import('./src/components/ui/sidebar/SidebarMenuSub.vue')['default']
+    SidebarMenuSubButton: typeof import('./src/components/ui/sidebar/SidebarMenuSubButton.vue')['default']
+    SidebarMenuSubItem: typeof import('./src/components/ui/sidebar/SidebarMenuSubItem.vue')['default']
+    SidebarProvider: typeof import('./src/components/ui/sidebar/SidebarProvider.vue')['default']
+    SidebarRail: typeof import('./src/components/ui/sidebar/SidebarRail.vue')['default']
+    SidebarSeparator: typeof import('./src/components/ui/sidebar/SidebarSeparator.vue')['default']
+    SidebarTrigger: typeof import('./src/components/ui/sidebar/SidebarTrigger.vue')['default']
+    Skeleton: typeof import('./src/components/ui/skeleton/Skeleton.vue')['default']
     StatementEditor: typeof import('./src/features/wikibase-schema/components/StatementEditor.vue')['default']
     StatementManager: typeof import('./src/features/wikibase-schema/components/StatementManager.vue')['default']
     Tab: typeof import('primevue/tab')['default']
@@ -60,6 +119,10 @@ declare module 'vue' {
     TieredMenu: typeof import('primevue/tieredmenu')['default']
     Toast: typeof import('primevue/toast')['default']
     ToggleSwitch: typeof import('primevue/toggleswitch')['default']
+    Tooltip: typeof import('./src/components/ui/tooltip/Tooltip.vue')['default']
+    TooltipContent: typeof import('./src/components/ui/tooltip/TooltipContent.vue')['default']
+    TooltipProvider: typeof import('./src/components/ui/tooltip/TooltipProvider.vue')['default']
+    TooltipTrigger: typeof import('./src/components/ui/tooltip/TooltipTrigger.vue')['default']
     ValidationDisplay: typeof import('./src/features/wikibase-schema/components/ValidationDisplay.vue')['default']
     ValueMappingEditor: typeof import('./src/features/wikibase-schema/components/ValueMappingEditor.vue')['default']
     WikibaseSchemaEditor: typeof import('./src/features/wikibase-schema/components/WikibaseSchemaEditor.vue')['default']
diff --git a/frontend/src/components/ui/breadcrumb/Breadcrumb.vue b/frontend/src/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 0000000..b99dcea
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
+</template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 0000000..6aa567e
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 0000000..de61bc8
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 0000000..3f722da
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbList.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 0000000..ac7effd
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 0000000..8f764c0
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 0000000..00e9bda
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from '@frontend/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/frontend/src/components/ui/breadcrumb/index.ts b/frontend/src/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..0590983
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/frontend/src/components/ui/button/Button.vue b/frontend/src/components/ui/button/Button.vue
index 54e37ed..323911d 100644
--- a/frontend/src/components/ui/button/Button.vue
+++ b/frontend/src/components/ui/button/Button.vue
@@ -20,7 +20,6 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <Primitive
     data-slot="button"
-    class="hover:cursor-pointer"
     :as="as"
     :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), props.class)"
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenu.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000..c46a282
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..d403529
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { Check } from 'lucide-vue-next'
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class=" cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="size-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..f62795a
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="forwarded"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuGroup.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..ab71e1a
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from 'reka-ui'
+import { DropdownMenuGroup } from 'reka-ui'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..6c8109c
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuItemProps } from 'reka-ui'
+import { DropdownMenuItem, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes['class']
+      inset?: boolean
+      variant?: 'default' | 'destructive'
+    }
+  >(),
+  {
+    variant: 'default',
+  },
+)
+
+const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..8422029
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuLabelProps } from 'reka-ui'
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..49209eb
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..90ef5ca
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { Circle } from 'lucide-vue-next'
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="size-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..e8145de
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuSeparatorProps } from 'reka-ui'
+import { DropdownMenuSeparator } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..0bb5f23
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..7d896c6
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..c83ab90
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..14ec72e
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import type { DropdownMenuSubTriggerProps } from 'reka-ui'
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000..39be3ff
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui'
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/frontend/src/components/ui/dropdown-menu/index.ts b/frontend/src/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..d351cfd
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,15 @@
+export { DropdownMenuPortal } from 'reka-ui'
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
diff --git a/frontend/src/components/ui/input/Input.vue b/frontend/src/components/ui/input/Input.vue
new file mode 100644
index 0000000..5564f02
--- /dev/null
+++ b/frontend/src/components/ui/input/Input.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { useVModel } from '@vueuse/core'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<(e: 'update:modelValue', payload: string | number) => void>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class,
+    )"
+  >
+</template>
diff --git a/frontend/src/components/ui/input/index.ts b/frontend/src/components/ui/input/index.ts
new file mode 100644
index 0000000..a691dd6
--- /dev/null
+++ b/frontend/src/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
diff --git a/frontend/src/components/ui/label/Label.vue b/frontend/src/components/ui/label/Label.vue
new file mode 100644
index 0000000..e376b79
--- /dev/null
+++ b/frontend/src/components/ui/label/Label.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { LabelProps } from 'reka-ui'
+import { Label } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/frontend/src/components/ui/label/index.ts b/frontend/src/components/ui/label/index.ts
new file mode 100644
index 0000000..572c2f0
--- /dev/null
+++ b/frontend/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/frontend/src/components/ui/separator/Separator.vue b/frontend/src/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..19193c4
--- /dev/null
+++ b/frontend/src/components/ui/separator/Separator.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { SeparatorProps } from 'reka-ui'
+import { Separator } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'horizontal',
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Separator
+    data-slot="separator-root"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>
diff --git a/frontend/src/components/ui/separator/index.ts b/frontend/src/components/ui/separator/index.ts
new file mode 100644
index 0000000..2287bcb
--- /dev/null
+++ b/frontend/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/frontend/src/components/ui/sheet/Sheet.vue b/frontend/src/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..50de48c
--- /dev/null
+++ b/frontend/src/components/ui/sheet/Sheet.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    data-slot="sheet"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetClose.vue b/frontend/src/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..892eeb0
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="sheet-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetContent.vue b/frontend/src/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..c5bcc29
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import SheetOverlay from './SheetOverlay.vue'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'right',
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'side')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        side === 'right'
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left'
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top'
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        side === 'bottom'
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+        props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetDescription.vue b/frontend/src/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..f24ef28
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DialogDescriptionProps } from 'reka-ui'
+import { DialogDescription } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetFooter.vue b/frontend/src/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..5d90726
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-footer"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetHeader.vue b/frontend/src/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..ae55e36
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetOverlay.vue b/frontend/src/components/ui/sheet/SheetOverlay.vue
new file mode 100644
index 0000000..7a05e18
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetOverlay.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DialogOverlayProps } from 'reka-ui'
+import { DialogOverlay } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetTitle.vue b/frontend/src/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..a4da28c
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { DialogTitleProps } from 'reka-ui'
+import { DialogTitle } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('text-foreground font-semibold', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/frontend/src/components/ui/sheet/SheetTrigger.vue b/frontend/src/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..bca1a5b
--- /dev/null
+++ b/frontend/src/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="sheet-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/frontend/src/components/ui/sheet/index.ts b/frontend/src/components/ui/sheet/index.ts
new file mode 100644
index 0000000..ee33431
--- /dev/null
+++ b/frontend/src/components/ui/sheet/index.ts
@@ -0,0 +1,8 @@
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
diff --git a/frontend/src/components/ui/sidebar/Sidebar.vue b/frontend/src/components/ui/sidebar/Sidebar.vue
new file mode 100644
index 0000000..4f4a93b
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/Sidebar.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { Sheet, SheetContent } from '@frontend/components/ui/sheet'
+import SheetDescription from '@frontend/components/ui/sheet/SheetDescription.vue'
+import SheetHeader from '@frontend/components/ui/sheet/SheetHeader.vue'
+import SheetTitle from '@frontend/components/ui/sheet/SheetTitle.vue'
+import { cn } from '@frontend/lib/utils'
+import type { SidebarProps } from '.'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  side: 'left',
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
+})
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )"
+    />
+    <div
+      :class="cn(
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        // Adjust the padding for floating and inset variants.
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarContent.vue b/frontend/src/components/ui/sidebar/SidebarContent.vue
new file mode 100644
index 0000000..b44bdf5
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarContent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarFooter.vue b/frontend/src/components/ui/sidebar/SidebarFooter.vue
new file mode 100644
index 0000000..3e87eea
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarFooter.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-footer"
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarGroup.vue b/frontend/src/components/ui/sidebar/SidebarGroup.vue
new file mode 100644
index 0000000..ff700bc
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-group"
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarGroupAction.vue b/frontend/src/components/ui/sidebar/SidebarGroupAction.vue
new file mode 100644
index 0000000..5184460
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarGroupContent.vue b/frontend/src/components/ui/sidebar/SidebarGroupContent.vue
new file mode 100644
index 0000000..4fa5dcc
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-group-content"
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarGroupLabel.vue b/frontend/src/components/ui/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 0000000..0338673
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarHeader.vue b/frontend/src/components/ui/sidebar/SidebarHeader.vue
new file mode 100644
index 0000000..e447b52
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarHeader.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-header"
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarInput.vue b/frontend/src/components/ui/sidebar/SidebarInput.vue
new file mode 100644
index 0000000..177645b
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Input } from '@frontend/components/ui/input'
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Input
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    :class="cn(
+      'bg-background h-8 w-full shadow-none',
+      props.class,
+    )"
+  >
+    <slot />
+  </Input>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarInset.vue b/frontend/src/components/ui/sidebar/SidebarInset.vue
new file mode 100644
index 0000000..8c0c809
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarInset.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="cn(
+      'bg-background relative flex w-full flex-1 flex-col',
+      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenu.vue b/frontend/src/components/ui/sidebar/SidebarMenu.vue
new file mode 100644
index 0000000..5aadb45
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuAction.vue b/frontend/src/components/ui/sidebar/SidebarMenuAction.vue
new file mode 100644
index 0000000..091159a
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      showOnHover?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'button',
+  },
+)
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuBadge.vue b/frontend/src/components/ui/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 0000000..8756d44
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuButton.vue b/frontend/src/components/ui/sidebar/SidebarMenuButton.vue
new file mode 100644
index 0000000..d344e22
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Tooltip, TooltipContent, TooltipTrigger } from '@frontend/components/ui/tooltip'
+import { reactiveOmit } from '@vueuse/core'
+import type { Component } from 'vue'
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component
+    }
+  >(),
+  {
+    as: 'button',
+    variant: 'default',
+    size: 'default',
+  },
+)
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = reactiveOmit(props, 'tooltip')
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue b/frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 0000000..63b6f95
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { SidebarMenuButtonVariants } from '.'
+import { sidebarMenuButtonVariants } from '.'
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuItem.vue b/frontend/src/components/ui/sidebar/SidebarMenuItem.vue
new file mode 100644
index 0000000..41a5741
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue b/frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 0000000..76039d8
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Skeleton } from '@frontend/components/ui/skeleton'
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`
+})
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon"
+    />
+
+    <Skeleton
+      class="h-4 max-w-(--skeleton-width) flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSub.vue b/frontend/src/components/ui/sidebar/SidebarMenuSub.vue
new file mode 100644
index 0000000..e8d7b6d
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue b/frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 0000000..6b4e359
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: 'sm' | 'md'
+      isActive?: boolean
+      class?: HTMLAttributes['class']
+    }
+  >(),
+  {
+    as: 'a',
+    size: 'md',
+  },
+)
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue b/frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 0000000..e0dae6a
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    :class="cn('group/menu-sub-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarProvider.vue b/frontend/src/components/ui/sidebar/SidebarProvider.vue
new file mode 100644
index 0000000..5a07479
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarProvider.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'reka-ui'
+import type { HTMLAttributes, Ref } from 'vue'
+import { computed, ref } from 'vue'
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils'
+
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean
+    open?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+    open: undefined,
+  },
+)
+
+const emits = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+const openMobile = ref(false)
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'))
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarRail.vue b/frontend/src/components/ui/sidebar/SidebarRail.vue
new file mode 100644
index 0000000..ad2630d
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarRail.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarSeparator.vue b/frontend/src/components/ui/sidebar/SidebarSeparator.vue
new file mode 100644
index 0000000..1757034
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Separator } from '@frontend/components/ui/separator'
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Separator
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/frontend/src/components/ui/sidebar/SidebarTrigger.vue b/frontend/src/components/ui/sidebar/SidebarTrigger.vue
new file mode 100644
index 0000000..32602e8
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/SidebarTrigger.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Button } from '@frontend/components/ui/button'
+import { cn } from '@frontend/lib/utils'
+import { PanelLeft } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/frontend/src/components/ui/sidebar/index.ts b/frontend/src/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..4400126
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/index.ts
@@ -0,0 +1,60 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/frontend/src/components/ui/sidebar/utils.ts b/frontend/src/components/ui/sidebar/utils.ts
new file mode 100644
index 0000000..7a356ed
--- /dev/null
+++ b/frontend/src/components/ui/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import { createContext } from 'reka-ui'
+import type { ComputedRef, Ref } from 'vue'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')
diff --git a/frontend/src/components/ui/skeleton/Skeleton.vue b/frontend/src/components/ui/skeleton/Skeleton.vue
new file mode 100644
index 0000000..eb18d5e
--- /dev/null
+++ b/frontend/src/components/ui/skeleton/Skeleton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+interface SkeletonProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
+  />
+</template>
diff --git a/frontend/src/components/ui/skeleton/index.ts b/frontend/src/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..be21fad
--- /dev/null
+++ b/frontend/src/components/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/frontend/src/components/ui/tooltip/Tooltip.vue b/frontend/src/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000..2bb0538
--- /dev/null
+++ b/frontend/src/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/frontend/src/components/ui/tooltip/TooltipContent.vue b/frontend/src/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..528dd52
--- /dev/null
+++ b/frontend/src/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '@frontend/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/frontend/src/components/ui/tooltip/TooltipProvider.vue b/frontend/src/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..8cc971f
--- /dev/null
+++ b/frontend/src/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/frontend/src/components/ui/tooltip/TooltipTrigger.vue b/frontend/src/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..59f16b6
--- /dev/null
+++ b/frontend/src/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/frontend/src/components/ui/tooltip/index.ts b/frontend/src/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..5ab9653
--- /dev/null
+++ b/frontend/src/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
diff --git a/frontend/src/core/layouts/DefaultLayout.vue b/frontend/src/core/layouts/DefaultLayout.vue
index df273c9..ba485fe 100644
--- a/frontend/src/core/layouts/DefaultLayout.vue
+++ b/frontend/src/core/layouts/DefaultLayout.vue
@@ -1,29 +1,71 @@
 <script setup lang="ts">
+import { LucideFolderOpen, LucidePlus } from 'lucide-vue-next'
+
 const route = useRoute()
 
 // Hide sidebar when viewing a project
 const showSidebar = computed(() => {
   return route.name !== 'ProjectView'
 })
+
+const navItems = [
+  {
+    name: 'Open',
+    icon: LucideFolderOpen,
+    to: '/open',
+  },
+  {
+    name: 'Create Project',
+    icon: LucidePlus,
+    to: '/create',
+  },
+]
 </script>
 
 <template>
   <div class="flex h-screen w-full">
-    <Sidebar v-if="showSidebar" />
-    <div class="flex-1 flex flex-col min-w-0">
-      <Header />
-      <MainContent>
-        <router-view v-slot="{ Component, route }">
-          <transition
-            :key="route.name"
-            name="fade"
-            mode="out-in"
-          >
-            <component :is="Component" />
-          </transition>
-        </router-view>
-      </MainContent>
-    </div>
+    <SidebarProvider>
+      <Sidebar v-if="showSidebar">
+        <SidebarHeader>
+          <SidebarMenuButton size="lg"><h1 class="text-xl font-semibold text-gray-800">DataForge</h1></SidebarMenuButton>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem v-for="item in navItems" :key="item.name" :item="item">
+                  <SidebarMenuButton
+                  as-child
+                  size="lg"
+                  :item="item"
+                  :is-active="route.path.endsWith(item.to)"
+                  >
+                  <router-link :to="item.to">
+                    <component :is="item.icon" />
+                    {{ item.name }}
+                  </router-link>
+                </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset>
+        <Header />
+        <MainContent>
+          <router-view v-slot="{ Component, route }">
+            <transition
+              :key="route.name"
+              name="fade"
+              mode="out-in"
+            >
+              <component :is="Component" />
+            </transition>
+          </router-view>
+        </MainContent>
+      </SidebarInset>
+    </SidebarProvider>
 
     <!-- Global Toast and Confirm Dialog -->
     <Toast />
diff --git a/frontend/src/features/wikibase-schema/components/TermSection.vue b/frontend/src/features/wikibase-schema/components/TermSection.vue
index cfae270..7fabe05 100644
--- a/frontend/src/features/wikibase-schema/components/TermSection.vue
+++ b/frontend/src/features/wikibase-schema/components/TermSection.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Label as WikibaseLabel } from '@backend/api/project/project.wikibase'
 import { LucideX } from 'lucide-vue-next'
 
 // Props
@@ -9,7 +10,7 @@ const props = defineProps<{
   placeholder: string
   testId: string
   validationPath: string
-  values: Label | Alias
+  values: WikibaseLabel | Alias
   sectionIndex: number
 }>()
 
diff --git a/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue b/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue
index fa01dad..c5e46bc 100644
--- a/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue
+++ b/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue
@@ -156,7 +156,7 @@ const getSaveButtonLabel = () => {
   return 'Save'
 }
 
-const getSaveButtonSeverity = () => {
+const getSaveButtonVariant = () => {
   if (saveStatus.value === 'success' && !schemaStore.isDirty) return 'default'
   if (saveStatus.value === 'error') return 'destructive'
   return 'outline'
@@ -259,7 +259,7 @@ onUnmounted(() => {
             </Button>
             <Button
               data-testid="save-btn"
-              :variant="getSaveButtonSeverity()"
+              :variant="getSaveButtonVariant()"
               :disabled="!canSave || isSaving"
               size="sm"
               @click="handleSave"
diff --git a/frontend/src/shared/components/Header.vue b/frontend/src/shared/components/Header.vue
index 0dbc5a6..b51b061 100644
--- a/frontend/src/shared/components/Header.vue
+++ b/frontend/src/shared/components/Header.vue
@@ -12,42 +12,32 @@ const totalRecords = computed(() => meta.value?.total || 0)
 <template>
   <header class="bg-white border-b border-gray-200 flex-shrink-0">
     <!-- Project Header for Project View -->
-    <div
-      v-if="isProjectView"
-      class="h-16 flex items-center justify-between p-4"
-    >
-      <div>
-        <h1 class="text-xl font-semibold text-gray-900">
+    <Breadcrumb v-if="isProjectView" class="h-16 flex items-center justify-between p-4">
+      <BreadcrumbList>
+        <BreadcrumbItem class="text-lg font-semibold text-gray-900">
           {{ projectName || 'Loading Project...' }}
-        </h1>
-        <p class="text-sm text-gray-600">{{ totalRecords }} rows</p>
-      </div>
-      <div class="flex gap-2">
-        <router-link :to="{ name: 'open' }">
-          <Button variant="outline">
-            <LucideMoveLeft />
-            Back to Projects
-          </Button>
-        </router-link>
-      </div>
-    </div>
+        </BreadcrumbItem>
+        <BreadcrumbItem class="text-sm text-gray-600">{{ totalRecords }} rows</BreadcrumbItem>
+      </BreadcrumbList>
+      <router-link :to="{ name: 'open' }">
+        <Button variant="outline">
+          <LucideMoveLeft />
+          Back to Projects
+        </Button>
+      </router-link>
+    </Breadcrumb>
 
     <!-- Default Header for other views -->
-    <div
-      v-else
-      class="h-16 flex items-center p-4"
-    >
-      <!-- Breadcrumb -->
-      <div class="flex items-center text-sm">
-        <span class="text-gray-500">Projects</span>
-        <i class="pi pi-angle-right mx-2 text-gray-400" />
-        <span class="font-medium text-gray-900">All Projects</span>
-      </div>
-
-      <!-- Spacer -->
-      <div class="flex-1" />
-
-      <!-- Actions -->
-    </div>
+    <Breadcrumb v-else class="h-16 flex items-center p-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          Projects
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          All Projects
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
   </header>
 </template>
diff --git a/frontend/src/shared/components/Sidebar.vue b/frontend/src/shared/components/Sidebar.vue
deleted file mode 100644
index 8d0164b..0000000
--- a/frontend/src/shared/components/Sidebar.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const navItems = [
-  {
-    name: 'Open',
-    icon: 'pi pi-folder-open',
-    to: '/open',
-  },
-  {
-    name: 'Create Project',
-    icon: 'pi pi-plus',
-    to: '/create',
-  },
-]
-</script>
-
-<template>
-  <div class="w-64 h-full bg-white border-r border-gray-200 flex-shrink-0">
-    <!-- Logo/App Name -->
-    <div class="p-4 border-b border-gray-200 h-16">
-      <h1 class="text-xl font-semibold text-gray-800">DataForge</h1>
-    </div>
-
-    <!-- Navigation -->
-    <nav class="flex-1 overflow-y-auto p-2">
-      <ul class="space-y-1">
-        <li
-          v-for="item in navItems"
-          :key="item.name"
-          class="group"
-        >
-          <router-link
-            :to="item.to"
-            class="flex items-center px-3 py-2 text-sm font-medium rounded-md group-hover:bg-gray-100 text-gray-700 hover:text-gray-900"
-            :class="{ 'bg-gray-100 text-gray-900': route.path.endsWith(item.to) }"
-          >
-            <i
-              :class="[
-                item.icon,
-                'mr-3',
-                route.path.endsWith(item.to)
-                  ? 'text-gray-900'
-                  : 'text-gray-400 group-hover:text-gray-500',
-              ]"
-            />
-            {{ item.name }}
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- Footer -->
-    <div class="p-4 border-t border-gray-200 text-xs text-gray-500">
-      <p>DataForge</p>
-    </div>
-  </div>
-</template>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d0a67cb..dc24579 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -74,7 +74,6 @@ export default defineConfig({
             'ReferenceSchemaMapping',
             'StatementRank',
             'StatementSchemaMapping',
-            'Label',
             'Alias',
             'TermsSchemaMapping',
             'ItemSchema',