diff --git a/app/frontend/src/javascript/controllers/machines.js.erb b/app/frontend/src/javascript/controllers/machines.js.erb
index 057d6701e..5ac396637 100644
--- a/app/frontend/src/javascript/controllers/machines.js.erb
+++ b/app/frontend/src/javascript/controllers/machines.js.erb
@@ -620,13 +620,24 @@ Application.Controllers.controller('ReserveMachineController', ['$scope', '$stat
      * @param plan {Object} the plan to subscribe
      */
     $scope.selectPlan = function (plan) {
-    // toggle selected plan
-      if ($scope.selectedPlan !== plan) {
-        $scope.selectedPlan = plan;
-      } else {
-        $scope.selectedPlan = null;
-      }
-      return $scope.planSelectionTime = new Date();
+      setTimeout(() => {
+        // toggle selected plan
+        if ($scope.selectedPlan !== plan) {
+          $scope.selectedPlan = plan;
+        } else {
+          $scope.selectedPlan = null;
+        }
+        $scope.planSelectionTime = new Date();
+        $scope.$apply();
+      }, 50);
+    };
+
+    /**
+     * Check if the provided plan is currently selected
+     * @param plan {Object} Resource plan
+     */
+    $scope.isSelected = function (plan) {
+      return $scope.selectedPlan === plan;
     };
 
     /**
diff --git a/app/frontend/src/javascript/controllers/spaces.js.erb b/app/frontend/src/javascript/controllers/spaces.js.erb
index ad5a285e5..df36145b0 100644
--- a/app/frontend/src/javascript/controllers/spaces.js.erb
+++ b/app/frontend/src/javascript/controllers/spaces.js.erb
@@ -517,13 +517,24 @@ Application.Controllers.controller('ReserveSpaceController', ['$scope', '$stateP
      * @param plan {Object} the plan to subscribe
      */
     $scope.selectPlan = function (plan) {
-      // toggle selected plan
-      if ($scope.selectedPlan !== plan) {
-        $scope.selectedPlan = plan;
-      } else {
-        $scope.selectedPlan = null;
-      }
-      return $scope.planSelectionTime = new Date();
+      setTimeout(() => {
+        // toggle selected plan
+        if ($scope.selectedPlan !== plan) {
+          $scope.selectedPlan = plan;
+        } else {
+          $scope.selectedPlan = null;
+        }
+        $scope.planSelectionTime = new Date();
+        $scope.$apply();
+      }, 50);
+    };
+
+    /**
+     * Check if the provided plan is currently selected
+     * @param plan {Object} Resource plan
+     */
+    $scope.isSelected = function (plan) {
+      return $scope.selectedPlan === plan;
     };
 
     /**
diff --git a/app/frontend/src/javascript/controllers/trainings.js.erb b/app/frontend/src/javascript/controllers/trainings.js.erb
index 0ceeae78a..0c553393b 100644
--- a/app/frontend/src/javascript/controllers/trainings.js.erb
+++ b/app/frontend/src/javascript/controllers/trainings.js.erb
@@ -307,13 +307,24 @@ Application.Controllers.controller('ReserveTrainingController', ['$scope', '$sta
      * @param plan {Object} the plan to subscribe
      */
     $scope.selectPlan = function (plan) {
-    // toggle selected plan
-      if ($scope.selectedPlan !== plan) {
-        $scope.selectedPlan = plan;
-      } else {
-        $scope.selectedPlan = null;
-      }
-      return $scope.planSelectionTime = new Date();
+      setTimeout(() => {
+        // toggle selected plan
+        if ($scope.selectedPlan !== plan) {
+          $scope.selectedPlan = plan;
+        } else {
+          $scope.selectedPlan = null;
+        }
+        $scope.planSelectionTime = new Date();
+        $scope.$apply();
+      }, 50);
+    };
+
+    /**
+     * Check if the provided plan is currently selected
+     * @param plan {Object} Resource plan
+     */
+    $scope.isSelected = function (plan) {
+      return $scope.selectedPlan === plan;
     };
 
     /**
diff --git a/app/frontend/templates/plans/_plan.html b/app/frontend/templates/plans/_plan.html
index 287c3fc9e..00187c9bd 100644
--- a/app/frontend/templates/plans/_plan.html
+++ b/app/frontend/templates/plans/_plan.html
@@ -11,20 +11,12 @@
            ng-class="{'col-md-12 col-lg-12':(plansGroup.plans.filter(filterDisabledPlans).length % 2 == 1 && key == plansGroup.plans.filter(filterDisabledPlans).length-1)}"
            ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy:'interval'">
 
-        <h3 class="title">{{ plan.base_name }}</h3>
-
-        <div class="content">
-          <div class="wrap">
-            <div class="price">
-              <div class="amount">{{plan.amount | currency}}</div>
-              <span class="period">{{ plan.interval | planIntervalFilter: plan.interval_count }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="cta-button">
-          <button class="btn btn-default rounded" ng-click="selectPlan(plan)" ng-class="{'bg-yellow': selectedPlan.id == plan.id}" translate>{{ 'app.shared.plan_subscribe.subscribe_online' }}</button>
-        </div>
+        <plan-card plan="plan"
+                   user="ctrl.member"
+                   operator="currentUser"
+                   on-select-plan="selectPlan"
+                   is-selected="isSelected(plan)">
+        </plan-card>
 
       </div>