diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index 22f07516..56e7515d 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -1,13 +1,13 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
 
 import {PopularApp} from './popularApp';
-import {BaPanel} from '../../theme';
+import {BaCard} from '../../theme';
 
 
 @Component({
   selector: 'dashboard',
   pipes: [],
-  directives: [PopularApp, BaPanel],
+  directives: [PopularApp, BaCard],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./dashboard.scss')],
   template: require('./dashboard.html')
diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html
index a6c7ad35..51e0dc7f 100644
--- a/src/app/pages/dashboard/dashboard.html
+++ b/src/app/pages/dashboard/dashboard.html
@@ -1,10 +1,10 @@
 <div class="row">
     <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <div class="row">
-            <ba-panel class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"
-                 ba-panel-class="popular-app medium-panel">
+            <ba-card class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"
+                 baCardClass="popular-app medium-card">
                 <popular-app></popular-app>
-            </ba-panel>
+            </ba-card>
         </div>
     </div>
 </div>
diff --git a/src/app/pages/dashboard/dashboard.scss b/src/app/pages/dashboard/dashboard.scss
index 30ac5a83..2bce8531 100644
--- a/src/app/pages/dashboard/dashboard.scss
+++ b/src/app/pages/dashboard/dashboard.scss
@@ -7,13 +7,13 @@
 }
 
 @media screen and (max-width: 1620px) {
-  .panel.feed-panel.large-panel {
+  .card.feed-card.large-card {
     height: 824px;
   }
 }
 
-.user-stats-panel {
-  .panel-title {
+.user-stats-card {
+  .card-title {
     padding: 0 0 15px;
   }
 }
diff --git a/src/app/pages/dashboard/popularApp/popularApp.scss b/src/app/pages/dashboard/popularApp/popularApp.scss
index 61ad7ca3..9c5e2c2e 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.scss
+++ b/src/app/pages/dashboard/popularApp/popularApp.scss
@@ -1 +1,54 @@
-@import '../dashboard';
\ No newline at end of file
+@import "../../../theme/sass/conf/conf";
+
+.card.popular-app {
+  &>.card-body {
+    padding: 0;
+  }
+
+  .popular-app-img {
+    position: relative;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 30px 0;
+    height: 260px;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    img {
+      max-width: 60%;
+      max-height: 70%;
+      position: absolute;
+      transform: translateY(-50%) translate(-50%);
+      top: 50%;
+      left: 50%;
+    }
+  }
+  .popular-app-cost {
+    font-size: 20px;
+    padding: 20px 22px;
+    border-bottom: 1px solid $border;
+  }
+  .popular-app-info {
+    padding: 20px 22px;
+    font-size: 20px;
+    text-align: center;
+    .info-label {
+      font-size: 12px;
+    }
+  }
+  .row {
+    margin: 0;
+    > div {
+      padding: 0;
+    }
+  }
+}
+
+body.badmin-transparent {
+  .popular-app-img {
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+  }
+  .popular-app-cost {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  }
+}
\ No newline at end of file
diff --git a/src/app/theme/baCard/baCard.component.ts b/src/app/theme/baCard/baCard.component.ts
new file mode 100644
index 00000000..f96c438c
--- /dev/null
+++ b/src/app/theme/baCard/baCard.component.ts
@@ -0,0 +1,12 @@
+import {Component, ViewEncapsulation, Input} from 'angular2/core';
+
+@Component({
+  selector: 'ba-card',
+  styles: [require('./baCard.scss')],
+  template: require('./baCard.html'),
+  encapsulation: ViewEncapsulation.None
+})
+export class BaCard {
+  @Input() title:String;
+  @Input() baCardClass:String;
+}
diff --git a/src/app/theme/baPanel/baPanel.html b/src/app/theme/baCard/baCard.html
similarity index 70%
rename from src/app/theme/baPanel/baPanel.html
rename to src/app/theme/baCard/baCard.html
index 5933cb95..a597ca69 100644
--- a/src/app/theme/baPanel/baPanel.html
+++ b/src/app/theme/baCard/baCard.html
@@ -1,4 +1,4 @@
-<div  class="card {{panelType}} {{baPanelClass || ''}}" zoom-in ba-panel-blur>
+<div  class="card {{cardType}} {{baCardClass || ''}}" zoom-in ba-panel-blur>
     <div *ngIf="title" class="card-header clearfix">
         <h3 class="card-title">{{title}}</h3>
     </div>
diff --git a/src/app/theme/baPanel/baPanel.scss b/src/app/theme/baCard/baCard.scss
similarity index 100%
rename from src/app/theme/baPanel/baPanel.scss
rename to src/app/theme/baCard/baCard.scss
diff --git a/src/app/theme/baCard/index.ts b/src/app/theme/baCard/index.ts
new file mode 100644
index 00000000..4890b0a2
--- /dev/null
+++ b/src/app/theme/baCard/index.ts
@@ -0,0 +1 @@
+export * from './baCard.component';
\ No newline at end of file
diff --git a/src/app/theme/baPanel/baPanel.component.ts b/src/app/theme/baPanel/baPanel.component.ts
deleted file mode 100644
index d0fdb825..00000000
--- a/src/app/theme/baPanel/baPanel.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component, ViewEncapsulation, Input} from 'angular2/core';
-
-@Component({
-  selector: 'ba-panel',
-  styles: [require('./baPanel.scss')],
-  template: require('./baPanel.html'),
-  encapsulation: ViewEncapsulation.None
-})
-export class BaPanel {
-  @Input() title:String;
-  @Input() baPanelClass:String;
-}
diff --git a/src/app/theme/baPanel/index.ts b/src/app/theme/baPanel/index.ts
deleted file mode 100644
index 8727b9ee..00000000
--- a/src/app/theme/baPanel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './baPanel.component';
\ No newline at end of file
diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
index 8abe566f..859510c7 100644
--- a/src/app/theme/index.ts
+++ b/src/app/theme/index.ts
@@ -1,5 +1,5 @@
 export * from './pageTop';
 export * from './msgCenter';
 export * from './sidebar';
-export * from './baPanel';
 export * from './contentTop';
+export * from './baCard';
diff --git a/src/app/theme/sass/_layout.scss b/src/app/theme/sass/_layout.scss
index da7258e0..7c6beec5 100644
--- a/src/app/theme/sass/_layout.scss
+++ b/src/app/theme/sass/_layout.scss
@@ -198,3 +198,15 @@ a {
     visibility: hidden !important;
   }
 }
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/theme/sass/_typography.scss b/src/app/theme/sass/_typography.scss
index 2548984c..fcd96ee4 100644
--- a/src/app/theme/sass/_typography.scss
+++ b/src/app/theme/sass/_typography.scss
@@ -47,20 +47,20 @@ h5 {
   .typography-widget {
     height: 100%;
 
-    .panel {
+    .card {
       height: 620px;
     }
 
-    .panel-title{
+    .card-title{
       text-align: center;
       width: 100%;
     }
 
-    .panel.with-scroll .panel-body{
+    .card.with-scroll .card-body{
       height: calc(100% - 45px);
     }
 
-    .panel-content{
+    .card-content{
       padding: 15px 22px 5px 22px;
     }
 
@@ -421,11 +421,11 @@ a.learn-more {
   padding: 0 20px 50px 20px;
 }
 
-.panel.banner-column-panel {
+.card.banner-column-card {
   padding: 0;
   margin-bottom: 90px;
 
-  .panel-body{
+  .card-body{
     padding: 0;
   }
 }
diff --git a/src/app/theme/sass/bootstrap-overrides/_panel.scss b/src/app/theme/sass/bootstrap-overrides/_card.scss
similarity index 86%
rename from src/app/theme/sass/bootstrap-overrides/_panel.scss
rename to src/app/theme/sass/bootstrap-overrides/_card.scss
index 433db35d..6eb554ba 100644
--- a/src/app/theme/sass/bootstrap-overrides/_panel.scss
+++ b/src/app/theme/sass/bootstrap-overrides/_card.scss
@@ -1,5 +1,5 @@
 $card-title-height: 44px;
-$card-heading-font-size: 16px;
+$card-header-font-size: 16px;
 
 .card {
   border: none;
@@ -47,11 +47,11 @@ $card-heading-font-size: 16px;
   height: 100%;
 }
 
-.card-heading, .card-footer {
+.card-header, .card-footer {
   height: $card-title-height;
-  font-size: $card-heading-font-size;
+  font-size: $card-header-font-size;
 
-  $vertical-padding: ($card-title-height - $card-heading-font-size) / 2;
+  $vertical-padding: ($card-title-height - $card-header-font-size) / 2;
   padding: $vertical-padding 22px;
 
 }
@@ -65,7 +65,7 @@ $card-heading-font-size: 16px;
 
 .card-white, .card-blur {
   background-size: cover;
-  > .card-heading {
+  > .card-header {
     background-color: transparent;
     border: none;
     color: $default-text;
@@ -83,7 +83,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-primary {
-  > .card-heading {
+  > .card-header {
     color: $primary;
     background-color: $primary-bg;
     border-color: $primary-bg;
@@ -91,7 +91,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-success {
-  > .card-heading {
+  > .card-header {
     color: $success;
     background-color: $success-bg;
     border-color: $success-bg;
@@ -99,7 +99,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-info {
-  > .card-heading {
+  > .card-header {
     color: $info;
     background-color: $info-bg;
     border-color: $info-bg;
@@ -107,7 +107,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-warning {
-  > .card-heading {
+  > .card-header {
     color: $warning;
     background-color: $warning-bg;
     border-color: $warning-bg;
@@ -115,7 +115,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-danger {
-  > .card-heading {
+  > .card-header {
     color: $danger;
     background-color: $danger-bg;
     border-color: $danger-bg;
@@ -123,13 +123,13 @@ $card-heading-font-size: 16px;
 }
 
 .card-primary, .card-success, .card-info, .card-warning, .card-danger {
-  .card-heading {
+  .card-header {
     color: rgba(255, 255, 255, 0.8);
   }
 }
 
 .card.bootstrap-card {
-  .card-body, .card-heading {
+  .card-body, .card-header {
     p, div, span {
       color: $default-text;
     }
@@ -142,7 +142,7 @@ $card-heading-font-size: 16px;
   &.card-info,
   &.card-warning,
   &.card-danger {
-    .card-heading {
+    .card-header {
       p, div, span {
         color: rgba(255, 255, 255, 0.8);
       }
@@ -151,13 +151,13 @@ $card-heading-font-size: 16px;
 }
 
 .card-group .card.accordion-card {
-  .card-heading {
+  .card-header {
     border-bottom: 0;
   }
 }
 
 .card-group .card {
-  .card-heading {
+  .card-header {
     border-bottom: 1px solid #ddd;
   }
 }
diff --git a/src/app/theme/sass/bootstrap-overrides/_tabs.scss b/src/app/theme/sass/bootstrap-overrides/_tabs.scss
index 7494d940..ee742cc2 100644
--- a/src/app/theme/sass/bootstrap-overrides/_tabs.scss
+++ b/src/app/theme/sass/bootstrap-overrides/_tabs.scss
@@ -168,26 +168,26 @@
   border: none;
 }
 
-.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger, {
-  .panel-heading {
+.card-primary, .card-info, .card-success, .card-warning, .card-danger, {
+  .card-header {
     border-radius: 4px;
   }
 
-  &.panel-open .panel-heading {
+  &.card-open .card-header {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  &:not(.panel-open) .panel-heading {
+  &:not(.card-open) .card-header {
     transition-delay: .3s;
   }
 
-  > .panel-heading + .panel-collapse > .panel-body {
+  > .card-header + .card-collapse > .card-body {
     border-top: none;
   }
 }
 
-.accordion-panel .panel-heading {
+.accordion-card .card-header {
   padding: 0;
   .accordion-toggle {
     display: inline-block;
diff --git a/src/app/theme/sass/bootstrap-overrides/overrides.scss b/src/app/theme/sass/bootstrap-overrides/overrides.scss
index d1039fba..5fa66994 100644
--- a/src/app/theme/sass/bootstrap-overrides/overrides.scss
+++ b/src/app/theme/sass/bootstrap-overrides/overrides.scss
@@ -1,3 +1,3 @@
-@import "panel";
+@import "card";
 @import "dropdown";
 @import "tabs";
\ No newline at end of file
diff --git a/src/app/theme/sass/conf/_mixins.scss b/src/app/theme/sass/conf/_mixins.scss
index 643ee919..902579c3 100644
--- a/src/app/theme/sass/conf/_mixins.scss
+++ b/src/app/theme/sass/conf/_mixins.scss
@@ -96,7 +96,7 @@
   p,
   h1, h2, h3, h4, h5, h6,
   .pie-chart-item,
-  .card-heading > .dropdown .dropdown-toggle,
+  .card-header > .dropdown .dropdown-toggle,
   .card-title,
   ol.blur span,
   ul.blur,