diff --git a/css/notes.css b/css/notes.css
index ce48f7da..4240e7dd 100644
--- a/css/notes.css
+++ b/css/notes.css
@@ -5,18 +5,27 @@
  */
 
 #app-navigation {
-    padding-bottom: 0; /* no settings bar, so no padding needed */
+	padding-bottom: 0; /* no settings bar, so no padding needed */
 }
 
-#app-navigation #note-add span {
-    font-weight: bold;
-    padding-left: 2px;
+#app-navigation #note-add #new-note-button {
+	margin: 14px auto;
+	width: calc(100% - 20px) !important;
+	text-align: left;
+	padding-left: 34px;
+	background-position: 10px center;
 }
 
 #app-navigation .active a {
 	padding-right: 70px;
 }
 
+.app-content-list-button {
+	display: block;
+	margin: 10px auto;
+	padding: 10px;
+}
+
 #app-navigation li .nav-entry {
 	display: block;
 	width: 100%;
diff --git a/templates/main.php b/templates/main.php
index 71b93d80..51786d33 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -40,10 +40,12 @@ style('notes', [
                 </span>
             </li>
             <!-- new note button -->
-            <li id="note-add" ng-click="create()"
+            <div id="note-add">            
+                <button class="icon-add app-content-list-button ng-binding" id="new-note-button" type="button" name="button" ng-click="create()"
                 oc-click-focus="{ selector: '#app-content textarea' }">
-                <a href='#'>+ <span><?php p($l->t('New note')); ?></span></a>
-            </li>
+                    <?php p($l->t('New note')); ?> 
+                </button>
+            </div>
             <!-- notes list -->
             <li ng-repeat="note in filteredNotes = (notes| and:search | orderBy:['-favorite','-modified'])"
                 ng-class="{ active: note.id == route.noteId }">