diff --git a/Resources/landing-page/assets/img/dracula-small.jpg b/Resources/landing-page/assets/img/dracula-small.jpg
new file mode 100644
index 00000000..7f2e9048
Binary files /dev/null and b/Resources/landing-page/assets/img/dracula-small.jpg differ
diff --git a/Resources/landing-page/assets/img/dracula.png b/Resources/landing-page/assets/img/dracula.png
new file mode 100644
index 00000000..fbffef93
Binary files /dev/null and b/Resources/landing-page/assets/img/dracula.png differ
diff --git a/Resources/landing-page/css/custom.css b/Resources/landing-page/css/custom.css
index 6c34e5cc..75d38bc9 100644
--- a/Resources/landing-page/css/custom.css
+++ b/Resources/landing-page/css/custom.css
@@ -221,7 +221,8 @@ header.masthead {
     font-family: var(--font-family-sans-serif);
 }
 
-#services {
+#services,
+#themes {
     background: rgba(87, 109, 117, 1.0);
     color: white;
     padding: 0rem 0 8rem 0;
@@ -276,12 +277,7 @@ p {
 } */
 
 /* EXAMPLE IMAGES*/
-#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.aquamarine-hover,
-#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.hotline-hover,
-#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.space-gray-hover,
-#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.organizr-dark-hover,
-#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.dark-hover,
-#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.plex-hover {
+#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption[class*="-hover"] {
     opacity: .9;
     border-radius: 5px;
 }
@@ -308,4 +304,8 @@ p {
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover {
     background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
+}
+
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dracula-hover {
+    background: #282a36;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 0b77fab0..e1e43d95 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="Resources/landing-page/css/styles.css?v=1" rel="stylesheet" />
     <link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
-    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.2">
+    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.3">
 </head>
 
 <body id="page-top">
@@ -62,7 +62,7 @@
                     <hr class="divider my-4" />
                 </div>
                 <div class="col-lg-8 align-self-baseline">
-                    <p class="text-white-75 font-weight-light mb-5">A collection of themes/skins for 50 selfhosted
+                    <p class="text-white-75 font-weight-light mb-5">A collection of themes/skins for over 40 selfhosted
                         apps!
                     </p>
                     <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
@@ -75,9 +75,9 @@
         <div class="container">
             <div class="row justify-content-center">
                 <div class="col-lg-8 text-center">
-                    <h2 class="text-white mt-0">50 themed apps</h2>
+                    <h2 class="text-white mt-0">Over 40 themed applications!</h2>
                     <hr class="divider light my-4" />
-                    <p class="text-white-50 mb-1">theme.park contains 50 themed applications, with css <a
+                    <p class="text-white-50 mb-1">theme.park contains 44 themed applications, with css <a
                             href="https://docs.theme-park.dev/themes/addons/sonarr/">addons</a> on certain themes. </p>
                     <p class="text-white-50 mb-1">Installation methods include custom <a
                             href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a>
@@ -85,6 +85,9 @@
                     <p class="text-white-50 mb-5">custom scripts for select <a href="https://hotio.dev/">Hotio</a>
                         containers
                         and multiple examples of subfiltering using webservers like Nginx and Apache</p>
+                    <p class="text-white-50 mb-5">Choose between <a class="js-scroll-trigger" href="#themes">7 different
+                            styles!</a> With the possibility to easily create your own themes using the defined <a
+                            href="https://docs.theme-park.dev/custom/">variables</a>. </p>
                     <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a>
                 </div>
 
@@ -113,7 +116,8 @@
                     <p>Readarr</p>
                 </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/prowlarr">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/prowlarr/logo.png" />
+                    <p><img class="app-container-image"
+                            src="https://docs.theme-park.dev/site_assets/prowlarr/logo.png" />
                     </p>
                     <p>Prowlarr</p>
                 </a>
@@ -127,6 +131,12 @@
                     </p>
                     <p>Plex</p>
                 </a>
+                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/synclounge">
+                    <p><img class="app-container-image"
+                            src="https://docs.theme-park.dev/site_assets/synclounge/logo.png" />
+                    </p>
+                    <p>Synclounge</p>
+                </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/calibreweb">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" /></p>
@@ -138,8 +148,8 @@
                     <p>Jellyfin</p>
                 </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/emby">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/emby/logo.png" /></p>
+                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/emby/logo.png" />
+                    </p>
                     <p>Emby</p>
                 </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/tautulli">
@@ -163,8 +173,8 @@
                     <p>Organizr</p>
                 </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/deluge">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/deluge/logo.png" /></p>
+                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/deluge/logo.png" />
+                    </p>
                     <p>deluge</p>
                 </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/qbittorrent">
@@ -193,26 +203,28 @@
                     <p>NZBGet</p>
                 </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/nzbhydra2">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/nzbhydra2/logo.png" />
+                    <p><img class="app-container-image"
+                            src="https://docs.theme-park.dev/site_assets/nzbhydra2/logo.png" />
                     </p>
                     <p>NZBHydra 2</p>
                 </a>
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/jackett">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/jackett/logo.png" />
+                    <p><img class="app-container-image"
+                            src="https://docs.theme-park.dev/site_assets/jackett/logo.png" />
                     </p>
-                    <p>jackett</p>
+                    <p>Jackett</p>
                 </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/grafana">
+                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/grafana">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/grafana/logo.png" /></p>
                     <p>Grafana</p>
-                </a>
+                </a> -->
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/netdata">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/netdata/logo.png" /></p>
                     <p>Netdata</p>
                 </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/monitorr">
+                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/monitorr">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" /></p>
                     <p>Monitorr</p>
@@ -221,7 +233,7 @@
                     <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/logarr/logo.png" />
                     </p>
                     <p>Logarr</p>
-                </a>
+                </a> -->
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/portainer">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/portainer/logo.png" /></p>
@@ -242,21 +254,21 @@
                             src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" /></p>
                     <p>Filebrowser</p>
                 </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plpp">
+                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plpp">
                     <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/plpp/logo.png" />
                     </p>
                     <p>PLPP</p>
-                </a>
+                </a> -->
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/librespeed">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" /></p>
                     <p>Librespeed</p>
                 </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/thelounge">
+                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/thelounge">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" /></p>
                     <p>The Lounge</p>
-                </a>
+                </a> -->
                 <a class="col app-container text-center p-2 m-1"
                     href="https://docs.theme-park.dev/themes/lazylibrarian">
                     <p><img class="app-container-image"
@@ -288,11 +300,11 @@
                     </p>
                     <p>Kitana</p>
                 </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/webtools">
+                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/webtools">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/webtools/logo.png" /></p>
                     <p>Webtools</p>
-                </a>
+                </a> -->
                 <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/resilio-sync">
                     <p><img class="app-container-image"
                             src="https://docs.theme-park.dev/site_assets/resilio-sync/logo.png" /></p>
@@ -330,7 +342,8 @@
                 </a>
                 <a class="col align-self-center app-container text-center p-2 m-1"
                     href="https://docs.theme-park.dev/themes/vuetorrent">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" />
+                    <p><img class="app-container-image"
+                            src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" />
                     </p>
                     <p>VueTorrent</p>
                 </a>
@@ -342,7 +355,8 @@
                 </a>
                 <a class="col align-self-center app-container text-center p-2 m-1"
                     href="https://docs.theme-park.dev/themes/xbackbone">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" />
+                    <p><img class="app-container-image"
+                            src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" />
                     </p>
                     <p>Xbackbone</p>
                 </a>
@@ -368,7 +382,8 @@
                     <div class="mt-5">
                         <i class="fab fa-4x fa-github text-primary mb-4"></i>
                         <h3 class="h4 mb-2">Find us on Github</h3>
-                        <p class="text-white-50 mb-0">Having issues with a theme? Let us know on <a href="https://github.com/gilbn/theme.park">Github!</a></p>
+                        <p class="text-white-50 mb-0">Having issues with a theme? Let us know on <a
+                                href="https://github.com/gilbn/theme.park">Github!</a></p>
                     </div>
                 </div>
                 <div class="col-lg-3 col-md-6 text-center">
@@ -389,67 +404,83 @@
             </div>
         </div>
     </section>
-<!-- Portfolio-->
-<div id="portfolio" class="theme-overview">
-    <div class="container-fluid p-0">
-        <div class="row no-gutters">
-            <div class="col-lg-4 col-sm-6 p-1">
-                <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
-                    <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
-                    <div class="portfolio-box-caption aquamarine-hover">
-                        <div class="project-category text-white-50">Theme</div>
-                        <div class="project-name">Aquamarine</div>
-                    </div>
-                </a>
-            </div>
-            <div class="col-lg-4 col-sm-6 p-1">
-                <a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
-                    <img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." />
-                    <div class="portfolio-box-caption hotline-hover">
-                        <div class="project-category text-white-50">Theme</div>
-                        <div class="project-name">Hotline</div>
-                    </div>
-                </a>
-            </div>
-            <div class="col-lg-4 col-sm-6 p-1">
-                <a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
-                    <img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." />
-                    <div class="portfolio-box-caption space-gray-hover">
-                        <div class="project-category text-white-50">Theme</div>
-                        <div class="project-name">Space Gray</div>
-                    </div>
-                </a>
-            </div>
-            <div class="col-lg-4 col-sm-6 p-1">
-                <a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
-                    <img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg" alt="..." />
-                    <div class="portfolio-box-caption organizr-dark-hover">
-                        <div class="project-category text-white-50">Theme</div>
-                        <div class="project-name">Organizr Dark</div>
-                    </div>
-                </a>
-            </div>
-            <div class="col-lg-4 col-sm-6 p-1">
-                <a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
-                    <img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." />
-                    <div class="portfolio-box-caption dark-hover">
-                        <div class="project-category text-white-50">Theme</div>
-                        <div class="project-name">Dark</div>
-                    </div>
-                </a>
-            </div>
-            <div class="col-lg-4 col-sm-6 p-1">
-                <a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
-                    <img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." />
-                    <div class="portfolio-box-caption p-3 plex-hover">
-                        <div class="project-category text-white-50">Theme</div>
-                        <div class="project-name">Plex</div>
-                    </div>
-                </a>
+    <!-- Portfolio-->
+    <section class="page-section pb-1" id="themes">
+        <div class="container">
+            <h2 class="text-center mt-0">Available theme options</h2>
+            <hr class="divider my-4" />
+        </div>
+    </section>
+    <div id="portfolio" class="theme-overview">
+        <div class="container-fluid p-0">
+            <div class="row no-gutters d-flex justify-content-center">
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/dracula.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/dracula-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption p-3 dracula-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Dracula</div>
+                        </div>
+                    </a>
+                </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption aquamarine-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Aquamarine</div>
+                        </div>
+                    </a>
+                </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption hotline-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Hotline</div>
+                        </div>
+                    </a>
+                </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption space-gray-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Space Gray</div>
+                        </div>
+                    </a>
+                </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg"
+                            alt="..." />
+                        <div class="portfolio-box-caption organizr-dark-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Organizr Dark</div>
+                        </div>
+                    </a>
+                </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption dark-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Dark</div>
+                        </div>
+                    </a>
+                </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption p-3 plex-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Plex</div>
+                        </div>
+                    </a>
+                </div>
             </div>
         </div>
     </div>
-</div>
     <!-- Footer-->
     <footer class=" py-5">
         <div class="container">
@@ -480,4 +511,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
