diff --git a/static/js/app.tsx b/static/js/app.tsx
index b59f05101..4f5bc19fe 100644
--- a/static/js/app.tsx
+++ b/static/js/app.tsx
@@ -1,9 +1,19 @@
 import * as React from "react";
 import * as angular from "angular";
 
-import repoHeader from "./directives/components/component";
+import repoHeader from "./directives/components/publicRepo/header";
+import repoSidebar from "./directives/components/publicRepo/sidebar";
+import repoMain from "./directives/components/publicRepo/main";
 
-angular.module('quayPages').directive('repoHeader', function(reactDirective) {
+angular.module('quayPages').directive('rpHeader', function(reactDirective) {
   return reactDirective(repoHeader);
 });
 
+angular.module('quayPages').directive('rpSidebar', function(reactDirective) {
+  return reactDirective(repoSidebar);
+});
+
+angular.module('quayPages').directive('rpMain', function(reactDirective) {
+  return reactDirective(repoMain);
+});
+
diff --git a/static/js/directives/components/component.tsx b/static/js/directives/components/publicRepo/header.tsx
similarity index 71%
rename from static/js/directives/components/component.tsx
rename to static/js/directives/components/publicRepo/header.tsx
index 0c5b6919e..606345da8 100644
--- a/static/js/directives/components/component.tsx
+++ b/static/js/directives/components/publicRepo/header.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 class repoHeader extends React.Component<{}, {}> {
   render () {
-    return <p> The component for the header</p>;
+    return <div> The component for the header</div>;
   }
 }
 
diff --git a/static/js/directives/components/publicRepo/main.tsx b/static/js/directives/components/publicRepo/main.tsx
new file mode 100644
index 000000000..e3ff322db
--- /dev/null
+++ b/static/js/directives/components/publicRepo/main.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+class main extends React.Component<{}, {}> {
+  render () {
+    return <div> The component for the main content</div>;
+  }
+}
+
+export default main;
+
diff --git a/static/js/directives/components/publicRepo/sidebar.tsx b/static/js/directives/components/publicRepo/sidebar.tsx
new file mode 100644
index 000000000..d2218f90e
--- /dev/null
+++ b/static/js/directives/components/publicRepo/sidebar.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+class repo_sidebar extends React.Component<{}, {}> {
+  render () {
+    return <div> The component for the sidebar</div>;
+  }
+}
+
+export default repo_sidebar;
+
diff --git a/static/js/pages/repo-view.js b/static/js/pages/repo-view.js
index 09beb7d3b..3810f294c 100644
--- a/static/js/pages/repo-view.js
+++ b/static/js/pages/repo-view.js
@@ -11,11 +11,6 @@
   }]);
 
   function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
-    $scope.reactProps = {
-      firstProp: 'Prop 1',
-      secondProp: 'Prop 2'
-    };
-
     $scope.namespace = $routeParams.namespace;
     $scope.name = $routeParams.name;
 
diff --git a/static/partials/repo-view.html b/static/partials/repo-view.html
index f3da86092..b52440eab 100644
--- a/static/partials/repo-view.html
+++ b/static/partials/repo-view.html
@@ -5,7 +5,9 @@
     <!-- New Public Repo Page experiment -->
     <div ng-if="newRepoExperiment" class="main-panel">
       <!-- React Components -->
-      <repo-header />
+      <rp-header></rp-header>
+      <rp-sidebar></rp-sidebar>
+      <rp-main></rp-main>
     </div>
     <!-- Old Repo Page -->
     <div ng-if="!newRepoExperiment">