diff --git a/frontend/src/components/menu/BottomMenu.vue b/frontend/src/components/menu/BottomMenu.vue
index d5d5887c7f..3263d4a702 100644
--- a/frontend/src/components/menu/BottomMenu.vue
+++ b/frontend/src/components/menu/BottomMenu.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="navigation-drawer-box d-md-none position-fixed mb-5 pb-5">
-    <ListWithNavigationDrawer
-      :drawer="drawer"
-      :location="location"
-      @update:drawer="updateDrawer($event)"
-    />
+    <TablesDrawer v-model="isTablesDrawerVisible" location="bottom" />
   </div>
   <div
     class="bottom-menu d-flex w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface d-md-none"
@@ -20,23 +16,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-
 import CreateButtonMobile from '#components/buttons/CreateButtonMobile.vue'
-import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
+import TablesDrawer from '#components/tablesDrawer/TablesDrawer.vue'
 
 import Circle from './CircleElement.vue'
 import UserInfo from './UserInfo.vue'
 
-const drawer = ref(false)
-const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('bottom')
+const isTablesDrawerVisible = defineModel<boolean>()
 
 const toggleDrawer = () => {
-  drawer.value = !drawer.value
-}
-
-const updateDrawer = (value: boolean) => {
-  drawer.value = value
+  isTablesDrawerVisible.value = !isTablesDrawerVisible.value
 }
 </script>
 
@@ -62,12 +51,4 @@ const updateDrawer = (value: boolean) => {
 .navigation-drawer-box {
   bottom: 65px;
 }
-
-.v-navigation-drawer {
-  scrollbar-width: thin;
-}
-
-.v-navigation-drawer__content {
-  scrollbar-width: thin;
-}
 </style>
diff --git a/frontend/src/components/menu/TopMenu.vue b/frontend/src/components/menu/TopMenu.vue
index 161aa2f312..7efc09baae 100644
--- a/frontend/src/components/menu/TopMenu.vue
+++ b/frontend/src/components/menu/TopMenu.vue
@@ -28,28 +28,23 @@
       </v-row>
     </v-app-bar>
   </div>
-  <ListWithNavigationDrawer :drawer="drawer" :location="location" @update:drawer="updateDrawer" />
+  <TablesDrawer v-model="isTablesDrawerVisible" location="right" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-
 import LightDarkSwitch from '#components/menu/LightDarkSwitch.vue'
 import LogoImage from '#components/menu/LogoImage.vue'
 import TabControl from '#components/menu/TabControl.vue'
 import UserInfo from '#components/menu/UserInfo.vue'
-import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
+import TablesDrawer from '#components/tablesDrawer/TablesDrawer.vue'
 
 import Circle from './CircleElement.vue'
 
-const drawer = ref(false)
+const isTablesDrawerVisible = defineModel<boolean>()
+
 const toggleDrawer = () => {
-  drawer.value = !drawer.value
-}
-const updateDrawer = (value: boolean) => {
-  drawer.value = value
+  isTablesDrawerVisible.value = !isTablesDrawerVisible.value
 }
-const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('right')
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
index a2de641d08..9e8fe816a7 100644
--- a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
@@ -15,8 +15,8 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
     >
       
       <nav
-        class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-        data-v-3308ee86=""
+        class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+        data-v-cf2c9067=""
         style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
       >
         <!---->
@@ -25,30 +25,178 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
           class="v-navigation-drawer__content"
         >
           
-          <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+          <div
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+            data-v-cf2c9067=""
+          >
+            <!---->
+            <div
+              class="v-input__control"
+            >
+              
+              <div
+                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+              >
+                <div
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
+                >
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="v-progress-linear v-theme--light v-locale--is-ltr"
+                    role="progressbar"
+                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="width: 100%;"
+                    />
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div
+                        class="v-progress-linear__indeterminate"
+                      >
+                        
+                        <div
+                          class="v-progress-linear__indeterminate long"
+                        />
+                        <div
+                          class="v-progress-linear__indeterminate short"
+                        />
+                        
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                </div>
+                <div
+                  class="v-field__prepend-inner"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                  <!---->
+                </div>
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
+                >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-1"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  <label
+                    class="v-label v-field-label"
+                    for="input-1"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  
+                  
+                  <!---->
+                  <input
+                    aria-describedby="input-1-messages"
+                    class="v-field__input"
+                    id="input-1"
+                    size="1"
+                    type="text"
+                  />
+                  <!---->
+                  
+                  
+                </div>
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="expand-x-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-field__clearable"
+                    style="display: none;"
+                  >
+                    
+                    <i
+                      aria-hidden="false"
+                      aria-label="$vuetify.input.clear"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                      role="button"
+                      tabindex="0"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <div
+                  class="v-field__append-inner"
+                >
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="v-field__outline"
+                >
+                  <!---->
+                  <!---->
+                </div>
+              </div>
+              
+            </div>
+            <!---->
+            <div
+              class="v-input__details"
+            >
+              <transition-group-stub
+                appear="false"
+                aria-live="polite"
+                class="v-messages"
+                css="true"
+                id="input-1-messages"
+                name="slide-y-transition"
+                persisted="false"
+                role="alert"
+                tag="div"
+              >
+                <!---->
+              </transition-group-stub>
+              <!---->
+            </div>
+          </div>
           <div
             class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-            data-v-3308ee86=""
+            data-v-cf2c9067=""
             role="listbox"
             tabindex="0"
           >
             
-            <div
+            <h2
               class="mx-4"
-              data-v-3308ee86=""
+              data-v-cf2c9067=""
             >
-              $t('menu.roomList')
-            </div>
+              $t('tablesDrawer.header')
+            </h2>
             <div
               class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-              data-v-3308ee86=""
-              data-v-fd6c8fbc=""
+              data-v-cf2c9067=""
+              data-v-de37061b=""
               style="width: 400px;"
             >
               <!---->
@@ -95,7 +243,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
               
               <div
                 class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-fd6c8fbc=""
+                data-v-de37061b=""
                 role="listbox"
                 tabindex="0"
               >
@@ -665,7 +813,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
       <button
         aria-expanded="false"
         aria-haspopup="menu"
-        aria-owns="v-menu-1"
+        aria-owns="v-menu-3"
         class="user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
         data-v-607bdd70=""
         targetref="[object Object]"
diff --git a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
index cf48f8ca84..d7a9b215c8 100644
--- a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
@@ -750,8 +750,8 @@ exports[`TopMenu > renders 1`] = `
     </div>
     
     <nav
-      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-      data-v-3308ee86=""
+      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+      data-v-cf2c9067=""
       style="right: 0px; z-index: 1004; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
     >
       <!---->
@@ -760,30 +760,178 @@ exports[`TopMenu > renders 1`] = `
         class="v-navigation-drawer__content"
       >
         
-        <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+        <div
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+          data-v-cf2c9067=""
+        >
+          <!---->
+          <div
+            class="v-input__control"
+          >
+            
+            <div
+              class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+            >
+              <div
+                class="v-field__overlay"
+              />
+              <div
+                class="v-field__loader"
+              >
+                <div
+                  aria-hidden="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  class="v-progress-linear v-theme--light v-locale--is-ltr"
+                  role="progressbar"
+                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                >
+                  <!---->
+                  <div
+                    class="v-progress-linear__background"
+                    style="width: 100%;"
+                  />
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="fade-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-progress-linear__indeterminate"
+                    >
+                      
+                      <div
+                        class="v-progress-linear__indeterminate long"
+                      />
+                      <div
+                        class="v-progress-linear__indeterminate short"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <div
+                class="v-field__prepend-inner"
+              >
+                <i
+                  aria-hidden="true"
+                  class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                />
+                <!---->
+              </div>
+              <div
+                class="v-field__field"
+                data-no-activator=""
+              >
+                <label
+                  aria-hidden="true"
+                  class="v-label v-field-label v-field-label--floating"
+                  for="input-3"
+                >
+                  <!---->
+                  
+                  $t('tablesDrawer.searchPlaceholder')
+                  
+                </label>
+                <label
+                  class="v-label v-field-label"
+                  for="input-3"
+                >
+                  <!---->
+                  
+                  $t('tablesDrawer.searchPlaceholder')
+                  
+                </label>
+                
+                
+                <!---->
+                <input
+                  aria-describedby="input-3-messages"
+                  class="v-field__input"
+                  id="input-3"
+                  size="1"
+                  type="text"
+                />
+                <!---->
+                
+                
+              </div>
+              <transition-stub
+                appear="false"
+                css="true"
+                name="expand-x-transition"
+                persisted="false"
+              >
+                <div
+                  class="v-field__clearable"
+                  style="display: none;"
+                >
+                  
+                  <i
+                    aria-hidden="false"
+                    aria-label="$vuetify.input.clear"
+                    class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                    role="button"
+                    tabindex="0"
+                  />
+                  
+                </div>
+              </transition-stub>
+              <div
+                class="v-field__append-inner"
+              >
+                <!---->
+                <!---->
+              </div>
+              <div
+                class="v-field__outline"
+              >
+                <!---->
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+          <!---->
+          <div
+            class="v-input__details"
+          >
+            <transition-group-stub
+              appear="false"
+              aria-live="polite"
+              class="v-messages"
+              css="true"
+              id="input-3-messages"
+              name="slide-y-transition"
+              persisted="false"
+              role="alert"
+              tag="div"
+            >
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
         <div
           class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-          data-v-3308ee86=""
+          data-v-cf2c9067=""
           role="listbox"
           tabindex="0"
         >
           
-          <div
+          <h2
             class="mx-4"
-            data-v-3308ee86=""
+            data-v-cf2c9067=""
           >
-            $t('menu.roomList')
-          </div>
+            $t('tablesDrawer.header')
+          </h2>
           <div
             class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-            data-v-3308ee86=""
-            data-v-fd6c8fbc=""
+            data-v-cf2c9067=""
+            data-v-de37061b=""
             style="width: 400px;"
           >
             <!---->
@@ -830,7 +978,7 @@ exports[`TopMenu > renders 1`] = `
             
             <div
               class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-              data-v-fd6c8fbc=""
+              data-v-de37061b=""
               role="listbox"
               tabindex="0"
             >
diff --git a/frontend/src/components/vuetify/Atoms/ListElement.stories.ts b/frontend/src/components/tablesDrawer/TableList.stories.ts
similarity index 75%
rename from frontend/src/components/vuetify/Atoms/ListElement.stories.ts
rename to frontend/src/components/tablesDrawer/TableList.stories.ts
index 918cc1f4ca..a06dfd5298 100644
--- a/frontend/src/components/vuetify/Atoms/ListElement.stories.ts
+++ b/frontend/src/components/tablesDrawer/TableList.stories.ts
@@ -1,12 +1,12 @@
 import { SBComp } from '#types/SBComp'
 
-import ListElement from './ListElement.vue'
+import TableList from './TableList.vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 const meta = {
-  title: 'MOLECULES/ListElement',
-  component: ListElement as SBComp,
+  title: 'tablesDrawer/TableList',
+  component: TableList as SBComp,
   tags: ['autodocs'],
   argTypes: {},
   args: {
@@ -16,14 +16,19 @@ const meta = {
         meetingID: 'xxx',
         startTime: '1234',
         participantCount: 4,
-        attendees: [],
+        attendees: [
+          { fullName: 'John Doe' },
+          { fullName: 'Max Mustermann' },
+          { fullName: 'Jane Doe' },
+          { fullName: 'Elfriede Müller' },
+        ],
         joinLink: 'https://my.link',
       },
       {
         meetingName: 'Beispiel Titel 2',
         meetingID: 'xxx',
         startTime: '1234',
-        participantCount: 4,
+        participantCount: 0,
         attendees: [],
         joinLink: 'https://my.link',
       },
@@ -32,7 +37,7 @@ const meta = {
   parameters: {
     appHeight: '100vh',
   },
-} satisfies Meta<typeof ListElement>
+} satisfies Meta<typeof TableList>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/frontend/src/components/tablesDrawer/TableList.test.ts b/frontend/src/components/tablesDrawer/TableList.test.ts
new file mode 100644
index 0000000000..7a7d38376c
--- /dev/null
+++ b/frontend/src/components/tablesDrawer/TableList.test.ts
@@ -0,0 +1,94 @@
+import { wrap } from 'module'
+
+import { flushPromises, mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+import { navigate } from 'vike/client/router'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import { h } from 'vue'
+import { VApp } from 'vuetify/components'
+
+import { useActiveRoomStore } from '#stores/activeRoomStore'
+
+import TableList from './TableList.vue'
+
+vi.mock('vike/client/router')
+
+const testTables = [
+  {
+    meetingID: 'my-meeting',
+    meetingName: 'my meeting',
+    startTime: '1234',
+    participantCount: 1,
+    attendees: [
+      {
+        fullName: 'Peter Lustig',
+      },
+    ],
+    joinLink: 'https://my.link',
+  },
+  {
+    meetingID: 'my-meeting-2',
+    meetingName: 'my meeting',
+    startTime: '1234',
+    participantCount: 2,
+    attendees: [
+      {
+        fullName: 'Peter Lustig',
+      },
+      {
+        fullName: 'Max Mustermann',
+      },
+    ],
+    joinLink: 'https://my.link',
+  },
+]
+
+describe('TableList', () => {
+  const Wrapper = () => {
+    return mount(VApp, {
+      slots: {
+        default: h(TableList, { items: testTables }),
+      },
+    })
+  }
+
+  let wrapper: ReturnType<typeof Wrapper>
+
+  setActivePinia(createPinia())
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('renders list', () => {
+    expect(wrapper.find('.v-list--density-default').exists()).toBe(true)
+  })
+
+  it('sets active room', async () => {
+    const setActiveRoomSpy = vi.spyOn(useActiveRoomStore(), 'setActiveRoom')
+    await wrapper.find('.table').trigger('click')
+
+    expect(setActiveRoomSpy).toHaveBeenCalledWith(testTables[0].joinLink)
+  })
+
+  describe('when a table is clicked', () => {
+    beforeEach(async () => {
+      wrapper = Wrapper()
+      await wrapper.find('.table').trigger('click')
+      await flushPromises()
+    })
+
+    it('emit event "openRoom"', () => {
+      const tableList = wrapper.findComponent(TableList)
+      expect(tableList.emitted('openRoom')).toBeTruthy()
+    })
+
+    it('navigates to opened Room', () => {
+      expect(navigate).toHaveBeenCalledWith('/room/')
+    })
+  })
+})
diff --git a/frontend/src/components/vuetify/Atoms/ListElement.vue b/frontend/src/components/tablesDrawer/TableList.vue
similarity index 56%
rename from frontend/src/components/vuetify/Atoms/ListElement.vue
rename to frontend/src/components/tablesDrawer/TableList.vue
index aefe4060fb..5c5ee61c42 100644
--- a/frontend/src/components/vuetify/Atoms/ListElement.vue
+++ b/frontend/src/components/tablesDrawer/TableList.vue
@@ -4,20 +4,18 @@
       <v-list-item
         v-for="(item, index) in items"
         :key="index"
-        :class="{ 'custom-list-item': true }"
+        class="table"
         :title="item.meetingName"
         :subtitle="$t('rooms.participantCount', { count: item.participantCount })"
-        @click="handleItemClick(item.joinLink)"
+        @click="openRoom(item.joinLink)"
       >
-        <!-- 
+        <!--
         <template v-if="item.prepend" #prepend>
           <component :is="item.prepend" v-bind="item.prependProps" />
         </template>
         -->
 
-        <!-- <v-list-item-title>{{ item.title }}</v-list-item-title>
-             <v-list-item-subtitle v-if="item.subtitle">{{ item.subtitle }}</v-list-item-subtitle> -->
-        <!-- 
+        <!--
         <template v-if="item.append" #append>
           <component :is="item.append" v-bind="item.appendProps" />
         </template>
@@ -29,48 +27,27 @@
 
 <script lang="ts" setup>
 import { navigate } from 'vike/client/router'
-import { PropType } from 'vue'
 
 import { useActiveRoomStore } from '#stores/activeRoomStore'
 import { Room } from '#stores/roomsStore'
 
 const activeRoomStore = useActiveRoomStore()
 
-/*
-    export interface Item {
-    title: string
-    subtitle?: string
-    rounded?: boolean
-    prepend?: string | object
-    prependProps?: object
-    append?: string | object
-    appendProps?: object
-    }
-  */
+defineProps<{
+  items: Room[]
+}>()
 
-defineProps({
-  items: {
-    type: Array as PropType<Room[]>,
-    required: true,
-  },
-})
+const emit = defineEmits(['openRoom'])
 
-// const emit = defineEmits(['item-click'])
-
-const handleItemClick = (link: string) => {
-  // console.log('handleItemClick', link)
-  closeMenu()
+const openRoom = (link: string) => {
+  emit('openRoom')
   activeRoomStore.setActiveRoom(link)
   navigate('/room/')
-  // emit('item-click')
-}
-const closeMenu = () => {
-  // Logik zum Schließen des Menüs hinzufügen, falls erforderlich
 }
 </script>
 
 <style scoped>
-.custom-list-item {
+.table {
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.stories.ts b/frontend/src/components/tablesDrawer/TablesDrawer.stories.ts
similarity index 51%
rename from frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.stories.ts
rename to frontend/src/components/tablesDrawer/TablesDrawer.stories.ts
index 096986a91d..378cf8d55a 100644
--- a/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.stories.ts
+++ b/frontend/src/components/tablesDrawer/TablesDrawer.stories.ts
@@ -1,27 +1,29 @@
+import { withApollo } from '#root/.storybook/withApollo.decorator.js'
 import { SBComp } from '#types/SBComp'
 
-import ListWithNavigationDrawer from './ListWithNavigationDrawer.vue'
+import TablesDrawer from './TablesDrawer.vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 const meta = {
-  title: 'ORGANISMS/ListWithNavigationDrawer',
-  component: ListWithNavigationDrawer as SBComp,
+  title: 'tablesDrawer/TablesDrawer',
+  component: TablesDrawer as SBComp,
   tags: ['autodocs'],
   argTypes: {},
   args: {
-    drawer: false,
+    modelValue: false,
   },
   parameters: {
     appHeight: '100vh',
   },
-} satisfies Meta<typeof ListWithNavigationDrawer>
+  decorators: [withApollo],
+} satisfies Meta<typeof TablesDrawer>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Example: Story = {
   args: {
-    drawer: false,
+    modelValue: true,
   },
 }
diff --git a/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.test.ts b/frontend/src/components/tablesDrawer/TablesDrawer.test.ts
similarity index 69%
rename from frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.test.ts
rename to frontend/src/components/tablesDrawer/TablesDrawer.test.ts
index 5dd8807479..104531637f 100644
--- a/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.test.ts
+++ b/frontend/src/components/tablesDrawer/TablesDrawer.test.ts
@@ -3,13 +3,13 @@ import { describe, it, expect, beforeEach } from 'vitest'
 import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
-import ListWithNavigationDrawer from './ListWithNavigationDrawer.vue'
+import TablesDrawer from './TablesDrawer.vue'
 
-describe('ListWithNavigationDrawer', () => {
+describe('TablesDrawer', () => {
   const Wrapper = () => {
     return mount(VApp, {
       slots: {
-        default: h(ListWithNavigationDrawer as Component, { drawer: true }),
+        default: h(TablesDrawer as Component, { drawer: true }),
       },
     })
   }
diff --git a/frontend/src/components/tablesDrawer/TablesDrawer.vue b/frontend/src/components/tablesDrawer/TablesDrawer.vue
new file mode 100644
index 0000000000..587b2681f2
--- /dev/null
+++ b/frontend/src/components/tablesDrawer/TablesDrawer.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-navigation-drawer v-model="isVisible" :location="location" width="auto" class="menu-drawer">
+    <v-text-field
+      v-model="searchValue"
+      :label="$t('tablesDrawer.searchPlaceholder')"
+      prepend-inner-icon="mdi-tune"
+      clearable
+      rounded
+      variant="solo"
+      class="mx-4 mt-4 search"
+    ></v-text-field>
+    <v-list>
+      <h2 class="mx-4">{{ $t('tablesDrawer.header') }}</h2>
+      <TableList :items="filteredItems" @open-room="closeDrawer" />
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { ref, computed } from 'vue'
+
+import { useRoomsStore } from '#stores/roomsStore'
+
+import TableList from './TableList.vue'
+
+const roomsStore = useRoomsStore()
+
+const { rooms: items } = storeToRefs(roomsStore)
+
+withDefaults(
+  defineProps<{
+    modelValue: boolean
+    location?: 'right' | 'bottom' | 'left' | 'end' | 'top' | 'start'
+  }>(),
+  {
+    modelValue: false,
+    location: 'right',
+  },
+)
+
+const isVisible = defineModel<boolean>()
+
+const closeDrawer = () => {
+  isVisible.value = false
+}
+
+const searchValue = ref('')
+
+const filteredItems = computed(() => {
+  if (!searchValue.value) {
+    return items.value
+  }
+  return items.value.filter(
+    (item) =>
+      item.meetingName.toLowerCase().includes(searchValue.value.toLowerCase()) ||
+      item.attendees.find((attendee) =>
+        attendee.fullName.toLowerCase().includes(searchValue.value.toLowerCase()),
+      ),
+  )
+})
+</script>
+
+<style scoped>
+.menu-drawer {
+  z-index: 0 !important;
+}
+
+.search {
+  border-radius: 25px;
+}
+</style>
diff --git a/frontend/src/components/vuetify/Atoms/__snapshots__/ListElement.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/ListElement.test.ts.snap
similarity index 100%
rename from frontend/src/components/vuetify/Atoms/__snapshots__/ListElement.test.ts.snap
rename to frontend/src/components/tablesDrawer/__snapshots__/ListElement.test.ts.snap
diff --git a/frontend/src/components/vuetify/Organisms/__snapshots__/ListWithNavigationDrawer.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/ListWithNavigationDrawer.test.ts.snap
similarity index 100%
rename from frontend/src/components/vuetify/Organisms/__snapshots__/ListWithNavigationDrawer.test.ts.snap
rename to frontend/src/components/tablesDrawer/__snapshots__/ListWithNavigationDrawer.test.ts.snap
diff --git a/frontend/src/components/vuetify/__snapshots__/ListElement.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/OpenTable.test.ts.snap
similarity index 94%
rename from frontend/src/components/vuetify/__snapshots__/ListElement.test.ts.snap
rename to frontend/src/components/tablesDrawer/__snapshots__/OpenTable.test.ts.snap
index f7871493a0..3bbcf0f2d3 100644
--- a/frontend/src/components/vuetify/__snapshots__/ListElement.test.ts.snap
+++ b/frontend/src/components/tablesDrawer/__snapshots__/OpenTable.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ListElement > renders correctly 1`] = `
+exports[`OpenTable > renders correctly 1`] = `
 <div
   class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
 >
@@ -10,7 +10,7 @@ exports[`ListElement > renders correctly 1`] = `
     
     <div
       class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-      data-v-fce026f9=""
+      data-v-4e81c11b=""
       style="width: 400px;"
     >
       <!---->
@@ -57,7 +57,7 @@ exports[`ListElement > renders correctly 1`] = `
       
       <div
         class="v-list v-theme--light v-list--density-default v-list--two-line"
-        data-v-fce026f9=""
+        data-v-4e81c11b=""
         role="listbox"
         tabindex="0"
       >
diff --git a/frontend/src/components/vuetify/Molecules/__snapshots__/SearchField.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/SearchField.test.ts.snap
similarity index 100%
rename from frontend/src/components/vuetify/Molecules/__snapshots__/SearchField.test.ts.snap
rename to frontend/src/components/tablesDrawer/__snapshots__/SearchField.test.ts.snap
diff --git a/frontend/src/components/tablesDrawer/__snapshots__/TableList.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/TableList.test.ts.snap
new file mode 100644
index 0000000000..95e46b24c2
--- /dev/null
+++ b/frontend/src/components/tablesDrawer/__snapshots__/TableList.test.ts.snap
@@ -0,0 +1,167 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TableList > renders correctly 1`] = `
+<div
+  class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
+>
+  <div
+    class="v-application__wrap"
+  >
+    
+    <div
+      class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
+      data-v-de37061b=""
+      style="width: 400px;"
+    >
+      <!---->
+      <div
+        class="v-card__loader"
+      >
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="v-progress-linear v-theme--light v-locale--is-ltr"
+          role="progressbar"
+          style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+        >
+          <!---->
+          <div
+            class="v-progress-linear__background"
+            style="width: 100%;"
+          />
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
+            <div
+              class="v-progress-linear__indeterminate"
+            >
+              
+              <div
+                class="v-progress-linear__indeterminate long"
+              />
+              <div
+                class="v-progress-linear__indeterminate short"
+              />
+              
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      
+      <div
+        class="v-list v-theme--light v-list--density-default v-list--two-line"
+        data-v-de37061b=""
+        role="listbox"
+        tabindex="0"
+      >
+        
+        
+        <div
+          class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text table"
+          data-v-de37061b=""
+          tabindex="-2"
+        >
+          
+          <span
+            class="v-list-item__overlay"
+          />
+          <span
+            class="v-list-item__underlay"
+          />
+          
+          <!---->
+          <div
+            class="v-list-item__content"
+            data-no-activator=""
+          >
+            <div
+              class="v-list-item-title"
+            >
+              my meeting
+            </div>
+            <div
+              class="v-list-item-subtitle"
+            >
+              $t('rooms.participantCount')
+            </div>
+            
+            <!--
+        &lt;template v-if="item.prepend" #prepend&gt;
+          &lt;component :is="item.prepend" v-bind="item.prependProps" /&gt;
+        &lt;/template&gt;
+        -->
+            <!--
+        &lt;template v-if="item.append" #append&gt;
+          &lt;component :is="item.append" v-bind="item.appendProps" /&gt;
+        &lt;/template&gt;
+        -->
+            
+          </div>
+          <!---->
+        </div>
+        <div
+          class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--two-line rounded-0 v-list-item--variant-text table"
+          data-v-de37061b=""
+          tabindex="-2"
+        >
+          
+          <span
+            class="v-list-item__overlay"
+          />
+          <span
+            class="v-list-item__underlay"
+          />
+          
+          <!---->
+          <div
+            class="v-list-item__content"
+            data-no-activator=""
+          >
+            <div
+              class="v-list-item-title"
+            >
+              my meeting
+            </div>
+            <div
+              class="v-list-item-subtitle"
+            >
+              $t('rooms.participantCount')
+            </div>
+            
+            <!--
+        &lt;template v-if="item.prepend" #prepend&gt;
+          &lt;component :is="item.prepend" v-bind="item.prependProps" /&gt;
+        &lt;/template&gt;
+        -->
+            <!--
+        &lt;template v-if="item.append" #append&gt;
+          &lt;component :is="item.append" v-bind="item.appendProps" /&gt;
+        &lt;/template&gt;
+        -->
+            
+          </div>
+          <!---->
+        </div>
+        
+        
+      </div>
+      
+      <!---->
+      
+      <!---->
+      <span
+        class="v-card__underlay"
+      />
+      
+    </div>
+    
+  </div>
+</div>
+`;
diff --git a/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap
new file mode 100644
index 0000000000..1029bb6e87
--- /dev/null
+++ b/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap
@@ -0,0 +1,278 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TablesDrawer > renders correctly 1`] = `
+<div
+  class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
+>
+  <div
+    class="v-application__wrap"
+  >
+    
+    
+    <nav
+      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+      data-v-cf2c9067=""
+      drawer="true"
+      style="right: 0px; z-index: 1004; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 0px - 0px); top: 0px; bottom: 0px;"
+    >
+      <!---->
+      <!---->
+      <div
+        class="v-navigation-drawer__content"
+      >
+        
+        <div
+          class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+          data-v-cf2c9067=""
+        >
+          <!---->
+          <div
+            class="v-input__control"
+          >
+            
+            <div
+              class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+            >
+              <div
+                class="v-field__overlay"
+              />
+              <div
+                class="v-field__loader"
+              >
+                <div
+                  aria-hidden="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  class="v-progress-linear v-theme--light v-locale--is-ltr"
+                  role="progressbar"
+                  style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                >
+                  <!---->
+                  <div
+                    class="v-progress-linear__background"
+                    style="width: 100%;"
+                  />
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="fade-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-progress-linear__indeterminate"
+                    >
+                      
+                      <div
+                        class="v-progress-linear__indeterminate long"
+                      />
+                      <div
+                        class="v-progress-linear__indeterminate short"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <div
+                class="v-field__prepend-inner"
+              >
+                <i
+                  aria-hidden="true"
+                  class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                />
+                <!---->
+              </div>
+              <div
+                class="v-field__field"
+                data-no-activator=""
+              >
+                <label
+                  aria-hidden="true"
+                  class="v-label v-field-label v-field-label--floating"
+                  for="input-1"
+                >
+                  <!---->
+                  
+                  $t('tablesDrawer.searchPlaceholder')
+                  
+                </label>
+                <label
+                  class="v-label v-field-label"
+                  for="input-1"
+                >
+                  <!---->
+                  
+                  $t('tablesDrawer.searchPlaceholder')
+                  
+                </label>
+                
+                
+                <!---->
+                <input
+                  aria-describedby="input-1-messages"
+                  class="v-field__input"
+                  id="input-1"
+                  size="1"
+                  type="text"
+                />
+                <!---->
+                
+                
+              </div>
+              <transition-stub
+                appear="false"
+                css="true"
+                name="expand-x-transition"
+                persisted="false"
+              >
+                <div
+                  class="v-field__clearable"
+                  style="display: none;"
+                >
+                  
+                  <i
+                    aria-hidden="false"
+                    aria-label="$vuetify.input.clear"
+                    class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                    role="button"
+                    tabindex="0"
+                  />
+                  
+                </div>
+              </transition-stub>
+              <div
+                class="v-field__append-inner"
+              >
+                <!---->
+                <!---->
+              </div>
+              <div
+                class="v-field__outline"
+              >
+                <!---->
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+          <!---->
+          <div
+            class="v-input__details"
+          >
+            <transition-group-stub
+              appear="false"
+              aria-live="polite"
+              class="v-messages"
+              css="true"
+              id="input-1-messages"
+              name="slide-y-transition"
+              persisted="false"
+              role="alert"
+              tag="div"
+            >
+              <!---->
+            </transition-group-stub>
+            <!---->
+          </div>
+        </div>
+        <div
+          class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
+          data-v-cf2c9067=""
+          role="listbox"
+          tabindex="0"
+        >
+          
+          <h2
+            class="mx-4"
+            data-v-cf2c9067=""
+          >
+            $t('tablesDrawer.header')
+          </h2>
+          <div
+            class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
+            data-v-cf2c9067=""
+            data-v-de37061b=""
+            style="width: 400px;"
+          >
+            <!---->
+            <div
+              class="v-card__loader"
+            >
+              <div
+                aria-hidden="true"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                class="v-progress-linear v-theme--light v-locale--is-ltr"
+                role="progressbar"
+                style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+              >
+                <!---->
+                <div
+                  class="v-progress-linear__background"
+                  style="width: 100%;"
+                />
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="fade-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-progress-linear__indeterminate"
+                  >
+                    
+                    <div
+                      class="v-progress-linear__indeterminate long"
+                    />
+                    <div
+                      class="v-progress-linear__indeterminate short"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <!---->
+              </div>
+            </div>
+            <!---->
+            <!---->
+            
+            <div
+              class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
+              data-v-de37061b=""
+              role="listbox"
+              tabindex="0"
+            >
+              
+              
+              
+              
+            </div>
+            
+            <!---->
+            
+            <!---->
+            <span
+              class="v-card__underlay"
+            />
+            
+          </div>
+          
+        </div>
+        
+      </div>
+      <!---->
+    </nav>
+    <transition-stub
+      appear="false"
+      css="true"
+      name="fade-transition"
+      persisted="false"
+    >
+      <!---->
+    </transition-stub>
+    
+    
+  </div>
+</div>
+`;
diff --git a/frontend/src/components/vuetify/Atoms/ListElement.test.ts b/frontend/src/components/vuetify/Atoms/ListElement.test.ts
deleted file mode 100644
index f5254232ce..0000000000
--- a/frontend/src/components/vuetify/Atoms/ListElement.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { h } from 'vue'
-import { VApp } from 'vuetify/components'
-
-import ListElement from './ListElement.vue'
-
-describe('ListElement', () => {
-  const Wrapper = () => {
-    return mount(VApp, {
-      slots: {
-        default: h(ListElement),
-      },
-    })
-  }
-
-  let wrapper: ReturnType<typeof Wrapper>
-
-  beforeEach(() => {
-    wrapper = Wrapper()
-  })
-
-  it('renders correctly', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-
-  it('renders list', () => {
-    expect(wrapper.find('.v-list--density-default').exists()).toBe(true)
-  })
-})
diff --git a/frontend/src/components/vuetify/Molecules/SearchField.stories.ts b/frontend/src/components/vuetify/Molecules/SearchField.stories.ts
deleted file mode 100644
index b59cb6b67f..0000000000
--- a/frontend/src/components/vuetify/Molecules/SearchField.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-
-import { Meta, StoryFn } from '@storybook/vue3'
-
-import SearchDrawerField from './SearchField.vue'
-
-export default {
-  title: 'Molecules/SearchField',
-  component: SearchDrawerField,
-} as Meta<typeof SearchDrawerField>
-
-const Template: StoryFn<typeof SearchDrawerField> = (args) => ({
-  components: { SearchDrawerField },
-  setup() {
-    return { args }
-  },
-  template: '<SearchDrawerField v-bind="args" />',
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Search',
-  prependInnerIcon: 'mdi-tune',
-}
diff --git a/frontend/src/components/vuetify/Molecules/SearchField.test.ts b/frontend/src/components/vuetify/Molecules/SearchField.test.ts
deleted file mode 100644
index 15f051e19d..0000000000
--- a/frontend/src/components/vuetify/Molecules/SearchField.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { h } from 'vue'
-import { VApp } from 'vuetify/components'
-
-import SearchField from './SearchField.vue'
-
-describe('SearchField', () => {
-  const Wrapper = () => {
-    return mount(VApp, {
-      slots: {
-        default: h(SearchField),
-      },
-    })
-  }
-
-  let wrapper: ReturnType<typeof Wrapper>
-
-  beforeEach(() => {
-    wrapper = Wrapper()
-  })
-
-  it('renders', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-})
diff --git a/frontend/src/components/vuetify/Molecules/SearchField.vue b/frontend/src/components/vuetify/Molecules/SearchField.vue
deleted file mode 100644
index 5587ce848b..0000000000
--- a/frontend/src/components/vuetify/Molecules/SearchField.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <v-text-field
-    v-model="internalValue"
-    :label="label"
-    :prepend-inner-icon="prependInnerIcon"
-    clearable
-    :flat="flat"
-    rounded
-    :variant="variant"
-    class="mx-4 mt-4 search-drawer"
-  ></v-text-field>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    default: 'Search',
-  },
-  prependInnerIcon: {
-    type: String,
-    default: 'mdi-tune',
-  },
-  clearable: {
-    type: Boolean,
-    default: true,
-  },
-  density: {
-    type: String as () => 'compact' | 'comfortable' | 'default' | 'prominent',
-    default: 'comfortable',
-  },
-  flat: {
-    type: Boolean,
-    default: false,
-  },
-  rounded: {
-    type: Boolean,
-    default: true,
-  },
-  variant: {
-    type: String as () => 'solo' | 'outlined' | 'filled' | 'underlined',
-    default: 'solo',
-  },
-})
-const emits = defineEmits(['update:modelValue'])
-const internalValue = ref(props.modelValue)
-watch(internalValue, (newValue) => {
-  emits('update:modelValue', newValue)
-})
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    internalValue.value = newValue
-  },
-)
-</script>
-
-<style scoped>
-.search-drawer {
-  border-radius: 25px;
-}
-</style>
diff --git a/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.vue b/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.vue
deleted file mode 100644
index c7c0740b3b..0000000000
--- a/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <v-navigation-drawer
-    :model-value="drawer"
-    :location="location"
-    width="auto"
-    class="menu-drawer-top"
-    @update:model-value="updateDrawer"
-  >
-    <!--
-    <SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    ></SearchField>
-    -->
-    <v-list>
-      <div class="mx-4">{{ $t('menu.roomList') }}</div>
-      <ListElement :items="items" />
-    </v-list>
-  </v-navigation-drawer>
-</template>
-
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-// import { VAvatar, VIcon, VImg } from 'vuetify/components'
-
-import ListElement from '#components/vuetify/Atoms/ListElement.vue'
-// import SearchField from '#components/vuetify/Molecules/SearchField.vue'
-import { useRoomsStore } from '#stores/roomsStore'
-
-const roomsStore = useRoomsStore()
-
-const { rooms: items } = storeToRefs(roomsStore)
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const props = defineProps({
-  drawer: {
-    type: Boolean,
-    required: true,
-  },
-  location: {
-    type: String as () => 'right' | 'bottom' | 'left' | 'end' | 'top' | 'start' | undefined,
-    required: false,
-    default: 'right',
-  },
-})
-
-const emits = defineEmits(['update:drawer'])
-
-/*
-    const search = ref('')
-
-    const filteredItems = computed(() => {
-    if (!search.value) {
-    return items
-    }
-    return items.filter((item) => item.title.toLowerCase().includes(search.value.toLowerCase()))
-    })
-  */
-
-const updateDrawer = (value: boolean) => {
-  emits('update:drawer', value)
-}
-</script>
-<style scoped>
-.menu-drawer-top {
-  margin-top: 74px;
-}
-</style>
diff --git a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
index 8b014f04cd..9c519632ec 100644
--- a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
+++ b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
@@ -756,8 +756,8 @@ exports[`DefaultLayout > renders 1`] = `
       </div>
       
       <nav
-        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-        data-v-3308ee86=""
+        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+        data-v-cf2c9067=""
         style="right: 0px; z-index: 1006; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
       >
         <!---->
@@ -766,30 +766,178 @@ exports[`DefaultLayout > renders 1`] = `
           class="v-navigation-drawer__content"
         >
           
-          <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+          <div
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+            data-v-cf2c9067=""
+          >
+            <!---->
+            <div
+              class="v-input__control"
+            >
+              
+              <div
+                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+              >
+                <div
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
+                >
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="v-progress-linear v-theme--light v-locale--is-ltr"
+                    role="progressbar"
+                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="width: 100%;"
+                    />
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div
+                        class="v-progress-linear__indeterminate"
+                      >
+                        
+                        <div
+                          class="v-progress-linear__indeterminate long"
+                        />
+                        <div
+                          class="v-progress-linear__indeterminate short"
+                        />
+                        
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                </div>
+                <div
+                  class="v-field__prepend-inner"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                  <!---->
+                </div>
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
+                >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-3"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  <label
+                    class="v-label v-field-label"
+                    for="input-3"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  
+                  
+                  <!---->
+                  <input
+                    aria-describedby="input-3-messages"
+                    class="v-field__input"
+                    id="input-3"
+                    size="1"
+                    type="text"
+                  />
+                  <!---->
+                  
+                  
+                </div>
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="expand-x-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-field__clearable"
+                    style="display: none;"
+                  >
+                    
+                    <i
+                      aria-hidden="false"
+                      aria-label="$vuetify.input.clear"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                      role="button"
+                      tabindex="0"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <div
+                  class="v-field__append-inner"
+                >
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="v-field__outline"
+                >
+                  <!---->
+                  <!---->
+                </div>
+              </div>
+              
+            </div>
+            <!---->
+            <div
+              class="v-input__details"
+            >
+              <transition-group-stub
+                appear="false"
+                aria-live="polite"
+                class="v-messages"
+                css="true"
+                id="input-3-messages"
+                name="slide-y-transition"
+                persisted="false"
+                role="alert"
+                tag="div"
+              >
+                <!---->
+              </transition-group-stub>
+              <!---->
+            </div>
+          </div>
           <div
             class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-            data-v-3308ee86=""
+            data-v-cf2c9067=""
             role="listbox"
             tabindex="0"
           >
             
-            <div
+            <h2
               class="mx-4"
-              data-v-3308ee86=""
+              data-v-cf2c9067=""
             >
-              $t('menu.roomList')
-            </div>
+              $t('tablesDrawer.header')
+            </h2>
             <div
               class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-              data-v-3308ee86=""
-              data-v-fd6c8fbc=""
+              data-v-cf2c9067=""
+              data-v-de37061b=""
               style="width: 400px;"
             >
               <!---->
@@ -836,7 +984,7 @@ exports[`DefaultLayout > renders 1`] = `
               
               <div
                 class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-fd6c8fbc=""
+                data-v-de37061b=""
                 role="listbox"
                 tabindex="0"
               >
@@ -895,8 +1043,8 @@ exports[`DefaultLayout > renders 1`] = `
       >
         
         <nav
-          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-          data-v-3308ee86=""
+          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+          data-v-cf2c9067=""
           style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
         >
           <!---->
@@ -905,30 +1053,178 @@ exports[`DefaultLayout > renders 1`] = `
             class="v-navigation-drawer__content"
           >
             
-            <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+            <div
+              class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+              data-v-cf2c9067=""
+            >
+              <!---->
+              <div
+                class="v-input__control"
+              >
+                
+                <div
+                  class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+                >
+                  <div
+                    class="v-field__overlay"
+                  />
+                  <div
+                    class="v-field__loader"
+                  >
+                    <div
+                      aria-hidden="true"
+                      aria-valuemax="100"
+                      aria-valuemin="0"
+                      class="v-progress-linear v-theme--light v-locale--is-ltr"
+                      role="progressbar"
+                      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                    >
+                      <!---->
+                      <div
+                        class="v-progress-linear__background"
+                        style="width: 100%;"
+                      />
+                      <transition-stub
+                        appear="false"
+                        css="true"
+                        name="fade-transition"
+                        persisted="false"
+                      >
+                        <div
+                          class="v-progress-linear__indeterminate"
+                        >
+                          
+                          <div
+                            class="v-progress-linear__indeterminate long"
+                          />
+                          <div
+                            class="v-progress-linear__indeterminate short"
+                          />
+                          
+                        </div>
+                      </transition-stub>
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="v-field__prepend-inner"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                    <!---->
+                  </div>
+                  <div
+                    class="v-field__field"
+                    data-no-activator=""
+                  >
+                    <label
+                      aria-hidden="true"
+                      class="v-label v-field-label v-field-label--floating"
+                      for="input-6"
+                    >
+                      <!---->
+                      
+                      $t('tablesDrawer.searchPlaceholder')
+                      
+                    </label>
+                    <label
+                      class="v-label v-field-label"
+                      for="input-6"
+                    >
+                      <!---->
+                      
+                      $t('tablesDrawer.searchPlaceholder')
+                      
+                    </label>
+                    
+                    
+                    <!---->
+                    <input
+                      aria-describedby="input-6-messages"
+                      class="v-field__input"
+                      id="input-6"
+                      size="1"
+                      type="text"
+                    />
+                    <!---->
+                    
+                    
+                  </div>
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="expand-x-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-field__clearable"
+                      style="display: none;"
+                    >
+                      
+                      <i
+                        aria-hidden="false"
+                        aria-label="$vuetify.input.clear"
+                        class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                        role="button"
+                        tabindex="0"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <div
+                    class="v-field__append-inner"
+                  >
+                    <!---->
+                    <!---->
+                  </div>
+                  <div
+                    class="v-field__outline"
+                  >
+                    <!---->
+                    <!---->
+                  </div>
+                </div>
+                
+              </div>
+              <!---->
+              <div
+                class="v-input__details"
+              >
+                <transition-group-stub
+                  appear="false"
+                  aria-live="polite"
+                  class="v-messages"
+                  css="true"
+                  id="input-6-messages"
+                  name="slide-y-transition"
+                  persisted="false"
+                  role="alert"
+                  tag="div"
+                >
+                  <!---->
+                </transition-group-stub>
+                <!---->
+              </div>
+            </div>
             <div
               class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-              data-v-3308ee86=""
+              data-v-cf2c9067=""
               role="listbox"
               tabindex="0"
             >
               
-              <div
+              <h2
                 class="mx-4"
-                data-v-3308ee86=""
+                data-v-cf2c9067=""
               >
-                $t('menu.roomList')
-              </div>
+                $t('tablesDrawer.header')
+              </h2>
               <div
                 class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-                data-v-3308ee86=""
-                data-v-fd6c8fbc=""
+                data-v-cf2c9067=""
+                data-v-de37061b=""
                 style="width: 400px;"
               >
                 <!---->
@@ -975,7 +1271,7 @@ exports[`DefaultLayout > renders 1`] = `
                 
                 <div
                   class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                  data-v-fd6c8fbc=""
+                  data-v-de37061b=""
                   role="listbox"
                   tabindex="0"
                 >
@@ -1545,7 +1841,7 @@ exports[`DefaultLayout > renders 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
-          aria-owns="v-menu-4"
+          aria-owns="v-menu-8"
           class="user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
           data-v-607bdd70=""
           targetref="[object Object]"
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 68ae14116d..77774c2fc9 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -1,4 +1,9 @@
 {
+  "$vuetify": {
+    "input:": {
+      "clear": "Löschen",
+    },
+  },
   "auth": {
     "content": "Logge ein...",
     "signin": "Anmeldung",
@@ -31,7 +36,6 @@
   "menu": {
     "cockpit": "Cockpit",
     "mall": "Mall",
-    "roomList": "Offene Räume",
     "theme": {
       "dark": "Dunkel",
       "light": "Hell"
@@ -46,5 +50,9 @@
   },
   "rooms": {
     "participantCount": "{count} Teilnehmer"
+  },
+  "tablesDrawer": {
+    "header": "Offene Tische",
+    "searchPlaceholder": "Offene Tische, Teilnehmer"
   }
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index af515bf26a..0fe3cefde9 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -1,4 +1,9 @@
 {
+  "$vuetify": {
+    "input:": {
+      "clear": "Clear",
+    },
+  },
   "auth": {
     "content": "Logging in...",
     "signin": "Signing In",
@@ -31,7 +36,6 @@
   "menu": {
     "cockpit": "Cockpit",
     "mall": "Mall",
-    "roomList": "Open rooms",
     "theme": {
       "dark": "Dark",
       "light": "Light"
@@ -46,5 +50,9 @@
   },
   "rooms": {
     "participantCount": "{count} participants"
+  },
+  "tablesDrawer": {
+    "header": "Open Tables",
+    "searchPlaceholder": "Open tables, attendees"
   }
 }
diff --git a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
index d5ca6ab29a..fced555fce 100644
--- a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
@@ -756,8 +756,8 @@ exports[`IndexPage > without apollo error > renders 1`] = `
       </div>
       
       <nav
-        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-        data-v-3308ee86=""
+        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+        data-v-cf2c9067=""
         style="right: 0px; z-index: 1006; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
       >
         <!---->
@@ -766,30 +766,178 @@ exports[`IndexPage > without apollo error > renders 1`] = `
           class="v-navigation-drawer__content"
         >
           
-          <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+          <div
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+            data-v-cf2c9067=""
+          >
+            <!---->
+            <div
+              class="v-input__control"
+            >
+              
+              <div
+                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+              >
+                <div
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
+                >
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="v-progress-linear v-theme--light v-locale--is-ltr"
+                    role="progressbar"
+                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="width: 100%;"
+                    />
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div
+                        class="v-progress-linear__indeterminate"
+                      >
+                        
+                        <div
+                          class="v-progress-linear__indeterminate long"
+                        />
+                        <div
+                          class="v-progress-linear__indeterminate short"
+                        />
+                        
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                </div>
+                <div
+                  class="v-field__prepend-inner"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                  <!---->
+                </div>
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
+                >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-3"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  <label
+                    class="v-label v-field-label"
+                    for="input-3"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  
+                  
+                  <!---->
+                  <input
+                    aria-describedby="input-3-messages"
+                    class="v-field__input"
+                    id="input-3"
+                    size="1"
+                    type="text"
+                  />
+                  <!---->
+                  
+                  
+                </div>
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="expand-x-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-field__clearable"
+                    style="display: none;"
+                  >
+                    
+                    <i
+                      aria-hidden="false"
+                      aria-label="$vuetify.input.clear"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                      role="button"
+                      tabindex="0"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <div
+                  class="v-field__append-inner"
+                >
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="v-field__outline"
+                >
+                  <!---->
+                  <!---->
+                </div>
+              </div>
+              
+            </div>
+            <!---->
+            <div
+              class="v-input__details"
+            >
+              <transition-group-stub
+                appear="false"
+                aria-live="polite"
+                class="v-messages"
+                css="true"
+                id="input-3-messages"
+                name="slide-y-transition"
+                persisted="false"
+                role="alert"
+                tag="div"
+              >
+                <!---->
+              </transition-group-stub>
+              <!---->
+            </div>
+          </div>
           <div
             class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-            data-v-3308ee86=""
+            data-v-cf2c9067=""
             role="listbox"
             tabindex="0"
           >
             
-            <div
+            <h2
               class="mx-4"
-              data-v-3308ee86=""
+              data-v-cf2c9067=""
             >
-              $t('menu.roomList')
-            </div>
+              $t('tablesDrawer.header')
+            </h2>
             <div
               class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-              data-v-3308ee86=""
-              data-v-fd6c8fbc=""
+              data-v-cf2c9067=""
+              data-v-de37061b=""
               style="width: 400px;"
             >
               <!---->
@@ -836,7 +984,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
               
               <div
                 class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-fd6c8fbc=""
+                data-v-de37061b=""
                 role="listbox"
                 tabindex="0"
               >
@@ -1527,8 +1675,8 @@ exports[`IndexPage > without apollo error > renders 1`] = `
       >
         
         <nav
-          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-          data-v-3308ee86=""
+          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+          data-v-cf2c9067=""
           style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
         >
           <!---->
@@ -1537,30 +1685,178 @@ exports[`IndexPage > without apollo error > renders 1`] = `
             class="v-navigation-drawer__content"
           >
             
-            <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+            <div
+              class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+              data-v-cf2c9067=""
+            >
+              <!---->
+              <div
+                class="v-input__control"
+              >
+                
+                <div
+                  class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+                >
+                  <div
+                    class="v-field__overlay"
+                  />
+                  <div
+                    class="v-field__loader"
+                  >
+                    <div
+                      aria-hidden="true"
+                      aria-valuemax="100"
+                      aria-valuemin="0"
+                      class="v-progress-linear v-theme--light v-locale--is-ltr"
+                      role="progressbar"
+                      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                    >
+                      <!---->
+                      <div
+                        class="v-progress-linear__background"
+                        style="width: 100%;"
+                      />
+                      <transition-stub
+                        appear="false"
+                        css="true"
+                        name="fade-transition"
+                        persisted="false"
+                      >
+                        <div
+                          class="v-progress-linear__indeterminate"
+                        >
+                          
+                          <div
+                            class="v-progress-linear__indeterminate long"
+                          />
+                          <div
+                            class="v-progress-linear__indeterminate short"
+                          />
+                          
+                        </div>
+                      </transition-stub>
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="v-field__prepend-inner"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                    <!---->
+                  </div>
+                  <div
+                    class="v-field__field"
+                    data-no-activator=""
+                  >
+                    <label
+                      aria-hidden="true"
+                      class="v-label v-field-label v-field-label--floating"
+                      for="input-6"
+                    >
+                      <!---->
+                      
+                      $t('tablesDrawer.searchPlaceholder')
+                      
+                    </label>
+                    <label
+                      class="v-label v-field-label"
+                      for="input-6"
+                    >
+                      <!---->
+                      
+                      $t('tablesDrawer.searchPlaceholder')
+                      
+                    </label>
+                    
+                    
+                    <!---->
+                    <input
+                      aria-describedby="input-6-messages"
+                      class="v-field__input"
+                      id="input-6"
+                      size="1"
+                      type="text"
+                    />
+                    <!---->
+                    
+                    
+                  </div>
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="expand-x-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-field__clearable"
+                      style="display: none;"
+                    >
+                      
+                      <i
+                        aria-hidden="false"
+                        aria-label="$vuetify.input.clear"
+                        class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                        role="button"
+                        tabindex="0"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <div
+                    class="v-field__append-inner"
+                  >
+                    <!---->
+                    <!---->
+                  </div>
+                  <div
+                    class="v-field__outline"
+                  >
+                    <!---->
+                    <!---->
+                  </div>
+                </div>
+                
+              </div>
+              <!---->
+              <div
+                class="v-input__details"
+              >
+                <transition-group-stub
+                  appear="false"
+                  aria-live="polite"
+                  class="v-messages"
+                  css="true"
+                  id="input-6-messages"
+                  name="slide-y-transition"
+                  persisted="false"
+                  role="alert"
+                  tag="div"
+                >
+                  <!---->
+                </transition-group-stub>
+                <!---->
+              </div>
+            </div>
             <div
               class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-              data-v-3308ee86=""
+              data-v-cf2c9067=""
               role="listbox"
               tabindex="0"
             >
               
-              <div
+              <h2
                 class="mx-4"
-                data-v-3308ee86=""
+                data-v-cf2c9067=""
               >
-                $t('menu.roomList')
-              </div>
+                $t('tablesDrawer.header')
+              </h2>
               <div
                 class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-                data-v-3308ee86=""
-                data-v-fd6c8fbc=""
+                data-v-cf2c9067=""
+                data-v-de37061b=""
                 style="width: 400px;"
               >
                 <!---->
@@ -1607,7 +1903,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
                 
                 <div
                   class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                  data-v-fd6c8fbc=""
+                  data-v-de37061b=""
                   role="listbox"
                   tabindex="0"
                 >
@@ -2177,7 +2473,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
-          aria-owns="v-menu-4"
+          aria-owns="v-menu-8"
           class="user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
           data-v-607bdd70=""
           targetref="[object Object]"
diff --git a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
index 011dd839ee..2d79ca5fcb 100644
--- a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
@@ -757,8 +757,8 @@ exports[`Room Page > renders 1`] = `
       </div>
       
       <nav
-        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-        data-v-3308ee86=""
+        class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+        data-v-cf2c9067=""
         style="right: 0px; z-index: 1006; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); top: 70px; bottom: 0px;"
       >
         <!---->
@@ -767,30 +767,178 @@ exports[`Room Page > renders 1`] = `
           class="v-navigation-drawer__content"
         >
           
-          <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+          <div
+            class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+            data-v-cf2c9067=""
+          >
+            <!---->
+            <div
+              class="v-input__control"
+            >
+              
+              <div
+                class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+              >
+                <div
+                  class="v-field__overlay"
+                />
+                <div
+                  class="v-field__loader"
+                >
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="v-progress-linear v-theme--light v-locale--is-ltr"
+                    role="progressbar"
+                    style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="width: 100%;"
+                    />
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div
+                        class="v-progress-linear__indeterminate"
+                      >
+                        
+                        <div
+                          class="v-progress-linear__indeterminate long"
+                        />
+                        <div
+                          class="v-progress-linear__indeterminate short"
+                        />
+                        
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                </div>
+                <div
+                  class="v-field__prepend-inner"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                  />
+                  <!---->
+                </div>
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
+                >
+                  <label
+                    aria-hidden="true"
+                    class="v-label v-field-label v-field-label--floating"
+                    for="input-3"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  <label
+                    class="v-label v-field-label"
+                    for="input-3"
+                  >
+                    <!---->
+                    
+                    $t('tablesDrawer.searchPlaceholder')
+                    
+                  </label>
+                  
+                  
+                  <!---->
+                  <input
+                    aria-describedby="input-3-messages"
+                    class="v-field__input"
+                    id="input-3"
+                    size="1"
+                    type="text"
+                  />
+                  <!---->
+                  
+                  
+                </div>
+                <transition-stub
+                  appear="false"
+                  css="true"
+                  name="expand-x-transition"
+                  persisted="false"
+                >
+                  <div
+                    class="v-field__clearable"
+                    style="display: none;"
+                  >
+                    
+                    <i
+                      aria-hidden="false"
+                      aria-label="$vuetify.input.clear"
+                      class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                      role="button"
+                      tabindex="0"
+                    />
+                    
+                  </div>
+                </transition-stub>
+                <div
+                  class="v-field__append-inner"
+                >
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="v-field__outline"
+                >
+                  <!---->
+                  <!---->
+                </div>
+              </div>
+              
+            </div>
+            <!---->
+            <div
+              class="v-input__details"
+            >
+              <transition-group-stub
+                appear="false"
+                aria-live="polite"
+                class="v-messages"
+                css="true"
+                id="input-3-messages"
+                name="slide-y-transition"
+                persisted="false"
+                role="alert"
+                tag="div"
+              >
+                <!---->
+              </transition-group-stub>
+              <!---->
+            </div>
+          </div>
           <div
             class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-            data-v-3308ee86=""
+            data-v-cf2c9067=""
             role="listbox"
             tabindex="0"
           >
             
-            <div
+            <h2
               class="mx-4"
-              data-v-3308ee86=""
+              data-v-cf2c9067=""
             >
-              $t('menu.roomList')
-            </div>
+              $t('tablesDrawer.header')
+            </h2>
             <div
               class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-              data-v-3308ee86=""
-              data-v-fd6c8fbc=""
+              data-v-cf2c9067=""
+              data-v-de37061b=""
               style="width: 400px;"
             >
               <!---->
@@ -837,7 +985,7 @@ exports[`Room Page > renders 1`] = `
               
               <div
                 class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                data-v-fd6c8fbc=""
+                data-v-de37061b=""
                 role="listbox"
                 tabindex="0"
               >
@@ -902,8 +1050,8 @@ exports[`Room Page > renders 1`] = `
       >
         
         <nav
-          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
-          data-v-3308ee86=""
+          class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
+          data-v-cf2c9067=""
           style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
         >
           <!---->
@@ -912,30 +1060,178 @@ exports[`Room Page > renders 1`] = `
             class="v-navigation-drawer__content"
           >
             
-            <!--
-    &lt;SearchField
-      v-model="search"
-      label="Open Tables, Jobs"
-      prepend-inner-icon="mdi-tune"
-    &gt;&lt;/SearchField&gt;
-    -->
+            <div
+              class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
+              data-v-cf2c9067=""
+            >
+              <!---->
+              <div
+                class="v-input__control"
+              >
+                
+                <div
+                  class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
+                >
+                  <div
+                    class="v-field__overlay"
+                  />
+                  <div
+                    class="v-field__loader"
+                  >
+                    <div
+                      aria-hidden="true"
+                      aria-valuemax="100"
+                      aria-valuemin="0"
+                      class="v-progress-linear v-theme--light v-locale--is-ltr"
+                      role="progressbar"
+                      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+                    >
+                      <!---->
+                      <div
+                        class="v-progress-linear__background"
+                        style="width: 100%;"
+                      />
+                      <transition-stub
+                        appear="false"
+                        css="true"
+                        name="fade-transition"
+                        persisted="false"
+                      >
+                        <div
+                          class="v-progress-linear__indeterminate"
+                        >
+                          
+                          <div
+                            class="v-progress-linear__indeterminate long"
+                          />
+                          <div
+                            class="v-progress-linear__indeterminate short"
+                          />
+                          
+                        </div>
+                      </transition-stub>
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="v-field__prepend-inner"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
+                    />
+                    <!---->
+                  </div>
+                  <div
+                    class="v-field__field"
+                    data-no-activator=""
+                  >
+                    <label
+                      aria-hidden="true"
+                      class="v-label v-field-label v-field-label--floating"
+                      for="input-6"
+                    >
+                      <!---->
+                      
+                      $t('tablesDrawer.searchPlaceholder')
+                      
+                    </label>
+                    <label
+                      class="v-label v-field-label"
+                      for="input-6"
+                    >
+                      <!---->
+                      
+                      $t('tablesDrawer.searchPlaceholder')
+                      
+                    </label>
+                    
+                    
+                    <!---->
+                    <input
+                      aria-describedby="input-6-messages"
+                      class="v-field__input"
+                      id="input-6"
+                      size="1"
+                      type="text"
+                    />
+                    <!---->
+                    
+                    
+                  </div>
+                  <transition-stub
+                    appear="false"
+                    css="true"
+                    name="expand-x-transition"
+                    persisted="false"
+                  >
+                    <div
+                      class="v-field__clearable"
+                      style="display: none;"
+                    >
+                      
+                      <i
+                        aria-hidden="false"
+                        aria-label="$vuetify.input.clear"
+                        class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
+                        role="button"
+                        tabindex="0"
+                      />
+                      
+                    </div>
+                  </transition-stub>
+                  <div
+                    class="v-field__append-inner"
+                  >
+                    <!---->
+                    <!---->
+                  </div>
+                  <div
+                    class="v-field__outline"
+                  >
+                    <!---->
+                    <!---->
+                  </div>
+                </div>
+                
+              </div>
+              <!---->
+              <div
+                class="v-input__details"
+              >
+                <transition-group-stub
+                  appear="false"
+                  aria-live="polite"
+                  class="v-messages"
+                  css="true"
+                  id="input-6-messages"
+                  name="slide-y-transition"
+                  persisted="false"
+                  role="alert"
+                  tag="div"
+                >
+                  <!---->
+                </transition-group-stub>
+                <!---->
+              </div>
+            </div>
             <div
               class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
-              data-v-3308ee86=""
+              data-v-cf2c9067=""
               role="listbox"
               tabindex="0"
             >
               
-              <div
+              <h2
                 class="mx-4"
-                data-v-3308ee86=""
+                data-v-cf2c9067=""
               >
-                $t('menu.roomList')
-              </div>
+                $t('tablesDrawer.header')
+              </h2>
               <div
                 class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
-                data-v-3308ee86=""
-                data-v-fd6c8fbc=""
+                data-v-cf2c9067=""
+                data-v-de37061b=""
                 style="width: 400px;"
               >
                 <!---->
@@ -982,7 +1278,7 @@ exports[`Room Page > renders 1`] = `
                 
                 <div
                   class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
-                  data-v-fd6c8fbc=""
+                  data-v-de37061b=""
                   role="listbox"
                   tabindex="0"
                 >
@@ -1552,7 +1848,7 @@ exports[`Room Page > renders 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="menu"
-          aria-owns="v-menu-4"
+          aria-owns="v-menu-8"
           class="user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
           data-v-607bdd70=""
           targetref="[object Object]"