diff --git a/src/mol-plugin-state/helpers/root-structure.ts b/src/mol-plugin-state/helpers/root-structure.ts
index c91325ec448214e36e0712dbd24aff8d3c9fb7bc..8b3c7c49fec7040a99a9aed8020ffb34e4697787 100644
--- a/src/mol-plugin-state/helpers/root-structure.ts
+++ b/src/mol-plugin-state/helpers/root-structure.ts
@@ -94,8 +94,9 @@ export namespace RootStructureDefinition {
 
     export type Params = PD.Values<ReturnType<typeof getParams>>['type']
 
-    export function isSymmetryType(params: Params) {
-        return params.name.indexOf('symmetry') >= 0;
+    export function canAutoUpdate(oldParams: Params, newParams: Params) {
+        if (newParams.name === 'symmetry-assembly' || (newParams.name === 'symmetry' && oldParams.name === 'symmetry')) return false;
+        return true;
     }
 
     async function buildAssembly(plugin: PluginContext, ctx: RuntimeContext, model: Model, id?: string) {
diff --git a/src/mol-plugin-state/transforms/model.ts b/src/mol-plugin-state/transforms/model.ts
index 36e7d89f533a7fb5a7e3374d697aa26111cce550..5272c204e550abb6944941297971270c118e7d29 100644
--- a/src/mol-plugin-state/transforms/model.ts
+++ b/src/mol-plugin-state/transforms/model.ts
@@ -279,8 +279,8 @@ const StructureFromModel = PluginStateTransform.BuiltIn({
     to: SO.Molecule.Structure,
     params(a) { return RootStructureDefinition.getParams(a && a.data); }
 })({
-    canAutoUpdate({ newParams }) {
-        return !RootStructureDefinition.isSymmetryType(newParams.type);
+    canAutoUpdate({ oldParams, newParams }) {
+        return RootStructureDefinition.canAutoUpdate(oldParams.type, newParams.type);
     },
     apply({ a, params }, plugin: PluginContext) {
         return Task.create('Build Structure', async ctx => {
diff --git a/src/mol-plugin-ui/controls.tsx b/src/mol-plugin-ui/controls.tsx
index 3a4d088f61cb5290489312439b196dab45b9c39f..7c1cd2c0bac7a61244275bdf0ebb2327d13cab51 100644
--- a/src/mol-plugin-ui/controls.tsx
+++ b/src/mol-plugin-ui/controls.tsx
@@ -235,7 +235,7 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
         return <div className='msp-animation-viewport-controls'>
             <div>
                 <div className='msp-semi-transparent-background' />
-                <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} title={isAnimating ? 'Stop' : 'Select Animation'}
+                <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
                     onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
                     disabled={isAnimating|| isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty} />
             </div>
diff --git a/src/mol-plugin-ui/controls/common.tsx b/src/mol-plugin-ui/controls/common.tsx
index 5979862c425c657362e18191d6a573e1de80b20a..3b75b0f8bd41133847539acfeb3334f099d5c609 100644
--- a/src/mol-plugin-ui/controls/common.tsx
+++ b/src/mol-plugin-ui/controls/common.tsx
@@ -313,12 +313,16 @@ export function IconButton(props: {
     style?: React.CSSProperties,
     'data-id'?: string,
     extraContent?: JSX.Element,
-    flex?: boolean | string | number
+    flex?: boolean | string | number,
+    transparent?: boolean
 }) {
     let className = `msp-btn msp-btn-icon${props.small ? '-small' : ''}${props.className ? ' ' + props.className : ''}`;
     if (typeof props.toggleState !== 'undefined') {
         className += ` msp-btn-link-toggle-${props.toggleState ? 'on' : 'off'}`
     }
+    if (props.transparent) {
+        className+= ' msp-transparent-bg'
+    }
     const iconStyle = props.small ? { fontSize: '80%' } : void 0;
 
     let style: React.CSSProperties | undefined = void 0;
diff --git a/src/mol-plugin-ui/controls/icons.tsx b/src/mol-plugin-ui/controls/icons.tsx
index d17145663044e9384f08a17a145a4a811ab2c2df..9b5ea99e2767f6600a4da2d750813e87130af9fc 100644
--- a/src/mol-plugin-ui/controls/icons.tsx
+++ b/src/mol-plugin-ui/controls/icons.tsx
@@ -80,8 +80,8 @@ function getSvg(name: SvgIconName) {
     }
 }
 
-const circleLeft = <circle r="6px" id="circle-left" cy="16px" cx="12px" strokeWidth="1"/>
-const circleRight = <circle r="6px" id="circle-right" cy="16px" cx="20px" strokeWidth="1"/>
+const circleLeft = <circle r="6px" id="circle-left" cy="16px" cx="12px" strokeWidth="0.5"/>
+const circleRight = <circle r="6px" id="circle-right" cy="16px" cx="20px" strokeWidth="0.5"/>
 
 function Union() {
     return <svg width="32px" height="32px" viewBox="0 0 32 32">
@@ -92,6 +92,7 @@ function Union() {
         <g>
             <use href="#circle-left" className="msp-shape-filled"/>
             <use href="#circle-right" className="msp-shape-filled"/>
+            <use href="#circle-left" className="msp-shape-empty"/>
         </g>
     </svg>;
 }
diff --git a/src/mol-plugin-ui/skin/base/components/controls-base.scss b/src/mol-plugin-ui/skin/base/components/controls-base.scss
index 5778b57809c094c068d449fb270a90b43567f091..51e2a0400cdcd983695749f3d0d1657c089c63bc 100644
--- a/src/mol-plugin-ui/skin/base/components/controls-base.scss
+++ b/src/mol-plugin-ui/skin/base/components/controls-base.scss
@@ -287,6 +287,10 @@ select.msp-form-control:-moz-focusring {
     background: $default-background;
 }
 
+.msp-transparent-bg {
+    background: transparent;
+}
+
 .msp-no-hover-outline {
     &:hover {
         color: $hover-font-color;