diff --git a/web/package.json b/web/package.json
index c84007f..483b90c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,7 +23,7 @@
         "@regle/rules": "^1.16.1",
         "crypto-js": "^4.2.0",
         "slugify": "^1.6.6",
-        "vue": "3.5.15",
+        "vue": "^3.5.26",
         "vue-router": "4"
     },
     "devDependencies": {
@@ -31,7 +31,7 @@
         "@spiriit/vite-plugin-svg-spritemap": "^6.0.0",
         "@types/crypto-js": "^4.2.2",
         "@types/node": "^24.10.1",
-        "@vitejs/plugin-vue": "5.2.1",
+        "@vitejs/plugin-vue": "^6.0.0",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.6.0",
         "@vue/tsconfig": "^0.8.1",
@@ -42,7 +42,7 @@
         "oxlint": "^1.36.0",
         "prettier": "^3.7.4",
         "typescript": "~5.9.3",
-        "vite": "~7.0.0",
+        "vite": "^7.3.0",
         "vite-plugin-vue-devtools": "^8.0.5",
         "vue-tsc": "^3.2.1"
     }
diff --git a/web/src/components/chat/chat-message.vue b/web/src/components/chat/chat-message.vue
new file mode 100644
index 0000000..10682ec
--- /dev/null
+++ b/web/src/components/chat/chat-message.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = defineProps<{
+    username: string
+    image: string
+    timestamp: Date
+
+    text?: string
+    recommendation?: Object
+}>()
+</script>
+
+<template>
+    <div class="c-msg">
+        <img class="avatar" :src="props.image" :alt="`${props.username}'s Avatar'`" />
+        <div class="c-msg-body">
+            <div class="name-time-row">
+                <span class="name">{{ props.username }}</span>
+                <span class="time">{{
+                    props.timestamp.toLocaleTimeString('en-US', {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        hour12: false,
+                    })
+                }}</span>
+            </div>
+            <div v-if="text" class="c-msg-content text">
+                <span>{{ props.text }}</span>
+            </div>
+            <div v-else class="c-msg-content recommendation"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.c-msg {
+    display: flex;
+    flex-direction: row;
+
+    padding: 8px;
+    gap: 8px;
+
+    font-family: var(--s-font);
+}
+
+.avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+}
+
+.c-msg-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.text {
+    font-size: 13px;
+}
+
+.name-time-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+.name {
+    font-size: 16px;
+    font-weight: var(--s-weight-bold);
+}
+
+.time {
+    font-size: 12px;
+    color: var(--s-text-subtle);
+}
+</style>
diff --git a/web/src/components/chat/chat-text-field.vue b/web/src/components/chat/chat-text-field.vue
new file mode 100644
index 0000000..8ec3c5f
--- /dev/null
+++ b/web/src/components/chat/chat-text-field.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import SyncButton from '../button/sync-button.vue'
+
+const message = ref('')
+
+function send(e: Event) {
+    if (!message.value.trim()) return
+
+    emit('send', message.value)
+    message.value = ''
+    nextTick(() => autoResizeTextarea(e.target as HTMLInputElement))
+}
+
+function onInput(e: Event) {
+    autoResizeTextarea(e.target as HTMLInputElement)
+}
+
+function autoResizeTextarea(textarea: HTMLInputElement) {
+    textarea.style.height = 'auto'
+    textarea.style.height = `${textarea.scrollHeight}px`
+}
+
+const emit = defineEmits<{
+    (e: 'send', message: string): void
+}>()
+</script>
+
+<template>
+    <div class="c-text-field">
+        <div class="c-input">
+            <textarea
+                v-model="message"
+                class="c-textarea"
+                name="c-textarea"
+                placeholder="Write something..."
+                rows="1"
+                maxlength="300"
+                @keydown.enter.exact.prevent="send"
+                @input="onInput"
+            />
+            <SyncButton class="icon-gray" icon="smile" color="bgnb" bstyle="small" />
+        </div>
+        <span class="char-limit">{{ message.length }}/300</span>
+    </div>
+</template>
+
+<style scoped>
+.c-text-field {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    background-color: var(--s-background-alt);
+
+    border-top: 1px solid var(--s-border);
+
+    font-family: var(--s-font);
+}
+
+.c-input {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+}
+
+.c-textarea {
+    flex-grow: 1;
+    font-size: 14px;
+    line-height: 1.2;
+    max-height: 5lh;
+
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+
+.icon-gray {
+    flex-shrink: 1;
+}
+
+.char-limit {
+    padding: 0 5px 0 5px;
+    display: flex;
+    justify-content: flex-end;
+    font-size: 10px;
+}
+
+textarea {
+    border: none;
+    overflow-y: auto;
+    outline: none;
+    background: none;
+    padding: 0;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+
+    resize: none;
+}
+</style>
diff --git a/web/src/components/icon/icons.ts b/web/src/components/icon/icons.ts
index fe4d76c..882ea0e 100644
--- a/web/src/components/icon/icons.ts
+++ b/web/src/components/icon/icons.ts
@@ -7,6 +7,17 @@ export const ICONS = [
     'delete',
     'add',
     'arrow_down',
+    'promote',
+    'remove',
+    'smile',
+    'suggest',
+    'handle',
+    'playing',
+    'queue_add',
+    'play_arrow',
+    'close',
+    'warning',
+    'explosion',
 ] as const
 
 export type TIconName = (typeof ICONS)[number]
diff --git a/web/src/components/identity/user-identity.vue b/web/src/components/identity/user-identity.vue
index c4a3973..f5755dc 100644
--- a/web/src/components/identity/user-identity.vue
+++ b/web/src/components/identity/user-identity.vue
@@ -18,7 +18,7 @@ const emit = defineEmits<{
 
 <template>
     <div class="s-identity">
-        <img class="avatar" :src="props.image" :alt="`${username}'s Avatar`" />
+        <img class="avatar" :src="props.image" :alt="`${props.username}'s Avatar`" />
 
         <div class="midstack">
             <span class="title">{{ props.title }}</span>
diff --git a/web/src/components/input/sync-input.vue b/web/src/components/input/sync-input.vue
index d28f8c6..76630b6 100644
--- a/web/src/components/input/sync-input.vue
+++ b/web/src/components/input/sync-input.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
     err?: string
 
     required?: boolean
+    disabled?: boolean
     autocomplete?: string
 }>()
 
@@ -15,7 +16,7 @@ const model = defineModel<string>({ default: '' })
 </script>
 
 <template>
-    <div class="s-input" :class="{ 'has-error': err }">
+    <div class="s-input" :class="{ 'has-error': err, disabled }">
         <input
             class="s-input-input"
             v-model="model"
@@ -23,6 +24,7 @@ const model = defineModel<string>({ default: '' })
             :class="{ 'input-field-error': err }"
             :name="props.name"
             :id="props.name"
+            :disabled="props.disabled ?? false"
             :placeholder="props.placeholder ?? ' '"
             :required="props.required"
             :autocomplete="props.autocomplete"
@@ -60,6 +62,11 @@ const model = defineModel<string>({ default: '' })
     }
 }
 
+.s-input.disabled {
+    opacity: 0.8;
+    pointer-events: none;
+}
+
 .has-error {
     background-color: var(--s-error-light);
     border-color: var(--s-error-light);
diff --git a/web/src/components/prompt/confirmation-prompt.vue b/web/src/components/prompt/confirmation-prompt.vue
new file mode 100644
index 0000000..6219f74
--- /dev/null
+++ b/web/src/components/prompt/confirmation-prompt.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import SyncButton from '../button/sync-button.vue'
+
+const props = defineProps<{
+    title: string
+    primaryBtnText: string
+    isDanger: boolean
+
+    secondaryBtnText?: string
+}>()
+</script>
+
+<template>
+    <div class="prompt shadow-medium">
+        <div class="prompt-head">
+            <span class="title">{{ props.title }}</span>
+            <SyncButton @click="$emit('close')" icon="close" bstyle="none" color="bgnb" />
+        </div>
+        <div class="prompt-body"><slot></slot></div>
+        <div class="prompt-footer">
+            <SyncButton
+                v-if="props.secondaryBtnText"
+                @click="$emit(props.secondaryBtnText.toLowerCase())"
+                :text="props.secondaryBtnText"
+                bstyle="pill"
+                color="primary-lt"
+            />
+            <SyncButton
+                @click="$emit(props.primaryBtnText.toLowerCase())"
+                :text="props.primaryBtnText"
+                bstyle="pill"
+                :color="props.isDanger ? 'danger-lt' : 'primary-lt'"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.prompt {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 374px;
+    padding: 16px;
+    gap: 16px;
+
+    border: 1px solid var(--s-border);
+    border-radius: 16px;
+    box-sizing: border-box;
+}
+
+.prompt-head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.title {
+    font-size: 24px;
+    font-weight: var(--s-weight-bold);
+    color: var(--s-primary);
+}
+
+.prompt-body {
+    font-size: 16px;
+}
+
+.prompt-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+}
+</style>
diff --git a/web/src/components/prompt/reconnecting-prompt.vue b/web/src/components/prompt/reconnecting-prompt.vue
new file mode 100644
index 0000000..2cfd930
--- /dev/null
+++ b/web/src/components/prompt/reconnecting-prompt.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+function formattedTime(timeLeft: number) {
+    const minutes = Math.floor(timeLeft / 60)
+    const seconds = timeLeft % 60
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+}
+
+// TODO: props
+</script>
+
+<template>
+    <div class="r-prompt shadow-medium">
+        <span style="font-size: 20px; font-weight: var(--s-weight-bold)">Reconnecting</span>
+        <span>{{ `WebSocket connection lost. Session death in ${formattedTime(13)}` }}</span>
+    </div>
+</template>
+
+<style scoped>
+.r-prompt {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+
+    width: 246px;
+
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    text-align: center;
+    font-size: 16px;
+    color: var(--s-background);
+    background-color: var(--s-error);
+
+    padding: 16px;
+    gap: 8px;
+
+    border-radius: 8px;
+}
+</style>
diff --git a/web/src/components/prompt/share-popup.vue b/web/src/components/prompt/share-popup.vue
new file mode 100644
index 0000000..e7d2c3e
--- /dev/null
+++ b/web/src/components/prompt/share-popup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+<template><span class="popup shadow-medium">Link copied</span></template>
+<style scoped>
+.popup {
+    position: absolute;
+
+    color: var(--s-background);
+    background-color: var(--s-primary-dark);
+
+    text-align: center;
+
+    font-size: 12px;
+    padding: 8px;
+
+    border-radius: 6px;
+}
+</style>
diff --git a/web/src/components/room/room-settings.vue b/web/src/components/room/room-settings.vue
new file mode 100644
index 0000000..5248903
--- /dev/null
+++ b/web/src/components/room/room-settings.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyncInput from '../input/sync-input.vue'
+import SyncButton from '../button/sync-button.vue'
+
+const props = defineProps<{
+    roomName: string
+    roomId: string
+}>()
+
+// frys in the bag solution
+const roomNameModel = ref(props.roomName)
+const roomIdModel = ref(props.roomId)
+</script>
+
+<template>
+    <div class="r-settings shadow-medium">
+        <div class="r-settings-head">
+            <span class="r-settings-title">Room settings</span>
+            <SyncButton @click="$emit('close')" icon="close" color="bgnb" bstyle="none" />
+        </div>
+        <div class="r-settings-body">
+            <span class="general-zone-title">General</span>
+            <SyncInput v-model="roomNameModel" name="room-name" label="Room Name" />
+            <SyncInput v-model="roomIdModel" name="room-id" label="Room ID" :disabled="true" />
+            <hr class="s-separator" />
+            <div class="danger-zone-title">
+                <svg width="20" height="20" class="warning-icon">
+                    <use :href="`/__spritemap#sprite-warning`" />
+                </svg>
+                <span>Danger zone</span>
+            </div>
+            <SyncButton
+                class="icon-danger"
+                text="Kick users"
+                icon="remove"
+                color="background"
+                bstyle="small"
+                @click="$emit('kickAll')"
+            />
+            <SyncButton
+                class="icon-danger"
+                text='"Nuke" room'
+                icon="explosion"
+                color="background"
+                bstyle="small"
+                @click="$emit('nuke')"
+            />
+        </div>
+        <div class="r-settings-footer">
+            <SyncButton @click="$emit('discard')" text="Discard" bstyle="pill" color="primary-lt" />
+            <SyncButton @click="$emit('save')" text="Save" bstyle="pill" color="primary-lt" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.r-settings {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 400px;
+    padding: 16px;
+    gap: 16px;
+
+    border: 1px solid var(--s-border);
+    border-radius: 16px;
+
+    font-family: var(--s-font);
+}
+
+.r-settings-head {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    & :deep(svg) {
+        fill: var(--s-text-subtle) !important;
+    }
+}
+
+.r-settings-title {
+    font-size: 24px;
+    font-weight: var(--s-weight-bold);
+    color: var(--s-primary);
+}
+
+.r-settings-body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.general-zone-title {
+    font-size: 20px;
+    font-weight: var(--s-weight-bold);
+}
+
+.danger-zone-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    font-weight: var(--s-weight-bold);
+
+    font-size: 20px;
+    color: var(--s-error-dark);
+    & :deep(svg) {
+        fill: var(--s-error-dark) !important;
+    }
+}
+
+.icon-danger :deep(svg) {
+    fill: var(--s-error) !important;
+}
+
+.r-settings-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+}
+</style>
diff --git a/web/src/components/user/user-context-menu.vue b/web/src/components/user/user-context-menu.vue
new file mode 100644
index 0000000..c57b848
--- /dev/null
+++ b/web/src/components/user/user-context-menu.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import SyncButton from '../button/sync-button.vue'
+import UserLabel from './user-label.vue'
+
+const props = defineProps<{
+    username: string
+    isAdmin: boolean
+
+    timeConnected?: number
+    ping?: number
+    error?: number
+    buffer?: number
+}>()
+</script>
+
+<template>
+    <div class="user-context-menu shadow-high">
+        <UserLabel :username="props.username" :is-admin="props.isAdmin" :is-context-m="true" />
+        <hr class="s-separator" />
+        <div class="s-status">
+            <span class="t-bold">Sync Status</span>
+            <div class="u-connected">
+                <span>Connected:</span>
+                <span>{{ props.timeConnected ?? 'NaN' }}</span>
+            </div>
+            <div class="u-stats">
+                <div class="ping stat">
+                    <span class="t-bold">Ping</span>
+                    <span>{{ props.ping ?? 'NaN' }}</span>
+                </div>
+                <div class="error stat">
+                    <span class="t-bold">Error</span>
+                    <span>{{ props.error ?? 'NaN' }}</span>
+                </div>
+                <div class="buffer stat">
+                    <span class="t-bold">Buffer</span>
+                    <span>{{ props.buffer ?? 'NaN' }}</span>
+                </div>
+            </div>
+        </div>
+        <hr class="s-separator" />
+        <div class="admin-actions">
+            <SyncButton
+                @click="$emit('promote')"
+                class="icon-gold"
+                text="Promote"
+                icon="promote"
+                bstyle="small"
+                color="background"
+            />
+            <SyncButton
+                @click="$emit('remove')"
+                class="icon-red"
+                text="Remove"
+                icon="remove"
+                bstyle="small"
+                color="background"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.user-context-menu {
+    position: absolute;
+    min-width: 289px;
+
+    display: flex;
+    flex-direction: column;
+
+    font-family: var(--s-font);
+
+    padding: 4px 10px 4px 10px;
+    border: 1px solid var(--s-border);
+    border-radius: 16px;
+
+    box-sizing: border-box;
+
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.s-status {
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.u-connected {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.u-stats {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+}
+
+.stat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.t-bold {
+    font-weight: var(--s-weight-bold);
+}
+
+.admin-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    & > * {
+        flex: 1;
+    }
+}
+
+.icon-gold :deep(svg) {
+    fill: var(--s-gold) !important;
+}
+.icon-red :deep(svg) {
+    fill: var(--s-error) !important;
+}
+</style>
diff --git a/web/src/components/user/user-label.vue b/web/src/components/user/user-label.vue
new file mode 100644
index 0000000..4492c5c
--- /dev/null
+++ b/web/src/components/user/user-label.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const props = defineProps<{
+    username: string
+    isAdmin: boolean
+    isContextM: boolean
+    // position: {x: number, y: number}
+    // adminAction: boolean
+
+    // timeConnected?: number
+    // ping?: number
+    // error?: number
+    // buffer?: number
+}>()
+
+// const emits = defineEmits<{
+//     (e: 'promote'): void
+//     (e: 'remove'): void
+// }>()
+</script>
+
+<template>
+    <div class="user-label" :class="[{ 'label-container shadow-high': !isContextM }]">
+        <span class="username">{{ props.username }}</span>
+        <span class="role">{{ props.isAdmin ? 'Admin' : 'User' }}</span>
+    </div>
+</template>
+
+<style scoped>
+.user-label {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--s-font);
+}
+
+.label-container {
+    position: absolute;
+    min-width: 146px;
+
+    padding: 4px 8px 4px 8px;
+    border: 1px solid var(--s-border);
+    border-radius: 8px;
+
+    box-sizing: border-box;
+
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.username {
+    font-size: 20px;
+    font-weight: var(--s-weight-bold);
+}
+
+.role {
+    font-size: 16px;
+    color: var(--s-text-subtle);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/web/src/components/user/user-room.vue b/web/src/components/user/user-room.vue
new file mode 100644
index 0000000..10ce829
--- /dev/null
+++ b/web/src/components/user/user-room.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps<{
+    username: string
+    image: string
+    isSelf: boolean
+    isOnline: boolean
+}>()
+</script>
+
+<template>
+    <img
+        class="avatar"
+        :class="[{ self: props.isSelf }, { offline: !props.isOnline }]"
+        :src="props.image"
+        :alt="`${props.username}'s Avatar'`"
+        @click="$emit('select')"
+    />
+</template>
+
+<style scoped>
+.avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+}
+
+.self {
+    border-color: var(--s-primary);
+}
+
+.offline {
+    opacity: 0.5;
+}
+</style>
diff --git a/web/src/icons/close.svg b/web/src/icons/close.svg
new file mode 100644
index 0000000..d0754ee
--- /dev/null
+++ b/web/src/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/delete.svg b/web/src/icons/delete.svg
index 3064115..4821202 100644
--- a/web/src/icons/delete.svg
+++ b/web/src/icons/delete.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/explosion.svg b/web/src/icons/explosion.svg
new file mode 100644
index 0000000..f1cceb2
--- /dev/null
+++ b/web/src/icons/explosion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="m421-340 31 30q12 12 28 12t28-12l31-30h41q17 0 28.5-11.5T620-380v-41l30-31q12-12 12-28t-12-28l-30-31v-41q0-17-11.5-28.5T580-620h-41l-38-37q-9-9-21-9t-21 9l-38 37h-41q-17 0-28.5 11.5T340-580v41l-30 31q-12 12-12 28t12 28l30 31v41q0 17 11.5 28.5T380-340h41Zm-75 180H240q-33 0-56.5-23.5T160-240v-106l-77-78q-11-12-17-26.5T60-480q0-15 6-29.5T83-536l77-78v-106q0-33 23.5-56.5T240-800h106l78-77q12-11 26.5-17t29.5-6q15 0 29.5 6t26.5 17l78 77h106q33 0 56.5 23.5T800-720v106l77 78q11 12 17 26.5t6 29.5q0 15-6 29.5T877-424l-77 78v106q0 33-23.5 56.5T720-160H614l-78 77q-12 11-26.5 17T480-60q-15 0-29.5-6T424-83l-78-77Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/handle.svg b/web/src/icons/handle.svg
new file mode 100644
index 0000000..657c55b
--- /dev/null
+++ b/web/src/icons/handle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-360v-80h640v80H160Zm0-160v-80h640v80H160Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/play_arrow.svg b/web/src/icons/play_arrow.svg
new file mode 100644
index 0000000..184848c
--- /dev/null
+++ b/web/src/icons/play_arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" ><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/playing.svg b/web/src/icons/playing.svg
new file mode 100644
index 0000000..cd58a4e
--- /dev/null
+++ b/web/src/icons/playing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/promote.svg b/web/src/icons/promote.svg
new file mode 100644
index 0000000..c6e3492
--- /dev/null
+++ b/web/src/icons/promote.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99994 20.9999H18.9999M11.5619 3.26592C11.6051 3.18753 11.6685 3.12216 11.7456 3.07663C11.8226 3.0311 11.9104 3.00708 11.9999 3.00708C12.0894 3.00708 12.1773 3.0311 12.2543 3.07663C12.3314 3.12216 12.3948 3.18753 12.4379 3.26592L15.3899 8.86992C15.4603 8.99969 15.5586 9.11225 15.6776 9.19954C15.7967 9.28683 15.9336 9.34668 16.0785 9.37478C16.2235 9.40289 16.3728 9.39856 16.5159 9.3621C16.6589 9.32564 16.7921 9.25797 16.9059 9.16392L21.1829 5.49992C21.265 5.43315 21.3662 5.39414 21.4719 5.38853C21.5776 5.38291 21.6823 5.41097 21.771 5.46867C21.8598 5.52637 21.9279 5.61073 21.9656 5.70961C22.0033 5.8085 22.0087 5.9168 21.9809 6.01892L19.1469 16.2649C19.0891 16.4746 18.9645 16.6597 18.7919 16.7921C18.6194 16.9246 18.4084 16.9972 18.1909 16.9989H5.80994C5.59227 16.9974 5.38105 16.9249 5.20833 16.7924C5.03561 16.66 4.91083 16.4748 4.85294 16.2649L2.01994 6.01992C1.99219 5.9178 1.99756 5.8095 2.03528 5.71061C2.073 5.61173 2.14112 5.52737 2.22984 5.46967C2.31855 5.41197 2.42329 5.38391 2.52898 5.38953C2.63466 5.39514 2.73583 5.43415 2.81794 5.50092L7.09394 9.16492C7.20773 9.25897 7.34094 9.32664 7.484 9.3631C7.62705 9.39956 7.77641 9.40389 7.92134 9.37578C8.06626 9.34768 8.20317 9.28783 8.32223 9.20054C8.44129 9.11325 8.53954 9.00069 8.60994 8.87092L11.5619 3.26592Z" stroke="#E7D237" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/icons/queue_add.svg b/web/src/icons/queue_add.svg
new file mode 100644
index 0000000..6ca3886
--- /dev/null
+++ b/web/src/icons/queue_add.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M560-400q17 0 28.5-11.5T600-440v-80h80q17 0 28.5-11.5T720-560q0-17-11.5-28.5T680-600h-80v-80q0-17-11.5-28.5T560-720q-17 0-28.5 11.5T520-680v80h-80q-17 0-28.5 11.5T400-560q0 17 11.5 28.5T440-520h80v80q0 17 11.5 28.5T560-400ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-520q0-17 11.5-28.5T120-720q17 0 28.5 11.5T160-680v520h520q17 0 28.5 11.5T720-120q0 17-11.5 28.5T680-80H160Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/remove.svg b/web/src/icons/remove.svg
new file mode 100644
index 0000000..5f433ef
--- /dev/null
+++ b/web/src/icons/remove.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 10C10.0304 10 10.5391 9.78929 10.9142 9.41421C11.2893 9.03914 11.5 8.53043 11.5 8C11.5 7.46957 11.2893 6.96086 10.9142 6.58579C10.5391 6.21071 10.0304 6 9.5 6C8.96957 6 8.46086 6.21071 8.08579 6.58579C7.71071 6.96086 7.5 7.46957 7.5 8C7.5 8.53043 7.71071 9.03914 8.08579 9.41421C8.46086 9.78929 8.96957 10 9.5 10ZM9.5 12C10.5609 12 11.5783 11.5786 12.3284 10.8284C13.0786 10.0783 13.5 9.06087 13.5 8C13.5 6.93913 13.0786 5.92172 12.3284 5.17157C11.5783 4.42143 10.5609 4 9.5 4C8.43913 4 7.42172 4.42143 6.67157 5.17157C5.92143 5.92172 5.5 6.93913 5.5 8C5.5 9.06087 5.92143 10.0783 6.67157 10.8284C7.42172 11.5786 8.43913 12 9.5 12ZM16.293 9.293C16.4805 9.10553 16.7348 9.00021 17 9.00021C17.2652 9.00021 17.5195 9.10553 17.707 9.293L19 10.586L20.293 9.293C20.3852 9.19749 20.4956 9.12131 20.6176 9.0689C20.7396 9.01649 20.8708 8.9889 21.0036 8.98775C21.1364 8.9866 21.2681 9.0119 21.391 9.06218C21.5138 9.11246 21.6255 9.18671 21.7194 9.28061C21.8133 9.3745 21.8875 9.48615 21.9378 9.60905C21.9881 9.73194 22.0134 9.86362 22.0123 9.9964C22.0111 10.1292 21.9835 10.2604 21.9311 10.3824C21.8787 10.5044 21.8025 10.6148 21.707 10.707L20.414 12L21.707 13.293C21.8892 13.4816 21.99 13.7342 21.9877 13.9964C21.9854 14.2586 21.8802 14.5094 21.6948 14.6948C21.5094 14.8802 21.2586 14.9854 20.9964 14.9877C20.7342 14.99 20.4816 14.8892 20.293 14.707L19 13.414L17.707 14.707C17.5184 14.8892 17.2658 14.99 17.0036 14.9877C16.7414 14.9854 16.4906 14.8802 16.3052 14.6948C16.1198 14.5094 16.0146 14.2586 16.0123 13.9964C16.01 13.7342 16.1108 13.4816 16.293 13.293L17.586 12L16.293 10.707C16.1055 10.5195 16.0002 10.2652 16.0002 10C16.0002 9.73484 16.1055 9.48053 16.293 9.293ZM3.354 15.176C4.311 13.836 5.77 13 7.643 13H11.357C13.23 13 14.689 13.837 15.646 15.176C16.577 16.479 17 18.202 17 20C17 20.2652 16.8946 20.5196 16.7071 20.7071C16.5196 20.8946 16.2652 21 16 21C15.7348 21 15.4804 20.8946 15.2929 20.7071C15.1054 20.5196 15 20.2652 15 20C15 18.484 14.64 17.207 14.019 16.339C13.424 15.507 12.562 15 11.357 15H7.643C6.438 15 5.576 15.507 4.981 16.339C4.361 17.207 4 18.484 4 19.999C4 20.2642 3.89464 20.5186 3.70711 20.7061C3.51957 20.8936 3.26522 20.999 3 20.999C2.73478 20.999 2.48043 20.8936 2.29289 20.7061C2.10536 20.5186 2 20.2642 2 19.999C2 18.202 2.422 16.479 3.354 15.176Z" fill="#E92323"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 20C2 19.7348 2.10536 19.4804 2.29289 19.2929C2.48043 19.1054 2.73478 19 3 19H15.969C16.2342 19 16.4886 19.1054 16.6761 19.2929C16.8636 19.4804 16.969 19.7348 16.969 20C16.969 20.2652 16.8636 20.5196 16.6761 20.7071C16.4886 20.8946 16.2342 21 15.969 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20Z" fill="#E92323"/>
+</svg>
diff --git a/web/src/icons/smile.svg b/web/src/icons/smile.svg
new file mode 100644
index 0000000..00cd833
--- /dev/null
+++ b/web/src/icons/smile.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4C4C4C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14M9 9H9.01M15 9H15.01" stroke="#4C4C4C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/icons/suggest.svg b/web/src/icons/suggest.svg
new file mode 100644
index 0000000..78450ed
--- /dev/null
+++ b/web/src/icons/suggest.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="m400-400 240-160-240-160v320ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Z"/></svg>
\ No newline at end of file
diff --git a/web/src/icons/warning.svg b/web/src/icons/warning.svg
new file mode 100644
index 0000000..84c483b
--- /dev/null
+++ b/web/src/icons/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" ><path d="M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z"/></svg>
\ No newline at end of file
diff --git a/web/src/main.css b/web/src/main.css
index 7b5a6a0..cbd2991 100644
--- a/web/src/main.css
+++ b/web/src/main.css
@@ -58,3 +58,9 @@ body {
 .s-link {
     color: var(--s-primary);
 }
+.s-separator {
+    border: none;
+    height: 2px;
+    background: var(--s-border, rgba(0, 0, 0, 0.1));
+    margin: 8px 0;
+}
diff --git a/web/src/queue/media-card.vue b/web/src/queue/media-card.vue
new file mode 100644
index 0000000..6a9db4f
--- /dev/null
+++ b/web/src/queue/media-card.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import SyncButton from '../components/button/sync-button.vue'
+
+//placeholder interface
+export interface MediaBody {
+    iat: number
+
+    kind: 'videoFile'
+
+    title: string
+    source: string
+    thumbnail?: string
+    duration?: number
+
+    // hrib added
+    description?: string
+}
+
+const props = defineProps<{
+    media: MediaBody
+    isAdmin: boolean
+    inQueue: boolean
+    isSuggestion: boolean
+
+    alreadyPlayed?: boolean
+    playing?: boolean
+}>()
+</script>
+
+<template>
+    <div
+        class="media-card"
+        :class="[{ playing: props.playing }, { 'border-subtle': props.isSuggestion }]"
+    >
+        <div class="media-card-head">
+            <span class="title" :class="{ 'already-played': props.alreadyPlayed }">{{
+                props.media.title
+            }}</span>
+            <div class="actions">
+                <SyncButton
+                    v-if="props.isAdmin && props.inQueue"
+                    icon="delete"
+                    :color="props.playing ? 'white' : 'bgnb'"
+                    bstyle="none"
+                    @click="$emit('delete')"
+                />
+                <SyncButton
+                    v-if="!props.inQueue && !props.isSuggestion"
+                    icon="suggest"
+                    :color="props.playing ? 'white' : 'bgnb'"
+                    bstyle="none"
+                    @click="$emit('suggest')"
+                />
+                <SyncButton
+                    :class="{ playing: props.playing }"
+                    v-if="props.isAdmin"
+                    icon="play_arrow"
+                    color="bgnb"
+                    bstyle="none"
+                    @click="$emit('play')"
+                />
+                <SyncButton
+                    :class="{ playing: props.playing }"
+                    v-if="props.isAdmin && (props.inQueue || props.isSuggestion)"
+                    icon="queue_add"
+                    color="bgnb"
+                    bstyle="none"
+                    @click="$emit('addToQueue')"
+                />
+            </div>
+        </div>
+        <div class="media-card-body">
+            <div class="thumbnail" :class="{ 'already-played': props.alreadyPlayed }">
+                <img :src="props.media.thumbnail" :alt="`${props.media.title}'s Thumbnial'`" />
+                <span class="duration">20:20</span>
+            </div>
+            <span class="description" :class="{ 'already-played': props.alreadyPlayed }">{{
+                props.media.description
+            }}</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.media-card {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    gap: 6px;
+}
+
+.border-subtle {
+    border: 1px solid var(--s-border);
+    border-radius: 8px;
+}
+
+.playing {
+    background-color: var(--s-primary);
+    color: white;
+    & :deep(svg) {
+        fill: var(--s-background) !important;
+    }
+}
+
+.already-played {
+    color: var(--s-text-subtle);
+}
+
+.already-played img {
+    opacity: 0.8;
+}
+
+.media-card-head {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.title {
+    font-size: 16px;
+    font-weight: var(--s-weight-bold);
+}
+
+.actions {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 10px;
+    &:deep(svg) {
+        fill: var(--s-text-subtle);
+    }
+}
+
+.media-card-body {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.thumbnail {
+    max-width: 103px;
+    position: relative;
+}
+
+.thumbnail img {
+    max-width: inherit;
+    border-radius: 12px;
+}
+
+.duration {
+    font-size: 12px;
+    padding: 3px;
+    position: absolute;
+    color: var(--s-background);
+    bottom: 11px;
+    right: 8px;
+    background-color: rgba(0, 0, 0, 0.75);
+    border-radius: 4px;
+}
+</style>
diff --git a/web/src/views/RoomView.vue b/web/src/views/RoomView.vue
index 1293a44..609b9d3 100644
--- a/web/src/views/RoomView.vue
+++ b/web/src/views/RoomView.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import RoomSettings from '../components/room/room-settings.vue'
 
-const route = useRoute()
+// import { useRoute } from 'vue-router'
+
+// const route = useRoute()
 </script>
 
 <template>
-    <h1>Room {{ route.params.room }}</h1>
+    <!-- <UserRoom 
+    username="neki" 
+    image=" https://www.gravatar.com/avatar/09abd59eb5653a7183ba812b8261f48b" 
+    :is-self=true
+    :is-online=false 
+    @select="console.log('fetch data')" /> -->
+    <RoomSettings room-name="Balbal" room-id="roomid" />
 </template>