diff --git a/admin/src/api/post/content-types/post/lifecycles.js b/admin/src/api/post/content-types/post/lifecycles.js
index 35fcae9d..92e38003 100644
--- a/admin/src/api/post/content-types/post/lifecycles.js
+++ b/admin/src/api/post/content-types/post/lifecycles.js
@@ -202,7 +202,7 @@ async function generateTOC(result, event) {
         childNode = true;
       } else {
         toc = childNode ? toc + "</ul>" : toc;
-        toc += `<li style='margin:1px 0px'><a href="#${text}">${header.textContent}</a></li>`;
+        toc += `<li style='margin:3px 0px'><a href="#${text}">${header.textContent}</a></li>`;
         childNode = false;
       }
 
diff --git a/assets/css/global.css b/assets/css/global.css
index 90fc3b62..03aee107 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -3,11 +3,11 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: "Inter Medium";
+  font-family: "Inter ExtraLight";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 200;
   font-display: swap;
-  src: url(./../fonts/Inter-Medium.woff2);
+  src: url(./../fonts/Inter-ExtraLight.woff2);
 }
 
 @font-face {
@@ -19,27 +19,27 @@
 }
 
 @font-face {
-  font-family: "Inter Bold";
+  font-family: "Inter Medium";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/Inter-Bold.woff2);
+  src: url(./../fonts/Inter-Medium.woff2);
 }
 
 @font-face {
   font-family: "Inter SemiBold";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 600;
   font-display: swap;
   src: url(./../fonts/Inter-SemiBold.woff2);
 }
 
 @font-face {
-  font-family: "Inter ExtraLight";
+  font-family: "Inter Bold";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 700;
   font-display: swap;
-  src: url(./../fonts/Inter-ExtraLight.woff2);
+  src: url(./../fonts/Inter-Bold.woff2);
 }
 
 @font-face {
@@ -51,43 +51,59 @@
 }
 
 @font-face {
-  font-family: "Product Sans Regular";
+  font-family: "Poppins Light";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(./../fonts/Poppins-Light.woff2);
+}
+
+@font-face {
+  font-family: "Poppins Regular";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/ProductSans-Regular.woff2);
+  src: url(./../fonts/Poppins-Regular.woff2);
 }
 
 @font-face {
-  font-family: "Product Sans Black";
+  font-family: "Poppins Medium";
   font-style: normal;
-  font-weight: 600;
+  font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/ProductSans-Black.woff2);
+  src: url(./../fonts/Poppins-Medium.woff2);
 }
 
 @font-face {
-  font-family: "Poppins Light";
+  font-family: "WorkSans Light";
   font-style: normal;
-  font-weight: 600;
+  font-weight: 300;
   font-display: swap;
-  src: url(./../fonts/Poppins-Light.woff2);
+  src: url(./../fonts/WorkSans-Light.woff2);
 }
 
 @font-face {
-  font-family: "Poppins Regular";
+  font-family: "WorkSans Regular";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/Poppins-Regular.woff2);
+  src: url(./../fonts/WorkSans-Regular.woff2);
 }
 
 @font-face {
-  font-family: "Poppins Medium";
+  font-family: "WorkSans Medium";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/Poppins-Medium.woff2);
+  src: url(./../fonts/WorkSans-Medium.woff2);
+}
+
+@font-face {
+  font-family: "WorkSans SemiBold";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./../fonts/WorkSans-SemiBold.woff2);
 }
 
 input:-webkit-autofill,
@@ -118,7 +134,7 @@ input:-webkit-autofill:active {
 }
 
 body {
-  @apply font-product-regular break-words text-[#000000d6];
+  @apply font-inter-regular break-words text-black-core/[0.87];
 }
 
 .content > p {
@@ -126,7 +142,7 @@ body {
 }
 
 .prose > * {
-  @apply text-[1.125rem] md:text-[1.27rem] md:leading-[2rem] tracking-[0.04em];
+  @apply text-lg md:text-[1.1875rem] md:leading-8;
 }
 
 .comment input[type="text"],
@@ -152,7 +168,7 @@ body {
 }
 
 .gradient-border-btn {
-  @apply border-[1px] border-solid border-transparent rounded-[0.6rem] bg-gradient-to-r from-[#f2709c] via-[#ff909c] to-[#ff9472] shadow-[inset_2px_1000px_1px_#fff] p-[1rem] text-center hover:border-[1px] hover:border-solid hover:border-transparent hover:from-[#f2709c] hover:to-[#ff9472] hover:shadow-none active:scale-[0.98];
+  @apply border border-solid border-transparent rounded-[0.6rem] bg-gradient-to-r from-[#f2709c] via-[#ff909c] to-[#ff9472] shadow-[inset_2px_1000px_1px_#fff] p-[1rem] text-center hover:border hover:border-solid hover:border-transparent hover:from-[#f2709c] hover:to-[#ff9472] hover:shadow-none active:scale-[0.98];
 }
 
 .gradient-border-btn > a > .fab {
@@ -160,7 +176,7 @@ body {
 }
 
 .gradient-border-btn > span {
-  @apply my-0 mx-[6px] text-[#3d3d3d];
+  @apply my-0 mx-1.5 text-[#3d3d3d];
 }
 
 .gradient-border-btn:hover > span,
@@ -189,7 +205,7 @@ ul {
 }
 
 strong {
-  @apply font-product-black tracking-wide;
+  @apply font-worksans-medium tracking-[0.01em] !text-black-core/[0.87] !font-medium text-[1.0625rem] md:text-[1.15625rem];
 }
 
 h1 strong {
@@ -197,7 +213,7 @@ h1 strong {
 }
 
 h2 strong {
-  @apply text-[1.5rem] lg:text-[1.7rem];
+  @apply text-2xl lg:text-[1.7rem] font-worksans-semibold;
 }
 
 /* HighlightJS */
@@ -282,17 +298,29 @@ code::after {
   @apply content-none !important;
 }
 
+.prose h2 {
+  @apply font-worksans-semibold text-[#000] xl:text-[2.0625rem] !mb-4 !tracking-tight;
+}
+
+.prose i,
+.prose a span {
+  @apply font-worksans-regular text-lg;
+}
+
 .prose
   :where(code, code strong):not(:where([class~="not-prose"], blockquote code)) {
-  @apply bg-gray-200 py-0.5 px-1 rounded-[4px] font-[550] tracking-wide font-source-codepro;
+  @apply bg-gray-200 py-0.5 px-1 rounded font-[550] tracking-wide font-source-codepro;
 }
 
 .prose :where(pre code):not(:where([class~="not-prose"] *)) {
   @apply bg-transparent text-[#dbe0e0] leading-normal tracking-[-0.022em] !break-normal;
 }
 
-.prose :where(blockquote, blockquote i):not(:where([class~="not-prose"] *)) {
-  @apply not-italic text-[1.4rem] lg:text-[1.755rem] leading-[2.3rem] text-[#757575] font-normal font-inter-light;
+.prose
+  :where(blockquote, blockquote i, blockquote i strong):not(
+    :where([class~="not-prose"] *)
+  ) {
+  @apply not-italic !text-[1.4rem] lg:!text-[1.755rem] !leading-[2.3rem] !text-[#919191] !font-normal tracking-wide font-inter-extralight;
 }
 
 .prose
@@ -308,7 +336,7 @@ code::after {
 
 .category-swiper .swiper-button-next:after,
 .category-swiper .swiper-button-prev:after {
-  @apply px-7 pb-[1rem] pt-1 text-black-900 !text-[12px];
+  @apply px-7 pb-4 pt-1 text-black-900 !text-xs;
 }
 
 .category-swiper .swiper-button-prev:after {
diff --git a/assets/fonts/ProductSans-Black.woff2 b/assets/fonts/ProductSans-Black.woff2
deleted file mode 100755
index a032904f..00000000
Binary files a/assets/fonts/ProductSans-Black.woff2 and /dev/null differ
diff --git a/assets/fonts/ProductSans-Regular.woff2 b/assets/fonts/ProductSans-Regular.woff2
deleted file mode 100755
index d4bcbf2b..00000000
Binary files a/assets/fonts/ProductSans-Regular.woff2 and /dev/null differ
diff --git a/assets/fonts/WorkSans-Light.woff2 b/assets/fonts/WorkSans-Light.woff2
new file mode 100644
index 00000000..618a29ef
Binary files /dev/null and b/assets/fonts/WorkSans-Light.woff2 differ
diff --git a/assets/fonts/WorkSans-Medium.woff2 b/assets/fonts/WorkSans-Medium.woff2
new file mode 100644
index 00000000..c0a2e693
Binary files /dev/null and b/assets/fonts/WorkSans-Medium.woff2 differ
diff --git a/assets/fonts/WorkSans-Regular.woff2 b/assets/fonts/WorkSans-Regular.woff2
new file mode 100644
index 00000000..63a5b4bf
Binary files /dev/null and b/assets/fonts/WorkSans-Regular.woff2 differ
diff --git a/assets/fonts/WorkSans-SemiBold.woff2 b/assets/fonts/WorkSans-SemiBold.woff2
new file mode 100644
index 00000000..20cf6d20
Binary files /dev/null and b/assets/fonts/WorkSans-SemiBold.woff2 differ
diff --git a/components/authorDetails.js b/components/authorDetails.js
index 9a791156..d2db5148 100644
--- a/components/authorDetails.js
+++ b/components/authorDetails.js
@@ -16,23 +16,15 @@ export default function AuthorDetails({ postData }) {
             />
           </div>
           <div className="flex flex-col space-y-3 items-center">
-            <div className="text-[1.7rem] font-product-black tracking-wide text-[#000000d6]">
+            <div className="text-[1.6875rem]  font-worksans-semibold tracking-normal text-[#000000d6]">
               {postData.authorName}
             </div>
-            {postData.authorBio ? (
-              <>
-                <div className="text-[1rem] leading-snug tracking-wide text-center">
-                  {postData.authorBio}
-                </div>
-                <div className="!mt-7 text-[0.9rem] capitalize">
-                  {postData.authorRole}
-                </div>
-              </>
-            ) : (
-              <div className="text-[0.9rem] capitalize">
-                {postData.authorRole}
-              </div>
-            )}
+            <div className="text-base leading-snug tracking-normal text-center">
+              {postData.authorBio}
+            </div>
+            <div className="!mt-7 text-[0.8750rem] capitalize tracking-normal">
+              {postData.authorRole}
+            </div>
           </div>
         </div>
         <hr className="bg-gray-600 w-full py-[0.5px] !mb-3 mt-0" />
@@ -54,17 +46,17 @@ export default function AuthorDetails({ postData }) {
               postData.authorBio ? "space-y-4" : "space-y-1"
             } md:-ml-16 xl:-ml-10 2xl:-ml-16`}
           >
-            <div className="text-[1.7rem] font-product-black tracking-wide text-[#000000d6]">
+            <div className="text-[1.6875rem] font-worksans-semibold tracking-normal !text-black-core/[0.87]">
               {postData.authorName}
             </div>
             {postData.authorBio ? (
-              <div className="text-[1rem] leading-snug tracking-wide">
+              <div className="text-base leading-snug tracking-normal">
                 {postData.authorBio}
               </div>
             ) : (
               ""
             )}
-            <div className="text-[0.9rem] capitalize">
+            <div className="text-[0.8750rem] capitalize tracking-normal">
               {postData.authorRole}
             </div>
           </div>
diff --git a/components/comments/commentForm.js b/components/comments/commentForm.js
index 1efd637c..b8d96b17 100644
--- a/components/comments/commentForm.js
+++ b/components/comments/commentForm.js
@@ -55,8 +55,8 @@ export default function CommentForm({ post, onNewComment, recaptchaRef }) {
   }, [formRef]);
 
   return (
-    <div className="container py-20 tracking-wide">
-      <div className="flex items-center pb-5 font-semibold text-xl">
+    <div className="container py-20 tracking-normal">
+      <div className="flex items-center pb-5 font-worksans-semibold text-xl">
         <FontAwesomeIcon
           icon={faMessage}
           className="w-7 h-7 pr-2 text-pink-300"
@@ -98,8 +98,8 @@ export default function CommentForm({ post, onNewComment, recaptchaRef }) {
             placeholder="Your E-mail Address"
             required
           />
-          <button className="relative mt-7 rounded-[12px] border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.8rem] font-bold text-white">
-            <span className="py-[1.25rem] px-3 hoverable-text text-lg">
+          <button className="relative mt-7 rounded-xl border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.8rem] font-bold text-white">
+            <span className="py-5 px-3 hoverable-text text-lg">
               Post Comment
             </span>
           </button>
diff --git a/components/comments/index.js b/components/comments/index.js
index 6f7e34e1..baedc21a 100644
--- a/components/comments/index.js
+++ b/components/comments/index.js
@@ -56,7 +56,7 @@ export default function Comment({ post }) {
                     >
                       <div className="flex justify-between items-center">
                         <div className="flex items-center">
-                          <div className="relative w-[40px] h-[40px] mb-2 md:mb-0">
+                          <div className="relative w-10 h-10 mb-2 md:mb-0">
                             <Image
                               className="rounded-full h-full w-full object-cover absolute inset-0"
                               layout="fill"
@@ -108,7 +108,7 @@ export default function Comment({ post }) {
                                   <li className="px-5 py-5 bg-white border border-solid border-gray-300 rounded-[15px]">
                                     <div className="flex justify-between items-center">
                                       <div className="flex items-center">
-                                        <div className="relative w-[40px] h-[40px] mb-2 md:mb-0">
+                                        <div className="relative w-10 h-10 mb-2 md:mb-0">
                                           <Image
                                             className="rounded-full h-full w-full object-cover absolute inset-0"
                                             layout="fill"
diff --git a/components/cta/CTA1.js b/components/cta/CTA1.js
index 7a19949f..9b00000a 100644
--- a/components/cta/CTA1.js
+++ b/components/cta/CTA1.js
@@ -42,29 +42,29 @@ export default function CTA() {
           src={ctabg400w}
           loading="lazy"
           alt="cta-bg-image"
-          className="absolute top-[-6.5rem] sm:left-[4.5rem] md:left-[6.5rem] w-[100%] sm:w-[80%] object-content"
+          className="absolute top-[-6.5rem] sm:left-[4.5rem] md:left-[6.5rem] w-full sm:w-4/5 object-content"
         />
       </div>
       <div className="xl:container xl:flex xl:flex-row">
-        <div className="flex flex-col items-center xl:items-start xl:mb-20 xl:w-[60%] 2xl:w-[50%]">
-          <p className="text-center xl:text-left text-[1.875rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[2.5rem] md:leading-[3.75rem] lg:leading-[5.156rem] font-inter-bold text-black-core/[0.87]">
+        <div className="flex flex-col items-center xl:items-start xl:mb-20 xl:w-3/5 2xl:w-2/4">
+          <p className="text-center xl:text-left text-3xl md:text-[2.813rem] lg:text-[3.438rem] leading-10 md:leading-[3.75rem] lg:leading-[5.156rem] font-inter-bold text-black-core/[0.87]">
             Want to build a new version of your existing app or add new
             features?
           </p>
-          <p className="mt-4 text-[1rem] md:text-[1.25rem] leading-[1.5rem] md:leading-[1.875rem] font-inter-medium text-center xl:text-left text-black-core/[0.87] lg:text-black-core/[0.60]">
+          <p className="mt-4 text-base md:text-xl md:leading-[1.875rem] font-inter-medium text-center xl:text-left text-black-core/[0.87] lg:text-black-core/[0.60]">
             Not sure where to start? We also offer code and architecture
             reviews, strategic planning, and more.
           </p>
           <Link
             href={`${config.WEBSITE_URL}/contact`}
-            className="relative justify-self-center mt-6 rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-semibold text-white"
+            className="relative justify-self-center mt-6 rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-semibold text-white"
           >
-            <div className="py-[0.8rem] px-[1.5rem] text-[1.188rem] leading-[1.425rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] tracking-normal hoverable-text inline-block">
+            <div className="py-[0.8rem] px-6 text-[1.188rem] leading-[1.425rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] tracking-normal hoverable-text inline-block">
               Talk to our experts
             </div>
           </Link>
         </div>
-        <div className="hidden xl:block relative w-[53%] xl:w-[40%] 2xl:w-[50%]">
+        <div className="hidden xl:block relative w-[53%] xl:w-2/5 2xl:w-1/2">
           <Image
             src={cta800w}
             loading="lazy"
@@ -100,11 +100,11 @@ export default function CTA() {
                     className="cursor-pointer"
                   >
                     <div
-                      className={`flex flex-col items-center rounded-[16px] bg-gradient-to-r from-[#FF835B]/[0.3] to-[#F2709C]/[0.3] w-[50%] p-[20px] h-[140px] ${
+                      className={`flex flex-col items-center rounded-2xl bg-gradient-to-r from-[#FF835B]/[0.3] to-[#F2709C]/[0.3] w-1/2 p-5 h-[140px] ${
                         slide.hasStar ? "justify-between" : "justify-center"
                       }`}
                     >
-                      <span className="font-inter-bold text-[1.5rem] leading-[2.25rem]">
+                      <span className="font-inter-bold text-[1.5rem] leading-9">
                         {slide.title}
                       </span>
                       <span className="font-inter-medium text-[1.1875rem] leading-[1.78125rem] text-black-core/[0.6]">
diff --git a/components/cta/CTA2.js b/components/cta/CTA2.js
index 9afd249d..7b166a3d 100644
--- a/components/cta/CTA2.js
+++ b/components/cta/CTA2.js
@@ -115,7 +115,7 @@ export default function CTA() {
         />
       )}
 
-      <div className="mt-20 sm:mt-14 text-center gradient-text text-3xl md:text-[3rem] md:leading-[3.625rem] lg:text-[4.0625rem] lg:leading-[4.9375rem] font-inter-bold">
+      <div className="mt-20 sm:mt-14 text-center gradient-text text-3xl md:text-5xl md:leading-[3.625rem] lg:text-[4.0625rem] lg:leading-[4.9375rem] font-inter-bold">
         Say Hello!
       </div>
       <div className="container text-center">
@@ -137,7 +137,7 @@ export default function CTA() {
                   />
                   <label
                     htmlFor="username"
-                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                   >
                     Your name
                   </label>
@@ -167,7 +167,7 @@ export default function CTA() {
                   />
                   <label
                     htmlFor="email"
-                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                   >
                     Your email
                   </label>
@@ -205,7 +205,7 @@ export default function CTA() {
                   />
                   <label
                     htmlFor="phonenumber"
-                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                   >
                     Phone number
                   </label>
@@ -239,7 +239,7 @@ export default function CTA() {
                   ></textarea>
                   <label
                     htmlFor="project"
-                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-[1rem] leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                    className="absolute top-4 left-0 mb-5 z-[2] text-white/[.6] text-base leading-[1.1875rem] md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-white peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                   >
                     Project detail
                   </label>
@@ -257,13 +257,13 @@ export default function CTA() {
                 {showLoader ? (
                   <Image
                     src={loaderImage}
-                    className="w-[64px] h-[64px]"
+                    className="w-16 h-16"
                     alt="loader-image"
                   />
                 ) : (
                   <div className="relative">
                     {showErrorMessage ? (
-                      <div className="absolute -top-[2rem] sm:-top-[1.875rem] md:-top-[2.875rem] text-center -right-[4rem] sm:-right-[11rem] md:-right-[15rem] lg:-right-[18rem] xl:-right-[18rem] 2xl:-right-[20.5rem] w-[190%] sm:w-max">
+                      <div className="absolute -top-8 sm:-top-[1.875rem] md:-top-[2.875rem] text-center -right-16 sm:-right-44 md:-right-60 lg:-right-72 xl:-right-72 2xl:-right-[20.5rem] w-[190%] sm:w-max">
                         <span
                           className={`flex text-center gradient-text ${
                             errorMessage === "Invalid Recaptcha score"
@@ -279,7 +279,7 @@ export default function CTA() {
                     )}
                     <button
                       id="submit"
-                      className="relative justify-self-center rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-white font-inter-bold"
+                      className="relative justify-self-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-white font-inter-bold"
                     >
                       <span className="py-[0.6rem] px-[1.8rem] md:py-[0.8rem] text-md lg:text-xl hoverable-text inline-block">
                         Get Free Consultation
diff --git a/components/cta/CTA3.js b/components/cta/CTA3.js
index 7b021dc3..1bb53590 100644
--- a/components/cta/CTA3.js
+++ b/components/cta/CTA3.js
@@ -102,15 +102,15 @@ export default function CTA() {
       <div className="relative top-5 md:top-0.5 w-full h-auto">
         <div className="container flex flex-col md:flex-row md:space-x-6 lg:space-x-0 md:-mt-[60px] xl:px-20 3xl:px-32">
           <div className="mt-10 md:mt-40 basis-7/12 lg:basis-3/5">
-            <div className="flex flex-col items-center md:items-stretch space-y-4 md:w-[16.2rem] lg:w-[20rem] 2xl:w-[22.23rem]">
-              <div className="text-[1.2rem] lg:text-[1.5rem] 2xl:text-[1.75rem] leading-[1.75rem] lg:leading-[2rem] 2xl:leading-[2.3rem] font-poppins-regular">
+            <div className="flex flex-col items-center md:items-stretch space-y-4 md:w-[16.2rem] lg:w-80 2xl:w-[22.23rem]">
+              <div className="text-[1.2rem] lg:text-2xl 2xl:text-[1.75rem] leading-7 2xl:leading-[2.3rem] font-poppins-regular">
                 Talk to an expert
               </div>
-              <div className="md:grid grid-rows-2 justify-items-stretch text-[2.3rem] sm:text-[3rem] lg:text-[3.4rem] lg:text-[3.7rem] 2xl:text-[4.125rem] font-poppins-medium uppercase">
+              <div className="md:grid grid-rows-2 justify-items-stretch text-[2.3rem] sm:text-5xl lg:text-[3.4rem] lg:text-[3.7rem] 2xl:text-[4.125rem] font-poppins-medium uppercase">
                 <span className="mr-3 md:mr-0">get in</span>
                 <span className="md:justify-self-end">touch</span>
               </div>
-              <div className="text-center md:text-left text-[0.9rem] lg:text-[1rem] 2xl:text-[1.25rem] leading-[1.25rem] lg:leading-[1.5rem] 2xl:leading-[1.75rem] font-poppins-regular">
+              <div className="text-center md:text-left text-[0.9rem] lg:text-base 2xl:text-xl leading-5 font-poppins-regular">
                 Our team is happy to answer your questions. Fill out the form
                 and we’ll get back to you as soon as possible
               </div>
@@ -118,7 +118,7 @@ export default function CTA() {
           </div>
           <div className="relative top-14 lg:top-20 xl:top-[5.5rem] h-fit w-full bg-white cta-box-shadow text-center font-poppins-regular">
             <form onSubmit={submitForm} method="POST">
-              <div className="pt-[3rem] md:pt-[5rem] lg:pt-[6rem] pb-10 lg:pb-14 px-8">
+              <div className="pt-[3rem] md:pt-20 lg:pt-24 pb-10 lg:pb-14 px-8">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="relative md:col-span-2 md:mb-5 pt-3 lg:pt-10 text-left">
                     <input
@@ -254,17 +254,17 @@ export default function CTA() {
                   {showLoader ? (
                     <Image
                       src={loaderImage}
-                      className="w-[64px] h-[64px]"
+                      className="w-16 h-16"
                       alt="loader-image"
                     />
                   ) : (
                     <div className="relative">
                       {showErrorMessage ? (
-                        <div className="absolute -top-[2rem] sm:-top-[1.875rem] md:-top-[2.875rem] text-center -right-[4rem] sm:-right-[11rem] md:-right-[15rem] lg:-right-[18rem] xl:-right-[18rem] 2xl:-right-[20.5rem] w-[190%] sm:w-max">
+                        <div className="absolute -top-8 sm:-top-[1.875rem] md:-top-[2.875rem] text-center -right-16 sm:-right-44 md:-right-60 lg:-right-72 xl:-right-72 2xl:-right-[20.5rem] w-[190%] sm:w-max">
                           <span
                             className={`flex text-center gradient-text ${
                               errorMessage === "Invalid Recaptcha score"
-                                ? "sm:!mr-[7rem] md:!mr-[12rem] lg:!mr-[15rem] xl:!mr-[16rem] 2xl:!mr-[17rem] !text-[1.5rem]"
+                                ? "sm:!mr-[7rem] md:!mr-[12rem] lg:!mr-[15rem] xl:!mr-[16rem] 2xl:!mr-[17rem] !text-2xl"
                                 : ""
                             }`}
                           >
@@ -276,9 +276,9 @@ export default function CTA() {
                       )}
                       <button
                         id="submit"
-                        className="border-[2px] border-solid border-transparent bg-black-900 text-white hover:border-black-900 hover:bg-white hover:text-black-900 font-inter-bold"
+                        className="border-2 border-solid border-transparent bg-black-900 text-white hover:border-black-900 hover:bg-white hover:text-black-900 font-inter-bold"
                       >
-                        <span className="py-[0.6rem] px-[1rem] lg:px-[1.8rem] lg:py-[0.8rem] text-[1rem] lg:text-[1.1875rem] inline-block">
+                        <span className="py-[0.6rem] px-4 lg:px-[1.8rem] lg:py-[0.8rem] text-base lg:text-[1.1875rem] inline-block">
                           Get Free Consultation
                         </span>
                       </button>
diff --git a/components/cta/CTA4.js b/components/cta/CTA4.js
index b171fdac..1f584ed7 100644
--- a/components/cta/CTA4.js
+++ b/components/cta/CTA4.js
@@ -13,23 +13,23 @@ export default function CTA() {
 
   return (
     <section>
-      <div className="mt-[20px] lg:mt-[150px] xl:mt-[170px] 2xl:mt-[250px] 3xl:mt-[280px] bg-[#F8F8F8] font-inter-regular">
+      <div className="mt-5 lg:mt-[150px] xl:mt-[170px] 2xl:mt-[250px] 3xl:mt-[280px] bg-[#F8F8F8] font-inter-regular">
         <div className="container flex flex-col md:flex-row 3xl:w-[82.5rem]">
-          <div className="md:relative order-2 md:order-first md:w-[50%]">
+          <div className="md:relative order-2 md:order-first md:w-1/2">
             <Image
               src={cta2400}
               alt="fourth-cta-image"
-              className="w-[85%] h-[85%] sm:w-[80%] sm:h-[80%] md:w-fit md:h-fit object-contain mx-[7.5%] sm:mx-[10%] md:mx-0 -mb-[1.5rem] sm:-mb-[0.9rem] md:absolute md:right-[2.5rem] md:-top-[2.6rem] lg:right-[2.5rem] lg:-top-[2.9rem] xl:right-[1.5rem] xl:-top-[7.6rem] 2xl:right-[2.5rem] 2xl:-top-[11.5rem] 3xl:right-[3.5rem]"
+              className="w-[85%] h-[85%] sm:w-4/5 sm:h-4/5 md:w-fit md:h-fit object-contain mx-[7.5%] sm:mx-[10%] md:mx-0 -mb-6 sm:-mb-[0.9rem] md:absolute md:right-10 md:-top-[2.6rem] lg:-top-[2.9rem] xl:right-6 xl:-top-[7.6rem] 2xl:right-10 2xl:-top-[11.5rem] 3xl:right-14"
               loading="lazy"
             />
           </div>
 
-          <div className="flex md:w-[50%] py-[10px] lg:py-[40px] 2xl:py-[50px] 2xl:pl-[8.5rem]">
-            <div className="m-auto md:m-5 md:ml-auto xl:m-auto w-[80%] sm:w-[60%] md:w-full py-[40px] md:py-0">
+          <div className="flex md:w-1/2 py-2.5 lg:py-10 2xl:py-[50px] 2xl:pl-[8.5rem]">
+            <div className="m-auto md:m-5 md:ml-auto xl:m-auto w-4/5 sm:w-3/5 md:w-full py-10 md:py-0">
               <p className="text-black-core/[0.87] text-[1.5rem] leading-[1.813rem] md:text-[1.7rem] md:leading-[1.9rem] lg:text-[2.188rem] lg:leading-[2.625rem] xl:text-[3.125rem] xl:leading-[3.813rem] font-inter-bold">
                 Whether you need...
               </p>
-              <ul className="pl-0 pt-6 md:pt-4 lg:pt-6 text-[1rem] text-black-core/[0.6] leading-[1.25rem] md:text-[1.05rem] md:leading-[1.34rem] lg:text-[1.188rem] lg:leading-[1.5rem] xl:text-[1.375rem] xl:leading-[1.8125rem] font-inter-semibold">
+              <ul className="pl-0 pt-6 md:pt-4 lg:pt-6 text-black-core/[0.6] text-base leading-5 md:text-[1.05rem] md:leading-[1.34rem] lg:text-[1.188rem] lg:leading-6 xl:text-[1.375rem] xl:leading-[1.8125rem] font-inter-semibold">
                 {reasons.map((reason, index) => {
                   return (
                     <li className="flex" key={index}>
@@ -39,12 +39,12 @@ export default function CTA() {
                   );
                 })}
               </ul>
-              <div className="pt-6 md:pt-4 lg:pt-6 text-black-core/[0.6] font-inter-regular text-[0.875rem] leading-[1.125rem] md:text-[0.9rem] md:leading-[1.15rem] lg:text-[1.125rem] lg:leading-[1.375rem] xl:text-[1.375rem] xl:leading-[1.813rem]">
+              <div className="pt-6 md:pt-4 lg:pt-6 text-black-core/[0.6] font-inter-regular text-sm leading-[1.125rem] md:text-[0.9rem] md:leading-[1.15rem] lg:text-lg lg:leading-[1.375rem] xl:text-[1.375rem] xl:leading-[1.813rem]">
                 Bring us your toughest challenge and we&apos;ll show you the
                 path to a sleek solution.
               </div>
               <Link href={`${config.WEBSITE_URL}/contact`} className="">
-                <div className="flex items-center mt-5 md:mt-4 lg:mt-5 mx-auto md:mx-0 w-max rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal text-[1rem] leading-[1.1875rem] md:text-[1.09375rem] md:leading-[1.3125rem] xl:text-[1.1875rem] xl:leading-[1.4375rem] font-inter-semibold !tracking-[0] text-white active:scale-[0.98]">
+                <div className="flex items-center mt-5 md:mt-4 lg:mt-5 mx-auto md:mx-0 w-max rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal text-base leading-[1.1875rem] md:text-[1.09375rem] md:leading-[1.3125rem] xl:text-[1.1875rem] xl:leading-[1.4375rem] font-inter-semibold !tracking-[0] text-white active:scale-[0.98]">
                   <span className="py-[0.7rem] px-[1.2rem] hoverable-text inline-block">
                     Talk to our experts
                   </span>
diff --git a/components/cta/CTA5.js b/components/cta/CTA5.js
index 9af69cca..5e62e8af 100644
--- a/components/cta/CTA5.js
+++ b/components/cta/CTA5.js
@@ -8,7 +8,7 @@ export default function CTA() {
   return (
     <section>
       <div className="relative -bottom-4 md:-bottom-1 bg-black-core/[0.85] py-[50px]">
-        <div className="absolute right-0 top-1 hidden h-[140px] border-l-[20px] border-[#F2709C] md:block lg:top-[2.25rem] xl:h-[185px] 2xl:top-[4.25rem]"></div>
+        <div className="absolute right-0 top-1 hidden h-[140px] border-l-[20px] border-[#F2709C] md:block lg:top-9 xl:h-[185px] 2xl:top-[4.25rem]"></div>
         <div className="absolute bottom-[6.25rem] left-0 hidden h-[115px] border-l-[20px] border-[#FF9472] md:block"></div>
 
         <div className="container flex flex-col items-center md:flex-row md:flex-row-reverse 3xl:px-20">
@@ -28,13 +28,13 @@ export default function CTA() {
               </span>
               ogether
             </p>
-            <p className="sm:w-[385px] mt-6 text-center font-inter-regular text-[1rem] leading-[1.5rem] text-white md:text-right md:text-[1.4rem] md:leading-[2rem] md:text-white/[0.75] xl:w-[82%] xl:text-[1.75rem] xl:leading-[2.625rem] 2xl:w-[68%]">
+            <p className="sm:w-[385px] mt-6 text-center font-inter-regular text-base text-white md:text-right md:text-[1.4rem] md:leading-8 md:text-white/[0.75] xl:w-[82%] xl:text-[1.75rem] xl:leading-[2.625rem] 2xl:w-[68%]">
               Not sure where to start? We also offer code and architecture
               reviews, strategic planning, and more.
             </p>
             <Link href={`${config.WEBSITE_URL}/contact`} className="mt-10">
-              <div className="flex items-center mx-auto md:mx-0 w-max rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal  text-[1.09375rem] leading-[1.3125rem] xl:text-[1.188rem] xl:leading-[1.188rem] font-inter-semibold !tracking-[0] text-white active:scale-[0.98]">
-                <span className="py-[0.9rem] md:py-[1rem] px-[1.2rem] md:px-[1.3rem] hoverable-text inline-block">
+              <div className="flex items-center mx-auto md:mx-0 w-max rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal  text-[1.09375rem] leading-[1.3125rem] xl:text-[1.188rem] xl:leading-[1.188rem] font-inter-semibold !tracking-[0] text-white active:scale-[0.98]">
+                <span className="py-[0.9rem] md:py-4 px-[1.2rem] md:px-[1.3rem] hoverable-text inline-block">
                   Get Free Consultation
                 </span>
               </div>
@@ -44,10 +44,10 @@ export default function CTA() {
             <Image
               src={cta800}
               alt="cta-image"
-              className="mt-4 w-[85%] h-[85%] sm:w-[80%] sm:h-[80%] md:w-full md:h-full md:mt-0 mx-[7.5%] sm:mx-[10%] md:mx-0"
+              className="mt-4 w-[85%] h-[85%] sm:w-4/5 sm:h-4/5 md:w-full md:h-full md:mt-0 mx-[7.5%] sm:mx-[10%] md:mx-0"
             />
 
-            <div className="gradient-border absolute bottom-4 left-[0.5rem] h-[55px] border-l-[13px] md:hidden"></div>
+            <div className="gradient-border absolute bottom-4 left-2 h-[55px] border-l-[13px] md:hidden"></div>
           </div>
         </div>
       </div>
diff --git a/components/partials/footer.js b/components/partials/footer.js
index e6573b3c..88a04541 100644
--- a/components/partials/footer.js
+++ b/components/partials/footer.js
@@ -67,7 +67,7 @@ export default function Footer({ mixpanel }) {
                 Subscribe Here!
               </div>
               <form
-                className="flex flex-row space-x-2 m-auto mt-[1.5rem] xl:mt-8 items-center"
+                className="flex flex-row space-x-2 m-auto mt-6 xl:mt-8 items-center"
                 onSubmit={handleSubscription}
               >
                 <div className="w-56 md:w-72">
@@ -85,13 +85,13 @@ export default function Footer({ mixpanel }) {
                   />
                 </div>
 
-                <button className="hidden md:block rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-white">
-                  <div className="py-[0.63rem] px-[0.5rem] md:px-[1.1rem] text-md md:text-xl hoverable-text inline-block">
+                <button className="hidden md:block rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-white">
+                  <div className="py-[0.63rem] px-2 md:px-[1.1rem] text-md md:text-xl hoverable-text inline-block">
                     Subscribe
                   </div>
                 </button>
                 <button
-                  className="md:hidden w-[45px] h-[45px] rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff]"
+                  className="md:hidden w-[45px] h-[45px] rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff]"
                   aria-label="SubscribeBtn"
                 >
                   <div className="w-[21px] h-[21px] inline-block">
@@ -114,7 +114,7 @@ export default function Footer({ mixpanel }) {
               <div className="mt-8 xl:mt-5 text-[1.375rem] leading-[1.6875rem] md:text-[1.5rem] md:leading-[1.8125rem] lg:text-[1.75rem] lg:leading-[1.9375rem] text-white/[.87] font-inter-bold">
                 Follow us on
               </div>
-              <ul className="flex flex-wrap justify-center w-full m-auto mt-[1.5rem] xl:mt-8 pl-0 cursor-pointer list-none">
+              <ul className="flex flex-wrap justify-center w-full m-auto mt-6 xl:mt-8 pl-0 cursor-pointer list-none">
                 <li className="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] mr-1 md:mr-1.5 !rounded-full text-center cursor-pointer gradient-border-btn !border-0">
                   <Link
                     href={config.FACEBOOK_URL}
@@ -220,7 +220,7 @@ export default function Footer({ mixpanel }) {
             </div>
           </div>
 
-          <div className="mb-8 md:mb-9 text-[0.75rem] leading-[0.9375rem] md:text-[0.84375rem] md:leading-[1.03125rem] lg:text-[0.9375rem] lg:leading-[1.125rem] text-white/[.87] text-center">
+          <div className="mb-8 md:mb-9 text-xs leading-[0.9375rem] md:text-[0.84375rem] md:leading-[1.03125rem] lg:text-[0.9375rem] lg:leading-[1.125rem] text-white/[.87] text-center">
             <div className="w-3 h-3 md:w-4 md:h-4 mr-1 inline-block">
               <FontAwesomeIcon
                 icon={faCopyright}
diff --git a/components/partials/header.js b/components/partials/header.js
index 0bcca611..c4c0d3dc 100644
--- a/components/partials/header.js
+++ b/components/partials/header.js
@@ -60,9 +60,9 @@ export default function Header({ mixpanel }) {
               }`
         } header-section`}
       >
-        <nav className="py-5 md:py-[1.75rem] font-inter-medium">
+        <nav className="py-5 md:py-7 font-inter-medium">
           <div className="container flex flex-row flex-wrap justify-start items-center 3xl:px-24">
-            <div className="mr-4 py-[0.3125rem] text-[1.25rem] text-black no-underline whitespace-nowrap">
+            <div className="mr-4 py-[0.3125rem] text-xl text-black no-underline whitespace-nowrap">
               <Link href={HOST_URL}>
                 <Image
                   src={Logo}
@@ -73,7 +73,7 @@ export default function Header({ mixpanel }) {
             </div>
 
             <div className="grid grow items-center mt-2 lg:mt-0">
-              <ul className="hidden lg:flex flex-row flex-wrap items-center justify-start lg:ml-auto pl-0 text-[1rem] md:text-[1.10375rem] xl:text-[1.1875rem] leading-[1.125rem] md:leading-[1.28125rem] lg:leading-[1.4375rem]">
+              <ul className="hidden lg:flex flex-row flex-wrap items-center justify-start lg:ml-auto pl-0 text-base md:text-[1.10375rem] xl:text-[1.1875rem] leading-[1.125rem] md:leading-[1.28125rem] lg:leading-[1.4375rem]">
                 <li className="ml-0 my-2 sm:my-0">
                   <Link
                     href={`${HOST_URL}/services`}
@@ -118,9 +118,9 @@ export default function Header({ mixpanel }) {
                   <ul
                     className={`${
                       showContributionMenu
-                        ? "block absolute left-auto top-[5.5rem] flex-col space-y-6 w-max border rounded-[5px] bg-white shadow-md pb-[1.5rem]"
+                        ? "block absolute left-auto top-[5.5rem] flex-col space-y-6 w-max border rounded-[5px] bg-white shadow-md pb-6"
                         : "hidden"
-                    } ml-[-1.3rem] xl:ml-[-2rem] py-[1.5rem]`}
+                    } ml-[-1.3rem] xl:ml-[-2rem] py-6`}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
                   >
@@ -133,7 +133,7 @@ export default function Header({ mixpanel }) {
                         }}
                       >
                         Open Source
-                        <div className="absolute left-[-17px] top-[0] w-0 h-[100%] from-[#FF835B] to-[#F2709C] bg-gradient-to-r transition-all duration-300 ease group-hover:h-[100%] z-[-1] group-hover:w-[156px] group-hover:xl:w-[181px]"></div>
+                        <div className="absolute left-[-17px] top-0 w-0 h-full from-[#FF835B] to-[#F2709C] bg-gradient-to-r transition-all duration-300 ease group-hover:h-full z-[-1] group-hover:w-[156px] group-hover:xl:w-[181px]"></div>
                       </Link>
                     </li>
 
@@ -147,7 +147,7 @@ export default function Header({ mixpanel }) {
                         target="_blank"
                       >
                         Blog
-                        <div className="absolute left-[-17px] top-[0] w-0  h-[100%] from-[#FF835B] to-[#F2709C] bg-gradient-to-r transition-all duration-300 ease   group-hover:h-[100%] z-[-1] group-hover:w-[156px] group-hover:xl:w-[181px]"></div>{" "}
+                        <div className="absolute left-[-17px] top-0 w-0  h-full from-[#FF835B] to-[#F2709C] bg-gradient-to-r transition-all duration-300 ease   group-hover:h-full z-[-1] group-hover:w-[156px] group-hover:xl:w-[181px]"></div>{" "}
                       </Link>
                     </li>
                     <li className="ml-0 my-2 sm:my-0 relative">
@@ -160,7 +160,7 @@ export default function Header({ mixpanel }) {
                       >
                         Resources
                         <div
-                          className="absolute left-[-17px] top-[0] w-0  h-[100%] from-[#FF835B] to-[#F2709C] bg-gradient-to-r transition-all duration-300 ease   group-hover:h-[100%] z-[-1] ${
+                          className="absolute left-[-17px] top-0 w-0  h-full from-[#FF835B] to-[#F2709C] bg-gradient-to-r transition-all duration-300 ease   group-hover:h-full z-[-1] ${
                            group-hover:w-[156px] group-hover:xl:w-[181px]"
                         ></div>{" "}
                       </Link>
@@ -203,7 +203,7 @@ export default function Header({ mixpanel }) {
                 <li className="order-last ml-0 my-2 sm:my-0 p-0">
                   <Link
                     href={`${HOST_URL}/contact`}
-                    className={`relative mb-0 mr-3.5 xl:mr-[25px] rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff835b] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.75rem] font-inter-bold text-white ${
+                    className={`relative mb-0 mr-3.5 xl:mr-[25px] rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff835b] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.75rem] font-inter-bold text-white ${
                       router.pathname == `${HOST_URL}/contact`
                         ? "bg-clip-border gradient-text"
                         : ""
@@ -212,7 +212,7 @@ export default function Header({ mixpanel }) {
                       handleMenuClick("tap_header_cta");
                     }}
                   >
-                    <span className="py-[1rem] px-[0.7rem] xl:px-[1.05rem] hoverable-text inline-block ">
+                    <span className="py-4 px-[0.7rem] xl:px-[1.05rem] hoverable-text inline-block ">
                       Get Free Consultation
                     </span>
                   </Link>
@@ -234,7 +234,7 @@ export default function Header({ mixpanel }) {
               >
                 <div className="sticky top-0 w-full py-3">
                   <div className="flex justify-between items-center">
-                    <div className="text-[1.25rem] text-black no-undurline whitespace-nowrap">
+                    <div className="text-xl text-black no-undurline whitespace-nowrap">
                       <Link href={HOST_URL}>
                         <Image
                           src={Logo}
@@ -255,7 +255,7 @@ export default function Header({ mixpanel }) {
                   </div>
                 </div>
 
-                <ul className="flex flex-col justify-start h-[50%] sm:h-[45%] mt-5 text-[1rem] text-[1.09375rem] leading-[1.125rem] overflow-y-scroll">
+                <ul className="flex flex-col justify-start h-1/2 sm:h-[45%] mt-5 text-base overflow-y-scroll">
                   <li className="my-5">
                     <Link
                       href={`${HOST_URL}/services`}
@@ -281,13 +281,12 @@ export default function Header({ mixpanel }) {
                   </li>
 
                   <li className="my-5">
-                    <Link
-                      href={``}
+                    <span
                       className="relative mr-3.5 xl:mr-[30px] after:absolute after:top-[29px] after:bottom-0 after:left-0 after:w-full after:h-[3px] after:bg-gradient-to-r from-[#f2709c] to-[#ff9472] hoverable-text hover:bg-gradient-to-r after:origin-bottom-left after:duration-300 after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left"
                       onClick={() => setShowContributionMenu((prev) => !prev)}
                     >
                       Contribution
-                    </Link>
+                    </span>
                     <ul
                       className={`flex-col space-y-6 ${
                         showContributionMenu
@@ -362,12 +361,12 @@ export default function Header({ mixpanel }) {
                   <div className="grid p-3 pb-5">
                     <Link
                       href={`${HOST_URL}/contact`}
-                      className="relative justify-self-center rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-bold text-white "
+                      className="relative justify-self-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-bold text-white "
                       onClick={() => {
                         handleMenuClick("tap_header_cta");
                       }}
                     >
-                      <div className="py-[0.8rem] px-[1.05rem] sm:px-[2rem] text-lg hoverable-text inline-block">
+                      <div className="py-[0.8rem] px-[1.05rem] sm:px-8 text-lg hoverable-text inline-block">
                         Get Free Consultation
                       </div>
                     </Link>
diff --git a/components/posts/postsList.js b/components/posts/postsList.js
index 5a4e716f..d2bfb579 100644
--- a/components/posts/postsList.js
+++ b/components/posts/postsList.js
@@ -32,24 +32,24 @@ export default function PostsList({ postData, mixpanel }) {
             key={i}
           >
             <Link href={"/" + post.slug}>
-              <div className="flex flex-row space-x-2 items-center text-[1rem] md:text-[1.03rem] leading-5 tracking-wide capitalize">
+              <div className="flex flex-row space-x-2 items-center text-base md:text-base leading-5 tracking-normal capitalize">
                 <div className="relative w-[30px] md:w-[31px] h-[30px] max-w-full max-h-full overflow-hidden">
                   <Image
                     width={30}
                     height={30}
-                    className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
+                    className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                     src={post.authorImage}
                     alt={post.authorAltText}
                   />
                 </div>
-                <span className="font-medium">{post.authorName}</span>
+                <span className="font-inter-medium">{post.authorName}</span>
                 <span className="after:content-['\00B7']"></span>
                 <span className="text-gray-600">{post.published_on}</span>
               </div>
-              <div className="grid grid-cols-3 gap-10 md:gap-12 xl:gap-16 mt-4">
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-10 md:gap-12 xl:gap-16 mt-4">
                 <div className="col-span-2">
                   <div
-                    className="mb-2 lg:mb-3.5 text-[1.2rem] md:text-[1.4rem] xl:text-[1.7rem] font-semibold leading-7 md:leading-tight tracking-wide line-clamp-2 lg:line-clamp-4"
+                    className="mb-2 lg:mb-3.5 text-[1.1875rem] md:text-[1.40625rem] xl:text-[1.625rem] leading-7 md:leading-snug tracking-none line-clamp-2 lg:line-clamp-4 font-inter-semibold"
                     onClick={() => {
                       mixpanel.track("tap_blog_title", {
                         Title: post.title,
@@ -58,28 +58,24 @@ export default function PostsList({ postData, mixpanel }) {
                   >
                     {post.title}
                   </div>
-                  <div className="mb-3 text-gray-600 text-[1rem] md:text-[1.06rem] xl:text-[1.12rem] leading-6 md:leading-7 tracking-wide line-clamp-1 md:line-clamp-2 xl:line-clamp-3">
+                  <div className="mb-3 text-gray-600 text-base md:text-[1.03125rem] xl:text-[1.0625rem] md:leading-7 tracking-wide line-clamp-2 xl:line-clamp-3">
                     {post.summary}
                   </div>
                 </div>
                 <div
-                  className={`h-auto max-w-xs ${
+                  className={`hidden md:block relative md:mt-[-20px] xl:mt-[-11px] ${
                     post.image.data == null
-                      ? "h-[6.125rem] md:h-[8.125rem] lg:h-[8.0831rem] xl:h-[8.75rem] 2xl:h-[10.5em] bg-black-900"
-                      : "aspect-w-2 lg:aspect-h-1 h-[6.125rem] md:h-[8.125rem] border border-1"
-                  }`}
+                      ? "md:h-[8.125rem] lg:h-[8.0831rem] xl:h-[8.75rem] 2xl:h-[10.5em] bg-black-900"
+                      : "md:w-auto h-[8.125rem] md:h-[11.5rem]"
+                  } max-w-xs max-h-full overflow-hidden`}
                 >
                   <Image
-                    width={100}
-                    height={100}
+                    width={300}
+                    height={300}
                     src={post.image_url || ""}
                     alt={post.alternativeText || ""}
-                    loading="eager"
-                    className={`${
-                      post.image.data == null
-                        ? "w-auto h-4/5 mx-auto my-[7%] lg:my-[5%]"
-                        : "w-full h-full"
-                    } object-cover`}
+                    loading="lazy"
+                    className={`absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] border object-cover`}
                   />
                 </div>
               </div>
@@ -87,7 +83,7 @@ export default function PostsList({ postData, mixpanel }) {
 
             {slug != null ? (
               <>
-                <div className="flex flex-row flex-wrap space-x-2 items-center mb-10 md:mb-14 w-[60%] ">
+                <div className="flex flex-row flex-wrap space-x-2 items-center mb-10 md:mb-14 w-full text-sm md:text-[0.9375rem] xl:text-base">
                   <Link
                     href={"/tag/" + slug}
                     className="my-1 rounded-full bg-[#f2f2f2] px-2.5 py-1 font-medium no-underline capitalize"
@@ -100,13 +96,13 @@ export default function PostsList({ postData, mixpanel }) {
                 </div>
               </>
             ) : (
-              <div className="flex flex-row flex-wrap mb-10">
+              <div className="flex flex-row flex-wrap mb-10 mt-2 text-sm md:text-[0.9375rem] xl:text-base">
                 {post.tags.map((tag) => {
                   return (
-                    <div className="my-4 mr-2" key={tag.id}>
+                    <div className="my-2.5 mr-2" key={tag.id}>
                       <Link
                         href={"/tag/" + tag.slug}
-                        className="my-1 rounded-full bg-[#f2f2f2] px-3 py-1.5 font-medium no-underline capitalize"
+                        className="my-1 rounded-full bg-[#f2f2f2] px-2 py-1.5 font-medium no-underline capitalize"
                       >
                         {tag.name}
                       </Link>
diff --git a/components/posts/recommandedPosts.js b/components/posts/recommandedPosts.js
index 34c3f2a6..d2cc0f8b 100644
--- a/components/posts/recommandedPosts.js
+++ b/components/posts/recommandedPosts.js
@@ -10,7 +10,7 @@ export default function RecommandedPosts({ postData }) {
 
   return (
     <>
-      <span className="text-[1.7rem] lg:text-[2rem] xl:text-[1.6rem] font-semibold tracking-wide capitalize">
+      <span className="text-[1.6875rem] lg:text-[2rem] xl:text-[1.5625rem] capitalize font-inter-medium">
         Recommended for you
       </span>
       <div className="mt-8">
@@ -28,21 +28,23 @@ export default function RecommandedPosts({ postData }) {
               <Link href={"/" + post.slug} key={i}>
                 <div className="grid grid-cols-3 xl:grid-cols-2 gap-5 xl:gap-2 2xl:gap-5 items-end mb-10 xl:mb-6 2xl:mb-8">
                   <div className="flex flex-col col-span-2 space-y-2">
-                    <div className="flex flex-row space-x-2 items-center text-[0.8rem] md:text-[0.9rem] xl:text-[0.8rem] tracking-wider capitalize">
-                      <div className="relative w-[24px] h-[24px] md:w-[30px] md:h-[30px] xl:w-[24px] xl:h-[24px] max-w-full max-h-full overflow-hidden">
+                    <div className="flex flex-row space-x-2 items-center text-[0.8125rem] md:text-[0.875rem] xl:text-[0.8125rem] capitalize">
+                      <div className="relative w-6 h-6 md:w-[30px] md:h-[30px] xl:w-6 xl:h-6 max-w-full max-h-full overflow-hidden">
                         <Image
                           width={30}
                           height={30}
-                          className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
+                          className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                           src={post.authorImage}
                           alt={post.authorAltText}
                         />
                       </div>
-                      <span className="font-medium">{post.authorName}</span>
+                      <span className="font-inter-medium tracking-wide">
+                        {post.authorName}
+                      </span>
                     </div>
 
                     <div
-                      className="text-[1rem] sm:text-[1.1rem] md:text-[1.25rem] xl:text-[1rem] font-bold leading-[1.27rem] md:leading-[1.7rem] xl:leading-5 tracking-[0.06rem] xl:line-clamp-3"
+                      className="text-base sm:text-[1.0625rem] md:text-xl xl:text-[1rem] sm:leading-[1.45rem] md:leading-[1.7rem] xl:leading-[1.35rem] xl:line-clamp-3 text-black-core/[0.87] font-inter-medium"
                       onClick={() => {
                         mixpanel.track("tap_blog_title", {
                           Title: post.title,
@@ -51,18 +53,16 @@ export default function RecommandedPosts({ postData }) {
                     >
                       {post.title}
                     </div>
-                    <div className="xl:hidden text-gray-600 text-[1rem] md:text-[1.06rem] leading-6 md:leading-7 tracking-wide">
-                      <span className="line-clamp-1 lg:line-clamp-2">
-                        {post.summary}
-                      </span>
+                    <div className="xl:hidden text-gray-600 text-sm md:text-base md:leading-7 !tracking-wide">
+                      <span className="line-clamp-2">{post.summary}</span>
                     </div>
-                    <div className="hidden xl:block text-gray-600 text-[0.9rem] tracking-wider">
+                    <div className="hidden xl:block text-gray-600 text-[0.875rem] !tracking-wide">
                       <span>{post.readingTime} min read | </span>
                       <span>Published on {post.published_on}</span>
                     </div>
                   </div>
                   <div
-                    className={`xl:hidden mb-1.5 xl:mt-2 max-w-xs xl:h-[4rem] ${
+                    className={`xl:hidden mb-1.5 xl:mt-2 max-w-xs xl:h-16 ${
                       post.image.data == null
                         ? "h-[5.084rem] md:h-[6.96rem] lg:h-[8.9rem] bg-black-900"
                         : "aspect-w-2 md:aspect-h-1 h-[5.084rem] border border-1"
diff --git a/pages/404.js b/pages/404.js
index 5db009ff..a503ee00 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -19,12 +19,12 @@ export default function Custom404() {
           />
           <Image className="h-24" src={lastErrorLetter} alt="404" />
         </div>
-        <div className="mt-[2rem] text-center text-[1.4rem] leading-8">
+        <div className="mt-8 text-center text-[1.4rem] leading-8">
           The page you’re looking for was moved, renamed or might never existed.
         </div>
         <div className="hover:text-[#fff]">
           <Link
-            className="gradient-border-btn hover:text-[#fff] rounded-[0.6rem] p-[1rem] m-[5px] text-center border-[1px] border-solid border-transparent from-[#ff9472] via-[#ff909c] to-[#f2709c] bg-gradient-to-r shadow-[inset_2px_1000px_1px_#fff] active:scale-[0.98]  my-16 flex flex-row items-center"
+            className="gradient-border-btn hover:text-[#fff] rounded-[0.6rem] p-[1rem] m-[5px] text-center border border-solid border-transparent from-[#ff9472] via-[#ff909c] to-[#f2709c] bg-gradient-to-r shadow-[inset_2px_1000px_1px_#fff] active:scale-[0.98]  my-16 flex flex-row items-center"
             href="/"
           >
             <FontAwesomeIcon
@@ -32,7 +32,7 @@ export default function Custom404() {
               className="w-6 h-6 fa text-[#f2709c] text-[2.1rem] mr-[5px] "
               id="leftArrow"
             />
-            <span className="text-center font-bold text-[1.1rem] my-0 mx-[6px] text-[#3d3d3d]  ">
+            <span className="text-center font-bold text-[1.1rem] my-0 mx-1.5 text-[#3d3d3d]  ">
               Back to Home page
             </span>
           </Link>
diff --git a/pages/[slug].js b/pages/[slug].js
index a037464f..d69c91e8 100644
--- a/pages/[slug].js
+++ b/pages/[slug].js
@@ -113,16 +113,12 @@ export default function Post({ postData, status, posts, mixpanel }) {
     status = config.NOT_FOUND;
   }
 
-  const tagsString = post?.tags
-    .map((tag) => {
-      return tag.name;
-    })
-    .join(", ");
-
-  const blogContent = post?.content.replace(
-    /<img/g,
-    '<img class="mx-auto aspect-w-2 sm:object-cover" style="width:min-content;height:min-content"',
-  );
+  const blogContent = post?.content
+    .replace(
+      /<img/g,
+      '<img class="mx-auto aspect-w-2 sm:object-cover" style="width:min-content;height:min-content"',
+    )
+    .replace(/color:rgb\(14,16,26\);/g, "");
 
   // table of contents formation
   const indexContent = post?.toc?.replace(
@@ -134,7 +130,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
         "text-ellipsis hover:bg-gradient-to-r from-pink-300 to-orange-300 hover:text-transparent hover:bg-clip-text";
       if (href === activeId) {
         classes +=
-          " relative bg-gradient-to-r bg-clip-text text-transparent after:absolute after:left-0 after:bottom-0 after:w-full after:h-[1px] after:bg-gradient-to-r";
+          " relative bg-gradient-to-r bg-clip-text text-transparent after:absolute after:left-0 after:bottom-0 after:w-full after:h-px after:bg-gradient-to-r";
       } else if (match2 && match2[1]) {
         firstHeadingId = match2[1].replace("#", "");
       }
@@ -271,7 +267,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
               <div key={post.id} className="flex flex-col space-y-20">
                 {/* Header */}
                 <div className="grid grid-flow-row xl:grid-flow-col gap-10 xl:gap-8 w-90 h-90 rounded-3xl md:bg-[#14161E] md:py-20 md:px-10 xl:py-14 xl:px-8 ">
-                  <div className="md:container w-full xl:w-[35rem] 2xl:w-[42rem] h-auto sm:h-[18rem] md:h-[21rem] lg:h-[30rem] xl:h-[19rem] 2xl:h-[23rem]">
+                  <div className="md:container w-full xl:w-[35rem] 2xl:w-[42rem] h-auto sm:h-72 md:h-[21rem] lg:h-[30rem] xl:h-[19rem] 2xl:h-[23rem]">
                     <Image
                       width={200}
                       height={200}
@@ -290,49 +286,36 @@ export default function Post({ postData, status, posts, mixpanel }) {
                     />
                   </div>
 
-                  <div className="flex flex-col space-y-5 md:text-white ">
-                    <h1 className="text-[2.20rem] lg:text-[2.50rem] xl:text-[2.80rem] font-normal leading-10 lg:leading-tight tracking-wide">
-                      {post.title}
-                    </h1>
-                    <div className="flex flex-row items-center space-x-4 text-[1rem] leading-6 tracking-wide">
-                      <div className="w-5 h-5">
-                        <FontAwesomeIcon
-                          icon={faClock}
-                          className="w-full h-full text-sm"
-                        />
-                      </div>
-                      <div>
-                        <span>{published_on}</span> ·{" "}
-                        <span> {post.readingTime} min read</span>
-                        {post.publishedAt == null ? (
-                          <>
-                            <span className="after:content-['\00B7'] after:mx-1"></span>
-                            <span className="text-green-600 capitalize">
-                              draft
-                            </span>
-                          </>
-                        ) : (
-                          ""
-                        )}
+                  <div className="flex flex-col justify-between space-y-5 md:text-white">
+                    <div className="flex flex-col space-y-5">
+                      <h1 className="text-[2.20rem] lg:text-[2.50rem] xl:text-[2.6875rem] font-normal leading-10 lg:leading-tight tracking-none">
+                        {post.title}
+                      </h1>
+                      <div className="md:text-[#ffffffdb] text-base md:text-[1.09rem] xl:text-[1.125rem] md:leading-7 tracking-wide">
+                        {post.summary}
                       </div>
-                    </div>
-                    {tagsString ? (
-                      <div className="flex flex-row 3xl:items-center space-x-3 text-[1rem] leading-6 tracking-wide">
-                        <div className="sm:basis-6 w-5 h-5 mt-1.5 sm:mt-0.5 xl:mt-1.5 3xl:mt-0">
+                      <div className="flex flex-row items-center space-x-4 text-base tracking-wide md:text-[#ffffffa3]">
+                        <div className="w-5 h-5">
                           <FontAwesomeIcon
-                            icon={faTags}
+                            icon={faClock}
                             className="w-full h-full text-sm"
                           />
                         </div>
-                        <div className="basis-11/12 capitalize">
-                          {tagsString}
+                        <div>
+                          <span>{published_on}</span> ·{" "}
+                          <span> {post.readingTime} min read</span>
+                          {post.publishedAt == null ? (
+                            <>
+                              <span className="after:content-['\00B7'] after:mx-1"></span>
+                              <span className="text-green-600 capitalize">
+                                draft
+                              </span>
+                            </>
+                          ) : (
+                            ""
+                          )}
                         </div>
                       </div>
-                    ) : (
-                      ""
-                    )}
-                    <div className="text-[1rem] md:text-[1.09rem] xl:text-[1.13rem] leading-6 md:leading-7 tracking-wide">
-                      {post.summary}
                     </div>
                     <div className="grid grid-cols-2 items-center text-sm">
                       <div className="flex flex-row items-center space-x-4">
@@ -340,12 +323,12 @@ export default function Post({ postData, status, posts, mixpanel }) {
                           <Image
                             width={45}
                             height={45}
-                            className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
+                            className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                             src={post.authorImage}
                             alt={post.authorAltText}
                           />
                         </div>
-                        <div className="text-[1rem] md:text-[1.09rem] xl:text-[1.13rem] leading-5 tracking-wide">
+                        <div className="text-base md:text-[1.09rem] xl:text-[1.125rem] tracking-wide">
                           {post.authorName}
                         </div>
                       </div>
@@ -361,10 +344,10 @@ export default function Post({ postData, status, posts, mixpanel }) {
                           />
                         </div>
 
-                        <div className="hidden lg:flex flex-row space-x-4 mr-4">
+                        <div className="hidden lg:flex flex-row space-x-4 mr-4 text-gray-400">
                           <FontAwesomeIcon
                             icon={faFacebook}
-                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer"
+                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer hover:text-white"
                             onClick={() => {
                               mixpanel.track("tap_share_facebook");
                               window.open(
@@ -379,7 +362,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                           />
                           <FontAwesomeIcon
                             icon={faLinkedinIn}
-                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer"
+                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer hover:text-white"
                             onClick={() => {
                               mixpanel.track("tap_share_linkedin");
                               window.open(
@@ -394,7 +377,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                           />
                           <FontAwesomeIcon
                             icon={faTwitter}
-                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer"
+                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer hover:text-white"
                             onClick={() => {
                               mixpanel.track("tap_share_twitter");
                               window.open(
@@ -411,7 +394,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                           />
                           <FontAwesomeIcon
                             icon={faReddit}
-                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer"
+                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer hover:text-white"
                             onClick={() => {
                               mixpanel.track("tap_share_reddit");
                               window.open(
@@ -426,7 +409,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                           />
                           <FontAwesomeIcon
                             icon={faLink}
-                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer"
+                            className="w-7 h-7 sm:w-6 sm:h-6 hover:cursor-pointer hover:text-white"
                             onClick={() => {
                               copyLink();
                             }}
@@ -443,19 +426,19 @@ export default function Post({ postData, status, posts, mixpanel }) {
                     relatedPosts.length != 0
                       ? "xl:space-x-6 2xl:space-x-8 3xl:space-x-12 xl:mx-0"
                       : "xl:space-x-10 2xl:space-x-20 xl:mx-8 2xl:mx-20 3xl:mx-32"
-                  }  mx-2 lg:mx-24 rounded-3xl text-[1.125rem]`}
+                  }  mx-2 lg:mx-24 rounded-3xl text-lg`}
                 >
-                  <div className="relative w-full xl:w-[45%]">
+                  <div className="relative w-full xl:w-[45%] tracking-tight">
                     <div className="xl:sticky top-[7.5rem] flex flex-col">
                       {indexContent != null ? (
                         <div className="w-full h-fit border border-1 border-black-900 rounded-[12px]">
                           <div className="rounded-t-[12px] bg-gray-100 py-5 pl-4">
                             Table of contents
                           </div>
-                          <div className="pl-5 pr-6 lg:pl-4 lg:pr-4 2xl:pl-5 2xl:pr-6 tracking-[0.02em] leading-relaxed">
-                            <div className="mt-4 text-[1.125rem] text-[#374151] list-none ">
+                          <div className="pl-5 pr-6 lg:pl-4 lg:pr-4 2xl:pl-5 2xl:pr-6 leading-relaxed">
+                            <div className="mt-4 text-[1.0625rem] list-none ">
                               <div
-                                className="my-3"
+                                className="my-3 !tracking-normal !text-black-core/[0.87] font-worksans-light"
                                 onClick={handleClick}
                                 dangerouslySetInnerHTML={{
                                   __html: indexContent,
@@ -471,21 +454,22 @@ export default function Post({ postData, status, posts, mixpanel }) {
                   </div>
 
                   {/* main article */}
-                  <div className="prose lg:prose-lg xl:w-full 2xl:w-auto">
+                  <div className="prose lg:prose-lg xl:w-full 2xl:w-auto !font-worksans-regular">
                     <div
                       ref={contentRef}
                       dangerouslySetInnerHTML={{
                         __html: blogContent,
                       }}
+                      className="!tracking-wide text-black-core/[0.87] font-worksans-light"
                     ></div>
-                    <div className="flex flex-row flex-wrap mt-16">
+                    <div className="flex flex-row flex-wrap mt-11">
                       {post.tags
                         ? post.tags.map((tag) => {
                             return (
                               <div className="my-4 mr-4" key={tag.id}>
                                 <Link
                                   href={"/tag/" + tag.slug}
-                                  className="rounded-full bg-[#f2f2f2] shadow-[4px_4px_4px_rgba(0,0,0,0.19)] px-6 py-2 no-underline capitalize"
+                                  className="rounded-full bg-[#f2f2f2] shadow-[4px_4px_4px_rgba(0,0,0,0.19)] px-6 py-2 no-underline capitalize tracking-tight"
                                   onClick={() => {
                                     mixpanel.track(
                                       "tap_tag_" + tag.slug.replace("-", "_"),
@@ -504,7 +488,7 @@ export default function Post({ postData, status, posts, mixpanel }) {
                   {/* Recommended Posts Section Desktop View */}
 
                   {relatedPosts.length != 0 ? (
-                    <div className="relative w-[40%]">
+                    <div className="relative w-2/5">
                       <div className="xl:sticky top-28">
                         <div className="hidden xl:block w-full h-fit">
                           <RecommandedPosts
diff --git a/pages/featured/index.js b/pages/featured/index.js
index d08587f6..337d2b05 100644
--- a/pages/featured/index.js
+++ b/pages/featured/index.js
@@ -48,7 +48,7 @@ export default function Post({ featurePosts, status, mixpanel }) {
           <></>
         ) : (
           <div className="md:mx-8 xl:mx-20 3xl:px-24">
-            <h1 className="my-6 md:my-10 text-[1.5rem] md:text-[1.8rem] xl:text-[2.2rem] font-semibold leading-7 tracking-wide capitalize">
+            <h1 className="my-6 md:my-10 text-[1.5rem] md:text-[1.875rem] xl:text-[2.25rem] leading-7 tracking-none capitalize font-inter-semibold">
               Featured Blogs
             </h1>
 
diff --git a/pages/index.js b/pages/index.js
index 3e969418..ef11a481 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -124,7 +124,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
               <div className="w-20 md:w-1/5 ">
                 <hr className="border-1 border-[#ff9472]" />
               </div>
-              <div className="text-[1.5rem] md:text-[1.60rem] xl:text-[1.67rem] text-white font-semibold leading-tight md:leading-snug text-left tracking-wide">
+              <div className="text-[1.5rem] md:text-[1.60rem] xl:text-[1.67rem] text-white font-semibold leading-tight md:leading-snug text-left tracking-normal">
                 On a mission to help you become a better{" "}
                 <span className="text-[#ff9472]">Software Engineer</span>.
                 Sharing knowlegde on{" "}
@@ -193,7 +193,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
             {config.SHOW_SEARCH_POSTS ? (
               <div className="flex flex-row items-center 2xl:basis-3/12 w-80 h-12 rounded-[10px] !bg-gray-100 pl-3">
                 <span>
-                  <i className="rounded-full text-gray-500 cursor-pointer">
+                  <i className="rounded-full text-gray-600 cursor-pointer">
                     <FontAwesomeIcon
                       icon={faMagnifyingGlass}
                       className="w-[1.1rem] h-5 pr-1 text-sm"
@@ -230,7 +230,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
             {/* Featured Posts Section */}
             {featurePosts.length != 0 ? (
               <>
-                <span className="text-[2.5rem] font-semibold tracking-wide">
+                <span className="text-[2.375rem] tracking-none font-inter-bold">
                   Featured
                 </span>
                 <div className="grid gap-10 md:gap-5 lg:gap-10 md:grid-cols-3 mt-8">
@@ -266,9 +266,9 @@ export default function Home({ posts, status, categories, mixpanel }) {
                               />
                             </Link>
                           </div>
-                          <div className="items-center text-[0.875rem] lg:text-[1.125rem] text-gray-500">
+                          <div className="items-center text-sm lg:text-base text-gray-600">
                             <Link href={"/" + featurePost.slug}>
-                              <div className="flex flex-row justify-between text-[0.922rem] leading-5 tracking-wide">
+                              <div className="flex flex-row justify-between text-sm tracking-wide">
                                 <div>
                                   <span>{featurePost.published_on}</span>
                                   <span className="hidden lg:inline-block after:content-['\00B7'] after:mx-1"></span>
@@ -281,8 +281,8 @@ export default function Home({ posts, status, categories, mixpanel }) {
                                 </span>
                               </div>
                               <div
-                                className="my-2 text-[1.375rem] font-semibold leading-7 tracking-wide text-[#000000d6] hover:underline underline-offset-4 transition-all hover:scale-[0.96]
-                        lg:text-[1.5rem] lg:leading-8"
+                                className="my-2 text-[1.3125rem] leading-7 sm:text-[1.375rem] sm:leading-[1.875rem] lg:text-[1.4375rem] lg:leading-8 tracking-none text-black-core/[0.87] hover:underline underline-offset-4 transition-all hover:scale-[0.96]
+                         font-inter-semibold"
                                 onClick={() => {
                                   mixpanel.track("tap_blog_title", {
                                     Title: featurePost.title,
@@ -302,9 +302,9 @@ export default function Home({ posts, status, categories, mixpanel }) {
                   <div className="flex justify-end mt-10">
                     <Link
                       href="/featured"
-                      className="relative rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.5rem] font-bold text-white"
+                      className="relative rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-2 font-inter-semibold text-white"
                     >
-                      <span className="py-[1rem] px-[1.05rem] tracking-wide hoverable-text">
+                      <span className="py-4 px-[1.05rem] tracking-none hoverable-text">
                         Read More Featured
                       </span>
                     </Link>
@@ -313,7 +313,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                   ""
                 )}
                 <hr className="my-10" />
-                <span className="text-[2.5rem] font-semibold tracking-wide">
+                <span className="text-[2.375rem] tracking-none font-inter-bold">
                   Blogs
                 </span>
               </>
@@ -375,10 +375,10 @@ export default function Home({ posts, status, categories, mixpanel }) {
                       }`}
                     >
                       <div
-                        className={`text-[1.375rem] font-semibold leading-7 tracking-wide text-[#000000d6] hover:underline underline-offset-4 transition-all hover:scale-[0.96] ${
+                        className={`text-[1.3125rem] leading-7 sm:text-[1.375rem] sm:leading-[1.875rem] tracking-none text-black-core/[0.87] hover:underline underline-offset-4 transition-all hover:scale-[0.96] font-inter-semibold ${
                           i === 0 && count % 3 === 1
-                            ? "md:text-[1.5rem] lg:text-[1.875rem] md:font-bold md:leading-8 lg:leading-10"
-                            : "lg:text-[1.5rem] lg:leading-8"
+                            ? "md:text-2xl lg:text-3xl md:font-bold lg:leading-10"
+                            : "lg:text-[1.4375rem] lg:leading-8"
                         }`}
                       >
                         <Link
@@ -392,18 +392,18 @@ export default function Home({ posts, status, categories, mixpanel }) {
                           {post.title}
                         </Link>
                       </div>
-                      <div className="text-[1.0625rem] md:text-[1.125rem] lg:text-[1.13rem] lg:leading-7 tracking-wide text-gray-500">
+                      <div className="text-[1.0625rem] md:text-lg lg:text-[1.125rem] lg:leading-7 tracking-wide text-gray-600">
                         <Link href={"/" + post.slug}>
                           <p className="line-clamp-3">{post.summary}</p>
                         </Link>
                       </div>
-                      <div className="flex flex-row items-center pt-3 text-[0.875rem] lg:text-[1.125rem] text-gray-500">
-                        <div className="relative w-[40px] md:w-[41px] h-[40px] max-w-full max-h-full overflow-hidden">
+                      <div className="flex flex-row items-center pt-3 text-sm lg:text-lg text-gray-600">
+                        <div className="relative w-10 md:w-[41px] h-10 max-w-full max-h-full overflow-hidden">
                           <Link href={"/" + post.slug}>
                             <Image
                               width={40}
                               height={40}
-                              className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
+                              className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                               src={post.authorImage}
                               alt={post.authorAltText}
                               loading="lazy"
@@ -411,7 +411,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                           </Link>
                         </div>
                         <Link href={"/" + post.slug}>
-                          <div className="pl-3 text-[0.875rem] md:text-[0.922rem] leading-5 tracking-wide">
+                          <div className="pl-3 text-sm tracking-wide">
                             <span className="text-green-700 capitalize">
                               {post.authorName}
                             </span>
diff --git a/pages/resources.js b/pages/resources.js
index 3e969418..3d73b4e9 100644
--- a/pages/resources.js
+++ b/pages/resources.js
@@ -124,7 +124,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
               <div className="w-20 md:w-1/5 ">
                 <hr className="border-1 border-[#ff9472]" />
               </div>
-              <div className="text-[1.5rem] md:text-[1.60rem] xl:text-[1.67rem] text-white font-semibold leading-tight md:leading-snug text-left tracking-wide">
+              <div className="text-[1.5rem] md:text-[1.60rem] xl:text-[1.67rem] text-white font-semibold leading-tight md:leading-snug text-left tracking-normal">
                 On a mission to help you become a better{" "}
                 <span className="text-[#ff9472]">Software Engineer</span>.
                 Sharing knowlegde on{" "}
@@ -193,7 +193,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
             {config.SHOW_SEARCH_POSTS ? (
               <div className="flex flex-row items-center 2xl:basis-3/12 w-80 h-12 rounded-[10px] !bg-gray-100 pl-3">
                 <span>
-                  <i className="rounded-full text-gray-500 cursor-pointer">
+                  <i className="rounded-full text-gray-600 cursor-pointer">
                     <FontAwesomeIcon
                       icon={faMagnifyingGlass}
                       className="w-[1.1rem] h-5 pr-1 text-sm"
@@ -230,7 +230,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
             {/* Featured Posts Section */}
             {featurePosts.length != 0 ? (
               <>
-                <span className="text-[2.5rem] font-semibold tracking-wide">
+                <span className="text-[2.5rem] tracking-tight font-worksans-semibold">
                   Featured
                 </span>
                 <div className="grid gap-10 md:gap-5 lg:gap-10 md:grid-cols-3 mt-8">
@@ -266,9 +266,9 @@ export default function Home({ posts, status, categories, mixpanel }) {
                               />
                             </Link>
                           </div>
-                          <div className="items-center text-[0.875rem] lg:text-[1.125rem] text-gray-500">
+                          <div className="items-center text-sm lg:text-base text-gray-600">
                             <Link href={"/" + featurePost.slug}>
-                              <div className="flex flex-row justify-between text-[0.922rem] leading-5 tracking-wide">
+                              <div className="flex flex-row justify-between text-[0.922rem] leading-5 tracking-tight">
                                 <div>
                                   <span>{featurePost.published_on}</span>
                                   <span className="hidden lg:inline-block after:content-['\00B7'] after:mx-1"></span>
@@ -281,8 +281,8 @@ export default function Home({ posts, status, categories, mixpanel }) {
                                 </span>
                               </div>
                               <div
-                                className="my-2 text-[1.375rem] font-semibold leading-7 tracking-wide text-[#000000d6] hover:underline underline-offset-4 transition-all hover:scale-[0.96]
-                        lg:text-[1.5rem] lg:leading-8"
+                                className="my-2 text-[1.375rem] leading-7 tracking-tight text-[#000000d6] hover:underline underline-offset-4 transition-all hover:scale-[0.96]
+                        lg:text-2xl font-worksans-semibold"
                                 onClick={() => {
                                   mixpanel.track("tap_blog_title", {
                                     Title: featurePost.title,
@@ -302,9 +302,9 @@ export default function Home({ posts, status, categories, mixpanel }) {
                   <div className="flex justify-end mt-10">
                     <Link
                       href="/featured"
-                      className="relative rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-[0.5rem] font-bold text-white"
+                      className="relative rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] py-2 font-worksans-semibold text-white"
                     >
-                      <span className="py-[1rem] px-[1.05rem] tracking-wide hoverable-text">
+                      <span className="py-4 px-[1.05rem] tracking-tight hoverable-text">
                         Read More Featured
                       </span>
                     </Link>
@@ -313,7 +313,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                   ""
                 )}
                 <hr className="my-10" />
-                <span className="text-[2.5rem] font-semibold tracking-wide">
+                <span className="text-[2.5rem] tracking-tight font-worksans-semibold">
                   Blogs
                 </span>
               </>
@@ -375,9 +375,9 @@ export default function Home({ posts, status, categories, mixpanel }) {
                       }`}
                     >
                       <div
-                        className={`text-[1.375rem] font-semibold leading-7 tracking-wide text-[#000000d6] hover:underline underline-offset-4 transition-all hover:scale-[0.96] ${
+                        className={`text-[1.375rem] leading-7 tracking-tight text-[#000000d6] hover:underline underline-offset-4 transition-all hover:scale-[0.96] font-worksans-semibold ${
                           i === 0 && count % 3 === 1
-                            ? "md:text-[1.5rem] lg:text-[1.875rem] md:font-bold md:leading-8 lg:leading-10"
+                            ? "md:text-2xl lg:text-3xl md:font-bold lg:leading-10"
                             : "lg:text-[1.5rem] lg:leading-8"
                         }`}
                       >
@@ -392,18 +392,18 @@ export default function Home({ posts, status, categories, mixpanel }) {
                           {post.title}
                         </Link>
                       </div>
-                      <div className="text-[1.0625rem] md:text-[1.125rem] lg:text-[1.13rem] lg:leading-7 tracking-wide text-gray-500">
+                      <div className="text-[1.0625rem] md:text-lg lg:text-[1.13rem] lg:leading-7 tracking-normal text-gray-600">
                         <Link href={"/" + post.slug}>
                           <p className="line-clamp-3">{post.summary}</p>
                         </Link>
                       </div>
-                      <div className="flex flex-row items-center pt-3 text-[0.875rem] lg:text-[1.125rem] text-gray-500">
-                        <div className="relative w-[40px] md:w-[41px] h-[40px] max-w-full max-h-full overflow-hidden">
+                      <div className="flex flex-row items-center pt-3 text-sm lg:text-lg text-gray-600">
+                        <div className="relative w-10 md:w-[41px] h-10 max-w-full max-h-full overflow-hidden">
                           <Link href={"/" + post.slug}>
                             <Image
                               width={40}
                               height={40}
-                              className="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
+                              className="absolute top-2/4 left-2/4 translate-x-[-50%] translate-y-[-50%] rounded-full object-cover"
                               src={post.authorImage}
                               alt={post.authorAltText}
                               loading="lazy"
@@ -411,7 +411,7 @@ export default function Home({ posts, status, categories, mixpanel }) {
                           </Link>
                         </div>
                         <Link href={"/" + post.slug}>
-                          <div className="pl-3 text-[0.875rem] md:text-[0.922rem] leading-5 tracking-wide">
+                          <div className="pl-3 text-sm md:text-[0.922rem] tracking-tight">
                             <span className="text-green-700 capitalize">
                               {post.authorName}
                             </span>
diff --git a/pages/tag/[slug].js b/pages/tag/[slug].js
index 7062e951..51ae76e5 100644
--- a/pages/tag/[slug].js
+++ b/pages/tag/[slug].js
@@ -46,10 +46,10 @@ export default function Home({ posts, status, slug, mixpanel }) {
         ) : (
           <div className="md:mx-8 xl:mx-20">
             <div className="flex flex-row space-x-4 items-center">
-              <div className="w-6 h-6 md:w-7 md:h-7">
+              <div className="w-6 h-6 md:w-7 md:h-7 mt-1">
                 <FontAwesomeIcon icon={faTags} className="w-full h-full" />
               </div>
-              <h1 className="my-6 md:my-10 text-[1.5rem] md:text-[1.8rem] xl:text-[2.2rem] font-semibold leading-7 tracking-wide capitalize">
+              <h1 className="my-6 md:my-10 text-[1.5rem] md:text-[1.875rem] xl:text-[2.25rem] leading-7 tracking-none capitalize font-inter-semibold">
                 {tagName}
               </h1>
             </div>
diff --git a/pages/unsubscribe/index.js b/pages/unsubscribe/index.js
index db501ca7..6093a2f6 100644
--- a/pages/unsubscribe/index.js
+++ b/pages/unsubscribe/index.js
@@ -56,12 +56,12 @@ export default function Unsubscribe() {
 
   return (
     <>
-      <div className="container w-[90%] sm:w-[70%] lg:w-[50%] 2xl:w-[40%] h-fit-content min-h-[50vh] my-16 rounded-[12px] bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] p-6">
+      <div className="container w-[90%] sm:w-[70%] lg:w-1/2 2xl:w-2/5 h-fit-content min-h-[50vh] my-16 rounded-[12px] bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] p-6">
         <div className="text-center">
           <h1 className="mb-3 text-3xl">Unsubscribe</h1>
           <hr />
           <p className="my-3">{email}</p>
-          <div className="w-[50%] h-auto mx-[24%]">
+          <div className="w-1/2 h-auto mx-[24%]">
             <Image
               width={100}
               height={100}
@@ -75,7 +75,7 @@ export default function Unsubscribe() {
             are you sure you wish to unsubscribe from Canopas blog?
           </p>
           <div className="flex justify-center space-x-3 ">
-            <button className="w-auto rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-[1.1rem] font-semibold text-white hover:shadow-[inset_2px_1000px_1px_#fff] hover:cursor-pointer">
+            <button className="w-auto rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-[1.1rem] font-semibold text-white hover:shadow-[inset_2px_1000px_1px_#fff] hover:cursor-pointer">
               <div
                 className="px-[1.35rem] py-[0.3rem] align-middle text-center tracking-wider hoverable-text capitalize"
                 onClick={userUnsubscribe}
@@ -87,7 +87,7 @@ export default function Unsubscribe() {
               href={config.WEBSITE_URL + "/resources"}
               onClick={handleLogout}
             >
-              <button className="w-auto rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-[1.1rem] font-semibold text-white hover:shadow-[inset_2px_1000px_1px_#fff] hover:cursor-pointer">
+              <button className="w-auto rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-[1.1rem] font-semibold text-white hover:shadow-[inset_2px_1000px_1px_#fff] hover:cursor-pointer">
                 <div className="px-[1.35rem] py-[0.3rem] align-middle text-center tracking-wider hoverable-text capitalize">
                   no
                 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index d1d7e7c1..fe67900a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,17 +16,19 @@ module.exports = {
         "3xl": "1600px",
       },
       fontFamily: {
-        "product-black": ["Product Sans Black"],
-        "product-regular": ["Product Sans Regular"],
         "inter-medium": ["Inter Medium"],
         "inter-regular": ["Inter Regular"],
         "inter-bold": ["Inter Bold"],
         "inter-semibold": ["Inter SemiBold"],
-        "inter-light": ["Inter ExtraLight"],
+        "inter-extralight": ["Inter ExtraLight"],
         "source-codepro": ["Source CodePro"],
         "poppins-light": ["Poppins Light"],
         "poppins-regular": ["Poppins Regular"],
         "poppins-medium": ["Poppins Medium"],
+        "worksans-light": ["WorkSans Light"],
+        "worksans-regular": ["WorkSans Regular"],
+        "worksans-medium": ["WorkSans Medium"],
+        "worksans-semibold": ["WorkSans SemiBold"],
       },
       colors: {
         black: {