diff --git a/app/views/contents/overview/index.php b/app/views/contents/overview/index.php
index 155d2a7d85905c2dd2e91f47943eadc1de0e5840..7f79113953115fafd537899a08d567772608b610 100644
--- a/app/views/contents/overview/index.php
+++ b/app/views/contents/overview/index.php
@@ -1,7 +1,7 @@
 <ul class="content-items">
     <? foreach ($tiles as $key => $navigation): ?>
         <? if ($navigation->isVisible() && $key !== 'overview'): ?>
-            <li class="content-item content-item-courseware">
+            <li class="content-item content-item-<?= htmlReady($key) ?>">
                 <a href="<?= URLHelper::getLink($navigation->getURL()) ?>" class="content-item-link">
                     <div class="content-item-img-wrapper">
                         <? if ($navigation->getImage()): ?>
diff --git a/resources/assets/stylesheets/scss/contents.scss b/resources/assets/stylesheets/scss/contents.scss
index 4e9d8f451da0399872a050eb2bbbe76f696d9ee4..b49d7a6b963c8ea997709481836b95858e1b8199 100644
--- a/resources/assets/stylesheets/scss/contents.scss
+++ b/resources/assets/stylesheets/scss/contents.scss
@@ -42,18 +42,20 @@
     padding: 0;
 
     .content-item {
-        background-color: $dark-gray-color-5;
-        border: solid thin $light-gray-color-40;
-        height: 130px;
-        padding-bottom: 10px;
-        padding-top: 10px;
+        align-items: stretch;
+        background-color: var(--dark-gray-color-5);
+        border: solid thin var(--light-gray-color-40);
+        display: flex;
+        height: 150px;
+        justify-content: stretch;
 
         .content-item-link {
             color: unset;
             display: grid;
+            flex: 1;
             grid-template-columns: 74px auto;
             grid-gap: 5px;
-            padding: 15px 10px 0 10px;
+            padding: 25px 10px 10px;
             transition: 0.5s;
 
             .content-item-img-wrapper {
@@ -62,7 +64,7 @@
 
             .content-item-text {
                 .content-item-title {
-                    color: $base-color;
+                    color: var(--base-color);
                     font-size: 1.3em;
                     width: 100%;
                     max-width: 160px;
@@ -75,13 +77,13 @@
         }
 
         &:hover {
-            background-color: $white;
+            background-color: var(--white);
             color: unset;
 
             .content-item-link {
                 .content-item-text {
                     .content-item-title {
-                        color: $red;
+                        color: var(--red);
                     }
                 }
             }
diff --git a/templates/start/contents.php b/templates/start/contents.php
index e561fe8a4f0bf67adaf596bea6125f14da8f4ac4..2e4490be3532c9277419895b268e527c94b9845f 100644
--- a/templates/start/contents.php
+++ b/templates/start/contents.php
@@ -5,7 +5,7 @@
     <ul class="content-items">
         <? foreach ($tiles as $key => $navigation): ?>
             <? if ($navigation->isVisible() && $key !== 'overview'): ?>
-                <li class="content-item content-item-courseware">
+                <li class="content-item content-item-<?= htmlReady($key) ?>">
                     <a href="<?= URLHelper::getLink($navigation->getURL()) ?>" class="content-item-link">
                         <div class="content-item-img-wrapper">
                             <? if ($navigation->getImage()): ?>