diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index fd99e6f46..d67f412ee 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -35,7 +35,7 @@
   --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
   --zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
   --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
-  --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgb(39, 39, 39) 90%);
+  --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, .11) 90%);
 
   --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
 
@@ -104,7 +104,7 @@
   --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
-  --zen-toolbar-element-bg: light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.11));
+  --zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.11));
 
   /* Toolbar */
   --zen-toolbar-height: 38px;
@@ -208,7 +208,7 @@
 
     --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
     --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
-    --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, .11) 90%);
+    --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);
 
     --zen-dialog-background: var(--zen-dark-color-mix-base);
     --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);
diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs
index c1239f1f3..831a7ff22 100644
--- a/src/browser/base/zen-components/ZenCompactMode.mjs
+++ b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -129,10 +129,6 @@ var gZenCompactModeManager = {
   animateCompactMode() {
     const isCompactMode = this.prefefence;
     const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
-    if (this._isAnimating) {
-      return;
-    }
-    this._isAnimating = true;
     // Do this so we can get the correct width ONCE compact mode styled have been applied
     if (this._canAnimateSidebar) {
       this.sidebar.setAttribute('animate', 'true');
@@ -141,80 +137,49 @@ var gZenCompactModeManager = {
       let sidebarWidth = this.getAndApplySidebarWidth();
       if (!this._canAnimateSidebar) {
         this.sidebar.removeAttribute('animate');
-        this._isAnimating = false;
         return;
       }
       if (canHideSidebar && isCompactMode) {
-        window.requestAnimationFrame(() => {
-          this.sidebar.style.position = 'unset';
-          this.sidebar.style.transition = 'margin .17s ease';
-          this.sidebar.style.left = '0';
-          if (!this.sidebarIsOnRight) {
-            this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
-          } else {
-            this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
-          }
-          this.sidebar.style.pointerEvents = 'none';
-
-          window.requestAnimationFrame(() => {
+        gZenUIManager.motion
+          .animate(
+            this.sidebar,
+            { marginLeft: `-${sidebarWidth}px` },
+            {
+              ease: 'easeIn',
+              type: 'spring',
+              stiffness: 3000,
+              damping: 150,
+              mass: 1,
+            }
+          )
+          .then(() => {
+            console.log('done');
+            this.sidebar.removeAttribute('animate');
+            this.sidebar.style.transition = 'none';
+            this.sidebar.style.removeProperty('margin-left');
             setTimeout(() => {
-              window.requestAnimationFrame(() => {
-                this.sidebar.style.removeProperty('pointer-events');
-                this.sidebar.style.removeProperty('position');
-                this.sidebar.style.removeProperty('margin-left');
-                this.sidebar.style.removeProperty('margin-right');
-                this.sidebar.style.removeProperty('transform');
-                this.sidebar.style.removeProperty('left');
-                document.getElementById('browser').style.removeProperty('overflow');
-                this.sidebar.removeAttribute('animate');
-                window.requestAnimationFrame(() => {
-                  this.sidebar.style.removeProperty('transition');
-                  this._isAnimating = false;
-                });
-              });
-            }, 170);
+              this.sidebar.style.removeProperty('transition');
+            });
           });
-        });
       } else if (canHideSidebar && !isCompactMode) {
         document.getElementById('browser').style.overflow = 'hidden';
-        this.sidebar.style.position = 'relative';
-        this.sidebar.style.left = '0';
-
-        if (!this.sidebarIsOnRight) {
-          this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
-        } else {
-          this.sidebar.style.marginRight = `${-1 * sidebarWidth}px`;
-          this.sidebar.style.transform = `translateX(${sidebarWidth}px)`;
-        }
-
-        window.requestAnimationFrame(() => {
-          this.sidebar.style.transition = 'margin .17s ease, transform .275s ease, opacity .1s ease';
-          // we are in compact mode and we are exiting it
-          if (!this.sidebarIsOnRight) {
-            this.sidebar.style.marginLeft = '0';
-          } else {
-            this.sidebar.style.marginRight = '0';
-            this.sidebar.style.transform = 'translateX(0)';
-          }
-          this.sidebar.style.pointerEvents = 'none';
-
-          setTimeout(() => {
-            window.requestAnimationFrame(() => {
-              this._isAnimating = false;
-              this.sidebar.style.removeProperty('position');
-              this.sidebar.style.removeProperty('pointer-events');
-              this.sidebar.style.removeProperty('opacity');
-              this.sidebar.style.removeProperty('margin-left');
-              this.sidebar.style.removeProperty('margin-right');
-              this.sidebar.style.removeProperty('transform');
-              this.sidebar.style.removeProperty('transition');
-              this.sidebar.style.removeProperty('left');
-
-              document.getElementById('browser').style.removeProperty('overflow');
-              this.sidebar.removeAttribute('animate');
-            });
-          }, 400);
-        });
+        this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
+        gZenUIManager.motion
+          .animate(
+            this.sidebar,
+            { marginLeft: '0px' },
+            {
+              ease: 'easeOut',
+              type: 'spring',
+              stiffness: 3000,
+              damping: 150,
+              mass: 1,
+            }
+          )
+          .then(() => {
+            this.sidebar.removeAttribute('animate');
+            document.getElementById('browser').style.removeProperty('overflow');
+          });
       } else {
         this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
       }