diff --git a/public/images/meet-icons/chat.svg b/public/images/meet-icons/chat.svg
new file mode 100644
index 0000000..f76b49c
--- /dev/null
+++ b/public/images/meet-icons/chat.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M20,0H4A4,4,0,0,0,0,4V16a4,4,0,0,0,4,4H6.9l4.451,3.763a1,1,0,0,0,1.292,0L17.1,20H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,16a2,2,0,0,1-2,2H17.1a2,2,0,0,0-1.291.473L12,21.69,8.193,18.473h0A2,2,0,0,0,6.9,18H4a2,2,0,0,1-2-2V4A2,2,0,0,1,4,2H20a2,2,0,0,1,2,2Z"/><path d="M7,7h5a1,1,0,0,0,0-2H7A1,1,0,0,0,7,7Z"/><path d="M17,9H7a1,1,0,0,0,0,2H17a1,1,0,0,0,0-2Z"/><path d="M17,13H7a1,1,0,0,0,0,2H17a1,1,0,0,0,0-2Z"/></svg>
diff --git a/public/images/meet-icons/close-breakout.svg b/public/images/meet-icons/close-breakout.svg
new file mode 100644
index 0000000..c028f2f
--- /dev/null
+++ b/public/images/meet-icons/close-breakout.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m9.5 2.5c0-1.381 1.119-2.5 2.5-2.5s2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5-2.5-1.119-2.5-2.5zm.5 6.5c0-.551.449-1 1-1h2c.551 0 1 .449 1 1v2h2v-2c0-1.654-1.346-3-3-3h-2c-1.654 0-3 1.346-3 3v2h2zm-7 0c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5 1.119 2.5 2.5 2.5zm3 9h3v6h-2v-4h-4c-1.654 0-3-1.346-3-3v-4c0-1.654 1.346-3 3-3s3 1.346 3 3zm-2 0v-5c0-.551-.449-1-1-1s-1 .449-1 1v4c0 .552.449 1 1 1zm17-9c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5 1.119 2.5 2.5 2.5zm3 4v4c0 1.654-1.346 3-3 3h-4v4h-2v-6h3v-5c0-1.654 1.346-3 3-3s3 1.346 3 3zm-2 0c0-.551-.449-1-1-1s-1 .449-1 1v5h1c.551 0 1-.448 1-1zm-6 0h-8v2h8zm-16 11h5v-2h-5zm19 0h5v-2h-5z"/></svg>
\ No newline at end of file
diff --git a/public/images/meet-icons/lock.svg b/public/images/meet-icons/lock.svg
new file mode 100644
index 0000000..0ee6026
--- /dev/null
+++ b/public/images/meet-icons/lock.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M19,8.424V7A7,7,0,0,0,5,7V8.424A5,5,0,0,0,2,13v6a5.006,5.006,0,0,0,5,5H17a5.006,5.006,0,0,0,5-5V13A5,5,0,0,0,19,8.424ZM7,7A5,5,0,0,1,17,7V8H7ZM20,19a3,3,0,0,1-3,3H7a3,3,0,0,1-3-3V13a3,3,0,0,1,3-3H17a3,3,0,0,1,3,3Z"/><path d="M12,14a1,1,0,0,0-1,1v2a1,1,0,0,0,2,0V15A1,1,0,0,0,12,14Z"/></svg>
diff --git a/public/images/meet-icons/react.svg b/public/images/meet-icons/react.svg
new file mode 100644
index 0000000..5562a9e
--- /dev/null
+++ b/public/images/meet-icons/react.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M17.5.917a6.4,6.4,0,0,0-5.5,3.3A6.4,6.4,0,0,0,6.5.917,6.8,6.8,0,0,0,0,7.967c0,6.775,10.956,14.6,11.422,14.932l.578.409.578-.409C13.044,22.569,24,14.742,24,7.967A6.8,6.8,0,0,0,17.5.917ZM12,20.846c-3.253-2.43-10-8.4-10-12.879a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,7.967h2a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,7.967C22,12.448,15.253,18.416,12,20.846Z"/></g></svg>
diff --git a/public/images/meet-icons/share.svg b/public/images/meet-icons/share.svg
new file mode 100644
index 0000000..a1b699f
--- /dev/null
+++ b/public/images/meet-icons/share.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="M18.13,14.346c-1.897,0-3.517,1.183-4.137,2.838-1.497-.346-3.334-.988-4.842-2.175,.698-.766,1.124-1.777,1.124-2.883,0-.986-.337-1.895-.904-2.623,1.568-1.158,3.445-1.76,4.91-2.071,.754,1.325,2.197,2.224,3.849,2.224,2.429,0,4.406-1.941,4.406-4.327s-1.977-4.327-4.406-4.327-4.406,1.941-4.406,4.327c0,.059,.002,.118,.004,.177-1.784,.394-4.079,1.174-5.964,2.715-.574-.27-1.217-.421-1.895-.421-2.429,0-4.406,1.941-4.406,4.327s1.977,4.327,4.406,4.327c.548,0,1.074-.099,1.559-.28,1.95,1.737,4.42,2.59,6.327,3.008,.256,2.148,2.121,3.82,4.375,3.82,2.429,0,4.406-1.941,4.406-4.327s-1.977-4.327-4.406-4.327Zm0-11.346c1.327,0,2.406,1.044,2.406,2.327s-1.079,2.327-2.406,2.327-2.406-1.044-2.406-2.327,1.079-2.327,2.406-2.327ZM3.464,12.125c0-1.283,1.079-2.327,2.406-2.327s2.406,1.044,2.406,2.327-1.079,2.327-2.406,2.327-2.406-1.044-2.406-2.327Zm14.667,8.875c-1.327,0-2.406-1.044-2.406-2.327s1.079-2.327,2.406-2.327,2.406,1.044,2.406,2.327-1.079,2.327-2.406,2.327Z"/>
+</svg>
diff --git a/public/images/meet-icons/start-breakout.svg b/public/images/meet-icons/start-breakout.svg
new file mode 100644
index 0000000..71f2517
--- /dev/null
+++ b/public/images/meet-icons/start-breakout.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m14 18.997c0 .552-.447 1-1 1h-1v3c0 .552-.448 1-1 1h-4c-.552 0-1-.444-1-.997s.448-1 1-1h3v-2.003h-5c-2.757 0-5-2.243-5-5v-8c0-2.757 2.243-4.997 5-4.997h6c.552 0 1 .445 1 .997s-.448 1-1 1h-6c-1.654 0-3 1.346-3 3v8c0 1.654 1.346 3.003 3 3.003h8c.553 0 1 .445 1 .997zm10-15.999v2.999c0 1.654-1.346 3-3 3h-2.852l-2.431 1.806c-.305.226-.712.26-1.049.089-.336-.17-.667-.576-.667-.952l-.002-6.94c.001-1.655 1.347-3 3.001-3h4c.801 0 1.555.31 2.121.876s.879 1.32.879 2.122zm-2 0c0-.267-.104-.519-.293-.708-.188-.188-.439-.292-.707-.292h-4c-.551 0-1 .45-1 1.001v5.101l1.221-.906c.173-.128.382-.194.597-.194h3.183c.552 0 1-.452 1-1.003v-2.999zm-17.936 11.65c-.193.517.069 1.093.586 1.286.517.195 1.094-.068 1.287-.586.302-.807 1.131-1.35 2.063-1.35s1.761.542 2.063 1.35c.192.522.783.78 1.287.586.518-.193.78-.769.586-1.286-.592-1.585-2.174-2.649-3.936-2.649s-3.344 1.065-3.936 2.649zm5.936-5.648c0-1.105-.895-2-2-2s-2 .895-2 2 .895 2 2 2 2-.895 2-2zm9 10c-2.339 0-4.381 1.539-4.966 3.742-.142.534.177 1.081.71 1.223.52.143 1.083-.171 1.224-.709.353-1.329 1.599-2.256 3.033-2.256s2.679.928 3.033 2.257c.143.533.693.85 1.224.709.534-.142.851-.69.71-1.223-.587-2.203-2.629-3.742-4.966-3.742zm0-1c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5zm0-2c.827 0 1.5-.673 1.5-1.5s-.673-1.5-1.5-1.5-1.5.673-1.5 1.5.673 1.5 1.5 1.5z"/></svg>
\ No newline at end of file
diff --git a/public/images/meet-icons/upload-file.svg b/public/images/meet-icons/upload-file.svg
index e2f7351..55a0bf3 100644
--- a/public/images/meet-icons/upload-file.svg
+++ b/public/images/meet-icons/upload-file.svg
@@ -1,4 +1,2 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
-  <path d="M10,22.5c0,.829-.671,1.5-1.5,1.5h-3c-3.033,0-5.5-2.467-5.5-5.5V5.5C0,2.467,2.467,0,5.5,0h6.343c1.469,0,2.85,.572,3.889,1.611l2.657,2.657c.815,.815,1.347,1.848,1.536,2.985,.136,.817-.425,1.739-1.425,1.739s-5.5,.008-5.5,.008c-1.105,0-2-.895-2-2V3H5.5c-1.378,0-2.5,1.122-2.5,2.5v13c0,1.378,1.122,2.5,2.5,2.5h3c.829,0,1.5,.671,1.5,1.5Zm14-5c0,3.59-2.91,6.5-6.5,6.5s-6.5-2.91-6.5-6.5,2.91-6.5,6.5-6.5,6.5,2.91,6.5,6.5Zm-2.752-1.154l-3.063-3.063c-.378-.378-.991-.378-1.369,0l-3.063,3.063c-.61,.61-.178,1.653,.685,1.653h1.563v2.501c0,.828,.671,1.5,1.5,1.5s1.5-.672,1.5-1.5v-2.501h1.563c.863,0,1.295-1.043,.685-1.653Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="m19.95,5.536l-3.485-3.485c-1.322-1.322-3.08-2.05-4.95-2.05h-4.515C4.243,0,2,2.243,2,5v14c0,2.757,2.243,5,5,5h10c2.757,0,5-2.243,5-5v-8.515c0-1.87-.728-3.627-2.05-4.95Zm-1.414,1.414c.318.318.587.671.805,1.05h-4.341c-.551,0-1-.449-1-1V2.659c.379.218.733.487,1.05.805l3.485,3.485Zm1.464,12.05c0,1.654-1.346,3-3,3H7c-1.654,0-3-1.346-3-3V5c0-1.654,1.346-3,3-3h4.515c.163,0,.325.008.485.023v4.977c0,1.654,1.346,3,3,3h4.977c.015.16.023.322.023.485v8.515Zm-4.293-4.519c.391.391.391,1.023,0,1.414-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-1.293-1.293v4.398c0,.552-.448,1-1,1s-1-.448-1-1v-4.398l-1.293,1.293c-.391.391-1.023.391-1.414,0s-.391-1.023,0-1.414l1.614-1.614c1.154-1.154,3.032-1.154,4.187,0l1.614,1.614Z"/></svg>
diff --git a/resources/js/meet-room.js b/resources/js/meet-room.js
index 642708c..bb84fa8 100644
--- a/resources/js/meet-room.js
+++ b/resources/js/meet-room.js
@@ -31,6 +31,9 @@ function meetRoom() {
         chatInput: '',
         shareOpen: false,
         shareCopied: false,
+        breakoutModalOpen: false,
+        breakoutCount: '4',
+        endMeetingConfirmOpen: false,
         joinUrl: '',
         passcode: '',
         roomTitle: '',
@@ -446,18 +449,54 @@ function meetRoom() {
 
         async createBreakouts() {
             if (!this.isHost || !this.config.breakoutsCreateUrl) return;
-            const count = parseInt(prompt('Number of breakout rooms?', '4') || '0', 10);
-            if (!count) return;
+            this.breakoutCount = '4';
+            this.breakoutModalOpen = true;
+            this.featuresOpen = false;
+        },
+
+        async submitBreakouts() {
+            if (!this.isHost || !this.config.breakoutsCreateUrl) return;
+
+            const count = parseInt(this.breakoutCount, 10);
+            if (!count || count < 1) return;
+
             await fetch(this.config.breakoutsCreateUrl, {
                 method: 'POST',
                 headers: this.headers(),
                 body: JSON.stringify({ count }),
             });
+
+            this.breakoutModalOpen = false;
         },
 
         async closeBreakouts() {
             if (!this.isHost || !this.config.breakoutsCloseUrl) return;
             await fetch(this.config.breakoutsCloseUrl, { method: 'POST', headers: this.headers() });
+            this.featuresOpen = false;
+        },
+
+        openUploadPicker() {
+            document.getElementById('meet-file-input')?.click();
+            this.featuresOpen = false;
+        },
+
+        async toggleRecordingFromMenu() {
+            await this.toggleRecording();
+            this.featuresOpen = false;
+        },
+
+        async toggleLockFromMenu() {
+            await this.toggleLock();
+            this.featuresOpen = false;
+        },
+
+        openEndMeetingConfirm() {
+            this.endMeetingConfirmOpen = true;
+        },
+
+        submitEndMeeting() {
+            document.getElementById('meet-end-form')?.requestSubmit();
+            this.endMeetingConfirmOpen = false;
         },
 
         async uploadFile(event) {
diff --git a/resources/views/components/meet/room/menu-item.blade.php b/resources/views/components/meet/room/menu-item.blade.php
new file mode 100644
index 0000000..cfc4db6
--- /dev/null
+++ b/resources/views/components/meet/room/menu-item.blade.php
@@ -0,0 +1,17 @@
+@props(['icon' => null, 'title', 'subtitle' => null])
+
+<button type="button" {{ $attributes->merge(['class' => 'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800']) }}>
+    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
+        @if ($icon)
+            @include('meet.room.partials.meet-icon', ['icon' => $icon, 'class' => 'h-5 w-5'])
+        @else
+            {{ $slot }}
+        @endif
+    </span>
+    <span class="min-w-0">
+        <span class="block font-medium">{{ $title }}</span>
+        @if ($subtitle)
+            <span class="block text-xs text-slate-400">{{ $subtitle }}</span>
+        @endif
+    </span>
+</button>
diff --git a/resources/views/meet/room/show.blade.php b/resources/views/meet/room/show.blade.php
index a2c0fbe..e655739 100644
--- a/resources/views/meet/room/show.blade.php
+++ b/resources/views/meet/room/show.blade.php
@@ -63,7 +63,7 @@
                 <button @click="openShare()" type="button"
                         class="inline-flex items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
                         title="Share meeting link">
-                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.935-2.186 2.25 2.25 0 0 0-3.935 2.186Z"/></svg>
+                    @include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4'])
                     Share
                 </button>
                 <span x-show="isRecording" class="rounded bg-red-600 px-2 py-0.5 font-medium text-white">REC</span>
@@ -110,7 +110,7 @@
                     <template x-for="reaction in floatingReactions" :key="reaction.id">
                         <span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90 ring-1 ring-white/20">
                             <img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}" alt="" class="meet-toolbar-icon h-5 w-5">
-                            <svg x-show="reaction.kind === 'heart'" class="h-5 w-5 text-rose-400" fill="currentColor" viewBox="0 0 24 24"><path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"/></svg>
+                            <img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}" alt="" class="meet-toolbar-icon h-5 w-5">
                         </span>
                     </template>
                 </div>
@@ -187,7 +187,7 @@
                 <button @click="openShare()" type="button"
                         class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
                         title="Share meeting link">
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.935-2.186 2.25 2.25 0 0 0-3.935 2.186Z"/></svg>
+                    @include('meet.room.partials.meet-icon', ['icon' => 'share'])
                 </button>
                 <button @click="raiseHand()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Raise hand">
                     @include('meet.room.partials.meet-icon', ['icon' => 'raise-hand'])
@@ -196,33 +196,15 @@
                     @include('meet.room.partials.meet-icon', ['icon' => 'applause'])
                 </button>
                 <button @click="sendReaction('heart')" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="React">
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/></svg>
+                    @include('meet.room.partials.meet-icon', ['icon' => 'react'])
                 </button>
                 <button @click="toggleChat()" type="button"
                         class="rounded-full p-3 transition-colors"
                         :class="chatOpen ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
                         title="Chat">
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-8.25 3.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
+                    @include('meet.room.partials.meet-icon', ['icon' => 'chat'])
                 </button>
                 <input type="file" id="meet-file-input" class="hidden" @change="uploadFile">
-                <button @click="document.getElementById('meet-file-input').click()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Upload file">
-                    @include('meet.room.partials.meet-icon', ['icon' => 'upload-file'])
-                </button>
-                @if ($participant->isHost())
-                    <button @click="toggleRecording()" type="button"
-                            class="rounded-full p-3 transition-colors"
-                            :class="isRecording ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
-                            :title="isRecording ? 'Stop recording' : 'Start recording'">
-                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>
-                    </button>
-                    <button @click="toggleLock()" type="button"
-                            class="rounded-full p-3 transition-colors"
-                            :class="isLocked ? 'bg-amber-600 hover:bg-amber-500' : 'bg-slate-700 hover:bg-slate-600'"
-                            :title="isLocked ? 'Unlock meeting' : 'Lock meeting'">
-                        <svg x-show="!isLocked" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
-                        <svg x-show="isLocked" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75v-6.75A2.25 2.25 0 0 0 20.25 9.75H3.75A2.25 2.25 0 0 0 1.5 12.75v6.75A2.25 2.25 0 0 0 3.75 21Z"/></svg>
-                    </button>
-                @endif
                 <button @click="toggleFeatures()" type="button"
                         class="inline-flex items-center gap-1.5 rounded-full px-3.5 py-3 text-xs font-medium transition-colors"
                         :class="featuresOpen ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
@@ -235,9 +217,10 @@
                     <button type="submit" class="rounded-full bg-red-600 px-5 py-3 text-sm font-medium hover:bg-red-500">Leave</button>
                 </form>
                 @if ($participant->isHost())
-                    <form method="POST" action="{{ route('meet.room.end', $session) }}" class="inline" onsubmit="return confirm('End meeting for everyone?')">
+                    <button @click="openEndMeetingConfirm()" type="button"
+                            class="rounded-full border border-red-500 px-4 py-3 text-sm text-red-400 hover:bg-red-950">End</button>
+                    <form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden">
                         @csrf
-                        <button type="submit" class="rounded-full border border-red-500 px-4 py-3 text-sm text-red-400 hover:bg-red-950">End</button>
                     </form>
                 @endif
             </div>
@@ -261,27 +244,37 @@
                 </div>
 
                 <div class="space-y-1 p-2">
+                    <x-meet.room.menu-item icon="upload-file" title="Share files" subtitle="Upload a file for everyone in the call"
+                                          @click="openUploadPicker()" />
+
                     @if ($participant->isHost())
-                        <button @click="createBreakouts(); featuresOpen = false" type="button"
+                        <button @click="toggleRecordingFromMenu()" type="button"
                                 class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
-                            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-500/15 text-indigo-300">
-                                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/></svg>
+                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-red-500/15">
+                                <span class="h-3 w-3 rounded-full" :class="isRecording ? 'bg-red-500 animate-pulse' : 'bg-red-400'"></span>
                             </span>
-                            <span>
-                                <span class="block font-medium">Start breakouts</span>
-                                <span class="block text-xs text-slate-400">Split participants into smaller rooms</span>
+                            <span class="min-w-0">
+                                <span class="block font-medium" x-text="isRecording ? 'Stop recording' : 'Start recording'"></span>
+                                <span class="block text-xs text-slate-400">Save this meeting to the cloud</span>
                             </span>
                         </button>
-                        <button @click="closeBreakouts(); featuresOpen = false" type="button"
+
+                        <button @click="toggleLockFromMenu()" type="button"
                                 class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
-                            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-700 text-slate-300">
-                                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"/></svg>
+                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
+                                @include('meet.room.partials.meet-icon', ['icon' => 'lock', 'class' => 'h-5 w-5'])
                             </span>
-                            <span>
-                                <span class="block font-medium">Close breakouts</span>
-                                <span class="block text-xs text-slate-400">Bring everyone back to the main room</span>
+                            <span class="min-w-0">
+                                <span class="block font-medium" x-text="isLocked ? 'Unlock meeting' : 'Lock meeting'"></span>
+                                <span class="block text-xs text-slate-400">Control who can join</span>
                             </span>
                         </button>
+
+                        <x-meet.room.menu-item icon="start-breakout" title="Start breakouts" subtitle="Split participants into smaller rooms"
+                                               @click="createBreakouts()" />
+
+                        <x-meet.room.menu-item icon="close-breakout" title="Close breakouts" subtitle="Bring everyone back to the main room"
+                                               @click="closeBreakouts()" />
                     @endif
                 </div>
 
@@ -308,6 +301,43 @@
                 <p x-show="breakoutBroadcast" class="border-t border-slate-800 bg-amber-950/40 px-4 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
             </div>
         </footer>
+
+        <div x-show="breakoutModalOpen" x-cloak
+             class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
+             @keydown.escape.window="breakoutModalOpen = false">
+            <div class="w-full max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" @click.outside="breakoutModalOpen = false">
+                <h3 class="text-base font-semibold text-white">Start breakout rooms</h3>
+                <p class="mt-1 text-sm text-slate-400">How many breakout rooms should be created?</p>
+                <form @submit.prevent="submitBreakouts()" class="mt-4 space-y-4">
+                    <div>
+                        <label for="breakout-count" class="sr-only">Number of rooms</label>
+                        <input id="breakout-count" type="number" min="1" max="20" x-model="breakoutCount"
+                               class="w-full rounded-xl border-slate-700 bg-slate-950 px-3 py-2.5 text-sm text-white focus:border-indigo-500 focus:ring-indigo-500">
+                    </div>
+                    <div class="flex justify-end gap-2">
+                        <button type="button" @click="breakoutModalOpen = false"
+                                class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
+                        <button type="submit"
+                                class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">Create rooms</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div x-show="endMeetingConfirmOpen" x-cloak
+             class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
+             @keydown.escape.window="endMeetingConfirmOpen = false">
+            <div class="w-full max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" @click.outside="endMeetingConfirmOpen = false">
+                <h3 class="text-base font-semibold text-white">End meeting for everyone?</h3>
+                <p class="mt-2 text-sm text-slate-400">All participants will be disconnected and the session will close.</p>
+                <div class="mt-5 flex justify-end gap-2">
+                    <button type="button" @click="endMeetingConfirmOpen = false"
+                            class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
+                    <button type="button" @click="submitEndMeeting()"
+                            class="rounded-xl bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500">End meeting</button>
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 </html>