diff --git a/.vscode/launch.json b/.vscode/launch.json
index ab08bf5f..16f1ec2b 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -48,38 +48,20 @@
             "deviceId": "emulator-5554"
         },
         {
-            "name": "iPhone SE (2nd generation) (mobile)",
+            "name": "iPhone 13 (mobile)",
             "request": "launch",
             "type": "dart",
-            "deviceId": "B74B1F44-56AD-4D14-B1FD-6F685C8BB7C2"
-        },
-        {
-            "name": "iPhone 12 (mobile)",
-            "request": "launch",
-            "type": "dart",
-            "deviceId": "7182391C-3F76-4577-9A48-CDDD0EE66DFB"
-        },
-        {
-            "name": "iPad Pro (12.9-inch) (2nd generation) (mobile)",
-            "request": "launch",
-            "type": "dart",
-            "deviceId": "086D2D71-E736-4291-A91F-C575C0B5C060"
-        },
-        {
-            "name": "iPad Pro (12.9-inch) (4th generation) (mobile)",
-            "request": "launch",
-            "type": "dart",
-            "deviceId": "47D83A08-59A9-4E80-A6FD-7805D9F9BA52"
+            "deviceId": "77171629-E070-4F03-9FD7-0898D08E2DEA"
         },
     ],
     "compounds": [
         {
             "name": "iOS Screenshot Devices",
             "configurations": [
-                "iPad Pro (12.9-inch) (4th generation) (mobile)",
-                "iPhone SE (2nd generation) (mobile)",
-                "iPhone 12 (mobile)",
-                "iPad Pro (12.9-inch) (2nd generation) (mobile)"
+                // "iPad Pro (12.9-inch) (4th generation) (mobile)",
+                // "iPhone SE (2nd generation) (mobile)",
+                // "iPhone 12 (mobile)",
+                // "iPad Pro (12.9-inch) (2nd generation) (mobile)"
             ],
         }
     ]
diff --git a/android/app/build.gradle b/android/app/build.gradle
index ca9ff2f6..06da142e 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -33,7 +33,7 @@ if (keystorePropertiesFile.exists()) {
 }
 
 android {
-    compileSdkVersion 29
+    compileSdkVersion 31
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
@@ -48,7 +48,7 @@ android {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "io.beatscratch.beatscratch_flutter_redux"
         minSdkVersion 25
-        targetSdkVersion 30
+        targetSdkVersion 31
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index a8a090bc..7e38aeca 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -28,6 +28,7 @@
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
+            android:exported="true"
             android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
diff --git a/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiControls.kt b/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiControls.kt
index 4738f226..c53a389e 100644
--- a/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiControls.kt
+++ b/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiControls.kt
@@ -50,6 +50,6 @@ fun Music.Instrument.sendSelectInstrument() {
 
   byte3[0] = (MidiConstants.CONTROL_CHANGE or channel)
   byte3[1] = MidiConstants.CONTROL_VOLUME
-  byte3[2] = (volume * 127).toByte()
+  byte3[2] = (volume * 127).toInt().toByte()
   sendToStream(byte3)
 }
\ No newline at end of file
diff --git a/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiProcessing.kt b/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiProcessing.kt
index 687e0da5..55c8c485 100644
--- a/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiProcessing.kt
+++ b/android/app/src/main/kotlin/io/beatscratch/beatscratch_flutter_redux/MidiProcessing.kt
@@ -16,7 +16,7 @@ data class NoteOnEvent(
 ): MidiEvent {
   override val eventByteCount get() = 3
   override fun withChannelOverride(newChannel: Byte) = NoteOnEvent(midiNote, velocity, newChannel)
-  override fun withVelocityMultiplier(velocityMultiplier: Float) = NoteOnEvent(midiNote, (velocity * velocityMultiplier).toByte(), channel)
+  override fun withVelocityMultiplier(velocityMultiplier: Float) = NoteOnEvent(midiNote, (velocity * velocityMultiplier).toInt().toByte(), channel)
   override fun send(immediately: Boolean, record: Boolean) {
     AndroidMidi.playNote(midiNote, velocity, channel, immediately, record)
   }
@@ -29,7 +29,7 @@ data class NoteOffEvent(
 ): MidiEvent {
   override val eventByteCount get() = 3
   override fun withChannelOverride(newChannel: Byte) = NoteOffEvent(midiNote, velocity, newChannel)
-  override fun withVelocityMultiplier(velocityMultiplier: Float) = NoteOffEvent(midiNote, (velocity * velocityMultiplier).toByte(), channel)
+  override fun withVelocityMultiplier(velocityMultiplier: Float) = NoteOffEvent(midiNote, (velocity * velocityMultiplier).toInt().toByte(), channel)
   override fun send(immediately: Boolean, record: Boolean) {
     AndroidMidi.stopNote(midiNote, channel, immediately, record)
   }
diff --git a/android/build.gradle b/android/build.gradle
index 56aa242d..b5fc6201 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -1,5 +1,6 @@
 buildscript {
-    ext.kotlin_version = '1.3.71'
+    ext.android_gradle_tools_version = '7.1.2'
+    ext.kotlin_version = '1.6.10'
     ext.protobufVersion = '0.8.11'
     ext.kotlinx_io_version = '0.1.16'
 
@@ -9,7 +10,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.1'
+        classpath "com.android.tools.build:gradle:$android_gradle_tools_version"
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
         classpath "com.google.protobuf:protobuf-gradle-plugin:$protobufVersion"
     }
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 22c183ae..e09828ef 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.3-bin.zip
diff --git a/build-release-ios b/build-release-ios
index 017fe8ff..257230d0 100755
--- a/build-release-ios
+++ b/build-release-ios
@@ -8,6 +8,6 @@ echo "# Building, Archiving, and Uploading for iOS" && \
 echo "#-----------------------------------------------------------------------" && \
 flutter build ios | sed 's/.*/\[iOS\] &/' && \
 echo "Archiving iOS app..." && \
-xcodebuild -workspace ios/Runner.xcworkspace -scheme Runner -configuration release archive | sed 's/.*/\[iOS\] &/' && \
+xcodebuild -workspace ios/Runner.xcworkspace -scheme Runner -configuration release archive | sed 's/.*/\[iOS: Archive\] &/' && \
 echo "iOS app built! Uploading to the App Store..." && \
 ./build-upload-ios | sed 's/.*/\[iOS: App Store Upload\] &/'
diff --git a/build-release-macos b/build-release-macos
index 393e34cf..f3a98db1 100755
--- a/build-release-macos
+++ b/build-release-macos
@@ -9,10 +9,15 @@ echo "# Building for macOS and archiving app" && \
 echo "#-----------------------------------------------------------------------" && \
 flutter build macos | sed 's/.*/\[macOS\] &/' && \
 cd build/macos/Build/Products/Release && \
-tar -cavf BeatFlutter.tar.bz2 BeatScratch.app && open . && cd - && \
+echo "Signing macOS app with certificate EC73E3C309C841E94640BBA80B3FE67508A10A95" && \
+codesign --deep --force --verbose --sign "EC73E3C309C841E94640BBA80B3FE67508A10A95" BeatScratch.app | sed 's/.*/\[macOS: Codesign\] &/' && \
+echo "BZ2-compressing macOS app" && \
+tar -cavf BeatFlutter.tar.bz2 BeatScratch.app | sed 's/.*/\[macOS: BZ2-Compress\] &/' && \
+open . && cd - && \
 echo "macOS app standalone built! Manually upload to Dropbox" && \
-open "https://www.dropbox.com/home" && \
-echo "Archiving macOS app..." && \
-xcodebuild -workspace macos/Runner.xcworkspace -scheme Runner -configuration release archive | sed 's/.*/\[iOS\] &/' && \
-echo "macOS app archive built! Uploading to the App Store..." && \
-./build-upload-macos | sed 's/.*/\[macOS: App Store Upload\] &/'
+open "https://www.dropbox.com/home"
+# && \
+# echo "Archiving macOS app..." && \
+# xcodebuild -workspace macos/Runner.xcworkspace -scheme Runner -configuration release archive | sed 's/.*/\[macOS: Archive\] &/' && \
+# echo "macOS app archive built! Uploading to the App Store..." && \
+# ./build-upload-macos | sed 's/.*/\[macOS: App Store Upload\] &/'
diff --git a/build-release-web b/build-release-web
index 824c4c0c..fc5fa9c1 100755
--- a/build-release-web
+++ b/build-release-web
@@ -4,14 +4,14 @@
 cd "$(dirname "$0")"
 
 echo "#-----------------------------------------------------------------------" && \
-echo "# Building for Web and copying to ../beatscratch-page/app-staging[-skia]" && \
+echo "# Building for Web and copying to ../beatscratch-page/app-staging" && \
 echo "#-----------------------------------------------------------------------" && \
-flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=false --release | sed 's/.*/\[Web\] &/' && \
+flutter build web --web-renderer canvaskit --release | sed 's/.*/\[Web\] &/' && \
 echo "Copying build..." && \
 cp -r build/web/* ../beatscratch-page/app-staging && \
-echo "Web app built to app-staging with FLUTTER_WEB_USE_SKIA=false! Manually copy to prod app and/or deploy to beatscratch.io" && \
-flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release | sed 's/.*/\[Web\] &/' && \
-echo "Copying build..." && \
-cp -r build/web/* ../beatscratch-page/app-staging-skia && \
-echo "Web app built to app-staging with FLUTTER_WEB_USE_SKIA=true! Manually copy to prod app and/or deploy to beatscratch.io"
+echo "Web app built to app-staging! Manually copy to prod app and/or deploy to beatscratch.io"
+# flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true --release | sed 's/.*/\[Web\] &/' && \
+# echo "Copying build..." && \
+# cp -r build/web/* ../beatscratch-page/app-staging-skia && \
+# echo "Web app built to app-staging with FLUTTER_WEB_USE_SKIA=true! Manually copy to prod app and/or deploy to beatscratch.io"
 
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 590620f2..330e1b1d 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -12,16 +12,16 @@ PODS:
     - Flutter
   - package_info_plus (0.4.5):
     - Flutter
-  - path_provider (0.0.1):
+  - path_provider_ios (0.0.1):
     - Flutter
   - sensors (0.0.1):
     - Flutter
   - share (0.0.1):
     - Flutter
-  - shared_preferences (0.0.1):
+  - shared_preferences_ios (0.0.1):
     - Flutter
   - SwiftProtobuf (1.13.0)
-  - url_launcher (0.0.1):
+  - url_launcher_ios (0.0.1):
     - Flutter
   - webview_flutter_wkwebview (0.0.1):
     - Flutter
@@ -34,12 +34,12 @@ DEPENDENCIES:
   - flutter_midi_command (from `.symlinks/plugins/flutter_midi_command/ios`)
   - native_device_orientation (from `.symlinks/plugins/native_device_orientation/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
-  - path_provider (from `.symlinks/plugins/path_provider/ios`)
+  - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
   - sensors (from `.symlinks/plugins/sensors/ios`)
   - share (from `.symlinks/plugins/share/ios`)
-  - shared_preferences (from `.symlinks/plugins/shared_preferences/ios`)
+  - shared_preferences_ios (from `.symlinks/plugins/shared_preferences_ios/ios`)
   - SwiftProtobuf
-  - url_launcher (from `.symlinks/plugins/url_launcher/ios`)
+  - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
   - webview_flutter_wkwebview (from `.symlinks/plugins/webview_flutter_wkwebview/ios`)
 
 SPEC REPOS:
@@ -61,16 +61,16 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/native_device_orientation/ios"
   package_info_plus:
     :path: ".symlinks/plugins/package_info_plus/ios"
-  path_provider:
-    :path: ".symlinks/plugins/path_provider/ios"
+  path_provider_ios:
+    :path: ".symlinks/plugins/path_provider_ios/ios"
   sensors:
     :path: ".symlinks/plugins/sensors/ios"
   share:
     :path: ".symlinks/plugins/share/ios"
-  shared_preferences:
-    :path: ".symlinks/plugins/shared_preferences/ios"
-  url_launcher:
-    :path: ".symlinks/plugins/url_launcher/ios"
+  shared_preferences_ios:
+    :path: ".symlinks/plugins/shared_preferences_ios/ios"
+  url_launcher_ios:
+    :path: ".symlinks/plugins/url_launcher_ios/ios"
   webview_flutter_wkwebview:
     :path: ".symlinks/plugins/webview_flutter_wkwebview/ios"
 
@@ -82,13 +82,13 @@ SPEC CHECKSUMS:
   flutter_midi_command: 4acc18c6391c574d21f1d3a1cc40c7fe06ff461f
   native_device_orientation: 3b4cfc9565a7b879cc4fde282b3e27745e852d0d
   package_info_plus: 6c92f08e1f853dc01228d6f553146438dafcd14e
-  path_provider: d1e9807085df1f9cc9318206cd649dc0b76be3de
+  path_provider_ios: 7d7ce634493af4477d156294792024ec3485acd5
   sensors: 84eb7a30e47a649e4172b71d6e81be614c280336
   share: 0b2c3e82132f5888bccca3351c504d0003b3b410
-  shared_preferences: 5033afbb22d372e15aff8ff766df9021b845f273
+  shared_preferences_ios: 548a61f8053b9b8a49ac19c1ffbc8b92c50d68ad
   SwiftProtobuf: fd4693388a96c8c2df35d3b063272b0e7c499d00
-  url_launcher: b6e016d912f04be9f5bf6e8e82dc599b7ba59649
-  webview_flutter_wkwebview: 44aa025fbcf6730d808f1e0d86a5af5ac25fa8de
+  url_launcher_ios: 839c58cdb4279282219f5e248c3321761ff3c4de
+  webview_flutter_wkwebview: 005fbd90c888a42c5690919a1527ecc6649e1162
 
 PODFILE CHECKSUM: 79aecb95524f6b2d9ca54f898d51b01d778cce9b
 
diff --git a/ios/Runner.xcodeproj/project.pbxproj b/ios/Runner.xcodeproj/project.pbxproj
index e8ceedfd..87b8e963 100644
--- a/ios/Runner.xcodeproj/project.pbxproj
+++ b/ios/Runner.xcodeproj/project.pbxproj
@@ -251,7 +251,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1250;
+				LastUpgradeCheck = 1300;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
diff --git a/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index 7785fe32..c87d15a3 100644
--- a/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1250"
+   LastUpgradeVersion = "1300"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
diff --git a/lib/beatscratch_plugin.dart b/lib/beatscratch_plugin.dart
index c6028dbf..60f1d343 100644
--- a/lib/beatscratch_plugin.dart
+++ b/lib/beatscratch_plugin.dart
@@ -28,6 +28,8 @@ class BeatScratchPlugin {
   static bool _playbackForceDisabled = false;
   static bool get supportsPlayback =>
       _supportsPlayback && !_playbackForceDisabled;
+  static bool _countInInitiated = false;
+  static bool get countInInitiated => _countInInitiated;
 
   static MethodChannel _channel = MethodChannel('BeatScratchPlugin')
     ..setMethodCallHandler((call) {
@@ -48,6 +50,7 @@ class BeatScratchPlugin {
           break;
         case "notifyPlayingBeat":
           _notifyPlayingBeat(call.arguments);
+          _countInInitiated = false;
           return Future.value(null);
           break;
         case "notifyPaused":
@@ -57,6 +60,7 @@ class BeatScratchPlugin {
           break;
         case "notifyCountInInitiated":
           _playing = false;
+          _countInInitiated = true;
           onCountInInitiated?.call();
           return Future.value(null);
           break;
@@ -440,6 +444,7 @@ class BeatScratchPlugin {
   /// Starts the playback thread
   static void play() {
     _playing = true;
+    _countInInitiated = false;
     _play();
   }
 
diff --git a/lib/drawing/canvas_tone_drawer.dart b/lib/drawing/canvas_tone_drawer.dart
index 283c66ef..d52fa7be 100644
--- a/lib/drawing/canvas_tone_drawer.dart
+++ b/lib/drawing/canvas_tone_drawer.dart
@@ -42,9 +42,6 @@ class CanvasToneDrawer {
   double get halfStepWidth => axisLength / halfStepsOnScreen;
   double get diatonicStepWidth => halfStepWidth * 12 / 7;
 
-  //  dip(value: double): Int
-  //fun dip(value: Int): Int
-  bool showSteps;
   Chord chord = Chord()
     ..rootNote = NoteName()
     ..chroma = 2047;
diff --git a/lib/drawing/music/colorblock_music_renderer.dart b/lib/drawing/music/colorblock_music_renderer.dart
index 9ac1ad4e..57f44f5d 100644
--- a/lib/drawing/music/colorblock_music_renderer.dart
+++ b/lib/drawing/music/colorblock_music_renderer.dart
@@ -10,17 +10,16 @@ import '../../util/music_theory.dart';
 class ColorblockMusicRenderer extends BaseMusicRenderer {
   double uiScale = 1;
   @override
-  bool showSteps = true;
-  @override
   double get halfStepsOnScreen => (highestPitch - lowestPitch + 1).toDouble();
   double colorblockAlpha;
+  static double stepLineScaleThreshold = 0.7;
 
   draw(Canvas canvas) {
     alphaDrawerPaint.strokeWidth = 0;
     bounds = overallBounds;
     canvas.save();
     canvas.translate(0, bounds.top);
-    if (uiScale > 0.7) {
+    if (uiScale > stepLineScaleThreshold) {
       _renderSteps(canvas);
     }
     double alphaMultiplier = (isMelodyReferenceEnabled) ? 1.0 : 2.0 / 3;
@@ -36,18 +35,16 @@ class ColorblockMusicRenderer extends BaseMusicRenderer {
   _renderSteps(Canvas canvas) {
     alphaDrawerPaint.color =
         Colors.black87.withAlpha((colorblockAlpha * 255 * 0.8).toInt());
-    if (showSteps) {
-      var linePosition = startPoint; // - 12 * halfStepWidth;
-      while (linePosition < axisLength) {
-        if (renderVertically) {
-          canvas.drawLine(Offset(bounds.left, linePosition),
-              Offset(bounds.right, linePosition), alphaDrawerPaint);
-        } else {
-          canvas.drawLine(Offset(linePosition, bounds.top),
-              Offset(linePosition, bounds.bottom), alphaDrawerPaint);
-        }
-        linePosition += halfStepWidth;
+    var linePosition = startPoint; // - 12 * halfStepWidth;
+    while (linePosition < axisLength) {
+      if (renderVertically) {
+        canvas.drawLine(Offset(bounds.left, linePosition),
+            Offset(bounds.right, linePosition), alphaDrawerPaint);
+      } else {
+        canvas.drawLine(Offset(linePosition, bounds.top),
+            Offset(linePosition, bounds.bottom), alphaDrawerPaint);
       }
+      linePosition += halfStepWidth;
     }
   }
 
@@ -97,6 +94,14 @@ class ColorblockMusicRenderer extends BaseMusicRenderer {
             bounds.height - bounds.height * (realTone - lowestPitch) / 88;
         double bottom =
             bounds.height - bounds.height * (realTone - lowestPitch + 1) / 88;
+        if (uiScale < stepLineScaleThreshold) {
+          double height = top - bottom;
+          double extraHeight =
+              1.5 * height * (stepLineScaleThreshold - uiScale);
+          print("extraHeight=$extraHeight");
+          top += extraHeight;
+          bottom -= extraHeight;
+        }
         canvas.drawRect(
             Rect.fromLTRB(bounds.left + leftMargin, top,
                 bounds.right - rightMargin, bottom),
@@ -104,6 +109,7 @@ class ColorblockMusicRenderer extends BaseMusicRenderer {
       });
     }
 
+// Render note offs
     if (uiScale > highResUiScale) {
       tones = melody.noteOffsAt(elementPosition % melody.length).toList();
 
diff --git a/lib/drawing/music/music_clef_renderer.dart b/lib/drawing/music/music_clef_renderer.dart
index 56209740..da225137 100644
--- a/lib/drawing/music/music_clef_renderer.dart
+++ b/lib/drawing/music/music_clef_renderer.dart
@@ -9,28 +9,29 @@ import '../canvas_tone_drawer.dart';
 import 'music_staff_lines_renderer.dart';
 
 class MelodyClefRenderer extends BaseMusicRenderer {
-  @override
-  bool showSteps = true;
-
   @override
   double get halfStepsOnScreen => (highestPitch - lowestPitch + 1).toDouble();
-  List<Clef> clefs;// = [Clef.treble, Clef.bass];
+  List<Clef> clefs; // = [Clef.treble, Clef.bass];
 
-  static Path _trebleClefPath = parseSvgPathData("M 592.10873,1275.9669 C 461.75172,1268.3902 328.65904,1186.6265 249.0601,1092.783 C 156.77394,983.97782 118.72592,836.04683 128.47199,714.56357 C 157.10277,357.61288 545.27831,146.63848 688.97108,-9.280262 C 785.15294,-113.64625 805.31643,-164.52308 826.79977,-218.19949 C 868.39181,-322.09965 875.09166,-443.8341 792.63375,-452.92251 C 713.90712,-461.59988 649.13737,-337.79201 620.20973,-253.17845 C 594.19587,-177.07331 576.90507,-100.71696 592.5563,13.979673 C 599.58954,65.50958 793.18636,1503.9125 796.45179,1526.2088 C 829.05589,1749.0255 701.63092,1841.2249 571.55248,1857.6251 C 290.65671,1893.038 200.52617,1607.5843 326.4212,1499.1719 C 423.34291,1415.7001 564.35026,1487.3615 556.73245,1624.5919 C 549.98693,1746.1391 430.80546,1749.7197 400.35244,1746.9429 C 447.10065,1830.7846 799.52998,1874.5871 745.41513,1495.7923 C 737.811,1442.5634 558.91549,90.842953 554.53112,60.595454 C 521.71238,-165.84753 516.71147,-345.08557 634.69182,-554.25141 C 678.24767,-631.46637 747.0821,-681.3156 780.87362,-674.7893 C 788.29962,-673.35526 795.69824,-670.62872 801.57144,-664.56827 C 892.07191,-571.31845 919.83494,-364.53202 909.9199,-245.74332 C 899.76736,-124.11391 894.1088,1.7993735 773.16902,148.63428 C 726.36601,205.45738 583.54553,330.63538 501.65851,402.55255 C 386.60107,503.59831 303.14756,591.85179 257.99323,698.31862 C 207.24886,817.97506 198.65826,968.6006 313.27268,1102.2505 C 379.20247,1177.7619 488.59222,1231.3424 580.65459,1232.4842 C 836.63719,1235.6628 911.39048,1109.4801 913.77904,966.58197 C 917.71126,731.28351 633.64596,642.32214 516.85762,804.10953 C 449.14212,897.92109 478.90552,996.66049 524.38411,1043.6371 C 539.99424,1059.7587 557.43121,1072.0395 573.92734,1078.8855 C 579.9056,1081.3654 593.96751,1087.9054 589.97593,1097.4779 C 586.6557,1105.4428 580.20702,1105.8904 574.33381,1105.1871 C 500.68573,1096.3544 419.13667,1025.958 399.0828,904.87212 C 369.86288,728.38801 525.6035,519.0349 747.9133,553.274 C 893.45572,575.68903 1028.5853,700.92182 1016.7338,934.11946 C 1006.5722,1133.9822 840.87996,1290.4262 592.10873,1275.9669 z");
-  static Path _bassClefPath = parseSvgPathData("M46.593,1.814c16.429,6.061,22.84,20.793,18.019,36.615c-4.08,13.392-12.446,23.87-23.83,31.962    C30.29,77.849,18.962,83.849,7.427,89.48c-0.507,0.247-1.605,0.185-1.874-0.162c-0.637-0.824-0.321-1.557,0.657-2.236    c6.66-4.617,13.521-8.995,19.826-14.061c13.186-10.593,21.679-24.134,23.958-41.147c0.693-5.175,0.587-10.387-0.781-15.466    c-1.404-5.217-4.386-8.989-8.422-10.997c-2.274-1.131-4.882-1.687-7.731-1.656C28.22,3.807,24.553,5.23,24.553,5.23    c-4.075,1.094-7.962,4.981-9.387,8.493c-0.759,1.872,0.258,3.629,2.275,3.713c0.851,0.035,1.756-0.127,2.566-0.405    c5.805-1.997,11.434,1.629,12.717,6.635c1.288,5.026-2.253,10.349-7.873,11.829c-7.101,1.871-14.661-2.16-16.414-9.089    c-1.289-5.096,0.289-9.794,3.124-14.09c4.377-6.632,10.97-9.698,18.415-11.333C36.121-0.366,44.489,1.037,46.593,1.814z     M70.673,39.731c0.015,3.575,2.657,6.239,6.177,6.23c3.44-0.009,6.187-2.816,6.165-6.3c-0.022-3.39-2.741-6.095-6.146-6.114    C73.325,33.527,70.658,36.189,70.673,39.731z M70.674,15.053c0.011,3.585,2.621,6.221,6.16,6.221c3.455,0,6.185-2.765,6.179-6.257    c-0.006-3.385-2.707-6.075-6.127-6.102C73.313,8.887,70.663,11.505,70.674,15.053z");
+  static Path _trebleClefPath = parseSvgPathData(
+      "M 592.10873,1275.9669 C 461.75172,1268.3902 328.65904,1186.6265 249.0601,1092.783 C 156.77394,983.97782 118.72592,836.04683 128.47199,714.56357 C 157.10277,357.61288 545.27831,146.63848 688.97108,-9.280262 C 785.15294,-113.64625 805.31643,-164.52308 826.79977,-218.19949 C 868.39181,-322.09965 875.09166,-443.8341 792.63375,-452.92251 C 713.90712,-461.59988 649.13737,-337.79201 620.20973,-253.17845 C 594.19587,-177.07331 576.90507,-100.71696 592.5563,13.979673 C 599.58954,65.50958 793.18636,1503.9125 796.45179,1526.2088 C 829.05589,1749.0255 701.63092,1841.2249 571.55248,1857.6251 C 290.65671,1893.038 200.52617,1607.5843 326.4212,1499.1719 C 423.34291,1415.7001 564.35026,1487.3615 556.73245,1624.5919 C 549.98693,1746.1391 430.80546,1749.7197 400.35244,1746.9429 C 447.10065,1830.7846 799.52998,1874.5871 745.41513,1495.7923 C 737.811,1442.5634 558.91549,90.842953 554.53112,60.595454 C 521.71238,-165.84753 516.71147,-345.08557 634.69182,-554.25141 C 678.24767,-631.46637 747.0821,-681.3156 780.87362,-674.7893 C 788.29962,-673.35526 795.69824,-670.62872 801.57144,-664.56827 C 892.07191,-571.31845 919.83494,-364.53202 909.9199,-245.74332 C 899.76736,-124.11391 894.1088,1.7993735 773.16902,148.63428 C 726.36601,205.45738 583.54553,330.63538 501.65851,402.55255 C 386.60107,503.59831 303.14756,591.85179 257.99323,698.31862 C 207.24886,817.97506 198.65826,968.6006 313.27268,1102.2505 C 379.20247,1177.7619 488.59222,1231.3424 580.65459,1232.4842 C 836.63719,1235.6628 911.39048,1109.4801 913.77904,966.58197 C 917.71126,731.28351 633.64596,642.32214 516.85762,804.10953 C 449.14212,897.92109 478.90552,996.66049 524.38411,1043.6371 C 539.99424,1059.7587 557.43121,1072.0395 573.92734,1078.8855 C 579.9056,1081.3654 593.96751,1087.9054 589.97593,1097.4779 C 586.6557,1105.4428 580.20702,1105.8904 574.33381,1105.1871 C 500.68573,1096.3544 419.13667,1025.958 399.0828,904.87212 C 369.86288,728.38801 525.6035,519.0349 747.9133,553.274 C 893.45572,575.68903 1028.5853,700.92182 1016.7338,934.11946 C 1006.5722,1133.9822 840.87996,1290.4262 592.10873,1275.9669 z");
+  static Path _bassClefPath = parseSvgPathData(
+      "M46.593,1.814c16.429,6.061,22.84,20.793,18.019,36.615c-4.08,13.392-12.446,23.87-23.83,31.962    C30.29,77.849,18.962,83.849,7.427,89.48c-0.507,0.247-1.605,0.185-1.874-0.162c-0.637-0.824-0.321-1.557,0.657-2.236    c6.66-4.617,13.521-8.995,19.826-14.061c13.186-10.593,21.679-24.134,23.958-41.147c0.693-5.175,0.587-10.387-0.781-15.466    c-1.404-5.217-4.386-8.989-8.422-10.997c-2.274-1.131-4.882-1.687-7.731-1.656C28.22,3.807,24.553,5.23,24.553,5.23    c-4.075,1.094-7.962,4.981-9.387,8.493c-0.759,1.872,0.258,3.629,2.275,3.713c0.851,0.035,1.756-0.127,2.566-0.405    c5.805-1.997,11.434,1.629,12.717,6.635c1.288,5.026-2.253,10.349-7.873,11.829c-7.101,1.871-14.661-2.16-16.414-9.089    c-1.289-5.096,0.289-9.794,3.124-14.09c4.377-6.632,10.97-9.698,18.415-11.333C36.121-0.366,44.489,1.037,46.593,1.814z     M70.673,39.731c0.015,3.575,2.657,6.239,6.177,6.23c3.44-0.009,6.187-2.816,6.165-6.3c-0.022-3.39-2.741-6.095-6.146-6.114    C73.325,33.527,70.658,36.189,70.673,39.731z M70.674,15.053c0.011,3.585,2.621,6.221,6.16,6.221c3.455,0,6.185-2.765,6.179-6.257    c-0.006-3.385-2.707-6.075-6.127-6.102C73.313,8.887,70.663,11.505,70.674,15.053z");
   draw(Canvas canvas) {
     canvas.save();
     canvas.translate(bounds.left, bounds.top);
     clefs.forEach((clef) {
       canvas.save();
-      switch(clef) {
+      switch (clef) {
         case Clef.treble:
-          canvas.translate(0.2 * bounds.width, 33.2 * halfStepPhysicalDistance); // Position of clef
+          canvas.translate(0.2 * bounds.width,
+              33.2 * halfStepPhysicalDistance); // Position of clef
           canvas.scale(0.0092 * halfStepPhysicalDistance);
           canvas.drawPath(_trebleClefPath, alphaDrawerPaint);
           break;
         case Clef.bass:
-          canvas.translate(0.2 * bounds.width, 51.75 * halfStepPhysicalDistance); // Position of clef
+          canvas.translate(0.2 * bounds.width,
+              51.75 * halfStepPhysicalDistance); // Position of clef
           canvas.scale(.13 * halfStepPhysicalDistance);
           canvas.drawPath(_bassClefPath, alphaDrawerPaint);
           break;
@@ -38,31 +39,37 @@ class MelodyClefRenderer extends BaseMusicRenderer {
           // TODO: Handle this case.
           break;
         case Clef.drum_treble:
-          double top = pointFor(letter: NoteLetter.D, octave:5);
-          double bottom = pointFor(letter: NoteLetter.G, octave:4);
+          double top = pointFor(letter: NoteLetter.D, octave: 5);
+          double bottom = pointFor(letter: NoteLetter.G, octave: 4);
           double x1 = 0.45 * bounds.width;
           double x2 = 0.55 * bounds.width;
           alphaDrawerPaint.preserveProperties(() {
-            alphaDrawerPaint.strokeWidth = max(1,4 * xScale);
-            canvas.drawLine(Offset(x1, top), Offset(x1, bottom), alphaDrawerPaint);
-            canvas.drawLine(Offset(x2, top), Offset(x2, bottom), alphaDrawerPaint);
+            alphaDrawerPaint.strokeWidth = max(1, 4 * xScale);
+            canvas.drawLine(
+                Offset(x1, top), Offset(x1, bottom), alphaDrawerPaint);
+            canvas.drawLine(
+                Offset(x2, top), Offset(x2, bottom), alphaDrawerPaint);
           });
 
-          canvas.translate(0.57 * bounds.width, 39.2 * halfStepPhysicalDistance); // Position of clef
+          canvas.translate(0.57 * bounds.width,
+              39.2 * halfStepPhysicalDistance); // Position of clef
           canvas.scale(0.0025 * halfStepPhysicalDistance);
           canvas.drawPath(_trebleClefPath, alphaDrawerPaint);
           break;
         case Clef.drum_bass:
-          double top = pointFor(letter: NoteLetter.F, octave:3);
-          double bottom = pointFor(letter: NoteLetter.B, octave:2);
+          double top = pointFor(letter: NoteLetter.F, octave: 3);
+          double bottom = pointFor(letter: NoteLetter.B, octave: 2);
           double x1 = 0.45 * bounds.width;
           double x2 = 0.55 * bounds.width;
           alphaDrawerPaint.preserveProperties(() {
-            alphaDrawerPaint.strokeWidth = max(1,4 * xScale);
-            canvas.drawLine(Offset(x1, top), Offset(x1, bottom), alphaDrawerPaint);
-            canvas.drawLine(Offset(x2, top), Offset(x2, bottom), alphaDrawerPaint);
+            alphaDrawerPaint.strokeWidth = max(1, 4 * xScale);
+            canvas.drawLine(
+                Offset(x1, top), Offset(x1, bottom), alphaDrawerPaint);
+            canvas.drawLine(
+                Offset(x2, top), Offset(x2, bottom), alphaDrawerPaint);
           });
-          canvas.translate(0.59 * bounds.width, 54.4 * halfStepPhysicalDistance); // Position of clef
+          canvas.translate(0.59 * bounds.width,
+              54.4 * halfStepPhysicalDistance); // Position of clef
           canvas.scale(.033 * halfStepPhysicalDistance);
           canvas.drawPath(_bassClefPath, alphaDrawerPaint);
           break;
diff --git a/lib/drawing/music/music_color_guide.dart b/lib/drawing/music/music_color_guide.dart
index ff6d6186..99d4e7d1 100644
--- a/lib/drawing/music/music_color_guide.dart
+++ b/lib/drawing/music/music_color_guide.dart
@@ -3,19 +3,20 @@ import '../../generated/protos/music.pb.dart';
 import 'package:flutter/material.dart';
 
 class MelodyColorGuide extends BaseMusicRenderer {
-  @override bool showSteps = true;
-  @override double normalizedDevicePitch = 0;
+  @override
+  double normalizedDevicePitch = 0;
 
-  @override double get halfStepsOnScreen => (highestPitch - lowestPitch + 1).toDouble();
+  @override
+  double get halfStepsOnScreen => (highestPitch - lowestPitch + 1).toDouble();
 
   @override
   drawColorGuide(Canvas canvas) {
     iterateSubdivisions(() {
-      if(isCurrentlyPlayingBeat || isSelectedBeatInHarmony) {
+      if (isCurrentlyPlayingBeat || isSelectedBeatInHarmony) {
         colorGuideAlpha = 255;
-      } else if(isUserChoosingHarmonyChord && !isSelectedBeatInHarmony) {
+      } else if (isUserChoosingHarmonyChord && !isSelectedBeatInHarmony) {
         colorGuideAlpha = 69;
-      } else if(melody.instrumentType == InstrumentType.drum) {
+      } else if (melody.instrumentType == InstrumentType.drum) {
         colorGuideAlpha = 0;
       } else {
         colorGuideAlpha = 155;
@@ -23,4 +24,4 @@ class MelodyColorGuide extends BaseMusicRenderer {
       super.drawColorGuide(canvas);
     });
   }
-}
\ No newline at end of file
+}
diff --git a/lib/drawing/music/music_measure_lines_renderer.dart b/lib/drawing/music/music_measure_lines_renderer.dart
index 670f4687..cc4a9f9f 100644
--- a/lib/drawing/music/music_measure_lines_renderer.dart
+++ b/lib/drawing/music/music_measure_lines_renderer.dart
@@ -7,8 +7,6 @@ import '../../util/util.dart';
 import 'music_staff_lines_renderer.dart';
 
 class MelodyMeasureLinesRenderer extends BaseMusicRenderer {
-  @override
-  bool showSteps = true;
   @override
   double normalizedDevicePitch = 0;
   double notationAlpha = 0;
diff --git a/lib/drawing/music/music_piano_clef_renderer.dart b/lib/drawing/music/music_piano_clef_renderer.dart
index 8c4bb713..a737ce0e 100644
--- a/lib/drawing/music/music_piano_clef_renderer.dart
+++ b/lib/drawing/music/music_piano_clef_renderer.dart
@@ -6,9 +6,6 @@ import 'package:flutter/material.dart';
 import '../../widget/keyboard.dart';
 
 class MelodyPianoClefRenderer extends BaseMusicRenderer {
-  @override
-  bool showSteps = true;
-
   @override
   double get halfStepsOnScreen => (highestPitch - lowestPitch + 1).toDouble();
 
diff --git a/lib/drawing/music/music_staff_lines_renderer.dart b/lib/drawing/music/music_staff_lines_renderer.dart
index 9a96d84d..2ad8344a 100644
--- a/lib/drawing/music/music_staff_lines_renderer.dart
+++ b/lib/drawing/music/music_staff_lines_renderer.dart
@@ -101,8 +101,6 @@ extension ClefNotes on Clef {
 }
 
 class MelodyStaffLinesRenderer extends BaseMusicRenderer {
-  @override
-  bool showSteps = true;
   @override
   double normalizedDevicePitch = 0;
 
diff --git a/lib/drawing/music/notation_music_renderer.dart b/lib/drawing/music/notation_music_renderer.dart
index 1a0bfe71..419b763b 100644
--- a/lib/drawing/music/notation_music_renderer.dart
+++ b/lib/drawing/music/notation_music_renderer.dart
@@ -47,13 +47,6 @@ class _RenderInstructions {
 }
 
 class NotationMusicRenderer extends BaseMusicRenderer {
-  @override
-  bool showSteps = true;
-  @override
-  double normalizedDevicePitch = 0;
-//  @override
-//  double get axisLength => bounds.height / xScale;
-
   Iterable<Melody> otherMelodiesOnStaff = [];
   double notationAlpha = 1;
   bool stemsUp = true;
diff --git a/lib/main.dart b/lib/main.dart
index 425140d8..361ce6f3 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -121,7 +121,7 @@ class MyApp extends StatelessWidget {
       key: Key('BeatScratch'),
       title: 'BeatScratch',
       onGenerateTitle: (context) => 'BeatScratch',
-      debugShowCheckedModeBanner: false,
+      // debugShowCheckedModeBanner: false,
       theme: ThemeData(
           textSelectionTheme: TextSelectionThemeData(
               selectionColor: chromaticSteps[0].withOpacity(0.5),
@@ -537,7 +537,7 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
     BeatScratchPlugin.setPlaybackMode(Playback_Mode.score);
     setState(() {
       if (interactionMode != InteractionMode.universe) {
-        // showSections = false;
+        showSections = false;
         showDuplicateScoreWarning = false;
         if (BeatScratchPlugin.supportsStorage) {
           saveCurrentScore(delay: slowAnimationDuration * 2);
@@ -857,7 +857,11 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
     universeViewUI = UniverseViewUI(setState, _universeManager)
       ..messagesUI = messagesUI
       ..refreshUniverseData = refreshUniverseData
-      ..refreshUniverseData = refreshUniverseData;
+      ..switchToLocalScores = MyPlatform.isWeb
+          ? null
+          : () {
+              _doShowScorePicker(ScorePickerMode.open, doDirectly: true);
+            };
     _universeManager
       ..refreshUniverseData = refreshUniverseData
       ..messagesUI = messagesUI
@@ -895,6 +899,7 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
     };
     BeatScratchPlugin.onOpenUrlFromSystem = onOpenUrlFromSystem;
     BeatScratchPlugin.onCountInInitiated = () {
+      print("onCountInInitiated in main");
       setState(() {
         _tapInBeat = -2;
         _forceShowTapInBar = true;
@@ -1170,6 +1175,7 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
                           sectionColor: sectionColor,
                           keyboardHeight: _keyboardHeight,
                           settingsHeight: _midiSettingsHeight,
+                          scorePickerWidth: _scorePickerWidth(context),
                           showDownloads: ((MyPlatform.isWeb) &&
                                   !showDownloadLinks)
                               ? () => setState(() => showDownloadLinks = true)
@@ -1193,6 +1199,8 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
                                         sectionColor: sectionColor,
                                         keyboardHeight: _keyboardHeight,
                                         settingsHeight: _midiSettingsHeight,
+                                        scorePickerWidth:
+                                            _scorePickerWidth(context),
                                         showDownloads: ((MyPlatform.isWeb) &&
                                                 !showDownloadLinks)
                                             ? () => setState(
@@ -1214,6 +1222,7 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
                           ),
                         Expanded(
                             child: Column(children: [
+                          _universeScoreTitle(),
                           _downloadBanner(context),
                           if (_scorePickerScrollDirection == Axis.horizontal)
                             _scorePicker(context),
@@ -1221,7 +1230,6 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
                               context: context,
                               setState: setState,
                               currentSection: currentSection),
-                          _universeScoreTitle(),
                           _horizontalSectionList(),
                           Expanded(
                               child: Row(children: [
@@ -1335,7 +1343,13 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
                 ))));
   }
 
-  double get universeScoreTitleHeight => interactionMode.isUniverse ? 40 : 0;
+  double get universeScoreTitleHeight => interactionMode.isUniverse ||
+          (_scoreManager.currentScoreName == ScoreManager.UNIVERSE_SCORE &&
+              !interactionMode.isEdit &&
+              (!context.isPortraitPhone ||
+                  !scorePickerMode.isLocalOperationMode))
+      ? 44
+      : 0;
 
   AnimatedContainer _universeScoreTitle() {
     Color foregroundColor, backgroundColor;
@@ -1876,16 +1890,20 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
         if (vertical)
           Container(
               height: 36,
+              width: 48,
               child: Stack(
                 children: [
                   Center(
                       child: Transform.translate(
-                          offset: Offset(7, -3),
+                          offset: Offset(9, -5),
                           child: tapInBarInstructions(withText: false))),
                   Center(
                       child: Transform.translate(
-                          offset: Offset(0, 8),
+                          offset: Offset(0, 10),
                           child: Text("Tap",
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              textAlign: TextAlign.center,
                               style: TextStyle(
                                   color: Colors.white,
                                   fontSize: 10,
@@ -2317,11 +2335,12 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
     });
   }
 
-  _doShowScorePicker(mode) {
+  _doShowScorePicker(ScorePickerMode mode, {bool doDirectly: false}) {
     setState(() {
-      if ((interactionMode.isUniverse && mode != ScorePickerMode.universe) ||
-          (interactionMode != InteractionMode.view &&
-              mode != ScorePickerMode.show)) {
+      if (!doDirectly &&
+          ((interactionMode.isUniverse && mode != ScorePickerMode.universe) ||
+              (interactionMode != InteractionMode.view &&
+                  mode != ScorePickerMode.show))) {
         scorePickerMode = ScorePickerMode.none;
         _viewMode();
         Future.delayed(slowAnimationDuration, () {
@@ -2333,6 +2352,13 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
       } else {
         scorePickerMode = mode;
         showScorePicker = true;
+        if (mode == ScorePickerMode.open && !interactionMode.isView) {
+          interactionMode = InteractionMode.view;
+          universeViewUI.visible = false;
+        }
+        if (mode == ScorePickerMode.universe && !interactionMode.isUniverse) {
+          interactionMode = InteractionMode.universe;
+        }
       }
     });
   }
@@ -2397,22 +2423,25 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
 
   SectionList createSectionList({Axis scrollDirection = Axis.horizontal}) {
     SectionList result = SectionList(
-      appSettings: _appSettings,
-      sectionColor: sectionColor,
-      score: score,
-      setState: setState,
-      scrollDirection: scrollDirection,
-      currentSection: currentSection,
-      selectSection: _selectSection,
-      insertSection: (s) => _insertSection(s, withNewColor: true),
-      showSectionBeatCounts: showBeatCounts,
-      toggleShowSectionBeatCounts: () {
-        setState(() {
-          showBeatCounts = !showBeatCounts;
-        });
-      },
-      allowReordering: interactionMode.isEdit,
-    );
+        appSettings: _appSettings,
+        sectionColor: sectionColor,
+        score: score,
+        setState: setState,
+        scrollDirection: scrollDirection,
+        currentSection: currentSection,
+        selectSection: _selectSection,
+        insertSection: (s) => _insertSection(s, withNewColor: true),
+        showSectionBeatCounts: showBeatCounts,
+        toggleShowSectionBeatCounts: () {
+          setState(() {
+            showBeatCounts = !showBeatCounts;
+          });
+        },
+        allowReordering: interactionMode.isEdit,
+        width:
+            scrollDirection == Axis.horizontal ? musicViewWidth(context) : null,
+        height:
+            scrollDirection == Axis.vertical ? musicViewHeight(context) : null);
     _sectionLists.add(result);
     return result;
   }
@@ -2463,21 +2492,20 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
         webWarningHeight -
         _bottomNotchPadding -
         exportUI.height -
-        universeViewUIHeight -
+        (context.isPortraitPhone ? 0 : 0) -
         downloadLinksHeight -
         _topNotchPaddingReal -
         _bottomTapInBarHeight -
-        // universeScoreTitleHeight -
+        universeScoreTitleHeight -
         duplicateScoreWarningHeight -
         beatScratchToolbarHeight(context);
-    // if (context.isPortraitPhone) {
-    //   result -= universeScoreTitleHeight;
-    // }
+    if (context.isPortraitPhone && !interactionMode.isUniverse) {
+      result += universeScoreTitleHeight;
+    }
     return result;
   }
 
-  Widget _layersAndMusicView(BuildContext context) {
-    var data = MediaQuery.of(context);
+  double musicViewHeight(BuildContext context) {
     double fullHeight = flexibleAreaHeight(context);
     if (_scorePickerScrollDirection == Axis.horizontal) {
       fullHeight -= _scorePickerHeight(context);
@@ -2485,16 +2513,31 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
     if (context.isPortraitPhone) {
       fullHeight -= universeScoreTitleHeight;
     }
-    double fullWidth = data.size.width -
+    return fullHeight;
+  }
+
+  double flexibleAreaWidth(BuildContext context) {
+    double result = MediaQuery.of(context).size.width -
         verticalSectionListWidth -
         _leftNotchPadding -
         _rightNotchPadding -
         _landscapeTapInBarWidth -
         _landscapePhoneSecondToolbarWidth -
         _landscapePhoneBeatscratchToolbarWidth;
+    return result;
+  }
+
+  double musicViewWidth(BuildContext context) {
+    double fullWidth = flexibleAreaWidth(context);
     if (_scorePickerScrollDirection == Axis.vertical) {
       fullWidth -= _scorePickerWidth(context);
     }
+    return fullWidth;
+  }
+
+  Widget _layersAndMusicView(BuildContext context) {
+    double fullHeight = musicViewHeight(context);
+    double fullWidth = musicViewWidth(context);
 
     final landscapeLayersWidth = fullWidth * (1 - _musicViewSizeFactor);
     final portraitMelodyHeight = fullHeight * _musicViewSizeFactor;
@@ -2976,6 +3019,13 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
               scorePickerMode = mode;
             });
           },
+          goToUniverse: () {
+            setState(() {
+              scorePickerMode = ScorePickerMode.universe;
+              interactionMode = InteractionMode.universe;
+              universeViewUI.visible = true;
+            });
+          },
           close: () => _closeScorePicker(waitForSave: true),
           refreshUniverseData: refreshUniverseData,
           scrollDirection: _scorePickerScrollDirection,
diff --git a/lib/music_preview/preview_renderer.dart b/lib/music_preview/preview_renderer.dart
index 62b67456..3732b17d 100644
--- a/lib/music_preview/preview_renderer.dart
+++ b/lib/music_preview/preview_renderer.dart
@@ -38,18 +38,17 @@ class MusicPreviewRenderer {
     final parts = score.parts;
     final staves = parts.map((part) => PartStaff(part)).toList(growable: false);
     final partTopOffsets = Map<String, double>.fromIterable(parts.asMap().keys,
-        key: (index) => parts[index].id,
-        value: (index) => index * scale * MusicSystemPainter.staffHeight);
+        key: (index) => parts[index].id, value: (index) => index * staffHeight);
     final staffOffsets = Map<String, double>.fromIterable(staves.asMap().keys,
         key: (index) => staves[index].id,
-        value: (index) => index * scale * MusicSystemPainter.staffHeight);
+        value: (index) => index * staffHeight);
     return MusicSystemPainter(
       sectionScaleNotifier: ValueNotifier(renderSections ? 1 : 0),
       score: score,
       section: score.sections.first,
       musicViewMode: musicViewMode,
-      xScaleNotifier: ValueNotifier(scale),
-      yScaleNotifier: ValueNotifier(scale),
+      transformationController: TransformationController()..value.scale(scale),
+      rescale: true,
       staves: ValueNotifier(staves),
       partTopOffsets: ValueNotifier(partTopOffsets),
       staffOffsets: ValueNotifier(staffOffsets),
@@ -60,8 +59,9 @@ class MusicPreviewRenderer {
           AppSettings.globalRenderingMode == RenderingMode.notation ? 1 : 0),
       colorboardNotesNotifier: ValueNotifier([]),
       keyboardNotesNotifier: ValueNotifier([]),
-      visibleRect: () => Rect.fromLTRB(0, 0, width, height),
-      verticallyVisibleRect: () => Rect.fromLTRB(0, 0, width, height),
+      visibleRect: () => Rect.fromLTRB(0, 0, width / scale, height / scale),
+      verticallyVisibleRect: () =>
+          Rect.fromLTRB(0, 0, width / scale, height / scale),
       keyboardPart: ValueNotifier(null),
       colorboardPart: ValueNotifier(null),
       focusedPart: ValueNotifier(null),
@@ -76,9 +76,7 @@ class MusicPreviewRenderer {
   }
 
   double get maxWidth =>
-      (MusicSystemPainter.extraBeatsSpaceForClefs + score.beatCount) *
-      unscaledStandardBeatWidth *
-      scale;
+      (extraBeatsSpaceForClefs + score.beatCount) * beatWidth * scale;
   double get actualWidth => min(maxWidth, width);
   Future<ui.Image> get renderedScoreImage async {
     if (height < 1 || width < 1) {
diff --git a/lib/music_preview/score_preview.dart b/lib/music_preview/score_preview.dart
index b0bf4306..c3d1c5e2 100644
--- a/lib/music_preview/score_preview.dart
+++ b/lib/music_preview/score_preview.dart
@@ -68,8 +68,8 @@ class _ScorePreviewState extends State<ScorePreview> {
       : thumbnailB = value;
 
   double get maxWidth =>
-      (MusicSystemPainter.extraBeatsSpaceForClefs + widget.score.beatCount) *
-      unscaledStandardBeatWidth *
+      (extraBeatsSpaceForClefs + widget.score.beatCount) *
+      beatWidth *
       widget.scale;
   double get actualWidth => min(maxWidth, widget.width);
 
diff --git a/lib/music_view/melody_editing_toolbar.dart b/lib/music_view/melody_editing_toolbar.dart
index 0dae84c8..4969f477 100644
--- a/lib/music_view/melody_editing_toolbar.dart
+++ b/lib/music_view/melody_editing_toolbar.dart
@@ -20,6 +20,7 @@ class MelodyEditingToolbar extends StatefulWidget {
   final bool visible;
   final ValueNotifier<int> highlightedBeat;
   final Function(MelodyReference, double) setReferenceVolume;
+  final VoidCallback toggleRecording;
 
   Melody get melody => score.parts
       .expand((p) => p.melodies)
@@ -34,7 +35,8 @@ class MelodyEditingToolbar extends StatefulWidget {
       @required this.highlightedBeat,
       @required this.setReferenceVolume,
       @required this.recordingMelody,
-      @required this.visible})
+      @required this.visible,
+      @required this.toggleRecording})
       : super(key: key);
 
   @override
@@ -100,8 +102,119 @@ class _MelodyEditingToolbarState extends State<MelodyEditingToolbar>
         BeatScratchPlugin.playing &&
         widget.recordingMelody;
     final melodyReference = widget.currentSection.referenceTo(widget.melody);
+    bool playingOrCountingIn =
+        BeatScratchPlugin.playing || BeatScratchPlugin.countInInitiated;
+    bool showGo = widget.recordingMelody &&
+        !playingOrCountingIn &&
+        BeatScratchPlugin.supportsPlayback;
     return Row(children: [
       SizedBox(width: 5),
+      Container(
+        width: 48,
+        child: MyFlatButton(
+            padding: EdgeInsets.zero,
+            onPressed: widget.toggleRecording,
+            child: Stack(children: [
+              Center(
+                  child: Transform.translate(
+                      offset: Offset(0, -5),
+                      child: Icon(Icons.fiber_manual_record,
+                          color: recordingColor))),
+              Center(
+                  child: Transform.translate(
+                      offset: Offset(0, 10),
+                      child: Text(
+                          widget.recordingMelody
+                              ? BeatScratchPlugin.playing
+                                  ? 'Recording\n'
+                                  : 'Recording\nOn'
+                              : 'Recording\nOff',
+                          overflow: TextOverflow.ellipsis,
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                              height: 0.9,
+                              fontWeight: FontWeight.w100,
+                              fontSize: 8,
+                              color: recordingColor)))),
+            ])),
+      ),
+
+      /// child: Column(children: [
+      ///   Expanded(child: SizedBox()),
+      ///   Transform.translate(
+      ///       offset: Offset(0, 0),
+      ///       child: Icon(Icons.fiber_manual_record, color: recordingColor)),
+      ///   Text(
+      ///       widget.recordingMelody
+      ///           ? BeatScratchPlugin.playing
+      ///               ? 'Recording\n'
+      ///               : 'Recording\nOn'
+      ///           : 'Recording\nOff',
+      ///       overflow: TextOverflow.ellipsis,
+      ///       textAlign: TextAlign.center,
+      ///       style: TextStyle(
+      ///           height: 0.9,
+      ///           fontWeight: FontWeight.w100,
+      ///           fontSize: 8,
+      ///           color: recordingColor)),
+      ///   Expanded(child: SizedBox()),
+      /// ])),
+      AnimatedOpacity(
+          duration: animationDuration,
+          opacity: showGo ? 1 : 0,
+          child: AnimatedContainer(
+              duration: animationDuration,
+              width: showGo ? 30 : 0,
+              child: MyFlatButton(
+                  padding: EdgeInsets.zero,
+                  onPressed: showGo
+                      ? () {
+                          if (BeatScratchPlugin.playing) {
+                            BeatScratchPlugin.pause();
+                          } else {
+                            BeatScratchPlugin.play();
+                          }
+                        }
+                      : null,
+                  child: Stack(
+                    children: [
+                      Center(
+                        child: Transform.translate(
+                            offset: Offset(0, -5),
+                            child: Icon(Icons.double_arrow,
+                                color:
+                                    !showGo ? Colors.grey : chromaticSteps[0])),
+                      ),
+                      Center(
+                          child: Transform.translate(
+                              offset: Offset(0, 15),
+                              child: Text('Go!\n',
+                                  overflow: TextOverflow.ellipsis,
+                                  textAlign: TextAlign.center,
+                                  style: TextStyle(
+                                      fontWeight: FontWeight.w100,
+                                      fontSize: 8,
+                                      color: !showGo
+                                          ? Colors.grey
+                                          : chromaticSteps[7]))))
+                    ],
+                  )))),
+      // Column(children: [
+      //   Expanded(child: SizedBox()),
+      //   Transform.translate(
+      //       offset: Offset(0, 5),
+      //       child: Icon(Icons.double_arrow,
+      //           color: !showGo ? Colors.grey : chromaticSteps[0])),
+      //   Text('Go!\n',
+      //       overflow: TextOverflow.ellipsis,
+      //       textAlign: TextAlign.center,
+      //       style: TextStyle(
+      //           fontWeight: FontWeight.w100,
+      //           fontSize: 8,
+      //           color: !showGo ? Colors.grey : chromaticSteps[7])),
+      //   Expanded(child: SizedBox()),
+      // ])))),
+      SizedBox(width: 7),
       IncrementableValue(
         collapsing: true,
         onDecrement: (widget.melody != null && widget.melody.beatCount > 1)
@@ -173,7 +286,10 @@ class _MelodyEditingToolbarState extends State<MelodyEditingToolbar>
         opacity: widget.melody != null && widget.visible ? 1 : 0,
         child: MySlider(
             value: melodyReference?.volume ?? 0,
-            activeColor: widget.sectionColor,
+            activeColor: melodyReference?.playbackType ==
+                    MelodyReference_PlaybackType.playback_indefinitely
+                ? widget.sectionColor
+                : widget.sectionColor.withOpacity(0.5),
             onChanged: (widget.melody != null && widget.visible)
                 ? (value) {
                     widget.setReferenceVolume(melodyReference, value);
@@ -367,19 +483,6 @@ class _MelodyEditingToolbarState extends State<MelodyEditingToolbar>
                     ],
                   )))),
       SizedBox(width: 7),
-      Column(children: [
-        SizedBox(height: 1),
-        Transform.translate(
-            offset: Offset(0, 5),
-            child: Icon(Icons.fiber_manual_record, color: recordingColor)),
-        Text('Recording',
-            overflow: TextOverflow.ellipsis,
-            style: TextStyle(
-                fontWeight: FontWeight.w100,
-                fontSize: 10,
-                color: recordingColor)),
-      ]),
-      SizedBox(width: 7),
     ]);
   }
 }
diff --git a/lib/music_view/music_scroll_container.dart b/lib/music_view/music_scroll_container.dart
index bdf259b0..51c6b376 100644
--- a/lib/music_view/music_scroll_container.dart
+++ b/lib/music_view/music_scroll_container.dart
@@ -1,9 +1,11 @@
 import 'dart:math';
 
 import 'package:beatscratch_flutter_redux/settings/settings.dart';
+import 'package:beatscratch_flutter_redux/widget/my_platform.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
+import 'package:matrix4_transform/matrix4_transform.dart';
 
 import '../beatscratch_plugin.dart';
 import '../generated/protos/music.pb.dart';
@@ -14,15 +16,8 @@ import '../util/music_theory.dart';
 import '../util/util.dart';
 import 'music_system_painter.dart';
 
-class ScaleUpdate {
-  final double oldScale;
-  final double newScale;
-
-  ScaleUpdate(this.oldScale, this.newScale);
-}
-
 class MusicScrollContainer extends StatefulWidget {
-  static const double minScale = 0.09;
+  static const double minScale = 0.04;
   static const double maxScale = 1.0;
 
   final MusicViewMode musicViewMode;
@@ -31,12 +26,10 @@ class MusicScrollContainer extends StatefulWidget {
   final Color sectionColor;
   final Melody focusedMelody;
   final RenderingMode renderingMode;
-  final double xScale, yScale;
   final List<MusicStaff> staves;
   final Part focusedPart, keyboardPart, colorboardPart;
   final double height, width;
   final bool isCurrentScore;
-  final bool isTwoFingerScaling;
   final BSMethod scrollToCurrentBeat, centerCurrentSection, scrollToPart;
   final AppSettings appSettings;
   final ValueNotifier<Iterable<int>> keyboardNotesNotifier,
@@ -45,23 +38,16 @@ class MusicScrollContainer extends StatefulWidget {
   final ValueNotifier<int> highlightedBeat, focusedBeat, tappedBeat;
   final ValueNotifier<Part> tappedPart;
   final ValueNotifier<Offset> requestedScrollOffsetForScale;
-  final ValueNotifier<ScaleUpdate> notifyXScaleUpdate, notifyYScaleUpdate;
-  final ValueNotifier<double> xScaleNotifier,
-      yScaleNotifier,
-      targetXScaleNotifier,
-      targetYScaleNotifier;
-  final ValueNotifier<double> verticalScrollNotifier;
-  final BSMethod scrollToFocusedBeat;
+  final TransformationController transformationController;
+  final ValueNotifier<ScaleUpdateDetails> scaleUpdateNotifier;
+  final ValueNotifier<double> targetScaleNotifier;
   final bool showingSectionList;
 
   const MusicScrollContainer(
       {Key key,
       this.score,
-      this.scrollToFocusedBeat,
       this.currentSection,
       this.sectionColor,
-      this.xScale,
-      this.yScale,
       this.focusedMelody,
       this.renderingMode,
       this.colorboardNotesNotifier,
@@ -80,17 +66,12 @@ class MusicScrollContainer extends StatefulWidget {
       this.tappedBeat,
       this.tappedPart,
       this.requestedScrollOffsetForScale,
-      this.targetXScaleNotifier,
-      this.targetYScaleNotifier,
-      this.isTwoFingerScaling,
+      this.targetScaleNotifier,
       this.scrollToCurrentBeat,
       this.centerCurrentSection,
       this.appSettings,
-      this.notifyXScaleUpdate,
-      this.notifyYScaleUpdate,
-      this.xScaleNotifier,
-      this.yScaleNotifier,
-      this.verticalScrollNotifier,
+      this.transformationController,
+      this.scaleUpdateNotifier,
       this.scrollToPart,
       this.showingSectionList})
       : super(key: key);
@@ -99,13 +80,13 @@ class MusicScrollContainer extends StatefulWidget {
   _MusicScrollContainerState createState() => _MusicScrollContainerState();
 }
 
-Rect horizontallyVisibleRect = Rect.zero;
-Rect verticallyVisibleRect = Rect.zero;
+// Rect horizontallyVisibleRect = Rect.zero;
+// Rect verticallyVisibleRect = Rect.zero;
 
 class _MusicScrollContainerState extends State<MusicScrollContainer>
     with TickerProviderStateMixin {
-  ScrollController verticalController;
-
+  static final double scrollTopMarginPercent = 0.17;
+  static final double scrollLeftMarginPercent = 0.25;
   AnimationController animationController;
   ValueNotifier<double> colorGuideOpacityNotifier,
       colorblockOpacityNotifier,
@@ -122,7 +103,10 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
   ValueNotifier<Part> focusedPart;
   ValueNotifier<Color> sectionColor;
 
-  ScrollController timeScrollController;
+  MusicViewMode _prevViewMode;
+  bool _hasBuilt = false;
+  DateTime _lastAutoScrollTime = DateTime(0);
+  double prevWidth;
   double _prevBeat;
   String _prevSectionOrder;
   String _prevSectionId;
@@ -136,111 +120,220 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
   int get numberOfBeats => /*isViewingSection ? widget.currentSection.harmony.beatCount :*/
       widget.score.beatCount;
 
-  double get xScale => widget.xScale;
-
-  double get yScale => widget.yScale;
+  TransformationController get transformationController =>
+      widget.transformationController;
+  ValueNotifier<ScaleUpdateDetails> get scaleUpdateNotifier =>
+      widget.scaleUpdateNotifier;
+  double get dx =>
+      MatrixUtils.getAsTranslation(transformationController.value).dx;
+  double get dy =>
+      MatrixUtils.getAsTranslation(transformationController.value).dy;
+  double get scale => transformationController.value.getMaxScaleOnAxis();
 
-  double get standardBeatWidth => unscaledStandardBeatWidth * xScale;
+  double get scaledStandardBeatWidth => beatWidth * scale;
 
-  double get targetXScale => widget.targetXScaleNotifier.value;
-  double get targetYScale => widget.targetYScaleNotifier.value;
+  double get targetScale => widget.targetScaleNotifier.value;
 
-  double get targetBeatWidth => unscaledStandardBeatWidth * targetXScale;
+  double get targetBeatWidth => beatWidth;
 
   double get canvasHeightMagic => 1.3 - 0.3 * (widget.staves.length) / 5;
 
-  double get sectionsHeight => widget.musicViewMode == MusicViewMode.score ||
-          xScale < 2 * MusicScrollContainer.minScale ||
-          !widget.showingSectionList
-      ? 30
-      : 0;
-
-  // TODO: Eliminate magic "1.2" constant
-  double get systemHeight => (((widget.staves.length + 0.5) *
-          (MusicSystemPainter.staffHeight) *
-          yScale) +
-      sectionsHeight * 2);
-
-  double get systemRenderAreaWidth =>
-      widget.width - MusicSystemPainter.calculateClefWidth(xScale);
-  double get beatsOnScreenPerSystem =>
-      systemRenderAreaWidth / standardBeatWidth;
-  int get maxSystemsNeeded =>
-      (widget.score.beatCount / beatsOnScreenPerSystem).ceil();
+  bool get showSectionNames =>
+      widget.musicViewMode == MusicViewMode.score ||
+      scale < 2 * MusicScrollContainer.minScale ||
+      !widget.showingSectionList;
+  double get sectionsHeight => showSectionNames ? 30 : 0;
+
+  double get systemHeight =>
+      (((widget.staves.length + 0.5) * (staffHeight)) + sectionsHeight * 2);
 
   int get maxSupportedSystems => widget.appSettings.systemsToRender < 1
-      ? 999999999999
+      ? 9999999
       : widget.appSettings.systemsToRender;
-  int get systemsToRender => min(maxSystemsNeeded, maxSupportedSystems);
 
-  double get calculatedSystemThingy => ((systemsToRender) *
-      ((currentBeat - 2) / (beatsOnScreenPerSystem * systemsToRender)));
+  double systemRenderAreaWidth({double customScale = null}) =>
+      max(0, (widget.width / (customScale ?? scale)) - clefWidth);
+  double beatsOnScreenPerSystem({double customScale = null}) =>
+      systemRenderAreaWidth(customScale: customScale) / beatWidth;
+  int maxSystemsNeeded({double customScale = null}) => (widget.score.beatCount /
+          max(0.1, beatsOnScreenPerSystem(customScale: customScale)))
+      .ceil();
+
+  int systemsToRender({double customScale = null}) =>
+      min(maxSystemsNeeded(customScale: customScale), maxSupportedSystems);
+
+  double calculatedSystemThingy({double customScale = null}) {
+    final systemsToRender = this.systemsToRender(customScale: customScale);
+    return ((systemsToRender) *
+        ((currentBeat - 2) /
+            (beatsOnScreenPerSystem(customScale: customScale) *
+                systemsToRender)));
+  }
+
   // In multi-system mode, we select a "target system" for the
   // currentBeat based on how far into the score currentBeat is.
-  int get currentBeatTargetSystemIndex => max(
-      0,
-      min(systemsToRender - 1,
-          systemsToRender == 1 ? 0 : calculatedSystemThingy.floor()));
+  int currentBeatTargetSystemIndex({double customScale = null}) {
+    final systemsToRender = this.systemsToRender(customScale: customScale);
+    return max(
+        0,
+        min(
+            systemsToRender - 1,
+            systemsToRender == 1
+                ? 0
+                : calculatedSystemThingy(customScale: customScale).floor()));
+  }
 
-  double get currentBeatTargetSystemXOffset =>
-      currentBeatTargetSystemIndex * (systemRenderAreaWidth);
+  double currentBeatTargetSystemXOffset({double customScale = null}) =>
+      currentBeatTargetSystemIndex(customScale: customScale) *
+      (systemRenderAreaWidth(customScale: customScale));
   double get _systemHeightForScrolling =>
       MusicSystemPainter.calculateSystemHeight(
-          yScale, widget.score.parts.length) +
-      MusicSystemPainter.calculateSystemPadding(yScale);
+          scale, widget.score.parts.length) +
+      systemPadding;
   double get _extraHeightForScrolling =>
       _systemHeightForScrolling < widget.height
           ? max(0, (widget.height - _systemHeightForScrolling) / 3)
           : 0;
-  double get currentBeatTargetSystemYOffset => min(
-      max(0, overallCanvasHeight - widget.height),
-      max(
-          0,
-          currentBeatTargetSystemIndex * _systemHeightForScrolling -
-              _extraHeightForScrolling));
 
+  double get smallerScale => scale * 0.6;
   double get overallCanvasWidth =>
-      (numberOfBeats + MusicSystemPainter.extraBeatsSpaceForClefs) *
-      targetBeatWidth;
-  double get overallCanvasHeight => systemsToRender * systemHeight;
-  double get targetClefWidth =>
-      MusicSystemPainter.extraBeatsSpaceForClefs * targetBeatWidth;
-
+      max(widget.width / smallerScale,
+          (numberOfBeats + extraBeatsSpaceForClefs) * targetBeatWidth) *
+      1.5;
+  double overallCanvasHeight({double customScale = null}) =>
+      max(widget.height / smallerScale,
+          systemsToRender(customScale: customScale) * systemHeight) *
+      1.5;
+
+  double get targetClefWidth => extraBeatsSpaceForClefs * targetBeatWidth;
   double get sectionWidth => widget.currentSection.beatCount * targetBeatWidth;
-
-  double get visibleWidth => horizontallyVisibleRect.width;
-
+  double get visibleHeight => transformedRect.height;
+  double get visibleWidth => transformedRect.width;
   double get visibleAreaForSection => visibleWidth - targetClefWidth;
+  bool get autoScroll => widget.appSettings.autoScrollMusic;
+  bool get autoSort => widget.appSettings.autoSortMusic;
+  bool get autoZoomAlign => widget.appSettings.autoZoomAlignMusic;
 
-  double get marginBeatsForBeat =>
-      max(0, visibleWidth - 2 * targetClefWidth - targetBeatWidth) /
-      targetBeatWidth;
+  get minScale => MusicScrollContainer.minScale;
+  get maxScale => MusicScrollContainer.maxScale;
+  double get scaledSystemHeight => MusicSystemPainter.calculateSystemHeight(
+      scale, widget.score.parts.length);
+
+  Animation<Matrix4> interactiveAnimation;
+  AnimationController interactiveController;
+  void _interactiveAnimationStop() {
+    interactiveController.stop();
+    interactiveAnimation?.removeListener(_onInteractiveAnimation);
+    interactiveAnimation = null;
+    interactiveController.reset();
+  }
 
-  double get marginBeatsForSection =>
-      max(0, visibleWidth - targetClefWidth - sectionWidth) / targetBeatWidth;
+  void _onInteractiveAnimation() {
+    if (interactiveAnimation != null) {
+      transformationController.value = interactiveAnimation.value;
+      if (!interactiveController.isAnimating) {
+        interactiveAnimation.removeListener(_onInteractiveAnimation);
+        interactiveAnimation = null;
+        interactiveController.reset();
+      }
+    }
+  }
 
-  // Rect get horizontallyVisibleRect => horizontallyVisibleRect;
-  // set horizontallyVisibleRect(value) {
-  //   horizontallyVisibleRect = value;
-  // }
+  bool _animateToTargetedScale = true;
+  int get focusedSystem =>
+      max(
+          0,
+          ((transformedRect.top + 0.5 * transformedRect.top) /
+                  scaledSystemHeight)
+              .round()) +
+      1;
+  void animateToTargetScaleAndPosition() {
+    if (!_animateToTargetedScale) return;
+
+    if (widget.appSettings.autoScrollMusic) {
+      scrollToCurrentBeat(customScale: targetScale);
+    } else {
+      // interactiveController.reset();
+      final targetedMatrix = transformationController.value.clone();
+      targetedMatrix.scale(
+          targetScale / scale, targetScale / scale, targetScale / scale);
+
+      double scaleChange = targetScale / scale;
+      int focusedSystem = this.focusedSystem;
+      adjustDxForScale(focusedSystem, scaleChange, targetedMatrix,
+          adjustingAfterChange: false);
+
+      double extraDx = 0.5 *
+          (1 - scaleChange) *
+          (transformedRect.left + 0.5 * transformedRect.width);
+      if (transformedRect.left > extraDx) {
+        targetedMatrix.translate(extraDx, 0.0, 0.0);
+      } else {
+        targetedMatrix.translate(transformedRect.left, 0.0, 0.0);
+      }
 
-  // Rect get verticallyVisibleRect => verticallyVisibleRect;
-  // set verticallyVisibleRect(value) {
-  //   verticallyVisibleRect = value;
-  // }
+      double dy = 0.5 *
+          (-focusedSystem * systemHeight +
+              focusedSystem * systemHeight / scaleChange);
+      if (transformedRect.top > dy) {
+        targetedMatrix.translate(0.0, dy, 0.0);
+      } else {
+        targetedMatrix.translate(0.0, transformedRect.top, 0.0);
+      }
+      _animateTo(targetedMatrix);
+    }
+  }
 
-  bool get autoScroll => widget.appSettings.autoScrollMusic;
-  bool get autoSort => widget.appSettings.autoSortMusic;
-  bool get autoZoomAlign => widget.appSettings.autoZoomAlignMusic;
+  _animateTo(Matrix4 targetedMatrix) {
+    if (targetedMatrix != transformationController.value) {
+      _interactiveAnimationStop();
+      interactiveAnimation = Matrix4Tween(
+        begin: transformationController.value,
+        end: targetedMatrix,
+      ).animate(interactiveController);
+      interactiveAnimation.addListener(_onInteractiveAnimation);
+      interactiveController.forward();
+    }
+  }
+
+  void animateToWithinBounds() {
+    _interactiveAnimationStop();
+    final targetedMatrix = transformationController.value.clone();
+    // Animate to within vertical bounds
+    final scaledWidth = widget.width / (scale);
+    final scaledAvailableWidth = scaledWidth - clefWidth;
+    final endOfLastSystem =
+        overallCanvasWidth - systemsToRender() * scaledAvailableWidth;
+    final systemsAwayFromBottom = //max(
+        //0,
+        ((transformedRect.left - endOfLastSystem) / scaledAvailableWidth)
+            .floor(); //);
+    final systemsRendered = max(0, systemsToRender() - systemsAwayFromBottom);
+    final transformedRectMaxTop = max(
+        0,
+        systemsRendered * systemHeight -
+            min(staffHeight * scale, (widget.height / scale)) +
+            staffHeight / 2);
+    print(
+        "animateToWithinBounds: systemsAwayFromBottom=$systemsAwayFromBottom, systemsRendered=$systemsRendered, transformedRectMaxTop=$transformedRectMaxTop");
+    return;
+    if (transformedRect.top >= transformedRectMaxTop) {
+      final untranslate = transformedRect.top - transformedRectMaxTop;
+      print(
+          "animateToWithinBounds: systemsAwayFromBottom=$systemsAwayFromBottom, systemsRendered=$systemsRendered, transformedRectMaxTop=$transformedRectMaxTop");
+      targetedMatrix.translate(0.0, untranslate, 0.0);
+    } else if (transformedRect.top < 0) {
+      targetedMatrix.translate(0.0, transformedRect.top, 0.0);
+    }
+    _animateTo(targetedMatrix);
+  }
 
   @override
   void initState() {
     super.initState();
-    timeScrollController = ScrollController();
-    verticalController = ScrollController();
-    widget.scrollToFocusedBeat.addListener(() {
-      scrollToFocusedBeat();
-    });
+    interactiveController =
+        AnimationController(vsync: this, duration: animationDuration);
+    widget.targetScaleNotifier.addListener(animateToTargetScaleAndPosition);
     animationController = AnimationController(
         vsync: this, duration: Duration(milliseconds: kIsWeb ? 1000 : 500));
     colorblockOpacityNotifier = ValueNotifier(0);
@@ -255,146 +348,21 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
     focusedPart = ValueNotifier(widget.focusedPart);
     sectionColor = ValueNotifier(widget.sectionColor);
     widget.scrollToCurrentBeat.addListener(scrollToCurrentBeat);
-    widget.centerCurrentSection.addListener(_constrainToSectionBounds);
-    // scrollToCurrentBeat
-    timeScrollController.addListener(_timeScrollListener);
-    verticalController.addListener(_verticalScrollListener);
-
-    VoidCallback _scaleUpdateListener(
-        ValueNotifier<ScaleUpdate> notifier, Function(ScaleUpdate) handler) {
-      return () {
-        final value = notifier.value;
-        if (value != null &&
-            value.oldScale
-                .notRoughlyEquals(value.newScale, precision: 0.0005)) {
-          // print("ScaleUpdate: ${value.oldScale.toStringAsFixed(12)} -> "
-          // "${value.newScale.toStringAsFixed(12)}");
-          handler(value);
-          notifier.value = null;
-        }
-      };
-    }
-
-    xScaleUpdateListener =
-        _scaleUpdateListener(widget.notifyXScaleUpdate, (update) {
-      widget.xScaleNotifier.value = update.newScale;
+    widget.centerCurrentSection.addListener(constrainToSectionBounds);
 
-      if (widget.isTwoFingerScaling) {
-        scrollToFocusedBeat(instant: true);
-      } else {
-        // s1, s2: before/after scale. p1: before offset
-        final double p1 = timeScrollController.offset,
-            s1 = update.oldScale,
-            s2 = update.newScale,
-            w1 = widget.width, // * s1 / s2,
-            w2 = widget.width * s2 / s1,
-            bw2 = unscaledStandardBeatWidth * s2,
-            bw1 = unscaledStandardBeatWidth * s1;
-        // p2: the target offset
-        double p2;
-        if (autoScroll) {
-          p2 = p1 * s2 / s1;
-          double cb1 = currentBeat * bw1;
-          // if cb1 (the current beat) was on screen
-          if (cb1 + bw1 >= p1 && cb1 <= p1 + w1) {
-            // if cb1 was on the right/left third of the view,
-            // shift focus that way
-            if (cb1 >= p1 + w1 * 0.66667) {
-              p2 += (w2 - w1) / 2;
-            } else if (cb1 <= p1 + w1 * 0.33333) {
-              p2 -= (w2 - w1) / 2;
-            }
-          } else {
-            print('cb1 out of bounds');
-          }
-        } else {
-          p2 = p1 * s2 / s1;
-        }
-        p2 += (w2 - w1) / 2;
-        // print("For scale, jumping from $p1 to $p2");
-        timeScrollController.jumpTo(p2);
-        // scrollToFocusedBeat();
-      }
-    });
-    yScaleUpdateListener =
-        _scaleUpdateListener(widget.notifyYScaleUpdate, (update) {
-      widget.yScaleNotifier.value = update.newScale;
-    });
-    widget.notifyXScaleUpdate.addListener(xScaleUpdateListener);
-    widget.notifyYScaleUpdate.addListener(yScaleUpdateListener);
-
-    widget.scrollToPart.addListener(scrollToPart);
     WidgetsBinding.instance.addPostFrameCallback((_) {
       scrollToCurrentBeat();
     });
+    interactionStartFocal.addListener(_deriveStartSystemFromFocal);
   }
 
-  DateTime _lastScrollEventSeen = DateTime(0);
-  DateTime _lastScrollStopEventTime = DateTime(0);
-  double _lastTimeScrollValue = 0;
   VoidCallback xScaleUpdateListener, yScaleUpdateListener;
 
-  static const int _autoScrollDelayDuration = 2500;
-
-  _timeScrollListener() {
-    // _lastScrollEventSeen = DateTime.now();
-    // if ((_lastTimeScrollValue - timeScrollController.offset).abs() > 25) {
-    //   print(
-    //       "non-continuous scroll change: $_lastTimeScrollValue to ${timeScrollController.offset}");
-    //   // timeScrollController.jumpTo(_lastTimeScrollValue);
-    // }
-    // _lastTimeScrollValue = timeScrollController.offset;
-    // double maxScrollExtent = widget.focusedBeat.value != null
-    //     ? maxCanvasWidth
-    //     : max(10, overallCanvasWidth - widget.width + 150);
-    // if (timeScrollController.offset > maxScrollExtent) {
-    //   if (timeScrollController.offset > maxScrollExtent + 10) {
-    //     timeScrollController.animateTo(maxScrollExtent,
-    //         duration: animationDuration, curve: Curves.ease);
-    //   } else {
-    //     timeScrollController.jumpTo(maxScrollExtent);
-    //   }
-    // }
-    Future.delayed(Duration(milliseconds: _autoScrollDelayDuration + 50), () {
-      if (_autoScrollDelayDuration <
-              DateTime.now().millisecondsSinceEpoch -
-                  _lastScrollEventSeen.millisecondsSinceEpoch &&
-          _autoScrollDelayDuration <
-              DateTime.now().millisecondsSinceEpoch -
-                  _lastScrollStopEventTime.millisecondsSinceEpoch) {
-        print('scroll is stopped');
-        _lastScrollStopEventTime = DateTime.now();
-        _onScrollStopped();
-      }
-    });
-  }
-
-  _verticalScrollListener() {
-    widget.verticalScrollNotifier.value = verticalController.offset;
-    // double maxScrollExtent = widget.focusedBeat.value != null
-    //     ? maxCanvasHeight
-    //     : max(10, overallCanvasHeight - widget.height);
-    // if (verticalController.offset > maxScrollExtent) {
-    //   if (timeScrollController.offset > maxScrollExtent + 50) {
-    //     verticalController.animateTo(maxScrollExtent,
-    //         duration: animationDuration, curve: Curves.ease);
-    //   } else {
-    //     verticalController.jumpTo(maxScrollExtent);
-    //   }
-    // }
-  }
-
-  _onScrollStopped() {
-    if (autoScroll &&
-        !widget.isTwoFingerScaling &&
-        (widget.musicViewMode != MusicViewMode.score ||
-            !BeatScratchPlugin.playing)) {
-      _constrainToSectionBounds();
-    }
-  }
+  _transformationListener() {}
 
   @override
   void dispose() {
+    widget.targetScaleNotifier.removeListener(animateToTargetScaleAndPosition);
     animationController.dispose();
     colorblockOpacityNotifier.dispose();
     notationOpacityNotifier.dispose();
@@ -406,20 +374,62 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
     colorboardPart.dispose();
     focusedPart.dispose();
     sectionColor.dispose();
-    timeScrollController.removeListener(_timeScrollListener);
-    verticalController.removeListener(_verticalScrollListener);
+    interactionStartSystem.dispose();
+    interactionStartFocal
+      ..removeListener(_deriveStartSystemFromFocal)
+      ..dispose();
+    transformationController.removeListener(_transformationListener);
     widget.scrollToCurrentBeat.removeListener(scrollToCurrentBeat);
-    widget.scrollToPart.removeListener(scrollToPart);
-    widget.centerCurrentSection.removeListener(_constrainToSectionBounds);
-    widget.notifyXScaleUpdate.removeListener(xScaleUpdateListener);
-    widget.notifyYScaleUpdate.removeListener(_constrainToSectionBounds);
+    widget.centerCurrentSection.removeListener(constrainToSectionBounds);
     super.dispose();
   }
 
-  MusicViewMode _prevViewMode;
-  bool _hasBuilt = false;
-  DateTime _lastAutoScrollTime = DateTime(0);
-  double prevWidth;
+  ValueNotifier<Offset> interactionStartFocal = ValueNotifier(null);
+  ValueNotifier<int> interactionStartSystem = ValueNotifier(null);
+  _deriveStartSystemFromFocal() {
+    if (interactionStartFocal.value == null) {
+      interactionStartSystem.value = null;
+    } else {
+      interactionStartSystem.value =
+          max(0, (interactingFocal.dy / scaledSystemHeight).floor());
+    }
+  }
+
+  Offset get interactingFocal => interactionStartFocal.value;
+  int get interactingSystem =>
+      max(0, min(systemsToRender() - 1, interactionStartSystem.value));
+
+  adjustDxForScale(int systemNumber, double scaleChange, Matrix4 target,
+      {bool adjustingAfterChange = true}) {
+    final scaledWidth1 = adjustingAfterChange
+        ? widget.width / (scale / scaleChange)
+        : widget.width / (scale);
+    final scaledWidth2 = adjustingAfterChange
+        ? widget.width / (scale)
+        : widget.width / (scale * scaleChange);
+    final scaledAvailableWidth1 = scaledWidth1 - clefWidth;
+    final scaledAvailableWidth2 = scaledWidth2 - clefWidth;
+    double systemXOffset1 = systemNumber * scaledAvailableWidth1;
+    double systemXOffset2 = systemNumber * scaledAvailableWidth2;
+    double diff = systemXOffset2 - systemXOffset1;
+    if (transformedRect.left > -scaledAvailableWidth2) {
+      target.translate(diff, 0.0, 0.0);
+    } else {
+      interactionStartSystem.value -= 1;
+      target.translate(diff - scaledAvailableWidth2, systemHeight, 0.0);
+    }
+    // } else if (adjustingAfterChange) {
+    //   if (interactionStartSystem.value > 0) {
+    //     interactionStartSystem.value -= 1;
+    //     final dx = diff - scaledAvailableWidth2;
+    //     final dy = systemHeight;
+    //     // if (transformedRect.top > dy &&
+    //     //     transformedRect.right + dx < overallCanvasWidth) {
+    //     target.translate(dx, dy, 0);
+    //     // }
+    //   }
+    // }
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -431,11 +441,7 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
 
     double currentBeat = this.currentBeat;
     String sectionOrder = widget.score.sections.map((e) => e.id).join();
-    if (widget.isTwoFingerScaling) {
-      scrollToFocusedBeat(instant: true);
-    } else if (autoScroll) {
-      // if (DateTime.now().difference(_lastAutoScrollTime).inMilliseconds >
-      //     500) {
+    if (autoScroll) {
       if (_prevViewMode == MusicViewMode.score &&
           widget.musicViewMode != MusicViewMode.score &&
           _prevBeat > widget.currentSection.beatCount - 2) {
@@ -469,16 +475,13 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
               0 &&
           !isBeatOnScreen(currentBeat +
               widget.currentSection.meter.defaultBeatsPerMeasure)) {
-        scrollToBeat(
-          currentBeat,
-        );
+        scrollToCurrentBeat();
         _lastAutoScrollTime = DateTime.now();
       }
-      // }
     }
 
     if (_hasBuilt && widget.score != _prevScore) {
-      scrollToBeat(0, duration: Duration.zero);
+      scrollToBeat(0);
       _prevScore = widget.score;
     }
     prevWidth = widget.width;
@@ -488,105 +491,131 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
     _prevSectionId = widget.currentSection.id;
     _prevPartId = widget.focusedPart?.id;
     _hasBuilt = true;
-
-    return CustomScrollView(
-        controller: verticalController,
-        scrollDirection: Axis.vertical,
-        slivers: [
-          CustomSliverToBoxAdapter(
-              setVisibleRect: (rect) {
-                verticallyVisibleRect = rect;
-              },
-              child: AnimatedContainer(
-                  duration: animationDuration,
-                  height: overallCanvasHeight,
-                  child: CustomScrollView(
-                    controller: timeScrollController,
-                    scrollDirection: Axis.horizontal,
-                    slivers: [
-                      CustomSliverToBoxAdapter(
-                        setVisibleRect: (rect) {
-                          horizontallyVisibleRect = rect;
-                        },
-                        child: CustomPaint(
-//                    key: Key("$overallCanvasWidth-$overallCanvasHeight"),
-                            size: Size(overallCanvasWidth, overallCanvasHeight),
-                            painter: MusicSystemPainter(
-                                sectionScaleNotifier: sectionScaleNotifier,
-                                score: widget.score,
-                                section: widget.currentSection,
-                                musicViewMode: widget.musicViewMode,
-                                xScaleNotifier: widget.xScaleNotifier,
-                                yScaleNotifier: widget.yScaleNotifier,
-                                focusedMelodyId: widget.focusedMelody?.id,
-                                staves: stavesNotifier,
-                                partTopOffsets: partTopOffsets,
-                                staffOffsets: staffOffsets,
-                                colorGuideOpacityNotifier:
-                                    colorGuideOpacityNotifier,
-                                colorblockOpacityNotifier:
-                                    colorblockOpacityNotifier,
-                                notationOpacityNotifier:
-                                    notationOpacityNotifier,
-                                colorboardNotesNotifier:
-                                    widget.colorboardNotesNotifier,
-                                keyboardNotesNotifier:
-                                    widget.keyboardNotesNotifier,
-                                bluetoothControllerPressedNotes:
-                                    widget.bluetoothControllerPressedNotes,
-                                visibleRect: () => horizontallyVisibleRect,
-                                verticallyVisibleRect: () => Rect.fromLTRB(
-                                    horizontallyVisibleRect.left,
-                                    horizontallyVisibleRect.top +
-                                        verticalController.offset,
-                                    horizontallyVisibleRect.right,
-                                    horizontallyVisibleRect.top +
-                                        verticalController.offset +
-                                        widget.height),
-                                keyboardPart: keyboardPart,
-                                colorboardPart: colorboardPart,
-                                focusedPart: focusedPart,
-                                tappedPart: widget.tappedPart,
-                                sectionColor: sectionColor,
-                                isCurrentScore: widget.isCurrentScore,
-                                highlightedBeat: widget.highlightedBeat,
-                                focusedBeat: widget.focusedBeat,
-                                tappedBeat: widget.tappedBeat,
-                                firstBeatOfSection: firstBeatOfSection,
-                                renderPartNames: true,
-                                isPreview: false,
-                                systemsToRender: systemsToRender,
-                                otherListenables: [verticalController])),
-                      )
-                    ],
-                  )))
-        ]);
+    // print(
+    //     "InteractiveViewer overallCanvasHeight=$overallCanvasHeight, systemsToRender=$systemsToRender, systemHeight=$systemHeight");
+    return InteractiveViewer(
+      key: ValueKey("music-interactive-viewer"),
+      minScale: minScale,
+      maxScale: maxScale,
+      constrained: false,
+      transformationController: transformationController,
+      boundaryMargin: EdgeInsets.only(
+        left: overallCanvasWidth,
+        // left: widget.width / 2.0
+        top: overallCanvasHeight(),
+        // bottom: widget.width / minScale,
+        // right: 0
+      ),
+      // boundaryMargin: EdgeInsets.symmetric(
+      //     horizontal: widget.width / scale, vertical: widget.height / scale),
+      onInteractionStart: (ScaleStartDetails details) {
+        // If the user tries to cause a transformation while the reset animation is
+        // running, cancel the reset animation.
+        if (interactiveController.status == AnimationStatus.forward) {
+          _interactiveAnimationStop();
+        }
+        interactionStartFocal.value =
+            transformationController.toScene(details.focalPoint);
+      },
+      onInteractionEnd: (ScaleEndDetails details) {
+        interactionStartFocal.value = null;
+        animateToWithinBounds();
+      },
+      onInteractionUpdate: (ScaleUpdateDetails details) {
+        // return;
+        // If the user tries to cause a transformation while the reset animation is
+        // running, cancel the reset animation.
+        if (interactiveController.status == AnimationStatus.forward) {
+          _interactiveAnimationStop();
+        }
+        print(
+            "onInteractionUpdate: ${details.scale} ${scale} ${Size(overallCanvasWidth, overallCanvasHeight())}");
+        scaleUpdateNotifier.value = details;
+        widget.tappedBeat.value = null;
+        if (details.scale != 1) {
+          if ((details.scale > 1 && scale >= maxScale - 0.0001) ||
+              (details.scale < 1 && scale <= minScale + 0.0001)) {
+            return;
+          }
+          _animateToTargetedScale = false;
+          widget.targetScaleNotifier.value = scale;
+          _animateToTargetedScale = true;
+          adjustDxForScale(
+              interactingSystem, details.scale, transformationController.value);
+        } else {
+          final scaledWidth = widget.width / (scale);
+          final scaledAvailableWidth = scaledWidth - clefWidth;
+          if (transformedRect.top < -systemHeight) {
+            transformationController.value
+                .translate(scaledAvailableWidth, -systemHeight, 0.0);
+          } else if (transformedRect.left < -scaledAvailableWidth ||
+              transformedRect.top > 2 * systemHeight) {
+            transformationController.value
+                .translate(-scaledAvailableWidth, systemHeight, 0.0);
+          }
+        }
+        // print("matrix=${transformationController.value}");
+        // print("transformedRect=$transformedRect");
+        // print("dims=$overallCanvasWidth x $overallCanvasHeight");
+      },
+      child: CustomPaint(
+          //                    key: Key("$overallCanvasWidth-$overallCanvasHeight"),
+          size: Size(overallCanvasWidth, overallCanvasHeight()),
+          painter: MusicSystemPainter(
+              sectionScaleNotifier: sectionScaleNotifier,
+              score: widget.score,
+              section: widget.currentSection,
+              musicViewMode: widget.musicViewMode,
+              transformationController: transformationController,
+              focusedMelodyId: widget.focusedMelody?.id,
+              staves: stavesNotifier,
+              partTopOffsets: partTopOffsets,
+              staffOffsets: staffOffsets,
+              colorGuideOpacityNotifier: colorGuideOpacityNotifier,
+              colorblockOpacityNotifier: colorblockOpacityNotifier,
+              notationOpacityNotifier: notationOpacityNotifier,
+              colorboardNotesNotifier: widget.colorboardNotesNotifier,
+              keyboardNotesNotifier: widget.keyboardNotesNotifier,
+              bluetoothControllerPressedNotes:
+                  widget.bluetoothControllerPressedNotes,
+              visibleRect: () => transformedRect,
+              verticallyVisibleRect: () => transformedRect,
+              keyboardPart: keyboardPart,
+              colorboardPart: colorboardPart,
+              focusedPart: focusedPart,
+              tappedPart: widget.tappedPart,
+              sectionColor: sectionColor,
+              isCurrentScore: widget.isCurrentScore,
+              highlightedBeat: widget.highlightedBeat,
+              focusedBeat: widget.focusedBeat,
+              tappedBeat: widget.tappedBeat,
+              firstBeatOfSection: firstBeatOfSection,
+              renderPartNames: true,
+              isPreview: false,
+              systemsToRender: systemsToRender(),
+              otherListenables: [])),
+    );
   }
 
-  scrollToFocusedBeat({
-    bool instant = false,
-  }) {
-    if (instant) {
-      scrollToBeat(widget.focusedBeat.value - marginBeatsForBeat / 2,
-          duration: Duration(milliseconds: 0), curve: Curves.ease);
-    } else {
-      scrollToBeat(widget.focusedBeat.value - marginBeatsForBeat / 2,
-          duration: animationDuration, curve: Curves.linear);
-    }
-  }
+  Rect get transformedRect => MatrixUtils.inverseTransformRect(
+      transformationController.value,
+      Rect.fromLTRB(0, 0, widget.width, widget.height));
 
   // double get secondSystemOffset =>
-  //     widget.width - MusicSystemPainter.calculateClefWidth(xScale);
+  //     widget.width - clefWidth;
   // bool showOnSecondSystem(double animationPos) =>
   //     systemsToRender > 1 && animationPos > secondSystemOffset;
 
-  double _animationPos(double currentBeat) {
+  double _animationPos(double currentBeat, {double customScale = null}) {
     // print(
     //     "_animationPos: $currentBeat $targetBeatWidth $overallCanvasWidth ${horizontallyVisibleRect.width}!");
 
     double animationPos = _singleSystemAnimationPos(currentBeat);
-    animationPos -= currentBeatTargetSystemXOffset;
-    return max(0, animationPos);
+    animationPos -= currentBeatTargetSystemXOffset(customScale: customScale);
+    if (currentBeat == 0.0) {
+      return max(0.0, animationPos);
+    }
+    return animationPos;
   }
 
   double _singleSystemAnimationPos(double currentBeat) {
@@ -594,133 +623,138 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
     //     "_singleSystemAnimationPos: $currentBeat $targetBeatWidth $overallCanvasWidth ${horizontallyVisibleRect.width}!");
 
     final beatWidth = targetBeatWidth;
-    if (autoZoomAlign) {
+    if (autoZoomAlign && false) {
       currentBeat = currentBeat.floorToDouble();
     }
     double animationPos = (currentBeat) * beatWidth;
-    animationPos = min(
-        animationPos,
-        overallCanvasWidth -
-            horizontallyVisibleRect.width +
-            0.62 * targetBeatWidth);
-    animationPos = max(0, animationPos);
+    animationPos = min(animationPos, overallCanvasWidth - visibleWidth);
+    animationPos = animationPos;
     return animationPos;
   }
 
   bool isBeatOnScreen(double beat) {
-    double animationPos = _animationPos(currentBeat);
-    double currentPos = timeScrollController.position.pixels;
-    return animationPos >= currentPos &&
-        animationPos < currentPos + visibleRect.width - targetClefWidth;
+    return true;
+    // double animationPos = _animationPos(currentBeat);
+    // double currentPos = timeScrollController.position.pixels;
+    // return animationPos >= currentPos &&
+    //     animationPos < currentPos + visibleRect.width - targetClefWidth;
   }
 
-  void scrollToBeat(double currentBeat,
-      {Duration duration = animationDuration, Curve curve = Curves.linear}) {
-    // _lastBeatScrolledTo = currentBeat;
-    double animationPos = _animationPos(currentBeat);
-    // print(
-    //     "scrollToBeat $currentBeat : $animationPos; s/t: ${widget.xScale}/$targetXScale");
-    // final pixels = timeScrollController.position.pixels;
-    // final offset = timeScrollController.offset;
-    if (_hasBuilt &&
-        animationPos.notRoughlyEquals(timeScrollController.offset)) {
-      try {
-        animate() {
-          if (duration.inMilliseconds > 0) {
-            timeScrollController.animateTo(animationPos,
-                duration: duration, curve: curve);
-          } else {
-            timeScrollController.jumpTo(animationPos);
-          }
-        }
-
-        animate();
-      } catch (e) {}
-    }
-  }
-
-  void scrollToPart() {
-    // systemsToRender - 1,
-    //           ((systemsToRender - 1) *
-    //                   ((currentBeat - 2) /
-    //                       (beatsOnScreenPerSystem * systemsToRender
-    print(
-        "scrollToPart: target system: $currentBeatTargetSystemIndex; currentBeat=$currentBeat, beatsOnScreenPerSystem=$beatsOnScreenPerSystem, calculatedSystemThingy=$calculatedSystemThingy, currentBeatTargetSystemIndex=$currentBeatTargetSystemIndex,_systemHeightForScrolling=$_systemHeightForScrolling, _extraHeightForScrolling=$_extraHeightForScrolling");
-
-    // if (systemsToRender == 1) {
-    //   if (autoSort) {
-    //     verticalController.animateTo(0,
-    //         duration: animationDuration, curve: Curves.ease);
-    //   } else if (verticalController.offset > maxSystemVerticalPosition) {
-    //     scrollToBottomMostPart();
-    //   }
-    // } else {
-    verticalController.animateTo(0 + currentBeatTargetSystemYOffset,
-        duration: animationDuration, curve: Curves.ease);
-    // }
-  }
-
-  // void scrollToBottomMostPart({double positionOffset = 0}) {
-  //   verticalController.animateTo(maxSystemVerticalPosition + positionOffset,
-  //       duration: animationDuration, curve: Curves.ease);
-  // }
-
   bool get sectionCanBeCentered =>
-      sectionWidth + targetClefWidth <= widget.width;
+      sectionWidth + targetClefWidth <= transformedRect.width;
   int get staffCount => stavesNotifier.value.length;
-  double get maxSystemVerticalPosition => max(
-      0,
-      (staffCount) * MusicSystemPainter.staffHeight * yScale -
-          widget.height +
-          100);
-  void scrollToCurrentBeat() {
+
+  void scrollToCurrentBeat({double customScale = null}) {
+    print("scrollToCurrentBeat, sectionCanBeCentered=$sectionCanBeCentered");
     if (sectionCanBeCentered) {
-      _constrainToSectionBounds();
+      constrainToSectionBounds(customScale: customScale);
     } else {
-      scrollToBeat(autoScroll
-          ? min(currentBeat, rightMostBeatConstrainedToSection)
-          : currentBeat);
+      scrollToBeat(currentBeat, customScale: customScale);
     }
-    scrollToPart();
-
-    // if (widget.autoFocus) {
-    //   scrollToPart();
-    // } else if (verticalController.offset > maxSystemVerticalPosition) {
-    //   scrollToBottomMostPart();
-    // }
   }
 
-  double get rightMostBeatConstrainedToSection =>
-      firstBeatOfSection +
-      2.62 +
-      (sectionWidth / targetBeatWidth) -
-      (horizontallyVisibleRect.width / targetBeatWidth);
-  _constrainToSectionBounds() {
-    if (widget.isTwoFingerScaling) return;
-    // print("_constrainToSectionBounds");
+  double get marginBeatsForBeat =>
+      max(0, visibleWidth - 2 * targetClefWidth - targetBeatWidth) /
+      targetBeatWidth;
+
+  constrainToSectionBounds({double customScale = null}) {
+    double ratioScale = (customScale ?? scale) / scale;
+    double marginBeatsForSection =
+        max(0.0, visibleWidth / ratioScale - targetClefWidth - sectionWidth) /
+            targetBeatWidth;
+    double targetBeat =
+        max(0.0, firstBeatOfSection - (marginBeatsForSection / 2.0));
+    print(
+        "constrainToSectionBounds customScale=$customScale, scale=$scale ratioScale=$ratioScale firstBeatOfSection=$firstBeatOfSection marginBeatsForSection=$marginBeatsForSection targetBeat=$targetBeat");
     try {
-      double position = timeScrollController.position.pixels;
-      double sectionWidth = widget.currentSection.beatCount * targetBeatWidth;
-      double visibleWidth = horizontallyVisibleRect.width;
-      if (sectionCanBeCentered) {
-        scrollToBeat(firstBeatOfSection - (marginBeatsForSection / 2));
+      scrollToBeat(targetBeat, customScale: customScale, includeMarginX: false);
+    } catch (e) {
+      print(e);
+    }
+  }
+
+  void scrollToBeat(double targetBeat,
+      {double customScale = null,
+      bool includeMarginX = true,
+      bool scrollHorizontally = true}) {
+    final scale = this.scale;
+    double ratioScale = (customScale ?? scale) / scale;
+    double scoreWidth = widget.score.beatCount * beatWidth + clefWidth;
+    bool entireScoreFitsHorizontally = visibleWidth / ratioScale >= scoreWidth;
+    if (entireScoreFitsHorizontally) {
+      final marginWidth = max(0.0, visibleWidth / ratioScale - scoreWidth);
+      final topMarginHeight =
+          max(0.0, visibleHeight / ratioScale - systemHeight);
+      final targetedMatrix = Matrix4.identity().clone()
+        ..scale(customScale ?? scale)
+        ..translate(marginWidth / 2.0, topMarginHeight / 2.0, 0.0);
+      _animateTo(targetedMatrix);
+    } else {
+      // _lastBeatScrolledTo = currentBeat;
+      double targetedDx = _animationPos(targetBeat, customScale: customScale);
+      if (includeMarginX) {
+        final marginWidth = max(
+            0.0,
+            min(targetBeat * beatWidth,
+                visibleWidth / ratioScale - beatWidth - clefWidth));
+        print(
+            "includeMarginX: marginWidth=$marginWidth, targetBeat=$targetBeat");
+        targetedDx -= scrollLeftMarginPercent * marginWidth;
       } else {
-        double sectionStart =
-            (firstBeatOfSection + MusicSystemPainter.extraBeatsSpaceForClefs) *
-                targetBeatWidth;
-        final allowedMargin = visibleWidth * 0.2;
-        if (position < sectionStart - allowedMargin) {
-          scrollToBeat(firstBeatOfSection);
-        } else if (position + visibleWidth >
-            sectionStart + sectionWidth + allowedMargin) {
-          scrollToBeat(rightMostBeatConstrainedToSection);
+        print("includeMarginX FALSE, targetBeat=$targetBeat");
+      }
+      final topMarginHeight =
+          max(0.0, visibleHeight / ratioScale - systemHeight);
+      double systemCount = systemsToRender(customScale: customScale).toDouble();
+      double maxDy =
+          max(0.0, (systemCount) * systemHeight - visibleHeight / ratioScale);
+      double topMargin = scrollTopMarginPercent * topMarginHeight;
+      double scoreHeight = systemHeight * systemCount;
+      bool entireScoreFitsVertically = scoreHeight < transformedRect.height;
+      double targetedDy = entireScoreFitsVertically
+          ? -0.5 * (visibleHeight / ratioScale - scoreHeight)
+          : min(
+              maxDy,
+              max(
+                  targetedDx == 0.0 ? 0.0 : -topMargin,
+                  systemHeight *
+                      currentBeatTargetSystemIndex(customScale: customScale)));
+      print(
+          "scrollToBeat, targetedDx=$targetedDx entireScoreFitsVertically=$entireScoreFitsVertically customScale=$customScale, scale=$scale ratioScale=$ratioScale systemsToRender=$systemsToRender currentBeatTargetSystemIndex=$currentBeatTargetSystemIndex, systemHeight=$systemHeight visibleHeight=$visibleHeight topMarginHeight=$topMarginHeight maxDy=$maxDy targetedDy=$targetedDy");
+      // "Scrolling ideally" means horizontally when going forward/down
+      bool goDownLeft =
+          (targetedDy > transformedRect.top + 0.5 * transformedRect.height);
+      print(
+          "stb: goDownLeft=$goDownLeft, targetedDy=$targetedDy, transformedRect.top=${transformedRect.top}, transformedRect.bottom=${transformedRect.bottom}, transformedRect.height=${transformedRect.height} ");
+      if (scrollHorizontally && goDownLeft) {
+        translateDownLeft();
+      }
+      // Compensate for scale chanegs
+      if (customScale != scale) {
+        int currentSystem = currentBeatTargetSystemIndex(customScale: scale);
+        int newSystem = currentBeatTargetSystemIndex(customScale: customScale);
+        while (currentSystem < newSystem) {
+          translateDownLeft();
+          currentSystem++;
+        }
+        while (currentSystem > newSystem) {
+          translateUpRight();
+          currentSystem--;
         }
       }
-    } catch (e) {
-      print(e);
+      final targetedMatrix = Matrix4.identity().clone()
+        ..scale(customScale ?? scale)
+        ..translate(-targetedDx, -targetedDy, 0.0);
+      _animateTo(targetedMatrix);
     }
   }
 
+  translateDownLeft() => transformationController.value
+      .translate((visibleWidth - clefWidth), -systemHeight, 0);
+
+  translateUpRight() => transformationController.value
+      .translate(-(visibleWidth - clefWidth), systemHeight, 0);
+
   double get firstBeatOfSection =>
       widget.score.firstBeatOfSection(widget.currentSection).toDouble();
 
@@ -744,10 +778,9 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
         });
     });
     widget.staves.asMap().forEach((staffIndex, staff) {
-      double staffPosition =
-          staffIndex * MusicSystemPainter.staffHeight * yScale;
+      double staffPosition = staffIndex * staffHeight;
       double initialStaffPosition =
-          staffOffsets.value.putIfAbsent(staff.id, () => overallCanvasHeight);
+          staffOffsets.value.putIfAbsent(staff.id, () => overallCanvasHeight());
       Animation staffAnimation;
       staffAnimation = Tween<double>(
               begin: initialStaffPosition, end: staffPosition)
@@ -761,7 +794,7 @@ class _MusicScrollContainerState extends State<MusicScrollContainer>
       staff.getParts(widget.score, widget.staves).forEach((part) {
         double partPosition = staffPosition;
         double initialPartPosition = partTopOffsets.value
-            .putIfAbsent(part.id, () => overallCanvasHeight);
+            .putIfAbsent(part.id, () => overallCanvasHeight());
         Animation partAnimation;
         partAnimation =
             Tween<double>(begin: initialPartPosition, end: partPosition)
diff --git a/lib/music_view/music_system_painter.dart b/lib/music_view/music_system_painter.dart
index 0edba6d3..e620cf25 100644
--- a/lib/music_view/music_system_painter.dart
+++ b/lib/music_view/music_system_painter.dart
@@ -23,15 +23,13 @@ import '../util/music_theory.dart';
 
 // Top level for rendering of music to a Canvas.
 class MusicSystemPainter extends CustomPainter {
-  static const double extraBeatsSpaceForClefs = 2;
-  static const double staffHeight = 500;
-
   Paint _tickPaint = Paint()..style = PaintingStyle.fill;
 
   final String focusedMelodyId;
   final Score score;
   final Section section;
-  final ValueNotifier<double> xScaleNotifier, yScaleNotifier;
+  final TransformationController transformationController;
+  final bool rescale;
   final Rect Function() visibleRect;
   final Rect Function() verticallyVisibleRect;
   final MusicViewMode musicViewMode;
@@ -54,9 +52,9 @@ class MusicSystemPainter extends CustomPainter {
   final double firstBeatOfSection;
   final int systemsToRender;
 
-  double get xScale => xScaleNotifier.value;
-
-  double get yScale => yScaleNotifier.value;
+  double get xScale => 1;
+  double get yScale => 1;
+  double get scale => transformationController.value.getMaxScaleOnAxis();
 
   Melody get focusedMelody => score.parts
       .expand((p) => p.melodies)
@@ -65,10 +63,7 @@ class MusicSystemPainter extends CustomPainter {
   int get numberOfBeats => /*isViewingSection ? section.harmony.beatCount :*/ score
       .beatCount;
 
-  double get standardBeatWidth => calculateStandardBeatWidth(xScale);
-  double get standardClefWidth => calculateClefWidth(xScale);
-
-  double get width => standardBeatWidth * numberOfBeats;
+  double get standardClefWidth => clefWidth;
 
   int get colorGuideAlpha => (255 * colorGuideOpacityNotifier.value).toInt();
 
@@ -94,8 +89,8 @@ class MusicSystemPainter extends CustomPainter {
       this.bluetoothControllerPressedNotes,
       this.score,
       this.section,
-      this.xScaleNotifier,
-      this.yScaleNotifier,
+      this.transformationController,
+      this.rescale = false,
       this.visibleRect,
       this.verticallyVisibleRect,
       this.focusedMelodyId,
@@ -121,31 +116,24 @@ class MusicSystemPainter extends CustomPainter {
           tappedBeat,
           BeatScratchPlugin.pressedMidiControllerNotes,
           BeatScratchPlugin.currentBeat,
-          xScaleNotifier,
-          yScaleNotifier,
+          transformationController,
           if (otherListenables != null) ...otherListenables
         ])) {
     _tickPaint.color = musicForegroundColor;
     _tickPaint.strokeWidth = 2.0;
   }
 
-  static double calculateHarmonyHeight(double yScale) => min(100, 30 * yScale);
-  static double calculateSectionHeight(double yScale) =>
-      max(22, calculateHarmonyHeight(yScale));
-  static double calculateMelodyHeight(double yScale) => staffHeight * yScale;
-  static double calculateSystemHeight(double yScale, int partCount) =>
-      calculateSectionHeight(yScale) +
-      calculateHarmonyHeight(yScale) +
-      (calculateMelodyHeight(yScale) * partCount);
-  static double calculateSystemPadding(double yScale) =>
-      calculateMelodyHeight(yScale) * 0.5;
-  static double calculateStandardBeatWidth(double xScale) =>
-      unscaledStandardBeatWidth * xScale;
-  static double calculateClefWidth(double xScale) =>
-      calculateStandardBeatWidth(xScale) * 2;
-
-  double get harmonyHeight => calculateHarmonyHeight(yScale);
-  double get idealSectionHeight => max(22, harmonyHeight);
+  static double calculateHarmonyHeight(double scale) => 10 / scale;
+  static double calculateSectionHeight(double scale) =>
+      calculateHarmonyHeight(scale);
+  static double calculateSystemHeight(double scale, int partCount) =>
+      calculateSectionHeight(scale) +
+      calculateHarmonyHeight(scale) +
+      (staffHeight * partCount) +
+      systemPadding;
+
+  double get harmonyHeight => calculateHarmonyHeight(scale);
+  double get idealSectionHeight => 2 * harmonyHeight; //max(22, harmonyHeight);
   double get sectionHeight => idealSectionHeight * sectionScaleNotifier.value;
 
   double get melodyHeight => staffHeight * yScale;
@@ -154,21 +142,29 @@ class MusicSystemPainter extends CustomPainter {
   @override
   void paint(Canvas canvas, Size size) {
     canvas.save();
-    translationTotal = 0;
+    final scale = this.scale;
+    if (rescale) {
+      canvas.scale(scale);
+    }
+    translationTotal = -verticallyVisibleRect().top;
+    canvas.translate(0, translationTotal);
     double translationIncrement =
-        calculateSystemHeight(yScale, score.parts.length) +
-            calculateSystemPadding(yScale);
-    // print("verticallyVisibleRect=${verticallyVisibleRect()}");
-    for (int i = 0; i < systemsToRender; i++) {
-      if (translationTotal <
-              verticallyVisibleRect().bottom + translationIncrement &&
-          translationTotal + translationIncrement >
-              verticallyVisibleRect().top - translationIncrement) {
-        paintSystem(canvas, size,
-            offsetStart:
-                (visibleRect().width - calculateClefWidth(xScale)) * (i));
-      }
+        calculateSystemHeight(scale, score.parts.length);
+    // print(
+    //     "verticallyVisibleRect=${verticallyVisibleRect()}, translationIncrement=$translationIncrement");
+    final int firstSystem =
+        (verticallyVisibleRect().top / translationIncrement).floor();
+    translationTotal += firstSystem * translationIncrement;
+    canvas.translate(0, firstSystem * translationIncrement);
+    for (int i = firstSystem; i < systemsToRender + 20; i++) {
+      // print("Drawing system $i at $translationTotal");
+      paintSystem(canvas, size,
+          offsetStart: (visibleRect().width - clefWidth) * (i));
       translationTotal += translationIncrement;
+      if (translationTotal * scale - translationIncrement >
+          visibleRect().bottom) {
+        break;
+      }
       canvas.translate(0, translationIncrement);
     }
     canvas.restore();
@@ -195,13 +191,11 @@ class MusicSystemPainter extends CustomPainter {
 //    canvas.clipRect(Offset.zero & size);
 
     // Calculate from which beat we should start drawing
-    int startBeat = ((visibleRect().left + offsetStart - standardBeatWidth) /
-            standardBeatWidth)
-        .floor();
+    int startBeat =
+        ((visibleRect().left + offsetStart - beatWidth) / beatWidth).floor();
 
-    // ignore: unused_local_variable
     double top, left, right, bottom;
-    left = startBeat * standardBeatWidth - offsetStart;
+    left = startBeat * beatWidth - offsetStart;
 //    canvas.drawRect(visibleRect(), Paint()..style=PaintingStyle.stroke..strokeWidth=10);
 
     staves.value.forEach((staff) {
@@ -209,12 +203,18 @@ class MusicSystemPainter extends CustomPainter {
       double top =
           visibleRect().top + harmonyHeight + sectionHeight + staffOffset;
       Rect staffLineBounds = Rect.fromLTRB(
-          visibleRect().left, top, visibleRect().right, top + melodyHeight);
+          max(-offsetStart, visibleRect().left),
+          top,
+          max(-offsetStart, visibleRect().right),
+          top + melodyHeight);
 //      canvas.drawRect(staffLineBounds, Paint()..style=PaintingStyle.stroke..strokeWidth=10);
       _renderStaffLines(canvas,
           !(staff is DrumStaff) && drawContinuousColorGuide, staffLineBounds);
-      Rect clefBounds = Rect.fromLTRB(visibleRect().left, top,
-          visibleRect().left + standardClefWidth, top + melodyHeight);
+      Rect clefBounds = Rect.fromLTRB(
+          max(-offsetStart, visibleRect().left),
+          top,
+          max(-offsetStart, visibleRect().left) + standardClefWidth,
+          top + melodyHeight);
 //      canvas.drawRect(clefBounds, Paint()..style=PaintingStyle.stroke..strokeWidth=10);
 
       _renderClefs(canvas, clefBounds, staff);
@@ -223,7 +223,7 @@ class MusicSystemPainter extends CustomPainter {
     int renderingBeat =
         startBeat - extraBeatsSpaceForClefs.toInt(); // To make room for clefs
 //    print("Drawing frame from beat=$renderingBeat. Colorblock alpha is ${colorblockOpacityNotifier.value}. Notation alpha is ${notationOpacityNotifier.value}");
-    while (left < visibleRect().right + standardBeatWidth) {
+    while (left < visibleRect().right + beatWidth) {
       if (renderingBeat >= 0) {
         // Figure out what beat of what section we're drawing
         int renderingSectionBeat = renderingBeat;
@@ -280,19 +280,19 @@ class MusicSystemPainter extends CustomPainter {
             textDirection: TextDirection.ltr,
           );
           tp.layout();
-          tp.paint(canvas,
-              new Offset(left + standardBeatWidth * 0.08, top + topOffset));
+          tp.paint(
+              canvas, new Offset(left + beatWidth * 0.08, top + topOffset));
         }
         top += sectionHeight;
 
-        right = left + standardBeatWidth;
+        right = left + beatWidth;
         String sectionName = renderingSection.name;
         if (sectionName == null || sectionName.isEmpty) {
           sectionName = renderingSection.id;
         }
 
-        Rect harmonyBounds = Rect.fromLTRB(
-            left, top, left + standardBeatWidth, top + harmonyHeight);
+        Rect harmonyBounds =
+            Rect.fromLTRB(left, top, left + beatWidth, top + harmonyHeight);
         if (isInBounds(harmonyBounds)) {
           _renderHarmonyBeat(
               harmonyBounds, renderingSection, renderingSectionBeat, canvas);
@@ -309,22 +309,27 @@ class MusicSystemPainter extends CustomPainter {
             renderingSectionBeat,
             renderingBeat));
       }
-      left += standardBeatWidth;
+      left += beatWidth;
       renderingBeat += 1;
     }
 
     if (visibleRect().right > left) {
       double extraWidth = 0;
-      double diff = left - visibleRect().left - standardBeatWidth;
-      if (offsetStart > 0 && diff < standardClefWidth + standardBeatWidth) {
-        extraWidth = standardClefWidth *
-            max(0, (standardClefWidth - diff)) /
-            standardBeatWidth;
+      double diff = left - visibleRect().left - beatWidth;
+      if (offsetStart > 0 && diff < standardClefWidth + beatWidth) {
+        extraWidth =
+            standardClefWidth * max(0, (standardClefWidth - diff)) / beatWidth;
       }
 
       canvas.drawRect(
-          Rect.fromLTRB(left - extraWidth, visibleRect().top + sectionHeight,
-              visibleRect().right, visibleRect().bottom),
+          Rect.fromLTRB(
+              left - extraWidth,
+              translationTotal +
+                  visibleRect().top -
+                  translationTotal +
+                  sectionHeight,
+              visibleRect().right,
+              visibleRect().bottom - translationTotal),
           Paint()..color = musicBackgroundColor);
     }
   }
@@ -500,11 +505,14 @@ class MusicSystemPainter extends CustomPainter {
 
   void _renderStaffLines(
       Canvas canvas, bool drawContinuousColorGuide, Rect bounds) {
+    double alphaModifier = max(0.0,
+        min(1.0, (visibleRect().right - bounds.left - clefWidth) / beatWidth));
     if (notationOpacityNotifier.value > 0) {
       MelodyStaffLinesRenderer()
         ..alphaDrawerPaint = (Paint()
-          ..color = musicForegroundColor
-              .withAlpha((255 * notationOpacityNotifier.value).toInt()))
+          ..strokeWidth = 1 / sqrt(scale)
+          ..color = musicForegroundColor.withAlpha(
+              (255 * alphaModifier * notationOpacityNotifier.value).toInt()))
         ..bounds = bounds
         ..draw(canvas);
     }
@@ -515,6 +523,8 @@ class MusicSystemPainter extends CustomPainter {
   }
 
   void _renderClefs(Canvas canvas, Rect bounds, MusicStaff staff) {
+    double alphaModifier = max(0.0,
+        min(1.0, (visibleRect().right - bounds.left - clefWidth) / beatWidth));
     if (notationOpacityNotifier.value > 0) {
       var clefs =
           (staff is DrumStaff || (staff is PartStaff && staff.part.isDrum))
@@ -524,8 +534,8 @@ class MusicSystemPainter extends CustomPainter {
         ..xScale = xScale
         ..yScale = yScale
         ..alphaDrawerPaint = (Paint()
-          ..color = musicForegroundColor
-              .withAlpha((255 * notationOpacityNotifier.value).toInt()))
+          ..color = musicForegroundColor.withAlpha(
+              (255 * notationOpacityNotifier.value * alphaModifier).toInt()))
         ..bounds = bounds
         ..clefs = clefs
         ..draw(canvas);
@@ -535,8 +545,8 @@ class MusicSystemPainter extends CustomPainter {
         ..xScale = xScale
         ..yScale = yScale
         ..alphaDrawerPaint = (Paint()
-          ..color = musicForegroundColor
-              .withAlpha(255 * colorblockOpacityNotifier.value ~/ 3))
+          ..color = musicForegroundColor.withAlpha(
+              255 * alphaModifier * colorblockOpacityNotifier.value ~/ 3))
         ..bounds = bounds
         ..draw(canvas);
     }
@@ -550,7 +560,10 @@ class MusicSystemPainter extends CustomPainter {
           bounds.bottomRight.translate(
               0, notationOpacityNotifier.value * -bounds.height / 10));
       canvas.drawRect(
-          highlight, Paint()..color = sectionColor.value.withAlpha(127));
+          highlight,
+          Paint()
+            ..color =
+                sectionColor.value.withAlpha((127 * alphaModifier).toInt()));
     }
 
     if (renderPartNames) {
@@ -563,14 +576,15 @@ class MusicSystemPainter extends CustomPainter {
         text = "Drums";
       }
 
+      double textOpacity = colorblockOpacityNotifier.value > 0.5 ? 0.8 : 1;
       TextSpan span = new TextSpan(
           text: text,
           style: TextStyle(
               fontFamily: "VulfSans",
-              fontSize: max(11, 20 * yScale),
+              fontSize: max(11, 10 / scale),
               fontWeight: FontWeight.w800,
-              color: musicForegroundColor.withOpacity(
-                  colorblockOpacityNotifier.value > 0.5 ? 0.8 : 1)));
+              color: musicForegroundColor
+                  .withOpacity(alphaModifier * textOpacity)));
       TextPainter tp = new TextPainter(
         text: span,
         textAlign: TextAlign.left,
@@ -656,9 +670,9 @@ class MusicSystemPainter extends CustomPainter {
 
   double magicOpacityFactor(Rect melodyBounds) {
     double opacityFactor = 1;
-    if (melodyBounds.left < visibleRect().left + (2 * standardBeatWidth)) {
+    if (melodyBounds.left < visibleRect().left + (2 * beatWidth)) {
       double left = melodyBounds.left - visibleRect().left;
-      opacityFactor = max(0, min(1, (left) / (2 * standardBeatWidth)));
+      opacityFactor = max(0, min(1, (left) / (2 * beatWidth)));
     }
     return opacityFactor * opacityFactor;
   }
@@ -755,7 +769,7 @@ class MusicSystemPainter extends CustomPainter {
       try {
         if (colorblockOpacityNotifier.value > 0) {
           ColorblockMusicRenderer()
-            ..uiScale = xScale
+            ..uiScale = scale
             ..overallBounds = melodyBounds
             ..section = renderingSection
             ..beatPosition = renderingSectionBeat
@@ -799,17 +813,16 @@ class MusicSystemPainter extends CustomPainter {
   drawContinuousColorGuide(Canvas canvas, double top, double bottom) {
     // Calculate from which beat we should start drawing
     int renderingBeat =
-        ((visibleRect().left - standardBeatWidth) / standardBeatWidth).floor() -
-            2;
+        ((visibleRect().left - beatWidth) / beatWidth).floor() - 2;
 
-    final double startOffset = renderingBeat * standardBeatWidth;
+    final double startOffset = renderingBeat * beatWidth;
     double left = startOffset;
     double chordLeft = left;
     Chord renderingChord;
 
-    while (left < visibleRect().right + standardBeatWidth) {
+    while (left < visibleRect().right + beatWidth) {
       if (renderingBeat < 0) {
-        left += standardBeatWidth;
+        left += beatWidth;
         renderingBeat += 1;
         continue;
       }
@@ -856,9 +869,9 @@ class MusicSystemPainter extends CustomPainter {
           chordLeft = left;
         }
         renderingChord = chordAtSubdivision;
-        left += standardBeatWidth / renderingHarmony.subdivisionsPerBeat;
+        left += beatWidth / renderingHarmony.subdivisionsPerBeat;
       }
-      left = beatLeft + standardBeatWidth;
+      left = beatLeft + beatWidth;
       renderingBeat += 1;
     }
     Rect renderingRect =
@@ -885,3 +898,9 @@ class MusicSystemPainter extends CustomPainter {
     return false;
   }
 }
+
+Matrix4 inverse(Matrix4 transform) => Matrix4.copy(transform)..invert();
+Offset inverseTransformPoint(Matrix4 transform, Offset point) {
+  if (MatrixUtils.isIdentity(transform)) return point;
+  return MatrixUtils.transformPoint(inverse(transform), point);
+}
diff --git a/lib/music_view/music_toolbars.dart b/lib/music_view/music_toolbars.dart
index b94c015b..3f133e75 100644
--- a/lib/music_view/music_toolbars.dart
+++ b/lib/music_view/music_toolbars.dart
@@ -112,41 +112,41 @@ class MelodyToolbarState extends State<MelodyToolbar> {
                         hintText: (melodySelected) ? widget.melody.idName : "",
                       ))
                   : Text(""))),
-      AnimatedContainer(
-          duration: animationDuration,
-          width: (melodyEnabled && !isConfirmingDelete) ? 40 : 0,
-          height: 36,
-          padding: EdgeInsets.only(right: showVolume ? 0 : 5),
-          child: MyRaisedButton(
-            color: (widget.editingMelody)
-                ? widget.sectionColor == chromaticSteps[7]
-                    ? Colors.white
-                    : widget.sectionColor
-                : null,
-            onPressed: (melodyEnabled)
-                ? () {
-                    widget.toggleRecording();
-                  }
-                : null,
-            padding: EdgeInsets.all(0),
-            child: AnimatedOpacity(
-                duration: animationDuration,
-                opacity: (melodyEnabled && !isConfirmingDelete) ? 1 : 0,
-                child:
-                    /*Stack(children: [
-                  Align(
-                      alignment: Alignment.bottomRight,
-                      child: */
-                    Icon(Icons.fiber_manual_record,
-                        color: chromaticSteps[
-                            7])), /*,
-                  Align(
-                      alignment: Alignment.topLeft,
-                      child: Icon(
-                        Icons.edit,
-                      ))
-                ])),*/
-          )),
+      // AnimatedContainer(
+      //     duration: animationDuration,
+      //     width: (melodyEnabled && !isConfirmingDelete) ? 40 : 0,
+      //     height: 36,
+      //     padding: EdgeInsets.only(right: showVolume ? 0 : 5),
+      //     child: MyRaisedButton(
+      //       color: (widget.editingMelody)
+      //           ? widget.sectionColor == chromaticSteps[7]
+      //               ? Colors.white
+      //               : widget.sectionColor
+      //           : null,
+      //       onPressed: (melodyEnabled)
+      //           ? () {
+      //               widget.toggleRecording();
+      //             }
+      //           : null,
+      //       padding: EdgeInsets.all(0),
+      //       child: AnimatedOpacity(
+      //           duration: animationDuration,
+      //           opacity: (melodyEnabled && !isConfirmingDelete) ? 1 : 0,
+      //           child:
+      //               /*Stack(children: [
+      //             Align(
+      //                 alignment: Alignment.bottomRight,
+      //                 child: */
+      //               Icon(Icons.fiber_manual_record,
+      //                   color: chromaticSteps[
+      //                       7])), /*,
+      //             Align(
+      //                 alignment: Alignment.topLeft,
+      //                 child: Icon(
+      //                   Icons.edit,
+      //                 ))
+      //           ])),*/
+      //     )),
       AnimatedOpacity(
         opacity: (showVolume) ? 1 : 0,
         duration: animationDuration,
diff --git a/lib/music_view/music_view.dart b/lib/music_view/music_view.dart
index 43cf7a2d..e6a23a4d 100644
--- a/lib/music_view/music_view.dart
+++ b/lib/music_view/music_view.dart
@@ -1,6 +1,7 @@
 import 'dart:math';
 import 'dart:ui';
 
+import 'package:beatscratch_flutter_redux/generated/i18n.dart';
 import 'package:beatscratch_flutter_redux/widget/color_filtered_image_asset.dart';
 
 import '../colors.dart';
@@ -139,7 +140,9 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
   bool isConfiguringPart;
   bool isBrowsingPartMelodies;
   bool isEditingSection;
-  bool _isTwoFingerScaling = false;
+  TransformationController transformationController;
+  ValueNotifier<ScaleUpdateDetails> scaleUpdateNotifier =
+      ValueNotifier(ScaleUpdateDetails());
 
   // Offset _previousOffset = Offset.zero;
   bool _ignoreNextScale = false;
@@ -169,33 +172,22 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
 
   bool get showViewOptions => widget.showViewOptions || forceShowViewOptions;
 
-  ValueNotifier<double> xScaleNotifier,
-      yScaleNotifier,
-      verticalScrollingPosition;
-
-  BSMethod scrollToFocusedBeat;
-
-  /// Always immediately updated; the return values of [xScale] and [yScale].
-  ValueNotifier<double> _targetedXScale, _targetedYScale;
-  double get targetedXScale => _targetedXScale.value;
-  set targetedXScale(double v) {
-    _targetedXScale.value = v;
-    widget.appSettings.musicScale = v;
-  }
-
-  double get targetedYScale => _targetedYScale.value;
-  set targetedYScale(double v) {
-    _targetedYScale.value = v;
+  /// Always immediately updated; the return values of [targetedScale] and [scale].
+  ValueNotifier<double> _targetedScale;
+  double get targetedScale => _targetedScale.value;
+  set targetedScale(double v) {
+    print("set targetedScale=$v");
+    _targetedScale.value = v;
     widget.appSettings.musicScale = v;
   }
 
-  /// Used to maintain a locking mechanism as we animate from [_xScale] to [targetedXScale] in the setter for [xScale].
-  DateTime _xScaleLock, _yScaleLock;
+  /// Used to maintain a locking mechanism as we animate from [_xScale] to [targetedScale] in the setter for [targetedScale].
+  DateTime _xScaleLock;
   List<AnimationController> _xScaleAnimationControllers,
       _yScaleAnimationControllers;
 
-  /// Used to notify the [MusicScrollContainer] as we animate [_xScale] to [targetedXScale] in the setter for [xScale].
-  BSValueMethod<ScaleUpdate> _xScaleUpdate, _yScaleUpdate;
+  /// Used to notify the [MusicScrollContainer] as we animate [_xScale] to [targetedScale] in the setter for [targetedScale].
+  // BSValueMethod<ScaleUpdate> _xScaleUpdate, _yScaleUpdate;
 
   Map<MusicViewMode, List<SwipeTutorial>> _swipeTutorialsSeen;
   SwipeTutorial _currentSwipeTutorial;
@@ -255,8 +247,6 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
       VoidCallback onComplete}) {
     if (value() == currentValue()) {
       // print("skipping scale animation: no change (${currentValue()} to ${value()}");
-    } else if (_isTwoFingerScaling) {
-      // print("skipping scale animation: isTwoFingerScaling");
     } else {
       // print("starting scale animation");
       controllers.forEach((controller) {
@@ -268,7 +258,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
 
       controllers.add(scaleAnimationController);
       Animation animation;
-      // print("animating xScale to $value");
+      // print("animating targetedScale to $value");
       // print("Tween params: begin: $currentValue, end: $value");
       animation = Tween<double>(begin: currentValue(), end: value())
           .animate(scaleAnimationController)
@@ -299,7 +289,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
     if (value == null) {
       value = getBeat(
           Offset(
-              horizontallyVisibleRect.width /
+              widget.width /
                   (context.isLandscape && widget.splitMode == SplitMode.half
                       ? 4
                       : 2),
@@ -343,7 +333,6 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
     @required double Function() currentValue,
     @required Function(double) applyAnimatedValue,
     @required List<AnimationController> controllers,
-    @required BSValueMethod<ScaleUpdate> notifyUpdate,
   }) {
     if (value() == currentValue()) {
       return;
@@ -363,7 +352,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
           currentValue: currentValue,
           applyAnimatedValue: (v) {
             applyAnimatedValue(v);
-            notifyUpdate(ScaleUpdate(prevValue, v));
+            // notifyUpdate(ScaleUpdate(prevValue, v));
             prevValue = v;
           },
           controllers: controllers,
@@ -372,7 +361,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
             _animateScaleAtomically(
               getLockTime: getLockTime,
               setLockTime: setLockTime,
-              notifyUpdate: notifyUpdate,
+              // notifyUpdate: notifyUpdate,
               value: value,
               currentValue: currentValue,
               applyAnimatedValue: applyAnimatedValue,
@@ -405,83 +394,36 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
     }
   }
 
-  double get _xScale => xScaleNotifier.value;
-
-  set _xScale(value) => xScaleNotifier.value = value;
-
-  double get _yScale => yScaleNotifier.value;
-
-  set _yScale(value) => yScaleNotifier.value = value;
-
-  double get xScale => targetedXScale;
-
-  double get yScale => targetedYScale;
-
-  set xScale(double value) {
-    value = max(0, min(maxScale, value));
-    targetedXScale = value;
-    _animateScaleAtomically(
-      value: () => xScale,
-      currentValue: () => _xScale,
-      applyAnimatedValue: (value) => _xScale = value,
-      controllers: _xScaleAnimationControllers,
-      setLockTime: (it) {
-        _xScaleLock = it;
-      },
-      getLockTime: () => _xScaleLock,
-      notifyUpdate: _xScaleUpdate,
-    );
-    // if (autoScroll) {
-    //   widget.scrollToCurrentBeat();
-    // } else {
-    //   scrollToFocusedBeat();
-    // }
-  }
-
-  set rawXScale(double value) {
-    value = max(minScale, min(maxScale, value));
-    final oldValue = _xScale;
-    targetedXScale = value;
-    _xScale = value;
-    _xScaleUpdate(ScaleUpdate(oldValue, value));
-  }
-
-  set yScale(double value) {
-    value = max(minScale, min(maxScale, value));
-    targetedYScale = value;
-    _animateScaleAtomically(
-      value: () => yScale,
-      currentValue: () => _yScale,
-      applyAnimatedValue: (value) => _yScale = value,
-      controllers: _yScaleAnimationControllers,
-      setLockTime: (it) {
-        _yScaleLock = it;
-      },
-      getLockTime: () => _yScaleLock,
-      notifyUpdate: _yScaleUpdate,
-    );
+  double get dx =>
+      MatrixUtils.getAsTranslation(transformationController.value).dx;
+  double get dy =>
+      MatrixUtils.getAsTranslation(transformationController.value).dy;
+  double get scale => transformationController.value.getMaxScaleOnAxis();
+  set scale(value) {
+    print(
+        "Setting scale to $value, currently=$scale, scaling by ${value / scale}");
+    transformationController.value
+        .scale(value / scale, value / scale, value / scale);
   }
 
-  set rawYScale(double value) {
-    value = max(minScale, min(maxScale, value));
-    final oldValue = _yScale;
-    targetedYScale = value;
-    _yScale = value;
-    _yScaleUpdate(ScaleUpdate(oldValue, value));
+  _onScaleUpdated() {
+    if (scaleUpdateNotifier.value.scale != 1) {
+      _partAligned = false;
+      _aligned = false;
+    }
   }
 
   @override
   void initState() {
     super.initState();
     _disposed = false;
+    transformationController = TransformationController()
+      ..addListener(_onTransformationChange);
     highlightedBeat = new ValueNotifier(null);
     focusedBeat = new ValueNotifier(null);
     tappedBeat = new ValueNotifier(null);
     tappedPart = new ValueNotifier(null);
-    scrollToFocusedBeat = BSMethod();
-    _targetedXScale = ValueNotifier(null);
-    _targetedYScale = ValueNotifier(null);
-    verticalScrollingPosition = new ValueNotifier(0);
+    _targetedScale = ValueNotifier(null);
     requestedScrollOffsetForScale = ValueNotifier(null);
     _swipeTutorialsSeen = {
       MusicViewMode.melody: [],
@@ -491,18 +433,14 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
     _xScaleAnimationControllers = [];
     _yScaleAnimationControllers = [];
     centerCurrentSection = BSMethod();
-    _xScaleUpdate = BSValueMethod(null);
-    _yScaleUpdate = BSValueMethod(null);
     centerCurrentSection = BSMethod();
     scrollToPart = BSMethod();
-
+    scaleUpdateNotifier.addListener(_onScaleUpdated);
     isConfiguringPart = false;
     isBrowsingPartMelodies = true;
     isEditingSection = true;
     _aligned = true;
     _partAligned = false;
-    xScaleNotifier = ValueNotifier(null);
-    yScaleNotifier = ValueNotifier(null);
     widget.scrollToCurrentBeat.addListener(handleZoomAlign);
   }
 
@@ -524,10 +462,24 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
     _yScaleAnimationControllers.clear();
     highlightedBeat.dispose();
     centerCurrentSection.dispose();
+    scaleUpdateNotifier.removeListener(_onScaleUpdated);
     widget.scrollToCurrentBeat.removeListener(handleZoomAlign);
+    transformationController
+      ..removeListener(_onTransformationChange)
+      ..dispose();
     super.dispose();
   }
 
+  scaleText(double scale) => "${(scale * 100).toStringAsFixed(0)}%";
+
+  double _preTransformationScale = 1;
+  _onTransformationChange() {
+    if (scaleText(scale) != scaleText(_preTransformationScale)) {
+      setState(() {});
+    }
+    _preTransformationScale = scale;
+  }
+
   makeFullSize() {
     if (widget.splitMode == SplitMode.half) {
       widget.toggleSplitMode();
@@ -553,35 +505,33 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
 
   @override
   Widget build(context) {
-    if (_xScale == null) {
+    if (scale == null || targetedScale == null) {
       final musicScale = widget.appSettings.musicScale;
       if (musicScale == null) {
         if (context.isTablet) {
-          _xScale = 0.33;
+          scale = 0.33;
         } else {
-          _xScale = 0.22;
+          scale = 0.22;
         }
       } else {
-        _xScale = musicScale;
+        scale = musicScale;
       }
-      _yScale = _xScale;
-      targetedXScale = _xScale;
-      targetedYScale = _yScale;
-    }
-    if (targetedXScale != null &&
-        (_xScale.notRoughlyEquals(targetedXScale) ||
-            _yScale.notRoughlyEquals(targetedYScale))) {
-      xScale = xScale;
-      yScale = yScale;
+      targetedScale = scale;
     }
+    // if (targetedScale != null &&
+    //     (_xScale.notRoughlyEquals(targetedScale) ||
+    //         _yScale.notRoughlyEquals(targetedScale))) {
+    //   targetedScale = targetedScale;
+    //   scale = scale;
+    // }
     if (_partAligned &&
         (widget.musicViewMode == MusicViewMode.part ||
             widget.musicViewMode == MusicViewMode.melody ||
             widget.musicViewMode == MusicViewMode.score)) {
-      if (xScale.notRoughlyEquals(partAlignedScale)) {
+      if (targetedScale.notRoughlyEquals(partAlignedScale)) {
         partAlignVertically();
       }
-    } else if (_aligned && xScale.notRoughlyEquals(alignedScale)) {
+    } else if (_aligned && targetedScale.notRoughlyEquals(alignedScale)) {
       alignVertically();
     }
     _previousSplitMode = widget.splitMode;
@@ -694,6 +644,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
                         )),
                   Expanded(
                       child: GestureDetector(
+                          behavior: HitTestBehavior.translucent,
                           onVerticalDragUpdate: context.isPortrait
                               ? (details) {
                                   if (ignoreDragEvents) return;
@@ -907,6 +858,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
                       currentSection: widget.currentSection,
                       highlightedBeat: highlightedBeat,
                       setReferenceVolume: widget.setReferenceVolume,
+                      toggleRecording: widget.toggleRecording,
                     ))),
             AnimatedOpacity(
               duration: animationDuration,
@@ -973,10 +925,10 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
           Expanded(child: _mainMelody(context))
         ],
       ),
-      if (MyPlatform.isDebug && true)
+      if (MyPlatform.isDebug && false)
         IgnorePointer(
             child: Container(
-          width: 2 * xScale * unscaledStandardBeatWidth,
+          width: 2 * targetedScale * beatWidth,
           height: widget.height,
           decoration: BoxDecoration(
               color: Colors.black12,
@@ -985,7 +937,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
               ),
               borderRadius: BorderRadius.all(Radius.circular(5))),
         )),
-      if (MyPlatform.isDebug && true)
+      if (MyPlatform.isDebug && false)
         IgnorePointer(
             child: Container(
           width: widget.width,
@@ -1023,25 +975,55 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
     return false;
   }
 
+  double get scaledSystemHeight => MusicSystemPainter.calculateSystemHeight(
+      scale, widget.score.parts.length);
+
+  int systemNumber(transformedPosition) =>
+      (transformedPosition.dy / scaledSystemHeight).floor();
+
   getBeat(Offset position, {bool targeted = true}) {
-    double systemHeight = MusicSystemPainter.calculateSystemHeight(
-            yScale, widget.score.parts.length) +
-        MusicSystemPainter.calculateSystemPadding(yScale);
-    double systemXOffset =
-        ((position.dy + verticalScrollingPosition.value) / systemHeight)
-                .floor() *
-            (widget.width - MusicSystemPainter.calculateClefWidth(xScale));
-    int beat = ((position.dx +
-                systemXOffset +
-                horizontallyVisibleRect.left -
-                2 * unscaledStandardBeatWidth * xScale) /
-            (unscaledStandardBeatWidth * (targeted ? xScale : _xScale)))
-        .floor();
+    position = transformationController.toScene(position);
+    int systemNumber = this.systemNumber(position);
+    final scaledWidth = widget.width / scale;
+    final scaledAvailableWidth = scaledWidth - clefWidth;
+    double systemXOffset = systemNumber * scaledAvailableWidth;
+    double dx = position.dx + systemXOffset - clefWidth;
+
+    int beat = (dx / beatWidth).floor();
     // print("beat=$beat");
     beat = max(0, min(beat, widget.score.maxBeat));
+    // print(
+    //     "getBeat: $position, width=$scaledWidth, systemNumber=$systemNumber, systemXOffset=$systemXOffset ==> $beat");
     return beat;
   }
 
+  Part getPart(Offset position, {bool targeted = true}) {
+    position = transformationController.toScene(position);
+    int systemNumber = this.systemNumber(position);
+    double dy = position.dy;
+    dy -= systemNumber * scaledSystemHeight;
+    dy -= MusicSystemPainter.calculateHarmonyHeight(scale);
+    if (widget.musicViewMode == MusicViewMode.score ||
+        scale < 2 * MusicScrollContainer.minScale ||
+        !widget.showingSectionList) {
+      dy -= MusicSystemPainter.calculateSectionHeight(scale);
+    }
+    int partIndex = (dy / staffHeight).floor();
+    List<Part> parts;
+    if (!autoSort || widget.musicViewMode == MusicViewMode.section) {
+      parts = widget.score.parts;
+    } else {
+      final mainPart = this.mainPart();
+      parts = [mainPart] +
+          widget.score.parts
+              .where((p) => p.id != mainPart?.id)
+              .toList(growable: false);
+    }
+    final part = parts[max(0, min(parts.length - 1, partIndex))];
+    // print("getPart: $position, partIndex=$partIndex ==> $part");
+    return part;
+  }
+
   /// In View Mode this is the Keyboard Part. In Edit Mode it's the Part that's focused, or the Part of the Melody
   /// that's focused, or the Keyboard Part if only a Section is focused.
   Part mainPart() {
@@ -1118,10 +1100,10 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
             widget.musicViewMode == MusicViewMode.score) &&
         (focusedPartIsNotFirst || focusedMelodyIsNotFirst) &&
         showViewOptions;
-    bool showMinimizeButton = xScale != minScale;
-    bool showExpandButton = xScale != alignedScale;
+    bool showMinimizeButton = targetedScale != minScale;
+    bool showExpandButton = targetedScale != alignedScale;
     bool showExpandPartButton = (!showExpandButton || !showMinimizeButton) &&
-        xScale != partAlignedScale &&
+        targetedScale != partAlignedScale &&
         (widget.musicViewMode == MusicViewMode.part ||
             widget.musicViewMode == MusicViewMode.score ||
             widget.musicViewMode == MusicViewMode.melody);
@@ -1154,8 +1136,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
 
     pointerDown(Offset localPosition) {
       double systemHeight = MusicSystemPainter.calculateSystemHeight(
-              yScale, widget.score.parts.length) +
-          MusicSystemPainter.calculateSystemPadding(yScale);
+          scale, widget.score.parts.length);
       if (systemHeight < localPosition.dy) {
         if (autoScroll) {
           setState(() {
@@ -1188,45 +1169,11 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
 
       int beat = getBeat(localPosition);
       print(
-          "pointerDown: ${localPosition} -> beat: $beat; x/t: $_xScale/$targetedXScale");
+          "pointerDown: ${localPosition} -> beat: $beat; x/t: $scale/$targetedScale");
 
       tappedBeat.value = beat;
-      double partIndexY = verticalScrollingPosition.value + localPosition.dy;
-      partIndexY -= MusicSystemPainter.calculateHarmonyHeight(yScale);
-      if (widget.musicViewMode == MusicViewMode.score ||
-          xScale < minScale * 2) {
-        partIndexY -= MusicSystemPainter.calculateSectionHeight(yScale);
-      }
-      while (partIndexY > systemHeight) {
-        partIndexY -= systemHeight;
-      }
-      int partIndex =
-          (partIndexY / (yScale * MusicSystemPainter.staffHeight)).floor();
-      print("partIndex=$partIndex");
-      print("mainPart=${mainPart?.midiName}");
-      if (!autoSort || widget.musicViewMode == MusicViewMode.section) {
-        // print("not using autofocus");
-        final parts = widget.score.parts;
-        tappedPart.value = parts[min(parts.length - 1, partIndex)];
-      } else {
-        // print(
-        //     "using autofocus; parts = ${widget.score.parts.map((e) => e.midiName)}");
-        if (partIndex == 0 || widget.score.parts.length == 1) {
-          // print("using autofocus1");
-          tappedPart.value = mainPart ?? widget.score.parts.first;
-        } else {
-          // print("using autofocus2");
-          final parts = widget.score.parts
-              .where((p) => p.id != mainPart?.id)
-              .toList(growable: false);
-          if (parts.isEmpty) return;
-          tappedPart.value = parts[min(parts.length - 1, --partIndex)];
-        }
-      }
-      // Future.delayed(Duration(milliseconds: 800), () {
-      //   tappedBeat.value = null;
-      //   tappedPart.value = null;
-      // });
+      final part = getPart(localPosition);
+      tappedPart.value = part;
     }
 
     return AnimatedContainer(
@@ -1242,7 +1189,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
               }
               int beat = tappedBeat.value;
               print(
-                  "onTapUp: ${details.localPosition} -> beat: $beat; x/t: $_xScale/$targetedXScale");
+                  "onTapUp: ${details.localPosition} -> beat: $beat; x/t: $scale/$targetedScale");
               if (BeatScratchPlugin.playing &&
                   recordingMelody &&
                   highlightedBeat.value != beat) {
@@ -1264,51 +1211,6 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
               pointerDown(details.localPosition);
               onLongPress();
             },
-            onScaleStart: (details) => setState(() {
-                  if (_ignoreNextScale) {
-                    return;
-                  }
-                  _aligned = false;
-                  _partAligned = false;
-                  _isTwoFingerScaling = true;
-                  int beat = getBeat(details.focalPoint);
-                  focusedBeat.value = beat;
-                  tappedBeat.value = null;
-                  tappedPart.value = null;
-                  _startScale = xScale;
-                  // _startVerticalScale = yScale;
-                }),
-            onScaleUpdate: (ScaleUpdateDetails details) {
-              if (_ignoreNextScale) {
-                return;
-              }
-              setState(() {
-                if (focusedBeat.value == null) {
-                  int beat = getBeat(details.focalPoint);
-                  focusedBeat.value = beat;
-                }
-                if (details.scale > 0) {
-                  final target = _startScale * details.scale;
-                  rawXScale = target;
-                  _updateFocusedBeatValue(withDelayClear: false);
-                  rawYScale = target;
-                }
-                // if (details.horizontalScale > 0) {
-                //   final target = _startHorizontalScale * details.horizontalScale;
-                //   rawXScale = target;
-                // }
-                // if (details.verticalScale > 0) {
-                //   final target = _startVerticalScale * details.verticalScale;
-                //   rawYScale = target;
-                // }
-              });
-            },
-            onScaleEnd: (ScaleEndDetails details) {
-              _ignoreNextScale = false;
-              _isTwoFingerScaling = false;
-              focusedBeat.value = null;
-              handleZoomAlign();
-            },
             child: Stack(children: [
               MusicScrollContainer(
                   musicViewMode: widget.musicViewMode,
@@ -1321,8 +1223,6 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
                       widget.bluetoothControllerPressedNotes,
                   focusedMelody: widget.melody,
                   renderingMode: widget.renderingMode,
-                  xScale: _xScale,
-                  yScale: _xScale,
                   staves: staves,
                   focusedPart: mainPart,
                   keyboardPart: widget.keyboardPart,
@@ -1334,20 +1234,14 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
                   focusedBeat: focusedBeat,
                   tappedBeat: tappedBeat,
                   tappedPart: tappedPart,
-                  verticalScrollNotifier: verticalScrollingPosition,
                   requestedScrollOffsetForScale: requestedScrollOffsetForScale,
-                  targetXScaleNotifier: _targetedXScale,
-                  targetYScaleNotifier: _targetedYScale,
-                  scrollToFocusedBeat: scrollToFocusedBeat,
-                  isTwoFingerScaling: _isTwoFingerScaling,
+                  targetScaleNotifier: _targetedScale,
                   scrollToCurrentBeat: widget.scrollToCurrentBeat,
                   scrollToPart: scrollToPart,
                   centerCurrentSection: centerCurrentSection,
                   appSettings: widget.appSettings,
-                  notifyXScaleUpdate: _xScaleUpdate,
-                  notifyYScaleUpdate: _yScaleUpdate,
-                  xScaleNotifier: xScaleNotifier,
-                  yScaleNotifier: yScaleNotifier,
+                  transformationController: transformationController,
+                  scaleUpdateNotifier: scaleUpdateNotifier,
                   showingSectionList: widget.showingSectionList),
               Row(children: [
                 Expanded(child: SizedBox()),
@@ -1395,16 +1289,16 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
   }
 
   handleZoomAlign() {
+    return;
     if (autoZoomAlign) {
-      final double x = targetedXScale,
-          // y = targetedYScale,
+      final double x = targetedScale,
+          // y = targetedScale,
           w = widget.width,
-          numberOfBeatsOnScreen = w / (x * unscaledStandardBeatWidth),
+          numberOfBeatsOnScreen = w / (x * beatWidth),
           targetNumberOfBeatsOnScreen = numberOfBeatsOnScreen.roundToDouble(),
-          newXScale =
-              w / (targetNumberOfBeatsOnScreen * unscaledStandardBeatWidth);
-      xScale = newXScale;
-      yScale = newXScale;
+          newXScale = w / (targetNumberOfBeatsOnScreen * beatWidth);
+      targetedScale = newXScale;
+      // scale = newXScale;
     }
   }
 
@@ -1531,58 +1425,62 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
   }
 
   Widget zoomButton() {
-    final zoomIncrement = 1.03;
-    final bigDecrementIcon = (xScale > alignedScale || yScale > alignedScale)
-        ? Icons.expand
-        : FontAwesomeIcons.compressArrowsAlt;
-    final bigDecrementAction = (xScale > alignedScale || yScale > alignedScale)
-        ? () {
-            setState(() {
-              _aligned = true;
-              _partAligned = false;
-              _preButtonScale();
-              alignVertically();
-              Future.delayed(animationDuration, () {
-                widget.scrollToCurrentBeat();
-              });
-            });
-          }
-        : (xScale > minScale || yScale > minScale)
+    final zoomIncrement = .01;
+    final bigDecrementIcon =
+        (targetedScale > alignedScale || scale > alignedScale)
+            ? Icons.expand
+            : FontAwesomeIcons.compressArrowsAlt;
+    final bigDecrementAction =
+        (targetedScale > alignedScale || scale > alignedScale)
             ? () {
                 setState(() {
-                  minimize();
+                  _aligned = true;
+                  _partAligned = false;
+                  _preButtonScale();
+                  alignVertically();
+                  Future.delayed(animationDuration, () {
+                    widget.scrollToCurrentBeat();
+                  });
                 });
               }
-            : null;
-    final bigIncrementIcon = (xScale >= alignedScale || yScale >= alignedScale)
-        ? FontAwesomeIcons.expandArrowsAlt
-        : Icons.expand;
-    final bigIncrementAction = (xScale < alignedScale || yScale < alignedScale)
-        ? () {
-            setState(() {
-              _aligned = true;
-              _partAligned = false;
-              _preButtonScale();
-              alignVertically();
-              _lineUpAfterSizeChange();
-              Future.delayed(animationDuration, () {
-                widget.scrollToCurrentBeat();
-              });
-            });
-          }
-        : (xScale < partAlignedScale || yScale < partAlignedScale) &&
-                !xScale.roughlyEquals(partAlignedScale) &&
-                widget.musicViewMode != MusicViewMode.section
+            : (targetedScale > minScale || scale > minScale)
+                ? () {
+                    setState(() {
+                      minimize();
+                    });
+                  }
+                : null;
+    final bigIncrementIcon =
+        (targetedScale >= alignedScale || scale >= alignedScale)
+            ? FontAwesomeIcons.expandArrowsAlt
+            : Icons.expand;
+    final bigIncrementAction =
+        (targetedScale < alignedScale || scale < alignedScale)
             ? () {
                 setState(() {
                   _aligned = true;
-                  _partAligned = true;
+                  _partAligned = false;
                   _preButtonScale();
-                  partAlignVertically();
+                  alignVertically();
                   _lineUpAfterSizeChange();
+                  Future.delayed(animationDuration, () {
+                    widget.scrollToCurrentBeat();
+                  });
                 });
               }
-            : null;
+            : (targetedScale < partAlignedScale || scale < partAlignedScale) &&
+                    !targetedScale.roughlyEquals(partAlignedScale) &&
+                    widget.musicViewMode != MusicViewMode.section
+                ? () {
+                    setState(() {
+                      _aligned = true;
+                      _partAligned = true;
+                      _preButtonScale();
+                      partAlignVertically();
+                      _lineUpAfterSizeChange();
+                    });
+                  }
+                : null;
     return Container(
         color: Colors.black12,
         padding: EdgeInsets.zero,
@@ -1612,7 +1510,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
                                     musicForegroundColor.withOpacity(0.54)))),
                     Transform.translate(
                       offset: Offset(2, 20),
-                      child: Text("${(xScale * 100).toStringAsFixed(0)}%",
+                      child: Text(scaleText(targetedScale),
                           style: TextStyle(
                               fontWeight: FontWeight.w800,
                               fontSize: 12,
@@ -1634,27 +1532,30 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
           incrementIcon: Icons.zoom_in,
           decrementIcon: Icons.zoom_out,
           incrementDistance: 1,
-          onIncrement: (xScale < maxScale || yScale < maxScale)
+          onIncrement: (targetedScale < maxScale || scale < maxScale)
               ? () {
                   _ignoreNextScale = true;
                   _aligned = false;
                   _partAligned = false;
                   setState(() {
-                    rawXScale = min(maxScale, (xScale) * zoomIncrement);
-                    rawYScale = min(maxScale, (yScale) * zoomIncrement);
-                    // print("zoomIn done; xScale=$targetXScale, yScale=$targetYScale");
+                    print("zoomIn: scale=$scale, targetedScale=$targetedScale");
+                    targetedScale =
+                        min(maxScale, targetedScale + zoomIncrement);
+                    // print("zoomIn done; targetedScale=$targetXScale, scale=$targetYScale");
                   });
                 }
               : null,
-          onDecrement: (xScale > minScale || yScale > minScale)
+          onDecrement: (targetedScale > minScale || scale > minScale)
               ? () {
                   _ignoreNextScale = true;
                   _aligned = false;
                   _partAligned = false;
                   setState(() {
-                    rawXScale = max(minScale, xScale / zoomIncrement);
-                    rawYScale = max(minScale, yScale / zoomIncrement);
-                    // print("zoomOut done; xScale=$xScale, yScale=$yScale");
+                    print(
+                        "zoomOut: scale=$scale, targetedScale=$targetedScale");
+                    targetedScale =
+                        max(minScale, targetedScale - zoomIncrement);
+                    // print("zoomOut done; targetedScale=$targetedScale, scale=$scale");
                   });
                 }
               : null,
@@ -1683,8 +1584,8 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
     _aligned = false;
     _partAligned = false;
     _preButtonScale();
-    xScale = minScale;
-    yScale = minScale;
+    targetedScale = minScale;
+    // scale = minScale;
     _lineUpAfterSizeChange();
   }
 
@@ -1802,24 +1703,24 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
   }
 
   alignVertically() {
-    final scale = alignedScale;
-    xScale = scale;
-    yScale = scale;
+    final newScale = alignedScale;
+    targetedScale = newScale;
+    // scale = scale;
   }
 
   partAlignVertically() {
-    final scale = partAlignedScale;
-    xScale = scale;
-    yScale = scale;
+    final newScale = partAlignedScale;
+    targetedScale = newScale;
+    // scale = scale;
   }
 
   double get sectionsHeight => widget.musicViewMode == MusicViewMode.score ||
-          xScale < 2 * MusicScrollContainer.minScale
+          targetedScale < 2 * MusicScrollContainer.minScale
       ? 30
       : 0;
 
   double get alignedScale {
-    double result = alignedStaffHeight / MusicSystemPainter.staffHeight;
+    double result = alignedStaffHeight / staffHeight;
     if (sectionsHeight != 0) {
       result *= (widget.height - 0) / (widget.height + sectionsHeight);
     }
@@ -1827,7 +1728,7 @@ class _MusicViewState extends State<MusicView> with TickerProviderStateMixin {
   }
 
   double get partAlignedScale {
-    double result = partAlignedStaffHeight / MusicSystemPainter.staffHeight;
+    double result = partAlignedStaffHeight / staffHeight;
     if (sectionsHeight != 0) {
       result *= (widget.height - 0) / (widget.height + sectionsHeight);
     }
diff --git a/lib/music_view/part_melody_browser.dart b/lib/music_view/part_melody_browser.dart
index 27d86357..07353970 100644
--- a/lib/music_view/part_melody_browser.dart
+++ b/lib/music_view/part_melody_browser.dart
@@ -78,29 +78,48 @@ class _PartMelodyBrowserState extends State<PartMelodyBrowser>
                 child: AnimatedOpacity(
                     duration: animationDuration,
                     opacity: widget.browsingMelodies ? 1 : 0,
-                    child: Stack(
-                      children: [
-                        Align(
-                            alignment: Alignment.center,
-                            child: Icon(Icons.fiber_manual_record,
-                                color: chromaticSteps[7])),
-                        Align(
-                            alignment: Alignment.bottomCenter,
-                            child: Padding(
-                              padding:
-                                  const EdgeInsets.only(right: 1, bottom: 0),
-                              child: Transform.translate(
-                                  offset: Offset(0, 0),
-                                  child: Text(
-                                    "Record",
-                                    style: TextStyle(
-                                        fontSize: 10,
-                                        color: Colors.white,
-                                        fontWeight: FontWeight.w400),
-                                  )),
-                            ))
-                      ],
-                    ))),
+                    child: Stack(children: [
+                      Center(
+                          child: Transform.translate(
+                              offset: Offset(0, -5),
+                              child: Icon(Icons.fiber_manual_record,
+                                  color: chromaticSteps[7]))),
+                      Center(
+                          child: Transform.translate(
+                              offset: Offset(0, 10),
+                              child: Text("New\nMelody",
+                                  textAlign: TextAlign.center,
+                                  style: TextStyle(
+                                      fontSize: 8,
+                                      height: 0.9,
+                                      color: Colors.white,
+                                      fontWeight: FontWeight.w400)))),
+                    ])
+                    // Stack(
+                    //   children: [
+                    //     Align(
+                    //         alignment: Alignment.center,
+                    //         child: Icon(Icons.fiber_manual_record,
+                    //             color: chromaticSteps[7])),
+                    //     Align(
+                    //         alignment: Alignment.bottomCenter,
+                    //         child: Padding(
+                    //           padding:
+                    //               const EdgeInsets.only(right: 1, bottom: 0),
+                    //           child: Transform.translate(
+                    //               offset: Offset(0, 0),
+                    //               child: Text(
+                    //                 "New Melody",
+                    //                 textAlign: TextAlign.center,
+                    //                 style: TextStyle(
+                    //                     fontSize: 8,
+                    //                     color: Colors.white,
+                    //                     fontWeight: FontWeight.w400),
+                    //               )),
+                    //         ))
+                    //   ],
+                    // )
+                    )),
           )),
       Expanded(child: getList(context)),
       SizedBox(width: 3),
diff --git a/lib/music_view/section_editing_toolbar.dart b/lib/music_view/section_editing_toolbar.dart
index 81287c64..9806c7bf 100644
--- a/lib/music_view/section_editing_toolbar.dart
+++ b/lib/music_view/section_editing_toolbar.dart
@@ -172,7 +172,6 @@ class _SectionEditingToolbarState extends State<SectionEditingToolbar>
             : null,
         child: Container(
             width: 36,
-            padding: EdgeInsets.only(top: 0, bottom: 5),
             child: Stack(children: [
               Align(
                 alignment: Alignment.center,
diff --git a/lib/storage/score_picker.dart b/lib/storage/score_picker.dart
index 3e15ec67..6acff2ae 100644
--- a/lib/storage/score_picker.dart
+++ b/lib/storage/score_picker.dart
@@ -3,6 +3,7 @@ import 'dart:math';
 import 'dart:ui';
 import 'package:beatscratch_flutter_redux/settings/app_settings.dart';
 import 'package:beatscratch_flutter_redux/storage/url_conversions.dart';
+import 'package:beatscratch_flutter_redux/universe_view/universe_icon.dart';
 import 'package:flutter/services.dart';
 import 'package:http/http.dart' as http;
 
@@ -52,6 +53,7 @@ class ScorePicker extends StatefulWidget {
   final Color sectionColor;
   final Function(VoidCallback) setState;
   final VoidCallback close;
+  final VoidCallback goToUniverse;
   final ScorePickerMode mode;
   final Function(ScorePickerMode) requestMode;
   final Score openedScore;
@@ -77,7 +79,8 @@ class ScorePicker extends StatefulWidget {
       this.requestMode,
       this.width,
       this.height,
-      this.refreshUniverseData})
+      this.refreshUniverseData,
+      this.goToUniverse})
       : super(key: key);
 
   @override
@@ -96,6 +99,7 @@ class ScorePickerState extends State<ScorePicker> {
   ScorePickerMode previousMode;
   String deletingScoreName;
   String overwritingScoreName;
+  BSMethod universeAnimation = BSMethod();
 
   bool get wasShowingScoreNameEntry =>
       previousMode?.showScoreNameEntry ?? false;
@@ -136,6 +140,7 @@ class ScorePickerState extends State<ScorePicker> {
     nameFocus.dispose();
     widget.refreshUniverseData.removeListener(_refreshUniverseData);
     disposed = true;
+    universeAnimation.dispose();
     super.dispose();
   }
 
@@ -337,6 +342,24 @@ class ScorePickerState extends State<ScorePicker> {
                                       color: ChordColor.dominant.color
                                           .textColor()))),
                         ),
+                        AnimatedContainer(
+                          duration: animationDuration,
+                          width: widget.mode == ScorePickerMode.open ? 42 : 0,
+                          padding: EdgeInsets.only(right: 5),
+                          child: MyFlatButton(
+                              lightHighlight: true,
+                              color: Colors.transparent,
+                              onPressed: () {
+                                setState(() {
+                                  universeAnimation();
+                                });
+                                widget.goToUniverse();
+                              },
+                              padding: EdgeInsets.zero,
+                              child: UniverseIcon(
+                                animateIcon: universeAnimation,
+                              )),
+                        ),
                         AnimatedContainer(
                           duration: animationDuration,
                           width: widget.mode == ScorePickerMode.open ? 80 : 0,
diff --git a/lib/storage/score_picker_preview.dart b/lib/storage/score_picker_preview.dart
index a5c7acaa..9d7d12dc 100644
--- a/lib/storage/score_picker_preview.dart
+++ b/lib/storage/score_picker_preview.dart
@@ -4,6 +4,7 @@ import 'dart:ui';
 
 import 'package:beatscratch_flutter_redux/music_view/music_system_painter.dart';
 import 'package:beatscratch_flutter_redux/settings/app_settings.dart';
+import 'package:beatscratch_flutter_redux/util/music_notation_theory.dart';
 import 'package:beatscratch_flutter_redux/util/util.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -334,8 +335,7 @@ class _ScorePickerPreviewState extends State<ScorePickerPreview> {
                                                         widget.height,
                                                         36 +
                                                             previewScale *
-                                                                MusicSystemPainter
-                                                                    .staffHeight *
+                                                                staffHeight *
                                                                 previewScore
                                                                     .parts
                                                                     .length),
diff --git a/lib/ui_models.dart b/lib/ui_models.dart
index a358769e..a0b273d3 100644
--- a/lib/ui_models.dart
+++ b/lib/ui_models.dart
@@ -17,7 +17,5 @@ enum ScrollingMode { sideScroll, pitch, roll }
 enum RenderingMode { notation, colorblock }
 
 const int animationMultiplier = 1;
-const Duration animationDuration =
-    Duration(milliseconds: (kIsWeb || true ? 500 : 300) * animationMultiplier);
-const Duration slowAnimationDuration =
-    Duration(milliseconds: (kIsWeb || true ? 800 : 400) * animationMultiplier);
+const Duration animationDuration = Duration(milliseconds: 300);
+const Duration slowAnimationDuration = Duration(milliseconds: 400);
diff --git a/lib/universe_view/universe_icon.dart b/lib/universe_view/universe_icon.dart
index f758b90b..2811945b 100644
--- a/lib/universe_view/universe_icon.dart
+++ b/lib/universe_view/universe_icon.dart
@@ -14,8 +14,8 @@ class UniverseIcon extends StatefulWidget {
 
   const UniverseIcon(
       {Key key,
-      @required this.sectionColor,
-      @required this.interactionMode,
+      this.sectionColor: Colors.white,
+      this.interactionMode: InteractionMode.view,
       this.animateIcon})
       : super(key: key);
 
diff --git a/lib/universe_view/universe_view_ui.dart b/lib/universe_view/universe_view_ui.dart
index fffedc9e..a425594f 100644
--- a/lib/universe_view/universe_view_ui.dart
+++ b/lib/universe_view/universe_view_ui.dart
@@ -23,6 +23,7 @@ import '../widget/my_platform.dart';
 
 class UniverseViewUI {
   BSMethod refreshUniverseData;
+  VoidCallback switchToLocalScores;
   MessagesUI messagesUI;
   bool visible = true;
   final UniverseManager universeManager;
@@ -57,7 +58,9 @@ class UniverseViewUI {
       @required Color sectionColor,
       @required double keyboardHeight,
       @required double settingsHeight,
-      @required VoidCallback showDownloads}) {
+      @required VoidCallback showDownloads,
+      @required double scorePickerWidth}) {
+    double abbreviateAtWidth = 340;
     return AnimatedOpacity(
         duration: animationDuration,
         opacity: visible ? 1 : 0,
@@ -104,28 +107,31 @@ class UniverseViewUI {
                                     color: Colors.white,
                                     fontSize: 22,
                                     fontWeight: FontWeight.w100)),
-                            SizedBox(width: 7),
-                            Stack(
-                              children: [
-                                Transform.translate(
-                                    offset: Offset(0, -6),
-                                    child: Text(
-                                        MyPlatform.isWeb ? "Web" : "Universe",
-                                        style: TextStyle(
-                                            color: Colors.white,
-                                            fontSize: 14,
-                                            fontWeight: FontWeight.w400))),
-                                if (MyPlatform.isWeb)
+                            if (scorePickerWidth > abbreviateAtWidth)
+                              SizedBox(width: 7),
+                            if (scorePickerWidth > abbreviateAtWidth)
+                              Stack(
+                                children: [
                                   Transform.translate(
-                                      offset: Offset(0, 6),
-                                      child: Text("BETA",
+                                      offset: Offset(0, -6),
+                                      child: Text(
+                                          MyPlatform.isWeb ? "Web" : "Universe",
                                           style: TextStyle(
                                               color: Colors.white,
                                               fontSize: 14,
-                                              fontWeight: FontWeight.w800))),
-                              ],
-                            ),
-                            SizedBox(width: 2.5),
+                                              fontWeight: FontWeight.w400))),
+                                  if (MyPlatform.isWeb)
+                                    Transform.translate(
+                                        offset: Offset(0, 6),
+                                        child: Text("BETA",
+                                            style: TextStyle(
+                                                color: Colors.white,
+                                                fontSize: 14,
+                                                fontWeight: FontWeight.w800))),
+                                ],
+                              ),
+                            if (scorePickerWidth > abbreviateAtWidth)
+                              SizedBox(width: 2.5),
                           ]),
                           // Expanded(child: Container(child: SizedBox()))
                         ],
@@ -135,6 +141,20 @@ class UniverseViewUI {
                 ),
                 Expanded(child: SizedBox()),
 
+                AnimatedOpacity(
+                  duration: animationDuration,
+                  opacity: switchToLocalScores != null ? 1 : 0,
+                  child: AnimatedContainer(
+                      duration: animationDuration,
+                      width: switchToLocalScores != null ? 42 : 0,
+                      // height: showDownloads != null ? 40 : 0,
+                      child: MyFlatButton(
+                        lightHighlight: true,
+                        padding: EdgeInsets.symmetric(vertical: 3),
+                        child: Icon(Icons.folder_open, color: Colors.white),
+                        onPressed: switchToLocalScores,
+                      )),
+                ),
                 AnimatedOpacity(
                   duration: animationDuration,
                   opacity: showDownloads != null ? 1 : 0,
diff --git a/lib/util/music_notation_theory.dart b/lib/util/music_notation_theory.dart
index 4e8ed3b2..1575447f 100644
--- a/lib/util/music_notation_theory.dart
+++ b/lib/util/music_notation_theory.dart
@@ -2,6 +2,17 @@ import '../generated/protos/music.pb.dart';
 import 'music_theory.dart';
 import 'util.dart';
 
+// beatWidth is in the scale of the renderer, not the overlying InteractiveView.
+const double beatWidth = 90.0;
+// clefWidth is in the scale of the renderer, not the overlying InteractiveView.
+const double clefWidth = beatWidth * 2;
+// staffHeight is in the scale of the renderer, not the overlying InteractiveView.
+const double staffHeight = 500;
+// systemPadding is in the scale of the renderer, not the overlying InteractiveView.
+const double systemPadding = staffHeight * 0.5;
+// extraBeatsSpaceForClefs is relative to beatWidth, not any particular scale :)
+const double extraBeatsSpaceForClefs = 2;
+
 class NoteSpecification {
   final NoteName noteName;
   final int octave;
@@ -150,8 +161,6 @@ extension HeptatonicConversions on int {
   }
 }
 
-const double unscaledStandardBeatWidth = 90.0;
-
 abstract class MusicStaff {
   MusicStaff();
 
diff --git a/lib/widget/incrementable_value.dart b/lib/widget/incrementable_value.dart
index d6b51fe6..26d1cf5b 100644
--- a/lib/widget/incrementable_value.dart
+++ b/lib/widget/incrementable_value.dart
@@ -209,7 +209,7 @@ class _IncrementableValueState extends State<IncrementableValue> {
         //   Column(children: [Expanded(child: SizedBox())])
         // )),]),
         Listener(
-          child: Container(
+          child: Center(
               child: Row(children: [
             AnimatedContainer(
                 width: showBigDecrement ? buttonWidth : 0,
@@ -230,7 +230,7 @@ class _IncrementableValueState extends State<IncrementableValue> {
                           widget.onBigDecrement();
                         }
                       : null,
-                  padding: EdgeInsets.all(0),
+                  padding: EdgeInsets.zero,
                 )),
             AnimatedContainer(
                 width: buttonWidth,
diff --git a/lib/widget/section_list.dart b/lib/widget/section_list.dart
index c89c4496..4bd09878 100644
--- a/lib/widget/section_list.dart
+++ b/lib/widget/section_list.dart
@@ -29,6 +29,7 @@ class SectionList extends StatefulWidget {
   final VoidCallback toggleShowSectionBeatCounts;
   final bool allowReordering;
   final AppSettings appSettings;
+  final double width, height;
 
   const SectionList(
       {Key key,
@@ -42,7 +43,9 @@ class SectionList extends StatefulWidget {
       this.showSectionBeatCounts,
       this.toggleShowSectionBeatCounts,
       this.allowReordering,
-      this.appSettings})
+      this.appSettings,
+      this.width,
+      this.height})
       : super(key: key);
 
   @override
@@ -187,20 +190,15 @@ class _SectionListState extends State<SectionList> {
   _animateToCurrentSection() {
     int index = widget.score.sections.indexOf(widget.currentSection);
     if (widget.scrollDirection == Axis.horizontal) {
-      double marginSections = context.isTablet
-          ? 2.62
-          : context.isLandscapePhone
-              ? 1.38
-              : .38;
-      double position = _Section.width * (index - marginSections);
+      double margin = max(0.0, widget.width - _Section.width);
+      double position = _Section.width * (index) - margin * 0.25;
       position = min(_scrollController.position.maxScrollExtent, position);
       position = max(0, position);
       _scrollController.animateTo(position,
           duration: animationDuration, curve: Curves.easeInOut);
     } else {
-      double marginSections =
-          context.isTablet || context.isPortraitPhone ? 3.62 : 1.62;
-      double position = _Section.height * (index - marginSections);
+      double margin = max(0.0, widget.height - _Section.height);
+      double position = _Section.height * (index) - margin * 0.25;
       position = min(_scrollController.position.maxScrollExtent, position);
       position = max(0, position);
       _scrollController.animateTo(position,
diff --git a/macos/Podfile.lock b/macos/Podfile.lock
index e8e98a72..c2b6c4b3 100644
--- a/macos/Podfile.lock
+++ b/macos/Podfile.lock
@@ -44,10 +44,10 @@ SPEC CHECKSUMS:
   FlutterMacOS: 57701585bf7de1b3fc2bb61f6378d73bbdea8424
   package_info_plus_macos: f010621b07802a241d96d01876d6705f15e77c1c
   path_provider_macos: 160cab0d5461f0c0e02995469a98f24bdb9a3f1f
-  shared_preferences_macos: 480ce071d0666e37cef23fe6c702293a3d21799e
+  shared_preferences_macos: a64dc611287ed6cbe28fd1297898db1336975727
   SwiftProtobuf: fd4693388a96c8c2df35d3b063272b0e7c499d00
-  url_launcher_macos: 45af3d61de06997666568a7149c1be98b41c95d4
+  url_launcher_macos: 597e05b8e514239626bcf4a850fcf9ef5c856ec3
 
 PODFILE CHECKSUM: 2fbdd1e2587d5566bab687bc92adce54b042c807
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.11.3
diff --git a/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index 479cb6d3..a4b07040 100644
--- a/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1250"
+   LastUpgradeVersion = "1340"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
diff --git a/pubspec.lock b/pubspec.lock
index 996e7025..81b96b34 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -14,14 +14,14 @@ packages:
       name: archive
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.1.5"
+    version: "3.2.1"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.8.1"
+    version: "2.8.2"
   base_x:
     dependency: "direct main"
     description:
@@ -42,7 +42,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
@@ -63,7 +63,7 @@ packages:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.15.0"
+    version: "1.16.0"
   crypto:
     dependency: transitive
     description:
@@ -98,7 +98,7 @@ packages:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.0"
   ffi:
     dependency: transitive
     description:
@@ -166,13 +166,13 @@ packages:
       name: flutter_midi_command_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.3"
+    version: "0.3.4"
   flutter_reorderable_list:
     dependency: "direct main"
     description:
-      name: flutter_reorderable_list
-      url: "https://pub.dartlang.org"
-    source: hosted
+      path: "../flutter_reorderable_list"
+      relative: true
+    source: path
     version: "1.1.0"
   flutter_test:
     dependency: "direct dev"
@@ -197,7 +197,7 @@ packages:
       name: http
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.13.3"
+    version: "0.13.4"
   http_parser:
     dependency: transitive
     description:
@@ -211,21 +211,35 @@ packages:
       name: implicitly_animated_reorderable_list
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.1"
+    version: "0.4.2"
   js:
     dependency: transitive
     description:
       name: js
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.3"
+    version: "0.6.4"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.4"
+  matrix4_transform:
+    dependency: "direct main"
+    description:
+      name: matrix4_transform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   meta:
     dependency: transitive
     description:
@@ -247,13 +261,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.4.3"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
   package_info_plus:
     dependency: "direct main"
     description:
       name: package_info_plus
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.4.0"
   package_info_plus_linux:
     dependency: transitive
     description:
@@ -267,7 +288,7 @@ packages:
       name: package_info_plus_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.0"
   package_info_plus_platform_interface:
     dependency: transitive
     description:
@@ -288,14 +309,14 @@ packages:
       name: package_info_plus_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.3"
+    version: "1.0.4"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   path_drawing:
     dependency: "direct main"
     description:
@@ -316,77 +337,91 @@ packages:
       name: path_provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.0.9"
+  path_provider_android:
+    dependency: transitive
+    description:
+      name: path_provider_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.11"
+  path_provider_ios:
+    dependency: transitive
+    description:
+      name: path_provider_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.7"
   path_provider_linux:
     dependency: transitive
     description:
       name: path_provider_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.5"
   path_provider_macos:
     dependency: transitive
     description:
       name: path_provider_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.0.5"
   path_provider_platform_interface:
     dependency: transitive
     description:
       name: path_provider_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.1"
+    version: "2.0.3"
   path_provider_windows:
     dependency: transitive
     description:
       name: path_provider_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.3"
-  pedantic:
-    dependency: transitive
-    description:
-      name: pedantic
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.11.1"
+    version: "2.0.5"
   platform:
     dependency: transitive
     description:
       name: platform
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.2"
+    version: "3.1.0"
   plugin_platform_interface:
     dependency: transitive
     description:
       name: plugin_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.1.2"
   process:
     dependency: transitive
     description:
       name: process
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.2.3"
+    version: "4.2.4"
   protobuf:
     dependency: "direct main"
     description:
       name: protobuf
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.0"
+    version: "2.0.1"
+  provider:
+    dependency: "direct main"
+    description:
+      name: provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.2"
   quiver:
     dependency: "direct main"
     description:
       name: quiver
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.1"
+    version: "3.0.1+1"
   recase:
     dependency: "direct main"
     description:
@@ -414,21 +449,35 @@ packages:
       name: shared_preferences
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.8"
+    version: "2.0.13"
+  shared_preferences_android:
+    dependency: transitive
+    description:
+      name: shared_preferences_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.11"
+  shared_preferences_ios:
+    dependency: transitive
+    description:
+      name: shared_preferences_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
   shared_preferences_linux:
     dependency: transitive
     description:
       name: shared_preferences_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.1.0"
   shared_preferences_macos:
     dependency: transitive
     description:
       name: shared_preferences_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.0.3"
   shared_preferences_platform_interface:
     dependency: transitive
     description:
@@ -442,14 +491,14 @@ packages:
       name: shared_preferences_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.0.3"
   shared_preferences_windows:
     dependency: transitive
     description:
       name: shared_preferences_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.1.0"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -461,7 +510,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.2"
   stack_trace:
     dependency: transitive
     description:
@@ -496,7 +545,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.2"
+    version: "0.4.9"
   typed_data:
     dependency: transitive
     description:
@@ -510,98 +559,112 @@ packages:
       name: url_launcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.12"
+    version: "6.0.20"
+  url_launcher_android:
+    dependency: transitive
+    description:
+      name: url_launcher_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.15"
+  url_launcher_ios:
+    dependency: transitive
+    description:
+      name: url_launcher_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.15"
   url_launcher_linux:
     dependency: transitive
     description:
       name: url_launcher_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "3.0.0"
   url_launcher_macos:
     dependency: transitive
     description:
       name: url_launcher_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "3.0.0"
   url_launcher_platform_interface:
     dependency: transitive
     description:
       name: url_launcher_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.4"
+    version: "2.0.5"
   url_launcher_web:
     dependency: transitive
     description:
       name: url_launcher_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.4"
+    version: "2.0.8"
   url_launcher_windows:
     dependency: transitive
     description:
       name: url_launcher_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "3.0.0"
   uuid:
     dependency: "direct main"
     description:
       name: uuid
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.4"
+    version: "3.0.6"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.2"
   webview_flutter:
     dependency: "direct main"
     description:
       name: webview_flutter
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.1"
+    version: "2.8.0"
   webview_flutter_android:
     dependency: transitive
     description:
       name: webview_flutter_android
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.15"
+    version: "2.8.3"
   webview_flutter_platform_interface:
     dependency: transitive
     description:
       name: webview_flutter_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.0"
+    version: "1.8.1"
   webview_flutter_wkwebview:
     dependency: transitive
     description:
       name: webview_flutter_wkwebview
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.14"
+    version: "2.7.1"
   win32:
     dependency: transitive
     description:
       name: win32
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.2.9"
+    version: "2.4.1"
   xdg_directories:
     dependency: transitive
     description:
       name: xdg_directories
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.0"
+    version: "0.2.0+1"
 sdks:
-  dart: ">=2.14.0 <3.0.0"
-  flutter: ">=2.5.0"
+  dart: ">=2.17.0-0 <3.0.0"
+  flutter: ">=2.10.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index 2ee00dab..4bc69d2d 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -2,7 +2,7 @@ name: beatscratch_flutter_redux
 description: BeatScratch for Flutter
 publish_to: none
 
-version: 1.5.2+414
+version: 1.7.0+470
 
 environment:
   sdk: ">=2.6.0 <3.0.0"
@@ -17,7 +17,8 @@ dependencies:
   recase: ^3.0.0
   # vibration: ^1.7.2
   share: ^0.6.5+4
-  flutter_reorderable_list: ^1.1.0
+  flutter_reorderable_list: # ^1.1.0
+    path: ../flutter_reorderable_list
   url_launcher: ^6.0.3
   implicitly_animated_reorderable_list: ^0.4.1
   flutter_keyboard_visibility: ^2.0.0
@@ -44,6 +45,8 @@ dependencies:
   flutter_midi_command: #^0.3.0
    path: ../FlutterMidiCommand
   dcache: ^0.4.0
+  provider: ^6.0.2
+  matrix4_transform: ^2.0.1
 
 dev_dependencies:
   flutter_test:
diff --git a/web/index.html b/web/index.html
index cf7f7b4f..307ad591 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html style="height:100%">
 <head>
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
@@ -54,7 +54,7 @@
   <title>BeatScratch Web Preview</title>
   <link rel="manifest" href="manifest.json">
 </head>
-<body>
+<body style="height:100%; background-image: url('../assets/logo.svg'), linear-gradient(#884DF2, #424242); background-repeat: no-repeat;  background-attachment: fixed; background-position: center;">
 
 <script type="text/javascript">
 window.onload = function () {