diff --git a/ui (gen4)/css/widget/drawer.css b/ui (gen4)/css/widget/drawer.css
index 1c74c4c1..54106976 100755
--- a/ui (gen4)/css/widget/drawer.css	
+++ b/ui (gen4)/css/widget/drawer.css	
@@ -45,10 +45,6 @@
 /* NOTE: this does not include text... 
 		...need a way to go around this...
 */
-.blur>* {
-	-webkit-filter: blur(2px) saturate(0.3);
-	filter: blur(2px) saturate(0.3);
-}
 .blur>.drawer-widget {
 	-webkit-filter: none;
 	filter: none;
diff --git a/ui (gen4)/css/widget/overlay.css b/ui (gen4)/css/widget/overlay.css
index cbcc6a5c..b6db0e2b 100755
--- a/ui (gen4)/css/widget/overlay.css	
+++ b/ui (gen4)/css/widget/overlay.css	
@@ -70,15 +70,29 @@
 
 /* NOTE: this does not include text... 
 		...need a way to go around this...
+
 */
 .blur>* {
-	-webkit-filter: blur(2px) saturate(0.3);
-	filter: blur(2px) saturate(0.3);
+	/*-webkit-filter: blur(2px) saturate(0.3);
+	filter: blur(2px) saturate(0.3);*/
+	-webkit-filter: saturate(0.5) brightness(0.8);
+	filter: saturate(0.5) brightness(0.8);
 }
 .blur>.overlay-widget {
-	-webkit-filter: blur(0.8px) saturate(0.3);
-	filter: blur(0.8px) saturate(0.3);
+	/*-webkit-filter: blur(0.8px) saturate(0.3);
+	filter: blur(0.8px) saturate(0.3);*/
+	-webkit-filter: saturate(0.5) brightness(0.8);
+	filter: saturate(0.5) brightness(0.8);
 }
+.overlay-blur-enabled.blur>* {
+	-webkit-filter: blur(2px) saturate(0.5) brightness(0.8);
+	filter: blur(2px) saturate(0.5) brightness(0.8);
+}
+.overlay-blur-enabled.blur>.overlay-widget {
+	-webkit-filter: blur(0.8px) saturate(0.5) brightness(0.8);
+	filter: blur(0.8px) saturate(0.5) brightness(0.8);
+}
+
 .blur>.overlay-widget:last-child {
 	-webkit-filter: none;
 	filter: none;
diff --git a/ui (gen4)/features/core.js b/ui (gen4)/features/core.js
index a5e2ab67..ca8ac155 100755
--- a/ui (gen4)/features/core.js	
+++ b/ui (gen4)/features/core.js	
@@ -27,6 +27,8 @@ var toggler = require('lib/toggler')
 // For more docs see: docs for actions.js and .chainApply(..)
 //
 // XXX might be good to move this to actions.js
+// XXX might also be a good idea to mark the actual protocol definition
+// 		and not just the implementation...
 var protocol =
 module.protocol = function(protocol, func){
 	return function(){
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index 019430b6..70bc7076 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -8,6 +8,7 @@
 /*********************************************************************/
 
 var keyboard = require('lib/keyboard')
+var toggler = require('lib/toggler')
 var actions = require('lib/actions')
 var features = require('lib/features')
 
@@ -432,6 +433,8 @@ var makeDrawer = function(direction){
 var DialogsActions = actions.Actions({
 	config: {
 		'ui-default-container': 'Overlay',
+
+		'ui-overlay-blur': 'on',
 	},
 
 	// a bit of introspection...
@@ -563,6 +566,11 @@ var DialogsActions = actions.Actions({
 				make.done()
 			})
 		})],
+	toggleOverlayBlur: ['Interface/',
+		toggler.CSSClassToggler(
+			function(){ return this.ribbons.viewer }, 
+			'overlay-blur-enabled',
+			function(state){ this.config['ui-overlay-blur'] = state }) ],
 })
 
 var Dialogs = 
@@ -578,6 +586,11 @@ module.Dialogs = core.ImageGridFeatures.Feature({
 	actions: DialogsActions,
 
 	handlers: [
+		['start',
+			function(){
+				this.config['ui-overlay-blur']
+					&& this.toggleOverlayBlur(this.config['ui-overlay-blur'])
+			}],
 		['__call__', 
 			function(res, action){
 				if(res instanceof jQuery || (res instanceof widget.Widget)){
@@ -992,6 +1005,12 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
 
 var WidgetTestActions = actions.Actions({
 
+	testAction: ['- Test/',
+		function(){
+			console.log('>>>', [].slice.call(arguments))
+			return function(){
+				console.log('<<<', [].slice.call(arguments)) }}],
+
 	// Usage Examples:
 	// 	.testDrawer()						- show html in base drawer...
 	// 	.testDrawer('Header', 'paragraph')	- show html with custom text...