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..3712ba72f 100644
--- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
+++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
@@ -207,8 +207,8 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
     );
 
     this.extensionHost.subscribe(IIIFEvents.LEFTPANEL_EXPAND_FULL_START, () => {
-      this.shell.$centerPanel.hide();
-      this.shell.$rightPanel.hide();
+      /* this.shell.$centerPanel.hide();
+      this.shell.$rightPanel.hide(); */
     });
 
     this.extensionHost.subscribe(IIIFEvents.MINUS, () => {
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..955969e65 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 {
@@ -159,19 +173,31 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
   }
 
   expandFull(): void {
-    if (!this.isExpanded) {
-      this.toggled();
-    }
+    console.log("BaseExpandPanel.ts:expandFull()");
 
     const settings = this.extension.getSettings();
     let isReducedAnimation = settings.reducedAnimation;
 
-    var targetWidth: number = this.getFullTargetWidth();
-    var targetLeft: number = this.getFullTargetLeft();
+    /* var targetWidth: number = this.getFullTargetWidth();
+    var targetLeft: number = this.getFullTargetLeft(); */
 
     this.expandFullStart();
 
     if (isReducedAnimation) {
+      if (!this.isExpanded) {
+        this.toggled();
+      }
+      this.expandFullFinish();
+    } else {
+      setTimeout(() => {
+        if (!this.isExpanded) {
+          this.toggled();
+        }
+        this.expandFullFinish();
+      }, 550);
+    }
+
+    /* if (isReducedAnimation) {
       this.$element.css("width", targetWidth);
       this.$element.css("left", targetLeft);
       this.expandFullFinish();
@@ -186,7 +212,7 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
           this.expandFullFinish();
         }
       );
-    }
+    } */
   }
 
   collapseFull(): void {
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..fe794ece3 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,37 @@ 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);
+  }
+
+  expandFull(): void {
+    console.log("LeftPanel.ts:expandFull()");
+
+    this.$element.parent().addClass("leftPanelOpenFull");
+    super.expandFull();
+  }
+
+  collapseFull(): void {
+    console.log("LeftPanel.ts:collapseFull()");
+
+    this.$element.parent().removeClass("leftPanelOpenFull");
+
+    // need this because 'closing' full width shouldn't actually do that
+    // if puts the left panel back to normal open state
+    // but if the left panel was previously closed, this class won't be present
+    // so we put it back
+    if (!this.$element.parent().hasClass("leftPanelOpen")) {
+      this.$element.parent().addClass("leftPanelOpen");
+    }
+
+    super.collapseFull();
+  }
 }
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..a555257b0 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
@@ -66,4 +66,18 @@ 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);
+  }
+
+  expandFull(): void {
+    super.expandFull();
+  }
 }
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/sm.less b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less
index ba7310a67..3762d7f5a 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: none;
+                visibility: hidden;
+            }
+        } */
+
+        .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..564492cb9 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,17 @@
 @import 'lg';
 @import 'xl';
 
+:root {
+    // TODO: set these at runtime in html element style attr by getting from config?
+    --uv-animation: 1;
+
+    --uv-grid-left-width-open: 271px;
+    --uv-grid-right-width-open: 271px;
+
+    --uv-grid-left-width: 30px;
+    --uv-grid-main-width: minmax(0, 1fr);
+    --uv-grid-right-width: 30px;
+}
 
 .hidden {
     .hidden();
@@ -100,14 +111,60 @@
         background: @body-bg; // important, otherwise you see two spinners
     }
 
-    .leftPanel {
+    .mainPanel {
+        margin: 0;
+        padding: 0;
+        
+        overflow: hidden;
+
+        .md-mediaquery({
+            padding: 0.5rem;
+            display: grid;
+            grid-template-columns: 
+                [left] var(--uv-grid-left-width) 
+                [center] var(--uv-grid-main-width)
+                [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);
+    }
+
+    .mainPanel.leftPanelOpenFull {
+        --uv-grid-left-width: 100%;
+        --uv-grid-main-width: 0;
+        --uv-grid-right-width: 0;
+
+        transition-duration: calc(var(--uv-animation) * 500ms);
+    }
+
+    .centerPanel {
         position: absolute;
-        background: @panel-dark-bg;
-        border: @panel-border;
+        overflow: hidden;
     }
 
     .centerPanel {
+        width: 100% !important;
+        left: auto !important;
+
+        .md-mediaquery({
+            z-index: 15;
+            grid-area: center;
+        });
+    }
+
+    .leftPanel {
         position: absolute;
+        background: @panel-dark-bg;
+        border: @panel-border;
     }
 
     .rightPanel {
@@ -116,6 +173,97 @@
         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;
+        });
+
+        /* .top {
+            display: none;
+        }
+        .closed {
+            display: block;
+        }
+        .main {
+            display: none;
+        } */
+
+        &.open {
+            display: block;
+
+            /* .top {
+                display: block;
+            }
+            .closed {
+                display: none;
+            }
+            .main {
+                display: block;
+            } */
+        }
+    }
+
+    .leftPanel {
+        transform: translateX(calc(-100% + 30px));
+
+        .md-mediaquery({
+            grid-area: left;
+            transform: none;
+        });
+    }
+
+    .leftPanel.open {
+        left: 0 !important;
+        right: 3em !important;
+        transform: none;
+
+        .md-mediaquery({
+            left: initial !important;
+            right: initial !important;
+        });
+    }
+
+    .rightPanel {
+        transform: translateX(calc(100% - 30px));
+        
+        .md-mediaquery({
+            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;
+        }
+    })
 }