diff --git a/config.toml b/config.toml
index 51bcae9..7624666 100644
--- a/config.toml
+++ b/config.toml
@@ -33,6 +33,8 @@ juice_logo_path = "flat_blocks.svg"
 
 slogan = "Let's Build Something Together!"
 
+intro = "Need help with Product development or IT? <br> You have come to right place"
+
 email = "hello.vumwi@aleeas.com"
 # juice_extra_menu = [
 #     { title = "Github", link = "https://github.com/glennwso"}
diff --git a/content/_index.md b/content/_index.md
index 659583e..a751cb5 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,8 +1,6 @@
 +++
 sort_by = "weight"
 title = "Our Services"
-[extra]
-intro = "Need help with Product development or IT? <br> You have come to right place"
 +++
 
 We help our clients with devloping their products and software. We also provide IT services for common office work needs and webhosting.
diff --git a/content/software.md b/content/software.md
index d6feb68..abf9976 100644
--- a/content/software.md
+++ b/content/software.md
@@ -4,11 +4,11 @@ description = "Software Development Consulting"
 weight = 1
 +++
 
-## Native Apps
+# Native Apps
 
 I make apps for my clients on the fallowing plattforms:
 
-### platforms
+## platforms
 - Andriod
 - Linux
 - macOS
diff --git a/sass/cards.scss b/sass/cards.scss
index 9204c35..f79a410 100644
--- a/sass/cards.scss
+++ b/sass/cards.scss
@@ -7,7 +7,7 @@
 .card-container {
   display: block;
   width: 92vw;
-  margin-top: 2em;
+  /* margin-top: 2em; */
 }
 
 main {
@@ -18,7 +18,7 @@ main {
   /* display: flex; */
   flex-direction: column;
   padding: 0px;
-  padding-left: 20px;
+  padding-left: 4%;
 }
 
 .card {
diff --git a/sass/style.scss b/sass/style.scss
index c375313..bcd2271 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,5 +1,11 @@
 main {
-  padding: 50px 4%;
+  /* padding: 50px 4%; */
+  padding: 0;
+}
+
+.content {
+  padding: 4%;
+  padding-bottom: 0;
 }
 
 div.nav-outlinks {
@@ -25,6 +31,10 @@ footer div.nav-outlinks a {
   text-decoration: none;
 }
 
+footer {
+  margin-top: 2em;
+}
+
 .inline-icon-container svg {
   vertical-align: middle;
   fill: #fff;
diff --git a/templates/_macros.html b/templates/_macros.html
index 65cc3bd..1287fc0 100644
--- a/templates/_macros.html
+++ b/templates/_macros.html
@@ -10,25 +10,25 @@
 <nav>
   {% if config.extra.juice_extra_menu %}
   {% for menu in config.extra.juice_extra_menu %}
-  <a class="nav-item subtitle-text" href="{{ menu.link | safe }}">{{ menu.title }}</a>
+  <a class="nav-item subtitle-text" href="{{ menu.link | safe }}#top">{{ menu.title }}</a>
   {% endfor %}
   {% endif %}
 
 
   {% for page in root.pages %}
   {% if lang == "en" %}
-  <a class="nav-item subtitle-text" href="{{ page.permalink | safe }}">{{ page.title }}</a>
+  <a class="nav-item subtitle-text" href="{{ page.permalink | safe }}#top">{{ page.title }}</a>
   {% else %}
-  <a class="nav-item subtitle-text" href="/{{lang}}{{ page.path }}">{{ page.title }}</a>
+  <a class="nav-item subtitle-text" href="/{{lang}}{{ page.path }}#top">{{ page.title }}</a>
   {% endif %}
   {% endfor %}
 
   {% for path in root.subsections %}
   {% set child = get_section(path=path) %}
   {% if lang == "en"%}
-  <a class="nav-item subtitle-text" href="{{ child.permalink | safe }}">{{ child.title }}</a>
+  <a class="nav-item subtitle-text" href="{{ child.permalink | safe }}#top">{{ child.title }}</a>
   {% else %}
-  <a class="nav-item subtitle-text" href="/{{lang}}{{ child.path }}">{{ child.title }}</a>
+  <a class="nav-item subtitle-text" href="/{{lang}}{{ child.path }}#top">{{ child.title }}</a>
   {% endif %}
   {% endfor %}
 
@@ -85,4 +85,47 @@
     {% endfor %}
   </div>
 </div>
-{% endmacro render_toc %}
\ No newline at end of file
+{% endmacro render_toc %}
+
+
+{% macro hero(slogan, intro)%}
+<div class="hero">
+
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+  <section class="text-center">
+    <h1 class="heading-text" style="font-size: 50px">
+      {{ slogan }}
+    </h1>
+    <h3 class="title-text">
+      {{ intro | safe }}
+    </h3>
+    <div>
+      <!-- <a class="github-button" href="https://github.com/huhu/juice" data-size="large" data-show-count="true" -->
+      <!-- aria-label="Star huhu/juice on GitHub">Star</a> -->
+      <!-- <a class="github-button" href="https://github.com/huhu/juice/fork" data-size="large" data-show-count="true" -->
+      <!-- aria-label="Fork huhu/juice on GitHub">Repos</a> -->
+    </div>
+  </section>
+  <img class="hero-image" style="width: 50%" src="{{ get_url(path='build-blocks.svg') }}">
+
+  <div class="explore-more text" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
+    Explore More ⇩
+  </div>
+  <style>
+    .hero section {
+      padding: 0 5rem;
+    }
+
+    @media screen and (max-width: 768px) {
+      .hero section {
+        padding: 0 2rem;
+      }
+
+      .hero-image {
+        display: none
+      }
+    }
+  </style>
+
+</div>
+{% endmacro hero %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 8cf5c4f..96d0c17 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,113 +1,82 @@
-{% extends "juice/templates/index.html" %}
+{% import "_macros.html" as macros %}
+<!DOCTYPE html>
+<html lang="{{ lang }}">
 
-{% block head %}
+<head>
+  <meta charset="UTF-8">
+  <title>{% block title %}{{ config.title }}{% endblock title %}</title>
+  <!-- <title>Software, Product Developement and IT consulting</title> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  {% block favicon %}
+  <link rel="icon" href="/flat_blocks.svg" sizes="any" type="image/svg+xml">
+  {% endblock favicon %}
 
-<link rel="icon" href="/flat_blocks.svg" sizes="any" type="image/svg+xml">
+  {% include "_variables.html" %}
 
-<!-- <link rel="stylesheet" href="{{ get_url(path='carbon.css') }}"> -->
-<link rel="stylesheet" href="{{ get_url(path='form.css') }}">
-<link rel="stylesheet" href="{{ get_url(path='style.css') }}">
-<link rel="stylesheet" href="{{ get_url(path='darkmode_toggle.css') }}">
+  {% block fonts %}
+  <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
+  {% endblock fonts %}
 
-<link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
-<link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
+  <link rel="stylesheet" href="/normalize.css">
+  <link rel="stylesheet" href="{{ get_url(path='juice.css') }}">
+  <link rel="stylesheet" href="{{ get_url(path='form.css') }}">
+  <link rel="stylesheet" href="{{ get_url(path='style.css') }}">
+  <link rel="stylesheet" href="{{ get_url(path='darkmode_toggle.css') }}">
+  <link rel="stylesheet" type="text/css" href="{{ get_url(path='cards.css') }}" />
+  <link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
+  <link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"
+    integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"
+    integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg"
+    crossorigin="anonymous"></script>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"
-  integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
+  <!-- To automatically render math in text elements, include the auto-render extension: -->
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"
+    integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
+    onload="renderMathInElement(document.body);"></script>
 
-<!-- The loading of KaTeX is deferred to speed up page rendering -->
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"
-  integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/htmx.org@2.0.3"
+    integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq"
+    crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/hyperscript.org@0.9.13"></script>
 
-<!-- To automatically render math in text elements, include the auto-render extension: -->
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"
-  integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
-  onload="renderMathInElement(document.body);"></script>
-
-<script src="https://unpkg.com/htmx.org@2.0.3"
-  integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
-
-<title>Software, Product Developement and IT consulting</title>
-<meta charset="UTF-8">
-
-<script src="https://unpkg.com/hyperscript.org@0.9.13"></script>
-
-<link rel="stylesheet" type="text/css" href="{{ get_url(path='cards.css') }}" />
-
-{% endblock head %}
+  {% block head %}
+  {% endblock head %}
 
+</head>
 
 {% block body_tag%}
 
-<body hx-boost="true">
+<body hx-boost="true" hx-target="next <main/>" hx-select="#main" hx-swap="outerHTML" id="top">
   {% endblock body_tag %}
 
 
   {% block header %}
-
   <header class="pos-absolute" style="background-color: transparent">
     {{ macros::render_header(path="/") }}
   </header>
-  <div class="hero">
-
-    {% block hero %}
-
-    <script async defer src="https://buttons.github.io/buttons.js"></script>
-    <section class="text-center">
-      <h1 class="heading-text" style="font-size: 50px">
-        {{ config.extra.slogan }}
-      </h1>
-      <h3 class="title-text">
-        {{ section.extra.intro | safe }}
-      </h3>
-      <div>
-        <!-- <a class="github-button" href="https://github.com/huhu/juice" data-size="large" data-show-count="true" -->
-        <!-- aria-label="Star huhu/juice on GitHub">Star</a> -->
-        <!-- <a class="github-button" href="https://github.com/huhu/juice/fork" data-size="large" data-show-count="true" -->
-        <!-- aria-label="Fork huhu/juice on GitHub">Repos</a> -->
-      </div>
-    </section>
-    <img class="hero-image" style="width: 50%" src="{{ get_url(path='build-blocks.svg') }}">
-
-    <div class="explore-more text" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
-      Explore More ⇩
-    </div>
-    <style>
-      .hero section {
-        padding: 0 5rem;
-      }
-
-      @media screen and (max-width: 768px) {
-        .hero section {
-          padding: 0 2rem;
-        }
-
-        .hero-image {
-          display: none
-        }
-      }
-    </style>
-
-    {% endblock hero %}
-
-
-  </div>
-
   {% endblock header %}
 
+  <main id="main">
+    {% block hero %}
+    {{ macros::hero(slogan=config.extra.slogan, intro=config.extra.intro)}}
+    {% endblock hero %}
 
+    {% block toc %}
+    {% endblock toc %}
 
-  {% block toc %}
-  {% endblock toc %}
+    {% block content %}
+    <div class="content text">
+      <div id="features" class="heading-text">{{section.title}}</div>
+      {{ section.content | safe }}
+    </div>
+    {% endblock content %}
 
-
-
-
-  {% block sidebar %}
-  <!-- <div> -->
-  <!-- Your cool sidebar -->
-  <!-- </div> -->
-  {% endblock sidebar %}
+    {% block sidebar %}
+    {% endblock sidebar %}
+  </main>
 
 
   {% block footer %}
diff --git a/templates/page.html b/templates/page.html
index 71d9966..dbad8ec 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -3,6 +3,8 @@
 
 {% block title %}{{ page.title }} | {{ super() }} {% endblock title %}
 
+{% block hero %}
+{% endblock hero %}
 
 {% block header %}
 <header class="box-shadow">