diff --git a/src/api/static/css/borders.css b/src/api/static/css/borders.css
new file mode 100644
index 0000000..75a7962
--- /dev/null
+++ b/src/api/static/css/borders.css
@@ -0,0 +1,36 @@
+.border {
+    border:1px solid #CAD5E0 ;    
+}
+.border-round {
+    padding:6px;
+    border-radius:8px;
+}
+.border-round-top-left{
+    border-top-left-radius: 8px;    
+    padding:6px;
+}
+.border-round-top-right{
+    border-top-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-right{
+    border-bottom-right-radius: 8px;
+    padding:6px;
+}
+.border-round-bottom-left{
+    border-bottom-left-radius: 8px;
+    padding:6px;
+}
+
+
+.border-right{
+    border-right:1px solid #CAD5E0;
+}
+
+.border-left{
+    border-left:1px solid #CAD5E0;
+}
+
+
+.border-bottom { border-bottom:1px solid #CAD5E0}
+.border-top { border-top:1px solid #CAD5E0}
diff --git a/src/api/static/css/default.css b/src/api/static/css/default.css
index 0c65244..87b805b 100644
--- a/src/api/static/css/default.css
+++ b/src/api/static/css/default.css
@@ -1,227 +1,95 @@
-.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;
+body {
+    font-family:sans-serif;
     font-weight:lighter;
-    text-transform:capitalize;
-
-}
-.theme-dark-ocean {
-    background: #373B44;  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to bottom, #4682B4, #d3d3d3);  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to bottom, #4682B4, #d3d3d3); /* 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, #D3D3D3);  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to bottom, #FFFFFF, #D3D3D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
+    font-size:16px;
+    
 }
 
+.small {font-size:12px; color:gray; font-weight:lighter}
+.bold {font-weight:bold} 
+.black {color:#000000}
+.fa-times {color:maroon}
+.fa-check {color:#20b2aa} 
+.fa-chart-pie{color:#ff6500}
+.fa-link {color:#1e90ff}
+/* .fa-user-tie{color:#1e90ff} */
+.fa-users {color:#B9340D}
+.caption {font-size:22px;}
 
-img {width:48px}
-body{ 
-        font-family:sans-serif;
-        font-size:14px;
-        
-        
-        margin-left:10%;
-        margin-right:10%;
-}
-.default {font-size:16px;
-    font-family: sans-serif;
+.title {
+    padding:4px;
+    align-items: center;
+    display:grid;
+    grid-template-columns: 80px auto;
+    gap:2px;
+    height:48px;
 }
-.button {
-    width:auto;
-    padding:6px;
-    font-weight:bold;
-    border-radius:8px;
-    border:2px solid #4682b4;
-    background-color:#4682b4;
-    color:white;
+
+.active-button {
     cursor:pointer;
-    text-align:center;
-    
-}
-.button .text {color:#ffffff}
-.button:hover {
-    background-color:#ffffff;
-    color:#4682b4;
-    
+    align-items: center;
+    display:grid;
+    grid-template-columns: 48px auto;
+    gap:1px;
+    border-bottom:2px solid transparent; 
+    background-color:#f3f3f3;
+    text-align: center;
+    padding:4px;
 }
-.button:hover .text { color :#4682B4;}
-
 .active {
-    font-weight:bold;
-    /* font-family:verdana; */
-    cursor:pointer ;
-    
-    border:2px solid transparent;
     padding:4px;
+    cursor:pointer;
+    border-bottom:2px solid transparent ;
 }
-.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;
-    
+.active:hover{
+    border-bottom:2px solid #ff6500; 
 }
-.bold { font-weight:bold; }
-.caption {
-    font-size:28px; font-weight:bold ;
-    font-family:sans-serif;
-    text-transform:capitalize;
-
-    }
-.medium-caption {
-    font-size:18px;
-    font-weight:lighter;
-    font-family:sans-serif ;
-    text-transform:capitalize;
+.active-button:hover {
+    border-bottom:2px solid #ff6500; 
 }
-.plan {		
+.active-button .icon {
     padding:4px;
     margin:4px;
-    border-radius: 4px;
-    border:1px solid #CAD5E0
+
 }
-.pricing  {
+
+.ofooter {
     display:grid;
-    grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) );
+    grid-template-columns: 115px auto 115px;
+    gap:2px;
+    align-items:center;
     
-    /* align-content:center; */
 }
-.pricing-frame {
-    display:grid;
 
-    
-    height:70%;
-    align-content:center;
-}
-.footer {
-    bottom:10px;
-    position:fixed;
-    width: 80%;
-    padding:8spx;
-    text-align:center;
-    display:grid;
-    grid-template-columns: 10% auto 10%;
-    grid-gap: 2px;
-}
-.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;}
-.border{border:1px solid #CAD5E0;}
-.border-round {
-    border-radius:8px;
-    -webkit-border-radius:8px;
-    -moz-border-radius:8px;
+.code {
+    background-color:#000000;
+    color:#f3f3f3;
     padding:8px;
+    font-family:courier;
+    font-size:14px;
 }
-.border-bottom{ border-bottom:1px solid #CAD5E0}
-.border-right{ border-right:1px solid #CAD5E0}
-.border-left{ border-left:1px solid #CAD5E0}
-.border-top{ border-top:1px solid #CAD5E0}
-.left { float:left}
-.small { font-family:sans-serif; font-size:11px; font-weight:lighter; color:#000000;}
-.hidden {display:none}
-.width-50{width:50%; padding:4px;}
-.width-25{width:25%; padding:4px}
-.height-48{height:48px;}
-.fa-times {color:maroon; font-size:18px;}
-.theme-dark-ocean .fa-check {color:green; font-size:18px}
 
-.fa-check {color:#20B2AA; font-size:18px;}
-table { border:1px solid #CAD5E0; 
-    border-radius:8px;
-    -webkit-border-radius:8px;	
-    padding:4px;	
-    
-    margin:4px;
+.menu .menu-item {
+    display:none;
+    position:absolute;
+    z-index:9;
+    background-color:rgba(255,255,255,0.7);
+    font-weight:lighter;
+    font-family:sans-serif;
+
 }
-.action {
-    cursor:pointer;
-    padding:4px;
-    padding-left:10px;
-    padding-right:10px;
-    border-radius:4px;
-    -webkit-border-radius:4px;
-    -moz-border-radius:4px;
-    font-weight:bold;
-    color:#4682b4;
-    
+.menu .menu-item div,li {font-weight:lighter}
+.menu .menu-item li {margin:4px;}
+.menu:hover .menu-item{
+    display:block;
+    height:auto;
 }
-.action:hover { background-color:#4682b4; color:white}
-tr {font-family:sans-serif; font-size:14px;}
-td {padding:4px; font-weight:lighter; padding:4px;}
-.gradient{
-    background-image: -ms-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
-    background-image: -moz-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
-    background-image: -o-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-120, #008080), color-stop(50, #FFFFFF), color-stop(120, #005757));
-    background-image: -webkit-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
-    background-image: linear-gradient(to bottom, #008080 -120%, #FFFFFF 50%, #005757 120%);
+.menu-item .active-button {
+    margin-top:2px; 
+    background:none
 }
-@media only screen and (min-device-width: 320px){
-    table {width:99%}
-    img {width:28px}
-    .medium-caption {font-size:14px}
-    body {font-size:12px;}
-    .default {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}
-
-}	
-@media only screen and (min-device-width: 768px){
-    body {font-size:12px}
-    .default {font-size:12px}
-    .header .logo{
-        display:grid;
-        margin:4px;
-        grid-template-columns: 48px auto ;
-        grid-gap:2px;
-        align-items: center;
-    }
-    .header .logo img {width:32px}
-    .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 { 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;}
+.signup {
+    display:none;
+}
+iframe {width:100%; height:90%; border:1px solid transparent;}
 
-}
\ No newline at end of file
diff --git a/src/api/static/js/payment.js b/src/api/static/js/payment.js
index 70e29ef..fc24d24 100644
--- a/src/api/static/js/payment.js
+++ b/src/api/static/js/payment.js
@@ -9,10 +9,10 @@ payment.setup = function(context,pricing){
     sessionStorage.customer = JSON.stringify({info:{}})
     
     $('.payment-amount > input').on('focusin',function(){            
-        $('.payment-amount > .menu').slideDown('fast')
+        $('.payment-amount > .payment-list').slideDown('fast')
     })
     $('.payment-amount > input').on('focusout',function(){
-        $('.payment-amount > .menu').slideUp('slow')
+        $('.payment-amount > .payment-list').slideUp('slow')
     })
     
     payment.init(0)
@@ -21,6 +21,7 @@ payment.setup = function(context,pricing){
     $('.copyright').text(d.getFullYear())
     if( $('.jxmodal').length == 0){
         $('.close-dialog').hide()
+        
     }
 
 }
diff --git a/src/api/templates/card.html b/src/api/templates/card.html
index 23c495b..0a8e706 100644
--- a/src/api/templates/card.html
+++ b/src/api/templates/card.html
@@ -2,7 +2,9 @@
 <meta http-equiv="cache-control" content="no-cache">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
 <link rel="shortcut icon" href="{{product.images[0]}}">
-<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
+
+
+<link rel="stylesheet" href="{{context}}/static/css/borders.css" type="text/css">
 <link rel="stylesheet" href="{{context}}/static/css/fa/css/all.css" type="text/css">
 <script type="text/javascript" src="{{ context }}/static/css/fa/js/all.js"></script>
 <script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
@@ -12,11 +14,8 @@
 <script src="{{context}}/static/js/jx/ext/modal.js"></script>
 <script src="{{context}}/static/js/payment.js"></script>
 <style>
-    body {
-        font-family:sans-serif;
-        margin:0px;
-        
-    }
+   
+    
  
     /*.frame {
         font-size:16px;
@@ -71,7 +70,7 @@
     .lname {width:100%}
     */
     .card-info .amount {text-align:right;}
-    .payment-amount .menu {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;}
+    .payment-amount .payment-list {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;}
     input {
         height:48px;
         border:2px solid transparent;
@@ -119,9 +118,9 @@
         font-weight:bold ;
         color:#4682B4 ;
     } */
-    @media only screen and (max-device-width: 960px){   
-        body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;}
-        .payment-pane {display:grid; justify-items:center; align-items:center; height:auto;}
+    @media only screen and (max-width: 960px){   
+        /*body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;}*/
+        .payment-pane {display:grid; justify-items:center; align-items:center; height:auto; min-width:350px; max-width:450px}
         
      
         .frame {
@@ -158,8 +157,8 @@
 
     }
 
-    @media only screen and (min-device-width: 1024px){      
-        body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}
+    @media only screen and (min-width: 1024px){      
+        /*body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}*/
         .payment-pane {display:grid; justify-items:center; align-items:center; height:96%;}
         .frame {
             width:800px;
@@ -187,7 +186,7 @@
         .card input {width:100%; }
         .pay-frame {margin-top:30px;}
     }
-    @media only screen and (min-device-width: 1080px){        
+    @media only screen and (min-width: 1080px){        
         .-frame {width:800px}
     }
     @media only screen and (min-device-width: 1920px){   
@@ -196,6 +195,7 @@
 </style>
 <script >
     $(document).ready(function(){
+        $('head').append('<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">')
         payment.dialog('','Loading ...','PROGRESS')
         payment.setup("{{context|safe}}",{{pricing|tojson}})
 
@@ -231,7 +231,7 @@
     <div class="frame">
         <div class="caption title" align="center" style="display:grid; gap:2px; grid-template-columns: auto 32px; align-items:center; justify-items:center">
             
-            <div>{{product.name}}</div>
+            <div class="bold">{{product.name}}</div>
 
             <div class="active close-dialog" onclick="jx.modal.close()"><i class="fa fa-times"></i></div>
         </div>
@@ -267,7 +267,7 @@
                     <div class="" style="display:grid; grid-template-columns:50% auto; gap:2px">
                         <div class="payment-amount">
                             <input type="text" id="amount" class="amount" readonly="true" title="Amount" placeholder="00.00" onchange="payment.validate(event)" style="text-align:right"/>
-                            <div class="border menu" style="margin:4px">
+                            <div class="border payment-list" style="margin:4px">
                                 <div style="margin:4px;">Choose an amount</div>
                                 {%for item in pricing %}
                                     <div class="item active" style="font-weight:lighter" onclick="payment.init({{loop.index -1 }})">