diff --git a/src/app/app.component.html b/src/app/app.component.html
index 05352eb512..e8eaf8fdf6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,11 +1,8 @@
-<td-layout #layout #root="$implicit" [dir]="direction">
+<td-layout #layout>
   <td-navigation-drawer sidenavTitle="Covalent" logo="assets:teradata">
     <md-nav-list>
       <a *ngFor="let item of routes" md-list-item (click)="layout.close()" [routerLink]="[item.route]"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
     </md-nav-list>
   </td-navigation-drawer>
-  <a md-fab color="accent" class="mat-fab-postion-bottom fixed" style="z-index: 999; bottom: 15px; margin: 20px; padding: 10px;" (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl'); changeDir(root);" title="Toggle between RTL and LTR"> 
-     {{root.dir.toUpperCase()}}
-  </a>
   <router-outlet></router-outlet>
 </td-layout>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 229804c7fd..dc92ef04b6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,6 @@
-import { Component, ElementRef, Inject, Renderer } from '@angular/core';
-import { DomSanitizer, DOCUMENT } from '@angular/platform-browser';
-import { MdIconRegistry, Dir } from '@angular/material';
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MdIconRegistry } from '@angular/material';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -36,13 +36,9 @@ export class DocsAppComponent {
     },
   ];
 
-  direction: string = 'ltr';
-
   constructor(private _iconRegistry: MdIconRegistry,
               private _domSanitizer: DomSanitizer,
-              translateService: TranslateService,
-              private el: ElementRef, private renderer: Renderer,
-              @Inject(DOCUMENT) private document: any) {
+              translateService: TranslateService) {
     // Set fallback language
     translateService.setDefaultLang('en');
     // Supported languages
@@ -67,9 +63,4 @@ export class DocsAppComponent {
     this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
       this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/querygrid.svg'));
   }
-
-  changeDir(root: Dir): void {
-    this.direction = root._dir;
-    this.renderer.setElementAttribute(this.document.querySelector('html'), 'dir', this.direction);
-  }
 }
diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html
index e120098096..278ff26993 100644
--- a/src/app/components/components/components.component.html
+++ b/src/app/components/components/components.component.html
@@ -1,4 +1,5 @@
 <td-layout-nav-list #navList
+                    #root="$implicit" dir="ltr"
                     logo="assets:teradata"
                     toolbarTitle="Covalent"
                     [opened]="media.registerQuery('gt-sm') | async"
@@ -48,6 +49,17 @@ <h3 md-line> {{item.title}} </h3>
   <div td-toolbar-content layout="row" layout-align="center center" flex>
     <span>Covalent Components &amp; Addons</span>
     <span flex></span>
+    <button md-icon-button [mdMenuTriggerFor]="settingsMenu">
+      <md-icon>more_vert</md-icon>
+    </button>
+    <md-menu #settingsMenu="mdMenu">
+      <button md-menu-item (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl'); changeDir(root.dir)" title="Toggle between RTL and LTR">
+        <md-icon>swap_horiz</md-icon>
+        <span>{{root.dir.toUpperCase()}}</span>
+      </button>
+    </md-menu>
+  </div>
+  <div>
+    <router-outlet></router-outlet>
   </div>
-  <router-outlet></router-outlet>
 </td-layout-nav-list>
\ No newline at end of file
diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
index a588d6317c..0a27398d6a 100644
--- a/src/app/components/components/components.component.ts
+++ b/src/app/components/components/components.component.ts
@@ -1,4 +1,5 @@
-import { Component, HostBinding, AfterViewInit } from '@angular/core';
+import { Component, HostBinding, AfterViewInit, ElementRef, Inject, Renderer } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
 import { TdMediaService } from '@covalent/core';
 
 import { fadeAnimation } from '../../app.animations';
@@ -135,10 +136,16 @@ export class ComponentsComponent implements AfterViewInit {
     title: 'NGX-Translate',
   }];
 
-  constructor(public media: TdMediaService) {}
+  constructor(public media: TdMediaService,
+              private _renderer: Renderer,
+              @Inject(DOCUMENT) private _document: HTMLElement) {}
 
   ngAfterViewInit(): void {
     // broadcast to all listener observables when loading the page
     this.media.broadcast();
   }
+
+  changeDir(dir: string): void {
+    this._renderer.setElementAttribute(this._document.querySelector('html'), 'dir', dir);
+  }
 }
diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss
index 4862a4dd53..1dd50216e7 100644
--- a/src/platform/core/chips/chips.component.scss
+++ b/src/platform/core/chips/chips.component.scss
@@ -1,3 +1,5 @@
+@import '../common/styles/mixins';
+
 :host {
   display: block;
   padding: 0px 5px 0px 5px;
@@ -6,12 +8,7 @@
     cursor: default;
     border-radius: 16px;
     line-height: 32px;    
-    [dir='ltr'] & { 
-      margin: 8px 8px 0 0;
-    }
-    [dir='rtl'] & { 
-      margin: 8px 0 0 8px;
-    }
+    @include rtl(margin, 8px 8px 0 0, 8px 0 0 8px);
     padding: 0 12px;
     box-sizing: border-box;
     max-width: 100%;
@@ -19,12 +16,8 @@
     md-icon {
       position: relative;
       top: 5px;
-      [dir='ltr'] & { 
-        left: 5px;
-      }
-      [dir='rtl'] & { 
-        right: 5px;
-      }
+      @include rtl(left, 5px, auto);
+      @include rtl(right, auto, 5px);
       height: 18px;
       width: 18px;
       font-size: 19px;
diff --git a/src/platform/core/common/styles/_structure.scss b/src/platform/core/common/styles/_structure.scss
index 7ef67a2a15..477c56cb31 100644
--- a/src/platform/core/common/styles/_structure.scss
+++ b/src/platform/core/common/styles/_structure.scss
@@ -109,8 +109,11 @@ input {
   pointer-events: none;
   position: absolute;
   overflow: hidden;  
-  [dir='ltr'] & {left: 0;}
-  [dir='rtl'] & {right:0;}
+  left: 0;
+  [dir='rtl'] & {
+    right:0;
+    left: auto;
+  }
   top: 0;
   width: 100%;
   height: 100%;
@@ -124,8 +127,11 @@ input {
   pointer-events: none;
   position: absolute;
   overflow: hidden;
-  [dir='ltr'] & {left: 0;}
-  [dir='rtl'] & {right:0;}
+  left: 0;
+  [dir='rtl'] & {
+    right:0;
+    left: auto;
+  }
   top: 0;
   width: 100%;
   height: 100%;
@@ -174,8 +180,11 @@ input {
     display: block;
     position: absolute;
     background-color: #fafafa;    
-    [dir='ltr'] & {right: 0;}
-    [dir='rtl'] & {left:0;}
+    right: 0;
+    [dir='rtl'] & {
+      left:0;
+      right: auto;
+    }
     top: 0;
     bottom: 0;
     z-index: $z-index-scroll-mask;
diff --git a/src/platform/core/common/styles/_toolbar.scss b/src/platform/core/common/styles/_toolbar.scss
index 29e3642855..6d216511e5 100644
--- a/src/platform/core/common/styles/_toolbar.scss
+++ b/src/platform/core/common/styles/_toolbar.scss
@@ -2,18 +2,26 @@ md-toolbar {
     [md-button] {
         &:first-of-type:not(:last-child) {
             
-            [dir='ltr'] & {margin-left: -6px;}
-            [dir='rtl'] & {margin-right: -6px;}
+            margin-left: -6px;
+            [dir='rtl'] & {
+                margin-right: -6px;
+                margin-left: 0;
+            }
         }
         &:last-of-type:not(:first-child) {
-            [dir='ltr'] & {margin-right: -6px;}
-            [dir='rtl'] & {margin-left: -6px;}
+            margin-right: -6px;
+            [dir='rtl'] & {
+                margin-left: -6px;
+                margin-right: 0;
+            }
         }
     }
     .md-icon-logo {
         margin-right: 10px;
-        [dir='ltr'] & {margin-right: 10px;}
-        [dir='rtl'] & {margin-left: 10px;}
+        [dir='rtl'] & {
+            margin-left: 10px;
+            margin-right: 0;
+        }
     }
     [md-icon-button] {
         margin: 0 6px;
diff --git a/src/platform/core/common/styles/utilities/_pad.scss b/src/platform/core/common/styles/utilities/_pad.scss
index fb306ede32..b0dca866be 100644
--- a/src/platform/core/common/styles/utilities/_pad.scss
+++ b/src/platform/core/common/styles/utilities/_pad.scss
@@ -1,7 +1,7 @@
 //
 // Pad (padding)
 // --------------------------------------------------
-
+body {
 	.pad {
 		padding: 20px;
 	}
@@ -53,46 +53,38 @@
 	}
 
 	.pad-right {
-      	[dir='ltr'] & { padding-right: 20px;}
-      	[dir='rtl'] & { padding-left: 20px;}
+    padding-right: 20px;
 	}
 
 
 
 
 	.pad-right-xxl {
-      	[dir='ltr'] & { padding-right: 60px;}
-      	[dir='rtl'] & { padding-left: 60px;}
+    padding-right: 60px;
 	}
 
 	.pad-right-xl {
-      	[dir='ltr'] & { padding-right: 50px;}
-      	[dir='rtl'] & { padding-left: 50px;}
+    padding-right: 50px;
 	}
 
 	.pad-right-lg {
-      	[dir='ltr'] & { padding-right: 40px;}
-      	[dir='rtl'] & { padding-left: 40px;}
+    padding-right: 40px;
 	}
 
 	.pad-right-md {
-      	[dir='ltr'] & { padding-right: 30px;}
-      	[dir='rtl'] & { padding-left: 30px;}
+    padding-right: 30px;
 	}
 
 	.pad-right-sm {
-      	[dir='ltr'] & { padding-right: 10px;}
-      	[dir='rtl'] & { padding-left: 10px;}
+    padding-right: 10px;
 	}
 
 	.pad-right-xs {
-      	[dir='ltr'] & { padding-right: 5px;}
-      	[dir='rtl'] & { padding-left: 5px;}
+    padding-right: 5px;
 	}
 	
 	.pad-right-none {
-      	[dir='ltr'] & { padding-right: 0px;}
-      	[dir='rtl'] & { padding-left: 0px;}
+    padding-right: 0px;
 	}
 
 	.pad-bottom {
@@ -124,42 +116,34 @@
 	}
 
 	.pad-left {
-      	[dir='ltr'] & { padding-left: 20px;}
-      	[dir='rtl'] & { padding-right: 20px;}
+    padding-left: 20px;
 	}
 
 	.pad-left-xxl {
-      	[dir='ltr'] & { padding-left: 60px;}
-      	[dir='rtl'] & { padding-right: 60px;}
+    padding-left: 60px;
 	}
 
 	.pad-left-xl {
-      	[dir='ltr'] & { padding-left: 50px;}
-      	[dir='rtl'] & { padding-right: 50px;}
+    padding-left: 50px;
 	}
 
 	.pad-left-lg {
-      	[dir='ltr'] & { padding-left: 40px;}
-      	[dir='rtl'] & { padding-right: 40px;}
+    padding-left: 40px;
 	}
 
 	.pad-left-md {
-      	[dir='ltr'] & { padding-left: 30px;}
-      	[dir='rtl'] & { padding-right: 30px;}
+    padding-left: 30px;
 	}
 
 	.pad-left-sm {
-      	[dir='ltr'] & { padding-left: 10px;}
-      	[dir='rtl'] & { padding-right: 10px;}
+    padding-left: 10px;
 	}
 
 	.pad-left-xs {
-      	[dir='ltr'] & { padding-left: 5px;}
-      	[dir='rtl'] & { padding-right: 5px;}
+    padding-left: 5px;
 	}
 
 	.pad-left-none {
-      	[dir='ltr'] & { padding-left: 0px;}
-      	[dir='rtl'] & { padding-right: 0px;}
+    padding-left: 0px;
 	}
-
+}
diff --git a/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss b/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss
index 4600f5aee7..6351129026 100644
--- a/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss
+++ b/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss
@@ -6,12 +6,12 @@
   padding: 0 28px 0 28px;
 
   &:first-child {
-        [dir='ltr'] & { padding-left: 24px;}
-        [dir='rtl'] & { padding-right: 24px;}
+    @include rtl(padding-left, 24px, initial);
+    @include rtl(padding-right, initial, 24px);
   }
   &:last-child {
-        [dir='ltr'] & { padding-right: 24px;}
-        [dir='rtl'] & { padding-left: 24px;}
+    @include rtl(padding-left, initial, 24px);
+    @include rtl(padding-right, 24px, initial);
   }
 
   > * {
diff --git a/src/platform/core/data-table/data-table-column/data-table-column.component.scss b/src/platform/core/data-table/data-table-column/data-table-column.component.scss
index 5ff9d81e6e..b536fb0131 100644
--- a/src/platform/core/data-table/data-table-column/data-table-column.component.scss
+++ b/src/platform/core/data-table/data-table-column/data-table-column.component.scss
@@ -8,12 +8,12 @@
   position: relative;
 
   &:first-child {
-        [dir='ltr'] & { padding-left: 24px;}
-        [dir='rtl'] & { padding-right: 24px;}
+    @include rtl(padding-left, 24px, initial);
+    @include rtl(padding-right, initial, 24px);
   }
   &:last-child {
-        [dir='ltr'] & { padding-right: 24px;}
-        [dir='rtl'] & { padding-left: 24px;}
+    @include rtl(padding-left, initial, 24px);
+    @include rtl(padding-right, 24px, initial);
   }
 
   md-icon {
@@ -62,14 +62,14 @@
   &.mat-numeric {
   @include rtl(text-align, right, left);
     md-icon.td-data-table-sort-icon {
-        [dir='ltr'] & { margin-left: -22px;}
-        [dir='rtl'] & { margin-right: -22px;}
+        @include rtl(margin-left, -22px, initial);
+        @include rtl(margin-right, initial, -22px);
     }
   }
   &:not(.mat-numeric) {
     md-icon.td-data-table-sort-icon {
-        [dir='ltr'] & { margin-left: 6px;}
-        [dir='rtl'] & { margin-right: 6px;}
+        @include rtl(margin-left, 6px, initial);
+        @include rtl(margin-right, initial, 6px);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/platform/core/data-table/data-table.component.scss b/src/platform/core/data-table/data-table.component.scss
index 409b022b2f..56e91ad615 100644
--- a/src/platform/core/data-table/data-table.component.scss
+++ b/src/platform/core/data-table/data-table.component.scss
@@ -13,15 +13,21 @@ table.td-data-table {
     transition: background-color 0.2s;
   }
 
-  &.mat-selectable td.td-data-table-cell,
-  &.mat-selectable th.td-data-table-column {
+  &.mat-selectable .td-data-table-column,
+  &.mat-selectable th.td-data-table-column,
+  &.mat-selectable td.td-data-table-cell {
     &:first-child {
       width: 20px;
       padding: 0 24px;
     }
     &:nth-child(2) {
-      [dir='ltr'] & { padding-left: 0px;}
-      [dir='rtl'] & { padding-right: 0px;}
+      padding-left: 0px;
+    }
+    [dir='rtl'] & {
+      &:nth-child(2){
+        padding-right: 0px;
+        padding-left: 28px;
+      }
     }
   }
 
@@ -34,8 +40,7 @@ table.td-data-table {
       height: $checkbox-size;
       /deep/ &.mat-pseudo-checkbox-checked::after {
         top: 3px !important;        
-        [dir='ltr'] & { left: 1px !important;}
-        [dir='rtl'] & { right: 1px !important;}
+        left: 1px !important;
         width: 11px !important;
         height: 4px !important;
       }
diff --git a/src/platform/core/dialogs/dialog.component.scss b/src/platform/core/dialogs/dialog.component.scss
index 77a08b7ee7..1762423a31 100644
--- a/src/platform/core/dialogs/dialog.component.scss
+++ b/src/platform/core/dialogs/dialog.component.scss
@@ -10,11 +10,10 @@
 .td-dialog-actions {
   position: relative;
   top: 16px;
-  [dir='ltr'] & { 
-      left: 16px;
-  }
-  [dir='rtl'] & { 
-      right: 16px;
+  left: 16px;
+  /deep/ [dir='rtl'] & { 
+    right: 16px;
+    left: auto;
   }
 }
 
@@ -23,11 +22,10 @@
   .td-dialog-actions {
     /deep/ button {
       text-transform: uppercase;
-      [dir='ltr'] & { 
-        margin-left: 8px;
-      }
+      margin-left: 8px;
       [dir='rtl'] & { 
         margin-right: 8px;
+        margin-left: inherit;
       }
       padding-left: 8px;
       padding-right: 8px;
diff --git a/src/platform/core/expansion-panel/_expansion-panel-theme.scss b/src/platform/core/expansion-panel/_expansion-panel-theme.scss
index d7ab44b0ff..ab9c565404 100644
--- a/src/platform/core/expansion-panel/_expansion-panel-theme.scss
+++ b/src/platform/core/expansion-panel/_expansion-panel-theme.scss
@@ -34,15 +34,6 @@
     }
     .td-expansion-primary,
     .td-expansion-secondary {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-     [dir='ltr'] & { 
-       margin-right: 5px;
-     }
-     [dir='rtl'] & { 
-       margin-left: 5px;
-     }
       &, & * {
         vertical-align: middle;
       }
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.scss b/src/platform/core/expansion-panel/expansion-panel.component.scss
index 4f860b781b..29a7530ca9 100644
--- a/src/platform/core/expansion-panel/expansion-panel.component.scss
+++ b/src/platform/core/expansion-panel/expansion-panel.component.scss
@@ -37,10 +37,9 @@ md-nav-list {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  [dir='ltr'] & { 
-    margin-right: 5px;
-  }
-  [dir='rtl'] & { 
+  margin-right: 5px;
+  /deep/ [dir='rtl'] & { 
     margin-left: 5px;
+    margin-right: inherit;
   }
 }
\ No newline at end of file
diff --git a/src/platform/core/file/file-upload/file-upload.component.scss b/src/platform/core/file/file-upload/file-upload.component.scss
index 6600c475fb..62dad5def5 100644
--- a/src/platform/core/file/file-upload/file-upload.component.scss
+++ b/src/platform/core/file/file-upload/file-upload.component.scss
@@ -1,27 +1,29 @@
-:host {
-  .td-file-upload {
-    padding-left: 8px;
-    padding-right: 8px;
+.td-file-upload {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.td-file-upload-cancel {
+  height: 24px;
+  width: 24px;
+  position: relative;
+  top: 24px;
+  left: -12px;
+  /deep/ [dir='rtl'] & {
+    right: -12px;
+    left: 0;
   }
-  .td-file-upload-cancel {
-    height: 24px;
-    width: 24px;
-    position: relative;
-    top: 24px;
-    left: -12px;
-    md-icon {
-      border-radius: 12px;
-      vertical-align: baseline;
-    }
+  md-icon {
+    border-radius: 12px;
+    vertical-align: baseline;
   }
-  /**
-  * Class that is added ondragenter by the [TdFileDrop] directive.
-  */
-  .drop-zone {
-    // Animation.
-    border-radius: 3px;
-    * {
-      pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements
-    }
+}
+/**
+* Class that is added ondragenter by the [TdFileDrop] directive.
+*/
+.drop-zone {
+  // Animation.
+  border-radius: 3px;
+  * {
+    pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements
   }
 }
diff --git a/src/platform/core/json-formatter/json-formatter.component.html b/src/platform/core/json-formatter/json-formatter.component.html
index 79f98b7847..14058f44c0 100644
--- a/src/platform/core/json-formatter/json-formatter.component.html
+++ b/src/platform/core/json-formatter/json-formatter.component.html
@@ -7,7 +7,7 @@
      layout="row"
      layout-align="start center"
      (click)="toggle()">
-    <md-icon class="tc-grey-600" *ngIf="hasChildren()">{{open? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</md-icon>
+    <md-icon class="tc-grey-600" *ngIf="hasChildren()">{{open? 'keyboard_arrow_down' : (isRTL ? 'keyboard_arrow_left' : 'keyboard_arrow_right')}}</md-icon>
     <span *ngIf="key" class="key">{{key}}:</span>
     <span class="value">
       <span [class.td-empty]="!hasChildren()" *ngIf="isObject()" [mdTooltip]="getPreview()" mdTooltipPosition="after">
diff --git a/src/platform/core/json-formatter/json-formatter.component.scss b/src/platform/core/json-formatter/json-formatter.component.scss
index 40760a7b80..9ae682200c 100644
--- a/src/platform/core/json-formatter/json-formatter.component.scss
+++ b/src/platform/core/json-formatter/json-formatter.component.scss
@@ -15,13 +15,25 @@
     & .td-key,
     & .td-object-children {
       padding-left: 24px;
+      /deep/ [dir='rtl'] & {
+        padding-right: 24px;
+        padding-left: 0;
+      }
       &.td-key-leaf {
         padding-left: 48px;
+        /deep/ [dir='rtl'] & {
+          padding-right: 48px;
+          padding-left: 0;
+        }
       }
     }
   }
   .value {
     margin-left: 5px;
+    /deep/ [dir='rtl'] & {
+      padding-right: 5px;
+      padding-left: 0;
+    }
     .td-empty {
       opacity: .5;
       text-decoration: line-through;
diff --git a/src/platform/core/json-formatter/json-formatter.component.ts b/src/platform/core/json-formatter/json-formatter.component.ts
index 37cb99ff92..456b77c827 100644
--- a/src/platform/core/json-formatter/json-formatter.component.ts
+++ b/src/platform/core/json-formatter/json-formatter.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, Optional } from '@angular/core';
+import { Dir } from '@angular/material';
 import { TdCollapseAnimation } from '../common/common.module';
 
 @Component({
@@ -83,7 +84,15 @@ export class TdJsonFormatterComponent {
     return this._children;
   }
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {
+  get isRTL(): boolean {
+    if (this._dir) {
+      return this._dir.dir === 'rtl';
+    }
+    return false;
+  }
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef,
+              @Optional() private _dir: Dir) {
   }
 
   /**
diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss
index 949c1c7227..f74770e84e 100644
--- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss
+++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss
@@ -1,3 +1,11 @@
+.td-menu-button {
+  margin-left: 0px;
+  /deep/ [dir='rtl'] & { 
+    margin-right: 0px;
+    margin-left: 6px;
+  }
+}
+
 :host {
   display: flex;
   margin: 0;
@@ -15,14 +23,6 @@
       }
     }
   }
-  .td-menu-button {
-    [dir='ltr'] & { 
-      margin-left: 0px;
-    }
-    [dir='rtl'] & { 
-      margin-right: 0px;
-    }
-  }
   .list {
     text-align: start;
   }
diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
index 2927ec1825..ec2b7a7549 100644
--- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
+++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss
@@ -1,3 +1,11 @@
+.td-menu-button {
+  margin-left: 0px;
+  /deep/ [dir='rtl'] & { 
+    margin-right: 0px;
+    margin-left: 6px;
+  }
+}
+
 :host {
   display: flex;
   margin: 0;
@@ -15,14 +23,6 @@
       }
     }
   }
-  .td-menu-button {
-    [dir='ltr'] & { 
-      margin-left: 0px;
-    }
-    [dir='rtl'] & { 
-      margin-right: 0px;
-    }
-  }
   .list {
     text-align: start;
   }
diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.scss b/src/platform/core/layout/layout-nav/layout-nav.component.scss
index 9664e6c95e..05c007974b 100644
--- a/src/platform/core/layout/layout-nav/layout-nav.component.scss
+++ b/src/platform/core/layout/layout-nav/layout-nav.component.scss
@@ -1,3 +1,11 @@
+.td-menu-button {
+  margin-left: 0px;
+  /deep/ [dir='rtl'] & { 
+    margin-right: 0px;
+    margin-left: 6px;
+  }
+}
+
 :host {
   display: flex;
   margin: 0;
@@ -5,12 +13,4 @@
   min-height: 100%;
   height: 100%;
   overflow: hidden;
-  .td-menu-button {
-    [dir='ltr'] & { 
-      margin-left: 0px;
-    }
-    [dir='rtl'] & { 
-      margin-right: 0px;
-    }
-  }
 }
diff --git a/src/platform/core/menu/menu.component.scss b/src/platform/core/menu/menu.component.scss
index d7074c36f7..122baacd63 100644
--- a/src/platform/core/menu/menu.component.scss
+++ b/src/platform/core/menu/menu.component.scss
@@ -18,11 +18,10 @@ $td-menu-spacing: 8px !default;
       height: auto;
       padding: $td-menu-spacing;
       .mat-list-text {
-        [dir='ltr'] & { 
-          padding-right: 0px;
-        }
+        padding-right: 0px;
         [dir='rtl'] & { 
           padding-left: 0px;
+          padding-right: 16px;
         }
       }
       [md-line] + [md-line] {
diff --git a/src/platform/core/notifications/notification-count.component.scss b/src/platform/core/notifications/notification-count.component.scss
index 2dbd95e371..c18186e19d 100644
--- a/src/platform/core/notifications/notification-count.component.scss
+++ b/src/platform/core/notifications/notification-count.component.scss
@@ -1,4 +1,3 @@
-@import '../common/styles/mixins';
 $td-notification-size: 20px !default;
 $td-notification-content-size: 40px !default;
 
@@ -40,21 +39,10 @@ $td-notification-content-size: 40px !default;
     bottom: 0px;
   }
   &.td-notification-before {
-    
-        [dir='ltr'] & { 
-          left: 0px;
-        }
-        [dir='rtl'] & { 
-          right: 0px;
-        }
+    left: 0px
   }
   &.td-notification-after {
-        [dir='ltr'] & { 
-          right: 0px;
-        }
-        [dir='rtl'] & { 
-          left: 0px;
-        }
+    right: 0px;
   }
   &.td-notification-no-count {
     width: 8px;
@@ -66,39 +54,29 @@ $td-notification-content-size: 40px !default;
       bottom: 8px;
     }
     &.td-notification-before {
-        [dir='ltr'] & { 
-          left: 8px;
-        }
-        [dir='rtl'] & { 
-          right: 8px;
-        }
+      left: 8px;
     }
     &.td-notification-after {
-        [dir='ltr'] & { 
-          right: 8px;
-        }
-        [dir='rtl'] & { 
-          left: 8px;
-        }
+      right: 8px;
     }
   }
   /deep/ [dir='rtl'] & {
     &.td-notification-before {
-      @include rtl(right, 0px,auto);
-      @include rtl(left, auto, 0px);
+      right: 0px;
+      left: auto;
     }
     &.td-notification-after {
-      @include rtl(left, 0px,auto);
-      @include rtl(right, auto, 0px);
+      left: 0px;
+      right: auto;
     }
      &.td-notification-no-count {
       &.td-notification-before {
-        @include rtl(right, 8px,auto);
-        @include rtl(left, auto, 8px);
+        right: 8px;
+        left: auto;
       }
       &.td-notification-after {
-        @include rtl(left, 8px,auto);
-        @include rtl(right, auto, 8px);
+        left: 8px;
+        right: auto;
       }
     }
   }
diff --git a/src/platform/core/paging/paging-bar.component.html b/src/platform/core/paging/paging-bar.component.html
index fbbdd790eb..879071c056 100644
--- a/src/platform/core/paging/paging-bar.component.html
+++ b/src/platform/core/paging/paging-bar.component.html
@@ -13,16 +13,16 @@
   </div>
   <div class="td-paging-bar-navigation">
     <button md-icon-button type="button" *ngIf="firstLast" [disabled]="isMinPage()" (click)="firstPage()">
-      <md-icon>skip_previous</md-icon>
+      <md-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</md-icon>
     </button>
     <button md-icon-button type="button" [disabled]="isMinPage()" (click)="prevPage()">
-      <md-icon>navigate_before</md-icon>
+      <md-icon>{{ isRTL ? 'navigate_next' : 'navigate_before' }}</md-icon>
     </button>
     <button md-icon-button type="button" [disabled]="isMaxPage()" (click)="nextPage()">
-      <md-icon>navigate_next</md-icon>
+      <md-icon>{{ isRTL ? 'navigate_before' : 'navigate_next' }}</md-icon>
     </button>
     <button md-icon-button type="button" *ngIf="firstLast" [disabled]="isMaxPage()" (click)="lastPage()">
-      <md-icon>skip_next</md-icon>
+      <md-icon>{{ isRTL ? 'skip_previous' : 'skip_next' }}</md-icon>
     </button>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/platform/core/paging/paging-bar.component.scss b/src/platform/core/paging/paging-bar.component.scss
index 1380a6d3be..de8bfba03b 100644
--- a/src/platform/core/paging/paging-bar.component.scss
+++ b/src/platform/core/paging/paging-bar.component.scss
@@ -25,13 +25,4 @@ md-select {
       display: none;
     }
   }
-}
-.td-paging-size {
-  margin-right: -5px;
-  [dir='ltr'] & { 
-    margin-right: -5px;
-  }
-  [dir='rtl'] & { 
-    margin-left: -5px;
-  }
 }
\ No newline at end of file
diff --git a/src/platform/core/paging/paging-bar.component.ts b/src/platform/core/paging/paging-bar.component.ts
index 55ca19a5b1..66218344ff 100644
--- a/src/platform/core/paging/paging-bar.component.ts
+++ b/src/platform/core/paging/paging-bar.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, Optional } from '@angular/core';
+import { Dir } from '@angular/material';
 
 export interface IPageChangeEvent {
   page: number;
@@ -126,6 +127,15 @@ export class TdPagingBarComponent implements OnInit {
    */
   @Output('change') onChange: EventEmitter<IPageChangeEvent> = new EventEmitter<IPageChangeEvent>();
 
+  get isRTL(): boolean {
+    if (this._dir) {
+      return this._dir.dir === 'rtl';
+    }
+    return false;
+  }
+
+  constructor(@Optional() private _dir: Dir) {}
+
   ngOnInit(): void {
     this._page = this.initialPage;
     this._calculateRows();
diff --git a/src/platform/core/search/search-box/search-box.component.scss b/src/platform/core/search/search-box/search-box.component.scss
index 2b2ec421b1..6ea421b2f8 100644
--- a/src/platform/core/search/search-box/search-box.component.scss
+++ b/src/platform/core/search/search-box/search-box.component.scss
@@ -4,18 +4,15 @@
 .td-search-box {
   height: 64px;
   td-search-input {
+    margin-left: 12px;
+    /deep/ [dir='rtl'] & { 
+      margin-right: 12px;
+      margin-left: 0px !important;
+    }
     /deep/ {
       .mat-input-placeholder.mat-focused {
         visibility: hidden;
       }
     }
-
-    [dir='ltr'] & { 
-      margin-left: 12px;
-    }
-    [dir='rtl'] & { 
-      margin-right: 12px;
-    }
-
   }
 }
\ No newline at end of file
diff --git a/src/platform/core/search/search-box/search-box.component.ts b/src/platform/core/search/search-box/search-box.component.ts
index 839fa10575..099fda29ec 100644
--- a/src/platform/core/search/search-box/search-box.component.ts
+++ b/src/platform/core/search/search-box/search-box.component.ts
@@ -12,10 +12,12 @@ import { TdSearchInputComponent } from '../search-input/search-input.component';
       state('false', style({
         width: '0%',
         'margin-left': '0px',
+        'margin-right': '0px',
       })),
       state('true',  style({
         width: '100%',
         'margin-left': '*',
+        'margin-right': '*',
       })),
       transition('0 => 1', animate('200ms ease-in')),
       transition('1 => 0', animate('200ms ease-out')),
diff --git a/src/platform/core/search/search-input/search-input.component.html b/src/platform/core/search/search-input/search-input.component.html
index c6bfcb764c..5d97c7279b 100644
--- a/src/platform/core/search/search-input/search-input.component.html
+++ b/src/platform/core/search/search-input/search-input.component.html
@@ -11,7 +11,7 @@
   </md-input-container>
   <button md-icon-button
           type="button"
-          [@searchState]="searchElement.value ? true : false"
+          [@searchState]="(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))"
           (click)="clearSearch()"
           flex="none">
     <md-icon>cancel</md-icon>
diff --git a/src/platform/core/search/search-input/search-input.component.scss b/src/platform/core/search/search-input/search-input.component.scss
index 1c8b73cfd6..233df8ecc8 100644
--- a/src/platform/core/search/search-input/search-input.component.scss
+++ b/src/platform/core/search/search-input/search-input.component.scss
@@ -1,6 +1,6 @@
 .td-search-input {
   height: 64px;
-  overflow: hidden;
+  overflow-x: hidden;
   /deep/ md-input-container.mat-hide-underline {
     .mat-input-underline {
       display: none;
diff --git a/src/platform/core/search/search-input/search-input.component.ts b/src/platform/core/search/search-input/search-input.component.ts
index 62c1829ef3..fad6cae28f 100644
--- a/src/platform/core/search/search-input/search-input.component.ts
+++ b/src/platform/core/search/search-input/search-input.component.ts
@@ -1,7 +1,7 @@
 import { Component, ViewChild, OnInit, Input, Output, EventEmitter,
-         trigger, state, style, transition, animate } from '@angular/core';
+         trigger, state, style, transition, animate, Optional } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MdInputDirective } from '@angular/material';
+import { MdInputDirective, Dir } from '@angular/material';
 import 'rxjs/add/operator/debounceTime';
 
 @Component({
@@ -10,16 +10,20 @@ import 'rxjs/add/operator/debounceTime';
   styleUrls: ['./search-input.component.scss' ],
   animations: [
     trigger('searchState', [
-      state('false', style({
+      state('hide-left', style({
+        transform: 'translateX(-150%)',
+        display: 'none',
+      })),
+      state('hide-right', style({
         transform: 'translateX(150%)',
         display: 'none',
       })),
-      state('true',  style({
+      state('show',  style({
         transform: 'translateX(0%)',
         display: 'block',
       })),
-      transition('0 => 1', animate('200ms ease-in')),
-      transition('1 => 0', animate('200ms ease-out')),
+      transition('* => show', animate('200ms ease-in')),
+      transition('show => *', animate('200ms ease-out')),
     ]),
   ],
 })
@@ -71,6 +75,16 @@ export class TdSearchInputComponent implements OnInit {
    */
   @Output('blur') onBlur: EventEmitter<void> = new EventEmitter<void>();
 
+  get isRTL(): boolean {
+    if (this._dir) {
+      return this._dir.dir === 'rtl';
+    }
+    return false;
+  }
+
+  constructor(@Optional() private _dir: Dir) {
+  }
+
   ngOnInit(): void {
     this._input._ngControl.valueChanges
       .skip(1) // skip first change when value is set to undefined
diff --git a/src/platform/core/steps/step-header/step-header.component.scss b/src/platform/core/steps/step-header/step-header.component.scss
index 1f05a06f04..d42e54421a 100644
--- a/src/platform/core/steps/step-header/step-header.component.scss
+++ b/src/platform/core/steps/step-header/step-header.component.scss
@@ -24,7 +24,7 @@ $step-circle: 24px;
 }
 .td-step-header {
   md-icon.td-edit-icon {
-    margin-inline-end: 8px;
+    margin: 0 8px;
   }
 }
 md-icon {
diff --git a/src/styles.scss b/src/styles.scss
index 4611a3de1d..fe4daf3902 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,9 +10,7 @@
 }
 
 .cdk-overlay-pane {
-  html[dir="ltr"] & {
-    direction: ltr;
-  }
+  direction: ltr;
   html[dir="rtl"] & {
     direction: rtl;
   }