diff --git a/src/templates/app.html b/src/templates/app.html
index 3f3f4a40c..ca84d30e1 100644
--- a/src/templates/app.html
+++ b/src/templates/app.html
@@ -26,11 +26,11 @@
           <span id="matches"></span>
         </p>
 
-        <a onclick="createNewTopLevelNote()" title="Create new top level note">
+        <a onclick="createNewTopLevelNote()" title="Create new top level note" class="icon-action">
           <img src="stat/icons/file-plus.png" alt="Create new top level note"/>
         </a>
 
-        <a onclick="collapseTree()" title="Collapse tree">
+        <a onclick="collapseTree()" title="Collapse tree" class="icon-action">
           <img src="stat/icons/list.png" alt="Collapse tree"/>
         </a>
 
@@ -40,14 +40,30 @@
 
       <div id="noteDetailWrapper">
         <div style="float: left; margin: 0 5px 5px 5px;" class="hide-toggle">
-          <button class="btn btn-sm"
-                  onclick="encryptNoteAndSendToServer();"
-                  title="Encrypt the note so that password will be required to view the note"
-                  id="encryptButton">Encrypt</button>
-          <button class="btn btn-sm"
-                  onclick="decryptNoteAndSendToServer();"
-                  title="Decrypt note permamently so that password will not be required to access this note in the future"
-                  id="decryptButton">Decrypt</button>
+          <!--<button class="btn btn-sm"-->
+                  <!--onclick="encryptNoteAndSendToServer();"-->
+                  <!--title="Encrypt the note so that password will be required to view the note"-->
+                  <!--id="encryptButton">Encrypt</button>-->
+          <!--<button class="btn btn-sm"-->
+                  <!--onclick="decryptNoteAndSendToServer();"-->
+                  <!--title="Decrypt note permamently so that password will not be required to access this note in the future"-->
+                  <!--id="decryptButton">Decrypt</button>-->
+
+          <a onclick="encryptNoteAndSendToServer()"
+             title="Encrypt the note so that password will be required to view the note"
+             class="icon-action"
+             id="encryptButton">
+            <img src="stat/icons/lock.png" alt="Encrypt note"/>
+          </a>
+
+          <a onclick="decryptNoteAndSendToServer()"
+             title="Decrypt note permamently so that password will not be required to access this note in the future"
+             class="icon-action"
+             id="decryptButton">
+            <img src="stat/icons/unlock.png" alt="Decrypt note"/>
+          </a>
+
+          &nbsp;
 
           <input autocomplete="off" value="Welcome to Notecase web app!" id="noteTitle" style="font-size: x-large; border: 0; width: 600px;" tabindex="1">
         </div>
diff --git a/static/icons/lock.png b/static/icons/lock.png
new file mode 100644
index 000000000..3680e1c63
Binary files /dev/null and b/static/icons/lock.png differ
diff --git a/static/icons/unlock.png b/static/icons/unlock.png
new file mode 100644
index 000000000..9d3d792c6
Binary files /dev/null and b/static/icons/unlock.png differ
diff --git a/static/style.css b/static/style.css
index e133a523e..18b3eae7a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -71,12 +71,15 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {
     overflow-x: hidden;
 }
 
-#encryptButton {
-    position: absolute;
-    left: 950px;
+.icon-action:hover {
+    text-decoration: none;
 }
 
-#decryptButton {
-    position: absolute;
-    left: 950px;
+#encryptButton, #decryptButton {
+    display: none;
+}
+
+#encryptButton img, #decryptButton img {
+    top: -5px;
+    position: relative;
 }
\ No newline at end of file