diff --git a/src/api/index.py b/src/api/index.py
index 7d4ed79..6aea82e 100755
--- a/src/api/index.py
+++ b/src/api/index.py
@@ -72,77 +72,22 @@ def init(product):
 	for id in sub :
 		if sub[id]['active'] is True :
 			features[id] = sub[id]
+	session['active-plans'] = [item['plan_id'] for item in features]
 	user.refresh(uid)
 	session['key'] = user.user_key	
 	session['uid'] = uid
 	return json.dumps(features),200
 	
-# @app.route("/init/<app_name>",methods=['POST'])
-# def init(app_name):
-# 	plans = []
-# 	handler = None
-# 	uid = request.headers['uid']
-# 	plan = request.headers['pid']
-# 	auid = None
-# 	if 'uid' in request.headers and 'auid' not in request.headers:
-# 		id = uid
-# 		#couchdb = Couchdb(uri=CONFIG['couchdb']['uri'],dbname=app_name,uid=uid,create=False)
-# 		#DB = couchdb.dbase
-# 	if 'auid' in request.headers :
-# 		auid = request.headers['auid']
-# 		auid = json.loads(auid)if auid.startswith('[') else auid 
-# 		if isinstance(auid,list) :
-# 			auid = list(set(auid) - set([uid]))
 
-# 			if len(auid) == 0:
-# 				auid = None
-# 				id = uid
-# 			else:
-# 				auid = auid[0]
-# 				id = auid
-# 	couchdb = Couchdb(uri=CONFIG['couchdb']['uri'],dbname=app_name,uid=id,create=False)
-# 	DB = couchdb.dbase
-# 		#handler.update_user(id=handler.getId(auid),uid=uid)
-	
-# 	handler = Domain.User(DB,stripe) ;
-# 	if auid is None :
-# 		handler.init(uid,plan) ;
-# 	else:
-# 		if couchdb.isready() == False:
-# 			handler.init(auid,plan)
-# 			id = handler.getId(uid) 
-
-# 		handler.initialize(auid)
-# 		id = handler.getId(auid)
-# 		handler.update_user(id=id,uid=uid) ;
-	
-# 	plans = handler.plans()
-# 	#return json.dumps(plans)
-# 	_features = features(app_name)
-# 	return _features
-"""
-	This function will update the user's email
-"""
-# @app.route('/init/<app_name>',methods=['PUT'])	
-# def init_update(app_name):
-# 	uid	= request.headers['uid']
-# 	id 	= session['customer.id']
-# 	couchdb = Couchdb(uri=CONFIG['couchdb']['uri'],dbname=app_name,uid=None)
-# 	DB	= couchdb.dbase
-# 	handler = Domain.User(DB,stripe)
-# 	handler.update_user(uid=uid,id=id)
-	
-# 	return ('',204)
-	
-
-"""
-	This function subscribes a user to a given service for an application
-	This function guarantees not to duplicate subscriptions
-	@resource 	name	name of the application {cloud-music}
-	@header		key	service/plan
-"""
 @app.route('/subscribe/<product>',methods=['POST'])
 def subscribe(product):
+	"""
+		This function subscribes a user to a given service for an application
+		This function guarantees not to duplicate subscriptions
+		@resource 	name	name of the application {cloud-music}
+		@header		key	service/plan
+	"""
+
 	#
 	# The name is the full name of the service
 	#
@@ -174,7 +119,8 @@ def subscribe(product):
 	#session['plans'] = plans
 	session['key'] = user.user_key	
 	session['uid'] = uid
-
+	session['active-plans']  = [item['id'] for item in plans]
+	print session['active-plans']
 	return (json.dumps(plans),200)
 	
 def get_plans(product) :
@@ -264,11 +210,21 @@ def signup(product) :
 	#
 	# @TODO: Mark the plans the current user is signed up for
 	#
+	if 'themes' in CONFIG:
+		theme = CONFIG['themes'][product] if product in CONFIG['themes'] else CONFIG['theme']['default']
+	else:
+		theme = ''
 	platform='web' if 'platform' not in request.args else request.args['platform']
 	alias = plans[0]['product_alias']
-	active_plan = session['plans']  if 'plans' in session else []
-	print [' ** ',uid,active_plan]
-	return render_template('subscribe.html',context=CONTEXT,uid=uid,alias=alias,platform=platform,app_name=product,plans=plans,apikey=apikey)
+	if 'user-plan' in session :
+		user_plans = [item['id'] for item in session['user-plan']]
+	else :
+		user_plans = []
+	# active_plan = session['active-plans']  if 'active-plans' in session else []	
+	args = {"context":CONTEXT,"theme":theme,"uid":uid,"alias":alias,"platform":platform,"app_name":product,"apikey":apikey,"plans":plans}
+	args['active_plans'] = user_plans
+
+	return render_template('subscribe.html',**args) #context=CONTEXT,uid=uid,alias=alias,platform=platform,app_name=product,plans=plans,apikey=apikey)
 	
 @app.route('/subscribe/<name>',methods=['DELETE'])
 def cancel_subscribe(name) :
diff --git a/src/api/templates/subscribe.html b/src/api/templates/subscribe.html
index b69b217..7a877c4 100755
--- a/src/api/templates/subscribe.html
+++ b/src/api/templates/subscribe.html
@@ -8,19 +8,73 @@
 <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
 -->
+<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
 <script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
 <script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
 
 <title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title>
 <style>
+	.theme-raspberry{
+		background: #00B4DB;  /* fallback for old browsers */
+		background: -webkit-linear-gradient(to bottom, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
+		background: linear-gradient(to bottom, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+		color:#ffffff;
+		font-family:verdana;
+		font-weight:lighter;
+		text-transform:capitalize;
+
+	}
+	.theme-dark-ocean {
+		background: #373B44;  /* fallback for old browsers */
+		background: -webkit-linear-gradient(to bottom, #4286f4, #373B44);  /* Chrome 10-25, Safari 5.1-6 */
+		background: linear-gradient(to bottom, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+		color:#f3f3f3;
+	}
+	.theme-gray {
+		background: #bdc3c7;  /* fallback for old browsers */
+		background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
+		background: linear-gradient(to bottom, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+		color:#f3f3f3f3;
+	}
+	.theme-clouds {
+		background: #ECE9E6;  /* fallback for old browsers */
+		background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);  /* Chrome 10-25, Safari 5.1-6 */
+		background: linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+	}
+	
 	img {width:48px}
 	body{ 
 			font-family:sans-serif;
 			font-size:14px;
 			font-weight:lighter;
+			width:80%;
+			margin-left:10%;
+	}
+	.button {
+		padding:4px;
+		border-radius:8px;
+		border:1px solid #d3d3d3;
+		
+	}
+	.active {
+		font-weight:bold;
+		font-family:verdana;
+		cursor:pointer ;
+		border-bottom:2px solid bottom;
+		padding:4px;
+	}
+	.active:hover { border-bottom:2px solid #4682B4}
+	.current-plan {
+		
+		border-color: #20B2AA #20B2AA transparent transparent;
+		border-style: solid;
+		border-width: 15px 15px 15px 15px;
+		height: 0px;
+		width: 0px;
+		
 	}
-	
 	.bold { font-weight:bold}
 	.caption {
 		font-size:28px; font-weight:lighter ;
@@ -43,7 +97,11 @@
 		display:grid;
 		grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
 	}
-	.plan .title { font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
+	.plan .title { 
+		display:grid;
+		grid-template-columns: auto 32px; 
+		grid-gap:2px;
+		font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
 	.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
 	.plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
 	.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
@@ -95,17 +153,15 @@
 		.medium-caption {font-size:14px}
 		body {font-size:12px;}
 		.height-48{height:40px}
-	.width-50{width:47%; padding:4px;}
-	.width-25{width:24%; padding:4px}
-	.pricing {
-		display:block;
-	}
-	.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
-	.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
-	.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
-	.plan .feature .status {font-size:16px; text-align: right;  font-size:14px;}
-	.header{display:none}
-	.caption {font-size:20px}
+		.width-50{width:47%; padding:4px;}
+		.width-25{width:24%; padding:4px}
+		.pricing {display:block;}	
+		.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
+		.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
+		.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
+		.plan .feature .status {font-size:16px; text-align: right;  font-size:14px;}
+		.header{display:none}
+		.caption {font-size:20px}
 
 	}	
 	@media only screen and (min-device-width: 768px){
@@ -118,22 +174,21 @@
 			grid-gap:2px;
 		}
 		.header .logo img {width:32px}
-		.header {display:block;
-		}
+		.header {display:block;}
 
 		table {width:70%; margin-left:20%}
 		.medium-caption {font-size:18px}
-	.width-50{width:50%; padding:4px;}
-	.width-25{width:25%; padding:4px}
-	.height-48{height:48px;}
-	.pricing {
-		display:grid;
-		grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
-	}
-	.plan .title { font-size:20px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
-	.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
-	.plan .feature .label {text-transform: uppercase; grid-column:1}
-	.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
+		.width-50{width:50%; padding:4px;}
+		.width-25{width:25%; padding:4px}
+		.height-48{height:48px;}
+		.pricing {
+			display:grid;
+			grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
+		}
+		.plan .title { padding:4px; font-size:22px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
+		.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px; padding:4px;}
+		.plan .feature .label {text-transform: uppercase; grid-column:1}
+		.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
 
 	}	
 	
@@ -142,6 +197,7 @@
 	
 </script>
 <body >
+	
 <div class="header">
 	<div class="logo">
 		<div>
@@ -165,54 +221,81 @@
 <div >
 	<div class="pricing">		
 		{% for item in plans%}
-			<div class="plan">
-				<div class="title">{{ item.nickname }}</div>
-				<br>
-				{% for key,value in item.metadata['features'].iteritems() %}
-					<div class="feature">
-						<div class="label">{{ key }}</div>
-						{% if value == True %}
-							<div class="status"><i class="fa fa-check"></i></div>
-						{% elif value == False %}
-							<div class="status"><i class="fa fa-times"></i></div>
-						{%else %}
-							<div class="status">{{value}}</div>
-						{% endif %}
-					</div>
-					
-				{% endfor %}
-				{% if item.amount > 0 and platform != 'mobile' %}
-				<div align="right">
+			<div class="plan {{theme}}">
+				<div class="title">
+					<div>{{ item.nickname }}</div>
+					{% if item.id in active_plans %}
+						<div class="current-plan"></div>
+					{% else %}
+						<div></div>
+					{% endif %}
 					
-						<form action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
-							<script
-							src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
-							data-key="{{apikey|safe}}"
-							data-email="{{uid|safe}}"
-							data-amount={{item.amount|safe}}
-							data-name="{{item.nickname}}"
-							data-description="{{alias }}"
-							
-							data-label="Signup $ {{item.amount/100 }} / {{item.interval[:2]}}"
-							data-image="https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png"
+				</div>
+				<div class="">
+					{% for key,value in item.metadata['features'].iteritems() %}
+						<div class="feature">
+							<div class="label">{{ key }}</div>
+							{% if value == True %}
+								<div class="status"><i class="fa fa-check"></i></div>
+							{% elif value == False %}
+								<div class="status"><i class="fa fa-times"></i></div>
+							{%else %}
+								<div class="status">{{value}}</div>
+							{% endif %}
+						</div>
+						
+					{% endfor %}
+				</div>
+				{% if platform != 'mobile'  and item.amount > 0 and item.name not in active_plans %}
+				<div align="right" class="border-top">
+					<br>
+					{% if active_plans|length > 0 %}
+					<div id="upgrade_{{item.id}}" align="right" onclick="jx.dom.show('{{item.id}}'); jx.dom.hide('upgrade_{{item.id}}')">
+
+						<span class="active">Upgrade</span>
+					</div>
+					{% endif %}
+					<form id="{{item.id}}" style="display:none" action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
+						<script
+						src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
+						data-key="{{apikey|safe}}"
+						data-email="{{uid|safe}}"
+						data-amount={{item.amount|safe}}
+						data-name="{{item.nickname}}"
+						data-description="{{alias }}"
+						
+						data-label="Signup $ {{item.amount/100 }} / {{item.interval[:2]}}"
+						data-image="https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png"
 
-							data-locale="auto">
+						data-locale="auto">
 
-							</script>
-							<input type="hidden" name="amount" value="{{item.amount|safe}}"/>
-							<input type="hidden" name="plan" value="{{item.id|safe}}"/>
-						</form>
+						</script>
+						<input type="hidden" name="amount" value="{{item.amount|safe}}"/>
+						<input type="hidden" name="plan" value="{{item.id|safe}}"/>
+					</form>
 					</div>		
-				{% elif item.amount == 0 and platform != 'mobile' %}										
-					<br><div align="right" style="background:#f3f3f3;  color:#4682B4; font-weight:bold; ">
+				{% elif item.amount == 0 and platform != 'mobile' and item.id not in active_plans %}										
+					<div align="right"  class="border-top" style="DISPLAY:none;background:#f3f3f3;  color:#4682B4; font-weight:bold; ">
+						<br>
 						<div style="float:right;margin-right:4px;">
 								<div align="center">This Plan is Plan</div>
-								<div class="small" align="center">Login to Start</div>
+								<div class="small" align="center">Free/Signup</div>
 		
 						</div>
 					</div>
+					<div align="right" class="border-top">
+							<br><button type="submit" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">Signup Free/ mo</span></button>
+					</div>
+					
+				{% elif item.amount == 0 and platform != 'mobile' %}
+					<div align="right" class="border-top">
+							<br><div style="" class="">
+								<span style="font-weight:bold; font-size:14px; color:#4682B4 ;  display: block; min-height: 30px;">
+								<i class="fa fa-check"></i>
+								Current Plan</span></div>
+					</div>
 				{% endif%}
-
+					
 			</div>
 		{% endfor %}