diff --git a/sass/defaults.scss b/sass/defaults.scss
new file mode 100644
index 0000000..4e38a60
--- /dev/null
+++ b/sass/defaults.scss
@@ -0,0 +1,70 @@
+* {
+	padding: 0;
+	margin: 0;
+	//font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
+	//	"Segoe UI", Helvetica, Arial, sans-serif;
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+a {
+	text-decoration: none;
+}
+
+a:hover, button:hover {
+	cursor: pointer;
+}
+
+a,
+a:visited {
+	color: rgb(0, 86, 179);
+}
+
+.base {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.main__content-container {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	justify-content: space-between;
+	flex: 2;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+li,
+ol,
+ul {
+	color: #333;
+}
+
+main {
+	width: 100%;
+}
+
+blockquote {
+	border-left: 0.3em solid rgba(55, 55, 55, 0.4);
+	margin-bottom: 16px;
+	//padding-left: 20px;
+	padding: 0 1em;
+	color: #707070;
+
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	li,
+	ol,
+	ul {
+		color: inherit;
+	}
+}
diff --git a/sass/home/main.scss b/sass/home/main.scss
index 6013205..0437340 100644
--- a/sass/home/main.scss
+++ b/sass/home/main.scss
@@ -1,3 +1,6 @@
+@import "./card-main";
+@import "./vision";
+
 $heading-letter-spacing: 20px;
 .index-banner__container {
 	width: 100%;
@@ -7,7 +10,7 @@ $heading-letter-spacing: 20px;
 	background-color: #3c3c3c;
 	background-color: #58181f;
 	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-	min-height: 300px;
+	min-height: 400px;
 }
 
 .index-banner {
@@ -22,13 +25,13 @@ $heading-letter-spacing: 20px;
 	color: #fff;
 	letter-spacing: $heading-letter-spacing;
 	font-size: 3rem;
-	font-weight: 400;
+	font-weight: 300;
 }
 
 .index-banner__tagline {
 	margin: auto;
 	color: #fff;
-	font-size: 1.4rem;
+	//	font-size: 1.4rem;
 }
 
 .index-banner__title-container {
@@ -39,3 +42,20 @@ $heading-letter-spacing: 20px;
 	margin: auto;
 	border-radius: 20px;
 }
+
+.index-banner__main-action-btn {
+	display: block;
+	display: block;
+	font-weight: 400;
+	margin: 20px auto;
+	padding: 15px;
+	border: none;
+}
+
+.index-banner__main-action-link{
+	color: black !important;
+}
+
+.index-banner__main-action-btn:hover {
+	background-color: lightgray;
+}
diff --git a/sass/home/mobile.scss b/sass/home/mobile.scss
index 9351430..7235205 100644
--- a/sass/home/mobile.scss
+++ b/sass/home/mobile.scss
@@ -1,3 +1,5 @@
+@import "./card-mobile";
+
 .home__container {
 	max-height: 100vh;
 	height: 100vh;
@@ -6,3 +8,13 @@
 .home__name {
 	font-size: 2rem;
 }
+
+.index-banner {
+	margin: auto;
+}
+
+
+.index-banner__title {
+	font-size: 2.5rem;
+	margin: auto;
+}
diff --git a/sass/main.scss b/sass/main.scss
index d900c82..0132e51 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,3 +1,4 @@
+@import "./defaults";
 @import "./home/main";
 @import "./nav/main";
 @import "./footer/main";
@@ -5,73 +6,6 @@
 @import "./blog/main";
 @import "./tag/main";
 
-* {
-	padding: 0;
-	margin: 0;
-	//font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
-	//	"Segoe UI", Helvetica, Arial, sans-serif;
-	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-}
-
-a {
-	text-decoration: none;
-}
-
-a,
-a:visited {
-	color: rgb(0, 86, 179);
-}
-
-.base {
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-}
-
-.main__content-container {
-	display: flex;
-	flex-direction: column;
-	min-height: 100%;
-	justify-content: space-between;
-	flex: 2;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-li,
-ol,
-ul {
-	color: #333;
-}
-
-main {
-	width: 100%;
-}
-
-blockquote {
-	border-left: 0.3em solid rgba(55, 55, 55, 0.4);
-	margin-bottom: 16px;
-	//padding-left: 20px;
-	padding: 0 1em;
-	color: #707070;
-
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	li,
-	ol,
-	ul {
-		color: inherit;
-	}
-}
-
 .zola-anchor {
 	margin-left: 5px;
 }
diff --git a/templates/home/components/_banner.html b/templates/home/components/_banner.html
new file mode 100644
index 0000000..772178d
--- /dev/null
+++ b/templates/home/components/_banner.html
@@ -0,0 +1,14 @@
+<div class="index-banner__container">
+  <div class="index-banner">
+    <img
+      class="index-banner__logo"
+      src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
+      alt="Hostea temporary logo"
+    />
+    <h1 class="index-banner__title">HOSTEA</h1>
+    <p class="index-banner__tagline">Gitea's Paradise</p>
+    <button class="index-banner__main-action-btn">
+      <a href="/service-wip" class="index-banner__main-action-link">Get Started</a>
+    </button>
+  </div>
+</div>
diff --git a/templates/index.html b/templates/index.html
index bce7e24..edff6d3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,32 +1,22 @@
-{% import "macros.html" as macros %} {% extends "base.html" %} {% block meta %}
-{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD and static pages with upgrades, backups and 24/7 monitoring" %} 
-{% set title = "Home" %} 
-{{ macros::get_meta_tags(title=title, description=description) }}
-{% endblock meta %} {% block content %}
+{% import "macros.html" as macros %} 
+{% import "home/components/home-card.html" as card_macro %}
 
+{% extends "base.html" %} {% block meta %}
+{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD
+and static pages with upgrades, backups and 24/7 monitoring" %} {% set title =
+"Home" %} {{ macros::get_meta_tags(title=title, description=description) }} {%
+endblock meta %} {% block content %}
 
+{% include "home/components/_banner.html" %}
 <div class="index__container">
-  <div class="index-banner__container">
-    <div class="index-banner">
-      <img
-        class="index-banner__logo"
-        src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
-        alt="Hostea temporary logo"
-      />
-      <h1 class="index-banner__title">HOSTEA</h1>
-      <p class="index-banner__tagline">Gitea's Paradise</p>
-    </div>
-  </div>
   <div class="index__group-content">
     <div class="page__container">
       <div class="page__group-content">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit corporis
-        nihil laboriosam sequi aliquam unde id, aut numquam aperiam ipsam, iusto et
-        quas voluptatum voluptas. Quis nemo consequatur vel totam!
+        {% include "home/components/_vision.html" %}
+        {% include "home/components/_features.html" %}
       </div>
     </div>
   </div>
-
 </div>
 
 {% endblock content %}