diff --git a/assets/icons/bluesky.svg b/assets/icons/bluesky.svg
new file mode 100644
index 000000000..5f838af46
--- /dev/null
+++ b/assets/icons/bluesky.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="43" viewBox="0 0 16 16">
+  <path d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948" fill="#121646"/>
+</svg>
\ No newline at end of file
diff --git a/assets/icons/mastodon.svg b/assets/icons/mastodon.svg
new file mode 100644
index 000000000..dca71f8d2
--- /dev/null
+++ b/assets/icons/mastodon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="43" viewBox="0 0 16 16">
+  <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z" fill="#121646"/>
+</svg>
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index d3c6bfeae..994a3fff4 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -28,7 +28,9 @@
     <!--Section starts here-->
     <div class="text-center bg-cnp-blue md:py-36 py-14">
         <h1 class="md:text-xl text-white text-base">This open source project has been originally created by</h1>
-        <a href="https://www.enterprisedb.com/products/cloud-native-postgresql-kubernetes-ha-clusters-k8s-containers-scalable"><img src="logo/edb_landscape_color_grey.svg" alt="EDB logo" class="mx-auto pt-6 h-20 md:h-24"></a>
+        <a
+            href="https://www.enterprisedb.com/products/cloud-native-postgresql-kubernetes-ha-clusters-k8s-containers-scalable"><img
+                src="logo/edb_landscape_color_grey.svg" alt="EDB logo" class="mx-auto pt-6 h-20 md:h-24"></a>
         <div class="mx-auto md:py-24 md:px-56 px-4 py-8">
             <hr>
         </div>
@@ -42,10 +44,5 @@ <h1 class="md:text-5xl font-bold text-white leading-10 md:pt-4 text-3xl">Open So
             on <a href="https://github.com/cloudnative-pg/cloudnative-pg" class="text-rose-600">GitHub</a>.</p>
     </div>
     <!--Section ends here-->
-
-    <div class="text-center pt-24">
-        <a href="https://github.com/cloudnative-pg/cloudnative-pg"
-            class="bg-red-1 py-4 px-12 rounded-full text-white text-xl">View on GitHub</a>
-    </div>
 </section>
 {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 3a3889310..b9d663880 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,15 +1,73 @@
-<footer class="text-center pb-24">
-    <p class="text-sm charcoal md:w-1/2 mx-auto md:pt-10 px-6 pt-12">
+<footer class="section pb-0">
 
-      Copyright &copy; CloudNativePG a Series of LF Projects, LLC.<br />
-      For website terms of use, trademark policy and other project policies please see <a href="https://lfprojects.org/policies/">LF Projects, LLC Policies</a>.<br /><br />
+  <div class="pt-16">
+    <div
+      class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 pb-10 border-b border-b-zinc-200">
+
+      <!-- Learn -->
+      <div>
+        <h3 class="text-3xl font-semibold mb-0">Learn</h3>
+        <div class="space-y-2 text-base text-red-500">
+          <div><a href="/docs" class="hover:text-red-700 transition">Documentation</a></div>
+          <div><a href="https://cloudnative-pg.io/documentation/current/quickstart/"
+              class="hover:text-red-600 transition">Quickstart Guide</a></div>
+          <div><a href="/tags/tutorial" class="hover:text-red-600 transition">Tutorials</a></div>
+        </div>
+      </div>
+
+      <!-- Community -->
+      <div>
+        <h3 class="text-3xl font-semibold mb-0">Community</h3>
+        <div class="space-y-2 text-base text-red-500">
+          <div><a href="/blog" class="hover:text-red-700 transition">Blog</a></div>
+          <div><a href="/releases" class="hover:text-red-600 transition">Releases</a></div>
+          <div><a href="https://github.com/cloudnative-pg/cloudnative-pg/blob/main/CONTRIBUTING.md"
+              class="hover:text-red-600 transition">How to Contribute</a></div>
+        </div>
+      </div>
 
-      <a href="https://www.linuxfoundation.org/trademark-usage/" class="red-1">The Linux Foundation has registered trademarks and uses trademarks</a>.<br /><br />
+      <!-- Logo + Social -->
+      <div class="flex flex-col items-center">
+        <a href="https://cloudnative-pg.io/">
+          <img src="/logo/large_logo.svg" alt="CloudNativePG Logo" class="mb-2">
+        </a>
+        <div class="flex space-x-4 mb-2">
+          <a href="https://cloud-native.slack.com/archives/C08MAUJ7NPM">
+            <img src="/icons/Slack.svg" alt="Slack" title="Join our Slack channel now!">
+          </a>
+          <a href="https://twitter.com/CloudNativePg">
+            <img src="/icons/Twitter.svg" alt="Twitter">
+          </a>
+          <a href="https://www.youtube.com/channel/UCTGH88W1BiuRRPTzJUDPJyA">
+            <img src="/icons/YouTube.svg" alt="YouTube">
+          </a>
+          <a href="https://mastodon.social/@CloudNativePG" class="px-1">
+            <img src="/icons/mastodon.svg" alt="Mastodon">
+          </a>
+          <a href="https://bsky.app/profile/cloudnativepg.bsky.social" class="px-1">
+            <img src="/icons/bluesky.svg" alt="Bluesky">
+          </a>
+        </div>
+        <div class="text-center pt-4">
+          <a href="https://github.com/cloudnative-pg/cloudnative-pg"
+            class="bg-red-1 py-2 px-12 rounded-full text-white text-xl">View on GitHub</a>
+        </div>
+      </div>
+    </div>
+  </div>
 
-      <a href="https://www.postgresql.org/about/policies/trademarks"
-        class="red-1">Postgres, PostgreSQL and the Slonik Logo are trademarks or
+  <!-- Legal Text Section -->
+  <div class="text-center pb-4">
+    <p class="text-sm charcoal md:w-1/2 mx-auto md:pt-10 px-6 pt-12">
+      Copyright &copy; CloudNativePG a Series of LF Projects, LLC.<br />
+      For website terms of use, trademark policy and other project policies please see
+      <a href="https://lfprojects.org/policies/">LF Projects, LLC Policies</a>.<br /><br />
+      <a href="https://www.linuxfoundation.org/trademark-usage/" class="red-1">The Linux Foundation has registered
+        trademarks and uses trademarks</a>.<br /><br />
+      <a href="https://www.postgresql.org/about/policies/trademarks" class="red-1">Postgres, PostgreSQL and the Slonik
+        Logo are trademarks or
         registered trademarks of the PostgreSQL Community Association of Canada, and
         used with their permission</a>.
-
     </p>
+  </div>
 </footer>
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 5e648c6a2..5d93e82d0 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,7 +1,7 @@
 <!--Navbar starts here-->
 <nav>
   <header>
-    <div class="md:flex md:flex-row md:px-16 md:justify-between py-5">
+    <div class="md:flex md:flex-row md:px-16 md:justify-between py-5 items-center">
       <div class="flex justify-between px-4 md:hidden">
         <div>
           {{ $image := resources.Get "logo/large_logo.svg" }}
@@ -20,7 +20,7 @@
       </div>
 
       <div class="hidden md:block">
-        <ul class="md:flex gap-14 text-2xl medium-gray my-5">
+        <ul class="md:flex gap-14 text-2xl medium-gray my-5 pb-0">
           <li><a href="/blog">Blog</a></li>
           <li><a href="/tags/tutorial">Tutorials</a></li>
           <li><a href="/releases">Releases</a></li>
@@ -56,19 +56,10 @@
       </div>
       <!--For hamburger click -->
 
-      <div class="flex gap-5 my-4 fill-cnp-blue hidden md:flex">
+      <div class="my-4 hidden md:flex">
         <a class="github-button" href="https://github.com/cloudnative-pg/cloudnative-pg"
           data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true"
           aria-label="Star cloudnative-pg/cloudnative-pg on GitHub">Star</a>
-        <a href="https://cloud-native.slack.com/archives/C08MAUJ7NPM">
-          <img src="/icons/Slack.svg" alt="Slack" title="Join our Slack channel now!">
-        </a>
-        <a href="https://twitter.com/CloudNativePg">
-          <img src="/icons/Twitter.svg" alt="Twitter">
-        </a>
-        <a href="https://www.youtube.com/channel/UCTGH88W1BiuRRPTzJUDPJyA">
-          <img src="/icons/YouTube.svg" alt="YouTube">
-        </a>
       </div>
     </div>
   </header>
diff --git a/package.json b/package.json
index db5d7bcb7..344bcacd7 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,29 @@
 {
+  "name": "cloudnative-pg",
+  "version": "1.0.0",
+  "description": "",
+  "homepage": "https://github.com/cloudnative-pg/cloudnative-pg.github.io#readme",
+  "bugs": {
+    "url": "https://github.com/cloudnative-pg/cloudnative-pg.github.io/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloudnative-pg/cloudnative-pg.github.io.git"
+  },
+  "license": "ASF v2",
+  "author": "",
+  "main": "postcss.config.js",
+  "scripts": {
+    "build": "NODE_ENV=production npm run css && hugo -e production",
+    "build-dev": "NODE_ENV=development npm run css && hugo -D -e development --disableFastRender",
+    "css": "npx tailwindcss build -i assets/css/main.css -o assets/css/output.css",
+    "dev": "NODE_ENV=development npm run css && hugo server -D -e development --disableFastRender",
+    "prod": "NODE_ENV=production npm run css && hugo server -e production"
+  },
+  "dependencies": {
+    "postcss": "^8.3.11",
+    "postcss-scss": "^4.0.2"
+  },
   "devDependencies": {
     "@babel/cli": "^7.12.8",
     "@babel/core": "^7.12.9",
@@ -8,33 +33,7 @@
     "postcss-cli": "^8.3.0",
     "postcss-nested": "^5.0.1",
     "postcss-object-fit-images": "^1.1.2",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^3.0.23"
-  },
-  "dependencies": {
-    "postcss": "^8.3.11",
-    "postcss-scss": "^4.0.2",
+    "postcss-preset-env": "^10.2.4",
     "tailwindcss": "^3.0.23"
-  },
-  "name": "cloudnative-pg",
-  "description": "",
-  "version": "1.0.0",
-  "main": "postcss.config.js",
-  "scripts": {
-    "css": "npx tailwindcss build -i assets/css/main.css -o assets/css/output.css",
-    "prod": "NODE_ENV=production npm run css && hugo server -e production",
-    "build": "NODE_ENV=production npm run css && hugo -e production",
-    "dev": "NODE_ENV=development npm run css && hugo server -D -e development --disableFastRender",
-    "build-dev": "NODE_ENV=development npm run css && hugo -D -e development --disableFastRender"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/EnterpriseDB/temp-cnp-webpage.git"
-  },
-  "author": "",
-  "license": "ASF v2",
-  "bugs": {
-    "url": "https://github.com/EnterpriseDB/temp-cnp-webpage/issues"
-  },
-  "homepage": "https://github.com/EnterpriseDB/temp-cnp-webpage#readme"
+  }
 }