diff --git a/tetawebapp/static/images/transparent.png b/tetawebapp/static/images/transparent.png
new file mode 100644
index 0000000..c23935e
Binary files /dev/null and b/tetawebapp/static/images/transparent.png differ
diff --git a/tetawebapp/static/styles/colors.css b/tetawebapp/static/styles/colors.css
index 2b7593d..361cac1 100644
--- a/tetawebapp/static/styles/colors.css
+++ b/tetawebapp/static/styles/colors.css
@@ -1,3 +1,9 @@
+/*
+* Here are the base color scheme and icon set.
+* You can modify it or create your own using the same variables
+* and make it loaded after this one but before the fonts.css in
+* the HTML header section of the index.html template file.
+*/
 :root {
     --coloured-bg: #FF5D00;
     --light-coloured-bg: #FFB387;
diff --git a/tetawebapp/static/styles/fonts.css b/tetawebapp/static/styles/fonts.css
index b0b05ed..425ce76 100644
--- a/tetawebapp/static/styles/fonts.css
+++ b/tetawebapp/static/styles/fonts.css
@@ -1,3 +1,10 @@
+/*
+* Here are the font definitions.
+* You can modify it or create your own and make it loaded
+* after this one in the HTML header section of the index.html
+* template file.
+*/
+
 @font-face {
 	font-family: "Roboto Condensed";
 	font-style: normal;
diff --git a/tetawebapp/static/styles/tetawebapp.css b/tetawebapp/static/styles/tetawebapp.css
index 604aa0f..b24086a 100644
--- a/tetawebapp/static/styles/tetawebapp.css
+++ b/tetawebapp/static/styles/tetawebapp.css
@@ -1,3 +1,11 @@
+/*
+* Do NOT modify this file:
+* ------------------------
+* If you want to add or modify classes, create a new
+* CSS files and make it loaded after this one in the
+* HTML header section of the index.html template file.
+*/
+
 * {
  box-sizing: border-box; 
 }
@@ -176,13 +184,58 @@ button:hover, input[type="button"]:hover, input[type="submit"]:hover {
   color: var(--text-color);
   cursor: pointer;
 }
-input[type="image"] {
+
+input.add,
+input.edit,
+input.login,
+input.logout,
+input.refresh,
+input.save,
+input.search,
+input.trash {
   width: 16px;
   height: 16px;
+  margin: 0;
+  padding: 0;
   border-radius: 2px;
+  border-style: none;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
 
-input[type="image"]:hover {
+input.add:hover,
+input.edit:hover,
+input.login:hover,
+input.logout:hover,
+input.refresh:hover,
+input.save:hover,
+input.search:hover,
+input.trash:hover {
   background-color: var(--coloured-bg);
   cursor: pointer;
 }
+
+input.add {
+  background: var(--add_icon);
+}
+input.edit {
+  background: var(--edit_icon);
+}
+input.login {
+  background: var(--login_icon);
+}
+input.logout {
+  background: var(--logout_icon);
+}
+input.refresh {
+  background: var(--refresh_icon);
+}
+input.save {
+  background: var(--save_icon);
+}
+input.search {
+  background: var(--search_icon);
+}
+input.trash {
+  background: var(--trash_icon);
+}
diff --git a/tetawebapp/templates/basics.html b/tetawebapp/templates/basics.html
index 1e6e372..da9cb8a 100644
--- a/tetawebapp/templates/basics.html
+++ b/tetawebapp/templates/basics.html
@@ -12,6 +12,13 @@
           change the default theme to your favorite colors and icon set.
         </p>
         <pre>
+/*
+* Here are the font definitions.
+* You can modify it or create your own and make it loaded
+* after this one in the HTML header section of the index.html
+* template file.
+*/
+
 @font-face {
 	font-family: "Roboto Condensed";
 	font-style: normal;
@@ -27,6 +34,12 @@
 }
         </pre>
         <pre>
+/*
+* Here are the base color scheme and icon set.
+* You can modify it or create your own using the same variables
+* and make it loaded after this one but before the fonts.css in
+* the HTML header section of the index.html template file.
+*/
 :root {
     --coloured-bg: #FF5D00;
     --light-coloured-bg: #FFB387;
diff --git a/tetawebapp/templates/inputs.html b/tetawebapp/templates/inputs.html
index 7eaeed5..7f26589 100644
--- a/tetawebapp/templates/inputs.html
+++ b/tetawebapp/templates/inputs.html
@@ -19,14 +19,14 @@
         <br/>
         <input type='button' value='And me !' />
         <br/>
-        <input type='image' src='/static/images/add.png' title='add' alt='add'/>
-        <input type='image' src='/static/images/edit.png' title='edit' alt='edit'/>
-        <input type='image' src='/static/images/login.png' title='login' alt='login'/>
-        <input type='image' src='/static/images/logout.png' title='logout' alt='logout'/>
-        <input type='image' src='/static/images/refresh.png' title='refresh' alt='refresh'/>
-        <input type='image' src='/static/images/save.png' title='save' alt='save'/>
-        <input type='image' src='/static/images/search.png' title='search' alt='search'/>
-        <input type='image' src='/static/images/trash.png' title='trash' alt='trash'/>
+        <input type='button' class='add' title='add' value=' '/>
+        <input type='button' class='edit' title='edit' value=' '/>
+        <input type='button' class='login' title='login' value=' '/>
+        <input type='button' class='logout' title='logout' value=' '/>
+        <input type='button' class='refresh' title='refresh' value=' '/>
+        <input type='button' class='save' title='save' value=' '/>
+        <input type='button' class='search' title='search' value=' '/>
+        <input type='button' class='trash' title='trash' value=' '/>
         <br/>
         <pre>
 #!/bin/sh