diff --git a/app/profile/badges/badges.jade b/app/profile/badges/badges.jade
index 74b9d48d5..7fc9272b5 100644
--- a/app/profile/badges/badges.jade
+++ b/app/profile/badges/badges.jade
@@ -1,5 +1,6 @@
+.ngdialog-close.close-outside
+
 header.head
-  .ngdialog-close
   .breadcrumbs
     .handle
       img.profile-circle(fallback-src=require("../../../assets/images/avatarPlaceholder.png"), ng-src="{{vm.profile.photoURL}}")
@@ -12,6 +13,7 @@ header.head
       span.title BADGES
 
 aside.badges
+  .ngdialog-close
   .content
     .badgeGroups
       .groupBadge(ng-repeat='ag in vm.achievementGroups', ng-class='ag.groupClass', ng-show='ag.specificAchievements[0].active')
diff --git a/assets/css/profile/badges.scss b/assets/css/profile/badges.scss
index 77c6ac89b..00e180538 100644
--- a/assets/css/profile/badges.scss
+++ b/assets/css/profile/badges.scss
@@ -4,14 +4,14 @@
   padding: 0;
   .ngdialog-content {
     padding: 30px;
-    background: white;
-    opacity: 0.95;
+    background: rgba(255,255,255,0.85);
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    border-radius: 0;
 
     header.head {
       @include sofia-pro-extra-light;
@@ -32,7 +32,6 @@
         margin-bottom: -5px;
         margin-right: 13px;
       }
-
     }
 
     .badges {
@@ -44,6 +43,7 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
+      position: relative;
 
       .content {
         overflow: auto;
@@ -58,7 +58,25 @@
           justify-content: center;
         }
       }
+      .ngdialog-close {
+        display: block;
+      }      
+    }
+    
+    .ngdialog-close {
+      display: none;
+    }
+    
+    .ngdialog-close.close-outside {
+      display: block;
+      height: 100%;
+      width: 100%;
+      cursor: default;
     }
+    
+    .ngdialog-close.close-outside:before {
+      display: none;
+    }    
   }
 }