diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html
index 00a10741..fa2bd51b 100644
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -132,6 +132,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
                 <!-- VERTICAL LAYOUT #2 -->
@@ -226,6 +243,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
                 <!-- VERTICAL LAYOUT #3 -->
@@ -318,6 +352,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
                 <!-- HORIZONTAL LAYOUT #1 -->
@@ -405,6 +456,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
             </ng-container>
diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts
index 2243e1ea..7facf8ce 100644
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -62,24 +62,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         // noinspection TypeScriptValidateTypes
         this.form = this._formBuilder.group({
             layout          : this._formBuilder.group({
-                style  : new FormControl(),
-                width  : new FormControl(),
-                navbar : this._formBuilder.group({
+                style    : new FormControl(),
+                width    : new FormControl(),
+                navbar   : this._formBuilder.group({
                     background: new FormControl(),
                     folded    : new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl(),
                     variant   : new FormControl()
                 }),
-                toolbar: this._formBuilder.group({
+                toolbar  : this._formBuilder.group({
                     background: new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl()
                 }),
-                footer : this._formBuilder.group({
+                footer   : this._formBuilder.group({
                     background: new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl()
+                }),
+                sidepanel: this._formBuilder.group({
+                    hidden: new FormControl(),
+                    position  : new FormControl()
                 })
             }),
             customScrollbars: new FormControl()
diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts
index 6ad44ba4..1b513489 100644
--- a/src/@fuse/types/fuse-config.ts
+++ b/src/@fuse/types/fuse-config.ts
@@ -19,6 +19,10 @@ export interface FuseConfig
             background: string,
             hidden: boolean,
             position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
+        },
+        sidepanel: {
+            hidden: boolean,
+            position: 'left' | 'right'
         }
     };
     customScrollbars: boolean;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b1bd2000..fe46258b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -20,6 +20,7 @@
 
 <!-- THEME OPTIONS PANEL -->
 <button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
+        [ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right'}"
         (click)="toggleSidebarOpen('themeOptionsPanel')">
     <mat-icon>settings</mat-icon>
 </button>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e04a412f..a3c28b9f 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -11,7 +11,7 @@
     .theme-options-button {
         position: absolute;
         top: 160px;
-        right: 70px;
+        right: 0;
         width: 48px;
         height: 48px;
         line-height: 48px;
@@ -23,8 +23,12 @@
         opacity: .90;
         z-index: 998;
 
-        @include media-breakpoint-down('md') {
-            right: 0;
+
+        &.right-side-panel {
+
+            @include media-breakpoint-up('lg') {
+                right: 70px;
+            }
         }
 
         mat-icon {
diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts
index aac07997..7db7b88c 100644
--- a/src/app/fuse-config/index.ts
+++ b/src/app/fuse-config/index.ts
@@ -10,24 +10,28 @@ import { FuseConfig } from '@fuse/types';
 
 export const fuseConfig: FuseConfig = {
     layout          : {
-        style  : 'vertical-layout-1',
-        width  : 'fullwidth',
-        navbar : {
+        style    : 'vertical-layout-1',
+        width    : 'fullwidth',
+        navbar   : {
             background: 'mat-fuse-dark-700-bg',
             folded    : false,
             hidden    : false,
             position  : 'left',
             variant   : 'vertical-style-1'
         },
-        toolbar: {
+        toolbar  : {
             background: 'mat-white-500-bg',
             hidden    : false,
             position  : 'below-static'
         },
-        footer : {
+        footer   : {
             background: 'mat-fuse-dark-900-bg',
             hidden    : false,
             position  : 'below-fixed'
+        },
+        sidepanel: {
+            hidden  : false,
+            position: 'right'
         }
     },
     customScrollbars: true
diff --git a/src/app/layout/components/chat-panel/chat-panel.component.html b/src/app/layout/components/chat-panel/chat-panel.component.html
index 07ebf17a..84b4ee42 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/src/app/layout/components/chat-panel/chat-panel.component.html
@@ -22,7 +22,7 @@
         <mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
     </button>
 
-    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
+    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
         <mat-icon class="secondary-text">arrow_forward</mat-icon>
     </button>
 
diff --git a/src/app/layout/components/chat-panel/chat-panel.component.scss b/src/app/layout/components/chat-panel/chat-panel.component.scss
index ffb556f7..9676ba32 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/src/app/layout/components/chat-panel/chat-panel.component.scss
@@ -10,6 +10,11 @@ chat-panel {
     z-index: 99;
     overflow: hidden;
 
+    @include media-breakpoint-down('xs') {
+        max-width: none !important;
+        width: 100% !important;
+    }
+
     .header {
         height: 64px;
         max-height: 64px;
@@ -26,6 +31,7 @@ chat-panel {
                 transition: opacity 300ms ease-in-out;
             }
         }
+
     }
 
     #contacts-list {
@@ -350,6 +356,20 @@ fuse-sidebar {
             width: 100vw !important;
         }
 
+        &.left-chat-panel {
+
+            .header {
+
+                .toggle-sidebar-folded,
+                .toggle-sidebar-open {
+
+                    mat-icon {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
         // Folded
         &.folded {
 
diff --git a/src/app/layout/components/chat-panel/chat-panel.component.ts b/src/app/layout/components/chat-panel/chat-panel.component.ts
index df12d123..e998de21 100644
--- a/src/app/layout/components/chat-panel/chat-panel.component.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.component.ts
@@ -142,14 +142,6 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Toggle sidebar folded status
-     */
-    toggleSidebarFolded(): void
-    {
-        this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
-    }
-
     /**
      * Fold the temporarily unfolded sidebar back
      */
diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html
index 504a8b19..e06ee6be 100644
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above -->
@@ -55,13 +69,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-              lockedOpen="gt-md">
-    <chat-panel></chat-panel>
-</fuse-sidebar>
-<!-- / CHAT PANEL -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html
index 737e6666..942a5b2b 100644
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/src/app/layout/vertical/layout-1/layout-1.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above -->
@@ -67,13 +81,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-              lockedOpen="gt-md">
-    <chat-panel></chat-panel>
-</fuse-sidebar>
-<!-- / CHAT PANEL -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html
index 3b3714bf..f4fd6dd1 100644
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
@@ -67,13 +81,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-              lockedOpen="gt-md">
-    <chat-panel></chat-panel>
-</fuse-sidebar>
-<!-- / CHAT PANEL -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html
index f133a812..9154e39d 100644
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
@@ -53,13 +67,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-              lockedOpen="gt-md">
-    <chat-panel></chat-panel>
-</fuse-sidebar>
-<!-- / CHAT PANEL -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">