diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..81ca42e8a
Binary files /dev/null and b/.DS_Store differ
diff --git a/harbor-app/src/app/account/account.module.ts b/harbor-app/src/app/account/account.module.ts
index 1e5de4d64..f701c9753 100644
--- a/harbor-app/src/app/account/account.module.ts
+++ b/harbor-app/src/app/account/account.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { SignInComponent } from './sign-in.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { RouterModule } from '@angular/router'; 
 
 @NgModule({
diff --git a/harbor-app/src/app/app.module.ts b/harbor-app/src/app/app.module.ts
index d00891d23..c7991e8d2 100644
--- a/harbor-app/src/app/app.module.ts
+++ b/harbor-app/src/app/app.module.ts
@@ -9,14 +9,14 @@ import { AccountModule } from './account/account.module';
 import { BaseModule } from './base/base.module';
 
 import { HarborRoutingModule } from './harbor-routing.module';
-import { SharedModule } from './shared.module';
+import { CoreModule } from './core/core.module';
 
 @NgModule({
     declarations: [
         AppComponent,
     ],
     imports: [
-        SharedModule,
+        CoreModule,
         AccountModule,
         BaseModule,
         HarborRoutingModule
diff --git a/harbor-app/src/app/base/base-routing.module.ts b/harbor-app/src/app/base/base-routing.module.ts
index f1733b0a1..657811938 100644
--- a/harbor-app/src/app/base/base-routing.module.ts
+++ b/harbor-app/src/app/base/base-routing.module.ts
@@ -5,12 +5,6 @@ import { HarborShellComponent } from './harbor-shell/harbor-shell.component';
 import { DashboardComponent } from '../dashboard/dashboard.component';
 import { ProjectComponent } from '../project/project.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 baseRoutes: Routes = [
   { 
     path: 'harbor', component: HarborShellComponent,
diff --git a/harbor-app/src/app/base/base.module.ts b/harbor-app/src/app/base/base.module.ts
index a5dc68e61..6b7e74e2b 100644
--- a/harbor-app/src/app/base/base.module.ts
+++ b/harbor-app/src/app/base/base.module.ts
@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 import { DashboardModule } from '../dashboard/dashboard.module';
 import { ProjectModule } from '../project/project.module';
+import { UserModule } from '../user/user.module';
 
 import { NavigatorComponent } from './navigator/navigator.component';
 import { GlobalSearchComponent } from './global-search/global-search.component';
@@ -16,6 +17,7 @@ import { BaseRoutingModule } from './base-routing.module';
     SharedModule,
     DashboardModule,
     ProjectModule,
+    UserModule,
     BaseRoutingModule
   ],
   declarations: [
diff --git a/harbor-app/src/app/core.module.ts b/harbor-app/src/app/core/core.module.ts
similarity index 81%
rename from harbor-app/src/app/core.module.ts
rename to harbor-app/src/app/core/core.module.ts
index 36e924e9f..115a5094c 100644
--- a/harbor-app/src/app/core.module.ts
+++ b/harbor-app/src/app/core/core.module.ts
@@ -3,8 +3,6 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
-import { AppComponent } from './app.component';
-import { AccountModule } from './account/account.module';
 
 @NgModule({
   imports: [
diff --git a/harbor-app/src/app/dashboard/dashboard.module.ts b/harbor-app/src/app/dashboard/dashboard.module.ts
index 1a7f9f098..e00cfd5c3 100644
--- a/harbor-app/src/app/dashboard/dashboard.module.ts
+++ b/harbor-app/src/app/dashboard/dashboard.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { DashboardComponent } from './dashboard.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],
diff --git a/harbor-app/src/app/log/log.component.html b/harbor-app/src/app/log/audit-log.component.html
similarity index 87%
rename from harbor-app/src/app/log/log.component.html
rename to harbor-app/src/app/log/audit-log.component.html
index 59f686eae..f8cc555d2 100644
--- a/harbor-app/src/app/log/log.component.html
+++ b/harbor-app/src/app/log/audit-log.component.html
@@ -11,14 +11,14 @@
       <clr-dg-column>Tag</clr-dg-column>
       <clr-dg-column>Operation</clr-dg-column>
       <clr-dg-column>Timestamp</clr-dg-column>
-      <clr-dg-row *ngFor="let l of logs">
+      <clr-dg-row *ngFor="let l of auditLogs">
         <clr-dg-cell>{{l.username}}</clr-dg-cell>
         <clr-dg-cell>{{l.repoName}}</clr-dg-cell>
         <clr-dg-cell>{{l.tag}}</clr-dg-cell>
         <clr-dg-cell>{{l.operation}}</clr-dg-cell>
         <clr-dg-cell>{{l.timestamp}}</clr-dg-cell>
       </clr-dg-row>
-      <clr-dg-footer>{{logs.length}} item(s)</clr-dg-footer>
+      <clr-dg-footer>{{auditLogs.length}} item(s)</clr-dg-footer>
     </clr-datagrid>
   </div>
 </div>
\ No newline at end of file
diff --git a/harbor-app/src/app/log/log.component.ts b/harbor-app/src/app/log/audit-log.component.ts
similarity index 71%
rename from harbor-app/src/app/log/log.component.ts
rename to harbor-app/src/app/log/audit-log.component.ts
index bdbae470b..bd9468880 100644
--- a/harbor-app/src/app/log/log.component.ts
+++ b/harbor-app/src/app/log/audit-log.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { Log } from './log';
+import { AuditLog } from './audit-log';
 
 @Component({
-  templateUrl: './log.component.html'
+  templateUrl: './audit-log.component.html'
 })
-export class LogComponent implements OnInit {
+export class AuditLogComponent implements OnInit {
 
-  logs: Log[];
+  auditLogs: AuditLog[];
 
   ngOnInit(): void {
-    this.logs = [
+    this.auditLogs = [
       { username: 'Admin', repoName: 'project01', tag: '', operation: 'create', timestamp: '2016-12-23 12:05:17' },
       { username: 'Admin', repoName: 'project01/ubuntu', tag: '14.04', operation: 'push', timestamp: '2016-12-30 14:52:23' },
       { username: 'user1', repoName: 'project01/mysql', tag: '5.6', operation: 'pull', timestamp: '2016-12-30 12:12:33' }
diff --git a/harbor-app/src/app/log/log.ts b/harbor-app/src/app/log/audit-log.ts
similarity index 80%
rename from harbor-app/src/app/log/log.ts
rename to harbor-app/src/app/log/audit-log.ts
index aca491331..23f2963b2 100644
--- a/harbor-app/src/app/log/log.ts
+++ b/harbor-app/src/app/log/audit-log.ts
@@ -1,4 +1,4 @@
-export class Log {
+export class AuditLog {
   username: string;
   repoName: string;
   tag: string;
diff --git a/harbor-app/src/app/log/log.module.ts b/harbor-app/src/app/log/log.module.ts
index 2850aad4f..f92accfa3 100644
--- a/harbor-app/src/app/log/log.module.ts
+++ b/harbor-app/src/app/log/log.module.ts
@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { LogComponent } from './log.component';
-import { SharedModule } from '../shared.module';
+import { AuditLogComponent } from './audit-log.component';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],
-  declarations: [ LogComponent ],
-  exports: [ LogComponent ]
+  declarations: [ AuditLogComponent ],
+  exports: [ AuditLogComponent ]
 })
 export class LogModule {}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/member/member.component.html b/harbor-app/src/app/project/member/member.component.html
new file mode 100644
index 000000000..75191d2db
--- /dev/null
+++ b/harbor-app/src/app/project/member/member.component.html
@@ -0,0 +1,35 @@
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
+    <div class="row flex-items-xs-between">
+      <div class="col-xs-4">
+        <button class="btn btn-sm">new user</button>
+      </div>
+      <div class="col-xs-4">
+        <input type="text" placeholder="Search for users">
+      </div>
+    </div>
+    <clr-datagrid>
+      <clr-dg-column>Name</clr-dg-column>
+      <clr-dg-column>Role</clr-dg-column>
+      <clr-dg-column>Action</clr-dg-column>
+      <clr-dg-row *ngFor="let u of members">
+        <clr-dg-cell>{{u.name}}</clr-dg-cell>
+        <clr-dg-cell>{{u.role}}</clr-dg-cell>
+        <clr-dg-cell>
+          <clr-dropdown [clrMenuPosition]="'bottom-left'">
+            <button class="btn btn-sm btn-link" clrDropdownToggle>
+              Actions
+              <clr-icon shape="caret down"></clr-icon>
+            </button>
+            <div class="dropdown-menu">
+              <a href="javascript:void(0)" clrDropdownItem>Project Admin</a>
+              <a href="javascript:void(0)" clrDropdownItem>Developer</a>
+              <a href="javascript:void(0)" clrDropdownItem>Guest</a>
+            </div>
+          </clr-dropdown>
+        </clr-dg-cell>
+      </clr-dg-row>
+      <clr-dg-footer>{{members.length}} item(s)</clr-dg-footer>
+    </clr-datagrid>
+  </div>
+</div>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/member/member.component.ts b/harbor-app/src/app/project/member/member.component.ts
new file mode 100644
index 000000000..6bb9e19c0
--- /dev/null
+++ b/harbor-app/src/app/project/member/member.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Member } from './member';
+
+@Component({
+  templateUrl: 'member.component.html'
+})
+export class MemberComponent implements OnInit {
+  members: Member[];
+
+  ngOnInit(): void {
+    this.members = [
+      { name: 'Admin', role: 'Sys admin'},
+      { name: 'user01', role: 'Project Admin'},
+      { name: 'user02', role: 'Developer'},
+      { name: 'user03', role: 'Guest'}
+    ];
+  }
+}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/member/member.ts b/harbor-app/src/app/project/member/member.ts
new file mode 100644
index 000000000..51e396ab1
--- /dev/null
+++ b/harbor-app/src/app/project/member/member.ts
@@ -0,0 +1,4 @@
+export class Member {
+  name: string;
+  role: string;
+}
\ 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
index 24de0e3fa..99230cfb4 100644
--- a/harbor-app/src/app/project/project-routing.module.ts
+++ b/harbor-app/src/app/project/project-routing.module.ts
@@ -7,8 +7,8 @@ import { ProjectDetailComponent } from './project-detail/project-detail.componen
 
 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 { MemberComponent } from './member/member.component';
+import { AuditLogComponent } from '../log/audit-log.component';
 
 const projectRoutes: Routes = [
   { path: 'harbor', 
@@ -22,7 +22,7 @@ const projectRoutes: Routes = [
           { path: 'repository', component: RepositoryComponent },
           { path: 'replication', component: ReplicationComponent },
           { path: 'member', component: MemberComponent },
-          { path: 'log', component: LogComponent }
+          { path: 'log', component: AuditLogComponent }
         ]
       }
     ]
diff --git a/harbor-app/src/app/project/project.module.ts b/harbor-app/src/app/project/project.module.ts
index 2b594f096..0a0f7d3b2 100644
--- a/harbor-app/src/app/project/project.module.ts
+++ b/harbor-app/src/app/project/project.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
 
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.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 { ProjectComponent } from './project.component';
@@ -12,6 +11,7 @@ import { SearchProjectComponent } from './search-project/search-project.componen
 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 { MemberComponent } from './member/member.component';
 import { ProjectRoutingModule } from './project-routing.module';
 
 
@@ -20,7 +20,6 @@ import { ProjectRoutingModule } from './project-routing.module';
     SharedModule,
     RepositoryModule,
     ReplicationModule,
-    MemberModule,
     LogModule,
     ProjectRoutingModule
   ],
@@ -30,7 +29,8 @@ import { ProjectRoutingModule } from './project-routing.module';
     SearchProjectComponent,
     FilterProjectComponent,
     ListProjectComponent,
-    ProjectDetailComponent
+    ProjectDetailComponent,
+    MemberComponent
   ],
   exports: [ ListProjectComponent ]
 })
diff --git a/harbor-app/src/app/replication/replication.module.ts b/harbor-app/src/app/replication/replication.module.ts
index 4b00d64e7..52c488fbf 100644
--- a/harbor-app/src/app/replication/replication.module.ts
+++ b/harbor-app/src/app/replication/replication.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { ReplicationComponent } from './replication.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],
diff --git a/harbor-app/src/app/repository/repository.module.ts b/harbor-app/src/app/repository/repository.module.ts
index 7009f574f..446149a9a 100644
--- a/harbor-app/src/app/repository/repository.module.ts
+++ b/harbor-app/src/app/repository/repository.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RepositoryComponent } from './repository.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],
diff --git a/harbor-app/src/app/shared.module.ts b/harbor-app/src/app/shared/shared.module.ts
similarity index 75%
rename from harbor-app/src/app/shared.module.ts
rename to harbor-app/src/app/shared/shared.module.ts
index a2dbe1855..35df2530f 100644
--- a/harbor-app/src/app/shared.module.ts
+++ b/harbor-app/src/app/shared/shared.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { CoreModule } from './core.module';
+import { CoreModule } from '../core/core.module';
 
 @NgModule({
   imports: [
diff --git a/harbor-app/src/app/user/user.component.html b/harbor-app/src/app/user/user.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/harbor-app/src/app/user/user.component.ts b/harbor-app/src/app/user/user.component.ts
new file mode 100644
index 000000000..8f600a0cf
--- /dev/null
+++ b/harbor-app/src/app/user/user.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'harbor-user',
+  templateUrl: 'user.component.html'
+})
+export class UserComponent {}
\ No newline at end of file
diff --git a/harbor-app/src/app/user/user.module.ts b/harbor-app/src/app/user/user.module.ts
new file mode 100644
index 000000000..8d8b53040
--- /dev/null
+++ b/harbor-app/src/app/user/user.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { UserComponent } from './user.component';
+@NgModule({
+  imports: [
+    SharedModule
+  ],
+  declarations: [
+    UserComponent
+  ],
+  exports: [
+    UserComponent
+  ]
+})
+export class UserModule {
+
+}
\ No newline at end of file