diff --git a/src/app/app.component.css b/src/app/app.component.css
new file mode 100644
index 000000000..af1f2f763
--- /dev/null
+++ b/src/app/app.component.css
@@ -0,0 +1,27 @@
+:host {
+    display: flex;
+    min-height: 100%;
+  }
+  nav {
+    width: 68px;
+    background-color: #53ace4;
+  }
+  nav .icon {
+    width: 48px;
+    height: 48px;
+    margin: 10px;
+  }
+  section {
+    width: 100%;
+    background-color: #32435b;
+  }
+  section > header {
+    color: #ffffff;
+    padding: 10px;
+  }
+  section > header > h1 {
+    font-size: 2em;
+  }
+  section > header .description {
+    font-style: italic;
+  }
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
new file mode 100644
index 000000000..99c6682ff
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1,7 @@
+<section>
+    <header>
+        <h1>bawls</h1>
+        <p class="description">blah blah t3xt</p>
+    </header>
+    <mw-media-item (delete)="onMediaItemDelete($event)" [mediaItem]="firstMediaItem"></mw-media-item>
+</section>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 000000000..fbd49e00f
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'mw-app',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+    firstMediaItem = {
+        id: 1,
+        name: 'Firebug',
+        medium: 'Series',
+        category: 'Science Fiction',
+        year: 2010,
+        watchedOn: 1294166565384,
+        isFavorite: false
+    };
+
+    onMediaItemDelet(mediaItem) {}
+}
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e69de29bb..5b044856e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { MediaItemComponent } from './media-item.component';
+
+@NgModule({
+    imports: [
+        BrowserModule
+    ],
+    declarations: [
+        AppComponent,
+        MediaItemComponent
+    ],
+    bootstrap: [
+        AppComponent
+    ]
+})
+export class AppModule {}
\ No newline at end of file
diff --git a/src/app/media-item.component.css b/src/app/media-item.component.css
new file mode 100644
index 000000000..4c1c27498
--- /dev/null
+++ b/src/app/media-item.component.css
@@ -0,0 +1,66 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 140px;
+    height: 200px;
+    border: 2px solid;
+    background-color: #29394b;
+    padding: 10px;
+    color: #bdc2c5;
+    margin: 0 12px 12px 0;
+  }
+  h2 {
+    font-size: 1.6em;
+    flex: 1;
+  }
+  :host(.medium-movies) {
+    border-color: #53ace4;
+  }
+  :host(.medium-movies) > h2 {
+    color: #53ace4;
+  }
+  :host(.medium-series) {
+    border-color: #45bf94;
+  }
+  :host(.medium-series) > h2 {
+    color: #45bf94;
+  }
+  .tools {
+    margin-top: 8px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+  .favorite {
+    width: 24px;
+    height: 24px;
+    fill: #bdc2c5;
+    cursor: pointer;
+  }
+  .favorite.is-favorite {
+      fill: #37ad79;
+  }
+  .favorite.is-favorite-hovering {
+      fill: #45bf94;
+  }
+  .favorite.is-favorite.is-favorite-hovering {
+      fill: #ec4342;
+  }
+  .delete {
+    display: block;
+    background-color: #ec4342;
+    padding: 4px;
+    font-size: .8em;
+    border-radius: 4px;
+    color: #ffffff;
+    cursor: pointer;
+  }
+  .details {
+    display: block;
+    background-color: #37ad79;
+    padding: 4px;
+    font-size: .8em;
+    border-radius: 4px;
+    color: #ffffff;
+    text-decoration: none;
+  }
\ No newline at end of file
diff --git a/src/app/media-item.component.html b/src/app/media-item.component.html
new file mode 100644
index 000000000..94367d7da
--- /dev/null
+++ b/src/app/media-item.component.html
@@ -0,0 +1,12 @@
+<h2>{{ mediaItem.name }}</h2>
+<div>{{ mediaItem.watchedOn }}</div>
+<div>{{ mediaItem.category }}</div>
+<div>{{ mediaItem.year }}</div>
+<div class="tools">
+    <svg class="favorite" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M12 9.229c.234-1.12 1.547-6.229 5.382-6.229 2.22 0 4.618 1.551 4.618 5.003 0 3.907-3.627 8.47-10 12.629-6.373-4.159-10-8.722-10-12.629 0-3.484 2.369-5.005 4.577-5.005 3.923 0 5.145 5.126 5.423 6.231zm-12-1.226c0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-7.962-9.648-9.028-12-3.737-2.338-5.262-12-4.27-12 3.737z"
+        />
+    </svg>
+    <a class="delete" (click)="onDelete()">remove</a>
+    <a class="details">watch</a>
+</div>
\ No newline at end of file
diff --git a/src/app/media-item.component.ts b/src/app/media-item.component.ts
new file mode 100644
index 000000000..40a2a3e15
--- /dev/null
+++ b/src/app/media-item.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'mw-media-item',
+    templateUrl: './media-item.component.html',
+    styleUrls: ['./media-item.component.css']
+})
+
+export class MediaItemComponent {
+    @Input() mediaItem;
+    @Output() delete = new EventEmitter;
+
+    onDelete() {
+        console.log('deleted');
+        this.delete.emit(this.mediaItem);
+    }
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 01c08e3c4..da9d46ee2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+  <mw-app></mw-app>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index e69de29bb..3a6cd4090 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
\ No newline at end of file