diff --git a/app/assets/javascripts/application.ts b/app/assets/javascripts/application.ts
index f6b846289..9dc3c4748 100644
--- a/app/assets/javascripts/application.ts
+++ b/app/assets/javascripts/application.ts
@@ -1,3 +1,4 @@
+import { InputModalScope } from './directives/views/inputModal';
 import { PasswordWizardType, PasswordWizardScope } from './types';
 import {
   Environment,
@@ -226,7 +227,7 @@ export class WebApplication extends SNApplication {
   }
 
   presentPasswordModal(callback: () => void) {
-    const scope: any = this.scope!.$new(true);
+    const scope = this.scope!.$new(true) as InputModalScope;
     scope.type = "password";
     scope.title = "Decryption Assistance";
     scope.message = `Unable to decrypt this item with your current keys. 
@@ -234,8 +235,8 @@ export class WebApplication extends SNApplication {
     scope.callback = callback;
     const el = this.$compile!(
       `<input-modal type='type' message='message' 
-     title='title' callback='callback'></input-modal>`
-    )(scope);
+     title='title' callback='callback()'></input-modal>`
+    )(scope as any);
     angular.element(document.body).append(el);
   }
 
diff --git a/app/assets/javascripts/directives/views/componentModal.js b/app/assets/javascripts/directives/views/componentModal.js
deleted file mode 100644
index ef277014c..000000000
--- a/app/assets/javascripts/directives/views/componentModal.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import template from '%/directives/component-modal.pug';
-
-export class ComponentModalCtrl {
-  /* @ngInject */
-  constructor($element) {
-    this.$element = $element;
-  }
-
-  dismiss() {
-    if(this.onDismiss) {
-      this.onDismiss(this.component);
-    }
-    this.callback && this.callback();
-    const elem = this.$element;
-    const scope = elem.scope();
-    scope.$destroy();
-    elem.remove();
-  }
-}
-
-export class ComponentModal {
-  constructor() {
-    this.restrict = 'E';
-    this.template = template;
-    this.controller = ComponentModalCtrl;
-    this.controllerAs = 'ctrl';
-    this.bindToController = true;
-    this.scope = {
-      show: '=',
-      component: '=',
-      callback: '=',
-      onDismiss: '&',
-      application: '='
-    };
-  }
-}
diff --git a/app/assets/javascripts/directives/views/componentModal.ts b/app/assets/javascripts/directives/views/componentModal.ts
new file mode 100644
index 000000000..a884ec645
--- /dev/null
+++ b/app/assets/javascripts/directives/views/componentModal.ts
@@ -0,0 +1,50 @@
+import { WebApplication } from './../../application';
+import { SNComponent } from 'snjs';
+import { WebDirective } from './../../types';
+import template from '%/directives/component-modal.pug';
+
+type ComponentModalScope = {
+  component: SNComponent
+  callback: () => void
+  onDismiss: (component: SNComponent) => void
+  application: WebApplication
+}
+
+export class ComponentModalCtrl implements ComponentModalScope {
+  $element: JQLite
+  component!: SNComponent
+  callback!: () => void
+  onDismiss!: (component: SNComponent) => void
+  application!: WebApplication
+  
+  /* @ngInject */
+  constructor($element: JQLite) {
+    this.$element = $element;
+  }
+
+  dismiss() {
+    this.onDismiss && this.onDismiss(this.component);
+    this.callback && this.callback();
+    const elem = this.$element;
+    const scope = elem.scope();
+    scope.$destroy();
+    elem.remove();
+  }
+}
+
+export class ComponentModal extends WebDirective {
+  constructor() {
+    super();
+    this.restrict = 'E';
+    this.template = template;
+    this.controller = ComponentModalCtrl;
+    this.controllerAs = 'ctrl';
+    this.bindToController = true;
+    this.scope = {
+      component: '=',
+      callback: '=',
+      onDismiss: '&',
+      application: '='
+    };
+  }
+}
diff --git a/app/assets/javascripts/directives/views/index.js b/app/assets/javascripts/directives/views/index.ts
similarity index 100%
rename from app/assets/javascripts/directives/views/index.js
rename to app/assets/javascripts/directives/views/index.ts
diff --git a/app/assets/javascripts/directives/views/inputModal.js b/app/assets/javascripts/directives/views/inputModal.ts
similarity index 51%
rename from app/assets/javascripts/directives/views/inputModal.js
rename to app/assets/javascripts/directives/views/inputModal.ts
index f9147c7a8..4c97d487b 100644
--- a/app/assets/javascripts/directives/views/inputModal.js
+++ b/app/assets/javascripts/directives/views/inputModal.ts
@@ -1,11 +1,25 @@
+import { WebDirective } from './../../types';
 import template from '%/directives/input-modal.pug';
 
-class InputModalCtrl {
+export interface InputModalScope extends Partial<ng.IScope> {
+  type: string
+  title: string
+  message: string
+  callback: (value: string) => void
+}
+
+class InputModalCtrl implements InputModalScope {
+
+  $element: JQLite
+  type!: string
+  title!: string
+  message!: string
+  callback!: (value: string) => void
+  formData = { input: '' }
 
   /* @ngInject */
-  constructor($element) {
+  constructor($element: JQLite) {
     this.$element = $element;
-    this.formData = {};
   }
 
   dismiss() {
@@ -16,13 +30,14 @@ class InputModalCtrl {
   }
 
   submit() {
-    this.callback()(this.formData.input);
+    this.callback(this.formData.input);
     this.dismiss();
   }
 }
 
-export class InputModal {
+export class InputModal extends WebDirective {
   constructor() {
+    super();
     this.restrict = 'E';
     this.template = template;
     this.controller = InputModalCtrl;
@@ -32,7 +47,6 @@ export class InputModal {
       type: '=',
       title: '=',
       message: '=',
-      placeholder: '=',
       callback: '&'
     };
   }
diff --git a/app/assets/javascripts/directives/views/menuRow.js b/app/assets/javascripts/directives/views/menuRow.ts
similarity index 77%
rename from app/assets/javascripts/directives/views/menuRow.js
rename to app/assets/javascripts/directives/views/menuRow.ts
index 6d5373654..1df264576 100644
--- a/app/assets/javascripts/directives/views/menuRow.js
+++ b/app/assets/javascripts/directives/views/menuRow.ts
@@ -1,8 +1,13 @@
+import { WebDirective } from './../../types';
 import template from '%/directives/menu-row.pug';
 
 class MenuRowCtrl {
 
-  onClick($event) {
+  disabled!: boolean
+  action!: () => void
+  buttonAction!: () => void
+
+  onClick($event: Event) {
     if(this.disabled) {
       return;
     }
@@ -10,7 +15,7 @@ class MenuRowCtrl {
     this.action();
   }
 
-  clickAccessoryButton($event) {
+  clickAccessoryButton($event: Event) {
     if(this.disabled) {
       return;
     }
@@ -19,8 +24,9 @@ class MenuRowCtrl {
   }
 }
 
-export class MenuRow {
+export class MenuRow extends WebDirective {
   constructor() {
+    super();
     this.restrict = 'E';
     this.transclude = true;
     this.template = template;
diff --git a/app/assets/javascripts/types.ts b/app/assets/javascripts/types.ts
index b28acd376..8a9a9b493 100644
--- a/app/assets/javascripts/types.ts
+++ b/app/assets/javascripts/types.ts
@@ -6,7 +6,8 @@ export class WebDirective implements ng.IDirective {
   restrict?: string;
   replace?: boolean
   scope?: boolean | { [boundProperty: string]: string };
-  template?: string | ((tElement: any, tAttrs: any) => string);
+  template?: string | ((tElement: any, tAttrs: any) => string)
+  transclude?: boolean
 }
 
 export enum PasswordWizardType {
diff --git a/app/assets/templates/directives/input-modal.pug b/app/assets/templates/directives/input-modal.pug
index e6c0ded10..ec3c43e66 100644
--- a/app/assets/templates/directives/input-modal.pug
+++ b/app/assets/templates/directives/input-modal.pug
@@ -15,7 +15,6 @@
                   form(ng-submit="ctrl.submit()")
                     input.sk-input.contrast(
                       ng-model="ctrl.formData.input" 
-                      placeholder="{{ctrl.placeholder}}" 
                       should-focus="true" 
                       sn-autofocus="true" 
                       type="{{ctrl.type}}"