diff --git a/src/content-handlers/iiif/BaseConfig.ts b/src/content-handlers/iiif/BaseConfig.ts
index 69967e956..35fcf2293 100644
--- a/src/content-handlers/iiif/BaseConfig.ts
+++ b/src/content-handlers/iiif/BaseConfig.ts
@@ -199,6 +199,7 @@ export type FooterPanelContent = {
   feedback: string;
   fullScreen: string;
   moreInfo: string;
+  toggleLeftPanel: string;
   open: string;
   share: string;
 };
diff --git a/src/content-handlers/iiif/IIIFEvents.ts b/src/content-handlers/iiif/IIIFEvents.ts
index 865abb540..7888e3c1b 100644
--- a/src/content-handlers/iiif/IIIFEvents.ts
+++ b/src/content-handlers/iiif/IIIFEvents.ts
@@ -37,7 +37,6 @@ export class IIIFEvents {
   static HIDE_HELP_DIALOGUE: string = "hideHelpDialogue";
   static HIDE_INFORMATION: string = "hideInformation";
   static HIDE_LOGIN_DIALOGUE: string = "hideLoginDialogue";
-  static HIDE_MOREINFO_DIALOGUE: string = "hideMoreInfoDialogue";
   static HIDE_MULTISELECT_DIALOGUE: string = "hideMultiSelectDialogue";
   static HIDE_OVERLAY: string = "hideOverlay";
   static HIDE_RESTRICTED_DIALOGUE: string = "hideRestrictedDialogue";
@@ -100,7 +99,6 @@ export class IIIFEvents {
   static SHOW_LOGIN_DIALOGUE: string = "showLoginDialogue";
   static SHOW_MESSAGE: string = "showMessage";
   static MESSAGE_DISPLAYED: string = "messageDisplayed";
-  static SHOW_MOREINFO_DIALOGUE: string = "showMoreInfoDialogue";
   static SHOW_MULTISELECT_DIALOGUE: string = "showMultiSelectDialogue";
   static SHOW_OVERLAY: string = "showOverlay";
   static SHOW_RESTRICTED_DIALOGUE: string = "showRestrictedDialogue";
@@ -108,6 +106,8 @@ export class IIIFEvents {
   static SHOW_SHARE_DIALOGUE: string = "showShareDialogue";
   static SHOW_TERMS_OF_USE: string = "showTermsOfUse";
   static TARGET_CHANGE: string = "targetChange";
+  static TOGGLE_RIGHT_PANEL: string = "toggleRightPanel";
+  static TOGGLE_LEFT_PANEL: string = "toggleLeftPanel";
   static THUMB_MULTISELECTED: string = "thumbMultiSelected";
   static THUMB_SELECTED: string = "thumbSelected";
   static TOGGLE_EXPAND_LEFT_PANEL: string = "toggleExpandLeftPanel";
diff --git a/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json
index 37c6212fb..21384ae2f 100644
--- a/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json
@@ -110,6 +110,7 @@
         "feedback": "Feedback",
         "fullScreen": "Full Screen",
         "moreInfo": "More Information",
+        "toggleLeftPanel": "Toggle Left Panel",
         "open": "Open",
         "share": "Share"
       }
diff --git a/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json
index 8ba3c2c6c..745773d83 100644
--- a/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json
@@ -138,7 +138,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "$toggleLeftPanel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json
index e243795e8..14f2b54de 100644
--- a/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json
@@ -134,7 +134,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts
index 21320ef90..270987fcb 100644
--- a/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts
+++ b/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts
@@ -8,7 +8,6 @@ import { FooterPanel } from "../../modules/uv-shared-module/FooterPanel";
 import { FooterPanel as MobileFooterPanel } from "../../modules/uv-ebookmobilefooterpanel-module/MobileFooter";
 import { HeaderPanel } from "../../modules/uv-shared-module/HeaderPanel";
 import { IEbookExtension } from "./IEbookExtension";
-import { MoreInfoDialogue } from "../../modules/uv-dialogues-module/MoreInfoDialogue";
 import { MoreInfoRightPanel } from "../../modules/uv-moreinforightpanel-module/MoreInfoRightPanel";
 import { SettingsDialogue } from "./SettingsDialogue";
 import { ShareDialogue } from "./ShareDialogue";
@@ -22,7 +21,6 @@ export default class Extension
   implements IEbookExtension
 {
   $downloadDialogue: JQuery;
-  $moreInfoDialogue: JQuery;
   $multiSelectDialogue: JQuery;
   $settingsDialogue: JQuery;
   $shareDialogue: JQuery;
@@ -32,7 +30,6 @@ export default class Extension
   headerPanel: HeaderPanel<Config["modules"]["headerPanel"]>;
   leftPanel: EbookLeftPanel;
   mobileFooterPanel: MobileFooterPanel;
-  moreInfoDialogue: MoreInfoDialogue;
   rightPanel: MoreInfoRightPanel;
   settingsDialogue: SettingsDialogue;
   shareDialogue: ShareDialogue;
@@ -90,12 +87,6 @@ export default class Extension
       this.shell.$footerPanel.hide();
     }
 
-    this.$moreInfoDialogue = $(
-      '<div class="overlay moreInfo" aria-hidden="true"></div>'
-    );
-    this.shell.$overlays.append(this.$moreInfoDialogue);
-    this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue);
-
     this.$shareDialogue = $(
       '<div class="overlay share" aria-hidden="true"></div>'
     );
diff --git a/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json
index 3caf8beb7..6f1824338 100644
--- a/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json
@@ -107,7 +107,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json
index 27e21be1b..3457fa79d 100644
--- a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json
@@ -108,7 +108,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts
index 76f4a825d..adb85a9b5 100644
--- a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts
+++ b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts
@@ -7,7 +7,6 @@ import { FooterPanel } from "../../modules/uv-shared-module/FooterPanel";
 import { FooterPanel as MobileFooterPanel } from "../../modules/uv-modelviewermobilefooterpanel-module/MobileFooter";
 import { HeaderPanel } from "../../modules/uv-shared-module/HeaderPanel";
 import { HelpDialogue } from "../../modules/uv-dialogues-module/HelpDialogue";
-import { MoreInfoDialogue } from "../../modules/uv-dialogues-module/MoreInfoDialogue";
 import { MoreInfoRightPanel } from "../../modules/uv-moreinforightpanel-module/MoreInfoRightPanel";
 import { SettingsDialogue } from "./SettingsDialogue";
 import { ShareDialogue } from "./ShareDialogue";
@@ -26,7 +25,6 @@ export default class ModelViewerExtension extends BaseExtension<Config> {
   $downloadDialogue: JQuery;
   $shareDialogue: JQuery;
   $helpDialogue: JQuery;
-  $moreInfoDialogue: JQuery;
   $settingsDialogue: JQuery;
   centerPanel: ModelViewerCenterPanel;
   downloadDialogue: DownloadDialogue;
@@ -35,7 +33,6 @@ export default class ModelViewerExtension extends BaseExtension<Config> {
   helpDialogue: HelpDialogue;
   leftPanel: ContentLeftPanel;
   mobileFooterPanel: FooterPanel<Config["modules"]["footerPanel"]>;
-  moreInfoDialogue: MoreInfoDialogue;
   rightPanel: MoreInfoRightPanel;
   settingsDialogue: SettingsDialogue;
   shareDialogue: ShareDialogue;
@@ -98,12 +95,6 @@ export default class ModelViewerExtension extends BaseExtension<Config> {
       this.shell.$footerPanel.hide();
     }
 
-    this.$moreInfoDialogue = $(
-      '<div class="overlay moreInfo" aria-hidden="true"></div>'
-    );
-    this.shell.$overlays.append(this.$moreInfoDialogue);
-    this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue);
-
     this.$downloadDialogue = $(
       '<div class="overlay download" aria-hidden="true"></div>'
     );
diff --git a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json
index a2924d570..c814beaf3 100644
--- a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json
@@ -121,7 +121,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
index 4bb5cc9ce..af31eafde 100644
--- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
+++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
@@ -12,7 +12,6 @@ import { FooterPanel } from "../../modules/uv-searchfooterpanel-module/FooterPan
 import { HelpDialogue } from "../../modules/uv-dialogues-module/HelpDialogue";
 import { IOpenSeadragonExtensionData } from "./IOpenSeadragonExtensionData";
 import { Mode } from "./Mode";
-import { MoreInfoDialogue } from "../../modules/uv-dialogues-module/MoreInfoDialogue";
 import { MoreInfoRightPanel } from "../../modules/uv-moreinforightpanel-module/MoreInfoRightPanel";
 import { MultiSelectDialogue } from "../../modules/uv-multiselectdialogue-module/MultiSelectDialogue";
 import { MultiSelectionArgs } from "./MultiSelectionArgs";
@@ -60,7 +59,6 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
   $downloadDialogue: JQuery;
   $externalContentDialogue: JQuery;
   $helpDialogue: JQuery;
-  $moreInfoDialogue: JQuery;
   $multiSelectDialogue: JQuery;
   $settingsDialogue: JQuery;
   $shareDialogue: JQuery;
@@ -78,7 +76,6 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
   leftPanel: ContentLeftPanel;
   mobileFooterPanel: MobileFooterPanel;
   mode: Mode;
-  moreInfoDialogue: MoreInfoDialogue;
   multiSelectDialogue: MultiSelectDialogue;
   previousAnnotationRect: AnnotationRect | null;
   rightPanel: MoreInfoRightPanel;
@@ -551,12 +548,6 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
     this.shell.$overlays.append(this.$helpDialogue);
     this.helpDialogue = new HelpDialogue(this.$helpDialogue);
 
-    this.$moreInfoDialogue = $(
-      '<div class="overlay moreInfo" aria-hidden="true"></div>'
-    );
-    this.shell.$overlays.append(this.$moreInfoDialogue);
-    this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue);
-
     this.$multiSelectDialogue = $(
       '<div class="overlay multiSelect" aria-hidden="true"></div>'
     );
diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts
index 88d016cdf..090f695d4 100644
--- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts
+++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts
@@ -198,6 +198,7 @@ type MobileFooterPanelOptions = FooterPanelOptions & {};
 type MobileFooterPanelContent = FooterPanelContent & {
   rotateRight: string;
   moreInfo: string;
+  toggleLeftPanel: string;
   zoomIn: string;
   zoomOut: string;
 };
diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json
index 363c14b22..e8e512593 100644
--- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json
@@ -187,7 +187,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "genericDialogue": {
@@ -424,7 +425,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "settingsDialogue": {
@@ -538,7 +540,8 @@
         "feedback": "$feedback",
         "fullScreen": "$fullScreen",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "restrictedDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json
index da651f467..c90b85d2a 100644
--- a/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json
+++ b/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json
@@ -83,7 +83,8 @@
         "fullScreen": "$fullScreen",
         "moreInfo": "$moreInfo",
         "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts b/src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts
deleted file mode 100644
index 1f16db897..000000000
--- a/src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-const $ = require("jquery");
-import { IIIFEvents } from "../../IIIFEvents";
-import { Dialogue } from "../uv-shared-module/Dialogue";
-import { sanitize } from "../../../../Utils";
-import { Bools } from "@edsilv/utils";
-import { MetadataComponent, LimitType } from "@iiif/iiif-metadata-component";
-import { BaseConfig } from "../../BaseConfig";
-
-export class MoreInfoDialogue extends Dialogue<
-  BaseConfig["modules"]["moreInfoRightPanel"]
-> {
-  $title: JQuery;
-  metadataComponent: any;
-  $metadata: JQuery;
-
-  constructor($element: JQuery) {
-    super($element);
-  }
-
-  create(): void {
-    this.setConfig("moreInfoDialogue");
-
-    super.create();
-
-    this.openCommand = IIIFEvents.SHOW_MOREINFO_DIALOGUE;
-    this.closeCommand = IIIFEvents.HIDE_MOREINFO_DIALOGUE;
-
-    this.extensionHost.subscribe(
-      this.openCommand,
-      (triggerButton: HTMLElement) => {
-        this.open(triggerButton);
-      }
-    );
-
-    this.extensionHost.subscribe(this.closeCommand, () => {
-      this.close();
-    });
-
-    this.extensionHost.subscribe(IIIFEvents.CANVAS_INDEX_CHANGE, () => {
-      this.metadataComponent.set(this._getData());
-    });
-
-    this.config.content =
-      this.extension.data.config!.modules.moreInfoRightPanel.content;
-    this.config.options =
-      this.extension.data.config!.modules.moreInfoRightPanel.options;
-
-    // create ui
-    this.$title = $(
-      `<div role="heading" class="heading">${this.config.content.title}</div>`
-    );
-    this.$content.append(this.$title);
-
-    this.$metadata = $('<article class="iiif-metadata-component"></article>');
-    this.$content.append(this.$metadata);
-
-    this.metadataComponent = new MetadataComponent({
-      target: <HTMLElement>this.$metadata[0],
-    });
-
-    // hide
-    this.$element.hide();
-  }
-
-  open(triggerButton?: HTMLElement): void {
-    super.open(triggerButton);
-    this.metadataComponent.set(this._getData());
-  }
-
-  private _getData() {
-    return {
-      canvasDisplayOrder: this.config.options.canvasDisplayOrder,
-      canvases: this.extension.getCurrentCanvases(),
-      canvasExclude: this.config.options.canvasExclude,
-      canvasLabels: this.extension.getCanvasLabels(this.content.page),
-      content: this.config.content,
-      copiedMessageDuration: 2000,
-      copyToClipboardEnabled: Bools.getBool(
-        this.config.options.copyToClipboardEnabled,
-        false
-      ),
-      helper: this.extension.helper,
-      licenseFormatter: null,
-      limit: this.config.options.textLimit || 4,
-      limitType: LimitType.LINES,
-      manifestDisplayOrder: this.config.options.manifestDisplayOrder,
-      manifestExclude: this.config.options.manifestExclude,
-      range: this.extension.getCurrentCanvasRange(),
-      rtlLanguageCodes: this.config.options.rtlLanguageCodes,
-      sanitizer: (html: string) => {
-        return sanitize(html);
-      },
-      showAllLanguages: this.config.options.showAllLanguages,
-    };
-  }
-
-  close(): void {
-    super.close();
-  }
-
-  resize(): void {
-    this.setDockedPosition();
-
-    // always put tabindex on, so the metadata is focusable,
-    // just in case there's something wrong with the height
-    // comparison below
-    this.$metadata.attr("tabindex", 0);
-    this.$metadata.attr("aria-label", this.config.content.title);
-
-    // if metadata's first group's height is lte than metadata (200px fixed I think),
-    // there's no scroll happening, so no focus needed, and no aria label either
-    if (
-      this.$metadata.find(".groups").first().height() <= this.$metadata.height()
-    ) {
-      this.$metadata.removeAttr("tabindex");
-      this.$metadata.removeAttr("aria-label");
-    }
-  }
-}
diff --git a/src/content-handlers/iiif/modules/uv-osdmobilefooterpanel-module/MobileFooter.ts b/src/content-handlers/iiif/modules/uv-osdmobilefooterpanel-module/MobileFooter.ts
index c7bb229c5..3578b2959 100644
--- a/src/content-handlers/iiif/modules/uv-osdmobilefooterpanel-module/MobileFooter.ts
+++ b/src/content-handlers/iiif/modules/uv-osdmobilefooterpanel-module/MobileFooter.ts
@@ -28,21 +28,21 @@ export class FooterPanel extends BaseFooterPanel<
                 <i class="uv-icon-rotate" aria-hidden="true"></i>${this.content.rotateRight}
             </button>
         `);
-    this.$options.prepend(this.$rotateButton);
+    this.$mainOptions.prepend(this.$rotateButton);
 
     this.$zoomOutButton = $(`
             <button class="btn imageBtn zoomOut" title="${this.content.zoomOut}">
                 <i class="uv-icon-zoom-out" aria-hidden="true"></i>${this.content.zoomOut}
             </button>
         `);
-    this.$options.prepend(this.$zoomOutButton);
+    this.$mainOptions.prepend(this.$zoomOutButton);
 
     this.$zoomInButton = $(`
             <button class="btn imageBtn zoomIn" title="${this.content.zoomIn}">
                 <i class="uv-icon-zoom-in" aria-hidden="true"></i>${this.content.zoomIn}
             </button>
         `);
-    this.$options.prepend(this.$zoomInButton);
+    this.$mainOptions.prepend(this.$zoomInButton);
 
     this.$zoomInButton.onPressed(() => {
       this.extensionHost.publish(OpenSeadragonExtensionEvents.ZOOM_IN);
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts
index 11c538774..9baec43af 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts
@@ -17,6 +17,10 @@ export class FooterPanel<
   $openButton: JQuery;
   $fullScreenBtn: JQuery;
   $options: JQuery;
+  $toggleLeftPanelButton: JQuery;
+  $mainOptions: JQuery;
+  $leftOptions: JQuery;
+  $rightOptions: JQuery;
 
   constructor($element: JQuery) {
     super($element);
@@ -50,13 +54,22 @@ export class FooterPanel<
     this.$options = $('<div class="options"></div>');
     this.$element.append(this.$options);
 
+    this.$leftOptions = $('<div class="left-options"></div>');
+    this.$options.prepend(this.$leftOptions);
+
+    this.$mainOptions = $('<div class="main-options"></div>');
+    this.$options.append(this.$mainOptions);
+
+    this.$rightOptions = $('<div class="right-options"></div>');
+    this.$options.append(this.$rightOptions);
+
     this.$feedbackButton = $(`
           <button class="feedback btn imageBtn" title="${this.content.feedback}">
             <i class="uv-icon uv-icon-feedback" aria-hidden="true"></i>
             <span class="sr-only">${this.content.feedback}</span>
           </button>
         `);
-    this.$options.prepend(this.$feedbackButton);
+    this.$mainOptions.prepend(this.$feedbackButton);
 
     this.$openButton = $(`
           <button class="open btn imageBtn" title="${this.content.open}">
@@ -64,7 +77,7 @@ export class FooterPanel<
             <span class="sr-only">${this.content.open}</span>
           </button>
         `);
-    this.$options.prepend(this.$openButton);
+    this.$mainOptions.prepend(this.$openButton);
 
     this.$bookmarkButton = $(`
           <button class="bookmark btn imageBtn" title="${this.content.bookmark}">
@@ -72,7 +85,7 @@ export class FooterPanel<
             <span class="sr-only">${this.content.bookmark}</span>
           </button>
         `);
-    this.$options.prepend(this.$bookmarkButton);
+    this.$mainOptions.prepend(this.$bookmarkButton);
 
     this.$shareButton = $(`
           <button class="share btn imageBtn" title="${this.content.share}">
@@ -80,7 +93,7 @@ export class FooterPanel<
             <span class="sr-only">${this.content.share}</span>
           </button>
         `);
-    this.$options.append(this.$shareButton);
+    this.$mainOptions.append(this.$shareButton);
 
     this.$embedButton = $(`
           <button class="embed btn imageBtn" title="${this.content.embed}">
@@ -88,7 +101,7 @@ export class FooterPanel<
             <span class="sr-only">${this.content.embed}</span>
           </button>
         `);
-    this.$options.append(this.$embedButton);
+    this.$mainOptions.append(this.$embedButton);
 
     this.$downloadButton = $(`
           <button class="download btn imageBtn" title="${this.content.download}" id="download-btn">
@@ -96,15 +109,7 @@ export class FooterPanel<
             <span class="sr-only">${this.content.download}</span>
           </button>
         `);
-    this.$options.prepend(this.$downloadButton);
-
-    this.$moreInfoButton = $(`
-          <button class="moreInfo btn imageBtn" title="${this.content.moreInfo}">
-            <i class="uv-icon uv-icon-more-info" aria-hidden="true"></i>
-            <span class="sr-only">${this.content.moreInfo}</span>
-          </button>
-        `);
-    this.$options.prepend(this.$moreInfoButton);
+    this.$mainOptions.prepend(this.$downloadButton);
 
     this.$fullScreenBtn = $(`
           <button class="fullScreen btn imageBtn" title="${this.content.fullScreen}">
@@ -112,7 +117,23 @@ export class FooterPanel<
             <span class="sr-only">${this.content.fullScreen}</span>
           </button>
         `);
-    this.$options.append(this.$fullScreenBtn);
+    this.$mainOptions.append(this.$fullScreenBtn);
+
+    this.$moreInfoButton = $(`
+      <button class="moreInfo btn imageBtn" title="${this.content.moreInfo}">
+        <i class="uv-icon uv-icon-more-info" aria-hidden="true"></i>
+        <span class="sr-only">${this.content.moreInfo}</span>
+      </button>
+    `);
+    this.$rightOptions.append(this.$moreInfoButton);
+
+    this.$toggleLeftPanelButton = $(`
+      <button class="toggleLeftPanelButton btn imageBtn" title="${this.content.toggleLeftPanel}">
+        <i class="uv-icon uv-icon-toggle-left-panel" aria-hidden="true"></i>
+        <span class="sr-only">${this.content.toggleLeftPanel}</span>
+      </button>
+    `);
+    this.$leftOptions.append(this.$toggleLeftPanelButton);
 
     this.$openButton.onPressed(() => {
       this.extensionHost.publish(IIIFEvents.OPEN);
@@ -149,7 +170,14 @@ export class FooterPanel<
 
     this.$moreInfoButton.onPressed(() => {
       this.extensionHost.publish(
-        IIIFEvents.SHOW_MOREINFO_DIALOGUE,
+        IIIFEvents.TOGGLE_RIGHT_PANEL,
+        this.$moreInfoButton
+      );
+    });
+
+    this.$toggleLeftPanelButton.onPressed(() => {
+      this.extensionHost.publish(
+        IIIFEvents.TOGGLE_LEFT_PANEL,
         this.$moreInfoButton
       );
     });
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts
index fe794ece3..62c292cb0 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts
@@ -35,6 +35,10 @@ export class LeftPanel<
     if (shouldOpenPanel) {
       this.toggle(true);
     }
+
+    this.extensionHost.subscribe(IIIFEvents.TOGGLE_LEFT_PANEL, () => {
+      this.toggle();
+    });
   }
 
   getTargetWidth(): number {
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
index a555257b0..3320ed983 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
@@ -32,6 +32,10 @@ export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
         this.expandFull();
       }
     });
+
+    this.extensionHost.subscribe(IIIFEvents.TOGGLE_RIGHT_PANEL, () => {
+      this.toggle();
+    });
   }
 
   getTargetWidth(): number {
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less b/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less
index da1acdf90..7a5c63768 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less
@@ -31,6 +31,12 @@
             /*width: 315px;*/
             height: 42px;
 
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+
             .spacer {
                 float: left;
                 width: 30px;
@@ -48,6 +54,10 @@
                     display: inline-block;
                 }
 
+                &.toggleLeftPanelButton {
+                    display: inline-block;
+                }
+
                 &.bookmark {
                     display: none;
                 }
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/footer-panel.less b/src/content-handlers/iiif/modules/uv-shared-module/css/footer-panel.less
index a349ac304..7e854c3f5 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/footer-panel.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/footer-panel.less
@@ -17,6 +17,10 @@
                     display: none;
                 }
 
+                &.toggleLeftPanelButton {
+                    display: none;
+                }
+
 				&.fullScreen,
 				&.exitFullscreen {
 					float: right;
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/icons.less b/src/content-handlers/iiif/modules/uv-shared-module/css/icons.less
index 6e6046f8a..fbbe7268f 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/icons.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/icons.less
@@ -21,6 +21,10 @@
   .icon-btn-2(data-uri('../img/moreinfo.png'));
 }
 
+.@{icon-prefix}-toggle-left-panel {
+  .icon-btn-2(data-uri('../img/toggle-left-panel.svg'))
+}
+
 .@{icon-prefix}-open {
   .icon-btn-2(data-uri('../img/moreinfo.png'));
 }
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less
index 3762d7f5a..9342a0e05 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less
@@ -23,8 +23,8 @@
             }
 
             .rightPanel {
-                display: none;
-                visibility: hidden;
+                display: block;
+                visibility: visible;
             }
         } */
 
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/img/toggle-left-panel.svg b/src/content-handlers/iiif/modules/uv-shared-module/img/toggle-left-panel.svg
new file mode 100644
index 000000000..28773c91d
--- /dev/null
+++ b/src/content-handlers/iiif/modules/uv-shared-module/img/toggle-left-panel.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<rect id="XMLID_9_" x="5.1" y="5" class="st0" width="5" height="5"/>
+<rect id="XMLID_10_" x="12.5" y="5" class="st0" width="12.4" height="5"/>
+<rect id="XMLID_1_" x="5.1" y="12.5" class="st0" width="5" height="5"/>
+<rect id="XMLID_12_" x="12.5" y="12.5" class="st0" width="12.4" height="5"/>
+<rect id="XMLID_8_" x="5.1" y="20" class="st0" width="5" height="5"/>
+<rect id="XMLID_13_" x="12.5" y="20" class="st0" width="12.4" height="5"/>
+</svg>
diff --git a/src/locales/cy-GB.json b/src/locales/cy-GB.json
index bcb9460ad..8d75f19a1 100644
--- a/src/locales/cy-GB.json
+++ b/src/locales/cy-GB.json
@@ -42,6 +42,7 @@
   "$feedback": "Adborth",
   "$fullScreen": "Sgrin lawn",
   "$moreInfo": "Mwy o Wybodaeth",
+  "$toggleLeftPanel": "Toggle Left Panel",
   "$open": "Agor",
   "$share": "Rhannu",
   "$emptyValue": "rhowch rif",
diff --git a/src/locales/en-GB.json b/src/locales/en-GB.json
index 472fa8859..1fee69375 100644
--- a/src/locales/en-GB.json
+++ b/src/locales/en-GB.json
@@ -42,6 +42,7 @@
   "$feedback": "Feedback",
   "$fullScreen": "Full Screen",
   "$moreInfo": "More Information",
+  "$toggleLeftPanel": "Toggle Left Panel",
   "$open": "Open",
   "$share": "Share",
   "$emptyValue": "please enter a value.",
diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json
index e9b46933c..a3d8c3f8e 100644
--- a/src/locales/fr-FR.json
+++ b/src/locales/fr-FR.json
@@ -42,6 +42,7 @@
   "$feedback": "Commentaire",
   "$fullScreen": "Affichage en plein écran",
   "$moreInfo": "Informations",
+  "$toggleLeftPanel": "Toggle Left Panel",
   "$open": "Ouvrir",
   "$share": "Partager",
   "$emptyValue": "veuillez saisir une valeur.",
diff --git a/src/locales/pl-PL.json b/src/locales/pl-PL.json
index 9e9cf5ba1..0c8bb01c5 100644
--- a/src/locales/pl-PL.json
+++ b/src/locales/pl-PL.json
@@ -42,6 +42,7 @@
   "$feedback": "Feedback",
   "$fullScreen": "Pełny ekran",
   "$moreInfo": "Więcej informacji",
+  "$toggleLeftPanel": "Toggle Left Panel",
   "$open": "Otwórz",
   "$share": "Udostępnij",
   "$emptyValue": "proszę wprowadzić wartość.",
diff --git a/src/locales/sv-SE.json b/src/locales/sv-SE.json
index 5c2835c8f..b356b7115 100644
--- a/src/locales/sv-SE.json
+++ b/src/locales/sv-SE.json
@@ -42,6 +42,7 @@
   "$feedback": "Feedback",
   "$fullScreen": "Helskärm",
   "$moreInfo": "Mer information",
+  "$toggleLeftPanel": "Toggle Left Panel",
   "$open": "Öppna",
   "$share": "Dela",
   "$emptyValue": "ange ett värde.",