diff --git a/_includes/footer.html b/_includes/footer.html
index b30842a39e..42ba901b14 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,69 +1,112 @@
 <footer>
 	<div class="container">
-		<div class="footer-columns">
-			{% for column in site.data.footer %}
+	  <div class="footer-columns">
+		<!-- Getting Started Section -->
+		{% for column in site.data.footer %}
+		  {% if column.title == "Getting Started" %}
 			<ul class="footer-links">
-				<li>
-					<h2><a {% if column.new_window %}target="_blank" {% endif %}
-						href="{% include relative-src.html src=column.link %}" {% if column.social_icon
-						%}class="{{ column.social_icon || downcase }}-icon" {% endif %}>
-						{% if column.social_icon %}
-						{% include social-icon.html icon=column.social_icon %}
-						{% endif %}
-						{{ column.title }}</a></h2>
-				</li>
-				{% for link in column.links %}
+			  <li>
+				<h2><a {% if column.new_window %}target="_blank" {% endif %}
+					   href="{% include relative-src.html src=column.link %}">
+					   {{ column.title }}</a></h2>
+			  </li>
+			  {% for link in column.links %}
 				<li><a {% if link.new_window %}target="_blank" {% endif %}
-						href="{% include relative-src.html src=link.link %}" {% if link.social_icon
-						%}class="{{ link.social_icon || downcase }}-icon" {% endif %}>
-						{% if link.social_icon %}
-						{% include social-icon.html icon=link.social_icon %}
-						{% endif %}
-						{{ link.name }}</a></li>
-				{% endfor %}
+					   href="{% include relative-src.html src=link.link %}">
+					   {{ link.name }}</a></li>
+			  {% endfor %}
 			</ul>
-			{% endfor %}
-
-			<!-- 
-			<ul class="feed">
-				<a class="twitter-timeline" data-width="320" data-height="320" data-theme="light"
-					data-link-color="#62ACCD" href="https://twitter.com/mesheryio"
-					data-chrome="nofooter circularborders noscrollbar">Tweets by Meshery</a>
-				<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+		  {% endif %}
+		{% endfor %}
+  
+		<!-- Resources Section -->
+		{% for column in site.data.footer %}
+		  {% if column.title == "Resources" %}
+			<ul class="footer-links">
+			  <li>
+				<h2><a {% if column.new_window %}target="_blank" {% endif %}
+					   href="{% include relative-src.html src=column.link %}">
+					   {{ column.title }}</a></h2>
+			  </li>
+			  {% for link in column.links %}
+				<li><a {% if link.new_window %}target="_blank" {% endif %}
+					   href="{% include relative-src.html src=link.link %}">
+					   {{ link.name }}</a></li>
+			  {% endfor %}
 			</ul>
- 			-->
-		</div>
-
-		<div class="container flex copyright">
-			<div class="text">&copy; {{ site.time | date: '%Y' }} The Meshery Authors</div>
-			<div class="text">Confidently wrangling cloud native infrastructure</div>
-			<div class="text"><a href="https://github.com/meshery/meshery/blob/master/CODE_OF_CONDUCT.md">Code of
-					Conduct</a></div>
-			<div class="text"><a href ="https://www.linuxfoundation.org/legal/trademark-usage">The Linux Foundation. Meshery has registered trademarks and uses trademarks</a></div>
-		</div>
+		  {% endif %}
+		{% endfor %}
+  
+		<!-- Community Section -->
+		{% for column in site.data.footer %}
+		  {% if column.title == "Community" %}
+			<ul class="footer-links">
+			  <li>
+				<h2><a {% if column.new_window %}target="_blank" {% endif %}
+					   href="{% include relative-src.html src=column.link %}">
+					   {{ column.title }}</a></h2>
+			  </li>
+			  {% for link in column.links %}
+				<li><a {% if link.new_window %}target="_blank" {% endif %}
+					   href="{% include relative-src.html src=link.link %}">
+					   {{ link.name }}</a></li>
+			  {% endfor %}
+			</ul>
+		  {% endif %}
+		{% endfor %}
+  
+		<!-- Social Section -->
+		{% for column in site.data.footer %}
+		  {% if column.title == "Socials" %}
+			<ul class="footer-links">
+			  <li>
+				<h2><a {% if column.new_window %}target="_blank" {% endif %}
+					   href="{% include relative-src.html src=column.link %}" {% if column.social_icon %}
+					   class="{{ column.social_icon | downcase }}-icon" {% endif %}>
+					   {% if column.social_icon %}
+						 {% include social-icon.html icon=column.social_icon %}
+					   {% endif %}
+					   {{ column.title }}</a></h2>
+			  </li>
+			  {% for link in column.links %}
+				<li><a {% if link.new_window %}target="_blank" {% endif %}
+					   href="{% include relative-src.html src=link.link %}" {% if link.social_icon %}
+					   class="{{ link.social_icon | downcase }}-icon" {% endif %}>
+					   {% if link.social_icon %}
+						 {% include social-icon.html icon=link.social_icon %}
+					   {% endif %}
+					   {{ link.name }}</a></li>
+			  {% endfor %}
+			</ul>
+		  {% endif %}
+		{% endfor %}
+	  </div>
+  
+	  <div class="container flex copyright">
+		<div class="text">&copy; {{ site.time | date: '%Y' }} The Meshery Authors</div>
+		<div class="text">Confidently wrangling cloud native infrastructure</div>
+		<div class="text"><a href="https://github.com/meshery/meshery/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a></div>
+		<div class="text"><a href="https://www.linuxfoundation.org/legal/trademark-usage">The Linux Foundation. Meshery has registered trademarks and uses trademarks</a></div>
+	  </div>
 	</div>
-</footer>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-{% if jekyll.environment == 'production' %}
-<script src="{{ site.baseurl }}/js/stellarnav.min.js"></script>
-{% else %}
-<script src="{{ site.baseurl }}/js/stellarnav.js"></script>
-{% endif %}
-
-<script src="{{ site.baseurl }}/js/main.js"></script>
-
-<!-- Site Navigation Menu -->
-<script type="text/javascript">
+  </footer>
+  
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  {% if jekyll.environment == 'production' %}
+  <script src="{{ site.baseurl }}/js/stellarnav.min.js"></script>
+  {% else %}
+  <script src="{{ site.baseurl }}/js/stellarnav.js"></script>
+  {% endif %}
+  <script src="{{ site.baseurl }}/js/main.js"></script>
+  <script type="text/javascript">
 	jQuery(document).ready(function ($) {
-		jQuery('.stellarnav').stellarNav({ breakpoint: 1140 });
-		jQuery('.stellarnav.mobile').css('text-align', 'end');
+	  jQuery('.stellarnav').stellarNav({ breakpoint: 1140 });
+	  jQuery('.stellarnav.mobile').css('text-align', 'end');
 	});
-</script>
-<!--Script for Copy to Clipboard-->
-<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
-<script src="{{ site.baseurl }}/js/vanilla-tilt.min.js"></script>
-
-<script>
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
+  <script src="{{ site.baseurl }}/js/vanilla-tilt.min.js"></script>
+  <script>
 
 	function resetCopyText(element) {
 		let childElements = element.childNodes
@@ -160,23 +203,19 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
 	}
 	
 </script>
-
-<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
-<script>
-  $(document).ready(function () {
-    $('.slider').slick({
-
-      dots: false,
-      arrows: false,
-      infinite: true,
-      speed: 400,
-      slidesToShow: 3,
-      slidesToScroll: 1,
-      autoplay: true, // true
-      autoplaySpeed: 1500,
-      
-
-      responsive: [
+  <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <script>
+	$(document).ready(function () {
+	  $('.slider').slick({
+		dots: false,
+		arrows: false,
+		infinite: true,
+		speed: 400,
+		slidesToShow: 3,
+		slidesToScroll: 1,
+		autoplay: true,
+		autoplaySpeed: 1500,
+		responsive: [
         {
           breakpoint: 1300,
           settings: {
@@ -242,9 +281,7 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
           }
         }
       ]
-    });
-  });
-</script>
-</body>
-
-</html>
+	  });
+	});
+  </script>
+  
\ No newline at end of file
diff --git a/_sass/footer.scss b/_sass/footer.scss
index 0f9dff2615..3ca9ee4b87 100644
--- a/_sass/footer.scss
+++ b/_sass/footer.scss
@@ -1,3 +1,32 @@
+.footer-columns {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); // Four equal columns for larger screens
+  max-width: 100vw;
+  overflow-x: hidden;
+
+  // Responsive two-column layout
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, 1fr); // Switch to two columns
+    grid-template-rows: auto;
+
+    .column:nth-child(1) {
+      grid-column: 1 / 2;
+    }
+
+    .column:nth-child(2) {
+      grid-column: 2 / 3;
+    }
+
+    .column:nth-child(3) {
+      grid-column: 1 / 2; // Aligns below column 1
+    }
+
+    .column:nth-child(4) {
+      grid-column: 2 / 3; // Aligns below column 2
+    }
+  }
+}
+
 .footer-links {
   width: 100%;
   margin: 10px 20px;
@@ -8,6 +37,21 @@
     flex: 0 0 fit-content;
   }
 
+  @media screen and (max-width: 450px) {
+    margin: 5px 10px;
+    width: auto;
+
+    h2 {
+      font-size: 1rem;
+      margin: 10px 0;
+    }
+
+    li {
+      font-size: 0.9rem;
+      margin: 5px 0;
+    }
+  }
+
   li {
     list-style: none;
     margin: 10px auto;
@@ -15,6 +59,7 @@
     @media #{$tablet} {
       max-width: 200px;
     }
+
     a {
       &:hover {
         text-decoration: none;
@@ -58,28 +103,28 @@
         fill: #0077b5;
       }
 
-      &.slack-icon:hover svg .first{
+      &.slack-icon:hover svg .first {
         fill: #e91e63;
       }
-      &.slack-icon:hover svg .second{
+      &.slack-icon:hover svg .second {
         fill: #e91e63;
       }
-      &.slack-icon:hover svg .third{
+      &.slack-icon:hover svg .third {
         fill: #00bcd4;
       }
-      &.slack-icon:hover svg .fourth{
+      &.slack-icon:hover svg .fourth {
         fill: #00bcd4;
       }
-      &.slack-icon:hover svg .fifth{
+      &.slack-icon:hover svg .fifth {
         fill: #4caf50;
       }
-      &.slack-icon:hover svg .sixth{
+      &.slack-icon:hover svg .sixth {
         fill: #4caf50;
       }
-      &.slack-icon:hover svg .seventh{
+      &.slack-icon:hover svg .seventh {
         fill: #ff9800;
       }
-      &.slack-icon:hover svg .eigth{
+      &.slack-icon:hover svg .eigth {
         fill: #ff9800;
       }
 
@@ -104,7 +149,7 @@
     flex: 0 0 fit-content;
   }
 
-  @media (min-width:820px) and (max-width: 1154px){
+  @media (min-width: 820px) and (max-width: 1154px) {
     margin-top: 25px;
     text-align: justify;
   }
@@ -120,10 +165,10 @@
 }
 
 footer {
-  padding: 50px 0 50px 0;
+  padding: 50px 0;
   font-size: 0.9rem;
   position: relative;
-  background: linear-gradient(to right top, #3d3d3d, #343434, #2b2b2b, #222222, #1a1a1a, #181818, #161616, #141414, #181818, #1c1c1c, #212121, #252525);;
+  background: linear-gradient(to right top, #3d3d3d, #343434, #2b2b2b, #222222, #1a1a1a, #181818, #161616, #141414, #181818, #1c1c1c, #212121, #252525);
   color: #fff;
 
   .copyright {
@@ -134,13 +179,12 @@ footer {
     display: flex;
     justify-content: space-evenly;
     text-align: center;
+
     @media (max-width: 1000px) {
       flex-direction: column;
       text-align: center;
       .text {
-        text-align: center;
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: 10px 0;
       }
     }
   }
@@ -169,19 +213,11 @@ footer {
 
   h2 {
     font-size: 1.2em;
-    margin: 30px 0;
     margin: 15px auto;
     color: #ccc;
     font-weight: bold;
     text-align: start !important;
   }
-  
-
-  .footer-columns {
-    @extend %flexbox;
-    @include flex-flow(wrap);
-    justify-content: space-evenly;
-  }
 
   a {
     text-decoration: none;