diff --git a/gulpfile.js b/gulpfile.js
index 1494c2a5b..7974350d1 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,19 +1,8 @@
 var elixir = require('laravel-elixir');
 
-/*
- |--------------------------------------------------------------------------
- | Elixir Asset Management
- |--------------------------------------------------------------------------
- |
- | Elixir provides a clean, fluent API for defining some basic Gulp tasks
- | for your Laravel application. By default, we are compiling the Sass
- | file for our application, as well as publishing vendor resources.
- |
- */
 
 elixir(function(mix) {
     mix.sass('styles.scss');
     mix.scripts('image-manager.js', 'public/js/image-manager.js');
-    mix.scripts('book-dashboard.js', 'public/js/book-dashboard.js');
-    mix.scripts(['jquery-extensions.js', 'global.js'], 'public/js/common.js');
+    mix.browserify(['jquery-extensions.js', 'pages/book-show.js' ,'global.js'], 'public/js/common.js');
 });
diff --git a/package.json b/package.json
index e28a44f23..5106741e3 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,12 @@
   "private": true,
   "devDependencies": {
     "gulp": "^3.8.8",
-    "laravel-elixir-livereload": "0.0.3"
+    "insert-css": "^0.2.0",
+    "laravel-elixir-livereload": "1.1.3"
   },
   "dependencies": {
     "bootstrap-sass": "^3.0.0",
-    "laravel-elixir": "^2.0.0"
+    "laravel-elixir": "^3.3.1",
+    "vue": "^0.12.16"
   }
 }
diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index a75a4dc74..66326da23 100644
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -16,4 +16,36 @@ $(function () {
         $(this).closest('.chapter').find('.inset-list').slideToggle(180);
     });
 
+});
+
+
+// Vue Components
+
+Vue.component('image-picker', {
+    template: require('./templates/image-picker.html'),
+    props: ['currentImage', 'name', 'imageClass'],
+    data: function() {
+        return {
+            image: this.currentImage
+        }
+    },
+    methods: {
+        showImageManager: function(e) {
+            var _this = this;
+            ImageManager.show(function(image) {
+                _this.image = image.url;
+            });
+        },
+        reset: function() {
+            this.image = '';
+        },
+        remove: function() {
+            this.image = 'none';
+        }
+    }
+});
+
+// Global Vue Instance
+var app = new Vue({
+    el: '#app'
 });
\ No newline at end of file
diff --git a/resources/assets/js/book-dashboard.js b/resources/assets/js/pages/book-show.js
similarity index 96%
rename from resources/assets/js/book-dashboard.js
rename to resources/assets/js/pages/book-show.js
index 1315843ab..3d5d35255 100644
--- a/resources/assets/js/book-dashboard.js
+++ b/resources/assets/js/pages/book-show.js
@@ -1,4 +1,5 @@
-var bookDashboard = new Vue({
+
+new Vue({
     el: '#book-dashboard',
     data: {
         searching: false,
diff --git a/resources/assets/js/templates/image-picker.html b/resources/assets/js/templates/image-picker.html
new file mode 100644
index 000000000..82f0ef7f3
--- /dev/null
+++ b/resources/assets/js/templates/image-picker.html
@@ -0,0 +1,10 @@
+
+<div class="image-picker">
+    <div>
+        <img v-if="image && image !== 'none'" v-attr="src: image, class: imageClass" alt="Image Preview">
+    </div>
+    <button class="button" type="button" v-on="click: showImageManager">Select Image</button>
+    <br>
+    <button class="text-button" v-on="click: reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on="click: remove" type="button">Remove</button>
+    <input type="hidden" v-attr="name: name, id: name" v-model="image">
+</div>
\ No newline at end of file
diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 19c7b84e4..bafb68165 100644
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -59,6 +59,9 @@ $button-border-radius: 2px;
   &:focus, &:active {
     outline: 0;
   }
+  &.neg {
+    color: $negative;
+  }
 }
 
 .button-group {
diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index adc1df197..60a14fde8 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -91,9 +91,9 @@ form.search-box {
   line-height: 1;
 }
 .logo-image {
-  padding: $-m $-s $-m 0;
+  margin: $-m $-s $-m 0;
   vertical-align: top;
-  height: 75px;
+  height: 43px;
 }
 
 .dropdown-container {
diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 3dc48efc8..d50134522 100644
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -256,6 +256,11 @@ ul {
   }
 }
 
+span.sep {
+  color: #BBB;
+  padding: 0 $-xs;
+}
+
 .list > * {
   display: block;
 }
@@ -265,4 +270,5 @@ ul {
   */
 i {
   padding-right: $-xs;
-}
\ No newline at end of file
+}
+
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 39bbfee32..de774042a 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -16,13 +16,12 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
     <script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
-    <script src="/js/common.js"></script>
     <script src="/bower/vue/dist/vue.min.js"></script>
     <script src="/bower/vue-resource/dist/vue-resource.min.js"></script>
 
     @yield('head')
 </head>
-<body class="@yield('body-class')">
+<body class="@yield('body-class')" id="app">
 
     @if(Session::has('success'))
         <div class="notification anim pos">
@@ -41,7 +40,9 @@
             <div class="row">
                 <div class="col-md-4 col-sm-3">
                     <a href="/" class="logo">
-                        <img class="logo-image" src="/logo.png" alt="Logo">
+                        @if(Setting::get('app-logo', '') !== 'none')
+                            <img class="logo-image" src="{{ Setting::get('app-logo', '') === '' ? '/logo.png' : Setting::get('app-logo', '') }}" alt="Logo">
+                        @endif
                         <span class="logo-text">{{ Setting::get('app-name', 'BookStack') }}</span>
                     </a>
                 </div>
@@ -90,5 +91,6 @@
     </section>
 
 @yield('bottom')
+<script src="/js/common.js"></script>
 </body>
 </html>
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index d8001b19a..edd8a9b47 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -91,6 +91,4 @@
         </div>
     </div>
 
-    <script src="/js/book-dashboard.js"></script>
-
 @stop
\ No newline at end of file
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 5e484be65..f6ecadce0 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -12,16 +12,30 @@
         {!! csrf_field() !!}
 
         <h3>App Settings</h3>
-        <div class="form-group">
-            <label for="setting-app-name">Application name</label>
-            <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
-        </div>
-        <div class="form-group">
-            <label for="setting-app-public">Allow public viewing?</label>
-            <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label>
-            <label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="setting-app-name">Application name</label>
+                    <input type="text" value="{{ Setting::get('app-name', 'BookStack') }}" name="setting-app-name" id="setting-app-name">
+                </div>
+                <div class="form-group">
+                    <label for="setting-app-public">Allow public viewing?</label>
+                    <label><input type="radio" name="setting-app-public" @if(Setting::get('app-public')) checked @endif value="true"> Yes</label>
+                    <label><input type="radio" name="setting-app-public" @if(!Setting::get('app-public')) checked @endif value="false"> No</label>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="form-group" id="logo-control">
+                    <label for="setting-app-logo">Application Logo</label>
+                    <p class="small">This image should be 43px in height. </p>
+                    <image-picker current-image="{{ Setting::get('app-logo', '') }}" name="setting-app-logo" image-class="logo-image"></image-picker>
+                </div>
+            </div>
         </div>
 
+
+
         <hr class="margin-top">
 
         <h3>Registration Settings</h3>
@@ -70,4 +84,9 @@
 
 </div>
 
+@stop
+
+@section('bottom')
+    @include('pages/image-manager')
+    <script src="/js/image-manager.js"></script>
 @stop
\ No newline at end of file