diff --git a/src/app/api/supabase/standup.service.spec.ts b/src/app/api/supabase/standup.service.spec.ts
new file mode 100644
index 0000000..2bcfc24
--- /dev/null
+++ b/src/app/api/supabase/standup.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StandupService } from './standup.service';
+
+describe('StandupService', () => {
+  let service: StandupService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StandupService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/api/supabase/standup.service.ts b/src/app/api/supabase/standup.service.ts
new file mode 100644
index 0000000..f7953e0
--- /dev/null
+++ b/src/app/api/supabase/standup.service.ts
@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { StandUp } from './standup';
+import { SupaService } from './supa.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StandupService {
+  // standupMap: Map<number, StandUp> = new Map();
+  standupMap = {};
+  standups: BehaviorSubject<any> = new BehaviorSubject([]);
+
+  constructor(
+    private supa: SupaService,
+  ) { }
+
+  getStandUps(): Observable<StandUp[]> {
+    if (Object.values(this.standupMap).length === 0) {
+      console.log('getStandUps - REFRESH')
+      return this.refreshStandUps();
+    } else {
+      console.log('getStandUps - LOCAL')
+      return this.standups.asObservable();
+    }
+  }
+
+  refreshStandUps(): Observable<StandUp[]> {
+    this.supa.client.from<StandUp>('standup').select('id, name, description')
+      .then(standups => this.updateStore(standups.body))
+      .catch(error => console.log('Error: ', error));
+    return this.standups.asObservable();
+  }
+
+  updateStore(standups: StandUp[]) {
+    standups.forEach(e => {
+      // this.standupMap.set(e.id, e);
+      this.standupMap[e.id] = e;
+    });
+    this.standups.next(Object.values(this.standupMap));
+  }
+
+  updateOne(standup: StandUp) {
+
+  }
+
+  deleteOne(standup: StandUp) {
+
+  }
+
+  addOne(standup: StandUp) {
+
+  }
+
+}
diff --git a/src/app/api/supabase/standup.ts b/src/app/api/supabase/standup.ts
new file mode 100644
index 0000000..b6aa608
--- /dev/null
+++ b/src/app/api/supabase/standup.ts
@@ -0,0 +1,5 @@
+export class StandUp {
+    id: number;
+    name: string;
+    description: string;
+}
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f6a49fa..2144629 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,12 +6,29 @@ import { HuddleComponent } from './huddle/huddle.component';
 import { LoginComponent } from './login/login.component';
 import { SignupComponent } from './signup/signup.component';
 import { AuthGuard } from './authguard.service';
+import { ProfileComponent } from './profile/profile.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { ChannelComponent } from './channel/channel.component';
 
 const routes: Routes = [
   { 
-    path: 'huddle',
+    path: 'huddle/:id',
     component: HuddleComponent,
     canActivate: [AuthGuard]
+  },{ 
+    path: 'channel/:id',
+    component: ChannelComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'profile',
+    component: ProfileComponent,
+    canActivate: [AuthGuard]
+  },
+  {
+    path: 'home',
+    component: DashboardComponent,
+    canActivate: [AuthGuard]
   },
   {
     path: 'login',
@@ -21,7 +38,7 @@ const routes: Routes = [
     path: 'signup',
     component: SignupComponent,
   },
-  { path: '**', redirectTo: '/huddle', pathMatch: 'full' },
+  { path: '**', redirectTo: '/home', pathMatch: 'full' },
 ]
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2bcf31b..5acaf4c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,14 @@
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar navbar-dark bg-dark">
   <a class="navbar-brand" href="#" style="margin: 0 auto;">ASYNC HUDDLE</a>
-  <span *ngIf="supa.user | async" (click)="logout()">Logout</span>
+  <span *ngIf="supa.user | async" (click)="logout()" class="cursor-pointer">Logout</span>
 </nav>
-<div class="container">
-  <router-outlet></router-outlet>
+<div class="container-fluid p-0">
+  <div class="myContainer d-flex">
+    <div class="menu">
+      <app-channel-list></app-channel-list>
+    </div>
+    <div class="container content">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..bdf81e8 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,24 @@
+.cursor-pointer {
+    cursor: pointer;
+    font-weight: 500;
+    color: white;
+    &:hover {
+        color: lightseagreen;
+    }
+}
+
+.container-fluid {
+    height: calc(100% - 56px);
+}
+
+.container.content {
+    padding-top: 15px;
+    height: 100%;
+    max-width: 100%;
+    // overflow-x: scroll;
+}
+
+.myContainer {
+    min-height: 100%;
+    max-width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 88bf4eb..9a62c19 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { FormsModule } from '@angular/forms';
 
 import { SupaService } from './api/supabase/supa.service';
+import { StandupService } from './api/supabase/standup.service';
 import { AuthGuard } from './authguard.service';
 
 import { AppComponent } from "./app.component";
@@ -13,6 +14,10 @@ import { RecorderComponent } from './recorder/recorder.component';
 import { LoginComponent } from './login/login.component';
 import { SignupComponent } from './signup/signup.component';
 import { HuddleComponent } from './huddle/huddle.component';
+import { ProfileComponent } from './profile/profile.component';
+import { ChannelComponent } from './channel/channel.component';
+import { ChannelListComponent } from './channel-list/channel-list.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 @NgModule({
   declarations: [
@@ -20,7 +25,11 @@ import { HuddleComponent } from './huddle/huddle.component';
     RecorderComponent,
     HuddleComponent,
     LoginComponent,
-    SignupComponent
+    SignupComponent,
+    ProfileComponent,
+    ChannelComponent,
+    ChannelListComponent,
+    DashboardComponent
   ],
   imports: [
     BrowserModule,
@@ -30,6 +39,7 @@ import { HuddleComponent } from './huddle/huddle.component';
   ],
   providers: [
     SupaService,
+    StandupService,
     AuthGuard,
   ],
   bootstrap: [
diff --git a/src/app/channel-list/channel-list.component.html b/src/app/channel-list/channel-list.component.html
new file mode 100644
index 0000000..3a66c72
--- /dev/null
+++ b/src/app/channel-list/channel-list.component.html
@@ -0,0 +1,17 @@
+<div class="list bg-dark text-white p-3">
+    <p><strong>Standup</strong> <strong class="newBtn">+</strong></p>
+    <ul class="list-unstyled">
+        <li *ngFor="let s of standups" [title]="s.description" [routerLink]="'/huddle/'+s.id">{{s.name}}</li>
+    </ul>
+    <p><strong>Channel</strong> <strong class="newBtn">+</strong></p>
+    <ul class="list-unstyled">
+        <li>...</li>
+        <li>...</li>
+        <li>...</li>
+        <li>...</li>
+    </ul>
+    <p><strong>Settings</strong></p>
+    <ul class="list-unstyled">
+        <li [routerLink]="'/profile'">Profile</li>
+    </ul>
+</div>
diff --git a/src/app/channel-list/channel-list.component.scss b/src/app/channel-list/channel-list.component.scss
new file mode 100644
index 0000000..a5b0f37
--- /dev/null
+++ b/src/app/channel-list/channel-list.component.scss
@@ -0,0 +1,22 @@
+.list {
+    height: 100%;
+    max-width: 300px;
+    border-top: 1px dashed lightgray;
+    li {
+        padding: 5px 10px;
+        border-radius: 5px;
+        &:hover {
+            color: lightseagreen;
+            // -webkit-box-shadow: inset 0px 0px 4px 4px rgba(211, 211, 211, 0.4); 
+            // box-shadow: inset 0px 0px 4px 4px rgba(211, 211, 211, 0.4);
+            cursor: pointer;
+        }
+    }
+    .newBtn {
+        margin-left:5px;
+        &:hover {
+            cursor: pointer;
+            color: lightseagreen;
+        }
+    }
+}
diff --git a/src/app/channel-list/channel-list.component.spec.ts b/src/app/channel-list/channel-list.component.spec.ts
new file mode 100644
index 0000000..d4d8c95
--- /dev/null
+++ b/src/app/channel-list/channel-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChannelListComponent } from './channel-list.component';
+
+describe('ChannelListComponent', () => {
+  let component: ChannelListComponent;
+  let fixture: ComponentFixture<ChannelListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChannelListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChannelListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/channel-list/channel-list.component.ts b/src/app/channel-list/channel-list.component.ts
new file mode 100644
index 0000000..2529fa5
--- /dev/null
+++ b/src/app/channel-list/channel-list.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable, throwError } from 'rxjs';
+import { StandUp } from '../api/supabase/standup';
+import { StandupService } from '../api/supabase/standup.service';
+
+@Component({
+  selector: 'app-channel-list',
+  templateUrl: './channel-list.component.html',
+  styleUrls: ['./channel-list.component.scss']
+})
+export class ChannelListComponent implements OnInit {
+  standups: StandUp[] = [];
+
+  constructor(
+    private standupSevice: StandupService,
+  ) { }
+
+  ngOnInit() {
+    this.loadStandUps().subscribe(standups => {
+      console.log('ChannelListComponent - StandUps', standups);
+      this.standups = standups;
+    });
+  }
+
+  loadStandUps(): Observable<StandUp[]> {    
+    return this.standupSevice.getStandUps();
+  }
+
+}
diff --git a/src/app/channel/channel.component.html b/src/app/channel/channel.component.html
new file mode 100644
index 0000000..19f4ad8
--- /dev/null
+++ b/src/app/channel/channel.component.html
@@ -0,0 +1 @@
+<p>channel works!</p>
diff --git a/src/app/channel/channel.component.scss b/src/app/channel/channel.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/channel/channel.component.spec.ts b/src/app/channel/channel.component.spec.ts
new file mode 100644
index 0000000..596fa52
--- /dev/null
+++ b/src/app/channel/channel.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChannelComponent } from './channel.component';
+
+describe('ChannelComponent', () => {
+  let component: ChannelComponent;
+  let fixture: ComponentFixture<ChannelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChannelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChannelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/channel/channel.component.ts b/src/app/channel/channel.component.ts
new file mode 100644
index 0000000..0736dcc
--- /dev/null
+++ b/src/app/channel/channel.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-channel',
+  templateUrl: './channel.component.html',
+  styleUrls: ['./channel.component.scss']
+})
+export class ChannelComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
new file mode 100644
index 0000000..9c5fce9
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.html
@@ -0,0 +1 @@
+<p>dashboard works!</p>
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..5ec4ff8
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..843c80f
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/huddle/huddle.component.ts b/src/app/huddle/huddle.component.ts
index 25f3297..21ab316 100644
--- a/src/app/huddle/huddle.component.ts
+++ b/src/app/huddle/huddle.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
+import { SupaService } from '../api/supabase/supa.service';
 
 @Component({
   selector: 'app-huddle',
@@ -33,10 +34,12 @@ export class HuddleComponent implements OnInit {
   ];
   selectedUser;
 
-  constructor(private modalService: NgbModal) {}
+  constructor(
+    private modalService: NgbModal,
+    public supa: SupaService,
+  ) {}
 
   ngOnInit() {
-    
   }
 
   playStory(user) {
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
new file mode 100644
index 0000000..797181d
--- /dev/null
+++ b/src/app/profile/profile.component.html
@@ -0,0 +1,6 @@
+<legend>Profile</legend>
+<pre>
+    <code *ngIf="user">
+        {{ user | json }}
+    </code>
+</pre>
\ No newline at end of file
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/profile/profile.component.spec.ts b/src/app/profile/profile.component.spec.ts
new file mode 100644
index 0000000..e88012e
--- /dev/null
+++ b/src/app/profile/profile.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
new file mode 100644
index 0000000..939e62e
--- /dev/null
+++ b/src/app/profile/profile.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { SupabaseAuthUser } from '@supabase/supabase-js';
+import { SupaService } from '../api/supabase/supa.service';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent implements OnInit {
+  user: SupabaseAuthUser;
+
+  constructor(
+    public supa: SupaService,
+  ) { }
+
+  ngOnInit(): void {
+    this.supa.client.auth.user().then(user => {
+      console.log('user', user)
+      this.user = user;
+    });
+  }
+
+}
diff --git a/src/app/recorder/recorder.component.html b/src/app/recorder/recorder.component.html
index d5b1144..5ceb59f 100644
--- a/src/app/recorder/recorder.component.html
+++ b/src/app/recorder/recorder.component.html
@@ -2,16 +2,17 @@
 
 
 <ng-template #content let-modal>
+    <div class="modal-header">
+        <strong>Record a stoy</strong>
+        <span class="float-right cursor-pointer" (click)="modal.dismiss('Cross click')">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
+                    fill="currentColor" />
+            </svg>
+        </span>
+    </div>
     <div class="modal-body d-flex flex-column">
-        <div>
-            <span class="float-right" (click)="modal.dismiss('Cross click')">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
-                        fill="currentColor" />
-                </svg>
-            </span>
-        </div>
         <video *ngIf="stream" [id]="id" [srcObject]="stream" class="video-recorder" autoplay muted volume="0"></video>
         <button *ngIf="!isRecording" class="btn btn-success" (click)="startRecording()">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/app/recorder/recorder.component.scss b/src/app/recorder/recorder.component.scss
index 544550b..1b471a5 100644
--- a/src/app/recorder/recorder.component.scss
+++ b/src/app/recorder/recorder.component.scss
@@ -1,4 +1,10 @@
 .video-recorder {
     max-height: 50vh;
     max-width: 90vw;
+}
+.cursor-pointer {
+    cursor: pointer;
+    &:hover {
+        color: lightseagreen;
+    }
 }
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 37408d1..d855115 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,4 +3,5 @@
 html,
 body {
   font-family: sans-serif;
+  height: 100%;
 }