diff --git a/src/app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component.html b/src/app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component.html
new file mode 100644
index 00000000..764d05f0
--- /dev/null
+++ b/src/app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component.html
@@ -0,0 +1,58 @@
+<div class="flex flex-col flex-auto min-w-0">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex flex-wrap items-center font-medium">
+                <div>
+                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <a class="ml-1 text-primary-500">Other Components</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <span class="ml-1 text-secondary">Common</span>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Quick Chat
+                </h2>
+            </div>
+        </div>
+        <button
+            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
+            mat-icon-button
+            (click)="toggleDrawer()">
+            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
+        </button>
+    </div>
+
+    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
+
+        <p>
+            Quick Chat is a simple component to show a Chat sidebar across the entire layout. You can remove the component from
+            the template file of your preferred layout to remove the Quick Chat completely.
+        </p>
+
+        <h2>Usage</h2>
+        <p>
+            Here's the basic usage of the component:
+        </p>
+        <textarea
+            fuse-highlight
+            lang="html">
+            <quick-chat></quick-chat>
+        </textarea>
+
+    </div>
+
+</div>
diff --git a/src/app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component.ts b/src/app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component.ts
new file mode 100644
index 00000000..4ec5c25b
--- /dev/null
+++ b/src/app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
+
+@Component({
+    selector   : 'quick-chat',
+    templateUrl: './quick-chat.component.html'
+})
+export class QuickChatComponent
+{
+    /**
+     * Constructor
+     */
+    constructor(private _otherComponentsComponent: OtherComponentsComponent)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the drawer
+     */
+    toggleDrawer(): void
+    {
+        // Toggle the drawer
+        this._otherComponentsComponent.matDrawer.toggle();
+    }
+}
diff --git a/src/app/modules/admin/ui/other-components/other-components.component.ts b/src/app/modules/admin/ui/other-components/other-components.component.ts
index 3a32cb1d..b30bfcb7 100644
--- a/src/app/modules/admin/ui/other-components/other-components.component.ts
+++ b/src/app/modules/admin/ui/other-components/other-components.component.ts
@@ -59,6 +59,12 @@ export class OtherComponentsComponent implements OnInit, OnDestroy
                         type : 'basic',
                         link : '/ui/other-components/common/notifications'
                     },
+                    {
+                        id   : 'other-components.common.quick-chat',
+                        title: 'Quick chat',
+                        type : 'basic',
+                        link : '/ui/other-components/common/quick-chat'
+                    },
                     {
                         id   : 'other-components.common.search',
                         title: 'Search',
diff --git a/src/app/modules/admin/ui/other-components/other-components.module.ts b/src/app/modules/admin/ui/other-components/other-components.module.ts
index 580deadf..89675e6b 100644
--- a/src/app/modules/admin/ui/other-components/other-components.module.ts
+++ b/src/app/modules/admin/ui/other-components/other-components.module.ts
@@ -13,6 +13,7 @@ import { OverviewComponent } from 'app/modules/admin/ui/other-components/common/
 import { LanguagesComponent } from 'app/modules/admin/ui/other-components/common/languages/languages.component';
 import { MessagesComponent } from 'app/modules/admin/ui/other-components/common/messages/messages.component';
 import { NotificationsComponent } from 'app/modules/admin/ui/other-components/common/notifications/notifications.component';
+import { QuickChatComponent } from 'app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component';
 import { SearchComponent } from 'app/modules/admin/ui/other-components/common/search/search.component';
 import { ShortcutsComponent } from 'app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component';
 import { UserComponent } from 'app/modules/admin/ui/other-components/common/user/user.component';
@@ -29,6 +30,7 @@ import { otherComponentsRoutes } from 'app/modules/admin/ui/other-components/oth
         LanguagesComponent,
         MessagesComponent,
         NotificationsComponent,
+        QuickChatComponent,
         SearchComponent,
         ShortcutsComponent,
         UserComponent,
diff --git a/src/app/modules/admin/ui/other-components/other-components.routing.ts b/src/app/modules/admin/ui/other-components/other-components.routing.ts
index 6fb65504..0f8afee7 100644
--- a/src/app/modules/admin/ui/other-components/other-components.routing.ts
+++ b/src/app/modules/admin/ui/other-components/other-components.routing.ts
@@ -4,6 +4,7 @@ import { OverviewComponent } from 'app/modules/admin/ui/other-components/common/
 import { LanguagesComponent } from 'app/modules/admin/ui/other-components/common/languages/languages.component';
 import { MessagesComponent } from 'app/modules/admin/ui/other-components/common/messages/messages.component';
 import { NotificationsComponent } from 'app/modules/admin/ui/other-components/common/notifications/notifications.component';
+import { QuickChatComponent } from 'app/modules/admin/ui/other-components/common/quick-chat/quick-chat.component';
 import { SearchComponent } from 'app/modules/admin/ui/other-components/common/search/search.component';
 import { ShortcutsComponent } from 'app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component';
 import { UserComponent } from 'app/modules/admin/ui/other-components/common/user/user.component';
@@ -50,6 +51,10 @@ export const otherComponentsRoutes: Route[] = [
                         path     : 'search',
                         component: SearchComponent
                     },
+                    {
+                        path     : 'quick-chat',
+                        component: QuickChatComponent
+                    },
                     {
                         path     : 'shortcuts',
                         component: ShortcutsComponent