diff --git a/src/mol-plugin/skin/base/components/controls-base.scss b/src/mol-plugin/skin/base/components/controls-base.scss
index d92508ead031d29a27849d6db103b3cf52289d1a..a5d5dcfd0e0db7c705195417e0bfb9838d1ed91a 100644
--- a/src/mol-plugin/skin/base/components/controls-base.scss
+++ b/src/mol-plugin/skin/base/components/controls-base.scss
@@ -12,6 +12,10 @@
     }
 }
 
+.msp-btn-collapse {
+    padding: 0 $control-spacing / 2;
+}
+
 .msp-btn, .msp-btn:active, .msp-btn-link:focus, .msp-btn:hover {
     outline: none !important;
 }
diff --git a/src/mol-plugin/ui/base.tsx b/src/mol-plugin/ui/base.tsx
index c6e97a2103a0d8da3d1e13ee1acdedc6aed1faf1..e0993e5637541d0ab06359153f6945445238c5f4 100644
--- a/src/mol-plugin/ui/base.tsx
+++ b/src/mol-plugin/ui/base.tsx
@@ -84,7 +84,7 @@ export abstract class CollapsableControls<P extends CollapsableProps = Collapsab
 
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <button className='msp-btn msp-btn-block' onClick={this.toggleCollapsed}>
+                <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleCollapsed}>
                     <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
                     {this.state.header}
                 </button>
diff --git a/src/mol-plugin/ui/state/common.tsx b/src/mol-plugin/ui/state/common.tsx
index d2f1ef20306697014c718b97165b5a8f30bb0549..ed816b3e049f7f244bcf3d916801be138dc2bcf9 100644
--- a/src/mol-plugin/ui/state/common.tsx
+++ b/src/mol-plugin/ui/state/common.tsx
@@ -186,7 +186,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
         const { a, b } = this.getSourceAndTarget();
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} title={display.description}>
+                <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleExpanded} title={display.description}>
                     <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
                     {display.name}
                 </button>
diff --git a/src/mol-plugin/ui/structure/selection.tsx b/src/mol-plugin/ui/structure/selection.tsx
index e2ee4b98cb36684836485e16be34d1d138a15c27..6e503ff513967da2189fbe8d1819359d77603f3e 100644
--- a/src/mol-plugin/ui/structure/selection.tsx
+++ b/src/mol-plugin/ui/structure/selection.tsx
@@ -91,7 +91,7 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
         return <div>
             <div className='msp-control-row msp-row-text'>
                 <button className='msp-btn msp-btn-block' onClick={this.focus}>
-                    <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '10px' }} />
+                    <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '5px' }} />
                     {this.stats}
                 </button>
             </div>