diff --git a/resources/views/admin/rooms/index-room-card.blade.php b/resources/views/admin/rooms/index-room-card.blade.php
new file mode 100644
index 0000000..f25f818
--- /dev/null
+++ b/resources/views/admin/rooms/index-room-card.blade.php
@@ -0,0 +1,30 @@
+<x-card.card>
+    <x-card.heading>
+        {{ $room->name }}
+        <x-slot:subheading>{{ $room->description }}</x-slot:subheading>
+        <x-slot:right_side>
+            @if($room->entries->count() === 0 and $room->id != '0')
+                <div class="flex justify-end">
+                    <x-form.form method="DELETE"
+                                 action="{{ route('admin.rooms.destroy', ['room'=>$room->id]) }}"
+                                 class="!px-0 -mr-6 -mt-2"
+                                 id="deleteResource">
+                        <x-form.red-trash-button/>
+                    </x-form.form>
+                </div>
+            @else
+                <x-badge_pill>{{ $room->entries->count() }}</x-badge_pill>
+            @endif
+        </x-slot:right_side>
+    </x-card.heading>
+    <x-card.list.body id="room-{{ $room->id }}" class="audition-list">
+
+        @foreach($room->auditions as $audition)
+            <x-card.list.row class="!py-3" data-id="{{ $audition->id }}">
+                <x-badge_pill>{{ $audition->entries->count() }}</x-badge_pill>
+                <x-card.list.row-text-subtext>{{ $audition->name }}</x-card.list.row-text-subtext>
+            </x-card.list.row>
+        @endforeach
+
+    </x-card.list.body>
+</x-card.card>
diff --git a/resources/views/admin/rooms/index-sortablejs-script.blade.php b/resources/views/admin/rooms/index-sortablejs-script.blade.php
new file mode 100644
index 0000000..4e019de
--- /dev/null
+++ b/resources/views/admin/rooms/index-sortablejs-script.blade.php
@@ -0,0 +1,35 @@
+<script>
+    function roomManager() {
+        return {
+            rooms: @json($rooms), // Pass rooms data from the controller
+            init() {
+                this.rooms.forEach(room => {
+                    new Sortable(document.getElementById('room-' + room.id), {
+                        group: 'shared',
+                        animation: 150,
+                        onEnd: this.updateOrder.bind(this)
+                    });
+                });
+            },
+            updateOrder(event) {
+                let order = [];
+                event.to.querySelectorAll('li').forEach((el, index) => {
+                    order.push({
+                        id: el.dataset.id,
+                        room_id: event.to.id.split('-')[1],
+                        room_order: index
+                    });
+                });
+
+                fetch('/admin/auditions/roomUpdate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                    body: JSON.stringify(order)
+                });
+            }
+        }
+    }
+</script>
diff --git a/resources/views/admin/rooms/index.blade.php b/resources/views/admin/rooms/index.blade.php
index ada35cb..ecc51c4 100644
--- a/resources/views/admin/rooms/index.blade.php
+++ b/resources/views/admin/rooms/index.blade.php
@@ -5,91 +5,22 @@
 
         <div class="col-span-3"> {{-- Container for room cards --}}
             <div class="grid md:grid-cols-3 gap-3">
-
                 @foreach($rooms as $room)
                     {{-- Room 0 should be at the end for unassigned auditions--}}
-                    @if($room->id == '0')
-                        @push('noRoom')
-                    @endif
-                    <x-card.card>
-                        <x-card.heading>
-                            {{ $room->name }}
-                            <x-slot:subheading>{{ $room->description }}</x-slot:subheading>
-                            <x-slot:right_side>
-                                @if($room->entries->count() === 0 and $room->id != '0')
-                                    <div class="flex justify-end">
-                                        <x-form.form method="DELETE"
-                                                     action="{{ route('admin.rooms.destroy', ['room'=>$room->id]) }}"
-                                                     class="!px-0 -mr-6 -mt-2"
-                                                     id="deleteResource">
-                                            <x-form.red-trash-button/>
-                                        </x-form.form>
-                                    </div>
-                                @else
-                                    <x-badge_pill>{{ $room->entries->count() }}</x-badge_pill>
-                                @endif
-                            </x-slot:right_side>
-                        </x-card.heading>
-                        <x-card.list.body id="room-{{ $room->id }}" class="audition-list">
-
-                            @foreach($room->auditions as $audition)
-                                <x-card.list.row class="!py-3" data-id="{{ $audition->id }}">
-                                    <x-badge_pill>{{ $audition->entries->count() }}</x-badge_pill>
-                                    <x-card.list.row-text-subtext>{{ $audition->name }}</x-card.list.row-text-subtext>
-                                </x-card.list.row>
-                            @endforeach
-
-                        </x-card.list.body>
-
-                    </x-card.card>
-                    @if($room->id == '0')
-                        @endpush
-                    @endif
+                    @continue($room->id === 0)
+                    @include('admin.rooms.index-room-card')
                 @endforeach()
-
-
             </div>
         </div>
 
         <div> {{-- Unassigned Auditions --}}
-            @stack('noRoom')
+            @php
+                $room = $rooms->find(0);
+             @endphp
+            @include('admin.rooms.index-room-card')
         </div>
     </div>
 
-    <script>
-        function roomManager() {
-            return {
-                rooms: @json($rooms), // Pass rooms data from the controller
-                init() {
-                    this.rooms.forEach(room => {
-                        new Sortable(document.getElementById('room-' + room.id), {
-                            group: 'shared',
-                            animation: 150,
-                            onEnd: this.updateOrder.bind(this)
-                        });
-                    });
-                },
-                updateOrder(event) {
-                    let order = [];
-                    event.to.querySelectorAll('li').forEach((el, index) => {
-                        order.push({
-                            id: el.dataset.id,
-                            room_id: event.to.id.split('-')[1],
-                            room_order: index
-                        });
-                    });
-
-                    fetch('/admin/auditions/roomUpdate', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                        },
-                        body: JSON.stringify(order)
-                    });
-                }
-            }
-        }
-    </script>
+    @include('admin.rooms.index-sortablejs-script')
 
 </x-layout.app>