diff --git a/package.json b/package.json
index 17b2b84f..85cd7aca 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "leaflet": "0.7.7",
     "leaflet-map": "0.2.1",
     "lodash": "4.17.4",
-    "ng2-bootstrap": "1.3.3",
     "ng2-ckeditor": "1.1.6",
     "ng2-completer": "1.3.1",
     "ng2-smart-table": "1.0.3",
diff --git a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html
index db456bfc..94cfb8db 100644
--- a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html
+++ b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html
@@ -1,13 +1,21 @@
 <div class="raiting-box">
   <div class="col-md-4">
-    <rating [(ngModel)]="_rate1" max="{{_max1}}" stateOn="ion-android-star" stateOff="ion-android-star-outline"
-            class="rating"></rating>
+    <ngb-rating [(ngModel)]="_rate1" max="{{_max1}}" class="rating">
+        <ng-template let-fill="fill">
+            <i *ngIf="fill === 100" class="ion-android-star"></i>
+            <i *ngIf="fill === 0" class="ion-android-star-outline"></i>
+        </ng-template>
+    </ngb-rating>
     <span class="help-block">Rate: {{_rate1}}</span>
   </div>
 
   <div class="col-md-8">
-    <rating [(ngModel)]="_rate2" max="{{_max2}}" stateOn="ion-ios-heart" stateOff="ion-ios-heart-outline"
-            class="rating"></rating>
+    <ngb-rating [(ngModel)]="_rate2" max="{{_max2}}" class="rating">
+        <ng-template let-fill="fill">
+            <i *ngIf="fill === 100" class="ion-ios-heart"></i>
+            <i *ngIf="fill === 0" class="ion-ios-heart-outline"></i>
+        </ng-template>
+    </ngb-rating>
     <span class="help-block">Rate: {{_rate2}}</span>
   </div>
 </div>
diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts
index 9c5539da..3abdb550 100644
--- a/src/app/pages/forms/forms.module.ts
+++ b/src/app/pages/forms/forms.module.ts
@@ -2,10 +2,10 @@ import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { FormsModule as AngularFormsModule } from '@angular/forms';
 import { NgaModule } from '../../theme/nga.module';
+import { NgbRatingModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { routing }       from './forms.routing';
 
-import { RatingModule } from 'ng2-bootstrap';
 import { Forms } from './forms.component';
 import { Inputs } from './components/inputs';
 import { Layouts } from './components/layouts';
@@ -28,7 +28,7 @@ import { WithoutLabelsForm } from './components/layouts/components/withoutLabels
     CommonModule,
     AngularFormsModule,
     NgaModule,
-    RatingModule.forRoot(),
+    NgbRatingModule,
     routing
   ],
   declarations: [
diff --git a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
index 0bc523cc..b3c10f1a 100644
--- a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
+++ b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
@@ -1,10 +1,10 @@
 <div class="row btns-row">
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
-      <button type="button" class="btn btn-primary" dropdownToggle addToggleClass="true">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-primary" ngbDropdownToggle>
         Primary
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -14,11 +14,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
-      <button type="button" class="btn btn-success" dropdownToggle addToggleClass="true">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-success" ngbDropdownToggle>
         Success
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -28,11 +28,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
-      <button type="button" class="btn btn-info" dropdownToggle addToggleClass="true">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-info" ngbDropdownToggle>
         Info
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -42,11 +42,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
-      <button type="button" class="btn btn-default" dropdownToggle addToggleClass="true">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-default" ngbDropdownToggle>
         Default
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -56,11 +56,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
-      <button type="button" class="btn btn-warning" dropdownToggle addToggleClass="true">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-warning" ngbDropdownToggle>
         Warning
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -70,11 +70,11 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
-      <button type="button" class="btn btn-danger" dropdownToggle addToggleClass="true">
+    <div class="btn-group" ngbDropdown>
+      <button type="button" class="btn btn-danger" ngbDropdownToggle>
         Danger
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -89,12 +89,12 @@
 
 <div class="row btns-row">
   <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
-    <div class="btn-group flex-dropdown" dropdown>
+    <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-primary">Primary</button>
-      <button type="button" class="btn btn-primary" dropdownToggle addToggleClass="true">
+      <button type="button" class="btn btn-primary" ngbDropdownToggle>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -104,12 +104,12 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
-    <div class="btn-group flex-dropdown" dropdown>
+    <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-success">Success</button>
-      <button type="button" class="btn btn-success" dropdownToggle addToggleClass="true">
+      <button type="button" class="btn btn-success" ngbDropdownToggle>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -119,12 +119,12 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
-    <div class="btn-group flex-dropdown" dropdown>
+    <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-info">Info</button>
-      <button type="button" class="btn btn-info" dropdownToggle addToggleClass="true">
+      <button type="button" class="btn btn-info" ngbDropdownToggle>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -134,12 +134,12 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
-    <div class="btn-group flex-dropdown" dropdown>
+    <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-default">Default</button>
-      <button type="button" class="btn btn-default" dropdownToggle addToggleClass="true">
+      <button type="button" class="btn btn-default" ngbDropdownToggle>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -149,12 +149,12 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
-    <div class="btn-group flex-dropdown" dropdown>
+    <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-warning">Warning</button>
-      <button type="button" class="btn btn-warning" dropdownToggle addToggleClass="true">
+      <button type="button" class="btn btn-warning" ngbDropdownToggle>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
@@ -164,12 +164,12 @@
     </div>
   </div>
   <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
-    <div class="btn-group flex-dropdown" dropdown>
+    <div class="btn-group flex-dropdown" ngbDropdown>
       <button type="button" class="btn btn-danger">Danger</button>
-      <button type="button" class="btn btn-danger" dropdownToggle addToggleClass="true">
+      <button type="button" class="btn btn-danger" ngbDropdownToggle>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <ul class="dropdown-menu" dropdownMenu>
+      <ul class="dropdown-menu">
         <li class="dropdown-item"><a href="#">Action</a></li>
         <li class="dropdown-item"><a href="#">Another action</a></li>
         <li class="dropdown-item"><a href="#">Something else here</a></li>
diff --git a/src/app/pages/ui/ui.module.ts b/src/app/pages/ui/ui.module.ts
index fcc3d039..8dc23347 100644
--- a/src/app/pages/ui/ui.module.ts
+++ b/src/app/pages/ui/ui.module.ts
@@ -2,10 +2,9 @@ import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgaModule } from '../../theme/nga.module';
-import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { routing }       from './ui.routing';
-import { DropdownModule, ModalModule } from 'ng2-bootstrap';
 import { Ui } from './ui.component';
 import { Buttons } from './components/buttons/buttons.component';
 import { Grid } from './components/grid/grid.component';
@@ -30,9 +29,8 @@ import { DefaultModal } from './components/modals/default-modal/default-modal.co
     CommonModule,
     FormsModule,
     NgaModule,
+    NgbDropdownModule,
     NgbModalModule,
-    DropdownModule.forRoot(),
-    ModalModule.forRoot(),
     routing
   ],
   declarations: [