diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index d038eb36..de5da218 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -488,7 +488,12 @@ button:hover {
 }
 
 /* XXX not sure if this is the right way to go... */
-.slideshow-running .buttons {
+.single-image-mode .main-buttons,
+.single-image-mode .app-buttons {
+	opacity: 0.1;
+}
+.slideshow-running .main-buttons,
+.slideshow-running .app-buttons {
 	opacity: 0;
 }
 
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index 2f7e4c3f..39d5ce8c 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -1189,10 +1189,14 @@ module.Buttons = core.ImageGridFeatures.Feature({
 
 	handlers: [
 		['start.pre', 
+			function(){ 
+				this.toggleAppButtons('on')
+		   	}],
+		// NOTE: these need to be loaded AFTER the .config has been loaded...
+		['start', 
 			function(){ 
 				this.toggleMainButtons(this.config['main-buttons-state'] || 'on')
 				this.toggleSecondaryButtons(this.config['secondary-buttons-state'] || 'on')
-				this.toggleAppButtons('on')
 				this.toggleSideButtons(this.config['side-buttons-state'] || 'on')
 		   	}],
 		['load reload',