diff --git a/resources/scripts/assets/css/sidebar.css b/resources/scripts/assets/css/sidebar.css
index c195e01ce..d8a58dd88 100644
--- a/resources/scripts/assets/css/sidebar.css
+++ b/resources/scripts/assets/css/sidebar.css
@@ -46,16 +46,45 @@
 }
 
 /* Active/current link */
-.sidebar .router-link-active {
+.sidebar .active > .icon{
     background-color: var(--button-color-active);
     color: white;
 }
 
+.sidebar > a {
+    display: flex;
+    text-align: center;
+    align-items: center;
+}
+
+.icon {
+    border-radius: 30%;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    background-size: 100px;
+    line-height: 30px;
+    background-color: var(--button-color);
+    color: var(--button-color-text);
+    margin-right: 10px;
+}
+
+.sidebar > a > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 /* Links on mouse-over */
-.sidebar a:hover:not(.router-link-active) {
+.sidebar a:hover:not(.active) > .icon {
     background-color: var(--sidebar-button-color-hover);
 }
 
+.icon {
+    transition: all 0.2s ease-in-out;
+}
+
 /* Page content. The value of the margin-left property should match the value of the sidebar's width property */
 div.content {
     margin-left: var(--sidebar-size);