diff --git a/assets/base.scss b/assets/base.scss
new file mode 100644
index 0000000..3dc130c
--- /dev/null
+++ b/assets/base.scss
@@ -0,0 +1 @@
+@import "~bootstrap/dist/css/bootstrap.css";
\ No newline at end of file
diff --git a/assets/fonts/icomoon.svg b/assets/fonts/icomoon.svg
new file mode 100644
index 0000000..7c3b0b5
--- /dev/null
+++ b/assets/fonts/icomoon.svg
@@ -0,0 +1,14 @@
+<?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>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" horiz-adv-x="256" d="" />
+<glyph unicode="&#xf002;" glyph-name="view" horiz-adv-x="475" d="M329.143 237.714c0 70.572-57.428 128-128 128s-128-57.428-128-128 57.428-128 128-128 128 57.428 128 128zM475.428 0c0-20-16.572-36.572-36.572-36.572-9.714 0-19.143 4-25.714 10.857l-98 97.714c-33.428-23.143-73.428-35.428-114-35.428-111.143 0-201.143 90-201.143 201.143s90 201.143 201.143 201.143 201.143-90 201.143-201.143c0-40.571-12.286-80.571-35.428-114l98-98c6.572-6.572 10.572-16 10.572-25.714z" />
+<glyph unicode="&#xf040;" glyph-name="edit" horiz-adv-x="433" d="M103.715 36.572l26 26-67.143 67.143-26-26v-30.572h36.572v-36.572h30.572zM253.143 301.714c0 3.714-2.571 6.286-6.286 6.286-1.714 0-3.429-0.572-4.857-2l-154.857-154.857c-1.428-1.428-2-3.143-2-4.857 0-3.714 2.572-6.286 6.285-6.286 1.715 0 3.428 0.572 4.857 2l154.857 154.857c1.429 1.429 2 3.143 2 4.857zM237.714 356.572l118.857-118.857-237.714-237.714h-118.857v118.857zM432.857 329.143c0-9.714-4-19.143-10.572-25.714l-47.428-47.428-118.857 118.857 47.428 47.143c6.572 6.857 16 10.857 25.714 10.857s19.143-4 26-10.857l67.143-66.857c6.572-6.857 10.572-16.285 10.572-26z" />
+<glyph unicode="&#xf04b;" glyph-name="run" horiz-adv-x="404" d="M395.428 210.572l-379.428-210.857c-8.857-4.857-16-0.572-16 9.428v420.572c0 10 7.143 14.285 16 9.428l379.428-210.857c8.857-4.857 8.857-12.857 0-17.714z" />
+<glyph unicode="&#xf1f8;" glyph-name="delete" horiz-adv-x="402" d="M146.286 82.286v201.143c0 5.143-4 9.143-9.143 9.143h-18.285c-5.143 0-9.143-4-9.143-9.143v-201.143c0-5.143 4-9.143 9.143-9.143h18.285c5.143 0 9.143 4 9.143 9.143zM219.429 82.286v201.143c0 5.143-4 9.143-9.143 9.143h-18.286c-5.143 0-9.143-4-9.143-9.143v-201.143c0-5.143 4-9.143 9.143-9.143h18.286c5.143 0 9.143 4 9.143 9.143zM292.572 82.286v201.143c0 5.143-4 9.143-9.143 9.143h-18.286c-5.143 0-9.143-4-9.143-9.143v-201.143c0-5.143 4-9.143 9.143-9.143h18.286c5.143 0 9.143 4 9.143 9.143zM137.143 365.714h128l-13.714 33.429c-0.857 1.143-3.429 2.857-4.857 3.143h-90.571c-1.714-0.285-4-2-4.857-3.143zM402.286 356.572v-18.285c0-5.143-4-9.143-9.143-9.143h-27.428v-270.857c0-31.428-20.572-58.286-45.714-58.286h-237.714c-25.143 0-45.715 25.714-45.715 57.143v272h-27.428c-5.143 0-9.143 4-9.143 9.143v18.286c0 5.143 4 9.143 9.143 9.143h88.285l20 47.714c5.715 14 22.857 25.428 38 25.428h91.428c15.143 0 32.286-11.428 38-25.428l20-47.714h88.286c5.143 0 9.143-4 9.143-9.143z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/assets/fonts/icomoon.ttf b/assets/fonts/icomoon.ttf
new file mode 100644
index 0000000..ac72224
Binary files /dev/null and b/assets/fonts/icomoon.ttf differ
diff --git a/assets/fonts/icomoon.woff b/assets/fonts/icomoon.woff
new file mode 100644
index 0000000..7927c3b
Binary files /dev/null and b/assets/fonts/icomoon.woff differ
diff --git a/assets/fonts/selection.json b/assets/fonts/selection.json
new file mode 100644
index 0000000..f95355f
--- /dev/null
+++ b/assets/fonts/selection.json
@@ -0,0 +1 @@
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M658.286 475.429c0-141.143-114.857-256-256-256s-256 114.857-256 256 114.857 256 256 256 256-114.857 256-256zM950.857 950.857c0 40-33.143 73.143-73.143 73.143-19.429 0-38.286-8-51.429-21.714l-196-195.429c-66.857 46.286-146.857 70.857-228 70.857-222.286 0-402.286-180-402.286-402.286s180-402.286 402.286-402.286 402.286 180 402.286 402.286c0 81.143-24.571 161.143-70.857 228l196 196c13.143 13.143 21.143 32 21.143 51.429z"],"width":950.8571428571428,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["search"],"defaultCode":61442,"grid":14},"attrs":[],"properties":{"name":"view","id":6,"order":198,"prevSize":28,"code":61442},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M207.429 877.714l52-52-134.286-134.286-52 52v61.143h73.143v73.143h61.143zM506.286 347.429c0-7.429-5.143-12.571-12.571-12.571-3.429 0-6.857 1.143-9.714 4l-309.714 309.714c-2.857 2.857-4 6.286-4 9.714 0 7.429 5.143 12.571 12.571 12.571 3.429 0 6.857-1.143 9.714-4l309.714-309.714c2.857-2.857 4-6.286 4-9.714zM475.429 237.714l237.714 237.714-475.429 475.429h-237.714v-237.714zM865.714 292.571c0 19.429-8 38.286-21.143 51.429l-94.857 94.857-237.714-237.714 94.857-94.286c13.143-13.714 32-21.714 51.429-21.714s38.286 8 52 21.714l134.286 133.714c13.143 13.714 21.143 32.571 21.143 52z"],"width":865.7188571428571,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["pencil"],"defaultCode":61504,"grid":14},"attrs":[],"properties":{"name":"edit","id":64,"order":199,"prevSize":28,"code":61504},"setIdx":0,"setId":0,"iconIdx":64},{"icon":{"paths":["M790.857 529.714l-758.857 421.714c-17.714 9.714-32 1.143-32-18.857v-841.143c0-20 14.286-28.571 32-18.857l758.857 421.714c17.714 9.714 17.714 25.714 0 35.429z"],"width":808.5942857142857,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["play"],"defaultCode":61515,"grid":14},"attrs":[],"properties":{"name":"run","id":75,"order":197,"prevSize":28,"code":61515},"setIdx":0,"setId":0,"iconIdx":75},{"icon":{"paths":["M292.571 786.286v-402.286c0-10.286-8-18.286-18.286-18.286h-36.571c-10.286 0-18.286 8-18.286 18.286v402.286c0 10.286 8 18.286 18.286 18.286h36.571c10.286 0 18.286-8 18.286-18.286zM438.857 786.286v-402.286c0-10.286-8-18.286-18.286-18.286h-36.571c-10.286 0-18.286 8-18.286 18.286v402.286c0 10.286 8 18.286 18.286 18.286h36.571c10.286 0 18.286-8 18.286-18.286zM585.143 786.286v-402.286c0-10.286-8-18.286-18.286-18.286h-36.571c-10.286 0-18.286 8-18.286 18.286v402.286c0 10.286 8 18.286 18.286 18.286h36.571c10.286 0 18.286-8 18.286-18.286zM274.286 219.429h256l-27.429-66.857c-1.714-2.286-6.857-5.714-9.714-6.286h-181.143c-3.429 0.571-8 4-9.714 6.286zM804.571 237.714v36.571c0 10.286-8 18.286-18.286 18.286h-54.857v541.714c0 62.857-41.143 116.571-91.429 116.571h-475.429c-50.286 0-91.429-51.429-91.429-114.286v-544h-54.857c-10.286 0-18.286-8-18.286-18.286v-36.571c0-10.286 8-18.286 18.286-18.286h176.571l40-95.429c11.429-28 45.714-50.857 76-50.857h182.857c30.286 0 64.571 22.857 76 50.857l40 95.429h176.571c10.286 0 18.286 8 18.286 18.286z"],"width":804.5714285714286,"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["trash"],"defaultCode":61944,"grid":14},"attrs":[],"properties":{"name":"delete","id":459,"order":201,"prevSize":28,"code":61944},"setIdx":0,"setId":0,"iconIdx":459}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":false,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":512,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"cssVars":true,"cssVarsFormat":"scss","showSelector":true,"showMetrics":true,"showMetadata":false,"showVersion":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215},"historySize":50}}
\ No newline at end of file
diff --git a/assets/icons.scss b/assets/icons.scss
new file mode 100644
index 0000000..6d0889d
--- /dev/null
+++ b/assets/icons.scss
@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'icomoon';
+  src:
+    url('fonts/icomoon.ttf?ov6ddj') format('truetype'),
+    url('fonts/icomoon.woff?ov6ddj') format('woff'),
+    url('fonts/icomoon.svg?ov6ddj#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-view:before {
+  content: "\f002";
+}
+.icon-edit:before {
+  content: "\f040";
+}
+.icon-run:before {
+  content: "\f04b";
+}
+.icon-delete:before {
+  content: "\f1f8";
+}
diff --git a/assets/job/add.scss b/assets/job/add.scss
index 197d68f..dccb1c8 100644
--- a/assets/job/add.scss
+++ b/assets/job/add.scss
@@ -1,2 +1 @@
-@import "~bootstrap/dist/css/bootstrap.css";
-@import "~font-awesome";
+@import "../base";
diff --git a/assets/job/index.scss b/assets/job/index.scss
index 24842ea..16fe3fe 100644
--- a/assets/job/index.scss
+++ b/assets/job/index.scss
@@ -1,5 +1,5 @@
-@import "~bootstrap/dist/css/bootstrap.css";
-@import "~font-awesome";
+@import "../base";
+@import "../icons";
 
 tr.norun td {
   background-color: #f8d7da;
diff --git a/assets/job/view.scss b/assets/job/view.scss
index 3dc130c..d337ee4 100644
--- a/assets/job/view.scss
+++ b/assets/job/view.scss
@@ -1 +1 @@
-@import "~bootstrap/dist/css/bootstrap.css";
\ No newline at end of file
+@import "../base";
\ No newline at end of file
diff --git a/templates/job/edit.html.twig b/templates/job/edit.html.twig
index ef6b3ce..d268222 100644
--- a/templates/job/edit.html.twig
+++ b/templates/job/edit.html.twig
@@ -222,10 +222,10 @@
 
     <div class="vars mb-3">
         <div class="input-group var-group d-none">
-            <div class="input-group-text border-right-0">
+            <div class="input-group-text border-end-0">
                 <input type="checkbox" name="var-issecret[0]" class="var-issecret" placeholder="value" value="true">
             </div>
-            <span class="input-group-text border-left-0">Secret</span>
+            <span class="input-group-text border-start-0">Secret</span>
             <input type="text" name="var-id[0]" class="form-control var-id" placeholder="name">
             <input type="text" name="var-value[0]" class="form-control var-value" placeholder="value">
         </div>
diff --git a/templates/job/index.html.twig b/templates/job/index.html.twig
index f153219..d34e8c4 100644
--- a/templates/job/index.html.twig
+++ b/templates/job/index.html.twig
@@ -21,10 +21,10 @@
                     <td class="d-block d-md-table-cell align-middle">{{ job.interval | interval }}</td>
                     <td class="d-block d-md-table-cell align-middle">{{ job.nextrun |  date("d/m/Y H:i:s") }}</td>
                     <td class="text-md-end d-block d-md-table-cell align-middle">
-                        <a href="#" data-href="{{ path('job_runnow', {'id': job.id}) }}" class="runnow btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}{% if job.running == true %} disabled{% endif %}"><i class="fa fa-play" aria-hidden="true"></i></a>
-                        <a href="{{ path('job_view', {'id': job.id}) }}" class="btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}"><i class="fa fa-search" aria-hidden="true"></i></a>
-                        <a href="{{ path('job_edit', {'id': job.id}) }}" class="btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
-                        <a href="#" data-confirmation="Are you sure you want to delete this job?" data-href="{{ path('job_delete', {'id': job.id}) }}" class="delete-btn btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
+                        <a href="#" data-href="{{ path('job_runnow', {'id': job.id}) }}" class="runnow btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}{% if job.running == true %} disabled{% endif %}"><i class="icon icon-run" aria-hidden="true"></i></a>
+                        <a href="{{ path('job_view', {'id': job.id}) }}" class="btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}"><i class="icon icon-view" aria-hidden="true"></i></a>
+                        <a href="{{ path('job_edit', {'id': job.id}) }}" class="btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}"><i class="icon icon-edit" aria-hidden="true"></i></a>
+                        <a href="#" data-confirmation="Are you sure you want to delete this job?" data-href="{{ path('job_delete', {'id': job.id}) }}" class="delete-btn btn btn-outline-{% if job.running == true %}success{% elseif job.norun == true %}danger{% else %}primary{% endif %}"><i class="icon icon-delete" aria-hidden="true"></i></a>
                     </td>
                 </tr>
             {% endfor %}