diff --git a/App.js b/App.js
index bf9fe76..136886f 100644
--- a/App.js
+++ b/App.js
@@ -1,8 +1,29 @@
+import Note from './Note.js';
+
 function App(){
 return {
-view: function(){
-return m('div.app', [
-  m('h1', 'App')
+view: function(vnode){
+const {bin} = vnode.attrs;
+return m('.app', [
+  m('.top', [
+    m('.top-left', [
+      m('button', {key: 'button'}, 'New Note...'),
+      m('input.search', {key: 'search'}, {value: ''}),
+      m('select.sorting', {key: 'sorting'}, [
+        m('option', 'Newest -> Oldest'),
+        m('option', 'Oldest -> Newest')
+        ])
+      ]),
+    m('.top-right', [
+      m('.bin-id', bin.id),
+      m('button', 'New Bin...')
+      ])
+    ]),
+  m('.main', [
+    m('.notes', notes.map(note =>
+      m(Note, {note})
+      ))
+    ])
   ]);
 }
 };  
diff --git a/index.css b/index.css
index e69de29..1b2e5c5 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,30 @@
+body{
+  height: 100vh;
+  width: 100vw;
+  }
+
+.app{
+  height: 100%;
+  width: 100%;
+  background-color: #AAAACC;
+  
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  }
+
+.app > .top{
+  height: 2rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  }
+
+.app > .main{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: start;
+  }
\ No newline at end of file