diff --git a/harbor-app/src/app/app.module.ts b/harbor-app/src/app/app.module.ts
index 55cb0822e..d00891d23 100644
--- a/harbor-app/src/app/app.module.ts
+++ b/harbor-app/src/app/app.module.ts
@@ -5,7 +5,9 @@ import { HttpModule } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
 import { AppComponent } from './app.component';
 import { AccountModule } from './account/account.module';
-import { HarborShellModule } from './harbor-shell/harbor.shell.module';
+
+import { BaseModule } from './base/base.module';
+
 import { HarborRoutingModule } from './harbor-routing.module';
 import { SharedModule } from './shared.module';
 
@@ -16,7 +18,7 @@ import { SharedModule } from './shared.module';
     imports: [
         SharedModule,
         AccountModule,
-        HarborShellModule,
+        BaseModule,
         HarborRoutingModule
     ],
     providers: [],
diff --git a/harbor-app/src/app/harbor-shell/harbor-shell-routing.module.ts b/harbor-app/src/app/base/base-routing.module.ts
similarity index 58%
rename from harbor-app/src/app/harbor-shell/harbor-shell-routing.module.ts
rename to harbor-app/src/app/base/base-routing.module.ts
index 70f00adc4..36f5e5a20 100644
--- a/harbor-app/src/app/harbor-shell/harbor-shell-routing.module.ts
+++ b/harbor-app/src/app/base/base-routing.module.ts
@@ -1,35 +1,31 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
-import { HarborShellComponent } from './harbor-shell.component';
+import { BaseComponent } from './base.component';
 
 import { DashboardComponent } from '../dashboard/dashboard.component';
 import { ProjectComponent } from '../project/project.component';
-import { ProjectListComponent } from '../project/project-list.component';
 
-import { ProjectDetailComponent } from '../project-detail/project-detail.component';
+import { ProjectDetailComponent } from '../project/project-detail/project-detail.component';
 import { RepositoryComponent } from '../repository/repository.component';
 import { ReplicationComponent } from '../replication/replication.component';
 import { MemberComponent } from '../member/member.component';
 import { LogComponent } from '../log/log.component';
 
-const harborShellRoutes: Routes = [
+const baseRoutes: Routes = [
   { 
-    path: 'harbor',
-    component: HarborShellComponent, 
+    path: 'harbor', component: BaseComponent,
     children: [
       { path: 'dashboard', component: DashboardComponent },
-      { path: 'project', component: ProjectComponent }
+      { path: 'projects', component: ProjectComponent }
     ]
-  }
-];
+  }];
 
 @NgModule({
   imports: [
-    RouterModule.forChild(harborShellRoutes)
+    RouterModule.forChild(baseRoutes)
   ],
   exports: [ RouterModule ]
 })
-export class HarborShellRoutingModule {
+export class BaseRoutingModule {
 
 }
\ No newline at end of file
diff --git a/harbor-app/src/app/base/base.component.html b/harbor-app/src/app/base/base.component.html
new file mode 100644
index 000000000..2b6840b6f
--- /dev/null
+++ b/harbor-app/src/app/base/base.component.html
@@ -0,0 +1 @@
+<harbor-shell></harbor-shell>
\ No newline at end of file
diff --git a/harbor-app/src/app/base/base.component.ts b/harbor-app/src/app/base/base.component.ts
new file mode 100644
index 000000000..616c8f560
--- /dev/null
+++ b/harbor-app/src/app/base/base.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'base',
+  templateUrl: 'base.component.html'
+})
+export class BaseComponent {
+
+}
\ No newline at end of file
diff --git a/harbor-app/src/app/base/base.module.ts b/harbor-app/src/app/base/base.module.ts
new file mode 100644
index 000000000..176983905
--- /dev/null
+++ b/harbor-app/src/app/base/base.module.ts
@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared.module';
+
+import { DashboardModule } from '../dashboard/dashboard.module';
+import { ProjectModule } from '../project/project.module';
+import { ProjectDetailModule } from '../project/project-detail/project-detail.module';
+
+import { NavigatorComponent } from './navigator/navigator.component';
+import { GlobalSearchComponent } from './global-search/global-search.component';
+import { FooterComponent } from './footer/footer.component';
+import { HarborShellComponent } from './harbor-shell/harbor-shell.component';
+import { BaseComponent } from './base.component';
+
+import { BaseRoutingModule } from './base-routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    DashboardModule,
+    ProjectModule,
+    ProjectDetailModule,
+    BaseRoutingModule
+  ],
+  declarations: [
+    BaseComponent,
+    NavigatorComponent,
+    GlobalSearchComponent,
+    FooterComponent,
+    HarborShellComponent
+  ],
+  exports: [ BaseComponent ]
+})
+export class BaseModule {
+
+}
\ No newline at end of file
diff --git a/harbor-app/src/app/footer/footer.component.html b/harbor-app/src/app/base/footer/footer.component.html
similarity index 100%
rename from harbor-app/src/app/footer/footer.component.html
rename to harbor-app/src/app/base/footer/footer.component.html
diff --git a/harbor-app/src/app/footer/footer.component.ts b/harbor-app/src/app/base/footer/footer.component.ts
similarity index 100%
rename from harbor-app/src/app/footer/footer.component.ts
rename to harbor-app/src/app/base/footer/footer.component.ts
diff --git a/harbor-app/src/app/global-search/global-search.component.html b/harbor-app/src/app/base/global-search/global-search.component.html
similarity index 100%
rename from harbor-app/src/app/global-search/global-search.component.html
rename to harbor-app/src/app/base/global-search/global-search.component.html
diff --git a/harbor-app/src/app/global-search/global-search.component.ts b/harbor-app/src/app/base/global-search/global-search.component.ts
similarity index 100%
rename from harbor-app/src/app/global-search/global-search.component.ts
rename to harbor-app/src/app/base/global-search/global-search.component.ts
diff --git a/harbor-app/src/app/harbor-shell/harbor-shell.component.html b/harbor-app/src/app/base/harbor-shell/harbor-shell.component.html
similarity index 100%
rename from harbor-app/src/app/harbor-shell/harbor-shell.component.html
rename to harbor-app/src/app/base/harbor-shell/harbor-shell.component.html
diff --git a/harbor-app/src/app/harbor-shell/harbor-shell.component.ts b/harbor-app/src/app/base/harbor-shell/harbor-shell.component.ts
similarity index 100%
rename from harbor-app/src/app/harbor-shell/harbor-shell.component.ts
rename to harbor-app/src/app/base/harbor-shell/harbor-shell.component.ts
diff --git a/harbor-app/src/app/navigator/navigator.component.html b/harbor-app/src/app/base/navigator/navigator.component.html
similarity index 96%
rename from harbor-app/src/app/navigator/navigator.component.html
rename to harbor-app/src/app/base/navigator/navigator.component.html
index 41b4af2d1..ecc514510 100644
--- a/harbor-app/src/app/navigator/navigator.component.html
+++ b/harbor-app/src/app/base/navigator/navigator.component.html
@@ -10,7 +10,7 @@
       <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'dashboard']" routerLinkActive="active">
         <span class="nav-text">Dashboard</span>
       </a>
-      <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'project']" routerLinkActive="active">
+      <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'projects']" routerLinkActive="active">
         <span class="nav-text">Project</span>
       </a>
   </div>
diff --git a/harbor-app/src/app/navigator/navigator.component.ts b/harbor-app/src/app/base/navigator/navigator.component.ts
similarity index 100%
rename from harbor-app/src/app/navigator/navigator.component.ts
rename to harbor-app/src/app/base/navigator/navigator.component.ts
diff --git a/harbor-app/src/app/core.module.ts b/harbor-app/src/app/core.module.ts
index 2392d176d..36e924e9f 100644
--- a/harbor-app/src/app/core.module.ts
+++ b/harbor-app/src/app/core.module.ts
@@ -5,9 +5,6 @@ import { HttpModule } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
 import { AppComponent } from './app.component';
 import { AccountModule } from './account/account.module';
-import { HarborShellModule } from './harbor-shell/harbor.shell.module';
-import { HarborRoutingModule } from './harbor-routing.module';
-
 
 @NgModule({
   imports: [
diff --git a/harbor-app/src/app/footer/footer.module.ts b/harbor-app/src/app/footer/footer.module.ts
deleted file mode 100644
index 1fac5bd49..000000000
--- a/harbor-app/src/app/footer/footer.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FooterComponent } from './footer.component';
-
-@NgModule({
-  declarations: [ FooterComponent ],
-  exports: [ FooterComponent ]
-})
-export class FooterModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/global-search/global-search.module.ts b/harbor-app/src/app/global-search/global-search.module.ts
deleted file mode 100644
index b72d33a44..000000000
--- a/harbor-app/src/app/global-search/global-search.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { GlobalSearchComponent } from './global-search.component';
-import { SharedModule } from '../shared.module';
-
-@NgModule({
-  imports: [ SharedModule ],
-  declarations: [ GlobalSearchComponent ],
-  exports: [ GlobalSearchComponent ]
-})
-export class GlobalSearchModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/harbor-shell/harbor.shell.module.ts b/harbor-app/src/app/harbor-shell/harbor.shell.module.ts
deleted file mode 100644
index 868bf764e..000000000
--- a/harbor-app/src/app/harbor-shell/harbor.shell.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorModule } from '../navigator/navigator.module';
-import { GlobalSearchModule } from '../global-search/global-search.module';
-import { FooterModule } from '../footer/footer.module';
-
-import { DashboardModule } from '../dashboard/dashboard.module';
-import { ProjectModule } from '../project/project.module';
-import { ProjectDetailModule } from '../project-detail/project-detail.module';
-
-import { HarborShellRoutingModule } from './harbor-shell-routing.module';
-
-import { HarborShellComponent } from './harbor-shell.component';
-
-import { SharedModule } from '../shared.module';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    GlobalSearchModule,
-    NavigatorModule,
-    FooterModule,
-    DashboardModule,
-    ProjectModule,
-    ProjectDetailModule,
-    HarborShellRoutingModule
-  ],
-  declarations: [ HarborShellComponent ],
-  exports: [ HarborShellComponent ]
-})
-export class HarborShellModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/navigator/navigator.module.ts b/harbor-app/src/app/navigator/navigator.module.ts
deleted file mode 100644
index dcf9232af..000000000
--- a/harbor-app/src/app/navigator/navigator.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NavigatorComponent } from './navigator.component';
-
-import { SharedModule } from '../shared.module';
-import { GlobalSearchComponent } from '../global-search/global-search.component';
-
-import { GlobalSearchModule } from '../global-search/global-search.module';
-import { RouterModule } from '@angular/router';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    GlobalSearchModule,
-    RouterModule
-  ],
-  declarations: [ NavigatorComponent ],
-  exports: [ NavigatorComponent ]
-})
-export class NavigatorModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project-detail/project-detail-routing.module.ts b/harbor-app/src/app/project-detail/project-detail-routing.module.ts
deleted file mode 100644
index 069c04f86..000000000
--- a/harbor-app/src/app/project-detail/project-detail-routing.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ProjectDetailComponent } from './project-detail.component';
-
-import { RepositoryComponent } from '../repository/repository.component';
-import { ReplicationComponent } from '../replication/replication.component';
-import { MemberComponent } from '../member/member.component';
-import { LogComponent } from '../log/log.component';
-
-const projectDetailRoutes: Routes = [
-  { 
-    path: 'projects/:id', 
-    component: ProjectDetailComponent, 
-    children: [
-      { path: 'repository', component: RepositoryComponent },
-      { path: 'replication', component: ReplicationComponent },
-      { path: 'member', component: MemberComponent },
-      { path: 'log', component: LogComponent }
-    ]
-  }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(projectDetailRoutes)
-  ],
-  exports: [ RouterModule ]
-})
-export class ProjectDetailRoutingModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project-detail/project-detail.module.ts b/harbor-app/src/app/project-detail/project-detail.module.ts
deleted file mode 100644
index 2163f92f6..000000000
--- a/harbor-app/src/app/project-detail/project-detail.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { NavigatorModule } from '../navigator/navigator.module';
-import { GlobalSearchModule } from '../global-search/global-search.module';
-import { FooterModule } from '../footer/footer.module';
-
-
-import { RepositoryModule } from '../repository/repository.module';
-import { ReplicationModule } from '../replication/replication.module';
-import { MemberModule } from '../member/member.module';
-import { LogModule } from '../log/log.module';
-
-import { ProjectDetailComponent } from './project-detail.component';
-
-import { SharedModule } from '../shared.module';
-
-import { ProjectDetailRoutingModule } from './project-detail-routing.module';
-
-@NgModule({
-  imports: [ 
-    SharedModule,
-    GlobalSearchModule,
-    NavigatorModule,
-    FooterModule,
-    RepositoryModule,
-    ReplicationModule,
-    MemberModule,
-    LogModule,
-    ProjectDetailRoutingModule
-  ],
-  declarations: [ ProjectDetailComponent ],
-  exports: [ ProjectDetailComponent ]
-})
-export class ProjectDetailModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/create-project/create-project.component.html b/harbor-app/src/app/project/create-project/create-project.component.html
new file mode 100644
index 000000000..5a2d82f46
--- /dev/null
+++ b/harbor-app/src/app/project/create-project/create-project.component.html
@@ -0,0 +1,25 @@
+<clr-modal [(clrModalOpen)]="create_project_opened">
+  <h3 class="modal-title">New Project</h3>
+  <div class="modal-body">
+    <form>
+      <section class="form-block">
+        <div class="form-group">
+          <label for="create_project_username" class="col-md-4">Project Name</label>
+          <input type="text" class="col-md-8" id="create_project_username" size="20"> 
+        </div>
+        <div class="form-group">
+          <label class="col-md-4">Public</label>
+          <div class="checkbox-inline">
+            <input type="checkbox" id="create_project_public">
+            <label for="create_project_public"></label>
+          </div>
+        </div>
+      </section>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="create_project_opened = false">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="create_project_opened = false">Ok</button>
+  </div>
+</clr-modal>
+<button class="btn btn-sm" (click)="create_project_opened = true">New Project</button>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/create-project/create-project.component.ts b/harbor-app/src/app/project/create-project/create-project.component.ts
new file mode 100644
index 000000000..26319e4e9
--- /dev/null
+++ b/harbor-app/src/app/project/create-project/create-project.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'create-project',
+  templateUrl: 'create-project.component.html'
+})
+export class CreateProjectComponent {
+
+}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/filter-project/filter-project.component.html b/harbor-app/src/app/project/filter-project/filter-project.component.html
new file mode 100644
index 000000000..263169d93
--- /dev/null
+++ b/harbor-app/src/app/project/filter-project/filter-project.component.html
@@ -0,0 +1,10 @@
+<clr-dropdown [clrMenuPosition]="'bottom-left'">
+  <button class="btn btn-sm btn-outline-primary" clrDropdownToggle>
+    My Projects
+    <clr-icon shape="caret down"></clr-icon>
+  </button>
+  <div class="dropdown-menu">
+    <a href="javascript:void(0)" clrDropdownItem>My Projects</a>
+    <a href="javascript:void(0)" clrDropdownItem>Public Projects</a>
+  </div>
+</clr-dropdown>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/filter-project/filter-project.component.ts b/harbor-app/src/app/project/filter-project/filter-project.component.ts
new file mode 100644
index 000000000..aee1f8637
--- /dev/null
+++ b/harbor-app/src/app/project/filter-project/filter-project.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'filter-project',
+  templateUrl: 'filter-project.component.html'
+})
+export class FilterProjectComponent {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project-list.component.html b/harbor-app/src/app/project/list-project/list-project.component.html
similarity index 87%
rename from harbor-app/src/app/project/project-list.component.html
rename to harbor-app/src/app/project/list-project/list-project.component.html
index 9044fec22..b3177f9bf 100644
--- a/harbor-app/src/app/project/project-list.component.html
+++ b/harbor-app/src/app/project/list-project/list-project.component.html
@@ -7,7 +7,7 @@
   <clr-dg-column>Owner</clr-dg-column>
   <clr-dg-column>Description</clr-dg-column>
   <clr-dg-row *ngFor="let p of projects">
-    <clr-dg-cell><a [routerLink]="['/projects', p.id, 'repository']" >{{p.name}}</a></clr-dg-cell>
+    <clr-dg-cell><a [routerLink]="['/harbor', 'projects', p.id, 'repository']" >{{p.name}}</a></clr-dg-cell>
     <clr-dg-cell>{{p.isPublic ? 'Public': 'Private'}}</clr-dg-cell>
     <clr-dg-cell>{{p.repoCount}}</clr-dg-cell>
     <clr-dg-cell>{{p.creationTime}}</clr-dg-cell>
diff --git a/harbor-app/src/app/project/project-list.component.ts b/harbor-app/src/app/project/list-project/list-project.component.ts
similarity index 85%
rename from harbor-app/src/app/project/project-list.component.ts
rename to harbor-app/src/app/project/list-project/list-project.component.ts
index e9f8dbbbd..050d30897 100644
--- a/harbor-app/src/app/project/project-list.component.ts
+++ b/harbor-app/src/app/project/list-project/list-project.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Project } from './project';
+import { Project } from '../project';
 
 
 @Component({
-  selector: 'project-list',
-  templateUrl: 'project-list.component.html'
+  selector: 'list-project',
+  templateUrl: 'list-project.component.html'
 })
-export class ProjectListComponent implements OnInit {
+export class ListProjectComponent implements OnInit {
    projects: Project[];
 
    ngOnInit(): void {
diff --git a/harbor-app/src/app/project-detail/project-detail.component.html b/harbor-app/src/app/project/project-detail/project-detail.component.html
similarity index 96%
rename from harbor-app/src/app/project-detail/project-detail.component.html
rename to harbor-app/src/app/project/project-detail/project-detail.component.html
index cf04d30f8..bf65b2bdd 100644
--- a/harbor-app/src/app/project-detail/project-detail.component.html
+++ b/harbor-app/src/app/project/project-detail/project-detail.component.html
@@ -1,4 +1,3 @@
-<navigator></navigator>
 <h1 class="display-in-line">Project 01</h1><h6 class="display-in-line project-title">PROJECT</h6>
 <nav class="subnav">
   <ul class="nav">
diff --git a/harbor-app/src/app/project-detail/project-detail.component.ts b/harbor-app/src/app/project/project-detail/project-detail.component.ts
similarity index 100%
rename from harbor-app/src/app/project-detail/project-detail.component.ts
rename to harbor-app/src/app/project/project-detail/project-detail.component.ts
diff --git a/harbor-app/src/app/project-detail/project-detail.css b/harbor-app/src/app/project/project-detail/project-detail.css
similarity index 100%
rename from harbor-app/src/app/project-detail/project-detail.css
rename to harbor-app/src/app/project/project-detail/project-detail.css
diff --git a/harbor-app/src/app/project/project-detail/project-detail.module.ts b/harbor-app/src/app/project/project-detail/project-detail.module.ts
new file mode 100644
index 000000000..df2398789
--- /dev/null
+++ b/harbor-app/src/app/project/project-detail/project-detail.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../../shared.module';
+
+import { ProjectDetailComponent } from './project-detail.component';
+import { RepositoryComponent } from '../../repository/repository.component';
+import { ReplicationComponent } from '../../replication/replication.component';
+import { MemberComponent } from '../../member/member.component';
+import { LogComponent } from '../../log/log.component';
+
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [ 
+    SharedModule,
+    RouterModule
+  ],
+  declarations: [ 
+    ProjectDetailComponent,
+    RepositoryComponent,
+    ReplicationComponent,
+    MemberComponent,
+    LogComponent
+  ],
+  exports: [ ProjectDetailComponent ]
+})
+export class ProjectDetailModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project-routing.module.ts b/harbor-app/src/app/project/project-routing.module.ts
new file mode 100644
index 000000000..3a9b088f4
--- /dev/null
+++ b/harbor-app/src/app/project/project-routing.module.ts
@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BaseComponent } from '../base/base.component';
+
+import { ProjectComponent } from './project.component';
+import { ProjectDetailComponent } from './project-detail/project-detail.component';
+
+import { RepositoryComponent } from '../repository/repository.component';
+import { ReplicationComponent } from '../replication/replication.component';
+import { MemberComponent } from '../member/member.component';
+import { LogComponent } from '../log/log.component';
+
+const projectRoutes: Routes = [
+  { path: 'harbor', 
+    component: BaseComponent, 
+    children: [
+      { path: 'projects', component: ProjectComponent },
+      { 
+        path: 'projects/:id', 
+        component: ProjectDetailComponent,
+        children: [
+          { path: 'repository', component: RepositoryComponent },
+          { path: 'replication', component: ReplicationComponent },
+          { path: 'member', component: MemberComponent },
+          { path: 'log', component: LogComponent }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(projectRoutes)
+  ],
+  exports: [ RouterModule ]
+})
+export class ProjectRoutingModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.component.html b/harbor-app/src/app/project/project.component.html
index 71bc2c9ab..cea50c4b1 100644
--- a/harbor-app/src/app/project/project.component.html
+++ b/harbor-app/src/app/project/project.component.html
@@ -1,31 +1,7 @@
 <h3>Projects</h3>
-<clr-modal [(clrModalOpen)]="create_project_opened">
-  <h3 class="modal-title">New Project</h3>
-  <div class="modal-body">
-    <form>
-      <section class="form-block">
-        <div class="form-group">
-          <label for="create_project_username" class="col-md-4">Project Name</label>
-          <input type="text" class="col-md-8" id="create_project_username" size="20"> 
-        </div>
-        <div class="form-group">
-          <label class="col-md-4">Public</label>
-          <div class="checkbox-inline">
-            <input type="checkbox" id="create_project_public">
-            <label for="create_project_public"></label>
-          </div>
-        </div>
-      </section>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="create_project_opened = false">Cancel</button>
-    <button type="button" class="btn btn-primary" (click)="create_project_opened = false">Ok</button>
-  </div>
-</clr-modal>
 <div class="row flex-items-xs-between">
   <div class="col-xs-4">
-    <button class="btn btn-sm" (click)="create_project_opened = true">New Project</button>
+    <create-project></create-project>
   </div>
   <div class="col-xs-4">
     <clr-dropdown [clrMenuPosition]="'bottom-left'">
@@ -38,9 +14,9 @@
         <a href="javascript:void(0)" clrDropdownItem>Public Projects</a>
       </div>
     </clr-dropdown>
-    <input type="text" placeholder="Search for projects">
+    <search-project></search-project>
   </div>
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <project-list></project-list>
+    <list-project></list-project>
   </div>
 </div>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.component.ts b/harbor-app/src/app/project/project.component.ts
index da149b5f9..835f3ba92 100644
--- a/harbor-app/src/app/project/project.component.ts
+++ b/harbor-app/src/app/project/project.component.ts
@@ -8,9 +8,6 @@ import { Router }  from '@angular/router';
     styleUrls: [ 'project.css' ]
 })
 export class ProjectComponent implements OnInit {
-
-   
-
     ngOnInit(): void {
        
     }
diff --git a/harbor-app/src/app/project/project.module.ts b/harbor-app/src/app/project/project.module.ts
index fc5398a24..48bd35e72 100644
--- a/harbor-app/src/app/project/project.module.ts
+++ b/harbor-app/src/app/project/project.module.ts
@@ -1,18 +1,30 @@
 import { NgModule } from '@angular/core';
-import { ProjectComponent } from './project.component';
-import { ProjectListComponent } from './project-list.component';
+
 import { SharedModule } from '../shared.module';
-import { RouterModule } from '@angular/router';
+import { ProjectDetailModule } from './project-detail/project-detail.module';
+
+import { ProjectComponent } from './project.component';
+import { CreateProjectComponent } from './create-project/create-project.component';
+import { SearchProjectComponent } from './search-project/search-project.component';
+import { FilterProjectComponent } from './filter-project/filter-project.component';
+import { ListProjectComponent } from './list-project/list-project.component';
+import { ProjectDetailComponent } from './project-detail/project-detail.component';
+import { ProjectRoutingModule } from './project-routing.module';
+
 
 @NgModule({
   imports: [ 
     SharedModule,
-    RouterModule
+    ProjectDetailModule,
+    ProjectRoutingModule
   ],
   declarations: [ 
     ProjectComponent,
-    ProjectListComponent
+    CreateProjectComponent,
+    SearchProjectComponent,
+    FilterProjectComponent,
+    ListProjectComponent   
   ],
-  exports: [ ProjectComponent ]
+  exports: [ ListProjectComponent ]
 })
 export class ProjectModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/search-project/search-project.component.html b/harbor-app/src/app/project/search-project/search-project.component.html
new file mode 100644
index 000000000..b34cdbabc
--- /dev/null
+++ b/harbor-app/src/app/project/search-project/search-project.component.html
@@ -0,0 +1 @@
+<input type="text" placeholder="Search for projects">
\ No newline at end of file
diff --git a/harbor-app/src/app/project/search-project/search-project.component.ts b/harbor-app/src/app/project/search-project/search-project.component.ts
new file mode 100644
index 000000000..346d4ec9c
--- /dev/null
+++ b/harbor-app/src/app/project/search-project/search-project.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'search-project',
+  templateUrl: 'search-project.component.html'
+})
+export class SearchProjectComponent {
+
+}
\ No newline at end of file