diff --git a/themes/grav-theme-howto/css/style.css b/themes/grav-theme-howto/css/style.css
index c833dbb4..582385a2 100644
--- a/themes/grav-theme-howto/css/style.css
+++ b/themes/grav-theme-howto/css/style.css
@@ -83,16 +83,33 @@ a:hover {
 
 #flex .columns {
   height: 600px;
+  /*border: none;
+  border-radius: 0px;
+  box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
+  width: 23%;
+  margin: 1%;*/
 }
 
 #flex .three {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-right: 60px;
+  margin-bottom: 50px;
 }
 
-/*#flex h2 {
-  text-align: center;
-}*/
+#flex hr {
+  border: 1px solid var(--primary-color);
+  border-radius: 5px;
+}
+
+#flex img {
+  width: 50px;
+  height: 50px;
+  position:relative;
+  top: 45px;
+  left: 25%;
+  filter: none;
+  background-color: none;
+  box-shadow: none;
+}
 
 .padding {
     padding: 3rem 1rem;
diff --git a/themes/grav-theme-howto/images/logos/logo-chat.png b/themes/grav-theme-howto/images/logos/logo-chat.png
new file mode 100644
index 00000000..cd26e4fc
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-chat.png differ
diff --git a/themes/grav-theme-howto/images/logos/logo-cloud.png b/themes/grav-theme-howto/images/logos/logo-cloud.png
new file mode 100644
index 00000000..70085f97
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-cloud.png differ
diff --git a/themes/grav-theme-howto/images/logos/logo-email.png b/themes/grav-theme-howto/images/logos/logo-email.png
new file mode 100644
index 00000000..988cf442
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-email.png differ
diff --git a/themes/grav-theme-howto/images/logos/logo-forum.png b/themes/grav-theme-howto/images/logos/logo-forum.png
new file mode 100644
index 00000000..d6b280c8
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-forum.png differ
diff --git a/themes/grav-theme-howto/images/logos/logo-office.png b/themes/grav-theme-howto/images/logos/logo-office.png
new file mode 100644
index 00000000..d53a30cf
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-office.png differ
diff --git a/themes/grav-theme-howto/images/logos/logo-project board.png b/themes/grav-theme-howto/images/logos/logo-project board.png
new file mode 100644
index 00000000..fe1c0447
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-project board.png differ
diff --git a/themes/grav-theme-howto/images/logos/logo-social network.png b/themes/grav-theme-howto/images/logos/logo-social network.png
new file mode 100644
index 00000000..98edbe78
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-social network.png differ
diff --git a/themes/grav-theme-howto/images/logos/logo-user.png b/themes/grav-theme-howto/images/logos/logo-user.png
new file mode 100644
index 00000000..8dc5ec88
Binary files /dev/null and b/themes/grav-theme-howto/images/logos/logo-user.png differ
diff --git a/themes/grav-theme-howto/templates/index.html.twig b/themes/grav-theme-howto/templates/index.html.twig
index e88bacef..79865cce 100644
--- a/themes/grav-theme-howto/templates/index.html.twig
+++ b/themes/grav-theme-howto/templates/index.html.twig
@@ -12,6 +12,8 @@
 <section id="{{ page.header.section_id }}" class="wrapper row columns">
 {% for p in page.collection %}
 <div class="topic-list three columns">
+  <img src="{{ theme_url }}/images/logos/logo-{{ p.title|lower }}.png">
+  <hr>
   <h2><a href="{{ p.url }}">{{ p.title }}</a></h2>
   {% for q in p.children.visible %}
       <h5><a href="{{ q.url }}">{{ q.title }}</a></h5>