diff --git a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.spec.ts b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts
new file mode 100644
index 000000000..3f4f55b83
--- /dev/null
+++ b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts
@@ -0,0 +1,69 @@
+import { Input, Output, Component } from 'angular-ts-decorators';
+
+
+@Component({
+  selector: 'manageTriggerCustomGit',
+  template: `
+    <div class="manage-trigger-custom-git-element manage-trigger-control">
+      <div class="linear-workflow" 
+           workflow-state="$ctrl.currentState" 
+           done-title="Create Trigger"
+           workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
+        <!-- Section: Repository -->
+        <div class="linear-workflow-section row"
+             section-id="repo"
+             section-title="Git Repository"
+             section-valid="$ctrl.config.build_source">
+    
+          <div class="col-lg-7 col-md-7 col-sm-12 main-col">
+            <h3>Enter repository</h3>
+            <strong>
+              Please enter the HTTP or SSH style URL used to clone your git repository:
+            </strong>
+            <input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
+                   ng-model="$ctrl.config.build_source" 
+                   ng-pattern="$ctrl.gitUrlRegEx">
+          </div>
+          <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
+            <p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>
+    
+            <p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>
+          </div>
+        </div><!-- /Section: Repository -->
+    
+        <!-- Section: Build context -->
+        <div class="linear-workflow-section row"
+             section-id="dockerfile"
+             section-title="Build context"
+             section-valid="$ctrl.config.subdir">
+    
+          <div class="col-lg-7 col-md-7 col-sm-12 main-col">
+            <h3>Select build context directory</h3>
+           <strong>Please select the build context directory under the git repository:</strong>
+           <input class="form-control" type="text" placeholder="/"
+                  ng-model="$ctrl.config.subdir" ng-pattern="/^($|\/|\/.+)/">
+          </div>
+          <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
+            <p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
+            <p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
+          </div>
+    
+        </div><!-- /Section: Build context -->
+    </div>
+  `
+})
+export class ManageTriggerCustomGitComponent implements ng.IComponentController {
+
+  // FIXME: Use one-way data binding
+  @Input('=') public trigger: {config: any};
+  @Output() public activateTrigger: any;
+  private config: any = {};
+  private currentState: any | null;
+  private gitUrlRegEx: string = "((ssh|http(s)?)|(git@[\w\.]+))(:(//)?)([\w\.@\:/\-~]+)(\.git)(/)?";
+
+  public $onChanges(changes: ng.IOnChangesObject): void {
+    if (changes['trigger'] !== undefined) {
+      this.config = Object.assign({}, changes['trigger'].currentValue.config);
+    }
+  }
+}
diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts
index 76ac3f207..229c16a09 100644
--- a/static/js/quay.module.ts
+++ b/static/js/quay.module.ts
@@ -7,6 +7,7 @@ import { RegexMatchViewComponent } from "./directives/ui/regex-match-view/regex-
 import { NgModule } from "angular-ts-decorators";
 import { QuayRoutes } from "./quay-routes.module";
 import { DockerfilePathSelectComponent } from './directives/ui/dockerfile-path-select/dockerfile-path-select.component';
+import { ManageTriggerCustomGitComponent } from './directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component';
 
 
 var quayDependencies: any[] = [
@@ -55,6 +56,7 @@ if (INJECTED_CONFIG && INJECTED_CONFIG.RECAPTCHA_SITE_KEY) {
   declarations: [
     RegexMatchViewComponent,
     DockerfilePathSelectComponent,
+    ManageTriggerCustomGitComponent,
   ],
   providers: [
     ViewArrayImpl,
diff --git a/static/partials/trigger-setup.html b/static/partials/trigger-setup.html
index 6ccb87bda..79f676508 100644
--- a/static/partials/trigger-setup.html
+++ b/static/partials/trigger-setup.html
@@ -44,8 +44,9 @@
         <div ng-switch on="trigger.service">
           <!-- Custom Git -->
           <div ng-switch-when="custom-git">
-            <div class="manage-trigger-custom-git" trigger="trigger"
-                 activate-trigger="activateTrigger(config, pull_robot)"></div>
+            <manage-trigger-custom-git
+              trigger="trigger"
+              activate-trigger="activateTrigger(config, pull_robot)"></manage-trigger-custom-git>
           </div> <!-- /custom-git -->
 
           <!-- Hosted Git (GitHub, Gitlab, BitBucket) -->
diff --git a/test/data/test.db b/test/data/test.db
index 9c7a22b34..5b1af4074 100644
Binary files a/test/data/test.db and b/test/data/test.db differ