diff --git a/src/app/Http/Controllers/API/V4/OpenViduController.php b/src/app/Http/Controllers/API/V4/OpenViduController.php
index 9c410571..7d0dcad6 100644
--- a/src/app/Http/Controllers/API/V4/OpenViduController.php
+++ b/src/app/Http/Controllers/API/V4/OpenViduController.php
@@ -1,110 +1,140 @@
 <?php
 
 namespace App\Http\Controllers\API\V4;
 
 use App\Http\Controllers\Controller;
 use App\OpenVidu\Room;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Validator;
 
 class OpenViduController extends Controller
 {
 
     /**
      * Listing of rooms that belong to the current user.
      *
      * @return \Illuminate\Http\JsonResponse
      */
     public function index()
     {
         $user = Auth::guard()->user();
 
         $rooms = Room::where('user_id', $user->id)->orderBy('name')->get();
 
         if (count($rooms) == 0) {
             // Create a room for the user
             list($name, $domain) = explode('@', $user->email);
 
             // Room name is limited to 16 characters by the DB schema
             if (strlen($name) > 16) {
                 $name = substr($name, 0, 16);
             }
 
             while (Room::where('name', $name)->first()) {
                 $name = \App\Utils::randStr(8);
             }
 
             $room = Room::create([
                     'name' => $name,
                     'user_id' => $user->id
             ]);
 
             $rooms = collect([$room]);
         }
 
         $result = [
             'list' => $rooms,
             'count' => count($rooms),
         ];
 
         return response()->json($result);
     }
 
     /**
      * Join the room session. Each room has one owner, and the room isn't open until the owner
      * joins (and effectively creates the session).
+     *
+     * @param string $id Room identifier (name)
+     *
+     * @return \Illuminate\Http\JsonResponse
      */
     public function joinRoom($id)
     {
-        $user = Auth::guard()->user();
-
         $room = Room::where('name', $id)->first();
 
         // This isn't a room, bye bye
         if (!$room) {
             return $this->errorResponse(404, \trans('meet.roomnotfound'));
         }
 
+        $user = Auth::guard()->user();
+
         // There's no existing session
         if (!$room->hasSession()) {
-            // Only the room owner can create the session
-            if ($user->id != $room->user_id) {
+            // Participants can't join the room until the session is created by the owner
+            if (!$user || $user->id != $room->user_id) {
                 return $this->errorResponse(423, \trans('meet.sessionnotfound'));
             }
 
+            // The room owner can create the session on request
+            if (empty(request()->input('init'))) {
+                return $this->errorResponse(424, \trans('meet.sessionnotfound'));
+            }
+
             $session = $room->createSession();
 
             if (empty($session)) {
                 return $this->errorResponse(500, \trans('meet.sessioncreateerror'));
             }
         }
 
         // Create session token for the current user/connection
         $response = $room->getSessionToken('PUBLISHER');
 
         if (empty($response)) {
             return $this->errorResponse(500, \trans('meet.sessionjoinerror'));
         }
 
+        // Create session token for screen sharing connection
         if (!empty(request()->input('screenShare'))) {
             $add_token = $room->getSessionToken('PUBLISHER');
 
             $response['shareToken'] = $add_token['token'];
         }
 
+        // Tell the UI who's the room owner
+        $response['owner'] = $user && $user->id == $room->user_id;
+
         return response()->json($response, 200);
     }
 
     /**
      * Webhook as triggered from OpenVidu server
      *
      * @param \Illuminate\Http\Request $request The API request.
      *
      * @return \Illuminate\Http\Response The response
      */
     public function webhook(Request $request)
     {
+        \Log::debug($request->getContent());
+
+        switch ((string) $request->input('event')) {
+            case 'sessionDestroyed':
+                // When all participants left the room OpenVidu dispatches sessionDestroyed
+                // event. We'll remove the session reference from the database.
+                $sessionId = $request->input('sessionId');
+                $room = Room::where('session_id', $sessionId)->first();
+
+                if ($room) {
+                    $room->session_id = null;
+                    $room->save();
+                }
+
+                break;
+        }
+
         return response('Success', 200);
     }
 }
diff --git a/src/database/migrations/2020_04_30_115440_create_openvidu_tables.php b/src/database/migrations/2020_04_30_115440_create_openvidu_tables.php
index 2f4bb798..97b8afe7 100644
--- a/src/database/migrations/2020_04_30_115440_create_openvidu_tables.php
+++ b/src/database/migrations/2020_04_30_115440_create_openvidu_tables.php
@@ -1,55 +1,55 @@
 <?php
 
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
 // phpcs:ignore
 class CreateOpenviduTables extends Migration
 {
     /**
      * Run the migrations.
      *
      * @return void
      */
     public function up()
     {
         Schema::create(
             'openvidu_rooms',
             function (Blueprint $table) {
                 $table->bigIncrements('id');
                 $table->bigInteger('user_id');
-                $table->string('name', 16)->unique()->index();
-                $table->string('session_id', 16)->nullable();
+                $table->string('name', 16)->unique();
+                $table->string('session_id', 16)->nullable()->unique();
                 $table->timestamps();
 
                 $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
             }
         );
 
         Schema::create(
             'openvidu_room_settings',
             function (Blueprint $table) {
                 $table->bigIncrements('id');
                 $table->bigInteger('room_id')->unsigned();
                 $table->string('key', 16);
                 $table->string('value');
                 $table->timestamps();
 
                 $table->foreign('room_id')->references('id')
                     ->on('openvidu_rooms')->onDelete('cascade');
             }
         );
     }
 
     /**
      * Reverse the migrations.
      *
      * @return void
      */
     public function down()
     {
         Schema::dropIfExists('openvidu_room_settings');
         Schema::dropIfExists('openvidu_rooms');
     }
 }
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index 39583fac..87a3d500 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -1,359 +1,363 @@
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
  * building robust, powerful web applications using Vue and Laravel.
  */
 
 require('./bootstrap')
 
 import AppComponent from '../vue/App'
 import MenuComponent from '../vue/Widgets/Menu'
 import store from './store'
 
 const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>'
 
 const app = new Vue({
     el: '#app',
     components: {
         AppComponent,
         MenuComponent,
     },
     store,
     router: window.router,
     data() {
         return {
             isLoading: true,
             isAdmin: window.isAdmin
         }
     },
     methods: {
         // Clear (bootstrap) form validation state
         clearFormValidation(form) {
             $(form).find('.is-invalid').removeClass('is-invalid')
             $(form).find('.invalid-feedback').remove()
         },
         hasRoute(name) {
             return this.$router.resolve({ name: name }).resolved.matched.length > 0
         },
         isController(wallet_id) {
             if (wallet_id && store.state.authInfo) {
                 let i
                 for (i = 0; i < store.state.authInfo.wallets.length; i++) {
                     if (wallet_id == store.state.authInfo.wallets[i].id) {
                         return true
                     }
                 }
                 for (i = 0; i < store.state.authInfo.accounts.length; i++) {
                     if (wallet_id == store.state.authInfo.accounts[i].id) {
                         return true
                     }
                 }
             }
 
             return false
         },
         // Set user state to "logged in"
         loginUser(response, dashboard, update) {
             if (!update) {
                 store.commit('logoutUser') // destroy old state data
                 store.commit('loginUser')
             }
 
             localStorage.setItem('token', response.access_token)
             axios.defaults.headers.common.Authorization = 'Bearer ' + response.access_token
 
             if (dashboard !== false) {
                 this.$router.push(store.state.afterLogin || { name: 'dashboard' })
             }
 
             store.state.afterLogin = null
 
             // Refresh the token before it expires
             let timeout = response.expires_in || 0
 
             // We'll refresh 60 seconds before the token expires
             // or immediately when we have no expiration time (on token re-use)
             if (timeout > 60) {
                 timeout -= 60
             }
 
             // TODO: We probably should try a few times in case of an error
             // TODO: We probably should prevent axios from doing any requests
             //       while the token is being refreshed
 
             this.refreshTimeout = setTimeout(() => {
                 axios.post('/api/auth/refresh').then(response => {
                     this.loginUser(response.data, false, true)
                 })
 
             }, timeout * 1000)
         },
         // Set user state to "not logged in"
         logoutUser(redirect) {
             store.commit('logoutUser')
             localStorage.setItem('token', '')
             delete axios.defaults.headers.common.Authorization
 
             if (redirect !== false) {
-                this.$router.push({ name: 'login' })
+                if (this.hasRoute('login')) {
+                    this.$router.push({ name: 'login' })
+                } else {
+                    window.location = window.config['app.url']
+                }
             }
 
             clearTimeout(this.refreshTimeout)
         },
         // Display "loading" overlay inside of the specified element
         addLoader(elem) {
             $(elem).css({position: 'relative'}).append($(loader).addClass('small'))
         },
         // Remove loader element added in addLoader()
         removeLoader(elem) {
             $(elem).find('.app-loader').remove()
         },
         startLoading() {
             this.isLoading = true
             // Lock the UI with the 'loading...' element
             let loading = $('#app > .app-loader').show()
             if (!loading.length) {
                 $('#app').append($(loader))
             }
         },
         // Hide "loading" overlay
         stopLoading() {
             $('#app > .app-loader').addClass('fadeOut')
             this.isLoading = false
         },
         errorPage(code, msg) {
             // Until https://github.com/vuejs/vue-router/issues/977 is implemented
             // we can't really use router to display error page as it has two side
             // effects: it changes the URL and adds the error page to browser history.
             // For now we'll be replacing current view with error page "manually".
             const map = {
                 400: "Bad request",
                 401: "Unauthorized",
                 403: "Access denied",
                 404: "Not found",
                 405: "Method not allowed",
                 500: "Internal server error"
             }
 
             if (!msg) msg = map[code] || "Unknown Error"
 
             const error_page = `<div id="error-page"><div class="code">${code}</div><div class="message">${msg}</div></div>`
 
             $('#error-page').remove()
             $('#app').append(error_page)
         },
         errorHandler(error) {
             this.stopLoading()
 
             if (!error.response) {
                 // TODO: probably network connection error
             } else if (error.response.status === 401) {
                 if (!store.state.afterLogin && this.$router.currentRoute.name != 'login') {
                     store.state.afterLogin = this.$router.currentRoute
                 }
 
                 this.logoutUser()
             } else {
                 this.errorPage(error.response.status, error.response.statusText)
             }
         },
         downloadFile(url) {
             // TODO: This might not be a best way for big files as the content
             //       will be stored (temporarily) in browser memory
             // TODO: This method does not show the download progress in the browser
             //       but it could be implemented in the UI, axios has 'progress' property
             axios.get(url, { responseType: 'blob' })
                 .then(response => {
                     const link = document.createElement('a')
                     const contentDisposition = response.headers['content-disposition']
                     let filename = 'unknown'
 
                     if (contentDisposition) {
                         const match = contentDisposition.match(/filename="(.+)"/);
                         if (match.length === 2) {
                             filename = match[1];
                         }
                     }
 
                     link.href = window.URL.createObjectURL(response.data)
                     link.download = filename
                     link.click()
                 })
         },
         price(price, currency) {
             return (price/100).toLocaleString('de-DE', { style: 'currency', currency: currency || 'CHF' })
         },
         priceLabel(cost, units = 1, discount) {
             let index = ''
 
             if (units < 0) {
                 units = 1
             }
 
             if (discount) {
                 cost = Math.floor(cost * ((100 - discount) / 100))
                 index = '\u00B9'
             }
 
             return this.price(cost * units) + '/month' + index
         },
         clickRecord(event) {
             if (!/^(a|button|svg|path)$/i.test(event.target.nodeName)) {
                 $(event.target).closest('tr').find('a')[0].click()
             }
         },
         domainStatusClass(domain) {
             if (domain.isDeleted) {
                 return 'text-muted'
             }
 
             if (domain.isSuspended) {
                 return 'text-warning'
             }
 
             if (!domain.isVerified || !domain.isLdapReady || !domain.isConfirmed) {
                 return 'text-danger'
             }
 
             return 'text-success'
         },
         domainStatusText(domain) {
             if (domain.isDeleted) {
                 return 'Deleted'
             }
 
             if (domain.isSuspended) {
                 return 'Suspended'
             }
 
             if (!domain.isVerified || !domain.isLdapReady || !domain.isConfirmed) {
                 return 'Not Ready'
             }
 
             return 'Active'
         },
         userStatusClass(user) {
             if (user.isDeleted) {
                 return 'text-muted'
             }
 
             if (user.isSuspended) {
                 return 'text-warning'
             }
 
             if (!user.isImapReady || !user.isLdapReady) {
                 return 'text-danger'
             }
 
             return 'text-success'
         },
         userStatusText(user) {
             if (user.isDeleted) {
                 return 'Deleted'
             }
 
             if (user.isSuspended) {
                 return 'Suspended'
             }
 
             if (!user.isImapReady || !user.isLdapReady) {
                 return 'Not Ready'
             }
 
             return 'Active'
         }
     }
 })
 
 // Add a axios request interceptor
 window.axios.interceptors.request.use(
     config => {
         // This is the only way I found to change configuration options
         // on a running application. We need this for browser testing.
         config.headers['X-Test-Payment-Provider'] = window.config.paymentProvider
 
         return config
     },
     error => {
         // Do something with request error
         return Promise.reject(error)
     }
 )
 
 // Add a axios response interceptor for general/validation error handler
 window.axios.interceptors.response.use(
     response => {
         // Do nothing
         return response
     },
     error => {
         let error_msg
         let status = error.response ? error.response.status : 200
 
         if (error.response && status == 422) {
             error_msg = "Form validation error"
 
             const modal = $('div.modal.show')
 
             $(modal.length ? modal : 'form').each((i, form) => {
                 form = $(form)
 
                 $.each(error.response.data.errors || {}, (idx, msg) => {
                     const input_name = (form.data('validation-prefix') || form.find('form').first().data('validation-prefix') || '') + idx
                     let input = form.find('#' + input_name)
 
                     if (!input.length) {
                         input = form.find('[name="' + input_name + '"]');
                     }
 
                     if (input.length) {
                         // Create an error message\
                         // API responses can use a string, array or object
                         let msg_text = ''
                         if ($.type(msg) !== 'string') {
                             $.each(msg, (index, str) => {
                                 msg_text += str + ' '
                             })
                         }
                         else {
                             msg_text = msg
                         }
 
                         let feedback = $('<div class="invalid-feedback">').text(msg_text)
 
                         if (input.is('.list-input')) {
                             // List input widget
                             input.children(':not(:first-child)').each((index, element) => {
                                 if (msg[index]) {
                                     $(element).find('input').addClass('is-invalid')
                                 }
                             })
 
                             input.addClass('is-invalid').next('.invalid-feedback').remove()
                             input.after(feedback)
                         }
                         else {
                             // Standard form element
                             input.addClass('is-invalid')
                             input.parent().find('.invalid-feedback').remove()
                             input.parent().append(feedback)
                         }
                     }
                 })
 
                 form.find('.is-invalid:not(.listinput-widget)').first().focus()
             })
         }
         else if (error.response && error.response.data) {
             error_msg = error.response.data.message
         }
         else {
             error_msg = error.request ? error.request.statusText : error.message
         }
 
         app.$toast.error(error_msg || "Server Error")
 
         // Pass the error as-is
         return Promise.reject(error)
     }
 )
diff --git a/src/resources/js/meet/app.js b/src/resources/js/meet/app.js
index 601b5c95..89075f84 100644
--- a/src/resources/js/meet/app.js
+++ b/src/resources/js/meet/app.js
@@ -1,805 +1,811 @@
 import anchorme from 'anchorme'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { OpenVidu } from 'openvidu-browser'
 
 
 function Meet(container)
 {
     let OV                      // OpenVidu object to initialize a session
     let session                 // Session object where the user will connect
     let publisher               // Publisher object which the user will publish
-    let audioEnabled = true     // True if the audio track of publisher is active
-    let videoEnabled = true     // True if the video track of publisher is active
+    let audioEnabled = false    // True if the audio track of publisher is active
+    let videoEnabled = false    // True if the video track of publisher is active
     let numOfVideos = 0         // Keeps track of the number of videos that are being shown
     let audioSource = ''        // Currently selected microphone
     let videoSource = ''        // Currently selected camera
     let sessionData             // Room session metadata
 
     let screenOV                // OpenVidu object to initialize a screen sharing session
     let screenSession           // Session object where the user will connect for screen sharing
     let screenPublisher         // Publisher object which the user will publish the screen sharing
 
     let publisherDefaults = {
         publishAudio: true,     // Whether to start publishing with your audio unmuted or not
         publishVideo: true,     // Whether to start publishing with your video enabled or not
         resolution: '640x480',  // The resolution of your video
         frameRate: 30,          // The frame rate of your video
         mirror: true            // Whether to mirror your local video or not
     }
 
     let cameras = []            // List of user video devices
     let microphones = []        // List of user audio devices
     let connections = {}        // Connected users in the session
 
     let containerWidth
     let containerHeight
     let chatCount = 0
     let volumeElement
     let setupProps
 
     OV = new OpenVidu()
     screenOV = new OpenVidu()
 
     // if there's anything to do, do it here.
     //OV.setAdvancedConfiguration(config)
 
     // Disconnect participant when browser's window close
     window.addEventListener('beforeunload', () => {
         leaveRoom()
     })
 
     window.addEventListener('resize', resize)
 
     // Public methods
     this.isScreenSharingSupported = isScreenSharingSupported
     this.joinRoom = joinRoom
     this.leaveRoom = leaveRoom
     this.setup = setup
     this.setupSetAudioDevice = setupSetAudioDevice
     this.setupSetVideoDevice = setupSetVideoDevice
     this.switchAudio = switchAudio
     this.switchScreen = switchScreen
     this.switchVideo = switchVideo
 
 
     /**
      * Join the room session
      *
      * @param data Session metadata (session, token, shareToken, nickname, chatElement, menuElement)
      */
     function joinRoom(data) {
         resize();
         volumeMeterStop()
 
         data.params = {
             nickname: data.nickname, // user nickname
             // avatar: undefined        // avatar image
         }
 
         sessionData = data
 
         // Init a session
         session = OV.initSession()
 
         // On every new Stream received...
         session.on('streamCreated', event => {
             let connection = event.stream.connection
             let connectionId = connection.connectionId
             let metadata = JSON.parse(connection.data)
 
             let wrapper = addVideoWrapper(container, metadata, event.stream)
 
             // Subscribe to the Stream to receive it
             let subscriber = session.subscribe(event.stream, wrapper);
 
             // When the new video is added to DOM, update the page layout
             subscriber.on('videoElementCreated', event => {
                 numOfVideos++
                 updateLayout()
 
                 connections[connectionId] = {
                     element: wrapper
                 }
 
                 // Send the current user status to the connecting user
                 // otherwise e.g. nickname might be not up to date
                 signalUserUpdate(connection)
             })
 
             // When a video is removed from DOM, update the page layout
             subscriber.on('videoElementDestroyed', event => {
                 numOfVideos--
                 updateLayout()
 
                 delete connections[connectionId]
             })
         })
 /*
         // On every new Stream destroyed...
         session.on('streamDestroyed', event => {
             // Update the page layout
             numOfVideos--
             updateLayout()
         })
 */
         // Register handler for signals from other participants
         session.on('signal', signalEventHandler)
 
         // Connect with the token
         session.connect(data.token, data.params)
             .then(() => {
                 data.params.publisher = true
 
                 let wrapper = addVideoWrapper(container, data.params)
 
                 publisher.on('videoElementCreated', event => {
                     $(event.element).prop('muted', true) // Mute local video to avoid feedback
 
                     numOfVideos++
                     updateLayout()
                 })
 
                 publisher.createVideoElement(wrapper, 'PREPEND')
                 sessionData.wrapper = wrapper
 
                 // Publish the stream
                 session.publish(publisher)
             })
             .catch(error => {
                 console.error('There was an error connecting to the session: ', error.message);
             })
 
         // Prepare the chat
         setupChat()
     }
 
     /**
      * Leave the room (disconnect)
      */
     function leaveRoom() {
         if (publisher) {
             volumeMeterStop()
             publisher.publishAudio(false)
             publisher.publishVideo(false)
         }
 
         if (session) {
             session.disconnect();
             session = null
         }
 
         if (screenSession) {
             screenSession.disconnect();
             screenSession = null
         }
 
         publisher = null
     }
 
     /**
      * Sets the audio and video devices for the session.
      * This will ask user for permission to access media devices.
      *
      * @param props Setup properties (videoElement, volumeElement, success, error)
      */
     function setup(props) {
         setupProps = props
 
         publisher = OV.initPublisher(undefined, publisherDefaults)
 
         publisher.once('accessDenied', error => {
             props.error(error)
         })
 
         publisher.once('accessAllowed', async () => {
             let mediaStream = publisher.stream.getMediaStream()
             let videoStream = mediaStream.getVideoTracks()[0]
             let audioStream = mediaStream.getAudioTracks()[0]
 
             audioEnabled = !!audioStream
             videoEnabled = !!videoStream
             volumeElement = props.volumeElement
 
             publisher.addVideoElement(props.videoElement)
 
             volumeMeterStart()
 
             const devices = await OV.getDevices()
 
             devices.forEach(device => {
                 // device's props: deviceId, kind, label
                 if (device.kind == 'videoinput') {
                     cameras.push(device)
                     if (videoStream && videoStream.label == device.label) {
                         videoSource = device.deviceId
                     }
                 } else if (device.kind == 'audioinput') {
                     microphones.push(device)
                     if (audioStream && audioStream.label == device.label) {
                         audioSource = device.deviceId
                     }
                 }
             })
 
             props.success({
                 microphones,
                 cameras,
                 audioSource,
                 videoSource,
                 audioEnabled,
                 videoEnabled
             })
         })
     }
 
     /**
      * Change the publisher audio device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetAudioDevice(deviceId) {
         if (!deviceId) {
             publisher.publishAudio(false)
             volumeMeterStop()
             audioEnabled = false
         } else if (deviceId == audioSource) {
             publisher.publishAudio(true)
             volumeMeterStart()
             audioEnabled = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const oldTrack = mediaStream.getAudioTracks()[0]
 
             let properties = Object.assign({}, publisherDefaults, {
                 publishAudio: true,
                 publishVideo: videoEnabled,
                 audioSource: deviceId,
                 videoSource: videoSource
             })
 
             volumeMeterStop()
 
             // Note: We're not using publisher.replaceTrack() as it wasn't working for me
 
             // Stop and remove the old track
             if (oldTrack) {
                 oldTrack.stop()
                 mediaStream.removeTrack(oldTrack)
             }
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
                     publisher.stream.mediaStream = newMediaStream
                     volumeMeterStart()
                     audioEnabled = true
                     audioSource = deviceId
                 })
         }
 
         return audioEnabled
     }
 
     /**
      * Change the publisher video device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetVideoDevice(deviceId) {
         if (!deviceId) {
             publisher.publishVideo(false)
             videoEnabled = false
         } else if (deviceId == videoSource) {
             publisher.publishVideo(true)
             videoEnabled = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const oldTrack = mediaStream.getAudioTracks()[0]
 
             let properties = Object.assign({}, publisherDefaults, {
                 publishAudio: audioEnabled,
                 publishVideo: true,
                 audioSource: audioSource,
                 videoSource: deviceId
             })
 
             volumeMeterStop()
 
             // Stop and remove the old track
             if (oldTrack) {
                 oldTrack.stop()
                 mediaStream.removeTrack(oldTrack)
             }
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
                     publisher.stream.mediaStream = newMediaStream
                     volumeMeterStart()
                     videoEnabled = true
                     videoSource = deviceId
                 })
         }
 
         return videoEnabled
     }
 
     /**
      * Setup the chat UI
      */
     function setupChat() {
         // The UI elements are created in the vue template
         // Here we add a logic for how they work
 
         const textarea = $(sessionData.chatElement).find('textarea')
         const button = $(sessionData.menuElement).find('.link-chat')
 
         textarea.on('keydown', e => {
             if (e.keyCode == 13 && !e.shiftKey) {
                 if (textarea.val().length) {
                     signalChat(textarea.val())
                     textarea.val('')
                 }
 
                 return false
             }
         })
 
         // Add an element for the count of unread messages on the chat button
         button.append('<span class="badge badge-dark blinker">')
             .on('click', () => { button.find('.badge').text('') })
     }
 
     /**
      * Signal events handler
      */
     function signalEventHandler(signal) {
         let conn, data
 
         switch (signal.type) {
             case 'signal:userChanged':
                 if (conn = connections[signal.from.connectionId]) {
                     data = JSON.parse(signal.data)
                     $(conn.element).find('.nickname > span').text(data.nickname || '')
                     $(conn.element).find('.status-audio')[data.audioEnabled ? 'addClass' : 'removeClass']('d-none')
                     $(conn.element).find('.status-video')[data.videoEnabled ? 'addClass' : 'removeClass']('d-none')
                 }
                 break
 
             case 'signal:chat':
                 data = JSON.parse(signal.data)
                 data.id = signal.from.connectionId
                 pushChatMessage(data)
                 break
         }
     }
 
     /**
      * Send the chat message to other participants
      *
      * @param message Message string
      */
     function signalChat(message) {
         let data = {
             nickname: sessionData.params.nickname,
             message
         }
 
         session.signal({
             data: JSON.stringify(data),
             type: 'chat'
         })
     }
 
     /**
      * Add a message to the chat
      *
      * @param data Object with a message, nickname, id (of the connection, empty for self)
      */
     function pushChatMessage(data) {
         let message = $('<span>').text(data.message).text() // make the message secure
 
         // Format the message, convert emails and urls to links
         message = anchorme({
             input: message,
             options: {
                 attributes: {
                     target: "_blank"
                 },
                 // any link above 20 characters will be truncated
                 // to 20 characters and ellipses at the end
                 truncate: 20,
                 // characters will be taken out of the middle
                 middleTruncation: true
             }
             // TODO: anchorme is extensible, we could support
             //       github/phabricator's markup e.g. backticks for code samples
         })
 
         message = message.replace(/\r?\n/, '<br>')
 
         // Display the message
         let isSelf = data.id == publisher.stream.connection.connectionId
         let chat = $(sessionData.chatElement).find('.chat')
         let box = chat.find('.message').last()
 
         message = $('<div>').html(message)
 
         message.find('a').attr('rel', 'noreferrer')
 
         if (box.length && box.data('id') == data.id) {
             // A message from the same user as the last message, no new box needed
             message.appendTo(box)
         } else {
             box = $('<div class="message">').data('id', data.id)
                 .append($('<div class="nickname">').text(data.nickname || ''))
                 .append(message)
                 .appendTo(chat)
 
             if (isSelf) {
                 box.addClass('self')
             }
         }
 
         // Count unread messages
         if (!$(sessionData.chatElement).is('.open')) {
             if (!isSelf) {
                 chatCount++
             }
         } else {
             chatCount = 0
         }
 
         $(sessionData.menuElement).find('.link-chat .badge').text(chatCount ? chatCount : '')
     }
 
     /**
      * Send the user properties update signal to other participants
      *
      * @param connection Optional connection to which the signal will be sent
      *                   If not specified the signal is sent to all participants
      */
     function signalUserUpdate(connection) {
         let data = {
             audioEnabled,
             videoEnabled,
             nickname: sessionData.params.nickname
         }
 
         // TODO: The same for screen sharing session?
         session.signal({
             data: JSON.stringify(data),
             type: 'userChanged',
             to: connection ? [connection] : undefined
         })
     }
 
     /**
      * Mute/Unmute audio for current session publisher
      */
     function switchAudio() {
         audioEnabled = !audioEnabled
         publisher.publishAudio(audioEnabled)
 
+        // TODO: Handle enabling audio if it was never enabled (e.g. user joined the room
+        //       without giving access to his mic)
+
         $(sessionData.wrapper).find('.status-audio')[audioEnabled ? 'addClass' : 'removeClass']('d-none')
 
         signalUserUpdate()
 
         return audioEnabled
     }
 
     /**
      * Mute/Unmute video for current session publisher
      */
     function switchVideo() {
         videoEnabled = !videoEnabled
         publisher.publishVideo(videoEnabled)
 
+        // TODO: Handle enabling video if it was never enabled (e.g. user joined the room
+        //       without giving access to his camera)
+
         $(sessionData.wrapper).find('.status-video')[videoEnabled ? 'addClass' : 'removeClass']('d-none')
 
         signalUserUpdate()
 
         return videoEnabled
     }
 
     /**
      * Switch on/off screen sharing
      */
     function switchScreen(callback) {
         if (screenPublisher) {
             screenSession.unpublish(screenPublisher)
             screenPublisher = null
 
             if (callback) {
                 callback(false)
             }
 
             return
         }
 
         screenConnect(callback)
     }
 
     /**
      * Detect if screen sharing is supported by the browser
      */
     function isScreenSharingSupported() {
         return !!OV.checkScreenSharingCapabilities();
     }
 
     /**
      * Create a <video> element wrapper with controls
      *
      * @param container The parent element
      * @param metadata  Connection metadata
      * @param stream    Connection stream
      */
     function addVideoWrapper(container, metadata, stream) {
         // Create the element
         let wrapper = $('<div class="meet-video">').html(`
             <div class="nickname" title="Nickname">
                 <span></span>
             </div>
             <div class="controls">
                 <button class="btn btn-link link-audio d-none" title="Mute audio">` + svgIcon("volume-mute") + `</button>
                 <button class="btn btn-link link-fullscreen d-none" title="Full screen">` + svgIcon("expand") + `</button>
                 <button class="btn btn-link link-fullscreen-close d-none" title="Full screen">` + svgIcon("compress") + `</button>
             </div>
             <div class="status">
                 <span class="bg-danger status-audio d-none">` + svgIcon("microphone") + `</span>
                 <span class="bg-danger status-video d-none">` + svgIcon("video") + `</span>
             </div>`)
 
         if (metadata.publisher) {
             // Add events for nickname change
             let nickname = wrapper.addClass('publisher').find('.nickname')
             let editable = nickname.find('span').get(0)
             let editableEnable = () => {
                 editable.contentEditable = true
                 editable.focus()
             }
             let editableUpdate = () => {
                 editable.contentEditable = false
                 sessionData.params.nickname = editable.innerText
                 signalUserUpdate()
             }
 
             nickname.on('click', editableEnable)
 
             $(editable).on('blur', editableUpdate)
                 .on('click', editableEnable)
                 .on('keydown', e => {
                     // Enter or Esc
                     if (e.keyCode == 13 || e.keyCode == 27) {
                         editableUpdate()
                         return false
                     }
                 })
 
             // Status
             if (!audioEnabled) {
                 wrapper.find('.status-audio').removeClass('d-none')
             }
 
             if (!videoEnabled) {
                 wrapper.find('.status-video').removeClass('d-none')
             }
         } else {
             wrapper.find('.nickname > svg').addClass('d-none')
 
             wrapper.find('.link-audio').removeClass('d-none')
                 .on('click', e => {
                     let video = wrapper.find('video')[0]
                     video.muted = !video.muted
                     wrapper.find('.link-audio')[video.muted ? 'addClass' : 'removeClass']('text-danger')
                 })
 
             if (!stream.audioActive) {
                 wrapper.find('.status-audio').removeClass('d-none')
             }
 
             if (!stream.videoActive) {
                 wrapper.find('.status-video').removeClass('d-none')
             }
         }
 
         if (metadata.nickname) {
             wrapper.find('.nickname > span').text(metadata.nickname)
         }
 
         // Fullscreen control
         if (document.fullscreenEnabled) {
             wrapper.find('.link-fullscreen').removeClass('d-none')
                 .on('click', () => {
                     wrapper.get(0).requestFullscreen()
                 })
 
             wrapper.find('.link-fullscreen-close')
                 .on('click', () => {
                     document.exitFullscreen()
                 })
 
             wrapper.on('fullscreenchange', () => {
                 // const enabled = document.fullscreenElement
                 wrapper.find('.link-fullscreen').toggleClass('d-none')
                 wrapper.find('.link-fullscreen-close').toggleClass('d-none')
             })
         }
 
         return wrapper.appendTo(container).get(0)
     }
 
     /**
      * Window onresize event handler (updates room layout)
      */
     function resize() {
         containerWidth = container.offsetWidth
         containerHeight = container.offsetHeight
         updateLayout()
     }
 
     /**
      * Update the room "matrix" layout
      */
     function updateLayout() {
         if (!numOfVideos) {
             return
         }
 
         let css, rows, cols, height
 
         if (numOfVideos == 1) {
             cols = 1
         } else if (numOfVideos <= 4) {
             cols = 2
         } else if (numOfVideos <= 9) {
             cols = 3
         } else if (numOfVideos <= 16) {
             cols = 4
         } else if (numOfVideos <= 25) {
             cols = 5
         } else {
             cols = 6
         }
 
         rows = Math.ceil(numOfVideos / cols)
 
         if (rows < cols && containerWidth < containerHeight) {
             cols = rows
             rows = Math.ceil(numOfVideos / cols)
         }
 
         height = containerHeight / rows
         css = {
             width: (100 / cols) + '%',
             // Height must be in pixels to make object-fit:cover working
             height: height + 'px'
         }
 
         // Update the matrix
         $(container).find('.meet-video').css(css)
             .each((idx, elem) => {
                 let video = $(elem).children('video')[0]
                 if (!video) {
                     // Remove orphaned video wrappers (after video has been removed)
                     $(elem).remove()
                 } else if (video.videoWidth && video.videoHeight && video.videoWidth > video.videoHeight) {
                     // Set max-width to keep the original aspect ratio in cases
                     // when there's enough room to display the element
                     let maxWidth = height * video.videoWidth / video.videoHeight
                     $(elem).css('max-width', maxWidth)
                 }
             })
     }
 
     /**
      * Initialize screen sharing session/publisher
      */
     function screenConnect(callback) {
         if (!sessionData.shareToken) {
             return false
         }
 
         let gotSession = !!screenSession
 
         // Init screen sharing session
         if (!gotSession) {
             screenSession = screenOV.initSession();
         }
 
         let successFunc = function() {
             screenSession.publish(screenPublisher)
             if (callback) {
                 callback(true)
             }
         }
 
         let errorFunc = function() {
             screenPublisher = null
             if (callback) {
                 callback(false)
             }
         }
 
         // Init the publisher
         let params = {
             videoSource: 'screen',
             publishAudio: false
         }
 
         screenPublisher = screenOV.initPublisher(null, params)
 
         screenPublisher.once('accessAllowed', (event) => {
             if (gotSession) {
                 successFunc()
             } else {
                 screenSession.connect(sessionData.shareToken, sessionData.params)
                     .then(() => {
                         successFunc()
                     })
                     .catch(error => {
                         console.error('There was an error connecting to the session:', error.code, error.message);
                         errorFunc()
                     })
             }
         })
 
         screenPublisher.once('accessDenied', () => {
             console.info('ScreenShare: Access Denied')
             errorFunc()
         })
     }
 
     /**
      * Create an svg element (string) for a FontAwesome icon
      *
      * @todo Find if there's a "official" way to do this
      */
     function svgIcon(name, type) {
         // Note: the library will contain definitions for all icons registered elswhere
         const icon = library.definitions[type || 'fas'][name]
 
         return $(`<svg><path fill="currentColor" d="${icon[4]}"></path></svg>`)
             .attr({
                 'class': 'svg-inline--fa',
                 'aria-hidden': true,
                 focusable: false,
                 role: 'img',
                 xmlns: 'http://www.w3.org/2000/svg',
                 viewBox: `0 0 ${icon[0]} ${icon[1]}`
             })
             .get(0).outerHTML
     }
 
     function volumeChangeHandler(event) {
         let value = 100 + Math.min(0, Math.max(-100, event.value.newValue))
         let color = 'lime'
         const bar = volumeElement.firstChild
 
         if (value >= 70) {
             color = '#ff3300'
         } else if (value >= 50) {
             color = '#ff9933'
         }
 
         bar.style.height = value + '%'
         bar.style.background = color
     }
 
     function volumeMeterStart() {
-        if (publisher) {
+        if (publisher && volumeElement) {
             publisher.on('streamAudioVolumeChange', volumeChangeHandler)
         }
     }
 
     function volumeMeterStop() {
-        if (publisher) {
+        if (publisher && volumeElement) {
             publisher.off('streamAudioVolumeChange')
             volumeElement.firstChild.style.height = 0
         }
     }
 }
 
 export default Meet
diff --git a/src/resources/js/routes-meet.js b/src/resources/js/routes-meet.js
index fd8a7d3d..06103117 100644
--- a/src/resources/js/routes-meet.js
+++ b/src/resources/js/routes-meet.js
@@ -1,35 +1,23 @@
-import DashboardComponent from '../vue/Meet/Dashboard'
 import Error404Component from '../vue/404'
-import LoginComponent from '../vue/Login'
 import LogoutComponent from '../vue/Logout'
 import RoomComponent from '../vue/Meet/Room'
 
 const routes = [
-    {
-        component: DashboardComponent,
-        name: 'dashboard',
-        path: '/meet'
-    },
-    {
-        component: LoginComponent,
-        name: 'login',
-        path: '/meet/login'
-    },
     {
         component: LogoutComponent,
         name: 'logout',
         path: '/logout'
     },
     {
         component: RoomComponent,
         name: 'room',
         path: '/meet/:room'
     },
     {
         component: Error404Component,
         name: '404',
         path: '*'
     }
 ]
 
 export default routes
diff --git a/src/resources/sass/bootstrap.scss b/src/resources/sass/bootstrap.scss
index 444260d9..0989559e 100644
--- a/src/resources/sass/bootstrap.scss
+++ b/src/resources/sass/bootstrap.scss
@@ -1,15 +1,19 @@
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
 
 // Bootstrap style fixes
-.btn-link {
-    border: 0;
-}
 
+.btn-link,
 .table thead th {
     border: 0;
 }
 
 small {
     font-size: 0.875em;
 }
+
+// Re-add .d-none to give it more prio than other .d-* classes
+// https://github.com/twbs/bootstrap/issues/31426
+.d-none {
+    display: none !important;
+}
diff --git a/src/resources/sass/meet.scss b/src/resources/sass/meet.scss
index 30cd81ef..78d66b62 100644
--- a/src/resources/sass/meet.scss
+++ b/src/resources/sass/meet.scss
@@ -1,187 +1,197 @@
 .meet-video {
     position: relative;
 
     video {
         // To make object-fit:cover working we have to set the height in pixels
         // on the wrapper element. This is what javascript method will do.
         object-fit: cover;
         width: 100%;
         height: 100%;
         background: #000;
     }
 
     .controls {
         position: absolute;
         bottom: 0;
         right: 0;
         margin: 0.5em;
         padding: 0 0.05em;
         line-height: 2em;
         border-radius: 1em;
         background: rgba(#000, 0.7);
 
         button {
             line-height: 2;
             border-radius: 50%;
             padding: 0;
             width: 2em;
         }
     }
 
     .status {
         position: absolute;
         bottom: 0;
         left: 0;
         margin: 0.5em;
         line-height: 2em;
 
         span {
             display: inline-block;
             color: #fff;
             border-radius: 50%;
             width: 2em;
             text-align: center;
             margin-right: 0.25em;
         }
     }
 
     .nickname {
         position: absolute;
         top: 0;
         margin: 0.5em;
         padding: 0 1em;
         line-height: 2em;
         border-radius: 1em;
         max-width: calc(100% - 1em);
         background: rgba(#fff, 0.8);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
     &.publisher .nickname {
         cursor: pointer;
         background: rgba($main-color, 0.9);
 
         span:empty {
             // A hack to make the .nickname element not disappear when empty
             display: block;
             height: 2em;
         }
     }
 }
 
 #meet-component {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 
     & + .filler {
         display: none;
     }
 }
 
 #app.meet {
     height: 100%;
 
     #meet-component {
         overflow: hidden;
     }
 }
 
+#meet-setup {
+    max-width: 720px;
+}
+
+#meet-auth {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    flex: 1;
+}
+
 #meet-session-toolbar {
     display: flex;
     justify-content: center;
 }
 
 #meet-session-menu {
     button {
         font-size: 1.3em;
         padding: 0 0.25em;
         margin: 0.5em;
         position: relative;
 
         .badge {
             font-size: 0.5em;
             position: absolute;
             right: -0.5em;
 
             &:empty {
                 display: none;
             }
         }
     }
 }
 
 #meet-session-layout {
     flex: 1;
     overflow: hidden;
 }
 
 #meet-session {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     flex: 1;
     //overflow: hidden;
 }
 
 #meet-chat {
     width: 0;
     display: flex;
     flex-direction: column;
 
     &.open {
         width: 30%;
     }
 
     .chat {
         flex: 1;
         overflow-y: auto;
     }
 
     .message {
         margin: 0 0.5em 0.5em 0.5em;
         padding: 0.25em 0.5em;
         border-radius: 1em;
         background: $menu-bg-color;
         overflow-wrap: break-word;
 
         &.self {
             background: lighten($main-color, 30%);
         }
     }
 
     .nickname {
         font-size: 80%;
         color: $secondary;
         text-align: right;
     }
 
     // TODO: mobile mode
 }
 
 #setup-preview {
     display: flex;
 
     video {
         width: 100%;
         transform: rotateY(180deg);
         background: #000;
     }
 
     .volume {
         height: 50%;
         position: absolute;
         bottom: 1em;
         right: 2em;
         width: 0.5em;
         background: rgba(0, 0, 0, 0.5);
 
         .bar {
             width: 100%;
             position: absolute;
             bottom: 0;
         }
     }
 }
diff --git a/src/resources/vue/Login.vue b/src/resources/vue/Login.vue
index a79a75f7..94c5c679 100644
--- a/src/resources/vue/Login.vue
+++ b/src/resources/vue/Login.vue
@@ -1,77 +1,81 @@
 <template>
     <div class="container d-flex flex-column align-items-center justify-content-center">
         <div class="card col-sm-8 col-lg-6">
             <div class="card-body">
                 <h1 class="card-title text-center mb-3">Please sign in</h1>
                 <div class="card-text">
                     <form class="form-signin" @submit.prevent="submitLogin">
                         <div class="form-group">
                             <label for="inputEmail" class="sr-only">Email address</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="user"></svg-icon></span>
                                 </span>
                                 <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus v-model="email">
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="inputPassword" class="sr-only">Password</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="lock"></svg-icon></span>
                                 </span>
                                 <input type="password" id="inputPassword" class="form-control" placeholder="Password" required v-model="password">
                             </div>
                         </div>
                         <div class="form-group pt-3" v-if="!$root.isAdmin">
                             <label for="secondfactor" class="sr-only">2FA</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="key"></svg-icon></span>
                                 </span>
                                 <input type="text" id="secondfactor" class="form-control rounded-right" placeholder="Second factor code" v-model="secondFactor">
                             </div>
                             <small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
                         </div>
                         <div class="text-center">
                             <button class="btn btn-primary" type="submit">
                                 <svg-icon icon="sign-in-alt"></svg-icon> Sign in
                             </button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
         <div class="mt-1">
             <router-link v-if="!$root.isAdmin && $root.hasRoute('password-reset')" :to="{ name: 'password-reset' }" id="forgot-password">Forgot password?</router-link>
             <a v-if="!$root.isAdmin && !$root.hasRoute('password-reset')" :href="app_url + '/password-reset'" id="forgot-password">Forgot password?</a>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 app_url: window.config['app.url'],
                 email: '',
                 password: '',
                 secondFactor: ''
             }
         },
+        props: {
+            dashboard: { type: Boolean, default: true }
+        },
         methods: {
             submitLogin() {
                 this.$root.clearFormValidation($('form.form-signin'))
 
                 axios.post('/api/auth/login', {
                     email: this.email,
                     password: this.password,
                     secondfactor: this.secondFactor
                 }).then(response => {
                     // login user and redirect to dashboard
-                    this.$root.loginUser(response.data)
+                    this.$root.loginUser(response.data, this.dashboard)
+                    this.$emit('success')
                 })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
index 7657dfc7..06b3e7ab 100644
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -1,247 +1,290 @@
 <template>
     <div id="meet-component">
         <div id="meet-session-toolbar" class="d-none">
             <div id="meet-session-menu">
                 <button class="btn btn-link link-audio" @click="switchSound" title="Mute audio">
                     <svg-icon icon="microphone"></svg-icon>
                 </button>
                 <button class="btn btn-link link-video" @click="switchVideo" title="Mute video">
                     <svg-icon icon="video"></svg-icon>
                 </button>
                 <button class="btn btn-link link-screen text-danger" @click="switchScreen" :disabled="!canShareScreen" title="Share screen">
                     <svg-icon icon="desktop"></svg-icon>
                 </button>
                 <button class="btn btn-link link-chat text-danger" @click="switchChat" title="Chat">
                     <svg-icon icon="align-left"></svg-icon>
                 </button>
                 <button class="btn btn-link link-fullscreen d-none" @click="switchFullscreen" title="Full screen">
                     <svg-icon icon="expand"></svg-icon>
                 </button>
                 <button class="btn btn-link link-fullscreen d-none" @click="switchFullscreen" title="Full screen">
                     <svg-icon icon="compress"></svg-icon>
                 </button>
-                <button class="btn btn-link link-logout" @click="sessionLogout" title="Leave session">
+                <button class="btn btn-link link-logout" @click="logout" title="Leave session">
                     <svg-icon icon="power-off"></svg-icon>
                 </button>
             </div>
         </div>
 
         <div id="meet-setup" class="card container mt-5 mb-5">
             <div class="card-body">
                 <div class="card-title">Set up your session</div>
                 <div class="card-text">
-                    <form class="setup-form row" @submit.prevent="joinSession">
+                    <form class="setup-form row">
                         <div id="setup-preview" class="col-sm-6">
                             <video class="rounded"></video>
                             <div class="volume"><div class="bar"></div></div>
                         </div>
                         <div class="col-sm-6">
                             <div class="form-group">
                                 <label>Microphone</label>
                                 <select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">None</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="form-group">
                                 <label>Camera</label>
                                 <select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
                                     <option value="">None</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                             <div class="form-group mb-0">
                                 <label>Nickname</label>
                                 <input class="form-control" type="text" id="setup-nickname" v-model="nickname">
                             </div>
                         </div>
                         <div class="text-center mt-4 col-sm-12">
-                            <status-message :status="roomState" :status-labels="roomStateLabels"></status-message>
-                            <button v-if="roomState == 'ready'" class="btn btn-primary pl-5 pr-5">JOIN</button>
+                            <status-message :status="roomState" :status-labels="roomStateLabels" class="mb-3"></status-message>
+                            <button v-if="roomState == 'ready' || roomState == 424"
+                                    type="button"
+                                    @click="joinSession"
+                                    class="btn btn-primary pl-5 pr-5"
+                            >JOIN</button>
+                            <button v-if="roomState == 423"
+                                    type="button"
+                                    @click="joinSession"
+                                    class="btn btn-primary pl-5 pr-5"
+                            >I'm the owner</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
 
-        <div id="meet-session-layout" class="d-flex">
+        <div id="meet-session-layout" class="d-flex d-none">
             <div id="meet-session"></div>
             <div id="meet-chat">
                 <div class="chat"></div>
                 <div class="chat-input m-2">
                     <textarea class="form-control" rows="1"></textarea>
                 </div>
             </div>
         </div>
+
+        <logon-form id="meet-auth" class="d-none" :dashboard="false" v-on:success="authSuccess"></logon-form>
     </div>
 </template>
 
 <script>
     import Meet from '../../js/meet/app.js'
     import StatusMessage from '../Widgets/StatusMessage'
+    import LogonForm from '../Login'
 
     export default {
         components: {
+            LogonForm,
             StatusMessage
         },
         data() {
             return {
                 setup: {
                     cameras: [],
                     microphones: [],
                 },
                 canShareScreen: false,
                 camera: '',
                 meet: null,
                 microphone: '',
                 nickname: '',
                 room: null,
                 roomState: 'init',
                 roomStateLabels: {
                     init: 'Checking the room...',
                     404: 'The room does not exist.',
-                    423: 'The room is closed. Refresh the page to try again.',
+                    423: 'The room is closed. Please, wait for the owner to start the session.',
+                    424: 'The room is closed. It will be open for others after you join.',
                     500: 'Failed to create a session. Server error.'
                 },
-                session: null
+                session: {}
             }
         },
         mounted() {
             this.room = this.$route.params.room
 
-            if (!this.$store.state.isLoggedIn) {
-                this.$store.state.afterLogin = this.$router.currentRoute
-                this.$router.push({ name: 'login' })
-                return
-            }
-
-            // this.nickname = this.$store.state.authInfo.email.replace(/@.*$/, '')
-
             // Initialize OpenVidu and do some basic checks
             this.meet = new Meet($('#meet-session')[0]);
             this.canShareScreen = this.meet.isScreenSharingSupported()
 
             // Check the room and init the session
             this.initSession()
 
             // Setup the room UI
             this.setupSession()
         },
         beforeDestroy() {
             if (this.meet) {
                 this.leaveSession()
             }
         },
         methods: {
-            initSession() {
-                let addUrl = this.canShareScreen ? '?screenShare=1' : ''
+            authSuccess() {
+                // The user (owner) authentication succeeded
+                this.roomState = 'init'
+                this.initSession()
+
+                $('#meet-setup').removeClass('d-none')
+                $('#meet-auth').addClass('d-none')
+            },
+            initSession(init) {
+                let params = []
 
-                axios.get('/api/v4/openvidu/rooms/' + this.room + addUrl)
+                if (this.canShareScreen) {
+                    params.push('screenShare=1')
+                }
+
+                if (init) {
+                    params.push('init=1')
+                }
+
+                axios.get('/api/v4/openvidu/rooms/' + this.room + '?' + params.join('&'))
                     .then(response => {
                         // Response data contains: session, token and shareToken
                         this.roomState = 'ready'
                         this.session = response.data
-                        $('#app').addClass('meet')
+
+                        if (init) {
+                            this.joinSession()
+                        }
                     })
                     .catch(error => {
                         this.roomState = String(error.response.status)
                     })
 
                 if (document.fullscreenEnabled) {
                     $('#meet-session-menu').find('.link-fullscreen').first().removeClass('d-none')
                 }
             },
             joinSession() {
+                if (this.roomState == 423) {
+                    $('#meet-setup').addClass('d-none')
+                    $('#meet-auth').removeClass('d-none')
+                    return
+                }
+
+                if (this.roomState == 424) {
+                    this.initSession(true)
+                    return
+                }
+
+                $('#app').addClass('meet')
                 $('#meet-setup').addClass('d-none')
-                $('#meet-session-toolbar').removeClass('d-none')
+                $('#meet-session-toolbar,#meet-session-layout').removeClass('d-none')
 
                 this.session.nickname = this.nickname
                 this.session.menuElement = $('#meet-session-menu')[0]
                 this.session.chatElement = $('#meet-chat')[0]
 
                 this.meet.joinRoom(this.session)
             },
             leaveSession() {
                 this.meet.leaveRoom()
             },
+            logout() {
+                this.leaveSession()
+
+                // FIXME: Where exactly the user should land? Currently he'll land
+                //        on dashboard (if he's logged in) or login form (if he's not).
+
+                window.location = window.config['app.url']
+            },
             setMenuItem(type, state) {
                 $('#meet-session-menu').find('.link-' + type)[state ? 'removeClass' : 'addClass']('text-danger')
             },
             setupSession() {
                 this.meet.setup({
                     videoElement: $('#setup-preview video')[0],
                     volumeElement: $('#setup-preview .volume')[0],
                     success: setup => {
                         this.setup = setup
                         this.microphone = setup.audioSource
                         this.camera = setup.videoSource
 
                         this.setMenuItem('audio', setup.audioEnabled)
-                        this.setMenuItem('audio', setup.videoEnabled)
+                        this.setMenuItem('video', setup.videoEnabled)
                     },
                     error: error => {
                         // TODO: display nice error to the user
                         // FIXME: It looks like OpenVidu requires audio or video,
                         //        otherwise it will not connect to the session?
+
+                        this.setMenuItem('audio', false)
+                        this.setMenuItem('video', false)
                     }
                 })
             },
             setupCameraChange() {
                 this.meet.setupSetVideoDevice(this.camera).then(enabled => {
                     this.setMenuItem('video', enabled)
                 })
             },
             setupMicrophoneChange() {
                 this.meet.setupSetAudioDevice(this.microphone).then(enabled => {
                     this.setMenuItem('audio', enabled)
                 })
             },
-            sessionLogout() {
-                this.leaveSession()
-                this.$router.push({ name: 'dashboard' })
-                // TODO: If user is logged in, log him out?
-            },
             switchChat() {
                 let chat = $('#meet-chat')
                 let enabled = chat.is('.open')
 
                 this.setMenuItem('chat', !enabled)
                 chat.toggleClass('open')
 
                 if (!enabled) {
                     chat.find('textarea').focus()
                 }
             },
             switchFullscreen() {
                 const element = this.$el
 
                 $(element).off('fullscreenchange').on('fullscreenchange', (e) => {
                     let enabled = document.fullscreenElement == element
                     let buttons = $('#meet-session-menu').find('.link-fullscreen')
 
                     buttons.first()[enabled ? 'addClass' : 'removeClass']('d-none')
                     buttons.last()[!enabled ? 'addClass' : 'removeClass']('d-none')
                 })
 
                 if (document.fullscreenElement) {
                     document.exitFullscreen()
                 } else {
                     element.requestFullscreen()
                 }
             },
             switchSound() {
                 const enabled = this.meet.switchAudio()
                 this.setMenuItem('audio', enabled)
             },
             switchVideo() {
                 const enabled = this.meet.switchVideo()
                 this.setMenuItem('video', enabled)
             },
             switchScreen() {
                 this.meet.switchScreen(enabled => {
                     this.setMenuItem('screen', enabled)
                 })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Widgets/Menu.vue b/src/resources/vue/Widgets/Menu.vue
index ee48265e..152360dd 100644
--- a/src/resources/vue/Widgets/Menu.vue
+++ b/src/resources/vue/Widgets/Menu.vue
@@ -1,79 +1,82 @@
 <template>
     <nav :id="mode + '-menu'" class="navbar navbar-expand-lg navbar-light">
         <div class="container">
             <router-link class="navbar-brand" :to="{ name: 'dashboard' }">
                 <img :src="'/images/logo_' + mode + '.png'" :alt="app_name">
             </router-link>
             <button v-if="mode == 'header'" class="navbar-toggler" type="button"
                     data-toggle="collapse" :data-target="'#' + mode + '-menu-navbar'"
                     aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
             >
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div :id="mode + '-menu-navbar'" :class="'navbar' + (mode == 'header' ? ' collapse navbar-collapse' : '')">
                 <ul class="navbar-nav">
                     <li class="nav-item" v-if="!logged_in">
                         <router-link v-if="!$root.isAdmin && $root.hasRoute('signup')" class="nav-link link-signup" active-class="active" :to="{name: 'signup'}">Signup</router-link>
                         <a v-else class="nav-link link-signup" :href="app_url + '/signup'">Signup</a>
                     </li>
                     <li class="nav-item" v-if="!logged_in">
                         <a class="nav-link link-explore" href="https://kolabnow.com">Explore</a>
                     </li>
                     <li class="nav-item" v-if="!logged_in">
                         <a class="nav-link link-blog" href="https://blogs.kolabnow.com">Blog</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link link-support" href="https://kolabnow.com/support">Support</a>
                     </li>
                     <li class="nav-item" v-if="logged_in">
                         <a class="nav-link link-contact" href="https://kolabnow.com/contact">Contact</a>
                     </li>
                     <li class="nav-item" v-if="!logged_in && mode == 'footer'">
                         <a class="nav-link link-tos" href="https://kolabnow.com/tos">ToS</a>
                     </li>
                     <li class="nav-item" v-if="logged_in">
                         <a class="nav-link menulogin link-webmail" href="https://kolabnow.com/apps" target="_blank">Webmail</a>
                     </li>
                     <li class="nav-item" v-if="logged_in">
                         <router-link class="nav-link menulogin link-logout" active-class="active" :to="{name: 'logout'}">Logout</router-link>
                     </li>
                     <li class="nav-item" v-if="!logged_in && route == 'login'">
                         <a class="nav-link menulogin link-webmail" href="https://kolabnow.com/apps" target="_blank">Webmail</a>
                     </li>
-                    <li class="nav-item" v-if="!logged_in && (!route || route == 'signup' || $route.path == '/meet')">
+                    <li class="nav-item" v-if="!logged_in && (!route || route == 'signup')">
                         <router-link class="nav-link menulogin link-login" active-class="active" :to="{name: 'login'}">Login</router-link>
                     </li>
+                    <li class="nav-item" v-if="!logged_in && route == 'room'">
+                        <a class="nav-link menulogin link-login" :href="app_url + '/login'">Login</a>
+                    </li>
                 </ul>
                 <div v-if="mode == 'footer'" class="footer">
                     <div id="footer-copyright">@ Apheleia IT AG, 2020</div>
                     <div v-if="footer" id="footer-company">{{ footer }}</div>
                 </div>
             </div>
         </div>
     </nav>
 </template>
 
 <script>
     export default {
         props: {
             mode: { type: String, default: 'header' },
             footer: { type: String, default: '' }
         },
         data() {
             return {
                 app_name: window.config['app.name'],
                 app_url: window.config['app.url'],
             }
         },
         computed: {
             logged_in() { return this.$store.state.isLoggedIn },
             route() { return this.$route.name }
         },
         mounted() {
             // On mobile close the menu when the menu item is clicked
             if (this.mode == 'header') {
                 $('#header-menu .navbar').on('click', function() { $(this).removeClass('show') })
             }
         }
     }
 </script>
diff --git a/src/routes/api.php b/src/routes/api.php
index 790cf7b7..4caadedd 100644
--- a/src/routes/api.php
+++ b/src/routes/api.php
@@ -1,119 +1,127 @@
 <?php
 
 use Illuminate\Http\Request;
 
 /*
 |--------------------------------------------------------------------------
 | API Routes
 |--------------------------------------------------------------------------
 |
 | Here is where you can register API routes for your application. These
 | routes are loaded by the RouteServiceProvider within a group which
 | is assigned the "api" middleware group. Enjoy building your API!
 |
 */
 
 Route::group(
     [
         'middleware' => 'api',
         'prefix' => 'auth'
     ],
     function ($router) {
         Route::post('login', 'API\AuthController@login');
 
         Route::group(
             ['middleware' => 'auth:api'],
             function ($router) {
                 Route::get('info', 'API\AuthController@info');
                 Route::post('logout', 'API\AuthController@logout');
                 Route::post('refresh', 'API\AuthController@refresh');
             }
         );
     }
 );
 
 Route::group(
     [
         'domain' => \config('app.domain'),
         'middleware' => 'api',
         'prefix' => 'auth'
     ],
     function ($router) {
         Route::post('password-reset/init', 'API\PasswordResetController@init');
         Route::post('password-reset/verify', 'API\PasswordResetController@verify');
         Route::post('password-reset', 'API\PasswordResetController@reset');
 
         Route::get('signup/plans', 'API\SignupController@plans');
         Route::post('signup/init', 'API\SignupController@init');
         Route::post('signup/verify', 'API\SignupController@verify');
         Route::post('signup', 'API\SignupController@signup');
     }
 );
 
 Route::group(
     [
         'domain' => \config('app.domain'),
         'middleware' => 'auth:api',
         'prefix' => 'v4'
     ],
     function () {
         Route::apiResource('domains', API\V4\DomainsController::class);
         Route::get('domains/{id}/confirm', 'API\V4\DomainsController@confirm');
         Route::get('domains/{id}/status', 'API\V4\DomainsController@status');
 
         Route::apiResource('entitlements', API\V4\EntitlementsController::class);
         Route::apiResource('packages', API\V4\PackagesController::class);
         Route::apiResource('skus', API\V4\SkusController::class);
         Route::apiResource('users', API\V4\UsersController::class);
         Route::get('users/{id}/status', 'API\V4\UsersController@status');
 
         Route::apiResource('wallets', API\V4\WalletsController::class);
         Route::get('wallets/{id}/transactions', 'API\V4\WalletsController@transactions');
         Route::get('wallets/{id}/receipts', 'API\V4\WalletsController@receipts');
         Route::get('wallets/{id}/receipts/{receipt}', 'API\V4\WalletsController@receiptDownload');
 
         Route::post('payments', 'API\V4\PaymentsController@store');
         Route::get('payments/mandate', 'API\V4\PaymentsController@mandate');
         Route::post('payments/mandate', 'API\V4\PaymentsController@mandateCreate');
         Route::put('payments/mandate', 'API\V4\PaymentsController@mandateUpdate');
         Route::delete('payments/mandate', 'API\V4\PaymentsController@mandateDelete');
 
-        // For now we require authenticated users
-        // TODO: Allow guests/external users
-        Route::get('openvidu/rooms/{id}', 'API\V4\OpenViduController@joinRoom');
         Route::get('openvidu/rooms', 'API\V4\OpenViduController@index');
     }
 );
 
+// Note: In Laravel 7.x we could just use withoutMiddleware() instead of a separate group
+Route::group(
+    [
+        'domain' => \config('app.domain'),
+        'prefix' => 'v4'
+    ],
+    function () {
+        Route::get('openvidu/rooms/{id}', 'API\V4\OpenViduController@joinRoom');
+    }
+);
+
 Route::group(
     [
         'domain' => \config('app.domain'),
     ],
     function () {
         Route::post('webhooks/payment/{provider}', 'API\V4\PaymentsController@webhook');
         Route::post('webhooks/meet/openvidu', 'API\V4\OpenViduController@webhook');
     }
 );
 
 Route::group(
     [
         'domain' => 'admin.' . \config('app.domain'),
         'middleware' => ['auth:api', 'admin'],
         'prefix' => 'v4',
     ],
     function () {
         Route::apiResource('domains', API\V4\Admin\DomainsController::class);
         Route::get('domains/{id}/confirm', 'API\V4\Admin\DomainsController@confirm');
 
         Route::apiResource('entitlements', API\V4\Admin\EntitlementsController::class);
         Route::apiResource('packages', API\V4\Admin\PackagesController::class);
         Route::apiResource('skus', API\V4\Admin\SkusController::class);
         Route::apiResource('users', API\V4\Admin\UsersController::class);
         Route::post('users/{id}/suspend', 'API\V4\Admin\UsersController@suspend');
         Route::post('users/{id}/unsuspend', 'API\V4\Admin\UsersController@unsuspend');
         Route::apiResource('wallets', API\V4\Admin\WalletsController::class);
         Route::post('wallets/{id}/one-off', 'API\V4\Admin\WalletsController@oneOff');
         Route::get('wallets/{id}/transactions', 'API\V4\Admin\WalletsController@transactions');
         Route::apiResource('discounts', API\V4\Admin\DiscountsController::class);
     }
 );