diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index d8152b0..59e12c4 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -97,10 +97,22 @@
   box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
   border-radius: 10px;
   border: none;
+  flex-grow: 1;
+  min-height: 100%;
+  margin-top: 10vh;
+  @include media-breakpoint-up(md) {
+    max-width: 20rem;
+  }
+}
+
+.sp-service-container {
+  margin-top: 10vh;
 }
 
 .sp-services-row {
-  margin-top: 6rem;
+  gap: 2rem;
+  min-height: 100%;
+  flex-wrap: wrap;
 }
 
 .sp-supported-by-img {
diff --git a/content/en/_index.html b/content/en/_index.html
index e377ad5..db5b19f 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -65,77 +65,48 @@ linkTitle = "SelfPrivacy"
 </div>
 {{< /blocks/section >}}
 
-<section class="container">
+<section class="px-5">
 	<div class="w-100">
 		<h2 class="mx-auto text-center font-weight-bolder">Your personal services</h2>
 	</div>
 
-	<div class="w-100 mt-5 mb-3">
-		<h3 class="mx-auto text-center">For serious business</h3>
-	</div>
-
-	<div class="row justify-content-md-center">
-		<div class="col-md-4 col-xs-12 sp-services-row">
+	<div class="sp-service-container">
+		<div class="w-100 mb-3">
+			<h3 class="mx-auto text-center">For serious business</h3>
+		</div>
+		<div class="d-flex flex-row justify-content-md-center sp-services-row">
 			{{< landing-service "/images/services/email.svg" "E-mail" >}}
 				<p class="card-text">Unlimited mailboxes amount for a company or family.</p>
 			{{< /landing-service >}}
-		</div>
-
-		<div class="col-md-4 col-xs-12 sp-services-row">
 			{{< landing-service "/images/services/nextcloud.svg" "Cloud storage" >}}
 				<p class="card-text">Nextcloud is a private and functional replacement for Dropbox and G-drive.</p>
 			{{< /landing-service >}}
-		</div>
-
-		<div class="col-md-4 col-xs-12 sp-services-row">
 			{{< landing-service "/images/services/gitea.svg" "Git repository" >}}
 				<p class="card-text">Gitea is an excellent analogue of Github, which belongs to you, not Microsoft.</p>
 			{{< /landing-service >}}
-		</div>
-	</div>
-
-	<div class="w-100 mt-5 mb-3">
-		<h3 class="mx-auto text-center">For entertainment and communication</h3>
-	</div>
-
-	<div class="row justify-content-md-center">
-		<div class="col-md-4 col-xs-12 sp-services-row">
-			{{< landing-service "/images/services/deltachat.svg" "Messenger" >}}
-				<p class="card-text">The most private messenger is the one with the server part located on your personal server. That's what makes DeltaChat more private than Telegram and Signal.</p>
-			{{< /landing-service >}}
-		</div>
-
-		<div class="col-md-4 col-xs-12 sp-services-row">
-			{{< landing-service "/images/services/pleroma.svg" "Decentralized social network" >}}
-				<p class="card-text">Pleroma is a social network where you decide who to block and what to publish. No more advertising and surveillance.</p>
-			{{< /landing-service >}}
-		</div>
-
-		<div class="col-md-4 col-xs-12 sp-services-row">
-			{{< landing-service "/images/services/jitsi.svg" "Videomeet" >}}
-				<p class="card-text">Zoom and Google-meet are no longer needed when there is a Jitsi-meet. Very simple and convenient video conferencing solution. </p>
-			{{< /landing-service >}}
-		</div>
-	</div>
-
-	<div class="w-100 mt-5 mb-3">
-		<h3 class="mx-auto text-center">For a good life</h3>
-	</div>
-
-	<div class="row justify-content-md-center">
-		<div class="col-md-4 col-xs-12 sp-services-row">
-			{{< landing-service "/images/services/openconnect.svg" "VPN for all of your friends and relatives devices" >}}
-				<p class="card-text">No public VPN can be private, just those one which is on your server. OpenConnect — connect an unlimited number of devices.</p>
-			{{< /landing-service >}}
-		</div>
-
-		<div class="col-md-4 col-xs-12 sp-services-row">
 			{{< landing-service "/images/services/bitwarden.svg" "Password Manager" >}}
 				<p class="card-text">Passwords no longer need to be remembered, copied between devices, invented or entered manually.</p>
 				<p class="card-text">Bitwarden is a trusted password manager for all devices.</p>
 			{{< /landing-service >}}
 		</div>
 	</div>
+
+	<div class="sp-service-container">
+		<div class="w-100 mb-3">
+			<h3 class="mx-auto text-center">For entertainment and communication</h3>
+		</div>
+		<div class="d-flex flex-row justify-content-md-center sp-services-row">
+			{{< landing-service "/images/services/deltachat.svg" "Messenger" >}}
+				<p class="card-text">The most private messenger is the one with the server part located on your personal server. That's what makes DeltaChat more private than Telegram and Signal.</p>
+			{{< /landing-service >}}
+			{{< landing-service "/images/services/pleroma.svg" "Decentralized social network" >}}
+				<p class="card-text">Pleroma is a social network where you decide who to block and what to publish. No more advertising and surveillance.</p>
+			{{< /landing-service >}}
+			{{< landing-service "/images/services/jitsi.svg" "Videomeet" >}}
+				<p class="card-text">Zoom and Google-meet are no longer needed when there is a Jitsi-meet. Very simple and convenient video conferencing solution. </p>
+			{{< /landing-service >}}
+	</div>
+	</div>
 </section>
 
 <section class="container-fluid d-flex flex-column sp-advantages">
diff --git a/layouts/shortcodes/landing-service.html b/layouts/shortcodes/landing-service.html
index baee7fa..e288c91 100644
--- a/layouts/shortcodes/landing-service.html
+++ b/layouts/shortcodes/landing-service.html
@@ -1,6 +1,6 @@
 {{ $illustration := .Get 0 }}
 {{ $title := .Get 1 }}
-<div class="card sp-service-card h-100">
+<div class="card sp-service-card">
     <object class="d-flex justify-content-center align-items-center card-img-top sp-service-icon" type="image/svg+xml" data="{{ $illustration }}">
         <div class="error">
             <i class="fa-solid fa-triangle-exclamation"></i>