diff --git a/ui/TODO.otl b/ui/TODO.otl
index 26cd4db1..91569664 100755
--- a/ui/TODO.otl
+++ b/ui/TODO.otl
@@ -105,6 +105,32 @@ Roadmap
 		| 	jumping to end from start of ribbon
 		[_] usable empty view -- w.o. data...
 		[_] single image mode transition (alpha-blend/fade/none)
+		[_] make the marks in single image mode show in corner of viewer, not image
+		| and think of a uniform indicator position...
+		|
+		| 	+---------------------------+
+		| 	|					   oooo	| <-- global indicators
+		| 	|							|		(all modes)
+		| 	|							|
+		| 	|							|
+		| 	|							|
+		| 	|							|
+		| 	|							|
+		| 	|							|
+		| 	|							|
+		| 	|					   oooo	| <-- context indicators
+		| 	+---------------------------+		(single image mode)
+		|
+		| make global indicators semi-transparent in single-image-mode, so as to 
+		| indicate their lesser priority than context/image indicators...
+		|
+		| keep image indicators within the image square for ribbon mode...
+		|
+		| possible indicator styles:
+		| 	- letter, expand on hover
+		| 	- colored circle -- show text of same color under or to the side on hover
+		|
+		| might bee nice too use both styles, one for images one for global...
 		[_] 0% Tablet UI
 			[_] screen buttons
 		[_] ASAP: test on Android...
diff --git a/ui/base.js b/ui/base.js
index 26cf2c66..9a3a76eb 100755
--- a/ui/base.js
+++ b/ui/base.js
@@ -413,6 +413,37 @@ function getStatus(){
 }
 
 
+function makeIndicator(text){
+	return $('<span class="expanding-text">'+
+				'<span class="hidden">'+ text +'</span>'+
+				'<span class="shown">'+ text[0] +'</span>'+
+			'</span>')
+}
+
+function showGlobalIndicator(cls, text){
+	var c = $('.global-mode-indicators')
+	if(c.length == 0){
+		c = $('<div>')
+			.addClass('global-mode-indicators')
+			.appendTo($('.viewer'))
+	}
+	return makeIndicator(text)
+			.addClass(cls)
+			.appendTo(c)
+}
+function showContextIndicator(cls, text){
+	var c = $('.context-mode-indicators')
+	if(c.length == 0){
+		c = $('<div>')
+			.addClass('context-mode-indicators')
+			.appendTo($('.viewer'))
+	}
+	return makeIndicator(text)
+			.addClass(cls)
+			.appendTo(c)
+}
+
+
 
 /**********************************************************************
 * Constructors
diff --git a/ui/index.html b/ui/index.html
index adab0c1c..f33e57ff 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -41,6 +41,8 @@ $(function(){
 	toggleTheme('gray')
 	toggleImageInfo('on')
 
+	setupIndicators()
+
 	autoHideCursor($('.viewer'))
 
 	// NOTE: this is global so as to not to add any extra complexity to 
@@ -188,6 +190,7 @@ Populated
 	<div class="down-indicator"></div>
 	<div class="start-indicator"></div>
 	<div class="end-indicator"></div>
+
 	<div class="overlay-block">
 		<div class="background"></div>
 		<div class="content"></div>
diff --git a/ui/layout.css b/ui/layout.css
index 8b33b285..dcb68c26 100755
--- a/ui/layout.css
+++ b/ui/layout.css
@@ -183,6 +183,11 @@ body {
 	left: 5px;
 }
 
+/* XXX make the marks position relative to viewer or gidden compleatly */
+.marks-visible.single-image-mode.viewer .marked.image:after {
+	display: none;
+}
+
 /* corner mark... (a-la bookmarks in PortableMag) */
 /*
 .marks-visible.viewer .marked.image:after {
@@ -221,6 +226,8 @@ body {
 */
 
 
+/*.marks-visible.viewer:not(.single-image-mode):after {*/
+/*
 .marks-visible.viewer:after {
 	display: block;
 	position: absolute;
@@ -253,6 +260,7 @@ body {
 .marked-only-view.marks-visible.viewer:after {
 	background: blue;
 }
+*/
 
 /* XXX should we use opacity??? */
 .marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
@@ -445,6 +453,107 @@ body {
 }
 
 
+/* these are generic containers for indicators */
+.global-mode-indicators {
+	position: absolute;
+	top: 15px;
+	right: 15px;
+	height: 20px;
+	width: auto;
+
+	font-size: small;
+}
+.global-mode-indicators>* {
+	margin-left: 10px;
+}
+.global-mode-indicators .circle {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+}
+/* hide indicators in single image mode */
+.single-image-mode.viewer .global-mode-indicators {
+	opacity: 0.5;
+}
+.light.single-image-mode.viewer .global-mode-indicators {
+	opacity: 0.1;
+}
+.dark.single-image-mode.viewer .global-mode-indicators {
+	opacity: 0.6;
+}
+.single-image-mode.viewer .global-mode-indicators:hover {
+	opacity: 1;
+}
+
+/* context indicators */
+.context-mode-indicators {
+	position: absolute;
+	right: 15px;
+	bottom: 15px;
+	height: 20px;
+	width: auto;
+
+	font-size: small;
+}
+.context-mode-indicators>* {
+	margin-left: 10px;
+}
+.context-mode-indicators .circle {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+}
+
+
+/* actual indicators */
+/* marks... */
+.global-mode-indicators .marked-only-visible,
+.global-mode-indicators .marks-visible,
+.context-mode-indicators .current-image-marked {
+	display: none;
+	color: blue;
+}
+.global-mode-indicators .marked-only-visible .shown,
+.global-mode-indicators .marks-visible .shown,
+.context-mode-indicators .current-image-marked .shown {
+	display: none;
+}
+.global-mode-indicators .marked-only-visible:after,
+.global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-marked:after {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	content: "";
+	background-color: blue;
+	border: solid 2px blue;
+	margin-left: 5px;
+}
+.marks-visible.viewer .global-mode-indicators .marks-visible {
+	display: inline-block;
+}
+.marked-only-view.viewer .global-mode-indicators .marks-visible {
+	display: none;
+}
+.marked-only-view.viewer .global-mode-indicators .marked-only-visible {
+	display: inline-block;
+}
+.marked-only-view.viewer:not(.marks-visible) .global-mode-indicators .marked-only-visible:after {
+	background-color: transparent;
+}
+/* image mark in single image mode... */
+.context-mode-indicators .current-image-marked {
+	display: none;
+	color: blue;
+}
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
+	display: inline-block;
+}
+
+
 
 /********************************************** Mode: single image ***/
 .single-image-mode.viewer .image {
diff --git a/ui/setup.js b/ui/setup.js
index da9a5f3b..aeb39282 100755
--- a/ui/setup.js
+++ b/ui/setup.js
@@ -8,6 +8,26 @@
 * Setup
 */
 
+function setupIndicators(){
+	showGlobalIndicator(
+			'marks-visible', 
+			'Marks visible (F2)')
+		.css('cursor', 'hand')
+		.click(function(){ toggleMarkesView() })
+	showGlobalIndicator(
+			'marked-only-visible', 
+			'Marked only images visible (alt-F2)')
+		.css('cursor', 'hand')
+		.click(function(){ toggleMarkedOnlyView() })
+
+	showContextIndicator(
+			'current-image-marked', 
+			'Image is marked (Ins/M)')
+		.css('cursor', 'hand')
+		.click(function(){ toggleImageMark() })
+}
+
+
 // Setup event handlers for data bindings...
 //
 // This does two jobs:
@@ -245,6 +265,18 @@ function setupDataBindings(viewer){
 			function(){
 				updateGlobalImageInfo()
 			})
+
+		// mark indicator...
+		// XXX make this generic and handle any of the available marks...
+		.on('focusingImage togglingMark', function(evt, image){
+			image = image.length == 0 ? getImage() : image
+			var indicator = $('.context-mode-indicators .current-image-marked')
+			if(image.hasClass('marked')){
+				indicator.addClass('shown')
+			} else {
+				indicator.removeClass('shown')
+			}
+		})
 }