diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
index a4744030..80a3b7d6 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -1,305 +1,248 @@
 <div class="row">
   <div class="col-md-6">
     <nga-card>
-      <nga-card-header>Text inputs</nga-card-header>
+      <nga-card-header>Default Inputs</nga-card-header>
       <nga-card-body>
-        <div class="form-group row">
-          <label for="example-text-input" class="col-2 col-form-label">Text</label>
-          <div class="col-10">
-            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
+        <div class="input-group input-group-lg">
+          <input type="text" placeholder="Project" class="form-control" />
+        </div>
+        <div class="row">
+          <div class="col-md-6">
+            <div class="input-group input-group-lg">
+              <input type="text" placeholder="Nick" class="form-control" />
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="input-group input-group-lg">
+              <input type="text" placeholder="Last Name" class="form-control" />
+            </div>
           </div>
         </div>
-        <div class="form-group row">
-          <label for="example-search-input" class="col-2 col-form-label">Search</label>
-          <div class="col-10">
-            <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
-          </div>
+        <div class="input-group input-group-lg">
+          <input type="password" placeholder="Password" class="form-control" />
         </div>
-        <div class="form-group row">
-          <label for="example-email-input" class="col-2 col-form-label">Email</label>
-          <div class="col-10">
-            <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
-          </div>
+        <div class="input-group input-group-lg">
+          <span class="input-group-addon"></span>
+          <input type="text" placeholder="With Icon" class="form-control" />
         </div>
-        <div class="form-group row">
-          <label for="example-url-input" class="col-2 col-form-label">URL</label>
-          <div class="col-10">
-            <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
-          </div>
+        <div class="input-group input-group-lg">
+          <input type="text" placeholder="Rounded border" class="form-control" />
         </div>
-        <div class="form-group row">
-          <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
-          <div class="col-10">
-            <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
-          </div>
+        <div class="form-group">
+          <input type="text" placeholder="Project" class="form-control" />
+          <small class="form-text text-muted">A block of help text that breaks into a new line and may extend beyond one line.</small>
         </div>
-        <div class="form-group row">
-          <label for="example-password-input" class="col-2 col-form-label">Password</label>
-          <div class="col-10">
-            <input class="form-control" type="password" value="hunter2" id="example-password-input">
-          </div>
+        <div class="input-group input-group-lg">
+          <input type="text" placeholder="Disabled input" class="form-control" />
         </div>
-        <div class="form-group row">
-          <label for="example-number-input" class="col-2 col-form-label">Number</label>
-          <div class="col-10">
-            <input class="form-control" type="number" value="42" id="example-number-input">
-          </div>
+        <div class="input-group">
+          <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
         </div>
-        <div class="form-group row">
-          <label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
-          <div class="col-10">
-            <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
-          </div>
+        <div class="input-group">
+          <input type="text" placeholder="Small Input" class="form-control" />
         </div>
-        <div class="form-group row">
-          <label for="example-date-input" class="col-2 col-form-label">Date</label>
-          <div class="col-10">
-            <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
-          </div>
+        <div class="input-group input-group-lg">
+          <input type="text" placeholder="Large Input" class="form-control" />
         </div>
-        <div class="form-group row">
-          <label for="example-month-input" class="col-2 col-form-label">Month</label>
-          <div class="col-10">
-            <input class="form-control" type="month" value="2011-08" id="example-month-input">
-          </div>
+      </nga-card-body>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Input Groups</nga-card-header>
+      <nga-card-body>
+        <div class="input-group">
+          <span class="input-group-addon">@</span>
+          <input type="text" class="form-control" placeholder="Username" />
         </div>
-        <div class="form-group row">
-          <label for="example-week-input" class="col-2 col-form-label">Week</label>
-          <div class="col-10">
-            <input class="form-control" type="week" value="2011-W33" id="example-week-input">
-          </div>
+        <div class="input-group">
+          <span class="input-group-btn">
+            <button class="btn btn-primary">
+              <i class="ion-ios-email-outline"></i>
+            </button>
+          </span>
+          <input type="text" placeholder="Recipient's username" class="form-control">
+          <span class="input-group-btn">
+            <button class="btn btn-primary">
+              @example.com
+            </button>
+          </span>
         </div>
-        <div class="form-group row">
-          <label for="example-time-input" class="col-2 col-form-label">Time</label>
-          <div class="col-10">
-            <input class="form-control" type="time" value="13:45:00" id="example-time-input">
-          </div>
+        <div class="input-group">
+          <input type="text" placeholder="Search for..." class="form-control">
+          <span class="input-group-btn">
+            <button class="btn btn-danger">
+              Search
+            </button>
+          </span>
         </div>
-        <div class="form-group row">
-          <label for="example-color-input" class="col-2 col-form-label">Color</label>
-          <div class="col-10">
-            <input class="form-control" type="color" value="#563d7c" id="example-color-input">
+        <div class="input-group">
+          <div class="input-group-btn" ngbDropdown>
+            <button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
+              Action
+            </button>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
+              <div role="separator" class="dropdown-divider"></div>
+              <a class="dropdown-item" href="#">Separated link</a>
+            </div>
           </div>
+          <input type="text" class="form-control">
+        </div>
+      </nga-card-body>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Selects</nga-card-header>
+      <nga-card-body>
+        <div class="form-group">
+          <label>Simple Select</label>
+          <select class="form-control">
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+            <option>4</option>
+            <option>5</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Multiple Select</label>
+          <select multiple class="form-control">
+            <option>1</option>
+            <option>2</option>
+            <option>3</option>
+            <option>4</option>
+            <option>5</option>
+          </select>
         </div>
       </nga-card-body>
     </nga-card>
   </div>
   <div class="col-md-6">
     <nga-card>
-      <nga-card-header>Disabled states</nga-card-header>
+      <nga-card-header>Input Styles</nga-card-header>
       <nga-card-body>
-        <form>
-          <fieldset disabled>
-            <div class="form-group">
-              <label for="disabledTextInput">Disabled input</label>
-              <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
-            </div>
-            <div class="form-group">
-              <label for="disabledSelect">Disabled select menu</label>
-              <select id="disabledSelect" class="form-control">
-                <option>Disabled select</option>
-              </select>
-            </div>
-            <div class="checkbox">
-              <label>
-              <input type="checkbox"> Can't check this
-            </label>
-            </div>
-            <button type="submit" class="btn btn-primary">Submit</button>
-          </fieldset>
-        </form>
+        <div class="input-group input-group-lg">
+          <input type="text" placeholder="Border Only" class="form-control" />
+        </div>
+        <div class="input-group input-group-lg">
+          <input type="text" placeholder="Default Input" class="form-control">
+        </div>
+        <div class="input-group input-group-lg">
+          <input type="text" placeholder="Fill Only" class="form-control">
+        </div>
       </nga-card-body>
     </nga-card>
     <nga-card>
-      <nga-card-header>
-        Validation states
-      </nga-card-header>
+      <nga-card-header>Validation States</nga-card-header>
       <nga-card-body>
+        <div class="form-group">
+          <input type="text" placeholder="Input with Success" class="form-control form-control-success">
+        </div>
+        <div class="form-group">
+          <input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
+        </div>
+        <div class="form-group">
+          <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
+        </div>
+        <div class="form-group validation-checkboxes">
+          <label class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input">
+            <span class="custom-control-indicator"></span>
+            <span class="custom-control-description">Input with Success</span>
+          </label>
+          <label class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input">
+            <span class="custom-control-indicator"></span>
+            <span class="custom-control-description">Input with Warning</span>
+          </label>
+          <label class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input">
+            <span class="custom-control-indicator"></span>
+            <span class="custom-control-description">Input with Danger</span>
+          </label>
+        </div>
         <div class="form-group has-success">
-          <label class="form-control-label" for="inputSuccess1">Input with success</label>
-          <input type="text" class="form-control form-control-success" id="inputSuccess1">
-          <div class="form-control-feedback">Success! You've done it.</div>
-          <small class="form-text text-muted">Example help text that remains unchanged.</small>
+          <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
         </div>
         <div class="form-group has-warning">
-          <label class="form-control-label" for="inputWarning1">Input with warning</label>
-          <input type="text" class="form-control form-control-warning" id="inputWarning1">
-          <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
-          <small class="form-text text-muted">Example help text that remains unchanged.</small>
+          <input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
         </div>
         <div class="form-group has-danger">
-          <label class="form-control-label" for="inputDanger1">Input with danger</label>
-          <input type="text" class="form-control form-control-danger" id="inputDanger1">
-          <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
-          <small class="form-text text-muted">Example help text that remains unchanged.</small>
+          <input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
         </div>
       </nga-card-body>
     </nga-card>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-6">
     <nga-card>
-      <nga-card-header>
-        Form controls
-      </nga-card-header>
+      <nga-card-header>Checkboxes & Radios</nga-card-header>
       <nga-card-body>
-        <form>
-          <div class="form-group">
-            <label for="exampleInputEmail1">Email address</label>
-            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
-          </div>
-          <div class="form-group">
-            <label for="exampleInputPassword1">Password</label>
-            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-          </div>
-          <div class="form-group">
-            <label for="exampleSelect1">Example select</label>
-            <select class="form-control" id="exampleSelect1">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="exampleSelect2">Example multiple select</label>
-            <select multiple class="form-control" id="exampleSelect2">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="exampleTextarea">Example textarea</label>
-            <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
-          </div>
-          <div class="form-group">
-            <label for="exampleInputFile">File input</label>
-            <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
-            <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
-          </div>
-          <fieldset class="form-group">
-            <legend>Radio buttons</legend>
-            <div class="form-check">
-              <label class="form-check-label">
-                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-                Option one is this and that&mdash;be sure to include why it's great
-              </label>
-            </div>
-            <div class="form-check">
-              <label class="form-check-label">
-                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
-                Option two can be something else and selecting it will deselect option one
-              </label>
-            </div>
-            <div class="form-check disabled">
-              <label class="form-check-label">
-                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
-                Option three is disabled
-              </label>
-            </div>
-          </fieldset>
-          <div class="form-check">
-            <label class="form-check-label">
-            <input type="checkbox" class="form-check-input">
-              Check me out
+        <div class="demo-checkboxes-radio">
+          <div class="demo-checkboxes">
+            <label class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Checkbox 1</span>
+            </label>
+            <label class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Checkbox 2</span>
+            </label>
+            <label class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Checkbox 3</span>
+            </label>
+          </div>
+          <div class="demo-radio">
+            <label class="custom-control custom-radio">
+              <input type="radio" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Radio 1</span>
+            </label>
+            <label class="custom-control custom-radio">
+              <input type="radio" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Radio 2</span>
+            </label>
+            <label class="custom-control custom-radio">
+              <input type="radio" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Radio 3</span>
+            </label>
+          </div>
+          <div class="demo-disabled-checkbox-radio">
+            <label class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Disabled Checkbox</span>
+            </label>
+            <label class="custom-control custom-radio">
+              <input type="radio" class="custom-control-input">
+              <span class="custom-control-indicator"></span>
+              <span class="custom-control-description">Disabled Radio</span>
             </label>
           </div>
-          <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
-      </nga-card-body>
-    </nga-card>
-  </div>
-  <div class="col-md-6">
-    <nga-card>
-      <nga-card-header>
-        Input groups
-      </nga-card-header>
-      <nga-card-body>
-        <div class="input-group">
-          <span class="input-group-addon" id="basic-addon1">@</span>
-          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
-        </div>
-        <br>
-        <div class="input-group">
-          <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
-          <span class="input-group-addon" id="basic-addon2">@example.com</span>
-        </div>
-        <br>
-        <label for="basic-url">Your vanity URL</label>
-        <div class="input-group">
-          <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
-          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
-        </div>
-        <br>
-        <div class="input-group">
-          <span class="input-group-addon">$</span>
-          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-          <span class="input-group-addon">.00</span>
-        </div>
-        <br>
-        <div class="input-group">
-          <span class="input-group-addon">$</span>
-          <span class="input-group-addon">0.00</span>
-          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
         </div>
       </nga-card-body>
     </nga-card>
     <nga-card>
-      <nga-card-header>
-        Rating
-      </nga-card-header>
-      <nga-card-body>
+      <nga-card-body class="demo-rating">
+        <span>Rating</span>
         <div>
-          <ngb-rating [(ngModel)]="rate1" max="{{ max1 }}" class="rating">
+          <ngb-rating [(rate)]="currentRate">
             <ng-template let-fill="fill">
-              <i *ngIf="fill === 100" class="ion-android-star"></i>
-              <i *ngIf="fill === 0" class="ion-android-star-outline"></i>
+              <span class="star" [class.filled]="fill === 100">&#9733;</span>
             </ng-template>
           </ngb-rating>
-          <span class="help-block">Rate: {{ rate1 }}</span>
+          <span>{{ currentRate }}</span>
         </div>
         <div>
-          <ngb-rating [(ngModel)]="rate2" max="{{ max2 }}" class="rating">
+          <ngb-rating [(rate)]="currentRate">
             <ng-template let-fill="fill">
-              <i *ngIf="fill === 100" class="ion-ios-heart"></i>
-              <i *ngIf="fill === 0" class="ion-ios-heart-outline"></i>
+              <span class="star" [class.filled]="fill === 100">&#9733;</span>
             </ng-template>
           </ngb-rating>
-          <span class="help-block">Rate: {{ rate2 }}</span>
-        </div>
-      </nga-card-body>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>
-        Selects
-      </nga-card-header>
-      <nga-card-body>
-        <div class="form-group">
-          <label for="exampleSelect1">Example select</label>
-          <select class="form-control" id="exampleSelect1">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="exampleSelect2">Example multiple select</label>
-          <select multiple class="form-control" id="exampleSelect2">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
+          <span>{{ currentRate }}</span>
         </div>
       </nga-card-body>
     </nga-card>
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts
index 8944204d..380631a2 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.ts
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts
@@ -5,11 +5,5 @@ import { Component } from '@angular/core';
   templateUrl: './form-inputs.component.html',
 })
 export class FormInputsComponent {
-
-  rate1: number = 3;
-  rate2: number = 4;
-
-  max1: number = 5;
-  max2: number = 10;
-
+  currentRate: number = 6;
 }
diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.html b/src/app/pages/forms/form-layouts/form-layouts.component.html
deleted file mode 100644
index 0e71dab6..00000000
--- a/src/app/pages/forms/form-layouts/form-layouts.component.html
+++ /dev/null
@@ -1,211 +0,0 @@
-<div class="row">
-  <div class="col-md-12">
-    <nga-card>
-      <nga-card-header>
-        Inline form
-      </nga-card-header>
-      <nga-card-body>
-        <form class="form-inline">
-          <label class="sr-only" for="inlineFormInput">Name</label>
-          <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
-
-          <label class="sr-only" for="inlineFormInputGroup">Username</label>
-          <div class="input-group mb-2 mr-sm-2 mb-sm-0">
-            <div class="input-group-addon">@</div>
-            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
-          </div>
-
-          <div class="form-check mb-2 mr-sm-2 mb-sm-0">
-            <label class="form-check-label">
-              <input class="form-check-input" type="checkbox"> Remember me
-            </label>
-          </div>
-
-          <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
-      </nga-card-body>
-    </nga-card>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-6">
-    <nga-card>
-      <nga-card-header>Using the Grid</nga-card-header>
-      <nga-card-body>
-        <form>
-          <div class="form-group row">
-            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
-            <div class="col-sm-10">
-              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
-            </div>
-          </div>
-          <div class="form-group row">
-            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
-            <div class="col-sm-10">
-              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
-            </div>
-          </div>
-          <fieldset class="form-group row">
-            <legend class="col-form-legend col-sm-2">Radios</legend>
-            <div class="col-sm-10">
-              <div class="form-check">
-                <label class="form-check-label">
-            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
-            Option one is this and that&mdash;be sure to include why it's great
-          </label>
-              </div>
-              <div class="form-check">
-                <label class="form-check-label">
-            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
-            Option two can be something else and selecting it will deselect option one
-          </label>
-              </div>
-              <div class="form-check disabled">
-                <label class="form-check-label">
-            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
-            Option three is disabled
-          </label>
-              </div>
-            </div>
-          </fieldset>
-          <div class="form-group row">
-            <label class="col-sm-2">Checkbox</label>
-            <div class="col-sm-10">
-              <div class="form-check">
-                <label class="form-check-label">
-            <input class="form-check-input" type="checkbox"> Check me out
-          </label>
-              </div>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="offset-sm-2 col-sm-10">
-              <button type="submit" class="btn btn-primary">Sign in</button>
-            </div>
-          </div>
-        </form>
-      </nga-card-body>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>
-        Form without labels
-      </nga-card-header>
-      <nga-card-body>
-        <form>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="Recipients">
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="Subject">
-          </div>
-          <div class="form-group">
-            <textarea class="form-control" placeholder="Message"></textarea>
-          </div>
-          <button type="submit" class="btn btn-success">Send</button>
-        </form>
-      </nga-card-body>
-    </nga-card>
-  </div>
-  <div class="col-md-6">
-    <nga-card>
-      <nga-card-header>
-        Basic form
-      </nga-card-header>
-      <nga-card-body>
-        <form>
-          <div class="form-group">
-            <label for="exampleInputEmail1">Email address</label>
-            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
-          </div>
-          <div class="form-group">
-            <label for="exampleInputPassword1">Password</label>
-            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-          </div>
-          <div class="form-group">
-            <label>
-              Check me out
-              <input type="checkbox"/>
-            </label>
-          </div>
-          <button type="submit" class="btn btn-danger">Submit</button>
-        </form>
-      </nga-card-body>
-    </nga-card>
-    <nga-card>
-      <nga-card-header>
-        Block form
-      </nga-card-header>
-      <nga-card-body>
-        <div class="row">
-          <div class="col-sm-6">
-            <div class="form-group">
-              <label for="inputFirstName">First Name</label>
-              <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
-            </div>
-          </div>
-          <div class="col-sm-6">
-            <div class="form-group">
-              <label for="inputLastName">Last Name</label>
-              <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-6">
-            <div class="form-group">
-              <label for="inputEmail">Email</label>
-              <input type="email" class="form-control" id="inputEmail" placeholder="Email">
-            </div>
-          </div>
-          <div class="col-sm-6">
-            <div class="form-group">
-              <label for="inputWebsite">Website</label>
-              <input type="text" class="form-control" id="inputWebsite" placeholder="Website">
-            </div>
-          </div>
-        </div>
-        <button type="submit" class="btn btn-primary">Submit</button>
-      </nga-card-body>
-    </nga-card>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-6">
-    <nga-card>
-      <nga-card-header>
-        Horizontal form
-      </nga-card-header>
-      <nga-card-body>
-        <form class="form-horizontal">
-          <div class="form-group row">
-            <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
-            <div class="col-sm-10">
-              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
-            </div>
-          </div>
-          <div class="form-group row">
-            <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
-            <div class="col-sm-10">
-              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
-                <label>
-                  Remember me
-                  <input type="checkbox"/>
-                </label>
-              </div>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="offset-sm-2 col-sm-10">
-              <button type="submit" class="btn btn-warning">Sign in</button>
-            </div>
-          </div>
-        </form>
-      </nga-card-body>
-    </nga-card>
-  </div>
-</div>
diff --git a/src/app/pages/forms/form-layouts/form-layouts.component.ts b/src/app/pages/forms/form-layouts/form-layouts.component.ts
deleted file mode 100644
index aab7e4b6..00000000
--- a/src/app/pages/forms/form-layouts/form-layouts.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-form-layouts',
-  templateUrl: './form-layouts.component.html',
-})
-export class FormLayoutsComponent {
-
-}
diff --git a/src/app/pages/forms/forms-routing.module.ts b/src/app/pages/forms/forms-routing.module.ts
index 2ce66ace..dc0f8b2f 100644
--- a/src/app/pages/forms/forms-routing.module.ts
+++ b/src/app/pages/forms/forms-routing.module.ts
@@ -3,7 +3,6 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { FormsComponent } from './forms.component';
 import { FormInputsComponent } from './form-inputs/form-inputs.component';
-import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
 
 const routes: Routes = [{
   path: '',
@@ -11,9 +10,6 @@ const routes: Routes = [{
   children: [{
     path: 'inputs',
     component: FormInputsComponent,
-  }, {
-    path: 'layouts',
-    component: FormLayoutsComponent,
   }],
 }];
 
@@ -32,5 +28,4 @@ export class FormsRoutingModule {
 export const routedComponents = [
   FormsComponent,
   FormInputsComponent,
-  FormLayoutsComponent,
 ];
diff --git a/src/app/pages/forms/forms.component.scss b/src/app/pages/forms/forms.component.scss
new file mode 100644
index 00000000..54a8544f
--- /dev/null
+++ b/src/app/pages/forms/forms.component.scss
@@ -0,0 +1,44 @@
+:host /deep/ {
+  .input-group {
+    margin-bottom: 1rem;
+  }
+
+  .validation-checkboxes {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .demo-checkboxes {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .demo-radio {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .demo-disabled-checkbox-radio {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .demo-checkboxes-radio {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .demo-rating {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .star {
+    font-size: 1.5rem;
+    color: #b0c4de;
+  }
+
+  .filled {
+    color: #1e90ff;
+  }
+}
diff --git a/src/app/pages/forms/forms.component.ts b/src/app/pages/forms/forms.component.ts
index 66202993..f306fc52 100644
--- a/src/app/pages/forms/forms.component.ts
+++ b/src/app/pages/forms/forms.component.ts
@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-form-elements',
+  styleUrls: ['./forms.component.scss'],
   template: `
     <router-outlet></router-outlet>
   `,
 })
 export class FormsComponent {
-
 }
diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts
index c365c4aa..54559f49 100644
--- a/src/app/pages/forms/forms.module.ts
+++ b/src/app/pages/forms/forms.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { SharedModule } from '../../shared.module';
 
@@ -8,6 +9,7 @@ import { FormsRoutingModule, routedComponents } from './forms-routing.module';
   imports: [
     SharedModule,
     FormsRoutingModule,
+    NgbModule,
   ],
   declarations: [
     ...routedComponents,
diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
index ffbacceb..ac8c103a 100644
--- a/src/app/pages/pages-menu.ts
+++ b/src/app/pages/pages-menu.ts
@@ -33,7 +33,7 @@ export const menuItems: List<NgaMenuItem> = List([{
   }, {
     title: 'Animated Searches',
     link: '/pages/ui-features/search-fields',
-  }, 
+  },
   {
     title: 'Tabs',
     link: '/pages/ui-features/tabs',
@@ -89,9 +89,6 @@ export const menuItems: List<NgaMenuItem> = List([{
   children: List<NgaMenuItem>([{
     title: 'Form Inputs',
     link: '/pages/forms/inputs',
-  }, {
-    title: 'Form Layouts',
-    link: '/pages/forms/layouts',
   }]),
 }, {
   title: 'Tables',