diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 23f28feb5..73b6e7e39 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5023,6 +5023,10 @@
 
 // Module: CompositionArea
 .module-composition-area {
+  position: relative;
+  min-height: 48px;
+  padding-top: 12px;
+
   &__row {
     display: flex;
     flex-direction: row;
@@ -5038,18 +5042,6 @@
     &--column {
       flex-direction: column;
     }
-    &--show-on-focus {
-      opacity: 0;
-      transition: opacity 250ms ease-out;
-    }
-  }
-
-  $this: &;
-  &:focus-within,
-  &:hover {
-    #{$this}__row--show-on-focus {
-      opacity: 1;
-    }
   }
 
   &__button-cell {
@@ -5087,34 +5079,59 @@
   &__input {
     flex-grow: 1;
   }
+  $comp-area: &;
   &__toggle-large {
     width: 48px;
     height: 24px;
-    border: none;
+    position: absolute;
+    left: calc(50% - 24px);
+    top: -24px;
+    border-radius: 12px 12px 0 0;
+
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+
+    #{$comp-area}:hover & {
+      opacity: 1;
+    }
 
     @include light-theme() {
-      @include color-svg('../images/expand-up.svg', $color-gray-45, false);
+      background-color: $color-white;
     }
 
     @include dark-theme() {
-      @include color-svg('../images/expand-up.svg', $color-gray-45, false);
+      background-color: $color-gray-95;
     }
 
-    &--large-active {
+    &__button {
+      width: 48px;
+      height: 24px;
+      border: none;
+
       @include light-theme() {
-        @include color-svg(
-          '../images/collapse-down.svg',
-          $color-gray-45,
-          false
-        );
+        @include color-svg('../images/expand-up.svg', $color-gray-45, false);
       }
 
       @include dark-theme() {
-        @include color-svg(
-          '../images/collapse-down.svg',
-          $color-gray-45,
-          false
-        );
+        @include color-svg('../images/expand-up.svg', $color-gray-45, false);
+      }
+
+      &--large-active {
+        @include light-theme() {
+          @include color-svg(
+            '../images/collapse-down.svg',
+            $color-gray-45,
+            false
+          );
+        }
+
+        @include dark-theme() {
+          @include color-svg(
+            '../images/collapse-down.svg',
+            $color-gray-45,
+            false
+          );
+        }
       }
     }
   }
diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
index 59130eff4..8ab0920cc 100644
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@@ -300,17 +300,13 @@ export const CompositionArea = ({
 
   return (
     <div className="module-composition-area">
-      <div
-        className={classNames(
-          'module-composition-area__row',
-          'module-composition-area__row--center',
-          'module-composition-area__row--show-on-focus'
-        )}
-      >
+      <div className="module-composition-area__toggle-large">
         <button
           className={classNames(
-            'module-composition-area__toggle-large',
-            large ? 'module-composition-area__toggle-large--large-active' : null
+            'module-composition-area__toggle-large__button',
+            large
+              ? 'module-composition-area__toggle-large__button--large-active'
+              : null
           )}
           onClick={handleToggleLarge}
         />