diff --git a/app/app.js b/app/app.js
new file mode 100644
index 0000000..3c2a00a
--- /dev/null
+++ b/app/app.js
@@ -0,0 +1,97 @@
+var menubar = require('menubar'),
+    tray = require('tray'),
+    ipc = require('ipc'),
+    exec = require('child_process').exec;;
+
+/*
+ * The main process listens for events from the web renderer.
+ */
+
+// When photos are dragged onto the toolbar and photos are requested to be updated it will fire an 'update-photos' ipc event.
+// The web renderer will send the list of photos, type of update and new value to apply
+// Once this main process completes the update it will send a 'update-photos-completed' event back to the renderer with information
+//  so a proper response can be displayed.
+ipc.on('update-photos', function(event, args) {
+  console.log('update-photos')
+  console.log(args)
+  if(typeof(args['files']) === 'undefined' || args['files'].length === 0) {
+    console.log('no files passed in to update-photos');
+    return;
+  }
+
+  update_command = '/Users/jaisenmathai/dev/tools/elodie/update.py'
+  if(typeof(args['location']) !== 'undefined') {
+    update_command += ' --location="' + args['location'] + '" "' + args['files'].join('" "') + '"';
+    console.log(update_command)
+    exec(update_command, function(error, stdout, stderr) {
+      console.log('out ' + stdout)
+      console.log('err ' + stderr)
+    });
+    event.sender.send('update-photos-success', args);
+  } else if(typeof(args['album']) !== 'undefined') {
+    update_command += ' --album="' + args['album'] + '" "' + args['files'].join('" "') + '"';
+    console.log(update_command)
+    exec(update_command, function(error, stdout, stderr) {
+      console.log('out ' + stdout)
+      console.log('err ' + stderr)
+    });
+    event.sender.send('update-photos-success', args);
+  }
+  
+})
+
+var mb = menubar(
+      {
+        preloadWindow: true,
+        dir: 'html',
+        index: 'location.html',
+        pages: {
+          'location': 'location.html'
+        },
+        width: 400,
+        height: 350
+      }
+    )
+
+mb.on('ready', function ready () {
+  console.log('app is ready')
+  this.tray.setToolTip('Drag and drop files here')
+  //this.tray.setImage('img/logo.png')
+  this.tray.on('clicked', function clicked () {
+    console.log('tray-clicked')
+  })
+  this.tray.on('drop-files', function dropFiles (ev, files) {
+    mb.showWindow()
+    console.log('window file name ' + mb.window.getRepresentedFilename())
+    mb.window.loadUrl('file://' + mb.getOption('dir') + '/' + mb.getOption('pages')['location'])
+    //mb.window.openDevTools();
+    mb.window.webContents.on('did-finish-load', function() {
+      mb.window.webContents.send('files', files);
+      mb.window.webContents.send('preview', files);
+    });
+  })
+})
+
+mb.on('create-window', function createWindow () {
+  console.log('create-window')
+})
+
+mb.on('after-create-window', function afterCreateWindow () {
+})
+
+mb.on('show', function show () {
+  this.window.loadUrl('file://' + this.getOption('dir') + '/' + this.getOption('index'))
+})
+
+mb.on('after-show', function afterShow () {
+  console.log('after-show')
+})
+
+mb.on('hide', function hide () {
+  console.log('hide')
+})
+
+mb.on('after-hide', function afterHide () {
+  console.log('after-hide')
+})
+
diff --git a/app/html/css/boilerplate.css b/app/html/css/boilerplate.css
new file mode 100644
index 0000000..cda557b
--- /dev/null
+++ b/app/html/css/boilerplate.css
@@ -0,0 +1,293 @@
+/*
+ * HTML5 ✰ Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ *
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Force vertical scrollbar in non-IE
+ * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+body { margin: 0; font-size: 13px; line-height: 1.231; }
+
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * Also: hot pink! (or customize the background color to match your design)
+ */
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/e
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ * 2. Correct inner spacing displayed oddly in IE6/7
+ */
+
+button, input { line-height: normal; *overflow: visible; }
+
+/*
+ * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
+ */
+
+table button, table input { *overflow: auto; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+/* Colors for form validity */
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* ==|== primary styles =====================================================
+   Author:
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== media queries ======================================================
+   PLACEHOLDER Media Queries for Responsive Design.
+   These override the primary ('mobile first') styles
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 480px) {
+  /* Style adjustments for viewports 480px and over go here */
+
+}
+
+@media only screen and (min-width: 768px) {
+  /* Style adjustments for viewports 768px and over go here */
+
+}
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: h5bp.com/q */
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
diff --git a/app/html/css/fontello/LICENSE.txt b/app/html/css/fontello/LICENSE.txt
new file mode 100644
index 0000000..7dd00e6
--- /dev/null
+++ b/app/html/css/fontello/LICENSE.txt
@@ -0,0 +1,30 @@
+Font license info
+
+
+## Fontelico
+
+   Copyright (C) 2012 by Fontello project
+
+   Author:    Crowdsourced, for Fontello project
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://fontello.com
+
+
+## Modern Pictograms
+
+   Copyright (c) 2012 by John Caserta. All rights reserved.
+
+   Author:    John Caserta
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://thedesignoffice.org/project/modern-pictograms/
+
+
+## Typicons
+
+   (c) Stephen Hutchings 2012
+
+   Author:    Stephen Hutchings
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://typicons.com/
+
+
diff --git a/app/html/css/fontello/config.json b/app/html/css/fontello/config.json
new file mode 100644
index 0000000..9e8e32f
--- /dev/null
+++ b/app/html/css/fontello/config.json
@@ -0,0 +1,40 @@
+{
+  "name": "elodie",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "c64623255a4a7c72436b199b05296c4f",
+      "css": "happy",
+      "code": 59392,
+      "src": "fontelico"
+    },
+    {
+      "uid": "53ed8570225581269cd7eff5795e8bea",
+      "css": "unhappy",
+      "code": 59396,
+      "src": "fontelico"
+    },
+    {
+      "uid": "f0c301ac841dafc38d8eb1b933fc73e5",
+      "css": "spin",
+      "code": 59393,
+      "src": "fontelico"
+    },
+    {
+      "uid": "87d337fee4866c2c28f6082994ce0f41",
+      "css": "map",
+      "code": 59395,
+      "src": "typicons"
+    },
+    {
+      "uid": "dplw5xo88mzzr7b45nvjcamyyhni6drs",
+      "css": "book",
+      "code": 59394,
+      "src": "modernpics"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/app/html/css/fontello/css/animation.css b/app/html/css/fontello/css/animation.css
new file mode 100644
index 0000000..ac5a956
--- /dev/null
+++ b/app/html/css/fontello/css/animation.css
@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
diff --git a/app/html/css/fontello/css/config.json b/app/html/css/fontello/css/config.json
new file mode 100644
index 0000000..39c01eb
--- /dev/null
+++ b/app/html/css/fontello/css/config.json
@@ -0,0 +1,40 @@
+{
+  "name": "elodie",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "c64623255a4a7c72436b199b05296c4f",
+      "css": "happy",
+      "code": 59392,
+      "src": "fontelico"
+    },
+    {
+      "uid": "53ed8570225581269cd7eff5795e8bea",
+      "css": "emo-unhappy",
+      "code": 59396,
+      "src": "fontelico"
+    },
+    {
+      "uid": "f0c301ac841dafc38d8eb1b933fc73e5",
+      "css": "spin",
+      "code": 59393,
+      "src": "fontelico"
+    },
+    {
+      "uid": "87d337fee4866c2c28f6082994ce0f41",
+      "css": "map",
+      "code": 59395,
+      "src": "typicons"
+    },
+    {
+      "uid": "dplw5xo88mzzr7b45nvjcamyyhni6drs",
+      "css": "book",
+      "code": 59394,
+      "src": "modernpics"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/app/html/css/fontello/css/elodie.css b/app/html/css/fontello/css/elodie.css
new file mode 100644
index 0000000..cbefa61
--- /dev/null
+++ b/app/html/css/fontello/css/elodie.css
@@ -0,0 +1,61 @@
+@font-face {
+  font-family: 'elodie';
+  src: url('../font/elodie.eot?22328268');
+  src: url('../font/elodie.eot?22328268#iefix') format('embedded-opentype'),
+       url('../font/elodie.woff?22328268') format('woff'),
+       url('../font/elodie.ttf?22328268') format('truetype'),
+       url('../font/elodie.svg?22328268#elodie') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'elodie';
+    src: url('../font/elodie.svg?22328268#elodie') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "elodie";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-happy:before { content: '\e800'; } /* '' */
+.icon-spin:before { content: '\e801'; } /* '' */
+.icon-book:before { content: '\e802'; } /* '' */
+.icon-map:before { content: '\e803'; } /* '' */
+.icon-unhappy:before { content: '\e804'; } /* '' */
\ No newline at end of file
diff --git a/app/html/css/fontello/css/font/elodie.eot b/app/html/css/fontello/css/font/elodie.eot
new file mode 100644
index 0000000..466c894
Binary files /dev/null and b/app/html/css/fontello/css/font/elodie.eot differ
diff --git a/app/html/css/fontello/css/font/elodie.svg b/app/html/css/fontello/css/font/elodie.svg
new file mode 100644
index 0000000..365908a
--- /dev/null
+++ b/app/html/css/fontello/css/font/elodie.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
+<defs>
+<font id="elodie" horiz-adv-x="1000" >
+<font-face font-family="elodie" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="happy" unicode="&#xe800;" d="m261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m208-599c-13 0-27-5-37-16-4-4-8-8-12-12-111-109-253-164-396-165-142-2-285 50-396 155l-3 3-12 12c-21 21-54 20-75-1-20-21-20-55 1-76 3-4 8-8 14-14l3-3c132-124 301-186 469-184 169 1 337 67 468 195 5 5 9 10 14 14 20 22 20 56-1 77-10 10-23 15-37 15z" horiz-adv-x="999" />
+<glyph glyph-name="spin" unicode="&#xe801;" d="m46 144l0 0c0 0-1 0-1 0-8 18-15 37-21 55-6 19-11 38-15 58-19 99-8 203 35 298 3 6 10 8 15 5 1 0 2 0 2-1l0 0 80-59c5-3 6-9 4-14-5-12-9-25-12-38-4-12-7-26-9-39-11-67-3-137 23-201 2-5 0-10-4-13l0 0-80-56c-5-4-12-3-16 3-1 0-1 1-1 2l0 0z m120 574l0 0c0 1 0 1 0 1 15 13 30 25 46 37 16 11 33 22 51 31 89 50 192 72 297 60 6-1 10-6 10-13 0-1-1-1-1-2l0 0-31-94c-2-5-8-8-13-7-13 0-27 0-40 0-14-1-27-2-40-4-68-11-133-40-186-84-4-3-10-3-14 0l0 0-79 58c-5 3-6 11-2 16 0 0 1 1 2 1l0 0z m588 65l0 0c0 0 1 0 1 0 17-10 34-21 50-32 16-12 31-25 46-38 74-69 127-160 148-262 2-6-2-12-9-13-1 0-1 0-2 0l0 0-100 1c-5 0-10 4-11 9-3 13-8 26-12 38-5 12-10 25-17 36-31 61-78 113-137 150-5 3-6 8-5 13l0 0 31 92c2 6 9 9 15 7 1 0 2-1 2-1l0 0z m244-535l0 0c0 0 0 0 0 0-4-20-9-39-15-57-7-19-14-37-22-55-44-92-114-170-205-221-6-3-13-1-16 4 0 1-1 2-1 2l0 0-30 94c-2 6 1 12 6 14 11 7 22 15 32 23 11 9 21 18 30 27 49 48 84 109 101 176 2 5 6 8 11 8l0 0 98-1c6 0 11-5 11-11 0-1 0-2 0-3l0 0z m-438-395l0 0c0 0 0 0 0 0-20-2-40-3-60-3-20 0-40 1-59 4-102 12-198 54-276 125-5 4-5 11 0 16 0 0 1 1 1 1l0 0 81 58c5 3 12 2 16-2 10-8 20-16 32-23 11-7 22-14 34-20 62-31 131-45 200-41 6 0 10-3 12-8l0 0 29-92c2-6-1-12-7-14-1-1-2-1-3-1l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="book" unicode="&#xe802;" d="m600 630l35 0 0-672-502 0c-74 0-133 52-133 128l0 581c0 41 34 75 75 75l465 0 0-576-407 0c-52 0-88-28-88-78l0-2c0-50 36-83 88-83l467 0 0 627z m-60-562l-402 0c-12 0-22 7-22 19 0 10 10 16 22 16l402 0 0-35z" horiz-adv-x="635" />
+<glyph glyph-name="map" unicode="&#xe803;" d="m53-93q-23 0-38 16t-15 36l0 521q0 21 15 36l235 235q14 14 34 15t35-11l224-179 202 201q25 25 57 10t32-47l0-520q0-21-16-38l-234-233q-14-14-35-15t-35 11l-224 179-201-202q-15-15-36-15z m51 178q152 150 156 152l0 378-156-156 0-374z m215 149l202-162 0 389-208 165 0-389q1-1 3-2t3-1z m410 7l0 374q-153-151-156-154l0-376z" horiz-adv-x="834" />
+<glyph glyph-name="emo-unhappy" unicode="&#xe804;" d="m261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m-244-599c-165 0-331-62-461-184l-3-3c-6-5-11-10-14-14-21-21-21-55-1-76 21-21 54-21 75-1l12 12 3 3c111 105 254 157 396 155 143-1 285-56 396-165 4-4 8-8 12-12 20-21 54-21 74-1 21 21 21 55 1 77-5 5-9 10-14 14-131 129-299 194-468 195-3 0-6 0-8 0z" horiz-adv-x="999" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/app/html/css/fontello/css/font/elodie.ttf b/app/html/css/fontello/css/font/elodie.ttf
new file mode 100644
index 0000000..2eb9c0a
Binary files /dev/null and b/app/html/css/fontello/css/font/elodie.ttf differ
diff --git a/app/html/css/fontello/css/font/elodie.woff b/app/html/css/fontello/css/font/elodie.woff
new file mode 100644
index 0000000..2ba5c65
Binary files /dev/null and b/app/html/css/fontello/css/font/elodie.woff differ
diff --git a/app/html/css/fontello/font/elodie.eot b/app/html/css/fontello/font/elodie.eot
new file mode 100644
index 0000000..1e4aaa5
Binary files /dev/null and b/app/html/css/fontello/font/elodie.eot differ
diff --git a/app/html/css/fontello/font/elodie.svg b/app/html/css/fontello/font/elodie.svg
new file mode 100644
index 0000000..8fdb63f
--- /dev/null
+++ b/app/html/css/fontello/font/elodie.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
+<defs>
+<font id="elodie" horiz-adv-x="1000" >
+<font-face font-family="elodie" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="happy" unicode="&#xe800;" d="m261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m208-599c-13 0-27-5-37-16-4-4-8-8-12-12-111-109-253-164-396-165-142-2-285 50-396 155l-3 3-12 12c-21 21-54 20-75-1-20-21-20-55 1-76 3-4 8-8 14-14l3-3c132-124 301-186 469-184 169 1 337 67 468 195 5 5 9 10 14 14 20 22 20 56-1 77-10 10-23 15-37 15z" horiz-adv-x="999" />
+<glyph glyph-name="spin" unicode="&#xe801;" d="m46 144l0 0c0 0-1 0-1 0-8 18-15 37-21 55-6 19-11 38-15 58-19 99-8 203 35 298 3 6 10 8 15 5 1 0 2 0 2-1l0 0 80-59c5-3 6-9 4-14-5-12-9-25-12-38-4-12-7-26-9-39-11-67-3-137 23-201 2-5 0-10-4-13l0 0-80-56c-5-4-12-3-16 3-1 0-1 1-1 2l0 0z m120 574l0 0c0 1 0 1 0 1 15 13 30 25 46 37 16 11 33 22 51 31 89 50 192 72 297 60 6-1 10-6 10-13 0-1-1-1-1-2l0 0-31-94c-2-5-8-8-13-7-13 0-27 0-40 0-14-1-27-2-40-4-68-11-133-40-186-84-4-3-10-3-14 0l0 0-79 58c-5 3-6 11-2 16 0 0 1 1 2 1l0 0z m588 65l0 0c0 0 1 0 1 0 17-10 34-21 50-32 16-12 31-25 46-38 74-69 127-160 148-262 2-6-2-12-9-13-1 0-1 0-2 0l0 0-100 1c-5 0-10 4-11 9-3 13-8 26-12 38-5 12-10 25-17 36-31 61-78 113-137 150-5 3-6 8-5 13l0 0 31 92c2 6 9 9 15 7 1 0 2-1 2-1l0 0z m244-535l0 0c0 0 0 0 0 0-4-20-9-39-15-57-7-19-14-37-22-55-44-92-114-170-205-221-6-3-13-1-16 4 0 1-1 2-1 2l0 0-30 94c-2 6 1 12 6 14 11 7 22 15 32 23 11 9 21 18 30 27 49 48 84 109 101 176 2 5 6 8 11 8l0 0 98-1c6 0 11-5 11-11 0-1 0-2 0-3l0 0z m-438-395l0 0c0 0 0 0 0 0-20-2-40-3-60-3-20 0-40 1-59 4-102 12-198 54-276 125-5 4-5 11 0 16 0 0 1 1 1 1l0 0 81 58c5 3 12 2 16-2 10-8 20-16 32-23 11-7 22-14 34-20 62-31 131-45 200-41 6 0 10-3 12-8l0 0 29-92c2-6-1-12-7-14-1-1-2-1-3-1l0 0z" horiz-adv-x="1000" />
+<glyph glyph-name="book" unicode="&#xe802;" d="m600 630l35 0 0-672-502 0c-74 0-133 52-133 128l0 581c0 41 34 75 75 75l465 0 0-576-407 0c-52 0-88-28-88-78l0-2c0-50 36-83 88-83l467 0 0 627z m-60-562l-402 0c-12 0-22 7-22 19 0 10 10 16 22 16l402 0 0-35z" horiz-adv-x="635" />
+<glyph glyph-name="map" unicode="&#xe803;" d="m53-93q-23 0-38 16t-15 36l0 521q0 21 15 36l235 235q14 14 34 15t35-11l224-179 202 201q25 25 57 10t32-47l0-520q0-21-16-38l-234-233q-14-14-35-15t-35 11l-224 179-201-202q-15-15-36-15z m51 178q152 150 156 152l0 378-156-156 0-374z m215 149l202-162 0 389-208 165 0-389q1-1 3-2t3-1z m410 7l0 374q-153-151-156-154l0-376z" horiz-adv-x="834" />
+<glyph glyph-name="unhappy" unicode="&#xe804;" d="m261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m-244-599c-165 0-331-62-461-184l-3-3c-6-5-11-10-14-14-21-21-21-55-1-76 21-21 54-21 75-1l12 12 3 3c111 105 254 157 396 155 143-1 285-56 396-165 4-4 8-8 12-12 20-21 54-21 74-1 21 21 21 55 1 77-5 5-9 10-14 14-131 129-299 194-468 195-3 0-6 0-8 0z" horiz-adv-x="999" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/app/html/css/fontello/font/elodie.ttf b/app/html/css/fontello/font/elodie.ttf
new file mode 100644
index 0000000..831159b
Binary files /dev/null and b/app/html/css/fontello/font/elodie.ttf differ
diff --git a/app/html/css/fontello/font/elodie.woff b/app/html/css/fontello/font/elodie.woff
new file mode 100644
index 0000000..0ecbc5c
Binary files /dev/null and b/app/html/css/fontello/font/elodie.woff differ
diff --git a/app/html/css/styles.css b/app/html/css/styles.css
new file mode 100644
index 0000000..63d67b1
--- /dev/null
+++ b/app/html/css/styles.css
@@ -0,0 +1,86 @@
+* {
+  font-family: 'Lato', 'Helvetica';
+  font-weight: 300;
+  font-size: 1.1em;
+  color: #444;
+}
+body {
+  padding: 0;
+  margin: 0;
+}
+
+::-webkit-input-placeholder {
+  color: #ddd;
+}
+
+.titlebar {
+  height: 30px;
+  padding-top:10px;
+  text-align: center;
+  background-color: #eee;
+  border-bottom: solid 1.5px #aaa;
+}
+
+.content {
+  padding: 10px;
+}
+
+.content>.location {
+  padding-bottom: 20px;
+  border-bottom: solid 1px #eee;
+}
+.content>.album {
+  padding-top: 15px;
+  padding-bottom: 20px;
+  border-bottom: solid 1px #eee;
+}
+
+.preview {
+  padding: 20px 0;
+}
+
+.preview .center-cropped {
+  display: inline-block;
+  border-radius: 2px;
+  border: solid 1px #ddd;
+  width: 42px;
+  height: 42px;
+  background-position: center center;
+  background-size: cover;
+}
+
+i {
+  color: #555;
+}
+
+i.icon-happy {
+  color: #6cc644;
+}
+
+i.icon-unhappy {
+  color: #bd2c00;
+}
+
+label {
+  display: block;
+  padding-bottom:3px;
+}
+
+input, button { 
+  font-family: 'Lato', 'Helvetica';
+  font-size: 1.1em;
+  color: #666;
+  border: solid 1px #eee;
+  border-radius: 3px;
+}
+
+input {
+  padding: 4px;
+  width: 300px;
+}
+
+button {
+  background-color: #eee;
+  padding: 4px 10px;
+  color:
+}
diff --git a/app/html/img/logo.png b/app/html/img/logo.png
new file mode 100644
index 0000000..06cc218
Binary files /dev/null and b/app/html/img/logo.png differ
diff --git a/app/html/index.html b/app/html/index.html
new file mode 100644
index 0000000..4684b54
--- /dev/null
+++ b/app/html/index.html
@@ -0,0 +1,7 @@
+<html>
+  <body> 
+    Hi,
+    Lorem ipsum
+  </body>
+</html>
+
diff --git a/app/html/js/handlers.js b/app/html/js/handlers.js
new file mode 100644
index 0000000..0c1d74e
--- /dev/null
+++ b/app/html/js/handlers.js
@@ -0,0 +1,84 @@
+var __constants__ = {
+  baseUrl : 'http://localhost:5000'
+};
+
+var __process__ = {};
+
+var ipc = require('ipc');
+ipc.on('files', function(files) {
+  __process__.files = files;
+});
+ipc.on('preview', function(files) {
+  handlers.renderPreview(files)
+});
+ipc.on('update-photos-success', function(args) {
+  handlers.setSuccessTitle()
+  handlers.removeProgressIcons()
+});
+
+function Broadcast() {
+  this.send = function(name, message) {
+    ipc.send(name, message);
+  };
+}
+
+function Handlers() {
+  var self = this;
+  var broadcast = new Broadcast();
+  this.addAlbum = function(ev) {
+    var alb = document.querySelector('input[id="album-field"]').value,
+        progress = document.querySelector('button[class~="addAlbum"] i');
+
+    progress.className = 'icon-spin animate-spin'
+    if(typeof(__process__.files) !== 'object' && __process__.files.length === 0) {
+      return;
+    }
+
+    console.log(__process__.files);
+    progress.className = 'icon-spin animate-spin'
+    broadcast.send('update-photos', {album: alb, files: __process__.files});
+  };
+
+  this.addLocation = function(ev) {
+    var loc = document.querySelector('input[id="location-field"]').value,
+        progress = document.querySelector('button[class~="addLocation"] i');
+
+    if(typeof(__process__.files) !== 'object' && __process__.files.length === 0) {
+      return;
+    }
+
+    console.log(__process__.files);
+    progress.className = 'icon-spin animate-spin'
+    broadcast.send('update-photos', {location: loc, files: __process__.files});
+  };
+
+  this.dispatch = function(ev) {
+    var classes = ev.target.className.split(' ');
+    for(i=0; i<classes.length; i++) {
+      if(typeof(self[classes[i]]) !== 'undefined') {
+        self[classes[i]](ev);
+      }
+    }
+  };
+
+  this.removeProgressIcons = function() {
+    var els = document.querySelectorAll('i.icon-spin');
+    for(el in els) {
+      els[el].className = ''
+    }
+  };
+
+  this.renderPreview = function(files) {
+    html = '<label>You selected ' + (files.length > 1 ? 'these photos' : 'this photo') + '</label>'
+    for(var i=0; i<files.length; i++) {
+      html += '<div class="center-cropped" style="background-image:url(\'file://'+files[i]+'\');" title="'+files[i]+'"></div>'
+    }
+    document.querySelector('.preview').innerHTML = html
+  };
+
+  this.setSuccessTitle = function() {
+    var el = document.querySelector('.titlebar i').className = 'icon-happy'
+  };
+}
+var handlers = new Handlers();
+document.addEventListener('click', handlers.dispatch);
diff --git a/app/html/location.html b/app/html/location.html
new file mode 100644
index 0000000..efef987
--- /dev/null
+++ b/app/html/location.html
@@ -0,0 +1,42 @@
+<html>
+  <head>
+    <script src="js/handlers.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,100italic,300italic' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/boilerplate.css"></script>
+    <link rel="stylesheet" href="css/styles.css"></script>
+    <link rel="stylesheet" href="css/fontello/css/animation.css"></script>
+    <link rel="stylesheet" href="css/fontello/css/elodie.css"></script>
+  </head>
+  <body style="width:100%; height:100%"> 
+    <div class="titlebar">
+      How can I help you? <em>-- Elodie</em><i></i>
+    </div>
+    <div class="content">
+      <div class="location">
+        <label for="location-field"><i class="icon-map"></i>Change geolocation</label>
+        <input id="location-field" type="text" placeholder="i.e. Sunnyvale, CA">
+        <button class="push addLocation">Update<i></i></button>
+      </div>
+      <div class="album">
+        <label for="album-field"><i class="icon-book"></i>Create album</label>
+        <input id="album-field" type="text" placeholder="i.e. Elocie's Birthday Party">
+        <button class="push addAlbum">Update<i></i></button>
+      </div>
+      <div class="preview">
+        <!--<div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>-->
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/app/package.json b/app/package.json
new file mode 100644
index 0000000..1cc177f
--- /dev/null
+++ b/app/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "elodie",
+  "version": "1.0.0",
+  "description": "GUI for Elodie",
+  "main": "app.js",
+  "dependencies": {
+    "menubar": "^2.3.0"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "electron app.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jmathai/elodie"
+  },
+  "author": "Jaisen Mathai",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/jmathai/elodie/issues"
+  },
+  "homepage": "https://github.com/jmathai/elodie"
+}