diff --git a/src/content-handlers/iiif/IIIFEvents.ts b/src/content-handlers/iiif/IIIFEvents.ts
index 865abb540..4934bb3b9 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,7 @@ export class IIIFEvents {
   static SHOW_SHARE_DIALOGUE: string = "showShareDialogue";
   static SHOW_TERMS_OF_USE: string = "showTermsOfUse";
   static TARGET_CHANGE: string = "targetChange";
+  static TOGGLE_MOREINFO_RIGHT_PANEL: string = "toggleMoreInfoRightPanel";
   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-ebook-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts
index a5b0f4592..10a0834a1 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";
@@ -23,7 +22,6 @@ export default class Extension
   implements IEbookExtension
 {
   $downloadDialogue: JQuery;
-  $moreInfoDialogue: JQuery;
   $multiSelectDialogue: JQuery;
   $settingsDialogue: JQuery;
   $shareDialogue: JQuery;
@@ -33,7 +31,6 @@ export default class Extension
   headerPanel: HeaderPanel<Config["modules"]["headerPanel"]>;
   leftPanel: EbookLeftPanel;
   mobileFooterPanel: MobileFooterPanel;
-  moreInfoDialogue: MoreInfoDialogue;
   rightPanel: MoreInfoRightPanel;
   settingsDialogue: SettingsDialogue;
   shareDialogue: ShareDialogue;
@@ -91,12 +88,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-model-viewer-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts
index 7ff9a38da..c039c0830 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";
@@ -27,7 +26,6 @@ export default class ModelViewerExtension extends BaseExtension<Config> {
   $downloadDialogue: JQuery;
   $shareDialogue: JQuery;
   $helpDialogue: JQuery;
-  $moreInfoDialogue: JQuery;
   $settingsDialogue: JQuery;
   centerPanel: ModelViewerCenterPanel;
   downloadDialogue: DownloadDialogue;
@@ -36,7 +34,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;
@@ -99,12 +96,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-openseadragon-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
index 021e6f5ba..dc0bf3385 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/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-shared-module/BaseExpandPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts
index 68e838a95..013d8866d 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts
@@ -108,6 +108,8 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
 
     autoToggled ? (this.autoToggled = true) : (this.autoToggled = false);
 
+    this.$element.toggleClass("open");
+
     // if collapsing, hide contents immediately.
     if (this.isExpanded) {
       this.$top.attr("aria-hidden", "true");
@@ -118,7 +120,19 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
       this.$closed.show();
     }
 
+    // to allow for the css transition to finish
+    // TODO: get this var from config and make sure css uses the same
+    // although make sure it is +50 to allow for lag
+    // and re-introduce the animation check
     if (isReducedAnimation) {
+      this.toggled();
+    } else {
+      setTimeout(() => {
+        this.toggled();
+      }, 300);
+    }
+
+    /* if (isReducedAnimation) {
       // This is reduced motion.
       this.$element.css("width", this.getTargetWidth());
       this.$element.css("left", this.getTargetLeft());
@@ -135,7 +149,7 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
           this.toggled();
         }
       );
-    }
+    } */
   }
 
   toggled(): void {
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..d18751c58 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts
@@ -149,7 +149,7 @@ export class FooterPanel<
 
     this.$moreInfoButton.onPressed(() => {
       this.extensionHost.publish(
-        IIIFEvents.SHOW_MOREINFO_DIALOGUE,
+        IIIFEvents.TOGGLE_MOREINFO_RIGHT_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 48ab05a03..1b422732c 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts
@@ -67,4 +67,14 @@ export class LeftPanel<
       this.$element.width(this.$element.parent().width());
     }
   }
+
+  toggle(autoToggled?: boolean): void {
+    if (this.isExpanded) {
+      this.$element.parent().removeClass("leftPanelOpen");
+    } else {
+      this.$element.parent().addClass("leftPanelOpen");
+    }
+
+    super.toggle(autoToggled);
+  }
 }
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 f11ce04bf..c1173eca5 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
@@ -32,8 +32,14 @@ export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
         this.expandFull();
       }
     });
+
+    this.extensionHost.subscribe(IIIFEvents.TOGGLE_MOREINFO_RIGHT_PANEL, () => {
+      this.toggle();
+    });
   }
 
+
+
   getTargetWidth(): number {
     return this.isExpanded
       ? this.options.panelCollapsedWidth
@@ -66,4 +72,14 @@ export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
       ),
     });
   }
+
+  toggle(autoToggled?: boolean): void {
+    if (this.isExpanded) {
+      this.$element.parent().removeClass("rightPanelOpen");
+    } else {
+      this.$element.parent().addClass("rightPanelOpen");
+    }
+
+    super.toggle(autoToggled);
+  }
 }
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 2d04194a9..da1acdf90 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
@@ -4,7 +4,7 @@
         .hidden();
     }
 
-    .mainPanel {
+    /* .mainPanel {
 
         .leftPanel {
             .hidden();
@@ -13,7 +13,7 @@
         .rightPanel {
             .hidden();
         }
-    }
+    } */
 
     .footerPanel {
         .hidden();
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less b/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less
index 5c52384ae..f0a748ce8 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less
@@ -10,4 +10,33 @@
 
         }
     }
+
+    .lg-mediaquery({
+        .headerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mainPanel {
+            .leftPanel {
+                display: block;
+                visibility: visible;
+            }
+
+            .rightPanel {
+                display: block;
+                visibility: visible;
+            }
+        }
+
+        .footerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mobileFooterPanel {
+            display: none;
+            visibility: hidden;
+        }
+    })
 }
\ No newline at end of file
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/md.less b/src/content-handlers/iiif/modules/uv-shared-module/css/md.less
index 2407c4a2b..3121cf295 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/md.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/md.less
@@ -11,4 +11,33 @@
 
     }
 
+    .md-mediaquery({
+        .headerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mainPanel {
+            .leftPanel {
+                display: block;
+                visibility: visible;
+            }
+
+            .rightPanel {
+                display: block;
+                visibility: visible;
+            }
+        }
+
+        .footerPanel {
+            display: block;
+            visibility: visible;
+        }
+
+        .mobileFooterPanel {
+            display: none;
+            visibility: hidden;
+        }
+    })
+
 }
\ No newline at end of file
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less b/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less
index 314b3f997..ad159e3be 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less
@@ -26,26 +26,6 @@
     }
 }
 
-.only-desktop() {
-    display: var(--uv-desktop-display, none);
-    visibility: var(--uv-desktop-visibility, hidden);
-}
-
-.only-mobile() {
-    display: var(--uv-mobile-display, block);
-    visibility: var(--uv-mobile-visibility, visible);
-}
-
-:root {
-    .md-mediaquery({
-        --uv-mobile-display: none;
-        --uv-mobile-visibility: hidden;
-
-        --uv-desktop-display: block;
-        --uv-desktop-visibility: visible;
-    });
-}
-
 
 // end media queries
 
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less
index 78c2b6da5..fd0acdcc8 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less
@@ -122,4 +122,4 @@
             display: block;
         }
     }
-}
+}
\ No newline at end of file
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 ba7310a67..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
@@ -10,4 +10,32 @@
         }
     }
 
+    .sm-mediaquery({
+        .headerPanel {
+            display: none;
+            visibility: hidden;
+        }
+
+        /* .mainPanel {
+            .leftPanel {
+                display: none;
+                visibility: hidden;
+            }
+
+            .rightPanel {
+                display: block;
+                visibility: visible;
+            }
+        } */
+
+        .footerPanel {
+            display: none;
+            visibility: hidden;
+        }
+
+        .mobileFooterPanel {
+            display: block;
+            visibility: visible;
+        }
+    })
 }
\ No newline at end of file
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less
index a65737286..1163fa912 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less
@@ -18,6 +18,15 @@
 @import 'lg';
 @import 'xl';
 
+:root {
+    --uv-animation: 1;
+
+    --uv-grid-left-width-open: 271px;
+    --uv-grid-right-width-open: 271px;
+
+    --uv-grid-left-width: 30px;
+    --uv-grid-right-width: 30px;
+}
 
 .hidden {
     .hidden();
@@ -100,14 +109,62 @@
         background: @body-bg; // important, otherwise you see two spinners
     }
 
-    .leftPanel {
+    .mainPanel {
+
+        // TODO: set these at runtime in html element style attr by getting from config?
+        
+
+        background: red;
+        margin: 0;
+        padding: 0;
+        
+        overflow: hidden;
+
+        .md-mediaquery({
+            background: maroon;
+            padding: 0.5rem;
+            display: grid;
+            grid-template-columns: 
+                [left] var(--uv-grid-left-width) 
+                [center] minmax(0, 1fr)
+                [right] var(--uv-grid-right-width);
+            grid-template-areas: "left center right";
+
+            transition:all calc(var(--uv-animation) * 250ms) ease-in-out;
+        });
+    }
+
+    .mainPanel.leftPanelOpen {
+        --uv-grid-left-width: var(--uv-grid-left-width-open);
+    }
+
+    .mainPanel.rightPanelOpen {
+        --uv-grid-right-width: var(--uv-grid-right-width-open);
+    }
+
+    .centerPanel {
         position: absolute;
-        background: @panel-dark-bg;
-        border: @panel-border;
+        overflow: hidden;
     }
 
     .centerPanel {
+        width: 100% !important;
+        left: auto !important;
+        
+        background: darkcyan;
+
+        .md-mediaquery({
+            background: darkolivegreen;
+
+            z-index: 15;
+            grid-area: center;
+        });
+    }
+
+    .leftPanel {
         position: absolute;
+        background: @panel-dark-bg;
+        border: @panel-border;
     }
 
     .rightPanel {
@@ -116,6 +173,81 @@
         border: @panel-border;
     }
 
+    .leftPanel, .rightPanel {
+        overflow: hidden;
+        z-index: 20;
+        // display: none;
+        
+        transition:all calc(var(--uv-animation) * 250ms) ease-in-out;
+
+        position: absolute;
+        top: 2em !important;
+        right: 0em !important;
+        bottom: 2em !important;
+        left: 0em !important;
+
+        width: auto !important;
+        height: auto !important;
+
+        .md-mediaquery({
+            display: block !important;
+            position: relative;
+
+            top: 0rem !important;
+            right: 0rem !important;
+            bottom: 0rem !important;
+            left: 0rem !important;
+        });
+
+        &.open {
+            display: block;
+        }
+    }
+
+    .leftPanel {
+        background: pink;
+        transform: translateX(calc(-100% + 30px));
+
+        .md-mediaquery({
+            background: fuchsia;
+            grid-area: left;
+            transform: none;
+        });
+    }
+
+    .leftPanel.open {
+        left: 0 !important;
+        right: 3em !important;
+        transform: none;
+
+        .md-mediaquery({
+            left: initial !important;
+            right: initial !important;
+        });
+    }
+
+    .rightPanel {
+        background: lime;
+        transform: translateX(calc(100% - 30px));
+        
+        .md-mediaquery({
+            background: yellowgreen;
+            grid-area: right;
+            transform: none;
+        });
+    }
+
+    .rightPanel.open {
+        right: 0 !important;
+        left: 3em !important;
+        transform: none;
+
+        .md-mediaquery({
+            left: initial !important;
+            right: initial !important;
+        });
+    }
+
     .footerPanel {
         position: relative;
         margin-top: 0;
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less b/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less
index 98893ff8a..0df7b47e4 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less
+++ b/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less
@@ -8,25 +8,32 @@
         }
     }
 
-    .headerPanel {
-        .only-desktop();
-    }
-
-    .mainPanel {
-        .leftPanel {
-            .only-desktop();
+    .xl-mediaquery({
+        .headerPanel {
+            display: block;
+            visibility: visible;
         }
 
-        .rightPanel {
-            .only-desktop();
+        .mainPanel {
+            .leftPanel {
+                display: block;
+                visibility: visible;
+            }
+
+            .rightPanel {
+                display: block;
+                visibility: visible;
+            }
         }
-    }
 
-    .footerPanel {
-        .only-desktop();
-    }
+        .footerPanel {
+            display: block;
+            visibility: visible;
+        }
 
-    .mobileFooterPanel {
-        .only-mobile();
-    }
+        .mobileFooterPanel {
+            display: none;
+            visibility: hidden;
+        }
+    })
 }