diff --git a/ui/keybindings.js b/ui/keybindings.js
index 3efc9c70..3bf33729 100755
--- a/ui/keybindings.js
+++ b/ui/keybindings.js
@@ -50,21 +50,18 @@ var KEYBOARD_CONFIG = {
 	//
 	// NOTE: need to keep all info modes before the rest so as to give 
 	// 		their bindings priority...
-	'.help-mode': {
-		title: 'Help',
-		doc: 'To enter this mode press <b>H</b> or <b>?</b>.'+
-
-			'<p>NOTE: In this mode all other key bindings are disabled, '+
+	'.drawer-mode': {
+		title: 'Drawer modes',
+		doc: 'NOTE: In this mode all other key bindings are disabled, '+
 			'except the ones explicitly defined here.',
 
 		ignore: '*',
 
-		Esc: doc('Close help',
+		Esc: doc('Close drawer',
 			function(){ 
 				toggleKeyboardHelp('off') 
 				return false
 			}),
-		H: 'Esc',
 		Q: 'Esc',
 		'?': 'Esc',
 	},
@@ -438,8 +435,13 @@ var KEYBOARD_CONFIG = {
 
 		'?': doc('Show keyboard bindings',
 			function(){ toggleKeyboardHelp() }),
-		H: '?',
 
+		F1: doc('Show help',
+			function(){ toggleHelp() }),
+		H: 'F1',
+
+		P: doc('Show options',
+			function(){ toggleOptionsUI() }),
 
 		/* testing the shift-key feature...
 		'~': {
diff --git a/ui/layout.css b/ui/layout.css
index da6163b0..8b33b285 100755
--- a/ui/layout.css
+++ b/ui/layout.css
@@ -511,7 +511,7 @@ body {
 
 /************************************************************ Help ***/
 /* this is for sliding stuff */
-.viewer.help-mode {
+.viewer.drawer-mode {
 	box-shadow: 0px 0px 50px 0px silver;
 }
 
diff --git a/ui/modes.js b/ui/modes.js
index 4714953a..73f7dd2d 100755
--- a/ui/modes.js
+++ b/ui/modes.js
@@ -7,7 +7,106 @@
 //var DEBUG = DEBUG != null ? DEBUG : true
 
 
-/*********************************************************************/
+
+
+/**********************************************************************
+* Utils...
+*/
+
+// NOTE: this expects a certain structure, this it is not generic...
+function makeDrawerToggler(contentRenderer, root, element_class, mode_class){
+	var toggler = createCSSClassToggler(root, mode_class + ' drawer-mode overlay',
+			function(action){
+				// XXX
+				var body = $(document.body)
+				var win = $(window)
+
+				// on...
+				if(action == 'on'){
+					// remove helo when we scroll to the top...
+					var scroll_handler = function(){
+						if(body.scrollTop() <= 0){
+							toggler('off')
+						}
+					}
+
+					// prepare and cleanup...
+					$(element_class).remove()
+					$(root).addClass('overlay')
+
+					// build the help...
+					var doc = contentRenderer()
+						.addClass(element_class.replace('.', ' '))
+						.on('click', function(){
+							event.stopImmediatePropagation()
+							return false
+						})
+						.css({
+							cursor: 'auto',
+						})
+						// XXX depends on body...
+						.appendTo(body)
+
+					// add exit by click...
+					// XXX depends on body...
+					body
+						.one('click', function(){
+							toggler('off')
+						})
+						.css({
+							cursor: 'hand',
+						})
+
+					// scroll to the help...
+					// NOTE: need to set the scroll handler AFTER we 
+					// 		scroll down, or it will be more of a 
+					// 		tease than a help...
+					var t = getRelativeVisualPosition($(root), doc).top
+					body
+						.animate({
+							scrollTop: Math.abs(t) - 40,
+						}, function(){
+							// XXX depends on window...
+							win
+								.on('scroll', scroll_handler)
+						})
+
+				// off...
+				} else {
+					// things to cleanup...
+					var _cleanup = function(){
+						$(element_class).remove()
+						$(root).removeClass('overlay')
+						// XXX depends on body...
+						body.click()
+						win.off('scroll', scroll_handler)
+					}
+
+					// animate things if we are not at the top...
+					if(body.scrollTop() > 0){
+							// XXX depends on body...
+							body
+								.css({
+									cursor: '',
+								})
+								.animate({
+									scrollTop: 0,
+								}, _cleanup) 
+
+					// if we are at the top do things fast...
+					} else {
+						_cleanup()
+					}
+				}
+			})
+	return toggler
+}
+
+
+
+/**********************************************************************
+* Modes
+*/
 
 // XXX make this save and restore settings...
 var toggleSingleImageMode = createCSSClassToggler('.viewer', 
@@ -201,6 +300,8 @@ function toggleImageProportions(mode){
 }
 
 
+/*
+// XXX make this generic, so as to add other UI renderers...
 var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
 		function(action){
 			var body = $(document.body)
@@ -278,6 +379,35 @@ var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
 				}
 			}
 		})
+*/
+
+
+
+var toggleHelp = makeDrawerToggler(
+		function(){
+			return $('<h1>Help</h1>')
+		}, 
+		'.viewer', 
+		'.general-help', 
+		'general-help-mode')
+
+
+var toggleKeyboardHelp = makeDrawerToggler(
+		function(){
+			return buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
+		}, 
+		'.viewer', 
+		'.keyboard-help', 
+		'keyboard-help-mode')
+
+
+var toggleOptionsUI = makeDrawerToggler(
+		function(){
+			return $('<h1>Options</h1>')
+		}, 
+		'.viewer', 
+		'.options-ui', 
+		'options-mode')