diff --git a/.gitignore b/.gitignore
index d37decea..6c743ae5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,7 @@ config.js
 
 # misc
 .DS_Store
+/.idea
 *.pem
 
 # debug
diff --git a/components/UI/ServiceLink.js b/components/UI/ServiceLink.js
index 810d2d44..6efb65d6 100644
--- a/components/UI/ServiceLink.js
+++ b/components/UI/ServiceLink.js
@@ -19,24 +19,70 @@ const LockIconWrapper = styled(Icon)`
   }
 `;
 
-const ServiceLink = forwardRef(({ name, href, selected, passwordProtected }, ref) => {
+const BlockLink = styled(Link)`
+  display: block;
+`;
+
+const NotificationBadge = styled.span`
+  justify-self: end;
+  padding: 0 calc(var(--margin) / 4);
+  line-height: var(--line-height);
+  color: rgb(255 255 255);
+  background-color: var(--color-notification);
+
+  > small {
+    font-weight: 600;
+  }
+`;
+
+const Avatar = styled.img`
+  position: relative;
+  float: left;
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--color-foreground);
+
+  &.placeholder {
+    backdrop-filter: invert(100%);
+  }
+`;
+
+const ServiceLink = forwardRef(({ name, href, selected, passwordProtected, notifications, avatar }, ref) => {
     const { t } = useTranslation();
 
     return (
         <ServiceTable.Row>
-            <ServiceTable.Cell>
-                { /* Tell if this is our active item by displaying an arrow */ }
-                { selected && <span style={{ float: 'right' }}>→</span> }
-                <Link
-                    style={{ display: 'block' }}
+            { avatar && (
+                <ServiceTable.Cell>
+                    <Avatar src={avatar} alt={name} />
+                </ServiceTable.Cell>)
+            }
+            <ServiceTable.Cell width="100%">
+                <BlockLink
                     ref={ref}
                     href={href}
                 >
                     { name }
                     { /* Show a lock icon if this Link is password protected */ }
                     { passwordProtected && <LockIconWrapper title={t('password protected')}><LockIcon /></LockIconWrapper> }
-                </Link>
+                </BlockLink>
             </ServiceTable.Cell>
+            { /* Tell if this is our active item by displaying an arrow */ }
+            { selected &&
+                <ServiceTable.Cell align="right">
+                    →
+                </ServiceTable.Cell>
+            }
+            { /* Show notification badge if there are notifications */ }
+            { !selected && notifications > 0 &&
+                <ServiceTable.Cell>
+                    <NotificationBadge>
+                        <small>
+                            { notifications < 100 ? notifications : '99+' }
+                        </small>
+                    </NotificationBadge>
+                </ServiceTable.Cell>
+            }
         </ServiceTable.Row>
     );
 });
diff --git a/components/UI/ServiceSubmenu.js b/components/UI/ServiceSubmenu.js
index 468918fc..6e2e8b34 100644
--- a/components/UI/ServiceSubmenu.js
+++ b/components/UI/ServiceSubmenu.js
@@ -35,7 +35,7 @@ const Submenu = styled.aside`
   }
 `;
 
-export function ServiceSubmenu({ title, icon, subheadline, items, disabled }) {
+export function ServiceSubmenu({ title, icon, subheadline, items, disabled, onClick }) {
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState('');
@@ -53,7 +53,7 @@ export function ServiceSubmenu({ title, icon, subheadline, items, disabled }) {
                 { title && title }
                 <ToggleButton
                     disabled={disabled}
-                    onClick={handleMenuToggle}>
+                    onClick={onClick || handleMenuToggle}>
                     { icon ?
                         icon
                         :
@@ -63,7 +63,7 @@ export function ServiceSubmenu({ title, icon, subheadline, items, disabled }) {
                     }
                 </ToggleButton>
             </Header>
-            { isOpen && (
+            { isOpen && items && (
                 <Submenu>
                     { subheadline && <h3>{ subheadline }</h3> }
                     <select
diff --git a/components/_breakpoints.js b/components/_breakpoints.js
index 19173620..eb0c4fac 100644
--- a/components/_breakpoints.js
+++ b/components/_breakpoints.js
@@ -1,4 +1,6 @@
 export const breakpoints = {
     phoneOnly: `(max-width: 1079px)`,
     tabletAndAbove: `(min-width: 1080px)`,
+    phoneBreakpoint: 1079,
+    tabletAndAboveBreakpoint: 1080,
 };
diff --git a/lib/auth/MatrixAuthProvider.js b/lib/auth/MatrixAuthProvider.js
index 06113047..05515653 100644
--- a/lib/auth/MatrixAuthProvider.js
+++ b/lib/auth/MatrixAuthProvider.js
@@ -112,21 +112,22 @@ class MatrixAuthProvider {
      * @param {string} type - The type of the room or space.
      * @param {string} template - The template for the room or space.
      * @param {string} parentId - The ID of the parent space, if any.
+     * @TODO: Missing some @param declarations
      * @returns {Promise<Object>} A promise that resolves to the created room or space.
      * @throws {Error} If there was an error creating the room or space.
      */
-    async createRoom(name, isSpace, topic, joinRule, type, template, parentId) {
+    async createRoom(name, isSpace, topic, joinRule, type, template, parentId, application, visibility, historyVisible, encrypted) {
         const opts = {
             name: name,
             preset: 'private_chat',
             topic: topic,
-            visibility: 'private', // by default, we want rooms and spaces to be private, this can later be changed either in /content or /moderate
+            visibility: visibility || 'private', // by default, we want rooms and spaces to be private, this can later be changed either in /content or /moderate
             creation_content: {
                 type: isSpace ? 'm.space' : 'm.room',
             },
             initial_state: [{
                 type: 'm.room.history_visibility',
-                content: { history_visibility: 'world_readable' }, // history has to be world_readable so content of the rooms is visible for everyone who joins the room at a later point in time
+                content: { history_visibility: historyVisible || 'world_readable' }, // history has to be world_readable so content of the rooms is visible for everyone who joins the room at a later point in time
             },
             {
                 type: 'm.room.join_rules',
@@ -152,6 +153,16 @@ class MatrixAuthProvider {
             },
         };
 
+        if (encrypted) {
+            opts.initial_state.push({
+                type: 'm.room.encryption',
+                state_key: '',
+                content: {
+                    algorithm: 'm.megolm.v1.aes-sha2',
+                },
+            });
+        }
+
         if (parentId) {
             opts.initial_state.push({
                 // Spec: https://spec.matrix.org/v1.9/client-server-api/#mspaceparent
@@ -169,7 +180,8 @@ class MatrixAuthProvider {
         const medienhausMetaEvent = {
             type: type,
             template: template,
-            version: '0.4',
+            application: application,
+            version: '0.5',
         };
         await this.matrixClient.sendStateEvent(room.room_id, 'dev.medienhaus.meta', medienhausMetaEvent);
 
diff --git a/pages/chat/[[...roomId]].js b/pages/chat/[[...roomId]].js
index 0ddcd64c..941c1c47 100644
--- a/pages/chat/[[...roomId]].js
+++ b/pages/chat/[[...roomId]].js
@@ -1,13 +1,22 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { styled } from 'styled-components';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
-import Link from 'next/link';
+import { ChatNewIcon, CloseIcon, DeleteBinIcon } from '@remixicons/react/line';
 
 import { useMatrix } from '../../lib/Matrix';
 import DefaultLayout from '../../components/layouts/default';
+import { ServiceSubmenu } from '../../components/UI/ServiceSubmenu';
+import { ServiceTable } from '../../components/UI/ServiceTable';
+import TextButton from '../../components/UI/TextButton';
+import { breakpoints } from '../../components/_breakpoints';
+import CopyToClipboard from '../../components/UI/CopyToClipboard';
+import Icon from '../../components/UI/Icon';
+import LoadingSpinner from '../../components/UI/LoadingSpinner';
+import LoadingSpinnerInline from '../../components/UI/LoadingSpinnerInline';
+import ServiceLink from '../../components/UI/ServiceLink';
 
 const sortRooms = function(room) {
     return [
@@ -16,78 +25,48 @@ const sortRooms = function(room) {
     ];
 };
 
-const UnreadNotificationBadge = styled.div`
-  display: grid;
-  place-content: center;
-  width: 3ch;
-  height: var(--line-height);
-  color: rgb(255 255 255);
-  background-color: var(--color-notification);
-
-  > small {
-    font-weight: 600;
+const Sidebar = styled(DefaultLayout.Sidebar)`
+  @media ${breakpoints.phoneOnly} {
+    display: ${props => { return (props.roomId || !props.isRoomListVisible) ? 'none' : 'initial !important'; }};
   }
 `;
 
-const Avatar = styled.img`
-  position: relative;
-  width: 2rem;
-  height: 2rem;
-  margin-right: 0.6rem;
+const MobileBackButton = styled(TextButton)`
+  display: grid;
+  place-content: start;
 
-  &.placeholder {
-    backdrop-filter: invert(100%);
+  @media ${breakpoints.tabletAndAbove} {
+    display: none;
   }
 `;
 
-const SidebarListEntryWrapper = styled.a`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 0.3rem;
+const Summary = styled.summary`
+  h3 {
+    display: inline-block;
+    margin-bottom: 1rem;
+  }
 `;
 
-const RoomName = styled.span`
-  flex: 1 0;
-  height: 2rem;
-  overflow: hidden;
-  line-height: 2rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+const SidebarListEntry = function({ room, selected }) {
+    const avatar = room.avatar || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
-const SidebarListEntry = function({ room }) {
     return (
-        <Link href={`/chat/${room.roomId}`} passHref>
-            <SidebarListEntryWrapper>
-                { room.avatar ? (
-                    // Render the avatar if we have one
-                    <Avatar src={room.avatar} alt={room.name} />
-                ) : (
-                    // Render an empty GIF if we don't have an avatar
-                    <Avatar className="placeholder" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
-                ) }
-                <RoomName>{ room.name }</RoomName>
-                { room.notificationCount > 0 && (
-                    <UnreadNotificationBadge>
-                        <small>
-                            { room.notificationCount < 100 ? room.notificationCount : '99+' }
-                        </small>
-                    </UnreadNotificationBadge>
-                ) }
-            </SidebarListEntryWrapper>
-        </Link>
+        <ServiceLink name={room.name} href={`/chat/${room.roomId}`} selected={selected} notifications={room.notificationCount} avatar={avatar} />
     );
 };
 
-export default function Chat() {
+export default function RoomId() {
     const iframe = useRef();
     const router = useRouter();
     const roomId = _.get(router, 'query.roomId.0');
     const { t } = useTranslation('chat');
     const matrix = useMatrix();
+    const [windowWidth, setWindowWidth] = useState(null);
+    const [isRoomListVisible, setIsRoomListVisible] = useState(true);
+    const [isLoadingIframe, setIsLoadingIframe] = useState(false);
+    const [isLeavingRoom, setIsLeavingRoom] = useState(false);
 
-    // Injecting custom CSS into the Element <iframe>
+    // Injecting custom CSS into the Element <iframe> and detecting platform
     useEffect(() => {
         const iframeReference = iframe.current;
         if (!iframeReference) return;
@@ -98,7 +77,7 @@ export default function Chat() {
                 * {
                     --margin: 1rem;
 
-                    --cpd-color-theme-bg: rgb(255 255 255) !important; 
+                    --cpd-color-theme-bg: rgb(255 255 255) !important;
                     --cpd-avatar-bg: #000000 !important;
                     --cpd-avatar-color: #ffffff !important;
                     --cpd-color-text-action-accent: #000 !important;
@@ -106,7 +85,7 @@ export default function Chat() {
 
                     border-radius: 4px !important;
                 }
-                
+
                 @media (prefers-color-scheme: dark) {
                     * {
                         --cpd-color-theme-bg: hsl(0deg 0% 8%) !important;
@@ -115,7 +94,7 @@ export default function Chat() {
                         --cpd-color-text-action-accent: #fff !important;
                         --color-foreground-alpha: rgb(255 255 255 / 7%);
                     }
-                    
+
                     .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary, .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
                         background-color: #ffffff !important;
                         color: #000000 !important;
@@ -136,16 +115,54 @@ export default function Chat() {
                 /* Override all of the colorful usernames with the default text color */
                 .mx_EventTile .mx_DisambiguatedProfile > span { color: var(--cpd-color-text-primary) !important; }
 
-                @media (max-device-width: 1079px) {
-                    .mx_RoomHeader { padding: calc(var(--margin) * 0.75) var(--margin); border-bottom: 1px solid var(--color-foreground-alpha); }
-                    
+                /* Don't display explore public rooms option */
+                .mx_HomePage_button_explore { display: none !important }
+                .mx_HomePage_default_buttons { display: initial !important }
+                /* Don't display element welcome message */
+                .mx_HomePage_default_wrapper > div:first-child { display: none }
+
+                .mx_SearchBar {
+                    position: absolute; right: 0; left: 0; bottom: 0; z-index: 10;
+                    background: var( --cpd-color-theme-bg);
+                    border-top: 1px solid var(--roomlist-separator-color);
+                    z-index: 999999999;
+
+                }
+
+                .mx_SearchWarning {
+                    background-color: var(--cpd-avatar-color);
+                    padding: 1rem;
+                    z-index: 9999999999;
+                }
+
+                .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { padding-bottom: 80px; }
+                .mx_RoomView_messageListWrapper { padding-top: 140px; }
+
+                 @media (max-device-width: 1079px) {
+                    .mx_RoomHeader { padding: calc(var(--margin) * 0.75) var(--margin); border-bottom: 1px solid var(--color-foreground-alpha); 
+                    }
+
                     /* Make the "right panel" cover the full screen */
-                    .mx_RightPanel { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 999999; }
+                    .mx_RightPanel { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 999999; 
+                    }
+
+                @media ${breakpoints.phoneOnly} {
+                    .mx_RoomHeader { padding: 1rem var(--RoomView_MessageList-padding) }
 
-                    /* More breathing room in the main timeline of a chat */
-                    .mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout=group] .mx_EventTile_line,
-                    .mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout=group] .mx_ThreadSummary,
+                    .mx_RoomHeader_wrapper { flex-wrap: wrap }
+                    .mx_RoomHeader_avatar { flex: 0 1 1% }
+                    .mx_RoomHeader_name { font-weight: bold; flex: 1 0 }
+                    .mx_RoomTopic { flex: 0 0 100%; margin: 12px 6px }
                     .mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout=group] .mx_ThreadSummary_icon { margin-right: unset; }
+
+                    /* modal overlay when creating rooms */
+
+                    .mx_Dialog { width: 80% }
+                    .mx_CreateRoomDialog.mx_Dialog_fixedWidth { width: 100% }
+                    .mx_Dialog_fixedWidth { width: 100% }
+                    .mx_Dropdown_menu { max-width: 100% }
+
+                    #mx_JoinRuleDropdown__public { display: none }
                 }
             `);
             styleTag.appendChild(styleContent);
@@ -169,30 +186,112 @@ export default function Chat() {
         .sortBy(sortRooms)
         .value();
 
+    const toggleRoomListView = () => {
+        setIsRoomListVisible(prevState => {
+            if (!iframe.current) setIsLoadingIframe(true);
+            else setIsLoadingIframe(false);
+
+            return !prevState;
+        });
+        router.push('/chat');
+    };
+
+    const handleLeave = async (roomId) => {
+        setIsLeavingRoom(true);
+        await matrix.leaveRoom(roomId)
+            .catch(error => console.debug(error));
+        setIsLeavingRoom(false);
+    };
+
+    useEffect(() => {
+        if (roomId) {
+            if (!iframe.current) {
+                setIsLoadingIframe(true);
+            }
+
+            setIsRoomListVisible(false);
+        } else {
+            setIsLoadingIframe(false);
+        }
+    }, [roomId]);
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowWidth(window.innerWidth);
+        }
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('load', handleResize);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
     return (
         <>
-            <DefaultLayout.Sidebar>
-                <h2>/chat</h2>
+            <Sidebar roomId={!!roomId} isRoomListVisible={isRoomListVisible}>
+                <ServiceSubmenu
+                    title={<h2>/chat</h2>}
+                    onClick={toggleRoomListView}
+                    icon={<Icon><ChatNewIcon /></Icon>}
+                />
                 <details open>
-                    <summary><h3 style={{ display: 'inline-block', marginBottom: '1rem' }}>{ t('People') }</h3></summary>
-                    { directMessages && directMessages.map((room) => <SidebarListEntry key={room.roomId} room={room} />) }
+                    <Summary><h3>{ t('People') }</h3></Summary>
+                    <ServiceTable>
+                        <ServiceTable.Body>
+                            { directMessages && directMessages.map((room) => <SidebarListEntry key={room.roomId} room={room} selected={room.roomId === roomId} />) }
+                        </ServiceTable.Body>
+                    </ServiceTable>
                 </details>
                 <br />
                 <details open>
-                    <summary><h3 style={{ display: 'inline-block', marginBottom: '1rem' }}>{ t('Rooms') }</h3></summary>
-                    { otherRooms && otherRooms.map((room) => <SidebarListEntry key={room.roomId} room={room} />) }
+                    <Summary><h3>{ t('Rooms') }</h3></Summary>
+                    <ServiceTable>
+                        <ServiceTable.Body>
+                            { otherRooms && otherRooms.map((room) => {
+                                return <ServiceTable key={room.roomId}><SidebarListEntry key={room.roomId} room={room} selected={room.roomId === roomId} /></ServiceTable>;
+                            }) }
+                        </ServiceTable.Body>
+                    </ServiceTable>
                 </details>
                 <br />
-            </DefaultLayout.Sidebar>
-            { roomId && (
-                <DefaultLayout.IframeWrapper>
-                    <iframe
-                        ref={iframe}
-                        title="/chat"
-                        src={`${getConfig().publicRuntimeConfig.chat.pathToElement}/#/room/${roomId}`}
-                    />
-                </DefaultLayout.IframeWrapper>
-            ) }
+            </Sidebar>
+            <DefaultLayout.IframeWrapper>
+
+                { isLoadingIframe ? <LoadingSpinner />
+                    : iframe.current && <DefaultLayout.IframeHeader>
+                        <h2>{ matrix.rooms.get(roomId)?.name }</h2>
+                        <DefaultLayout.IframeHeaderButtonWrapper>
+                            { roomId && <>
+                                <CopyToClipboard text={roomId} />
+                                <TextButton title={t('Leave room and remove from my library')} onClick={() => handleLeave(roomId)}>
+                                    { isLeavingRoom ? <LoadingSpinnerInline /> : <Icon><DeleteBinIcon /></Icon> }
+                                </TextButton>
+                            </> }
+                            <MobileBackButton onClick={toggleRoomListView}>
+                                <Icon>
+                                    <CloseIcon />
+                                </Icon>
+                            </MobileBackButton>
+                        </DefaultLayout.IframeHeaderButtonWrapper>
+                    </DefaultLayout.IframeHeader> }
+
+                { /* The iframe can take a long time to load which is why we show a loading spinner.
+                The style hack is needed because setting 'display' to 'none' creates an error.
+                Element performs a few compatability checks before onLoaded fires.
+                Therefore, Element throws an error, saying the current browser is not supported.
+                Setting the height to 0px centers the loading spinner before the iframe is ready.
+                */ }
+                { (!isRoomListVisible || windowWidth > breakpoints.phoneBreakpoint) && <iframe
+                    ref={iframe}
+                    title="/chat"
+                    style={{ visibility: isLoadingIframe ? 'hidden' : 'visible', height: isLoadingIframe ? '0px' : '100%' }}
+                    onLoad={() => setIsLoadingIframe(false)}
+                    src={`${getConfig().publicRuntimeConfig.chat.pathToElement}/#/${roomId ? 'room/' + roomId : 'home'}`}
+                /> }
+            </DefaultLayout.IframeWrapper>
         </>
     );
 }