diff --git a/build.sh b/build.sh
index d4e42ff48..c118f488f 100755
--- a/build.sh
+++ b/build.sh
@@ -1,32 +1,34 @@
 echo "Starting build..."
 
+SOURCE=${BASH_SOURCE[0]}
+DIR_OF_THIS_SCRIPT="$( dirname "$SOURCE" )"
+ABS_DIR_OF_SCRIPT="$( realpath $DIR_OF_THIS_SCRIPT )"
+
 # TODO: Check if current version is latest to avoid redundant installation
 if [[ -f "tailwindcss" ]]
 then
-    echo "Tailwind installed"
-else
-    # rm tailwindcss
-    # checks os and architecture for correct release
-    # https://stackoverflow.com/a/8597411 
-    echo "Installing & building tailwind..."
-    ASSET="tailwindcss"
-
-    if [[ "$OSTYPE" == "linux-gnu"* ]]; then
-        ASSET="$ASSET-linux"
-    elif [[ "$OSTYPE" == "darwin"* ]]; then
-        ASSET="$ASSET-macos"
-    fi
-    if [[ "$(uname -m)" == "x86_64"* ]]; then
-        ASSET="$ASSET-x64"
-    elif [[ "$(uname -m)" == "arm64"* ]]; then
-        ASSET="$ASSET-arm64"
-    fi
-
-    curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
-    chmod +x $ASSET
-    mv $ASSET tailwindcss
+    rm tailwindcss
 fi
 
+# checks os and architecture for correct release
+# https://stackoverflow.com/a/8597411 
+echo "Installing & building tailwind..."
+ASSET="tailwindcss"
+
+if [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    ASSET="$ASSET-linux"
+elif [[ "$OSTYPE" == "darwin"* ]]; then
+    ASSET="$ASSET-macos"
+fi
+if [[ "$(uname -m)" == "x86_64"* ]]; then
+    ASSET="$ASSET-x64"
+elif [[ "$(uname -m)" == "arm64"* ]]; then
+    ASSET="$ASSET-arm64"
+fi
+
+curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
+chmod +x $ASSET
+mv $ASSET tailwindcss
 
 
 # initialized and configures tailwind if not configured
@@ -41,6 +43,6 @@ fi
 echo "Compiling tailwindcss and building zola project..."
 rm -rf public static/css
 ./tailwindcss -i css/index.css -o ./static/css/index.css --minify
-zola build
+zola --root $ABS_DIR_OF_SCRIPT build
 
 
diff --git a/content/_index.md b/content/_index.md
index 83a68cd5c..77539e27e 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -17,7 +17,7 @@ extra:
 <br/>
 <br/>
 
-![Image](images/black_threefold_header.png#mx-auto#medium)
+![Image](images/white_threefold_header.png#mx-auto#medium)
 
 <br/>
 
diff --git a/content/footer/_index.md b/content/footer/_index.md
index b4cb8f4ff..35d7afa70 100644
--- a/content/footer/_index.md
+++ b/content/footer/_index.md
@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/footer.html"
 extra:
-  logoPath: "images/black_threefold.png"
+  logoPath: "images/white_threefold.png"
   socialLinks: { Github: "https://github.com/threefoldfoundation", Github2: "https://github.com/threefoldtech", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews"  }
 ---
 
diff --git a/content/header/index.md b/content/header/index.md
index 80510227f..f668206e1 100644
--- a/content/header/index.md
+++ b/content/header/index.md
@@ -3,15 +3,12 @@ title: "Header"
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "images/black_threefold.png"
-  button_Path: "/images/gettft_node_2.png"
+  logoPath: "images/white_threefold.png"
+
 ---
 
-- [About]("/about")
-- [Technology]("/technology")
-- [Host]("/host")
-- [Deploy]("/deploy")
-- [Utilization]("/utilization") 
+- [Why]("/about")
+- [Product]("/product")
 - Info
 
 
diff --git a/css/index.css b/css/index.css
index b7a8ef3d3..bbb7d986e 100644
--- a/css/index.css
+++ b/css/index.css
@@ -10,19 +10,35 @@
 @import "tailwindcss/utilities";
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
+
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
 }
 
 * {
-  font-family: "Lato", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {
   background-color: rgba(255, 255, 255, 0.75);
 }
 
+.bg-dark-gradient {
+  background: rgb(15,15,15);
+  background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
+}
+
+.bg-black1 {
+  background-color: rgba(15,15,15,1);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+
 /* Custom css allowing image styling in markdown */
 img[src*="#mx-auto"] {
   margin: auto;
@@ -239,12 +255,12 @@ background-color:#5596f5 !important;
   h1 {
     @apply text-4xl lg:text-6xl font-normal;
     color: #2b2b2b;
-    font-family: "Lato", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
   }
   h2 {
     @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
     color: #2b2b2b;
-    font-family: "Lato", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
@@ -252,28 +268,28 @@ background-color:#5596f5 !important;
   h3 {
     @apply text-2xl lg:text-3xl my-4 font-extralight;
     color: #2b2b2b;
-    font-family: "Lato", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
   }
   h3 strong {
     @apply font-normal;
   }
   h4 {
     @apply text-xl lg:text-2xl font-normal tracking-wider;
-    font-family: "Lato", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
     
   }
   h5 {
-    @apply text-lg my-1 tracking-normal font-semibold;
-    font-family: "Lato", sans-serif !important;
+    @apply text-lg my-1 tracking-normal font-medium;
+    font-family: "Inter", sans-serif !important;
   }
   h6 {
     @apply text-md not-italic font-normal my-1;
-    font-family: "Lato", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
   }
   p {
     @apply text-lg;
     color: #3d3d3d;
-    font-family: "Lato", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
   }
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
@@ -320,20 +336,20 @@ background-color:#5596f5 !important;
 
   .article h2{
     font-size: 2.25rem;
-    font-family: "Lato", sans-serif;
+    font-family: "Inter", sans-serif;
     line-height: 1.5;
     font-weight: 700;
     color:#333;
   }
   
   .article h1{
-    font-family: "Lato", sans-serif;
+    font-family: "Inter", sans-serif;
   }
 
   }
   .article p{
     font-size: 1.125rem;
-    font-family: "Lato", sans-serif;
+    font-family: "Inter", sans-serif;
     line-height: 1.7;
     color:#333
   }
@@ -348,7 +364,7 @@ background-color:#5596f5 !important;
 
   .article li{
     font-size: 1.125rem;
-    font-family: "Lato", sans-serif;
+    font-family: "Inter", sans-serif;
     line-height: 1.7;
     color:#333
   }
@@ -359,7 +375,7 @@ background-color:#5596f5 !important;
   }
 
   .main-title {
-    font-family: "Lato", sans-serif;
+    font-family: "Inter", sans-serif;
   }
 
 
@@ -391,7 +407,7 @@ a {
 }
 
 header {
-  font-family: "Lato", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .nav_btn {
@@ -535,15 +551,15 @@ header {
 }
 
 .my-test{
-  font-family: "Lato", sans-serif;
+  font-family: "Inter", sans-serif;
 } 
 .post-content-text .my-test  {
-  font-family: "Lato", sans-serif;
+  font-family: "Inter", sans-serif;
   line-height: 1.7;
 }
 
 .post-content-text h2 {
-  font-family: "Lato", sans-serif;
+  font-family: "Inter", sans-serif;
   line-height: 1.5;
   font-size: 2.25rem;
   font-weight: 700;
diff --git a/css/layout.css b/css/layout.css
index 8881cc851..8ba45960d 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -38,11 +38,11 @@ code {
   @apply text-gray-500;
 }
 
-.text-blue-dark {
+  /*.text-blue-dark {
   /* for dark mode 
   @apply text-blue-200;
-  */
-}
+
+}*/
 
 .text-shadow-titles {
   text-shadow: 4px 4px 2px #000;
@@ -85,7 +85,7 @@ a:active {
 }
 
 h5 a {
-  @apply text-gray-900 font-normal;
+  @apply text-gray-200 font-normal;
 }
 
 /*
@@ -381,7 +381,7 @@ blockquote {
   }
   & ol li {
     margin-bottom: 0.5rem;
-    font-size: $pokey;
+    font-size: 75%;
   }
   & li p {
     font-size: 100%;
@@ -464,3 +464,8 @@ footer {
     width: 40%;
   }
 }
+
+.bg-dark {
+  background: rgb(15,15,15);
+  background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
+}
\ No newline at end of file
diff --git a/start.sh b/start.sh
index 34af69b2a..ac927fddf 100755
--- a/start.sh
+++ b/start.sh
@@ -1,48 +1,25 @@
-set +ex
-# Check if tailwindcss is already installed
-if command -v tailwindcss &> /dev/null; then
-    echo "tailwindcss is already installed."
-else
-    # checks OS and architecture for correct release
-    echo "Installing & building tailwind..."
-    
-    ASSET="tailwindcss"
-    
-    if [[ "$OSTYPE" == "linux-gnu"* ]]; then
-        ASSET="$ASSET-linux"
-        elif [[ "$OSTYPE" == "darwin"* ]]; then
-        ASSET="$ASSET-macos"
-    fi
-    if [[ "$(uname -m)" == "x86_64"* ]]; then
-        ASSET="$ASSET-x64"
-        elif [[ "$(uname -m)" == "arm64"* ]]; then
-        ASSET="$ASSET-arm64"
-    fi
-    pushd /tmp
-    curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
-    chmod +x $ASSET
-    mv $ASSET /usr/local/bin/tailwindcss
-    popd
+# builds if executable isn't foound
+if [[ ! -f "tailwindcss" ]]
+then
+    sh build.sh
 fi
-source ./env.sh
+
 # initialized and configures tailwind if not configured
-if [ ! -f "tailwind.config.js" ]
+if [[ ! -f "tailwind.config.js" ]]
 then
     ./tailwindcss init
     sed -i '' "s|  content: \\[\\],|  content: \\['./templates/**/*.html'\\],|g" tailwind.config.js
 fi
 
 # compiles tailwind css & launches locally
-# rm -rf public static/css
-# ./tailwindcss -i css/index.css -o ./static/css/index.css --watch
-# zola serve &
-# compiles tailwind css for prod & builds project
-# ./tailwindcss -i css/index.css -o ./static/css/index.css --minify
-# zola build
-# # kills zola and tw bg processes on interrupt
-# trap 'kill $(jobs -p); exit 1' INT
-# wait
 rm -rf public static/css
-tailwindcss -i css/index.css -o ./static/css/index.css --minify
-zola build -o ~/Documents/web/$NAME/
-open ~/Documents/web/$NAME/index.html
\ No newline at end of file
+./tailwindcss -i css/index.css -o ./static/css/index.css --watch & zola serve &
+
+# compiles tailwind css for prod & builds project
+./tailwindcss -i css/index.css -o ./static/css/index.css --minify
+zola build
+
+# kills zola and tw bg processes on interrupt
+trap 'kill $(jobs -p); exit 1' INT
+wait
+
diff --git a/static/images/banner.gif b/static/images/banner.gif
new file mode 100644
index 000000000..dd9c2fe9a
Binary files /dev/null and b/static/images/banner.gif differ
diff --git a/static/images/banner2.gif b/static/images/banner2.gif
new file mode 100644
index 000000000..3e9676b79
Binary files /dev/null and b/static/images/banner2.gif differ
diff --git a/static/images/getanode.png b/static/images/getanode.png
new file mode 100644
index 000000000..15280612b
Binary files /dev/null and b/static/images/getanode.png differ
diff --git a/static/images/gettft_node_21.png b/static/images/gettft_node_21.png
new file mode 100644
index 000000000..68036899b
Binary files /dev/null and b/static/images/gettft_node_21.png differ
diff --git a/static/images/map2.png b/static/images/map2.png
new file mode 100644
index 000000000..e9415cfd0
Binary files /dev/null and b/static/images/map2.png differ
diff --git a/static/images/map_white.png b/static/images/map_white.png
new file mode 100644
index 000000000..1fb1e693f
Binary files /dev/null and b/static/images/map_white.png differ
diff --git a/static/images/tf_dark.png b/static/images/tf_dark.png
new file mode 100644
index 000000000..3f360ec1c
Binary files /dev/null and b/static/images/tf_dark.png differ
diff --git a/static/images/tf_dark_2.png b/static/images/tf_dark_2.png
new file mode 100644
index 000000000..dd36696cf
Binary files /dev/null and b/static/images/tf_dark_2.png differ
diff --git a/static/images/white_threefold.png b/static/images/white_threefold.png
new file mode 100644
index 000000000..db0f8aeb5
Binary files /dev/null and b/static/images/white_threefold.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index dcd4482ca..6d6f71ab5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,27 @@ module.exports = {
   content: [
       './templates/**/*.html'
   ],
+  safelist: [
+    {
+      pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
+      variants: [
+        'sm', 'md', 'lg', 
+        'first', 'first:sm', 'first:md', 'first:lg', 
+        'last', 'last:sm', 'last:md', 'last:lg'
+      ],
+    },
+    {
+      pattern: /(pt|pb)-(0)/,
+      variants: [
+        '!', 'lg', 
+        'first', 'first:sm', 'first:md', 'first:lg', 
+        'last', 'last:sm', 'last:md', 'last:lg'
+      ],
+    },
+    {
+      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
+    }
+  ],
   darkMode: false,
   important: true,
   theme: {
@@ -59,8 +80,13 @@ module.exports = {
               from: { transform: 'translateX(0)' },
               to: { transform: 'translateX(-100%)' },
           }
-      }                    
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },                    
       },
   },
-  plugins: [], // if we add forms, do it here
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ], // if we add forms, do it here
 }
diff --git a/templates/_default/base.html b/templates/_default/base.html
index 72e998c41..10e0805b2 100644
--- a/templates/_default/base.html
+++ b/templates/_default/base.html
@@ -3,7 +3,7 @@
 {% include "partials/head.html" %}
 {% include "partials/header.html" %}
 
-<body>
+<body class="">
 
   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
@@ -42,14 +42,21 @@
   <!-- End Twitter universal website tag code -->
 
   {% include "partials/header.html" %}
-  <div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden">
+  <div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden bg-dark-gradient">
     {% block content %}{% endblock %}
   </div>
-  <div class="px-4 md:px-8">
+  <div class="px-4 md:px-8  overflow-hidden  bg-dark-gradient">
     {% include "partials/footer.html" %}
   </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
   <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
+
+<style>
+.bg-dark-gradient {
+  background: rgb(15,15,15);
+  background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
+}
+</style>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 1e6fc1071..635c313c8 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,9 +1,10 @@
 {% extends "_default/base.html" %}
 {% block content %}
 
-<!-- home page template, has a banner and rows of page summaries -->
-<div>
-    {% set page = get_page(path="home/index.md") %}
-    {{page.content | safe}}
-</div>
+{% include "partials/home/hero.html" %}
+{% include "partials/home/banner.html" %}
+{% include "partials/home/grid_stats.html" %}
+{% include "partials/home/features.html" %}
+{% include "partials/home/cta.html" %}
+
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index 18302481d..67128d5c4 100644
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@@ -1,45 +1,35 @@
-<!--
-  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
-  Read the documentation to get started: https://tailwindui.com/documentation
--->
-
 {%- set section = get_section(path="footer/_index.md") %}
 {%- set logoPath = section.extra.logoPath %}
 
 <html>
-    <head /><body>
-        <div class="mt-20 border-t border-gray-200"></div>
-        <footer class="bg-white">
-          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
-            <div class="xl:flex xl:gap-4">
-              <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
-                <img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
-                <p class="text-gray-500 text-base leading-6 ">
-                  {{section.description}}
-                </p>
-                {% include "partials/socialLinks.html" %}
-            </div>
+    <head />
+    <body>
+        <div class="mt-20 border-t border-gray-700"></div>
+        <footer class="bg-transparent">
+            <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
+                <div class="xl:flex xl:gap-4">
+                    <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
+                        <img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
+                        <p class="text-gray-200 text-base font-light leading-6">
+                            {{section.description}}
+                        </p>
+                        {% include "partials/socialLinks.html" %}
+                    </div>
 
-            <div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
-                {{ section.content | safe }}
-            </div>
-              
-              </div>
-              <div  class="mt-6 mx-auto border-t border-gray-200 pt-8">
-                <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
-                © <span id="year"></span> ThreeFold, All rights reserved.
-                <a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-900">Terms &amp; Conditions |
-                </a><a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-900">Privacy Policy |
-                </a><a href="/tfLabs" class="leading-6 text-gray-500 hover:text-gray-900">ThreeFold Labs IT</a></p>
-              </div>
-    
-            </div>
-            
-          </div>
+                    <div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
+                        {{ section.content | safe }}
+                    </div>
 
-
-          
+                </div>
+                <div class="mt-6 mx-auto border-t border-gray-700 pt-8">
+                    <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
+                        © <span id="year"></span> ThreeFold, All rights reserved.
+                        <a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-300">Terms &amp; Conditions |</a>
+                        <a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-300">Privacy Policy |</a>
+                        <a href="/tfLabs" class="leading-6 text-gray-500 hover:text-gray-300">ThreeFold Labs IT</a>
+                    </p>
+                </div>
+            </div>
         </footer>
-        </body>
-        </html>
-        
\ No newline at end of file
+    </body>
+</html>
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 9651cb31e..938859120 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -2,12 +2,12 @@
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
 <header id="header-container">
-    <div class="z-20 bg-white fixed w-full top-0">
-        <div class="relative z-50 shadow">
-        <div class="mx-auto flex z-50 shadow justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
+    <div class="z-20 bg-black2 fixed w-full top-0">
+        <div class="relative z-50">
+        <div class="mx-auto flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             <div>
                 <a href="{{get_url(path='/')}}" class="flex">
-                    <img class="w-16 h-auto sm:w-15" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
+                    <img class="w-12 h-auto sm:w-15" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
                 </a>
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
@@ -36,25 +36,25 @@
                     {% set current = get_url(path=link_path[1]) ~ "/" %}
                     {% if header_label is containing("http") %}
                         {% if header_label is not containing("threefold") %}
-                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white hover:text-gray-200 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
                             {{link_label}}
                         </a>
                         {% endif %}
                       {% elif current_url and current == current_url %}
-                          <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                          <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white hover:text-gray-200 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
                             {{link_label}}
                           </a>
                       {% else %}
-                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-white hover:text-gray-200 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
                           {{link_label}}
                         </a>
                       {% endif %}
                 {% else %}
                     <div class="relative">
                         {% set button_id = header_label ~ "-menu-btn" | slugify %}
-                    <button type="button" id="{{button_id}}" class="nav_btn py-3  text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
+                    <button type="button" id="{{button_id}}" class="nav_btn py-3  text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none transition ease-in-out duration-150">
                         <span>{{ header_label }}</span>
-                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                     </button>
                     </div>
 
@@ -67,7 +67,7 @@
                 <div class="inline-flex">
                   {# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
                     <li class="ml-4">
-                      <a href="https://t.me/threefoldnews" target="_blank" class="text-black">
+                      <a href="https://t.me/threefoldnews" target="_blank" class="text-white">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           width="18"
@@ -87,7 +87,7 @@
                       <a
                         href="javascript:;"
                         onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
-                        class="text-black"
+                        class="text-white"
                       >
                         <svg
                           aria-hidden="true"
@@ -107,17 +107,8 @@
                       </a>
                     </li> 
                   </ul> #}
-                  {# <a href="/getnode"><button class="px-6 green">Get Node</button></a> #}
-                  <div class="rounded-full border-2 mt-1 border-gray-400">
-                    <a href="/getnode" class="mt-2">
-                      <img
-                        src="{{ get_url(path=section.extra.button_Path) }}"
-                        class="mr-5"
-                        style="max-width: none;"
-                        alt=""
-                      />
+                    <a href="/getnode" class=" rounded-2xl bg-white px-4 py-1 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 hover:text-gray-800">Get 3Nodes
                     </a>
-                  </div>
                 </div>
               </div>
             </div>
@@ -132,7 +123,7 @@
 
 <nav>
     <div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-        <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+        <div class="bg-black">
             <div id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
                 {{header_menu | safe }}
             </div>
@@ -176,13 +167,13 @@
                                     </a>
                                     {% endif %}
                                 {% else %}
-                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                     {{link_label}}
                                 </a>
                                 {% endif %}
                             {% else %}
                                 {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                    <button type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
                                         {{ header_label }}
                                         <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                     </button>
@@ -207,14 +198,7 @@
                       </div> #}
 
                       <div class="rounded-full border-2 mt-4 mx-8 border-gray-400">
-                        <a href="/getnode" class="mt-2">
-                          <img
-                            src="/images/gettft_node_2.png"
-                            class="mr-5"
-                            style="max-width: none;"
-                            alt=""
-                          />
-                        </a>
+                        <a href="/getnode" class="mt-2 rounded-md bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Node</a>
                       </div>
                     </nav>                    
                 </div>
diff --git a/templates/partials/header_custom.html b/templates/partials/header_custom.html
new file mode 100644
index 000000000..03fcf0306
--- /dev/null
+++ b/templates/partials/header_custom.html
@@ -0,0 +1,86 @@
+<header id="header-container" class="bg-inherit">
+    <div class="z-10 bg-dark1 w-screen">
+        <div class="relative z-50">
+            <div class="mx-auto flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
+                <div>
+                    <a href="/" class="flex">
+                        <img  src="images/tf_dark.png" alt="ODFZ Logo" />
+                    </a>
+                </div>
+                <div class="-mr-2 -my-2 lg:hidden">
+                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                    <button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
+                    <nav class="flex space-x-10">
+                        {% for header_item in header_items %}
+                        {% if not loop.first %}
+                            {% set header_arr = header_item | split(pat="</li>") %}
+                            {% set header_label = header_arr[0] %}
+                            {% if '<a' in header_label %}
+                                {% set link_label = header_label | striptags %}
+                                {% set link_path = header_label | split(pat="%22") | safe%}
+                                {% set current = get_url(path=link_path[1]) ~ "/" %}
+                                {% if header_label is containing("http") %}
+                                    {% if header_label is not containing("threefold") %}
+                                    <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                        {{link_label}}
+                                    </a>
+                                    {% endif %}
+                                  {% elif current_url and current == current_url %}
+                                      <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                        {{link_label}}
+                                      </a>
+                                  {% else %}
+                                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                      {{link_label}}
+                                    </a>
+                                  {% endif %}
+                            {% else %}
+                            <div class="relative">
+                                {% set button_id = header_label ~ "-menu-btn" | slugify %}
+                            <button type="button" id="{{button_id}}" class="nav_btn py-3  text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
+                                <span>{{ header_label }}</span>
+                                <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                            </button>
+                            </div>
+        
+                        {% endif %}  
+                    {% endif %}
+                    {% endfor %}
+            </nav>
+                </div>
+            </div>
+        </div>
+        
+        {% for header_item in header_items %}
+            {% set header_parts = header_item | split(pat="</li>") %}
+            {% set header_label = header_parts[0] %}
+            {% set header_menu = header_parts[1] %}
+            {% set menu_id = header_label ~ "-menu" | slugify %}
+            <nav>
+                <div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                    <div class="bg-gray-800 lg:bg-gray-900">
+                        <div class="mx-8 lg:mx-20 px-6 py-4 text-white">
+                            {{ header_menu | safe }}
+                        </div>
+                    </div>            
+                </div>
+            </nav>
+        {% endfor %}
+    </div>
+</header>
+
+<style>
+    .bg-dark1 {
+      background: rgba(15,15,15,1);
+    }
+</style>
diff --git a/templates/partials/home/banner.html b/templates/partials/home/banner.html
new file mode 100644
index 000000000..3382a039f
--- /dev/null
+++ b/templates/partials/home/banner.html
@@ -0,0 +1,9 @@
+<div class="bg-transparent py-24 flex justify-center items-center">
+    <div class="mx-auto max-w-7xl px-4 lg:px-6">
+        <img 
+        class="object-contain w-full lg:w-[100%] max-w-[100%]" 
+        src="images/banner2.gif" 
+        alt="TF">
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/templates/partials/home/cta.html b/templates/partials/home/cta.html
new file mode 100644
index 000000000..d8e13aba3
--- /dev/null
+++ b/templates/partials/home/cta.html
@@ -0,0 +1,15 @@
+<div class="bg-transparent">
+    <div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-24 lg:flex lg:items-center lg:justify-between lg:px-8">
+      <h2 class="lg:text-balance sm:text-center px-8 font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Build the <br>Internet of Tomorrow, <br>Today.
+      </h2>
+      <div class="mt-10 flex items-center gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
+        <a href="#" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Talk to an Expert
+        </a>
+        <a href="#" class="fade-in rounded-2xl bg-transparent px-4 py-2.5 text-sm font-semibold text-white hover:text-gray-200 mb-4 lg:mb-0">
+          Dive Deeper <span aria-hidden="true">→</span>
+        </a>
+      </div>
+    </div>
+</div>
diff --git a/templates/partials/home/features.html b/templates/partials/home/features.html
new file mode 100644
index 000000000..66cf103ee
--- /dev/null
+++ b/templates/partials/home/features.html
@@ -0,0 +1,76 @@
+<div class="bg-transparent">
+  <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
+    <div class="max-w-2xl px-16 pb-12">
+      <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">Why ThreeFold is Leading the Next Gen of Cloud & Network Technology
+      </h2>
+      <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
+      <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
+      <a href="#" class="fade-in lg:text-xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect">Discover Products <span aria-hidden="true">→</span></a>
+    </div>
+    <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
+      <dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
+        <div class="">
+          <dt class="font-medium text-gray-200">Unbreakable Data</dt>
+        </div>
+        <div class="">
+          <dd class="font-light text-gray-400 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
+        </div>
+        <div class="pt-4">
+          <dt class="font-medium text-gray-200">Autonomous Cloud</dt>
+        </div>
+        <div class="">
+          <dd class="font-light text-gray-400 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
+        </div>
+        <div class="pt-4">
+          <dt class="font-medium text-gray-200">P2P Network</dt>
+        </div>
+        <div class="">
+          <dd class="font-light text-gray-400 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Define the slow blinking animation */
+  @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+    
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Apply the blinking animation to the link */
+  .blinking-effect {
+    animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+  }
+</style>
\ No newline at end of file
diff --git a/templates/partials/home/grid_stats.html b/templates/partials/home/grid_stats.html
new file mode 100644
index 000000000..fcf5b250b
--- /dev/null
+++ b/templates/partials/home/grid_stats.html
@@ -0,0 +1,69 @@
+<div class="bg-transparent relative isolate overflow-hidden py-24 mb-12">
+    <img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:max-w-none">
+        <div class="text-center">
+          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Proven by a Global Community</h2>
+          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
+          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Version 3.14 is live on Mainnet.</p>
+        </div>
+        <dl class="mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+            <div class="fade-in flex flex-col bg-white/5 p-8">
+              <dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
+              <dd class="order-first text-3xl font-semibold tracking-tight text-white">19,10 PB</dd>
+            </div>
+            <div class="fade-in flex flex-col bg-white/5 p-8">
+              <dt class="text-sm/6 font-light text-gray-300">CORES</dt>
+              <dd class="order-first text-3xl font-semibold tracking-tight text-white">46,934</dd>
+            </div>
+            <div class="fade-in flex flex-col bg-white/5 p-8">
+              <dt class="text-sm/6 font-semibold text-gray-300">NODES</dt>
+              <dd class="order-first text-3xl font-semibold tracking-tight text-white">1596</dd>
+            </div>
+            <div class="fade-in flex flex-col bg-white/5 p-8">
+              <dt class="text-sm/6 font-semibold text-gray-300">FARMS</dt>
+              <dd class="order-first text-3xl font-semibold tracking-tight text-white">900+</dd>
+            </div>
+          </dl>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Initialize the countUp for each of the numbers
+      new CountUp('capacity', 0, 1910, 0, 2.5).start();
+      new CountUp('cores', 0, 46934, 0, 2.5).start();
+      new CountUp('nodes', 0, 1596, 0, 2.5).start();
+      new CountUp('countries', 0, 40, 0, 2.5).start();
+      new CountUp('farms', 0, 900, 0, 2.5).start();
+    });
+  </script>
+  
+
+<style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/templates/partials/home/hero.html b/templates/partials/home/hero.html
new file mode 100644
index 000000000..10a415916
--- /dev/null
+++ b/templates/partials/home/hero.html
@@ -0,0 +1,40 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">A Self-Healing Data, Network and Cloud Platform</h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
+        <div class="mt-12 flex items-center justify-center gap-x-6">
+          <a href="#" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Get started</a>
+          <a href="#" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">Learn more <span aria-hidden="true">→</span></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html
index b92a37aa6..69fa1f389 100644
--- a/templates/shortcodes/grid_stats.html
+++ b/templates/shortcodes/grid_stats.html
@@ -1,5 +1,5 @@
 {% set styles = "background-image: url('images/V3.png');" %}
-<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
+<section class="px-2 h-auto bg-center lg:py-40 p-12 bg-cover bg-no-repeat" style="{{styles}}">
     <div class="relative mx-auto">
         <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
             {{body | markdown | safe }}
diff --git a/templates/static/css/index.css b/templates/static/css/index.css
index e3a2c95bd..6f2b1ad36 100644
--- a/templates/static/css/index.css
+++ b/templates/static/css/index.css
@@ -806,7 +806,7 @@ h5,
 .h5, 
 h6, 
 .h6{
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1.25;
   letter-spacing: -0.025em;
 }
@@ -1395,14 +1395,14 @@ button{
 
 .article h2{
   font-size: 2.25rem;
-  font-family: Lato,sans-serif!important;
+  font-family: Inter,sans-serif!important;
   line-height: 1.5;
   font-weight: 700;
   color:#333;
 }
 
 .article h1{
-  font-family: Lato,sans-serif!important;
+  font-family: Inter,sans-serif!important;
 }
 
 :root {
@@ -2269,6 +2269,10 @@ details[open] > summary::after {
   width: 3rem !important;
 }
 
+.w-13{
+  width: 4rem !important;
+}
+
 .w-64{
   width: 16rem !important;
 }
@@ -3442,7 +3446,7 @@ details[open] > summary::after {
 }
 
 * {
-  font-family: "Lato", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {
@@ -3540,7 +3544,7 @@ h1 {
 
 .article p{
   font-size: 1.125rem;
-  font-family: Lato,sans-serif!important;
+  font-family: Inter,sans-serif!important;
   line-height: 1.7;
   color:#333
 }
@@ -3558,7 +3562,7 @@ h1 {
 }
 
 .main-title {
-  font-family: Lato,sans-serif!important;
+  font-family: Inter,sans-serif!important;
 }
 
 button:hover :is(:where(a)) {
@@ -3725,7 +3729,7 @@ header {
 }
 
 .post-content-text h2 {
-  font-family: Lato,sans-serif!important;
+  font-family: Inter,sans-serif!important;
   line-height: 1.5;
   font-size: 2.25rem;
   font-weight: 700;