diff --git a/css/home.css b/css/home.css
index dc958702..445ca8fb 100644
--- a/css/home.css
+++ b/css/home.css
@@ -505,6 +505,122 @@ ul.check > li.heart:before {
     font-size: 40px;
 }
 
+/***************************************
+ *********** services tiles ************
+ ***************************************/
+
+#services .service-tile {
+    width: 100%;
+    margin-bottom: 7px;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 25px;
+    color: #fff;
+}
+
+#services .service-tile:hover {
+    filter: brightness(115%);
+}
+
+@media (min-width: 768px) {
+    /* 2 tiles per row */
+    #services .service-tile {
+        margin-left: 7px;
+        width: calc((100% - 7px) / 2);
+    }
+    #services .service-tile:nth-child(2n - 1) {
+        margin-left: 0;
+    }
+    #services .service-tile:nth-child(5) {
+        margin-left: calc((100% - 7px) / 4);
+    }
+}
+
+@media (min-width: 992px) {
+    /* 3 tiles per row */
+    #services .service-tile {
+        width: calc((100% - 2 * 7px) / 3);
+    }
+    #services .service-tile:nth-child(2n - 1) {
+        margin-left: 7px;
+    }
+    #services .service-tile:nth-child(3n - 2) {
+        margin-left: 0;
+    }
+    /* center last row with only 2 items */
+    #services .service-tile:nth-child(4){
+        margin-left: calc((100% - 2 * 7px) / 6);
+    }
+}
+
+#services .service-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 150%;
+    line-height: 2;
+}
+
+#services .service-logo {
+    text-align: center;
+}
+
+#services .service-logo + .service-title {
+    display: none;
+}
+
+#services .service-description {
+    flex-grow: 1;
+    margin-bottom: 5px;
+}
+
+#services .service-description a {
+    color: white;
+    font-style: italic;
+}
+
+#services .service-link {
+    color: #fff;
+}
+
+#services .service-link:hover {
+    font-weight: bold;
+}
+
+#services .service-link::before {
+    content: '\f0aa';
+    font-family: FontAwesome;
+    transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    margin-right: 7px;
+    margin-left: 0;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+#services .service-link:hover::before {
+    font-weight: normal;
+}
+
+#service-youtube {
+    background-color: #CD322E;
+}
+
+#service-soundcloud {
+    background-color: #ff9100;
+}
+
+#service-peertube {
+    background-color: #ff6f00;
+}
+
+#service-bandcamp {
+    background-color: #17a0c4;
+}
+
+#service-mediacccde {
+    background-color: #9e9e9e;
+}
+
 /***************************************
  ************ download tile ************
  ***************************************/
@@ -516,34 +632,26 @@ ul.check > li.heart:before {
 
 .tile.tile-bordered > .row > [class^="col-"],
 .tile.tile-bordered > .row.is-flex > [class^="col-"] {
-    margin-bottom: 0;
-    background: #E2DEE0;
+    margin-bottom: 7px;
+    margin-left: 0;
+    margin-right: 0;
     padding: 10px;
-    border-top: 1px solid #BBB;
-    border-left: 1px solid #BBB;
-}
-
-.tile.tile-bordered > .row > [class^="col-"] {
-    border-right: 1px solid #BBB;
-}
-
-.tile.tile-bordered > .row:last-child > [class^="col-"] {
-    border-bottom: 1px solid #BBB;
+    background: #E2DEE0;
 }
 
 .tile.tile-bordered > .row > .col-md-8 {
     padding: 30px 30px 15px 30px;
 }
 
-@media (max-width: 767px) {
-    .tile.tile-bordered > .row > .col-sm-6:nth-child(2n+2) {
-        border-top-width: 0;
+@media (min-width: 768px) and (max-width: 991px) {
+    .tile.tile-bordered > .row > .col-sm-6:nth-child(1) {
+        margin-right: 4px;
+        width: calc(50% - 4px);
     }
-}
-
-@media (min-width: 768px) {
-    .tile.tile-bordered > .row > .col-sm-6:nth-child(2n+1) {
-        border-right-width: 0;
+    .tile.tile-bordered > .row > .col-sm-6:nth-child(2) {
+        margin-left: 3px;
+        margin-right: 0;
+        width: calc(50% - 3px);
     }
 }
 
@@ -620,23 +728,20 @@ ul.check > li.heart:before {
     width: 8px;
     height: 8px;
 }
+
 #download1 .carousel .carousel-indicators > li.active {
     width: 10px;
     height: 10px;
 }
+
 #download-newpipe-qr-code-container-col {
     display: none;
 }
+
 #download-newpipe-qr-code-container {
     width: 100%;
 }
 
-@media (max-width: 991px) {
-    #download1 .row.is-flex > [class^="col-"]:nth-child(n+3) {
-        border-top-width: 0;
-    }
-}
-
 @media (min-width: 768px) {
     /* align "read more" button with "download NewPipe Legacy" button */
     /* <bad code> */
@@ -671,25 +776,28 @@ ul.check > li.heart:before {
 
     /* Re-order grid on medium and larger devices */
     /* Just as a British Speaker used to call in a very honourable house:Oooooorder! */
-    #download1 .row.is-flex > [class^="col-"]:nth-child(1) {
+    #download1 > .row.is-flex > [class^="col-"]:nth-child(1) {
         order: 1;
-        border-bottom-width: 0;
+        width: calc(100% / 3 - 4px);
+        margin-right: 7px;
     }
-    #download1 .row.is-flex > [class^="col-"]:nth-child(2) {
+    #download1 > .row.is-flex > [class^="col-"]:nth-child(2) {
         order: 3;
-        border-right-width: 0;
+        margin-right: 7px;
+        width: calc(100% / 3 - 4px);
     }
-    #download1 .row.is-flex > [class^="col-"]:nth-child(3) {
+    #download1 > .row.is-flex > [class^="col-"]:nth-child(3) {
         order: 2;
-        border-right-width: 1px;
-        border-bottom: 0;
+        width: calc(100% / 3 * 2 - 3px);
     }
-    #download1 .row.is-flex > [class^="col-"]:nth-child(4) {
+    #download1 > .row.is-flex > [class^="col-"]:nth-child(4) {
         order: 4;
-        border-right-width: 0;
+        margin-right: 7px;
+        width: calc(100% / 3 - 5px);
     }
-    #download1 .row.is-flex > [class^="col-"]:nth-child(5) {
+    #download1 > .row.is-flex > [class^="col-"]:nth-child(5) {
         order: 5;
+        width: calc(100% / 3 - 5px);
     }
 }
 
diff --git a/index.html b/index.html
index 95282976..1c60c237 100644
--- a/index.html
+++ b/index.html
@@ -376,6 +376,65 @@ <h3>History</h3>
     <div class="tiles-container">
         <div class="container container-double">
             <div class="row is-flex">
+                
+                <div class="col-xs-12">
+                    <hr class="separator hidden visible-xs" />
+                </div>
+                
+                <div class="col-xs-12" id="services">
+                    <h3 class="title">Supported Services</h3>
+                    <div class="row is-flex">
+                        <div class="tile service-tile" id="service-youtube">
+                            <div class="service-title">YouTube</div>
+                            <div class="service-description">
+                                YouTube is one of the most popular video and live streaming platforms, including music, news, gaming and much more.
+                            </div>
+                            <a class="service-link" href="https://youtube.com">visit service website</a>
+                        </div>
+
+                        <div class="tile service-tile" id="service-peertube">
+                            <!--<div class="service-logo"><img src="/img/peertube-brand.png" alt="PeerTube" class="img-responsive"/></div>-->
+                            <div class="service-title">PeerTube</div>
+                            <div class="service-description">
+                                PeerTube is a decentralized video platform.<br>
+                                Any PeerTube instance can be added to NewPipe.
+                            </div>
+                            <a class="service-link" href="https://joinpeertube.org">visit service website</a>
+                        </div>
+
+                        <div class="tile service-tile" id="service-soundcloud">
+                            <div class="service-title">SoundCloud</div>
+                            <div class="service-description">
+                                SoundCloud is a streaming platform for music.
+                            </div>
+                            <a class="service-link" href="https://soundcloud.com">visit service website</a>
+                        </div>
+
+                        <div class="tile service-tile" id="service-bandcamp">
+                            <!--<div class="service-logo"></div>-->
+                            <div class="service-title">Bandcamp</div>
+                            <div class="service-description">
+                                Bandcamp is an artist-friendly platform for sharing music.<br>
+                                It offers user-friendly DRM-free downloads.
+                            </div>
+                            <a class="service-link" href="https://bandcamp.com">visit service website</a>
+                        </div>
+
+                        <div class="tile service-tile" id="service-mediacccde">
+                            <div class="service-title">media.ccc.de</div>
+                            <div class="service-description">
+                                media.ccc.de is the video archive and live streaming platform of the German hacker and information security activist group <a href="https://ccc.de">Chaos Computer Club</a>.
+                            </div>
+                            <a class="service-link" href="https://media.ccc.de/">visit service website</a>
+                        </div>
+
+                        <div class="clearfix"></div>
+
+                        <div class="col-xs-12 text-center" style="margin-top: 15px">
+                            <div class="button action" style="background-color: green">And more to come!</div>
+                        </div>
+                    </div>
+                </div>
 
                 <div class="col-xs-12">
                     <hr class="separator hidden-md" />