diff --git a/ui/base.js b/ui/base.js
index 247a5a47..718d8624 100755
--- a/ui/base.js
+++ b/ui/base.js
@@ -897,13 +897,14 @@ function flipHorizontal(image){
 
 function fitNImages(n){
 	var image = $('.current.image')
-	var size = image.outerHeight(true)
+	var w = image.outerWidth(true)
+	var h = image.outerHeight(true)
 
 	var viewer = $('.viewer')
 	var W = viewer.innerWidth()
 	var H = viewer.innerHeight()
 
-	var scale = Math.min(W / (size * n), H / size)
+	var scale = Math.min(W / (w * n), H / h)
 
 	// NOTE: if animating, the next two likes must be animated together...
 	setElementScale($('.ribbon-set'), scale)
@@ -916,14 +917,16 @@ function fitNImages(n){
 // NOTE: here we measure image height as width may change depending on 
 // 		proportions...
 function zoomIn(){
-	var w = getScreenWidthInImages(getVisibleImageSize('height'))
+	//var w = getScreenWidthInImages(getVisibleImageSize('height'))
+	var w = getScreenWidthInImages()
 	if(w > 1){
 		w = w / ZOOM_SCALE
 		fitNImages(w >= 1 ? w : 1)
 	}
 }
 function zoomOut(){
-	var w = getScreenWidthInImages(getVisibleImageSize('height'))
+	//var w = getScreenWidthInImages(getVisibleImageSize('height'))
+	var w = getScreenWidthInImages()
 	if(w <= MAX_SCREEN_IMAGES){
 		w = w * ZOOM_SCALE
 		fitNImages(w <= MAX_SCREEN_IMAGES ? w : MAX_SCREEN_IMAGES)
diff --git a/ui/data.js b/ui/data.js
index 65073a3d..69336f34 100755
--- a/ui/data.js
+++ b/ui/data.js
@@ -62,6 +62,10 @@ var MARKED = []
 var IMAGE_CACHE = []
 
 var SETTINGS = {
+	'theme': null,
+	'screen-images-ribbon-mode': null,
+	'screen-images-single-image-mode': null,
+	'single-image-mode-proportions': null,
 }
 
 
diff --git a/ui/index.html b/ui/index.html
index 810a541b..5e8b6144 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -202,33 +202,34 @@ body {
 .marks-visible.viewer:after {
 	display: block;
 	position: absolute;
-	content: "Marks visible";
-	font-size: 11pt;
-	border: none;
-	color: blue;
-	width: auto;
-	height: auto;
+	content: "";
+	font-size: 0pt;
 
 	top: 10px;
 	right: 10px;
+	width: 10px;
+	height: 10px;
 
+	border: solid 2px blue;
+	border-radius: 50%;
+	background: blue;
 }
 .marked-only-view.viewer:after {
 	display: block;
 	position: absolute;
-	content: "Showing marked images only";
-	font-size: 11pt;
-	border: none;
-	color: blue;
-	width: auto;
-	height: auto;
-
+	content: "";
+	font-size: 0pt;
 	top: 10px;
 	right: 10px;
+	width: 10px;
+	height: 10px;
 
+	border: solid 2px blue;
+	border-radius: 50%;
+	background: transparent;
 }
 .marked-only-view.marks-visible.viewer:after {
-	content: "Showing marked images only (marks visible)";
+	background: blue;
 }
 
 /* XXX should we use opacity??? */
diff --git a/ui/keybindings3.js b/ui/keybindings3.js
index 33881d3e..da733865 100755
--- a/ui/keybindings3.js
+++ b/ui/keybindings3.js
@@ -172,7 +172,7 @@ var KEYBOARD_CONFIG = {
 			},
 
 		L: doc('Rotate image left', function(){ rotateLeft() }),
-		R: doc('Rotate image left', function(){ rotateRight() }),
+		R: doc('Rotate image right', function(){ rotateRight() }),
 
 
 		// zooming...
@@ -265,9 +265,12 @@ var KEYBOARD_CONFIG = {
 						var gid = getImageGID($('.current.image'))
 						var r = getRibbonIndex(getRibbon())
 						var data = IMAGES[gid]
+						var orientation = data.orientation
+						orientation = orientation == null ? 0 : orientation
 						var order = DATA.order.indexOf(gid)
 						var name = data.path.split('/').pop()
 						alert('"'+ name +'"\n'+
+								'Orientation: '+ orientation +'deg\n'+
 								'GID: '+ gid +'\n'+
 								'Path: "'+ data.path +'"\n'+
 								'Order: '+ order +'\n'+
diff --git a/ui/modes.js b/ui/modes.js
index cfe7cd6c..4da5ccda 100755
--- a/ui/modes.js
+++ b/ui/modes.js
@@ -13,13 +13,39 @@
 var toggleSingleImageMode = createCSSClassToggler('.viewer', 
 		'single-image-mode',
 		function(action){
+			var w = getScreenWidthInImages()
+
+			// single image mode...
 			if(action == 'on'){
 				TRANSITION_MODE_DEFAULT = 'css'
-				fitNImages(1)
+
+				// save things...
+				SETTINGS['screen-images-ribbon-mode'] = w
+
+				// load things...
+				w = SETTINGS['screen-images-single-image-mode']
+				w = w == null ? 1 : w
+				var p = SETTINGS['single-image-mode-proportions']
+				p = p == null ? 'square' : p
+
+				// set stuff...
+				toggleImageProportions(p)
+				fitNImages(w)
+
+			// ribbon mode...
 			} else {
 				TRANSITION_MODE_DEFAULT = 'animate'
+
+				// save things...
+				SETTINGS['screen-images-single-image-mode'] = w
+				SETTINGS['single-image-mode-proportions'] = toggleImageProportions('?')
+
+				// load things...
+				w = SETTINGS['screen-images-ribbon-mode']
+				w = w == null ? DEFAULT_SCREEN_IMAGES : w
+
 				toggleImageProportions('square')
-				fitNImages(DEFAULT_SCREEN_IMAGES)
+				fitNImages(w)
 			}
 		})
 
@@ -128,6 +154,7 @@ var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
 
 			// off...
 			} else {
+				// things to cleanup...
 				var _cleanup = function(){
 					$('.keyboard-help').remove()
 					$('.viewer').removeClass('overlay')
@@ -135,11 +162,14 @@ var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
 					win.off('scroll', scroll_handler)
 				}
 
+				// animate things if we are not at the top...
 				if(body.scrollTop() > 0){
 						body
 							.animate({
 								scrollTop: 0,
 							}, _cleanup) 
+
+				// if we are at the top do things fast...
 				} else {
 					_cleanup()
 				}