diff --git a/ui (gen4)/css/widget/drawer.css b/ui (gen4)/css/widget/drawer.css
index 729388e9..1c74c4c1 100755
--- a/ui (gen4)/css/widget/drawer.css	
+++ b/ui (gen4)/css/widget/drawer.css	
@@ -34,6 +34,10 @@
 
 	box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em;
 }
+.drawer-widget.top .content {
+	top: auto;
+	margin-bottom: 100%;
+}
 .drawer-widget~.drawer-widget .content {
 	box-shadow: rgba(0, 0, 0, 0.05) 0.1em 0.1em 3em;
 }
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index 98ac87b0..0f0be90d 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -386,6 +386,28 @@ module.makeUIDialog = function(a, b){
 }
 
 
+var makeDrawer = function(direction){
+	return makeUIContainer(function(dialog, options){
+		var parent = (options || {}).parentElement 
+		parent = parent ? $(parent) : this.ribbons.viewer 
+
+		options.direction = direction || 'bottom'
+
+		var d = drawer.Drawer(
+				parent,
+				dialog, 
+				options)
+		// we need to clear other ui elements, like the status bar...
+		// XXX is this the right way to go???
+		d.dom.css({
+			'z-index': 5000,
+		})
+
+		return d
+	})
+}
+
+
 
 //---------------------------------------------------------------------
 
@@ -432,34 +454,14 @@ var DialogsActions = actions.Actions({
 		})],
 	// XXX should this be renamed to BottomDrawer???
 	Drawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
-			var parent = (options || {}).parentElement 
-			parent = parent ? $(parent) : this.ribbons.viewer 
-
-			var d = drawer.Drawer(
-					parent,
-					dialog, 
-					options)
-			// we need to clear other ui elements, like the status bar...
-			// XXX is this the right way to go???
-			d.dom.css({
-				'z-index': 5000,
-			})
-
-			return d
-		})],
+		makeDrawer('bottom')],
 	
 	// XXX not implemented yet...
 	TopDrawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
-			// XXX
-			console.error('Not yet implemented.')
-		})],
+		makeDrawer('top')],
 	BottomDrawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
-			// XXX
-			console.error('Not yet implemented.')
-		})],
+		makeDrawer('bottom')],
+
 	RightDrawer: ['- Interface/',
 		makeUIContainer(function(dialog, options){
 			// XXX
diff --git a/ui (gen4)/lib/widget/drawer.js b/ui (gen4)/lib/widget/drawer.js
index 7b8584bb..90bfe2fc 100755
--- a/ui (gen4)/lib/widget/drawer.js	
+++ b/ui (gen4)/lib/widget/drawer.js	
@@ -19,7 +19,7 @@ var DrawerClassPrototype = {
 	make: function(obj, client, options){
 		var that = this
 		var overlay = $('<div>')
-			.addClass('drawer-widget')
+			.addClass('drawer-widget ' + (options.direction || 'bottom'))
 			.append($('<div>')
 				.addClass('content')
 				.click(function(){
@@ -60,6 +60,8 @@ var DrawerPrototype = {
 		],
 
 		background: null,
+
+		direction: 'bottom',
 	},
 
 	keyboard: {
@@ -115,30 +117,68 @@ var DrawerPrototype = {
 			.click(function(){
 				that.close()
 			})
-			.css({opacity: 0})
+			.css({ opacity: 0 })
+			.scrollTop(options.direction == 'bottom' ?  0
+				: options.direction == 'top' ?
+					dom.find('.content')[0].scrollHeight
+				: 0)
 			.animate({
-					scrollTop: Math.min(
-						client_dom.outerHeight(), 
-						// do not scroll more than the container height and
-						// keep a bit on top...
-						(parent.is('body') ? $(document) : parent)
-							.outerHeight()-options['fade-at'])+'px',
+					scrollTop: 
+						(options.direction == 'bottom' ?
+							Math.min(
+								client_dom.outerHeight(), 
+								// do not scroll more than the container height and
+								// keep a bit on top...
+								(parent.is('body') ? $(document) : parent)
+									.outerHeight()-options['fade-at']) + 'px'
+						// XXX this is wrong!
+						: options.direction == 'top' ?
+							(dom.find('.content')[0].scrollHeight
+							 	- dom.outerHeight()
+								+ options['fade-at']) + 'px'
+						: 0),
 					opacity: 1,
 				}, 
 				options['animate'],
 				function(){
 					dom.scroll(function(){
 						var st = $(this).scrollTop()
-						var h = Math.min(options['fade-at'], client_dom.outerHeight())
-						// start fading...
-						if(st < h){
-							dom.css({ opacity: Math.min(1, st/h) })
-						} else if(dom.css('opacity') < 1){
-							dom.css('opacity', 1)
-						}
-						// close drawer when scrolling to the top...
-						if(st < options['close-at']){
-							that.close()
+
+						// bottom drawer...
+						if(options.direction == 'bottom'){
+							var h = Math.min(options['fade-at'], client_dom.outerHeight())
+
+							// start fading...
+							if(st < h){
+								dom.css({ opacity: Math.min(1, st/h) })
+
+							} else if(dom.css('opacity') < 1){
+								dom.css('opacity', 1)
+							}
+
+							// close drawer when scrolling to the top...
+							if(st < options['close-at']){
+								that.close()
+							}
+
+						// top drawer...
+						} else if(options.direction == 'top'){
+							var h = dom.find('.content')[0].scrollHeight
+
+							// start fading...
+							// XXX not working yet...
+							if(st < h - options['fade-at']){
+								dom.css({ opacity: Math.min(1, st/h) })
+
+							} else if(dom.css('opacity') < 1){
+								dom.css('opacity', 1)
+							}
+
+							// close...
+							if(st > h - options['close-at']){
+								// XXX adapt close...
+								that.close()
+							}
 						}
 					})
 				})