diff --git a/components/Dashboard/PostCard.jsx b/components/Dashboard/PostCard.jsx
index 122442b7..07a0439a 100644
--- a/components/Dashboard/PostCard.jsx
+++ b/components/Dashboard/PostCard.jsx
@@ -77,7 +77,7 @@ const PostCard = ({ post, refetch, user }) => {
           </div>}
           <div className="">
             <Link href={post.type=='article'?`/p/${post.id}`:`/toolbox/post/${post.id}`}>
-              <h3 className="text-xl mb-2 font-semibold max-w-2xl font-inter">
+              <h3 className="text-xl mb-2 font-semibold max-w-2xl ">
                 {post.title}
               </h3>
             </Link>
diff --git a/components/DashboardPartners/JobCard.jsx b/components/DashboardPartners/JobCard.jsx
index 937f9b9c..d6a04330 100644
--- a/components/DashboardPartners/JobCard.jsx
+++ b/components/DashboardPartners/JobCard.jsx
@@ -61,7 +61,7 @@ const SponsorCard = ({ post, refetch, user }) => {
             </span>
           </div>} */}
           <div className="mb-3">
-            <h3 className="text-lg font-medium max-w-md font-inter">
+            <h3 className="text-lg font-medium max-w-md ">
               {post.title}
             </h3>
             {/* <p className="text-sm text-gray-500 mb-10">
diff --git a/components/DashboardPartners/SponsorCard.jsx b/components/DashboardPartners/SponsorCard.jsx
index 44c32a1e..a15cd6c4 100644
--- a/components/DashboardPartners/SponsorCard.jsx
+++ b/components/DashboardPartners/SponsorCard.jsx
@@ -61,7 +61,7 @@ const SponsorCard = ({ post, refetch, user }) => {
             </span>
           </div>} */}
           <div className="mb-3">
-            <h3 className="text-lg font-medium max-w-md font-inter">
+            <h3 className="text-lg font-medium max-w-md ">
               {post.title}
             </h3>
             <p className="text-sm text-gray-500">
diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
index d650032e..262f8322 100644
--- a/components/Navbar/Navbar.jsx
+++ b/components/Navbar/Navbar.jsx
@@ -85,7 +85,7 @@ const Navbar = ({
     <>
       <nav
         id="main-nav"
-        className={`font-inter fixed top-0 ${navType == "full" ? "" : "md:top-2"}  w-full`}
+        className={` fixed top-0 ${navType == "full" ? "" : "md:top-2"}  w-full`}
         style={{ zIndex: 99 }}
       >
         <div
diff --git a/components/Navbar/parts/ActiveLinkNewMenu.jsx b/components/Navbar/parts/ActiveLinkNewMenu.jsx
index 52e82c93..236820f3 100644
--- a/components/Navbar/parts/ActiveLinkNewMenu.jsx
+++ b/components/Navbar/parts/ActiveLinkNewMenu.jsx
@@ -11,8 +11,8 @@ const ActiveLinkNewMenu =({ children, href }) =>{
   
     return (
         <a href={href} onClick={handleClick}
-        className={`${((router.asPath?.indexOf(href)>-1 && href!=='/') || router.asPath==href)?'bg-blue-50 text-blue-800 font-medium bg-opacity-50 border':'text-gray-900 hover:bg-blue-50 font-medium hover:text-blue-600 bg-transparent'} px-4 text-[15px] hover:bg-gray-200 py-2 text-center inline-block font-inter tracking-tight cursor-pointer min-w-max cursor w-full rounded-full text-gray-500  `}
-        // className={`${((router.asPath?.indexOf(href)>-1 && href!=='/') || router.asPath==href)?'bg-blue-50 text-blue-800 font-medium bg-opacity-50 border':'text-gray-800 hover:bg-blue-50 font-normal hover:text-blue-600 bg-transparent'} px-6 hover:bg-gray-200 py-2 text-center block font-inter tracking-tight cursor-pointer min-w-max cursor w-full text-base rounded-full text-gray-500  `}
+        className={`${((router.asPath?.indexOf(href)>-1 && href!=='/') || router.asPath==href)?'bg-blue-50 text-blue-800 font-medium bg-opacity-50 border':'text-gray-900 hover:bg-blue-50 font-medium hover:text-blue-600 bg-transparent'} px-4 text-[15px] hover:bg-gray-200 py-2 text-center inline-block  tracking-tight cursor-pointer min-w-max cursor w-full rounded-full text-gray-500  `}
+        // className={`${((router.asPath?.indexOf(href)>-1 && href!=='/') || router.asPath==href)?'bg-blue-50 text-blue-800 font-medium bg-opacity-50 border':'text-gray-800 hover:bg-blue-50 font-normal hover:text-blue-600 bg-transparent'} px-6 hover:bg-gray-200 py-2 text-center block  tracking-tight cursor-pointer min-w-max cursor w-full text-base rounded-full text-gray-500  `}
         style={{borderColor:'#ebeff6'}}>
         
         {children}
diff --git a/components/Navbar/parts/MenuItems.jsx b/components/Navbar/parts/MenuItems.jsx
index 48b05b3e..028d7a8b 100644
--- a/components/Navbar/parts/MenuItems.jsx
+++ b/components/Navbar/parts/MenuItems.jsx
@@ -622,7 +622,7 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
 
       {/* tagline */}
       <p
-        className={`my-auto font-inter-serif hidden xl:block normal-case font-semibold ${
+        className={`my-auto  hidden xl:block normal-case font-semibold ${
           !collapse
             ? "opacity-0 -z-10 absolute right-0 pt-3.5 text-gray-50 -mr-12 text-xs"
             : "text-base"
diff --git a/components/Navbar/parts/MenuItemsApp.js b/components/Navbar/parts/MenuItemsApp.js
index ea6c48ae..dbb1ef0c 100644
--- a/components/Navbar/parts/MenuItemsApp.js
+++ b/components/Navbar/parts/MenuItemsApp.js
@@ -625,7 +625,7 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
 
       {/* tagline */}
       <p
-        className={`my-auto font-inter-serif hidden xl:block normal-case font-semibold ${
+        className={`my-auto  hidden xl:block normal-case font-semibold ${
           !collapse
             ? "opacity-0 -z-10 absolute right-0 pt-3.5 text-gray-50 -mr-12 text-xs"
             : "text-base"
diff --git a/components/News/news-list.js b/components/News/news-list.js
index f263456f..59d258af 100644
--- a/components/News/news-list.js
+++ b/components/News/news-list.js
@@ -8,7 +8,7 @@ export default function NewsList({
 }) {
   return (
     <div className="hidden md:block bg-white rounded-lg mt-6 p-6 lg:mb-16">
-      <h1 className="text-sm font-semibold font-inter-serif mb-3">{title}</h1>
+      <h1 className="text-sm font-semibold  mb-3">{title}</h1>
 
       {posts.map((post, index) => {
         post = post.attributes;
diff --git a/components/SearchBar.jsx b/components/SearchBar.jsx
index 01383a14..4430c2d0 100644
--- a/components/SearchBar.jsx
+++ b/components/SearchBar.jsx
@@ -113,7 +113,7 @@ const Hit = ({ hit }) => {
             hit={hit}
           />
           <div className="mt-1.5">
-            <span className="capitalize text-xs capitalize bg-gray-100 font-inter px-3 py-0.5 border border-black border-opacity-5 text-gray-500 rounded-full">
+            <span className="capitalize text-xs capitalize bg-gray-100  px-3 py-0.5 border border-black border-opacity-5 text-gray-500 rounded-full">
               {hit.type}
             </span>
           </div>
diff --git a/components/SearchModal.js b/components/SearchModal.js
index d523cba1..e144afea 100644
--- a/components/SearchModal.js
+++ b/components/SearchModal.js
@@ -134,7 +134,7 @@ const Hit = ({ hit }) => {
             hit={hit}
           />
           <div className="mt-1.5">
-            <span className="capitalize text-xs capitalize bg-gray-100 font-inter px-3 py-0.5 border border-black border-opacity-5 text-gray-500 rounded-full">
+            <span className="capitalize text-xs capitalize bg-gray-100  px-3 py-0.5 border border-black border-opacity-5 text-gray-500 rounded-full">
               {hit.type}
             </span>
           </div>
diff --git a/components/Settings/topicsSubscription.js b/components/Settings/topicsSubscription.js
index 5a71d5fa..3ebe32e4 100644
--- a/components/Settings/topicsSubscription.js
+++ b/components/Settings/topicsSubscription.js
@@ -36,7 +36,7 @@ const tags = [
   },
   {
     name: "User Research",
-    link: "/posts/ui/page/1",
+    link: "/posts/user-research/page/1",
   },
   {
     name: "Notion",
diff --git a/components/Sidebar/NetworkCTA.js b/components/Sidebar/NetworkCTA.js
index 8e2189af..ea440b8a 100644
--- a/components/Sidebar/NetworkCTA.js
+++ b/components/Sidebar/NetworkCTA.js
@@ -7,17 +7,17 @@ const PrototyprNetworkCTA = ({ data }) => {
       <div className="flex flex-col gap-1 justify-end items-end">
         <div className="w-full rounded-2xl h-auto bg-white border border-black/5 p-6 flex flex-col grid gap-3 shadow-sm">
           <div className="flex flex-col grid gap-2">
-            <p className="text-gray-800 font-medium max-w-[200px] text-[16px] mb-3 font-inter">
+            <p className="text-gray-800 font-medium max-w-[200px] text-[16px] mb-3 ">
               Share and Grow together in the Design Community.
             </p>
             <div className="mb-2 flex flex-wrap">
               <Link href="/write">
-                <button className="px-4 mb-2 py-2 xl:mr-2 text-white rounded-lg font-inter bg-blue-500 hover:bg-blue-400 text-sm font-semibold">
+                <button className="px-4 mb-2 py-2 xl:mr-2 text-white rounded-lg  bg-blue-500 hover:bg-blue-400 text-sm font-semibold">
                   Start Writing
                 </button>
               </Link>
               <Link href="/post/write-for-us">
-                <button className="px-4 hidden xl:block py-2 text-black rounded-lg font-inter font-semibold bg-gray-200 hover:bg-gray-100 text-sm">
+                <button className="px-4 hidden xl:block py-2 text-black rounded-lg  font-semibold bg-gray-200 hover:bg-gray-100 text-sm">
                   Learn more
                 </button>
               </Link>
diff --git a/components/Sidebar/NetworkCTA2.js b/components/Sidebar/NetworkCTA2.js
index 2abe176d..b33b6cb8 100644
--- a/components/Sidebar/NetworkCTA2.js
+++ b/components/Sidebar/NetworkCTA2.js
@@ -9,7 +9,7 @@ const PrototyprNetworkCTA = ({ data }) => {
         <div className="w-full flex space-between rounded-[12px] h-auto p-5">
           <div className="w-2/3 flex flex-col">
             <div>
-                <h2 className="text-gray-800 font-semibold text-lg font-inter">
+                <h2 className="text-gray-800 font-semibold text-lg ">
                 By creators, for creators
                 </h2>
                 <p className='text-sm text-gray-500 max-w-[250px]'>
diff --git a/components/SponsorSidebarCard.jsx b/components/SponsorSidebarCard.jsx
index d46cf96c..a13728d7 100644
--- a/components/SponsorSidebarCard.jsx
+++ b/components/SponsorSidebarCard.jsx
@@ -50,14 +50,14 @@ const SponsorSidebarCard = ({
                 )}
               </div>
               <div className="flex flex-col grid gap-1 justify-center">
-                <p className=" overflow-hidden line-clamp-2 inline my-auto font-inter text-sm">
+                <p className=" overflow-hidden line-clamp-2 inline my-auto  text-sm">
                   {title}
-                  <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                  <span className="text-xs ml-2 capitalize bg-gray-100  px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                     Promoted
                   </span>
                 </p>
                 {/* <div className="flex flex-row gap-1 text-sm text-gray-500">
-                  <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-3.5 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                  <span className="text-xs mt-1 capitalize bg-gray-100  px-3.5 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                     Sponsored
                   </span>
                 </div> */}
@@ -101,11 +101,11 @@ export const SponsorHomeCard = ({
                 )}
               </div>
               <div className="flex flex-col grid gap-1 justify-center">
-                <p className=" h-[18px] overflow-hidden line-clamp-1 inline font-inter text-sm">
+                <p className=" h-[18px] overflow-hidden line-clamp-1 inline  text-sm">
                   {title}
                 </p>
                 <div className="flex flex-row gap-1 text-sm text-gray-500">
-                  <span className="text-xs capitalize flex flex-row justify-center items-center bg-gray-100 font-inter px-4 border border-black border-opacity-5 text-black rounded-full">
+                  <span className="text-xs capitalize flex flex-row justify-center items-center bg-gray-100  px-4 border border-black border-opacity-5 text-black rounded-full">
                     Sponsored
                   </span>
                 </div>
diff --git a/components/admin/Dashboard/PostCard.jsx b/components/admin/Dashboard/PostCard.jsx
index 77f6b69f..2ca89565 100644
--- a/components/admin/Dashboard/PostCard.jsx
+++ b/components/admin/Dashboard/PostCard.jsx
@@ -77,7 +77,7 @@ const PostCard = ({ post, refetch, user }) => {
             </span>
           </div>}
           <div className="mb-3">
-            <h3 className="text-lg font-medium max-w-md font-inter">
+            <h3 className="text-lg font-medium max-w-md ">
               {post.title}
             </h3>
             <p className="text-sm text-gray-500 mb-6">
diff --git a/components/homepage/SponsorCard.js b/components/homepage/SponsorCard.js
index 6550d1f2..a7fcc617 100644
--- a/components/homepage/SponsorCard.js
+++ b/components/homepage/SponsorCard.js
@@ -9,7 +9,7 @@ const SponsorCard = ({ data }) => {
               <img src={data.src} />
             </div>
             <div className="w-full col-span-2 flex flex-col grid gap-1">
-              <p className="w-auto max-w-[150px] text-[#6B6B6B] font-medium tracking-[-0.1px] text-[13px] font-inter ">
+              <p className="w-auto max-w-[150px] text-[#6B6B6B] font-medium tracking-[-0.1px] text-[13px]  ">
                 {data.heading}
               </p>
               <div>
diff --git a/components/homepage/TabSwitcher.js b/components/homepage/TabSwitcher.js
index 8db08e9e..19fb62d7 100644
--- a/components/homepage/TabSwitcher.js
+++ b/components/homepage/TabSwitcher.js
@@ -30,7 +30,7 @@ const TabSwitcher = ({ selectedTab, onTabChange }) => {
               return (
                 <span
                   onClick={() => onTabChange(tab)}
-                  className={`px-4 py-2 mb-2 block font-inter tracking-tight font-medium cursor-pointer cursor text-sm  mr-2 rounded-full ${
+                  className={`px-4 py-2 mb-2 block  tracking-tight font-medium cursor-pointer cursor text-sm  mr-2 rounded-full ${
                     selectedTab === tab.id
                       ? "bg-blue-600 font-semibold text-white"
                       : "bg-transparent text-gray-600"
diff --git a/components/homepage/TrendingFullWidth.js b/components/homepage/TrendingFullWidth.js
index 7fedbc9c..f0305220 100644
--- a/components/homepage/TrendingFullWidth.js
+++ b/components/homepage/TrendingFullWidth.js
@@ -99,7 +99,7 @@ const TrendingFullWidth = ({ tools, sponsor }) => {
               <div className="z-20 flex flex-col justify-end h-full w-full absolute p-3">
                 <div className="flex">
                   <div className="absolute top-0 right-0 mt-3 mr-3">
-                    <span className="capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black text-xs rounded-full">
+                    <span className="capitalize bg-gray-100  px-2 py-0.5 border border-black border-opacity-5 text-black text-xs rounded-full">
                       Promoted
                     </span>
                   </div>
diff --git a/components/landing-pages/components/common/button.js b/components/landing-pages/components/common/button.js
index 972ef0b8..1944c2dd 100644
--- a/components/landing-pages/components/common/button.js
+++ b/components/landing-pages/components/common/button.js
@@ -4,7 +4,7 @@ const CTAButton = () => {
   return (
     <div>
       <Link href="/apply/form">
-        <button className="p-4 px-8 w-full max-w-[200px] text-[16px] rounded-full bg-[#195DE2] text-white font-medium font-inter border border-[#9DDBFD] border-opacity-40">
+        <button className="p-4 px-8 w-full max-w-[200px] text-[16px] rounded-full bg-[#195DE2] text-white font-medium  border border-[#9DDBFD] border-opacity-40">
           Apply to join
         </button>
       </Link>
diff --git a/components/landing-pages/components/network/features.js b/components/landing-pages/components/network/features.js
index d21c0d64..4a8ebcdd 100644
--- a/components/landing-pages/components/network/features.js
+++ b/components/landing-pages/components/network/features.js
@@ -119,10 +119,10 @@ const FeaturesContent = () => {
                   {/* <img className=" w-14 h-14 object-contain mb-3" src={x.icon} /> */}
                   <div>
                     <div>{x.icon}</div>
-                    <h2 className="text-[16px] font-semibold text-gray-900 mb-2 font-inter">
+                    <h2 className="text-[16px] font-semibold text-gray-900 mb-2 ">
                       {x.title}
                     </h2>
-                    <p className="text-black/60  leading-[28px] text-[16px] font-inter">
+                    <p className="text-black/60  leading-[28px] text-[16px] ">
                       {x.description}
                     </p>
                   </div>
diff --git a/components/landing-pages/components/network/hero.js b/components/landing-pages/components/network/hero.js
index 4bac0d7a..f1fd81b3 100644
--- a/components/landing-pages/components/network/hero.js
+++ b/components/landing-pages/components/network/hero.js
@@ -6,10 +6,10 @@ const Hero = () => {
       <div className="w-full max-w-6xl mx-auto  pt-32 md:pt-60 flex flex-col grid gap-10 px-5 ">
         <div className="flex flex-col grid gap-5 lg:flex lg:flex-row lg:gap-1 md:flex md:flex-col">
           <div className="flex flex-col max-w-xl z-[2] translate-y-20 md:translate-y-0">
-            <h1 className="text-[#0F1F40] tracking-tight max-w-md mb-5 md:max-w-lg font-semibold text-4xl md:text-6xl font-inter md:leading-tight ">
+            <h1 className="text-[#0F1F40] tracking-tight max-w-md mb-5 md:max-w-lg font-semibold text-4xl md:text-6xl  md:leading-tight ">
              Apply to become a Prototypr contributor
             </h1>
-            <p className="mb-5 text-[#335f8b] md:leading-[32px] leading-[28px] text-[16px] md:text-[18px] font-inter md:pr-6">
+            <p className="mb-5 text-[#335f8b] md:leading-[32px] leading-[28px] text-[16px] md:text-[18px]  md:pr-6">
               Prototypr content is open to all, but only invited members can currently get a profile and create posts. 
               You can get an invite from existing members or submit an application form.
             </p>
diff --git a/components/landing-pages/components/network/mission.js b/components/landing-pages/components/network/mission.js
index fde6e36c..cff3f196 100644
--- a/components/landing-pages/components/network/mission.js
+++ b/components/landing-pages/components/network/mission.js
@@ -24,12 +24,12 @@ const MissionSection = () => {
     <div className="w-full pb-40 bg-[#F8B700] px-5 ">
       <div className="w-full max-w-6xl mx-auto  ">
         <div className="max-w-3xl pt-20 md:pt-32">
-          <h3 className="text-black/70 text-[40px] leading-[50px] md:text-[56px] md:leading-[70px] font-semibold font-inter">
+          <h3 className="text-black/70 text-[40px] leading-[50px] md:text-[56px] md:leading-[70px] font-semibold ">
             {/* Our mission is to make Design Open for all, just like Open Source
             Code. */}
             We're creating a more mindful, open, and fair publishing platform.
           </h3>
-          <h3 className="text-black/60 text-[24px] leading-[70px] font-semibold font-inter my-3 md:my-5">
+          <h3 className="text-black/60 text-[24px] leading-[70px] font-semibold  my-3 md:my-5">
             Built in the open for design, code, and tech
           </h3>
         </div>
@@ -37,10 +37,10 @@ const MissionSection = () => {
           {Benefits.map((item, i) => {
             return (
               <div key={i} className="max-w-lg grid flex flex-col grid gap-3">
-                <h3 className="font-bold font-inter text-[18px] text-black/70">
+                <h3 className="font-bold  text-[18px] text-black/70">
                   {item.title}
                 </h3>
-                <p className="leading-[34px] font-inter font-medium text-[18px] text-black/60">
+                <p className="leading-[34px]  font-medium text-[18px] text-black/60">
                   <div dangerouslySetInnerHTML={{__html:item.description}}/>
                 </p>
               </div>
diff --git a/components/landing-pages/components/network/networkCTA.js b/components/landing-pages/components/network/networkCTA.js
index b41871e3..48359471 100644
--- a/components/landing-pages/components/network/networkCTA.js
+++ b/components/landing-pages/components/network/networkCTA.js
@@ -10,7 +10,7 @@ const NetworkCTA = () => {
         </div>
         <div className=" max-w-6xl mx-auto flex flex-col justify-center items-center  h-full">
           <div className="w-full flex flex-col space-y-4 items-center pt-32 pb-10 z-[1]">
-            <h4 className="md:text-[60px] text-[40px] font-inter text-center font-semibold text-[#0F1F40] leading-[40px] md:leading-[70px] max-w-lg">
+            <h4 className="md:text-[60px] text-[40px]  text-center font-semibold text-[#0F1F40] leading-[40px] md:leading-[70px] max-w-lg">
             Become a contributor
             </h4>
             <CTAButton />
diff --git a/components/landing-pages/components/network/news.js b/components/landing-pages/components/network/news.js
index a000c335..36d40241 100644
--- a/components/landing-pages/components/network/news.js
+++ b/components/landing-pages/components/network/news.js
@@ -7,7 +7,7 @@ const BlogPostCard = ({img, title, link}) => {
     <div style={{backgroundImage:`url("${img}")`, backgroundPosition:'center', backgroundSize:'cover'}} className=" cursor-pointer transition ease-in-out w-full h-[240px] rounded-lg border border-black border-opacity-5"></div>
     </Link>
     <Link href={link}>
-    <p className="text-[16px] mt-3 font-semibold text-gray-900 font-inter">{title}</p>
+    <p className="text-[16px] mt-3 font-semibold text-gray-900 ">{title}</p>
     </Link>
     </div>
   );
@@ -20,7 +20,7 @@ const NewsContent = () => {
 
       <div className="w-full px-0 md:px-5 bg-white py-10 ">
         <div className="p-5 bg-[#fff] ] max-w-7xl mx-auto">
-          <h2 className="text-[24px] my-4 text-[#0F1F40] font-semibold font-inter max-w-md leading-[32px]">
+          <h2 className="text-[24px] my-4 text-[#0F1F40] font-semibold  max-w-md leading-[32px]">
             More about <br /> Open Design →
           </h2>
           <div className="flex flex-col lg:flex-nowrap lg:flex lg:flex-row md:flex md:flex-wrap md:flex-col md:space-x-5 py-2 ">
diff --git a/components/landing-pages/components/network/pitch.js b/components/landing-pages/components/network/pitch.js
index 96347470..0f8070f0 100644
--- a/components/landing-pages/components/network/pitch.js
+++ b/components/landing-pages/components/network/pitch.js
@@ -17,14 +17,14 @@ const PitchSection = () => {
           <div className="w-full max-w-7xl mx-auto px-0 md:px-5 z-10">
             <div className="w-full bg-[#195DE2] h-auto rounded-[32px] px-5 py-10 md:py-32 md:px-10">
               <div className="max-w-6xl mx-auto grid flex flex-col grid gap-5">
-                <h2 className="md:text-[50px] text-[30px] max-w-2xl leading-[40px] md:leading-[60px] font-semibold font-inter text-white">
+                <h2 className="md:text-[50px] text-[30px] max-w-2xl leading-[40px] md:leading-[60px] font-semibold  text-white">
                   {/* A place to meet like minded writers, share ideas and spread
                   knowledge */}
                    Be the signal<br/> through the noise
                   {/* Mindful designers, building towards a calmer, fairer, and more open web.  */}
                   {/* Thoughts into words. Words into designs. Designs into the hands of users. */}
                 </h2>
-                <p className="text-white/80 max-w-lg text-[18px] font-inter leading-[32px]">
+                <p className="text-white/80 max-w-lg text-[18px]  leading-[32px]">
                  Prototypr is a place for genuine stories from real people. Having been unindated with spam profiles and AI-generated posts, we're currently invite-only 
                  to maintain high quality content.
                 </p>
diff --git a/components/landing-pages/components/web-mon/MonetizationSection.js b/components/landing-pages/components/web-mon/MonetizationSection.js
index 22c23009..9332f284 100644
--- a/components/landing-pages/components/web-mon/MonetizationSection.js
+++ b/components/landing-pages/components/web-mon/MonetizationSection.js
@@ -18,7 +18,7 @@ const WebMonetizationSection = () => (
     <div className="bg-[#FFFFFF] max-w-7xl mx-auto p-10  pt-30 md:pt-32 md:p-20 md:pb-32 rounded-t-[30px] flex flex-col grid gap-5 md:gap-10">
       <div className="flex grid flex-col gap-6">
         {/* <Curly /> */}
-        <h2 className="text-[#000] leading-[44px] md:leading-[60px] text-[26px] sm:text-[32px] md:text-[40px] font-inter font-medium">
+        <h2 className="text-[#000] leading-[44px] md:leading-[60px] text-[26px] sm:text-[32px] md:text-[40px]  font-medium">
           {/* We are experimenting <br /> with{" "}
         <span className="italic">Web Monetization </span> */}
           {/* Better business <br /> models for the web */}
@@ -26,11 +26,11 @@ const WebMonetizationSection = () => (
           with Web-Monetization
         </h2>
         <div className="flex flex-col max-w-lg md:flex-col grid gap-4 md:gap-4 text-[#707070]">
-          <p className="leading-[34px] text-[18px] font-inter font-normal">
+          <p className="leading-[34px] text-[18px]  font-normal">
             Introducing an alternative business model, that keeps the Web open.
             Earn tips and micropayments based on the time readers spend on your work.
           </p>
-          <p className="leading-[34px] text-[18px] font-inter font-normal">
+          <p className="leading-[34px] text-[18px]  font-normal">
             <span className="font-semibold text-gray-700">Web Monetization</span> is a new system making it possible to reward creators, without gating work behind a paywall. 
             Powered by payment providers like Coil, the goal is to facilite a 
             fairer, ad-free, open web. 
@@ -47,10 +47,10 @@ const WebMonetizationSection = () => (
                   <img className="w-full" src={x.src}></img>
                 </div>
                 <div className="flex flex-col grid gap-4">
-                  <h3 className="text-[28px] m-0 font-inter text-[#000] font-semibold">
+                  <h3 className="text-[28px] m-0  text-[#000] font-semibold">
                     {x.heading}
                   </h3>
-                  <p className="leading-[34px] text-[18px] font-inter text-[#707070]">
+                  <p className="leading-[34px] text-[18px]  text-[#707070]">
                     {x.desp}
                   </p>
                 </div>
diff --git a/components/landing-pages/components/web-mon/footerCTA.js b/components/landing-pages/components/web-mon/footerCTA.js
index 183896f6..d1ce1502 100644
--- a/components/landing-pages/components/web-mon/footerCTA.js
+++ b/components/landing-pages/components/web-mon/footerCTA.js
@@ -3,7 +3,7 @@ const FooterCTA = () => {
     <div className="w-full bg-[#00028C] pt-10 md:pt-20 relative overflow-hidden">
       <div className="w-full max-w-6xl mx-auto flex flex-col justify-content items-center pt-10 z-[1]">
         <div className="flex grid flex-col gap-5 justify-center items-center">
-          <h3 className="mx-auto text-white text-[32px] sm:text-[40px] md:text-[60px] font-semibold leading-[42px] md:leading-[70px] font-inter">
+          <h3 className="mx-auto text-white text-[32px] sm:text-[40px] md:text-[60px] font-semibold leading-[42px] md:leading-[70px] ">
             Prototypr + Coil
           </h3>
           <p className="mx-auto text-gray-200 mb-2 text-center max-w-lg">
diff --git a/components/landing-pages/components/web-mon/hero.js b/components/landing-pages/components/web-mon/hero.js
index dd38e653..4f238fe6 100644
--- a/components/landing-pages/components/web-mon/hero.js
+++ b/components/landing-pages/components/web-mon/hero.js
@@ -3,10 +3,10 @@ const Hero = () => {
     <div className="w-full bg-[#22AA79] h-auto flex flex-row relative px-10">
       <div className="relative max-w-6xl mx-auto w-full h-full z-[2] flex flex-col md:flex-row py-10 md:py-0">
         <div className="w-full flex flex-col pt-32 md:pt-52 py-20 md:py-32">
-          <h1 className="mb-4 text-[30px] sm:text-[40px] md:text-[60px] font-inter text-[#113E33] leading-[44px] md:leading-[64px] font-semibold">
+          <h1 className="mb-4 text-[30px] sm:text-[40px] md:text-[60px]  text-[#113E33] leading-[44px] md:leading-[64px] font-semibold">
           A new way for creators to earn
           </h1>
-          <p className="mb-4 text-[#1f322b] text-[18px] leading-[34px] max-w-lg font-medium font-inter">
+          <p className="mb-4 text-[#1f322b] text-[18px] leading-[34px] max-w-lg font-medium ">
           With our Web-Monetized platform, you can earn tips and micropayments directly from readers, thanks to payment providers like Coil (now sunset).
           {/* Micro payments are a new and exciting way to earn money with your website. With web monetization you can offer premium content to your users, as well as set up micro payment systems. When your website visitors use these payment methods, they aren't charged any extra fees. This is great if you want to offer subscriptions or premium content on demand. */}
             {/* Web Monetization provides an open, native, efficient, and automatic way to compensate creators 
diff --git a/components/landing-pages/components/web-mon/payoutSection.js b/components/landing-pages/components/web-mon/payoutSection.js
index 523235d8..d98368e6 100644
--- a/components/landing-pages/components/web-mon/payoutSection.js
+++ b/components/landing-pages/components/web-mon/payoutSection.js
@@ -4,7 +4,7 @@ const PayoutSection = () => {
   return (
     <div className="w-full bg-white p-10">
       <div className="w-full max-w-7xl grid mx-auto py-0 md:py-32 flex flex-col grid gap-7 md:gap-4">
-        <h3 className="md:text-[40px] text-[30px] text-gray-600 leading-[40px] md:leading-[50px] font-inter font-semibold">
+        <h3 className="md:text-[40px] text-[30px] text-gray-600 leading-[40px] md:leading-[50px]  font-semibold">
           Live Micropayments<br /> 
         </h3>
         <p className="text-base text-gray-500 max-w-lg leading-[28px]">When a <a className="underline text-blue-700" href="https://coil.com">Coil subscriber</a> visits an article, micropayments are streamed 
diff --git a/components/landing-pages/components/web-mon/webStandardSection.js b/components/landing-pages/components/web-mon/webStandardSection.js
index c6ea0dfa..1633f942 100644
--- a/components/landing-pages/components/web-mon/webStandardSection.js
+++ b/components/landing-pages/components/web-mon/webStandardSection.js
@@ -72,13 +72,13 @@ const WebStandard = () => {
             <div className="flex flex-col grid gap-2">
               <GlobeIcon />
               <div className="flex flex-col grid gap-10 md:py-10">
-                <h3 className="text-[28px] sm:text-[32px] md:text-[40px] leading-[42px] md:leading-[60px] text-white font-inter font-medium">
+                <h3 className="text-[28px] sm:text-[32px] md:text-[40px] leading-[42px] md:leading-[60px] text-white  font-medium">
                   A New Standard <br /> for the Web that <br />{" "}
                   <span className="italic text-[#309BFE]">
                     Rewards Creators
                   </span>
                 </h3>
-                <div className="max-w-3xl flex flex-col grid gap-5 font-inter leading-[34px] text-[18px] text-[#9FBDDF]">
+                <div className="max-w-3xl flex flex-col grid gap-5  leading-[34px] text-[18px] text-[#9FBDDF]">
                   <p>
                     Web Monetization is a proposed W3C standard that encourages fairer revenue models for the web.
                   </p>
@@ -94,7 +94,7 @@ const WebStandard = () => {
                 </div>
                 <a
                   href="https://help.coil.com/docs/general-info/intro-to-coil"
-                  className="text-white font-inter"
+                  className="text-white "
                   target={"_blank"}
                 >
                   Learn about Coil →
@@ -120,7 +120,7 @@ const WebStandard = () => {
                     }}
                     className="w-full overflow-hidden  bg-white bg-opacity-10 rounded-lg cursor-pointer h-[200px] md:h-[250px]"
                   ></div>
-                  <p className="text-[16px] mt-3 font-medium text-gray-300 font-inter">{x.title}</p>
+                  <p className="text-[16px] mt-3 font-medium text-gray-300 ">{x.title}</p>
                 </a>
                 </div>
               );
diff --git a/components/new-index/AspiringItem.js b/components/new-index/AspiringItem.js
index ec8bcd55..9f071acf 100644
--- a/components/new-index/AspiringItem.js
+++ b/components/new-index/AspiringItem.js
@@ -45,7 +45,7 @@ export default function AspiringItem({ post = {} }) {
         </div> */}
         <h4 className="text-black-1 font-semibold text-lg leading-6 mt-4">
           <Link href={`/post/${slug}`}>
-            <span className="cursor-pointer font-inter-serif">{title}</span>
+            <span className="cursor-pointer ">{title}</span>
           </Link>
         </h4>
         <div className="font-base font-normal hover:underline hover:text-gray-800 text-base text-neutral-700 leading-5 mt-2">
diff --git a/components/new-index/DesignTool.js b/components/new-index/DesignTool.js
index 05a87d3d..b92b8ec7 100644
--- a/components/new-index/DesignTool.js
+++ b/components/new-index/DesignTool.js
@@ -104,7 +104,7 @@ export default function DesignTool({ allTools = [] }) {
       <div className="flex flex-row flex-wrap w-full justify-between  items-end max-w-7xl mx-auto mb-10">
         <div className=" mb-6 flex flex-col grid gap-7 my-10">
           <div>
-            <h2 className="text-[40px] leading-[50px] md:text-[60px] max-w-xl md:leading-[68px] text-black font-bold font-inter">
+            <h2 className="text-[40px] leading-[50px] md:text-[60px] max-w-xl md:leading-[68px] text-black font-bold ">
               {/* The best tools for your design workflow. */}
               {/* The best design tools, handpicked every week. */}
               The best Design Tools, handpicked every week.
@@ -113,12 +113,12 @@ export default function DesignTool({ allTools = [] }) {
           </div>
           <div className="flex flex-row flex-wrap gap-2">
             <Link href="/toolbox">
-              <button className="px-8 mr-3 py-5 font-medium bg-[#345FF8] rounded-2xl text-sm text-white font-inter">
+              <button className="px-8 mr-3 py-5 font-medium bg-[#345FF8] rounded-2xl text-sm text-white ">
                 Submit Tool
               </button>
             </Link>
             <Link href="/toolbox">
-              <button className="px-8 py-5 bg-[#67CBFC] font-medium rounded-2xl text-sm text-white font-inter">
+              <button className="px-8 py-5 bg-[#67CBFC] font-medium rounded-2xl text-sm text-white ">
                 Open Toolbox
               </button>
             </Link>
@@ -133,7 +133,7 @@ export default function DesignTool({ allTools = [] }) {
 
       <div>
         <div className="max-w-7xl mx-auto my-4">
-          <p className="text-[20px] max-w-lg text-medium font-semibold font-inter">
+          <p className="text-[20px] max-w-lg text-medium font-semibold ">
             Recent Tools {"->"}
           </p>
         </div>
@@ -191,7 +191,7 @@ export default function DesignTool({ allTools = [] }) {
                                   {showItem.tags?.data.map((tab) => {
                                     return (
                                       <span
-                                        className={`mr-2 px-5 py-[6px] block text-[12px] backdrop-blur-md border border-white border-opacity-10 bg-white bg-opacity-20 capitalize text-white font-inter tracking-tight font-normal cursor-pointer min-w-max cursor w-full  rounded-full`}
+                                        className={`mr-2 px-5 py-[6px] block text-[12px] backdrop-blur-md border border-white border-opacity-10 bg-white bg-opacity-20 capitalize text-white  tracking-tight font-normal cursor-pointer min-w-max cursor w-full  rounded-full`}
                                       >
                                         {tab.attributes.name}
                                       </span>
@@ -203,16 +203,16 @@ export default function DesignTool({ allTools = [] }) {
                           </div>
 
                           <div className="mb-3">
-                            <h3 className="font-inter text-[20px] font-bold text-white line-clamp-1 flex flex-row gap-3">
+                            <h3 className=" text-[20px] font-bold text-white line-clamp-1 flex flex-row gap-3">
                               {" "}
                               {showItem.title}
                             </h3>
-                            <p className="line-clamp-3 font-normal text-white text-opacity-70 text-[14px] leading-[22px] font-inter">
+                            <p className="line-clamp-3 font-normal text-white text-opacity-70 text-[14px] leading-[22px] ">
                               {" "}
                               {showItem.excerpt}
                             </p>
                           </div>
-                          <button className="w-full bg-white text-sm text-black rounded-2xl font-inter py-3 px-5">
+                          <button className="w-full bg-white text-sm text-black rounded-2xl  py-3 px-5">
                             Show Tool
                           </button>
                         </div>
diff --git a/components/new-index/FeedItem.js b/components/new-index/FeedItem.js
index d5e5fe1b..3d787601 100644
--- a/components/new-index/FeedItem.js
+++ b/components/new-index/FeedItem.js
@@ -55,7 +55,7 @@ export default function FeedItem({ height = 20, post = {}, index = 0 }) {
         </Link>
         <h4 className="text-black-1 font-semibold text-lg leading-normal mt-2">
           <Link href={`/post/${slug}`}>
-            <span className="font-inter-serif">{title}</span>
+            <span className="">{title}</span>
           </Link>
         </h4>
         <div className="mt-3">
diff --git a/components/new-index/SourcePanel.js b/components/new-index/SourcePanel.js
index a76031f0..a2807807 100644
--- a/components/new-index/SourcePanel.js
+++ b/components/new-index/SourcePanel.js
@@ -44,10 +44,10 @@ export default function SourcePanel({ desc, title, className, titleSize }) {
                 >
                   {title}
                 </h3>
-                <p className="font-base font-inter text-lg leading-normal">
+                <p className="font-base  text-lg leading-normal">
                   {desc}
                 </p>
-                <SignupHorizontal className="sm:flex w-full mt-5 font-inter" />
+                <SignupHorizontal className="sm:flex w-full mt-5 " />
                 {/* <HookForm onSubmit={onSubmit} buttonText={buttonText} /> */}
               </>
             ) : error ? (
@@ -56,7 +56,7 @@ export default function SourcePanel({ desc, title, className, titleSize }) {
                   {intl.formatMessage({ id: "signup.tip.again" })} &nbsp;{" "}
                   <div className="inline -mt-1">🤖</div>
                 </h3>
-                <p className="font-inter font-base text-lg leading-normal">
+                <p className=" font-base text-lg leading-normal">
                   {intl.formatMessage({ id: "signup.res.error" })}
                 </p>
               </>
@@ -66,7 +66,7 @@ export default function SourcePanel({ desc, title, className, titleSize }) {
                   {intl.formatMessage({ id: "signup.input.check" })} &nbsp;{" "}
                   <div className="inline -mt-1">🎉</div>
                 </h3>
-                <p className="font-base font-inter text-lg leading-normal">
+                <p className="font-base  text-lg leading-normal">
                   {intl.formatMessage({ id: "signup.input.click" })}
                 </p>
               </>
diff --git a/components/new-index/TopicItem.js b/components/new-index/TopicItem.js
index bff48f74..b088828e 100644
--- a/components/new-index/TopicItem.js
+++ b/components/new-index/TopicItem.js
@@ -47,7 +47,7 @@ export default function TopicItem({ topic = {} }) {
           </div>
           <h4 className="text-black-1 font-semibold text-lg leading-normal mt-2">
             <Link href={`/post/${slug}`}>
-              <span className="cursor-pointer font-inter-serif">{title}</span>
+              <span className="cursor-pointer ">{title}</span>
             </Link>
           </h4>
           <div className="flex items-center mt-4">
diff --git a/components/new-index/TopicTopItem.js b/components/new-index/TopicTopItem.js
index abb80008..99877224 100644
--- a/components/new-index/TopicTopItem.js
+++ b/components/new-index/TopicTopItem.js
@@ -61,7 +61,7 @@ export default function TopicTopItem({ topic = {} }) {
           <h4 className="text-2xl lg:text-4xl font-semibold mb-4 mt-4 max-w-md">
             {slug && (
               <Link href={`/post/${slug}`}>
-                <span className="font-inter-serif hover:text-gray-900 transition duration-150 ease-in-out">
+                <span className=" hover:text-gray-900 transition duration-150 ease-in-out">
                   {title}
                 </span>
               </Link>
diff --git a/components/newsletter/SignupHomepage.js b/components/newsletter/SignupHomepage.js
index 7d03e020..a45476a5 100644
--- a/components/newsletter/SignupHomepage.js
+++ b/components/newsletter/SignupHomepage.js
@@ -65,12 +65,12 @@ export default function SignupHomepage({ className }) {
           </>
         ) : (
           <div className="p-6 bg-white shadow rounded-md max-w-md xl:max-w-xl mb-2 mt-10">
-            <h2 className={`text-lg mb-2 text-gray-800 font-semibold font-inter `}>
+            <h2 className={`text-lg mb-2 text-gray-800 font-semibold  `}>
               {intl.formatMessage({ id: "signup.input.check" })} &nbsp;{" "}
               <div className="inline -mt-1">🎉</div>
             </h2>
             <div
-              className={`block text-base  leading-6 font-base text-gray-800 font-inter`}
+              className={`block text-base  leading-6 font-base text-gray-800 `}
             >
               {intl.formatMessage({ id: "signup.input.click" })}
             </div>
@@ -147,7 +147,7 @@ function HookForm(props) {
        
         {/* </div> */}
       </form>
-      <div className=" w-10/12 font-inter">
+      <div className=" w-10/12 ">
         {errors.emailRequired && errors.emailRequired.type === "required" && (
           <p className="text-red-700 text-sm mt-2 text-left px-4 w-fit py-3 bg-red-100 rounded-xl">
             <FormattedMessage id="signup.input.validation" />
diff --git a/components/post-preview.js b/components/post-preview.js
index 793a079e..f7608c66 100644
--- a/components/post-preview.js
+++ b/components/post-preview.js
@@ -57,7 +57,7 @@ export default function PostPreview({
               {title}
             </Link>
           </div>
-          <div className="text-xs inline-block capitalize bg-gray-100 font-inter mt-1.5 px-2.5 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+          <div className="text-xs inline-block capitalize bg-gray-100  mt-1.5 px-2.5 py-0.5 border border-black border-opacity-5 text-black rounded-full">
             {tag?`${tag.attributes?.name}`:''}
           </div>
         </div>
diff --git a/components/post-title.js b/components/post-title.js
index 298da9a1..22bcb008 100644
--- a/components/post-title.js
+++ b/components/post-title.js
@@ -1,6 +1,6 @@
 export default function PostTitle({ children }) {
   return (
-    <h1 className="text-6xl tracking-tight md:text-[72px] w-full leading-tight max-w-[46rem] text-black/90 font-inter font-medium text-left drop-shadow-sm">
+    <h1 className="text-6xl tracking-tight md:text-[72px] w-full leading-tight max-w-[46rem] text-black/90  font-medium text-left drop-shadow-sm">
       {children}
     </h1>
   );
diff --git a/components/related-posts.js b/components/related-posts.js
index 48d27e1d..24ae1fcc 100644
--- a/components/related-posts.js
+++ b/components/related-posts.js
@@ -8,7 +8,7 @@ export default function RelatedPosts({
 }) {
   return (
     <div className="hidden md:block bg-white rounded-lg mt-6 p-6 lg:mb-16">
-      <h1 className="text-sm font-semibold font-inter-serif mb-3">{title}</h1>
+      <h1 className="text-sm font-semibold  mb-3">{title}</h1>
       {relatedPosts.map((post, index) => {
         post = post.attributes;
         const img = post?.legacyFeaturedImage?.logoNew
diff --git a/components/sign-in/LoginForm.jsx b/components/sign-in/LoginForm.jsx
index 19f5e587..0571e4f9 100644
--- a/components/sign-in/LoginForm.jsx
+++ b/components/sign-in/LoginForm.jsx
@@ -70,7 +70,7 @@ const InviteOnlyForm = ({
           />
         </Link>
       </div>
-      <h2 className="text-3xl font-inter text-gray-800 font-semibold">
+      <h2 className="text-3xl  text-gray-800 font-semibold">
         Create an account
       </h2>
       <p className="mt-2 mb-4 text-black/60">
@@ -241,7 +241,7 @@ const ProviderForm = ({
           alt="Prototypr Logo"
         />
       </div>
-      <h2 className="text-3xl font-inter text-black/90 font-semibold">
+      <h2 className="text-3xl  text-black/90 font-semibold">
         {(isSignUp || inviteeEmail) ? `You're invited!` : "Welcome back"}
       </h2>
       {(isSignUp || inviteeEmail) ? (
diff --git a/components/sign-in/LoginSide.jsx b/components/sign-in/LoginSide.jsx
index 0627097d..a1d6b262 100644
--- a/components/sign-in/LoginSide.jsx
+++ b/components/sign-in/LoginSide.jsx
@@ -9,7 +9,7 @@ const LoginSide = ({ user, title, showArrow }) => {
 <path d="M341.516 142.568C342.382 141.155 344.229 140.711 345.641 141.576C347.054 142.442 347.499 144.288 346.633 145.701L341.516 142.568ZM155.689 135L155.559 132.003L155.56 132.003L155.689 135ZM194.721 237.947L192.649 235.778L192.649 235.778L194.721 237.947ZM27.6653 119.144C27.5385 117.492 28.7748 116.05 30.4268 115.923C32.0788 115.796 33.5209 117.033 33.6477 118.685L27.6653 119.144ZM352.818 167.075C353.097 168.708 352 170.259 350.367 170.538C348.734 170.818 347.184 169.721 346.904 168.088L352.818 167.075ZM345.502 142.138L345.376 139.141C346.884 139.078 348.204 140.144 348.458 141.632L345.502 142.138ZM319.376 145.693C317.723 145.591 316.465 144.167 316.568 142.513C316.67 140.86 318.094 139.602 319.748 139.705L319.376 145.693ZM344.075 144.135C346.633 145.701 346.633 145.703 346.632 145.704C346.631 145.705 346.63 145.707 346.628 145.709C346.626 145.713 346.622 145.719 346.618 145.727C346.609 145.741 346.596 145.762 346.579 145.789C346.546 145.843 346.497 145.922 346.433 146.024C346.305 146.228 346.116 146.527 345.868 146.914C345.372 147.688 344.639 148.813 343.681 150.235C341.764 153.079 338.945 157.11 335.318 161.891C328.069 171.446 317.567 184.027 304.568 196.095C278.707 220.107 242.254 242.724 201.587 234.031L202.841 228.164C240.527 236.22 275.005 215.356 300.486 191.698C313.158 179.933 323.43 167.633 330.538 158.265C334.089 153.584 336.843 149.645 338.705 146.882C339.636 145.5 340.344 144.414 340.817 143.676C341.053 143.308 341.23 143.027 341.348 142.84C341.406 142.746 341.45 142.676 341.478 142.631C341.492 142.608 341.502 142.591 341.509 142.581C341.512 142.575 341.514 142.572 341.515 142.57C341.516 142.569 341.516 142.568 341.517 142.568C341.517 142.568 341.516 142.568 344.075 144.135ZM201.587 234.031C161.406 225.442 140.343 201.031 133.935 178.13C130.75 166.748 131.165 155.626 134.847 147.094C138.569 138.47 145.709 132.431 155.559 132.003L155.819 137.998C148.675 138.308 143.34 142.556 140.356 149.471C137.332 156.478 136.812 166.148 139.713 176.513C145.475 197.103 164.669 220.004 202.841 228.164L201.587 234.031ZM155.56 132.003C164.977 131.597 175.008 135.675 183.937 142.307C192.906 148.97 201.033 158.401 206.67 169.197C217.963 190.825 219.443 218.488 196.793 240.117L192.649 235.778C212.832 216.504 211.787 191.96 201.352 171.974C196.125 161.964 188.587 153.236 180.359 147.124C172.09 140.982 163.392 137.671 155.818 137.998L155.56 132.003ZM196.793 240.117C185.254 251.138 169.106 254.764 151.7 252.797C134.298 250.831 115.357 243.264 97.6766 231.503C62.3528 208.004 31.3613 167.269 27.6653 119.144L33.6477 118.685C37.1683 164.525 66.8 203.756 101 226.507C118.081 237.87 136.127 244.999 152.374 246.835C168.617 248.671 182.779 245.205 192.649 235.778L196.793 240.117ZM346.904 168.088L342.545 142.645L348.458 141.632L352.818 167.075L346.904 168.088ZM345.502 142.138C345.627 145.136 345.627 145.136 345.627 145.136C345.627 145.136 345.626 145.136 345.626 145.136C345.625 145.136 345.624 145.136 345.623 145.136C345.62 145.136 345.617 145.136 345.611 145.136C345.601 145.137 345.586 145.137 345.566 145.138C345.526 145.14 345.467 145.142 345.389 145.146C345.234 145.152 345.006 145.161 344.715 145.173C344.133 145.196 343.295 145.229 342.275 145.268C340.234 145.345 337.459 145.445 334.524 145.535C328.738 145.713 322.083 145.861 319.376 145.693L319.748 139.705C322.108 139.851 328.423 139.719 334.34 139.538C337.256 139.448 340.016 139.349 342.048 139.272C343.063 139.234 343.896 139.201 344.475 139.178C344.764 139.166 344.99 139.157 345.143 139.151C345.219 139.148 345.278 139.145 345.317 139.143C345.337 139.143 345.352 139.142 345.361 139.142C345.366 139.141 345.37 139.141 345.372 139.141C345.374 139.141 345.375 139.141 345.375 139.141C345.375 139.141 345.376 139.141 345.376 139.141C345.376 139.141 345.376 139.141 345.502 142.138Z" fill="#3EA7F3"/>
 </svg>:null}
               <Sparkle size={44}/>
-          <h1 className="text-4xl leading-snug text-white font-medium font-inter mt-4">
+          <h1 className="text-4xl leading-snug text-white font-medium  mt-4">
           {title?title: 'From concept to creation, start here.'}
           </h1>
         <p className="my-4 max-w-[450px]">Turn ideas into reality with tools and resources for every step of your product journey.</p>
diff --git a/components/sub-nav.js b/components/sub-nav.js
index 36035029..ccdc7c0f 100644
--- a/components/sub-nav.js
+++ b/components/sub-nav.js
@@ -422,7 +422,7 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
         </Link>
         <Link href="/">
           <p
-            className={`cursor-pointer font-inter-serif hidden xl:block leading-4 text-base my-auto h-8 font-semibold normal-case ${
+            className={`cursor-pointer  hidden xl:block leading-4 text-base my-auto h-8 font-semibold normal-case ${
               collapse ? "w-0 opacity-0" : "w-auto opacity-1 ml-3"
             } transition transition-all duration-150 ease-in-out`}
           >
@@ -561,7 +561,7 @@ export const NavigationMenuDemo = ({ activeNav, collapse }) => {
 
       {/* tagline */}
       <p
-        className={`my-auto font-inter-serif hidden xl:block normal-case font-medium ${
+        className={`my-auto  hidden xl:block normal-case font-medium ${
           !collapse
             ? "opacity-0 -z-10 absolute right-0 pt-3.5 text-gray-50 -mr-12 text-xs"
             : "text-base"
diff --git a/components/toolbox/forms/MediaForm.js b/components/toolbox/forms/MediaForm.js
index abbc2720..04524fb2 100644
--- a/components/toolbox/forms/MediaForm.js
+++ b/components/toolbox/forms/MediaForm.js
@@ -116,12 +116,14 @@ const Form = ({ user, postObject, isEditMode }) => {
               toast.success("Upload complete!", {
                 duration: 3000,
               });
+              setIsSubmitting(false);
             })
             .catch(function (error) {
               console.log(error);
               toast.console.warn("The logo failed to save.", {
                 duration: 3000,
               });
+              setIsSubmitting(false);
             });
         }
 
@@ -214,12 +216,14 @@ const Form = ({ user, postObject, isEditMode }) => {
                   } else {
                     setIsSubmitting(false);
                   }
+                  setIsSubmitting(false);
                 })
                 .catch(function (error) {
                   console.log(error);
                   toast.console.warn("The gallery failed to update.", {
                     duration: 3000,
                   });
+                  setIsSubmitting(false);
                 });
             }
           }
diff --git a/components/toolbox/toolboxSearchBox.js b/components/toolbox/toolboxSearchBox.js
index d687b2f1..f5cd835d 100644
--- a/components/toolbox/toolboxSearchBox.js
+++ b/components/toolbox/toolboxSearchBox.js
@@ -132,7 +132,7 @@ const Hit = ({ hit }) => {
             hit={hit}
           />
           <div className="mt-1.5">
-            <span className="capitalize text-xs capitalize bg-gray-100 font-inter px-3 py-0.5 border border-black border-opacity-5 text-gray-500 rounded-full">
+            <span className="capitalize text-xs capitalize bg-gray-100  px-3 py-0.5 border border-black border-opacity-5 text-gray-500 rounded-full">
               {hit.type}
             </span>
           </div>
diff --git a/components/user/InterestsSelect.js b/components/user/InterestsSelect.js
index 1b8488e5..a8f7928c 100644
--- a/components/user/InterestsSelect.js
+++ b/components/user/InterestsSelect.js
@@ -139,10 +139,10 @@ const InterestsSelect = ({user,next, previous, selectedOptions, setSelectedOptio
             {next?
               <div className="w-full p-8 pb-3 md:pb-3 text-center">
                  <div>
-                      <h2 className="text-3xl mb-2 font-inter-serif text-black/90 font-semibold text-center">
+                      <h2 className="text-3xl mb-2  text-black/90 font-semibold text-center">
                         What are your goals?   
                       </h2>
-                    <h3 className="text-lg font-inter-serif text-gray-500 text-center mb-6">
+                    <h3 className="text-lg  text-gray-500 text-center mb-6">
                         Let us know what you're looking for
                     </h3>
                     </div>
diff --git a/components/user/NewslettersSelect.js b/components/user/NewslettersSelect.js
index 18d335f1..16646b6a 100644
--- a/components/user/NewslettersSelect.js
+++ b/components/user/NewslettersSelect.js
@@ -119,10 +119,10 @@ const NewslettersSelect = ({user,next, previous, selectedOptions, setSelectedOpt
           {next?
               <div className="w-full p-8 pb-3 md:pb-3 text-center">
               <div>
-                 <h2 className="text-3xl mb-2 font-inter-serif text-black/90 font-semibold text-center">
+                 <h2 className="text-3xl mb-2  text-black/90 font-semibold text-center">
                         Choose newsletter updates   
                       </h2>
-                    <h3 className="text-lg font-inter-serif text-gray-500 text-center mb-6">
+                    <h3 className="text-lg  text-gray-500 text-center mb-6">
                         Stay in the loop, get job opportunities and more
                     </h3>
                     </div>
diff --git a/components/user/TopicsSelect.js b/components/user/TopicsSelect.js
index a1bc412b..c75adb82 100644
--- a/components/user/TopicsSelect.js
+++ b/components/user/TopicsSelect.js
@@ -91,11 +91,11 @@ const TopicsSelect = ({
                     {next?
                     <>
                     <div className="flex justify-center mx-auto mb-1">
-                      <h2 className="text-3xl font-inter-serif text-black/90 font-semibold text-center">
+                      <h2 className="text-3xl  text-black/90 font-semibold text-center">
                         Choose some topics   
                       </h2>
                     </div>
-                    <h3 className="text-lg font-inter-serif text-gray-500 text-center mb-6">
+                    <h3 className="text-lg  text-gray-500 text-center mb-6">
                         Share your interests
                     </h3>
                     </>
diff --git a/components/user/WMOnboarding.jsx b/components/user/WMOnboarding.jsx
index a0775b4c..7b7e86d7 100644
--- a/components/user/WMOnboarding.jsx
+++ b/components/user/WMOnboarding.jsx
@@ -55,7 +55,7 @@ export default function Onboarding({ allTags, user }) {
               render={({ previous }) => (
                 <div className="md:w-[585px] w-full px-10 lg:px-0">
                   <div>
-                    <h1 className="text-3xl font-inter-serif text-gray-900 font-semibold mb-3">
+                    <h1 className="text-3xl  text-gray-900 font-semibold mb-3">
                       {`You're ready to go!`}
                     </h1>
                   </div>
diff --git a/components/v4/avatar/Avatar.js b/components/v4/avatar/Avatar.js
index fa3fb8ef..32054e3c 100644
--- a/components/v4/avatar/Avatar.js
+++ b/components/v4/avatar/Avatar.js
@@ -16,7 +16,7 @@ const Avatar = ({ size, author, src, date }) => {
   }
   return (
     <Link href={`/people/${author?.slug}`}>
-      <div className="flex font-inter w-full max-w-[300px]">
+      <div className="flex  w-full max-w-[300px]">
         <div
           className={`relative ${avatarSize} overflow-hidden border border-gray-100`}
         >
diff --git a/components/v4/avatar/AvatarLine.js b/components/v4/avatar/AvatarLine.js
index 9fd9a79e..c70aab77 100644
--- a/components/v4/avatar/AvatarLine.js
+++ b/components/v4/avatar/AvatarLine.js
@@ -16,7 +16,7 @@ const AvatarLine = ({ size, author, src, date }) => {
   }
   return (
     <Link href={`/people/${author?.slug}`}>
-      <div className="flex font-inter w-full max-w-[300px]">
+      <div className="flex  w-full max-w-[300px]">
         <div className={`relative ${avatarSize} overflow-hidden`}>
           <Image
             className="object-cover"
diff --git a/components/v4/card/BigCard/BigBackgroundCard.js b/components/v4/card/BigCard/BigBackgroundCard.js
index 4e26b482..bde521fc 100644
--- a/components/v4/card/BigCard/BigBackgroundCard.js
+++ b/components/v4/card/BigCard/BigBackgroundCard.js
@@ -26,9 +26,9 @@ const BigBackgroundCard = ({
 }) => {
 
   return (
-    // <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row lg:flex-col font-inter w-full max-w-[985px]">
+    // <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row lg:flex-col  w-full max-w-[985px]">
     <div
-      className={`bg-white h-full p-0 border border-gray-300/50 shadow-sm overflow-hidden group hover:shadow-lg hover:scale-[1.005] transition transition-all duration-300 rounded-2xl flex flex-col ${layout == 3 ? "" : `sm:flex-row ${flip?'sm:flex-row-reverse':''}`} font-inter w-full `}
+      className={`bg-white h-full p-0 border border-gray-300/50 shadow-sm overflow-hidden group hover:shadow-lg hover:scale-[1.005] transition transition-all duration-300 rounded-2xl flex flex-col ${layout == 3 ? "" : `sm:flex-row ${flip?'sm:flex-row-reverse':''}`}  w-full `}
     >
       <div
         className={`${imageDimensions ? imageDimensions : layout == 2 ? "md:w-[45%] border-r md:h-[320px]" : layout == 3 ? "w-full md:h-[364px] border-b" : "md:w-3/5 border-r md:h-[440px]"} w-full relative ${!imageDimensions ? "h-[240px] sm:h-[224px]" : ""} overflow-hidden border-gray-200`}
diff --git a/components/v4/card/BigCard/BigCard.js b/components/v4/card/BigCard/BigCard.js
index c91301ed..666eb232 100644
--- a/components/v4/card/BigCard/BigCard.js
+++ b/components/v4/card/BigCard/BigCard.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const BigCard = ({ title, excerpt, image, tags, date, avatar, author }) => {
   return (
-    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row font-inter w-full max-w-[985px]">
+    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row  w-full max-w-[985px]">
       <div className="w-full mb-4 sm:mb-0 sm:w-5/12 md:w-6/12 relative h-[224px] sm:h-[224px] md:h-[250px] rounded-xl overflow-hidden border border-gray-200">
         <Image
           className="object-cover cursor-pointer"
diff --git a/components/v4/card/BigCard/BigCardB.js b/components/v4/card/BigCard/BigCardB.js
index 96c03027..9f8eb2c0 100644
--- a/components/v4/card/BigCard/BigCardB.js
+++ b/components/v4/card/BigCard/BigCardB.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const BigCard = ({ link,title, excerpt, image, tags, date, avatar, author }) => {
   return (
-    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row font-inter w-full max-w-[985px]">
+    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row  w-full max-w-[985px]">
       <div className="w-full mb-4 sm:mb-0 sm:w-5/12 md:w-6/12 relative h-[224px] sm:h-[224px] md:h-[250px] rounded-xl overflow-hidden border border-gray-200">
         <Link href={link??''}>
           <Image
diff --git a/components/v4/card/BigCard/BigCardC.js b/components/v4/card/BigCard/BigCardC.js
index 901da575..ea372ca2 100644
--- a/components/v4/card/BigCard/BigCardC.js
+++ b/components/v4/card/BigCard/BigCardC.js
@@ -6,8 +6,8 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const BigCardC = ({ link,title, excerpt, image, tags, date, avatar, author }) => {
   return (
-    // <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row lg:flex-col font-inter w-full max-w-[985px]">
-    <div className="bg-white p-3 shadow-md transition transition-all duration-300 rounded-2xl flex flex-col sm:flex-row lg:flex-col font-inter w-full max-w-[985px]">
+    // <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row lg:flex-col  w-full max-w-[985px]">
+    <div className="bg-white p-3 shadow-md transition transition-all duration-300 rounded-2xl flex flex-col sm:flex-row lg:flex-col  w-full max-w-[985px]">
       <div className="w-full w-full relative h-[180px] sm:h-[224px] md:h-[305px] rounded-xl overflow-hidden border border-gray-200">
         <Link href={link??''}>
           <Image
diff --git a/components/v4/card/BigCard/BigCardD.js b/components/v4/card/BigCard/BigCardD.js
index 3fa35dbe..f070f039 100644
--- a/components/v4/card/BigCard/BigCardD.js
+++ b/components/v4/card/BigCard/BigCardD.js
@@ -5,7 +5,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const BigCard = ({ link,title, excerpt, image, tags, date, avatar, author }) => {
   return (
-    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row font-inter w-full pr-">
+    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row  w-full pr-">
       <div  style={{ flex: `0 0 180px` }} className="w-full mb-4 sm:my-auto relative h-[128px] w-full md:w-[190px] rounded-xl overflow-hidden border border-gray-200">
         <Link href={link??''}>
           <Image
diff --git a/components/v4/card/BigCard/BigCardPost.js b/components/v4/card/BigCard/BigCardPost.js
index df84e658..cd0e511b 100644
--- a/components/v4/card/BigCard/BigCardPost.js
+++ b/components/v4/card/BigCard/BigCardPost.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const BigCardPost = ({ link,title, excerpt, image, tags, date, avatar, author }) => {
   return (
-    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row lg:flex-col font-inter w-full max-w-[985px]">
+    <div className="hover:bg-white transition transition-all duration-300 rounded-2xl p-1 flex flex-col sm:flex-row lg:flex-col  w-full max-w-[985px]">
       <div className="w-full w-full relative h-[180px] sm:h-[224px] md:h-[248px] rounded-xl overflow-hidden border border-gray-200">
         <Link href={link??''}>
           <Image
diff --git a/components/v4/card/CategoriesIconCard.js b/components/v4/card/CategoriesIconCard.js
index 350a1820..7be151ad 100644
--- a/components/v4/card/CategoriesIconCard.js
+++ b/components/v4/card/CategoriesIconCard.js
@@ -25,16 +25,16 @@ const CategoriesIconCard = ({ topic, withBackground, showCount }) => {
       ><div className={`${withBackground?'bg-white rounded-xl p-4':''} shadow-sm border border-gray-200/70 border-1 w-full h-auto rounded-xl cursor-pointer flex flex-col`}>
           <div className="flex flex-row justify-between rounded-xl">
             <div className="flex flex-col pl-1 justify-center">
-              <div className="capitalize overflow-hidden line-clamp-1 inline font-medium py-0 mb-0.5 font-inter text-base tracking-tight">
+              <div className="capitalize overflow-hidden line-clamp-1 inline font-medium py-0 mb-0.5  text-base tracking-tight">
                 {topic?.name}
-                {/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                {/* <span className="text-xs ml-2 capitalize bg-gray-100  px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                   Promoted
                 </span> */}
               </div>
               {(topic?.name && showCount!==false) ? (
                 // <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
                   <div className="flex flex-row text-sm text-gray-500">
-                    {/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
+                    {/* <span className="text-xs mt-1 capitalize bg-gray-100  px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
                     <span className="text-xs text-gray-500">
                       {topic.count} articles
                     </span>
diff --git a/components/v4/card/CategoriesIconCardLarge.js b/components/v4/card/CategoriesIconCardLarge.js
index 3eb1e289..45928824 100644
--- a/components/v4/card/CategoriesIconCardLarge.js
+++ b/components/v4/card/CategoriesIconCardLarge.js
@@ -31,16 +31,16 @@ const CategoriesIconCardLarge = ({ topic, withBackground }) => {
               <img className="w-full h-full opacity-70 bg-white" src={topic.icon}/>:''}
             </div>
             <div className="flex flex-col pl-1 justify-center">
-              <div className="capitalize overflow-hidden line-clamp-1 inline font-medium py-0 mb-0.5 font-inter text-base tracking-tight">
+              <div className="capitalize overflow-hidden line-clamp-1 inline font-medium py-0 mb-0.5  text-base tracking-tight">
                 {topic?.name}
-                {/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                {/* <span className="text-xs ml-2 capitalize bg-gray-100  px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                   Promoted
                 </span> */}
               </div>
               {topic?.name ? (
                 // <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
                   <div className="flex flex-row text-sm text-gray-500">
-                    {/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
+                    {/* <span className="text-xs mt-1 capitalize bg-gray-100  px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
                     <span className="text-xs text-gray-500">
                       {topic.count} resources
                     </span>
diff --git a/components/v4/card/CategoriesOption.js b/components/v4/card/CategoriesOption.js
index fdbe946d..f1894291 100644
--- a/components/v4/card/CategoriesOption.js
+++ b/components/v4/card/CategoriesOption.js
@@ -14,16 +14,16 @@ const CategoriesOption = ({ topic, withBackground, showCount }) => {
               <img className="w-full h-full" src={topic.icon}/>:''}
             </div>
             <div className="flex flex-col pl-1 justify-center">
-              <div className="capitalize overflow-hidden line-clamp-1 inline font-medium py-0 font-inter text-sm text-gray-800">
+              <div className="capitalize overflow-hidden line-clamp-1 inline font-medium py-0  text-sm text-gray-800">
                 {topic?.name}
-                {/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                {/* <span className="text-xs ml-2 capitalize bg-gray-100  px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                   Promoted
                 </span> */}
               </div>
               {(topic?.name && showCount!==false) ? (
                 // <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
                   <div className="flex flex-row text-sm text-gray-500">
-                    {/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
+                    {/* <span className="text-xs mt-1 capitalize bg-gray-100  px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
                     <span className="text-xs text-gray-500">
                       {topic.count} articles
                     </span>
diff --git a/components/v4/card/JumboTag.js b/components/v4/card/JumboTag.js
index 83c2bbb1..13d38e2d 100644
--- a/components/v4/card/JumboTag.js
+++ b/components/v4/card/JumboTag.js
@@ -37,7 +37,7 @@ const JumboTag = ({ topic, withBackground, showCount }) => {
           </div>
         </div>
           <div className="flex relative justify-between p-2">
-            <div className="capitalize text-lg overflow-hidden line-clamp-1 inline font-medium font-inter">
+            <div className="capitalize text-lg overflow-hidden line-clamp-1 inline font-medium ">
               {topic?.name}
             </div>
             <div className="bg-blue-500 flex justify-center my-auto h-6 w-6 rounded-full">
diff --git a/components/v4/card/JumboTagB.js b/components/v4/card/JumboTagB.js
index 5e82902a..9926679b 100644
--- a/components/v4/card/JumboTagB.js
+++ b/components/v4/card/JumboTagB.js
@@ -36,7 +36,7 @@ const JumboTag = ({ topic, withBackground, showCount }) => {
           </div>
           <div className="flex absolute bottom-0 w-full left-0 bg-black/10 justify-between p-2">
             <div className="w-full h-full bg-white/10 mb-[1px] rounded-b-lg absolute left-0 top-0 backdrop-blur-[1px]"/>
-            <div className="capitalize z-10 text-base text-white overflow-hidden line-clamp-1 inline font-medium font-inter">
+            <div className="capitalize z-10 text-base text-white overflow-hidden line-clamp-1 inline font-medium ">
               {topic?.name}
             </div>
             <div className="bg-blue-500 z-10 flex justify-center my-auto h-6 w-6 rounded-full">
diff --git a/components/v4/card/JumboTagC.js b/components/v4/card/JumboTagC.js
index 8e35e672..04861a9c 100644
--- a/components/v4/card/JumboTagC.js
+++ b/components/v4/card/JumboTagC.js
@@ -32,7 +32,7 @@ const JumboTag = ({ topic, withBackground, showCount }) => {
           </div>
         </div>
         <div className="flex w-full relative justify-between p-2">
-            <div className="capitalize z-10 text-base text-gray-800 overflow-hidden line-clamp-1 inline font-medium font-inter">
+            <div className="capitalize z-10 text-base text-gray-800 overflow-hidden line-clamp-1 inline font-medium ">
               {topic?.name}
             </div>
             <div className="bg-gray-500/20 z-10 flex justify-center my-auto h-6 w-6 rounded-full">
diff --git a/components/v4/card/NewsColumnCard.js b/components/v4/card/NewsColumnCard.js
index 97627c6a..089f6fa3 100644
--- a/components/v4/card/NewsColumnCard.js
+++ b/components/v4/card/NewsColumnCard.js
@@ -58,16 +58,16 @@ const NewsColumnCard = ({ tool, withBackground, small }) => {
               )}
             </div> */}
             <div className="flex flex-col pl-1 justify-center">
-              <div className=" overflow-hidden line-clamp-2 inline font-base py-0 mb-0 font-inter text-base">
+              <div className=" overflow-hidden line-clamp-2 inline font-base py-0 mb-0  text-base">
                 {title}
-                {/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                {/* <span className="text-xs ml-2 capitalize bg-gray-100  px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                   Promoted
                 </span> */}
               </div>
               {tags?.data?.length ? (
                 // <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
                   <div className="flex flex-row text-sm text-gray-500">
-                    {/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
+                    {/* <span className="text-xs mt-1 capitalize bg-gray-100  px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
                     <span className="text-xs capitalize text-gray-500">
                       {tags?.data[0]?.attributes?.name}
                     </span>
diff --git a/components/v4/card/SmallCard/MediumPost.js b/components/v4/card/SmallCard/MediumPost.js
index 95276bbf..c8b14b9c 100644
--- a/components/v4/card/SmallCard/MediumPost.js
+++ b/components/v4/card/SmallCard/MediumPost.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const MediumPost = ({post,showAuthor,showDescription,link, title, image, tags, date, avatar, author, excerpt, imageSmall, imageVSmall, imageHeight}) => {
   return (
-    <div className="flex group hover:shadow-lg hover:scale-[1.005] h-full sm:mt-0 flex-col hover:bg-white transition transition-all duration-300 p-0 bg-white shadow-sm border border-gray-300/60 rounded-2xl overflow-hidden font-inter w-full">
+    <div className="flex group hover:shadow-lg hover:scale-[1.005] h-full sm:mt-0 flex-col hover:bg-white transition transition-all duration-300 p-0 bg-white shadow-sm border border-gray-300/60 rounded-2xl overflow-hidden  w-full">
       {image && post?.attributes?.base64 ? (
         <div className={`w-full border-b border-gray-200 shrink-0 h-[240px] max-w-full ${imageHeight?imageHeight:imageVSmall?'md:h-[144px]':imageSmall?'md:h-[180px]':'md:h-[240px]'} md:max-w-full relative overflow-hidden`}>
           <Link href={link??''}>
diff --git a/components/v4/card/SmallCard/SmallCard.js b/components/v4/card/SmallCard/SmallCard.js
index e7bcb884..a9fcacfe 100644
--- a/components/v4/card/SmallCard/SmallCard.js
+++ b/components/v4/card/SmallCard/SmallCard.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCardB = ({ title, image, tags, date, avatar, author }) => {
   return (
-    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row font-inter w-full max-w-[470px]">
+    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row  w-full max-w-[470px]">
       {image ? (
         <div className="w-full shrink-0 h-[90px] max-w-[100px] xs:max-w-[195px] xs:h-[124px] relative rounded-xl overflow-hidden border border-gray-100">
           <Image
diff --git a/components/v4/card/SmallCard/SmallCardB.js b/components/v4/card/SmallCard/SmallCardB.js
index 3aefabc5..7381aeba 100644
--- a/components/v4/card/SmallCard/SmallCardB.js
+++ b/components/v4/card/SmallCard/SmallCardB.js
@@ -7,7 +7,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCardB = ({ title, image, tags, date, avatar, author, showAuthor, link }) => {
   return (
-    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row font-inter w-full max-w-[490px]">
+    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row  w-full max-w-[490px]">
       {image ? (
         <div className="w-full shrink-0 h-[90px] max-w-[100px] xs:max-w-[195px] xs:h-[124px] relative rounded-xl overflow-hidden border border-gray-100">
          <Link href={link}>
diff --git a/components/v4/card/SmallCard/SmallCardC.js b/components/v4/card/SmallCard/SmallCardC.js
index 6cdb8878..bb36ce80 100644
--- a/components/v4/card/SmallCard/SmallCardC.js
+++ b/components/v4/card/SmallCard/SmallCardC.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCardB = ({ title, image, tags, date, avatar, author }) => {
   return (
-    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row font-inter w-full max-w-[470px]">
+    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row  w-full max-w-[470px]">
       {image ? (
         <div className="w-full shrink-0 h-[90px] max-w-[100px] xs:max-w-[195px] xs:h-[124px] relative rounded-xl overflow-hidden border border-gray-100">
           <Image
diff --git a/components/v4/card/SmallCard/SmallCardD.js b/components/v4/card/SmallCard/SmallCardD.js
index d17ac8a5..eaa15de2 100644
--- a/components/v4/card/SmallCard/SmallCardD.js
+++ b/components/v4/card/SmallCard/SmallCardD.js
@@ -7,7 +7,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCard = ({ title, image, tags, date, avatar, author }) => {
   return (
-    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row font-inter w-full max-w-[470px]">
+    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row  w-full max-w-[470px]">
       {image ? (
         <div className="w-full shrink-0 h-[90px] max-w-[100px] xs:max-w-[195px] xs:h-[124px] relative rounded-xl overflow-hidden border border-gray-100">
            <div
diff --git a/components/v4/card/SmallCard/SmallCardE.js b/components/v4/card/SmallCard/SmallCardE.js
index d80d4366..430e7696 100644
--- a/components/v4/card/SmallCard/SmallCardE.js
+++ b/components/v4/card/SmallCard/SmallCardE.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCard = ({link, title, image, tags, date, avatar, author }) => {
   return (
-    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row font-inter w-full max-w-[470px]">
+    <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row  w-full max-w-[470px]">
       {image ? (
         <div className="w-full shrink-0 h-[90px] max-w-[100px] xs:max-w-[195px] xs:h-[124px] relative rounded-xl overflow-hidden border border-gray-100">
           <Link href={link??''}>
diff --git a/components/v4/card/SmallCard/SmallCardF.js b/components/v4/card/SmallCard/SmallCardF.js
index 7c19b207..8f91c34f 100644
--- a/components/v4/card/SmallCard/SmallCardF.js
+++ b/components/v4/card/SmallCard/SmallCardF.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCard = ({link, title, image, tags, date, avatar, author, content, excerpt }) => {
   return (
-    <div className="group mb-3 lg:mb-0 hover:scale-[1.01] hover:shadow-lg transition transition-all duration-400 bg-white row-span-1 shadow-sm border border-gray-300/50 p-3 flex flex-col-reverse sm:flex-row hover:bg-white transition transition-all duration-300 rounded-2xl font-inter w-full justify-between">
+    <div className="group mb-3 lg:mb-0 hover:scale-[1.01] hover:shadow-lg transition transition-all duration-400 bg-white row-span-1 shadow-sm border border-gray-300/50 p-3 flex flex-col-reverse sm:flex-row hover:bg-white transition transition-all duration-300 rounded-2xl  w-full justify-between">
       
       <div className="shrink mt-3 pl-1 pr-3.5 sm:mt-0 flex flex-col justify-between">
           <div>
diff --git a/components/v4/card/SmallCard/SmallCardG.js b/components/v4/card/SmallCard/SmallCardG.js
index fe881cf3..f74d89e5 100644
--- a/components/v4/card/SmallCard/SmallCardG.js
+++ b/components/v4/card/SmallCard/SmallCardG.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCard = ({link, title, image, tags, date, avatar, author, excerpt }) => {
   return (
-    <div className="flex mt-3 hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-col sm:flex-row font-inter w-full pr-">
+    <div className="flex mt-3 hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-col sm:flex-row  w-full pr-">
       {image ? (
         <div className="w-full shrink-0 my-auto h-[160px] sm:h-[90px] sm:w-[124px] sm:basis-[124px] relative rounded-xl overflow-hidden border border-gray-100">
           <Link href={link??''}>
diff --git a/components/v4/card/SmallCard/SmallCardH.js b/components/v4/card/SmallCard/SmallCardH.js
index 4133d05b..9bed929c 100644
--- a/components/v4/card/SmallCard/SmallCardH.js
+++ b/components/v4/card/SmallCard/SmallCardH.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCard = ({link, title, image, tags, date, avatar, author }) => {
   return (
-    <div className="flex mt-3 bg-white shadow-sm p-8 sm:mt-0 flex-col sm:flex-row hover:bg-white transition transition-all duration-300 rounded-2xl font-inter w-full">
+    <div className="flex mt-3 bg-white shadow-sm p-8 sm:mt-0 flex-col sm:flex-row hover:bg-white transition transition-all duration-300 rounded-2xl  w-full">
       {image ? (
         <div className="w-full mr-1 shrink-0 h-[180px] max-w-full sm:max-w-[190px] md:max-w-full md:h-[156px] md:w-[224px] relative rounded-xl overflow-hidden border border-gray-100">
           <Link href={link??''}>
diff --git a/components/v4/card/SmallCard/SmallCardPost.js b/components/v4/card/SmallCard/SmallCardPost.js
index 85f1a779..722b3ed9 100644
--- a/components/v4/card/SmallCard/SmallCardPost.js
+++ b/components/v4/card/SmallCard/SmallCardPost.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCard = ({link, title, image, tags, date, avatar, author, excerpt }) => {
   return (
-    <div className="flex mt-3 sm:mt-0 flex-col sm:flex-row hover:bg-white transition transition-all duration-300 p-1 rounded-2xl font-inter w-full">
+    <div className="flex mt-3 sm:mt-0 flex-col sm:flex-row hover:bg-white transition transition-all duration-300 p-1 rounded-2xl  w-full">
       {image ? (
         <div className="w-full shrink-0 h-[180px] max-w-full sm:max-w-[190px] md:h-[200px] md:max-w-[320px] relative rounded-xl overflow-hidden border border-gray-100">
           <Link href={link??''}>
diff --git a/components/v4/card/SmallCard/SmallCardStacked.js b/components/v4/card/SmallCard/SmallCardStacked.js
index 9d10a112..3f17c009 100644
--- a/components/v4/card/SmallCard/SmallCardStacked.js
+++ b/components/v4/card/SmallCard/SmallCardStacked.js
@@ -7,7 +7,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCardStacked = ({ title, image, tags, date, avatar, author, showAuthor, link }) => {
   return (
-    <div className="flex shadow-sm hover:scale-[1.01] hover:shadow-lg group border border-gray-300/70 mx-auto md:flex-col md:justify-start bg-white p-0 md:my-0 md:mt-0 lg:mb-0 lg:my-0 overflow-hidden transition transition-all duration-300 rounded-2xl font-inter w-full max-w-[490px]">
+    <div className="flex shadow-sm hover:scale-[1.01] hover:shadow-lg group border border-gray-300/70 mx-auto md:flex-col md:justify-start bg-white p-0 md:my-0 md:mt-0 lg:mb-0 lg:my-0 overflow-hidden transition transition-all duration-300 rounded-2xl  w-full max-w-[490px]">
       {image ? (
         <div className="group-hover:scale-[1.01] transition transition-all duration-700 hidden md:inline-block w-full my-auto md:my-0 shrink-0 h-[54px] w-[54px] md:w-full md:h-[164px] relative border-b border-gray-200 overflow-hidden">
          <Link href={link}>
diff --git a/components/v4/card/ToolIconCard.js b/components/v4/card/ToolIconCard.js
index 68dca35b..4ef67662 100644
--- a/components/v4/card/ToolIconCard.js
+++ b/components/v4/card/ToolIconCard.js
@@ -73,9 +73,9 @@ const ToolIconCard = ({ tool, withBackground, small }) => {
                 />
               </div>
               <div className="flex flex-col justify-center">
-                <div className=" overflow-hidden tracking-tight line-clamp-1 inline font-semibold py-0 mb-0 font-inter text-base">
+                <div className=" overflow-hidden tracking-tight line-clamp-1 inline font-semibold py-0 mb-0  text-base">
                   {title}
-                  {/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                  {/* <span className="text-xs ml-2 capitalize bg-gray-100  px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                   Promoted
                 </span> */}
                 </div>
diff --git a/components/v4/card/ToolLargeCard.js b/components/v4/card/ToolLargeCard.js
index ddadee36..08126833 100644
--- a/components/v4/card/ToolLargeCard.js
+++ b/components/v4/card/ToolLargeCard.js
@@ -75,16 +75,16 @@ const coverImage = tool.legacyFeaturedImage?.mediaItemUrl || tool.legacyFeatured
                     )}
                     </div>
                     <div className="flex flex-col pl-1 justify-center">
-                    <div className=" overflow-hidden line-clamp-1 inline font-medium py-0 mb-0 font-inter text-base">
+                    <div className=" overflow-hidden line-clamp-1 inline font-medium py-0 mb-0  text-base">
                         {title}
-                        {/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
+                        {/* <span className="text-xs ml-2 capitalize bg-gray-100  px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                         Promoted
                         </span> */}
                     </div>
                     {tags?.data?.length ? (
                         // <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
                         <div className="flex flex-row text-sm text-gray-500">
-                            {/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
+                            {/* <span className="text-xs mt-1 capitalize bg-gray-100  px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
                             <span className="text-xs capitalize text-gray-500">
                             {tags?.data[0]?.attributes?.name}
                             </span>
diff --git a/components/v4/card/ToolLargeCardProfile.js b/components/v4/card/ToolLargeCardProfile.js
index 13275dab..39b63d65 100644
--- a/components/v4/card/ToolLargeCardProfile.js
+++ b/components/v4/card/ToolLargeCardProfile.js
@@ -39,7 +39,7 @@ const coverImage = tool.legacyFeaturedImage?.mediaItemUrl || tool.legacyFeatured
         }}
         className="flex"
       >
-         <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row font-inter w-full max-w-[470px]">
+         <div className="flex hover:bg-white transition transition-all duration-300 p-1 rounded-2xl flex-row  w-full max-w-[470px]">
       {coverImage ? (
         <div className="w-full shrink-0 h-[90px] max-w-[100px] xs:max-w-[195px] xs:h-[124px] relative rounded-xl overflow-hidden border border-gray-100">
           <Image
@@ -74,13 +74,13 @@ const coverImage = tool.legacyFeaturedImage?.mediaItemUrl || tool.legacyFeatured
                     </div>
                     <div className="flex flex-col pl-1 justify-center">
                         
-                    <div className=" overflow-hidden line-clamp-1 inline font-medium py-0 mb-0 font-inter text-base">
+                    <div className=" overflow-hidden line-clamp-1 inline font-medium py-0 mb-0  text-base">
                         {title}
                     </div>
                     {tags?.data?.length ? (
                         // <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
                         <div className="flex flex-row text-sm text-gray-500">
-                            {/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
+                            {/* <span className="text-xs mt-1 capitalize bg-gray-100  px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
                             <span className="text-xs capitalize text-gray-500">
                             {tags?.data[0]?.attributes?.name}
                             </span>
@@ -94,7 +94,7 @@ const coverImage = tool.legacyFeaturedImage?.mediaItemUrl || tool.legacyFeatured
                 </div>
 
         <Link href="/toolbox">
-            <span className="text-xs inline-block mt-3 capitalize bg-pink-50 font-inter px-2 text-pink-600 py-0.5 border border-black border-opacity-5 rounded-full" style={{maxWidth:'fit-content'}}>
+            <span className="text-xs inline-block mt-3 capitalize bg-pink-50  px-2 text-pink-600 py-0.5 border border-black border-opacity-5 rounded-full" style={{maxWidth:'fit-content'}}>
                 Toolbox
             </span>
         </Link>
diff --git a/components/v4/card/TopicsCloudCard.js b/components/v4/card/TopicsCloudCard.js
index 6df779f5..cf525082 100644
--- a/components/v4/card/TopicsCloudCard.js
+++ b/components/v4/card/TopicsCloudCard.js
@@ -26,7 +26,7 @@ const tags = [
   },
   {
     name: "User Research",
-    link: "/posts/ui/page/1",
+    link: "/posts/user-research/page/1",
   },
   {
     name: "Notion",
@@ -40,7 +40,7 @@ const tags = [
 
 const TopicsCloudCard = ({title="Hot topics"}) => {
   return (
-    <div className="font-inter">
+    <div className="">
       <h3 className="font-semibold text-sm mb-5">{title}</h3>
       <div className="flex flex-wrap">
         {tags.map((tag, index) => {
diff --git a/components/v4/hero/IntroBanner.js b/components/v4/hero/IntroBanner.js
index 3bd50067..74c3e571 100644
--- a/components/v4/hero/IntroBanner.js
+++ b/components/v4/hero/IntroBanner.js
@@ -17,7 +17,7 @@ const IntroBanner = ({ tools, sponsor }) => {
         // style={{background: 'linear-gradient(179.7deg, #040444, rgb(3 3 63))'}}
         className="flex bg-[#EAE9F5] text-gray-800 overflow-hidden overflow-x-scroll bg-opacity-60 border border-gray-100 md:overflow-x-hidden rounded rounded-3xl"
       >
-        <div className="w-full z-10 font-inter p-2 2md:w-full relative flex flex-col">
+        <div className="w-full z-10  p-2 2md:w-full relative flex flex-col">
           {/* <SponsorBubble/> */}
           <div 
           onClick={(e)=>{e.preventDefault();e.stopProgagation}}
diff --git a/components/v4/hero/IntroBanner2.js b/components/v4/hero/IntroBanner2.js
index b176764e..ee61e025 100644
--- a/components/v4/hero/IntroBanner2.js
+++ b/components/v4/hero/IntroBanner2.js
@@ -47,14 +47,14 @@ const IntroBanner = ({ tools, sponsor }) => {
         {/* <div className="hidden lg:block absolute z-10 opacity-100 w-[800px] h-[500px] -mr-[20%] bg-gradient-to-r to-[#d1e8ff] from-transparent via-[#d1e8ff]/10 z-10 h-full top-0 right-0 -mt-[2%] -mr-[20%] object-cover"></div> */}
           <img className="absolute opacity-50 w-full h-full  z-10 h-full top-0 right-0 cursor-collab -mr-[225px] sm:-mr-[40%] 2md:-mr-[20%] xl:-mr-[50%] 2xl:-mr-[60%] object-cover" 
           src="/static/images/toolbox/toolbox-bg-2.svg"  style={{ zIndex:1}}/>
-        <div className="md:col-span-6 relative col-span-12 font-inter relative flex flex-col items-start justify-center gap-8 p-3 md:p-8">
+        <div className="md:col-span-6 relative col-span-12  relative flex flex-col items-start justify-center gap-8 p-3 md:p-8">
           <div 
           onClick={(e)=>{e.preventDefault();e.stopProgagation}}
           className="pointer-events-auto md:pr-0 rounded-3xl z-10" style={{width:'fit-content'}}>
           <h1 className="max-w-[50rem] mt-2 mb-5 text-black/90 text-5xl font-semibold tracking-tighter xl:text-[48px] lg:leading-tight md:leading-tight">
           <span className="drop-shadow-sm ">Everything is a </span> <div className="text-underline inline cursor-collab"><span className="drop-shadow-sm">prototype</span></div>
           </h1>
-          <h2 className="mb-5 text-gray-700 tracking-tight leading-snug text-[18px] font-semibold font-inter md:pr-6 max-w-[32rem]">
+          <h2 className="mb-5 text-gray-700 tracking-tight leading-snug text-[18px] font-semibold  md:pr-6 max-w-[32rem]">
           Start something new. Write a draft, design an app, curate inspiration. Life is a prototype, share your story.
           </h2>
           <div className="flex mt-4 mb-6 sm:mb-0">
diff --git a/components/v4/hero/IntroBanner3.js b/components/v4/hero/IntroBanner3.js
index b7a28c17..e1125265 100644
--- a/components/v4/hero/IntroBanner3.js
+++ b/components/v4/hero/IntroBanner3.js
@@ -17,7 +17,7 @@ const IntroBanner = ({ tools, sponsor }) => {
         // style={{background: 'linear-gradient(179.7deg, #040444, rgb(3 3 63))'}}
         className="flex bg-blue-700 text-white text-left text-gray-800 overflow-hidden overflow-x-scroll border border-gray-100 md:overflow-x-hidden rounded rounded-3xl"
       >
-        <div className="w-full z-10 font-inter p-0 2md:w-full relative flex flex-col">
+        <div className="w-full z-10  p-0 2md:w-full relative flex flex-col">
           {/* <SponsorBubble/> */}
           <div 
           onClick={(e)=>{e.preventDefault();e.stopProgagation}}
diff --git a/components/v4/hero/hero.js b/components/v4/hero/hero.js
index bbafe501..df3680f4 100644
--- a/components/v4/hero/hero.js
+++ b/components/v4/hero/hero.js
@@ -38,11 +38,11 @@ const AuthorCard = ({ data }) => {
         </div>
 
         {data?.attributes?.firstName ? (
-          <p className="text-sm font-inter text-gray-800 font-medium">
+          <p className="text-sm  text-gray-800 font-medium">
             {data?.attributes?.firstName} {data?.attributes?.lastName}
           </p>
         ) : (
-          <p className="text-base font-inter">Unknown</p>
+          <p className="text-base ">Unknown</p>
         )}
       </div>
     </>
@@ -54,7 +54,7 @@ const MetaInfo = ({ tags = [] }) => {
   return (
     <div className="flex flex-row justify-between">
       {tagContent[0]?.attributes?.name && (
-        <span className="text-xs capitalize bg-gray-100  font-inter px-2 py-0.5 border border-black border-opacity-5  text-gray-500 rounded-full">
+        <span className="text-xs capitalize bg-gray-100   px-2 py-0.5 border border-black border-opacity-5  text-gray-500 rounded-full">
           {tagContent[0]?.attributes?.name}
         </span>
       )}
@@ -121,10 +121,10 @@ const LargeCardWithImage = ({ data, type = "regular", colSpan }) => {
           )}{" "}
         </div>
           <div className="flex flex-col grid gap-2">
-            <h1 className="text-2xl leading-2 text-[#222] tracking-tight font-bold font-inter line-clamp-2">
+            <h1 className="text-2xl leading-2 text-[#222] tracking-tight font-bold  line-clamp-2">
               {type === "regular" ? data?.attributes?.title : data?.title}
             </h1>
-            <p className="text-base leading-[24px] font-inter  overflow-clip text-[#626A6E] tracking-[-2%] line-clamp-3">
+            <p className="text-base leading-[24px]   overflow-clip text-[#626A6E] tracking-[-2%] line-clamp-3">
               {type === "regular" ? data?.attributes?.excerpt : data?.excerpt}
             </p>
             <div className="flex mt-2">
@@ -185,10 +185,10 @@ const SmallCardWithImage = ({ src, data, type }) => {
           )}{" "}
         </div>
           <div className="flex flex-col grid gap-2">
-            <h1 className="text-base leading-[24px] text-[#222] font-semibold font-inter m-0 p-0 line-clamp-2">
+            <h1 className="text-base leading-[24px] text-[#222] font-semibold  m-0 p-0 line-clamp-2">
               {type === "regular" ? data?.attributes?.title : data?.title}
             </h1>
-            <p className="md:hidden text-base leading-[24px] font-inter  overflow-clip text-[#626A6E] tracking-[-2%] line-clamp-3">
+            <p className="md:hidden text-base leading-[24px]   overflow-clip text-[#626A6E] tracking-[-2%] line-clamp-3">
               {type === "regular" ? data?.attributes?.excerpt : data?.excerpt}
             </p>
             <div className="flex mt-2">
@@ -218,7 +218,7 @@ const JobFeatureCard = ({ item }) => {
         <div className="flex flex-row justify-between  rounded-lg">
           <div className="flex flex-co grid gap-2 justify-center">
             <div className="flex flex-col ">
-              <p className="text-base line-clamp-2 font-medium  text-[#333] overflow-hidden line-clamp-3 font-inter">
+              <p className="text-base line-clamp-2 font-medium  text-[#333] overflow-hidden line-clamp-3 ">
                 <span className="">{companyName}</span>, is looking for a{" "}
                 {title} in {locations[0]?.name}.
               </p>
@@ -300,8 +300,8 @@ const HeroGrid = ({
           <div
           className="w-full h-full bg-pink-200 w-full lg:mt-8 rounded-[16px] p-6"
         >
-          <h3 className="text-2xl mb-2 font-inter max-w-md text-black font-bold">Tools and resources to shape every idea</h3>
-          <p className="font-inter mb-4 text-base leading-[24px] text-black text-opacity-70">Join 25,000+ creatives who enjoy a regular dose of inspiration and motivation, delivered to your inbox every week.</p>
+          <h3 className="text-2xl mb-2  max-w-md text-black font-bold">Tools and resources to shape every idea</h3>
+          <p className=" mb-4 text-base leading-[24px] text-black text-opacity-70">Join 25,000+ creatives who enjoy a regular dose of inspiration and motivation, delivered to your inbox every week.</p>
           <SignupHomepage/>
         </div>
         </div>
diff --git a/components/v4/layout/CardColumn.js b/components/v4/layout/CardColumn.js
index bd265458..7999b24d 100644
--- a/components/v4/layout/CardColumn.js
+++ b/components/v4/layout/CardColumn.js
@@ -28,7 +28,7 @@ const CardColumn = ({
             <div className="text-sm text-gray-800">New products, daily.</div>
           </div>
           <div className="flex relative">
-            {/* <div className="text-sm my-auto inline text-black/80 font-normal font-inter">
+            {/* <div className="text-sm my-auto inline text-black/80 font-normal ">
               <Link href={`/toolbox/`}>See all</Link>
             </div> */}
             <div className="my-auto">
diff --git a/components/v4/layout/HeroPostGrid.js b/components/v4/layout/HeroPostGrid.js
index 8b51d1d7..e7d60b7c 100644
--- a/components/v4/layout/HeroPostGrid.js
+++ b/components/v4/layout/HeroPostGrid.js
@@ -42,7 +42,7 @@ const HeroPostGrid = ({
         <div className="flex justify-between mb-4">
           {showHeading !== false ? <RSSTitle title={title} /> : ""}
           <div className="flex relative p-2">
-            <div className="text-md inline text-gray-800 my-auto font-normal font-inter">
+            <div className="text-md inline text-gray-800 my-auto font-normal ">
               <Link href={`/posts/`}>See all</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/LargePostGridB.js b/components/v4/layout/LargePostGridB.js
index 220114e8..3a12cb1c 100644
--- a/components/v4/layout/LargePostGridB.js
+++ b/components/v4/layout/LargePostGridB.js
@@ -18,7 +18,7 @@ const LargePostGrid = ({ largePost, smallPosts, showHeading,title }) => {
     <div className="flex justify-between">
       {showHeading!==false?<RSSTitle title={title}/>:''}
        <div className="flex relative p-2">
-            <div className="text-md inline text-gray-800 my-auto font-normal font-inter">
+            <div className="text-md inline text-gray-800 my-auto font-normal ">
             <Link href={`/posts/`}>See all</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/LargePostGridC.js b/components/v4/layout/LargePostGridC.js
index 3e842311..4039112b 100644
--- a/components/v4/layout/LargePostGridC.js
+++ b/components/v4/layout/LargePostGridC.js
@@ -27,7 +27,7 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
             </div>
             <div className="my-auto">
               <div className="flex relative">
-              <div className="text-md inline text-black/80 font-normal font-inter">
+              <div className="text-md inline text-black/80 font-normal ">
               <Link href={`/posts/${slug}/page/1`}>See all</Link>
               </div>
               <div className="my-auto">
@@ -39,7 +39,7 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
               </div>
             </div>
             {/* <Link href={`/posts/${slug}/page/1`}>
-            <div className="font-inter mt-1 text-sm my-auto text-black opacity-60 cursor-pointer text-sm flex">
+            <div className=" mt-1 text-sm my-auto text-black opacity-60 cursor-pointer text-sm flex">
               <div className="my-auto">See all</div>
             <CaretRight className="my-auto" size={14} />
             </div>
@@ -47,7 +47,7 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
             </div>
           </div>:''}
         {/* <div className="hidden md:block flex relative p-2 mb-1">
-            <h3 className="text-lg overflow-hidden line-clamp-1 font-medium font-inter">
+            <h3 className="text-lg overflow-hidden line-clamp-1 font-medium ">
               Top reads
             </h3>
             <div className="bg-blue-200/90 ml-3 flex justify-center my-auto h-6 w-6 rounded-full">
@@ -66,7 +66,7 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
             />
         <SmallPostsGroupC tools={tools} smallPosts={smallPosts?.slice(0,2)}/>
         {/* <div className="flex mt-10"> */}
-            {/* <div className="font-inter cursor-pointer flex">
+            {/* <div className=" cursor-pointer flex">
               <div className="text-blue-600 text-md font-base">
                 See more {heading}
               </div>
diff --git a/components/v4/layout/NewsColumn.js b/components/v4/layout/NewsColumn.js
index 042ff600..21fd3a66 100644
--- a/components/v4/layout/NewsColumn.js
+++ b/components/v4/layout/NewsColumn.js
@@ -139,7 +139,7 @@ const NewsColumn = ({
             </div>
           </div>
           <div className="flex relative">
-            {/* <div className="text-sm my-auto inline text-black/80 font-normal font-inter">
+            {/* <div className="text-sm my-auto inline text-black/80 font-normal ">
               <Link href={`/news/`}>See all</Link>
             </div> */}
             <div className="my-auto">
diff --git a/components/v4/layout/PostGroupRow.js b/components/v4/layout/PostGroupRow.js
index ac89db85..936ddf5b 100644
--- a/components/v4/layout/PostGroupRow.js
+++ b/components/v4/layout/PostGroupRow.js
@@ -24,7 +24,7 @@ const PostGroupRow = ({ largePost, smallPosts, description,title,topicObject })
      
      {/* <div className="flex flex-col justify-center mb-6 md:mb-0">
         <div className="bg-blue-200/20 border border-blue-200/70 h-full rounded-2xl p-6">
-            <h2 className="text-lg md:text-3xl mb-1 font-semibold font-inter max-w-md leading-[32px] text-blue-900">
+            <h2 className="text-lg md:text-3xl mb-1 font-semibold  max-w-md leading-[32px] text-blue-900">
              {intl.formatMessage({ id: title })}
             </h2>
             <p className="text-blue-900">
diff --git a/components/v4/layout/SidePanelAuthors.js b/components/v4/layout/SidePanelAuthors.js
index ab68d239..8b8ec3e5 100644
--- a/components/v4/layout/SidePanelAuthors.js
+++ b/components/v4/layout/SidePanelAuthors.js
@@ -4,7 +4,7 @@ const SidePanelAuthors = ({ list, topic }) => {
   return (
     <div className="flex rounded-lg flex-col gap-0 px-2">
       <div className="flex flex-row justify-between items-baseline">
-        <h3 className="font-inter my-0.5 font-bold text-gray-800 text-sm">
+        <h3 className=" my-0.5 font-bold text-gray-800 text-sm">
         <span className="capitalize">{topic}</span> contributors
         </h3>
       </div>
@@ -20,7 +20,7 @@ const SidePanelAuthors = ({ list, topic }) => {
         })}
 
         {/* <Link href={"/jobs"}>
-          <div className="font-inter mt-1 text-gray-600 cursor-pointer text-xs flex">
+          <div className=" mt-1 text-gray-600 cursor-pointer text-xs flex">
             <div className="my-auto">See All</div>
           <CaretRight className="my-auto" size={12} />
           </div>
diff --git a/components/v4/layout/SidePanelJobs.js b/components/v4/layout/SidePanelJobs.js
index aad1fe88..c420f4dd 100644
--- a/components/v4/layout/SidePanelJobs.js
+++ b/components/v4/layout/SidePanelJobs.js
@@ -6,7 +6,7 @@ const SidePanelJobs = ({ list }) => {
   return (
     <div className="flex rounded-lg flex-col gap-0 px-2 mt-8">
       <div className="flex flex-row justify-between items-baseline">
-        <h3 className="font-inter my-0.5 font-bold text-gray-800 text-sm">
+        <h3 className=" my-0.5 font-bold text-gray-800 text-sm">
           Opportunities
         </h3>
       </div>
@@ -28,7 +28,7 @@ const SidePanelJobs = ({ list }) => {
         })}
 
         <Link href={"/jobs"}>
-          <div className="font-inter mt-1 text-gray-600 cursor-pointer text-xs flex">
+          <div className=" mt-1 text-gray-600 cursor-pointer text-xs flex">
             <div className="my-auto">See All</div>
           <CaretRight className="my-auto" size={12} />
           </div>
diff --git a/components/v4/layout/SidePanelTools.js b/components/v4/layout/SidePanelTools.js
index 992e5a82..0a7672af 100644
--- a/components/v4/layout/SidePanelTools.js
+++ b/components/v4/layout/SidePanelTools.js
@@ -7,16 +7,16 @@ const SidePanelTools = ({list}) =>{
 
         <div className="flex rounded-lg flex-col gap-0 px-2 mt-8">
         <div className="flex flex-row justify-between items-baseline">
-          <h3 className="font-inter my-0.5 font-bold text-gray-800 text-sm">
+          <h3 className=" my-0.5 font-bold text-gray-800 text-sm">
             Latest Tools
           </h3>
             {/* <div className="flex flex-row justify-between items-baseline">
-                    <h3 className="font-inter my-0.5 font-bold text-gray-500 text-sm">
+                    <h3 className=" my-0.5 font-bold text-gray-500 text-sm">
                       Latest Tools
                     </h3>
                     <Link
                       href={"/toolbox"}
-                      className="font-inter text-xs font-semibold text-gray-800 cursor-pointer"
+                      className=" text-xs font-semibold text-gray-800 cursor-pointer"
                     >
                       See all
                     </Link>
@@ -38,7 +38,7 @@ const SidePanelTools = ({list}) =>{
           })}
 
           <Link href={"/toolbox"}>
-            <div className="font-inter font-medium mt-3 text-gray-600 cursor-pointer text-xs">{`See All ->`}</div>
+            <div className=" font-medium mt-3 text-gray-600 cursor-pointer text-xs">{`See All ->`}</div>
           </Link>
         </div>
       </div>
diff --git a/components/v4/layout/ToolBackgroundCardRow.js b/components/v4/layout/ToolBackgroundCardRow.js
index 1dfb29e6..7a42806c 100644
--- a/components/v4/layout/ToolBackgroundCardRow.js
+++ b/components/v4/layout/ToolBackgroundCardRow.js
@@ -9,11 +9,11 @@ const ToolBackgroundCardRow = ({ tools , showTitle}) => {
   return (
     <>
       {/* {showTitle!==false?<div className="flex justify-between mb-6">
-        <h3 className="text-3xl text-black/90 font-semibold font-inter max-w-md">
+        <h3 className="text-3xl text-black/90 font-semibold  max-w-md">
           Featured tools
         </h3>
         <div className="flex relative my-auto">
-            <div className="text-md inline text-black/80 font-normal font-inter">
+            <div className="text-md inline text-black/80 font-normal ">
             <Link href={`/toolbox/`}>See all</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/ToolCollection.js b/components/v4/layout/ToolCollection.js
index 6a139d4c..834c838e 100644
--- a/components/v4/layout/ToolCollection.js
+++ b/components/v4/layout/ToolCollection.js
@@ -6,7 +6,7 @@ const ToolCollection = ({ tools, topic, tagline,slug }) => {
     
     {/* heading - removed for now */}
       {/* <div className="flex relative p-2 mb-1">
-            <div className="text-lg overflow-hidden line-clamp-1 inline font-medium font-inter">
+            <div className="text-lg overflow-hidden line-clamp-1 inline font-medium ">
             <Link href={`/toolbox/`}><span className="capitalize">{topic}</span> tools</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/ToolIconCardRow.js b/components/v4/layout/ToolIconCardRow.js
index 6fc2b16f..70f5470a 100644
--- a/components/v4/layout/ToolIconCardRow.js
+++ b/components/v4/layout/ToolIconCardRow.js
@@ -16,7 +16,7 @@ const ToolIconCardRow = ({ tools, title, textColor, withBackground, showHeader }
          </>}
         </h3>
         <div className="flex relative">
-            <div className="text-md inline my-auto text-gray-800 font-normal font-inter">
+            <div className="text-md inline my-auto text-gray-800 font-normal ">
             <Link href={`/toolbox/`}>See all</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/ToolIconCardRowSmall.js b/components/v4/layout/ToolIconCardRowSmall.js
index d7b6f2dd..2e063910 100644
--- a/components/v4/layout/ToolIconCardRowSmall.js
+++ b/components/v4/layout/ToolIconCardRowSmall.js
@@ -27,7 +27,7 @@ const ToolIconCardRow = ({ tools, topic, tagline }) => {
         {topic} <span className="">tools</span>
         </h3>
         <div className="flex relative">
-            <div className="text-md inline text-black/80 font-normal font-inter">
+            <div className="text-md inline text-black/80 font-normal ">
             <Link href={`/toolbox/`}>See all</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/ToolLargeCardRow.js b/components/v4/layout/ToolLargeCardRow.js
index 7e4a5813..662af7ac 100644
--- a/components/v4/layout/ToolLargeCardRow.js
+++ b/components/v4/layout/ToolLargeCardRow.js
@@ -9,11 +9,11 @@ const ToolLargeCardRow = ({ tools , showTitle, preload}) => {
   return (
     <>
       {showTitle!==false?<div className="flex justify-between mb-6">
-        <h3 className="text-2xl text-black/90 font-semibold font-inter max-w-md">
+        <h3 className="text-2xl text-black/90 font-semibold  max-w-md">
           Featured tools
         </h3>
         <div className="flex relative my-auto">
-            <div className="text-md inline text-black/80 font-normal font-inter">
+            <div className="text-md inline text-black/80 font-normal ">
             <Link href={`/toolbox/`}>See all</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/ToolsColumn.js b/components/v4/layout/ToolsColumn.js
index 798bf335..88075a4e 100644
--- a/components/v4/layout/ToolsColumn.js
+++ b/components/v4/layout/ToolsColumn.js
@@ -16,7 +16,7 @@ const ToolsColumn = ({ tools, title, textColor, withBackground, showHeader }) =>
          </>}
         </h3>
         <div className="flex relative">
-            <div className="text-sm inline my-auto text-gray-800 font-normal font-inter">
+            <div className="text-sm inline my-auto text-gray-800 font-normal ">
             <Link href={`/toolbox/`}>See all</Link>
             </div>
             <div className="my-auto">
diff --git a/components/v4/layout/TopicsGridHome.js b/components/v4/layout/TopicsGridHome.js
index 1fece1e6..5f401755 100644
--- a/components/v4/layout/TopicsGridHome.js
+++ b/components/v4/layout/TopicsGridHome.js
@@ -27,7 +27,7 @@ const TopicsGridHome = ({ largePost, smallPosts, tools,showHeading, slug, headin
             </div>
             <div className="my-auto">
               <div className="flex relative">
-              <div className="text-md inline text-black/80 font-normal font-inter">
+              <div className="text-md inline text-black/80 font-normal ">
               <Link href={`/posts/${slug}/page/1`}>See all</Link>
               </div>
               <div className="my-auto">
diff --git a/components/v4/listItem/AuthorListItem.js b/components/v4/listItem/AuthorListItem.js
index 10856bd2..4bdd4b04 100644
--- a/components/v4/listItem/AuthorListItem.js
+++ b/components/v4/listItem/AuthorListItem.js
@@ -35,7 +35,7 @@ const AuthorListItem = ({
             ""
           )}
             <div
-              className={`overflow-hidden flex flex-col justify-center line-clamp-1 my-auto font-medium font-inter text-sm ml-0.5`}
+              className={`overflow-hidden flex flex-col justify-center line-clamp-1 my-auto font-medium  text-sm ml-0.5`}
             >
                 {author?.firstName ? (
                 <>
@@ -56,10 +56,10 @@ const AuthorListItem = ({
                 showLogo ? "-mt-2 bg-[#F7F7F8]" : ""
               } flex flex-row gap-1 text-xs z-10 text-gray-500"`}
             >
-              <p className=" h-[18px] max-w-[100px] overflow-hidden line-clamp-1 inline font-inter">
+              <p className=" h-[18px] max-w-[100px] overflow-hidden line-clamp-1 inline ">
                 {name},
               </p>
-              <p className=" h-[18px] max-w-[150px] overflow-hidden line-clamp-1 inline font-inter">
+              <p className=" h-[18px] max-w-[150px] overflow-hidden line-clamp-1 inline ">
                 {locations[0]?.name}
               </p>
             </div> */}
diff --git a/components/v4/listItem/JobListItem.js b/components/v4/listItem/JobListItem.js
index b6613b89..19719737 100644
--- a/components/v4/listItem/JobListItem.js
+++ b/components/v4/listItem/JobListItem.js
@@ -37,7 +37,7 @@ const JobListItem = ({
             <p
               className={`overflow-hidden ${
                 showLogo ? "line-clamp-1 mt-1" : "line-clamp-2"
-              } inline font-medium font-inter text-sm`}
+              } inline font-medium  text-sm`}
             >
               {title}
             </p>
@@ -46,10 +46,10 @@ const JobListItem = ({
                 showLogo ? "-mt-2 bg-[#F7F7F8]" : ""
               } flex flex-row gap-1 text-xs z-10 text-gray-500"`}
             >
-              <p className=" h-[18px] max-w-[100px] overflow-hidden line-clamp-1 inline font-inter">
+              <p className=" h-[18px] max-w-[100px] overflow-hidden line-clamp-1 inline ">
                 {companyName},
               </p>
-              <p className=" h-[18px] max-w-[150px] overflow-hidden line-clamp-1 inline font-inter">
+              <p className=" h-[18px] max-w-[150px] overflow-hidden line-clamp-1 inline ">
                 {locations[0]?.name}
               </p>
             </div>
diff --git a/components/v4/listItem/ToolListItem.js b/components/v4/listItem/ToolListItem.js
index 589b30e8..a93e43c8 100644
--- a/components/v4/listItem/ToolListItem.js
+++ b/components/v4/listItem/ToolListItem.js
@@ -24,7 +24,7 @@ const ToolListItem = ({title, legacyFeaturedImage, slug, showLogo}) =>{
             ""
         )}
         <div className="flex flex-col ml-1 grid gap-1 justify-center">
-            <p className="overflow-hidden line-clamp-2 inline font-inter text-sm">
+            <p className="overflow-hidden line-clamp-2 inline  text-sm">
             {title}
             </p>
         </div>
diff --git a/components/v4/section/JumboTagsSection.js b/components/v4/section/JumboTagsSection.js
index 8d8b24d2..c8c2347a 100644
--- a/components/v4/section/JumboTagsSection.js
+++ b/components/v4/section/JumboTagsSection.js
@@ -38,7 +38,7 @@ const JumboTagsSection = ({popularTags}) =>{
                                     </div>
                                 </div>
                                 <div className="flex justify-between p-2">
-                                <div className="capitalize text-lg overflow-hidden line-clamp-1 inline font-medium font-inter">
+                                <div className="capitalize text-lg overflow-hidden line-clamp-1 inline font-medium ">
                                     All topics
                                 </div>
                                 <div className="bg-blue-500 relative flex justify-center my-auto h-6 w-6 rounded-full">
diff --git a/components/v4/section/NewsletterPageHero.js b/components/v4/section/NewsletterPageHero.js
index 3a55d915..b04f6ef8 100644
--- a/components/v4/section/NewsletterPageHero.js
+++ b/components/v4/section/NewsletterPageHero.js
@@ -10,11 +10,11 @@ const NewsletterPageHero = ({title,padding}) =>{
             className="w-full relative flex h-full w-full rounded-3xl p-6 pt-8"
             >
             <div className="z-20 max-w-md xl:max-w-full">
-                <h3 className="text-4xl tracking-tighter lg:text-5xl mb-10 leading-snug font-inter text-black/90 font-semibold">{title?title:<>
+                <h3 className="text-4xl tracking-tighter lg:text-5xl mb-10 leading-snug  text-black/90 font-semibold">{title?title:<>
                     Weekly tools and stories to <br className="hidden xl:block"/> shape <div className="text-underline inline">every idea</div>
                 </>}</h3>
                 <SignupHomepage/>
-                <p className="font-inter mb-4 mt-10 text-lg text-gray-900 text-opacity-80 max-w-xl">Join <span className="text-black/80 bg-indigo-200/70">25,000+ creatives</span> and receive our carefully curated digest of stories, tools and links, delivered to your inbox:</p>
+                <p className=" mb-4 mt-10 text-lg text-gray-900 text-opacity-80 max-w-xl">Join <span className="text-black/80 bg-indigo-200/70">25,000+ creatives</span> and receive our carefully curated digest of stories, tools and links, delivered to your inbox:</p>
                 <p className="text-lg text-gray-900/80">
                     <ul className="list-disc pl-10">
                         <li className="mt-2.5">Top articles of the week</li>
diff --git a/components/v4/section/NewsletterSection.js b/components/v4/section/NewsletterSection.js
index 5e16110b..f305df1b 100644
--- a/components/v4/section/NewsletterSection.js
+++ b/components/v4/section/NewsletterSection.js
@@ -10,10 +10,10 @@ const NewsletterSection = ({title,padding}) =>{
             className="w-full relative flex h-full bg-[#eef2ff] w-full lg:mt-8 rounded-3xl p-6"
             >
             <div className="max-w-xl lg:max-w-xl z-20">
-                <h3 className="text-xl tracking-tight lg:text-3xl mb-4 font-inter text-black/90 font-semibold">{title?title:<>
+                <h3 className="text-xl tracking-tight lg:text-3xl mb-4  text-black/90 font-semibold">{title?title:<>
                     Get hand-picked stories <div className="text-underline inline">every week</div>
                 </>}</h3>
-                <p className="font-inter mb-4 text-base text-gray-900 text-opacity-80">Join <span className="text-black/80 font-semibold">25,000+ creatives</span> who enjoy a regular dose of inspiration and motivation, delivered to your inbox every week.</p>
+                <p className=" mb-4 text-base text-gray-900 text-opacity-80">Join <span className="text-black/80 font-semibold">25,000+ creatives</span> who enjoy a regular dose of inspiration and motivation, delivered to your inbox every week.</p>
                 <SignupHomepage/>
             </div>
             <div style={{backgroundPosition:'10px 10px'}} className="absolute w-full h-full rounded-3xl bg-[url('/static/images/toolbox/gridsquare.svg')] absolute inset-0 [mask-image:linear-gradient(0deg,#eef2ff,rgba(238,242,255,0.8))]"/>
diff --git a/components/v4/section/TagsNavRow.js b/components/v4/section/TagsNavRow.js
index 9eec59f0..17198034 100644
--- a/components/v4/section/TagsNavRow.js
+++ b/components/v4/section/TagsNavRow.js
@@ -51,12 +51,12 @@ const tags = [
     },
     {
       name: "UX",
-      link: "/posts/ui/page/1",
+      link: "/posts/ux/page/1",
       slug:"ux"
     },
     {
       name: "User Research",
-      link: "/posts/ui/page/1",
+      link: "/posts/user-research/page/1",
       slug:"user-research"
     },
     // {
diff --git a/components/v4/section/TopicIndexSection.js b/components/v4/section/TopicIndexSection.js
index 8377e3f6..462912a2 100644
--- a/components/v4/section/TopicIndexSection.js
+++ b/components/v4/section/TopicIndexSection.js
@@ -33,7 +33,7 @@ const TopicIndexSection = ({index,user, heroCardPost, viewablePosts, jobsSidebar
             </div>
             <div className="my-auto">
               <div className="flex relative">
-              <div className="text-md inline text-black/80 font-normal font-inter">
+              <div className="text-md inline text-black/80 font-normal ">
               <Link href={`/posts/${topicObject.slug}/page/1`}>See all</Link>
               </div>
               <div className="my-auto">
diff --git a/components/v4/section/TopicSection.js b/components/v4/section/TopicSection.js
index f7377fa8..1de75554 100644
--- a/components/v4/section/TopicSection.js
+++ b/components/v4/section/TopicSection.js
@@ -50,7 +50,7 @@ const TopicSection = ({
             </div>
             <div className="my-auto">
             <Link href={`/posts/${slug}/page/1`}>
-            <div className="font-inter mt-1 text-sm my-auto text-black opacity-60 cursor-pointer text-sm flex">
+            <div className=" mt-1 text-sm my-auto text-black opacity-60 cursor-pointer text-sm flex">
               {/* <div className="my-auto">More <span className="capitalize">{heading}</span></div> */}
               <div className="my-auto">See all</div>
             <CaretRight className="my-auto" size={14} />
diff --git a/components/v4/section/TopicSectionB.js b/components/v4/section/TopicSectionB.js
index 23775a45..34d38b7b 100644
--- a/components/v4/section/TopicSectionB.js
+++ b/components/v4/section/TopicSectionB.js
@@ -49,7 +49,7 @@ const TopicSection = ({
             </div>
             <div className="my-auto">
             <Link href={`/posts/${slug}/page/1`}>
-            <div className="font-inter mt-1 text-sm my-auto text-black opacity-60 cursor-pointer text-sm flex">
+            <div className=" mt-1 text-sm my-auto text-black opacity-60 cursor-pointer text-sm flex">
               {/* <div className="my-auto">More <span className="capitalize">{heading}</span></div> */}
               <div className="my-auto">See all</div>
             <CaretRight className="my-auto" size={14} />
diff --git a/components/v4/text/RSSTitle.js b/components/v4/text/RSSTitle.js
index 210b632b..a1848476 100644
--- a/components/v4/text/RSSTitle.js
+++ b/components/v4/text/RSSTitle.js
@@ -5,7 +5,7 @@ const RSSTitle = ({title}) =>{
   const intl = useIntl();
     return(
         <div className="flex px-1">
-            <h2 className="text-2xl drop-shadow-sm text-black/90 font-semibold font-inter max-w-md flex flex-col justify-center">
+            <h2 className="text-2xl drop-shadow-sm text-black/90 font-semibold  max-w-md flex flex-col justify-center">
              {title?intl.formatMessage({ id: title }):
              <div className="inline-flex tracking-tight">
             Trending <span className="hidden md:inline ml-2">articles</span>
diff --git a/lib/insertBannerAds.js b/lib/insertBannerAds.js
index 858e469a..69a6a06e 100644
--- a/lib/insertBannerAds.js
+++ b/lib/insertBannerAds.js
@@ -5,7 +5,7 @@ const insertBannerAds = (htmlString, navSponsor, sponsors) => {
   const template = `
   <div class="my-10">
     <a href="${navSponsor?.link}" target="_blank" style="text-decoration:none!important;">
-    <div class="bg-white  h-full p-0 border border-gray-300/50 shadow-sm overflow-hidden group hover:shadow-lg hover:scale-[1.005] transition transition-all duration-300 rounded-2xl flex flex-col sm:flex-row  font-inter w-full ">
+    <div class="bg-white  h-full p-0 border border-gray-300/50 shadow-sm overflow-hidden group hover:shadow-lg hover:scale-[1.005] transition transition-all duration-300 rounded-2xl flex flex-col sm:flex-row   w-full ">
       <div class="lg:w-5/12 lg:h-[240px] h-[200px] border-r w-full relative  overflow-hidden border-gray-200">
         <img alt="banner ad for ${navSponsor?.title}" loading="lazy" decoding="async" data-nimg="fill" class="object-cover cursor-pointer group-hover:scale-[1.03] transition transition-all duration-700" sizes="100vw" 
         srcset="${generateSrcset(navSponsor?.cardImage ? navSponsor?.cardImage : navSponsor?.featuredImage)}"
diff --git a/pages/_app.js b/pages/_app.js
index 40b7f759..b2bf740a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -23,6 +23,15 @@ import '../styles/toolStyles.css'
 // import PageViewTracker from "@/components/PageViewTracker";
 // import MakerPopover from "@/components/maker/maker";
 
+
+import { Inter } from "next/font/google";
+const font = Inter({
+  // weight: '400',
+  weight: ["300", "400", "500", "600", "700", "800", "900"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 function App({ Component, pageProps: { session, ...pageProps } }) {
 
   // addLocaleData([...en, ...de])
@@ -100,7 +109,10 @@ function App({ Component, pageProps: { session, ...pageProps } }) {
       }}
     >
       <SessionProvider session={session} refetchInterval={5 * 60}>
+        <div className={font.className}>
+
         <Component {...pageProps} />
+        </div>
       </SessionProvider>
       </SWRConfig>
       <AppToaster/>
diff --git a/pages/_document.js b/pages/_document.js
index 491d2e97..03b22e20 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,14 +1,17 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import { getCssText } from '../stitches.config';
+import { getCssText } from "../stitches.config";
 
 export default class MyDocument extends Document {
   render() {
     return (
       <Html lang="en">
         <Head>
-          <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
+          <style
+            id="stitches"
+            dangerouslySetInnerHTML={{ __html: getCssText() }}
+          />
         </Head>
-        <body className="font-inter">
+        <body className={''}>
           <Main />
           <NextScript />
         </body>
diff --git a/pages/apply/form.js b/pages/apply/form.js
index 7d1aad6d..34713fe7 100644
--- a/pages/apply/form.js
+++ b/pages/apply/form.js
@@ -63,7 +63,7 @@ export default function Apply() {
             <div className="relative">
                 <p><Link href="/apply">← Back</Link></p>
                     {/* <Sparkle size={44}/> */}
-                <h1 className="text-4xl leading-snug text-white font-medium font-inter mt-4">
+                <h1 className="text-4xl leading-snug text-white font-medium  mt-4">
                 Application Form
                 </h1>
             <p className="my-4 max-w-[450px]">Prototypr accounts are invite only, and applications are manually approved to prevent spam signups. Members can create posts, submit links, get a profile and more. You can ask current members for an invite or submit this application.</p>
diff --git a/pages/index.js b/pages/index.js
index 45f96129..a1aebddb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -269,11 +269,11 @@ export default function Index({
           <Container maxWidth="w-full bg-[#dbeeff]  relative relative z-10">
             <div className="max-w-[1320px] mx-auto px-3 md:px-3 pb-16 ">
               <div className="flex justify-between mb-8">
-                <h3 className="text-3xl text-black/90 font-semibold font-inter max-w-md leading-[32px]">
+                <h3 className="text-3xl text-black/90 font-semibold  max-w-md leading-[32px]">
                   Browse by <span className="text-underline">category</span>
                 </h3>
                 <div className="flex relative p-2">
-                  <div className="hidden sm:inline text-md text-black/80 font-normal font-inter">
+                  <div className="hidden sm:inline text-md text-black/80 font-normal ">
                     <Link href={`/topics/`}>See all</Link>
                   </div>
                   <div className="my-auto">
diff --git a/pages/newsletter/[slug].js b/pages/newsletter/[slug].js
index 1c142354..42d59303 100644
--- a/pages/newsletter/[slug].js
+++ b/pages/newsletter/[slug].js
@@ -48,7 +48,7 @@ export default function Post({ post, morePosts, preview, navSponsor, sponsors })
             <article>
             <div style={{maxWidth:'600px'}} className="mx-auto">
             { post?.attributes && 
-                <h1 className="text-3xl font-inter-serif font-semibold tracking-tighter leading-tight md:leading-tighter my-6 mt-12 text-center md:text-left">
+                <h1 className="text-3xl  font-semibold tracking-tighter leading-tight md:leading-tighter my-6 mt-12 text-center md:text-left">
                 {post.attributes.title}
                 </h1>}
             </div>
diff --git a/pages/people/index.js b/pages/people/index.js
index ab532740..275710dd 100644
--- a/pages/people/index.js
+++ b/pages/people/index.js
@@ -43,7 +43,7 @@ export default function PeoplePage({
           <PostTitle>Loading…</PostTitle>
         ) :
         <>        
-        <h1 className="font-inter font-semibold text-3xl tracking-tighter">Contributors</h1>
+        <h1 className=" font-semibold text-3xl tracking-tighter">Contributors</h1>
         {allPosts.length > 0 && (
           <div className="mt-6 grid grid-rows-1 sm:grid-cols-2 lg:grid-cols-4 grid-cols-1  gap-6">
             <div className="col-span-4">
diff --git a/pages/people/page/[pageNo].js b/pages/people/page/[pageNo].js
index 286a7aac..dfff0590 100644
--- a/pages/people/page/[pageNo].js
+++ b/pages/people/page/[pageNo].js
@@ -37,7 +37,7 @@ export default function PeoplePage({
           <PostTitle>Loading…</PostTitle>
         ) :
         <>        
-                <h1 className="font-inter font-semibold text-xl">Page {pagination?.page}</h1>
+                <h1 className=" font-semibold text-xl">Page {pagination?.page}</h1>
 
         {allPosts.length > 0 && (
            <div className="mt-6 grid grid-rows-1 sm:grid-cols-2 lg:grid-cols-4 grid-cols-1  gap-6">
diff --git a/pages/post/[slug].js b/pages/post/[slug].js
index 8341f6aa..c376e457 100644
--- a/pages/post/[slug].js
+++ b/pages/post/[slug].js
@@ -158,7 +158,7 @@ export default function Post({
               <WMPostTracker postId={post?.id} post={post} />
             )} */}
             {router.isFallback ? (
-              <h1 className="text-6xl font-inter-serif font-semibold tracking-tighter leading-tight md:leading-tighter mb-5 text-center md:text-left">
+              <h1 className="text-6xl  font-semibold tracking-tighter leading-tight md:leading-tighter mb-5 text-center md:text-left">
                 Loading
               </h1>
             ) : (
@@ -404,7 +404,7 @@ export default function Post({
           style={{ maxWidth: "1200px" }}
           className="px-6 md:px-0 mx-auto pb-20 relative z-10 mt-20"
         >
-          <h1 className="text-2xl font-inter-serif font-medium -mt-3 -mb-3">
+          <h1 className="text-2xl  font-medium -mt-3 -mb-3">
             Related Articles
           </h1>
           <div className="mt-10">
@@ -422,7 +422,7 @@ export default function Post({
         <SourcePanel
           titleSize={"lg:text-5xl"}
           className={
-            "w-full font-inter-serif mb-4 mt-12 border rounded-lg pb-0 pt-8 border-gray-100"
+            "w-full  mb-4 mt-12 border rounded-lg pb-0 pt-8 border-gray-100"
           }
           title={intl.formatMessage({ id: "newsletterPanel.title3" })}
           desc={intl.formatMessage({ id: "newsletterPanel.desc3" })}
diff --git a/pages/posts/[tag]/page/[pageNo].js b/pages/posts/[tag]/page/[pageNo].js
index f94a7fdd..3c3e155b 100644
--- a/pages/posts/[tag]/page/[pageNo].js
+++ b/pages/posts/[tag]/page/[pageNo].js
@@ -275,7 +275,7 @@ export default function PostsPage({
                       </h3>
                       <div className="my-auto">
                         <div className="flex relative">
-                          <div className="text-md inline text-black/80 font-normal font-inter">
+                          <div className="text-md inline text-black/80 font-normal ">
                             <Link href={`/toolbox`}>See all</Link>
                           </div>
                           <div className="my-auto">
diff --git a/pages/sponsor/index.js b/pages/sponsor/index.js
index da2d9ef5..7472ae65 100644
--- a/pages/sponsor/index.js
+++ b/pages/sponsor/index.js
@@ -70,7 +70,7 @@ const Index = ({ allProducts, newsletterProducts, websiteProducts }) => {
                     </div>
                   </div>
                   <div className="pb-[20px]">
-                    <h1 className="text-5xl md:text-6.5xl w-full leading-tight mx-auto text-black/80 font-inter font-bold text-center drop-shadow-sm">
+                    <h1 className="text-5xl md:text-6.5xl w-full leading-tight mx-auto text-black/80  font-bold text-center drop-shadow-sm">
                       Promote your product <br /> on Prototypr
                     </h1>
                     <p className="mx-auto text-center text-md my-3 text-black/70">
diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js
index 5996eee7..c0aa655d 100644
--- a/pages/toolbox/[slug].js
+++ b/pages/toolbox/[slug].js
@@ -401,7 +401,7 @@ const ToolContent = ({
         {relatedPosts?.length ? (
           <div className="z-30 relative max-w-[1320px] mx-auto md:px-3">
             <div classsName="flex flex-col px-3 z-30">
-              <h3 className="text-2xl pt-12 mb-6 text-black/90 font-medium font-inter max-w-md tracking-tight">
+              <h3 className="text-2xl pt-12 mb-6 text-black/90 font-medium  max-w-md tracking-tight">
                 Related tools
               </h3>
               {/* <ToolLargeCardRow title={`Related to ${post?.attributes?.title}`} tools={relatedPosts.slice(0,4)} /> */}
@@ -519,7 +519,7 @@ export default function Post({
       {/* <Container>
         <div className="w-full mt-6 md:mt-6 grid grid-rows-1 grid-cols-24 lg:gap-6">
           {router.isFallback ? (
-            <h1 className="text-6xl font-inter-serif font-semibold tracking-tighter leading-tight md:leading-tighter mb-5 text-center md:text-left">
+            <h1 className="text-6xl  font-semibold tracking-tighter leading-tight md:leading-tighter mb-5 text-center md:text-left">
               Loading...
             </h1>
           ) : (
diff --git a/pages/toolbox/post/[id]/index.js b/pages/toolbox/post/[id]/index.js
index 4bc961ab..680bfa73 100644
--- a/pages/toolbox/post/[id]/index.js
+++ b/pages/toolbox/post/[id]/index.js
@@ -120,17 +120,23 @@ const ToolPostForm = ({ user, isOwner, postObject, refetchPost }) => {
       // background="#fff"
     >
       <div className="h-14 bg-white shadow-sm z-10 w-full fixed top-[44px]">
-        <div className="flex gap-3 max-w-[1320px] cursor-default mx-auto h-full">
-          <img
-            src={
-              postObject?.logo?.formats?.thumbnail?.url
-                ? postObject?.logo?.formats?.thumbnail?.url
-                : ""
-            }
-            className="w-10 bg-gray-50 shadow-sm h-10 my-auto rounded-lg"
-          />
-          <div className="my-auto text-lg tracking-tight font-medium">{postObject?.title}</div>
-        </div>
+        <a href={`/toolbox/${postObject?.slug}`} target="_blank" className="cursor-pointer">
+          <div className="flex gap-3 max-w-[1320px] mx-auto h-full">
+            <img
+              src={
+                postObject?.logo?.url
+                  ? postObject?.logo?.url
+                  : postObject?.legacyLogo
+                    ? postObject.legacyLogo
+                    : ""
+              }
+              className="w-10 bg-gray-50 shadow-sm h-10 my-auto rounded-lg"
+            />
+            <div className="my-auto text-lg tracking-tight font-medium">
+              {postObject?.title}
+            </div>
+          </div>
+        </a>
       </div>
       {!(user && !user?.isLoggedIn && (isOwner || user?.isAdmin)) ? (
         <WizardProvider>
@@ -221,7 +227,7 @@ const ToolSteps = ({ user, postObject, refetchPost }) => {
           />
         </div>
       </Step>
-      <Step key={`page/3`} id={"3"} >
+      <Step key={`page/3`} id={"3"}>
         <div className="flex flex-col justify-start h-full w-full relative">
           <MediaForm
             postObject={postObject}
@@ -230,7 +236,7 @@ const ToolSteps = ({ user, postObject, refetchPost }) => {
           />
         </div>
       </Step>
-      <Step key={`page/4`} id={"4"} >
+      <Step key={`page/4`} id={"4"}>
         <div className="flex items-center justify-start h-full w-full relative">
           <div className="px-6 md:px-0 max-w-2xl pt-6 pb-20 w-full">
             <div className="my-2 mb-6">
diff --git a/pages/web-monetization/payment-pointer.js b/pages/web-monetization/payment-pointer.js
index 6d5f460e..ae1b49d1 100644
--- a/pages/web-monetization/payment-pointer.js
+++ b/pages/web-monetization/payment-pointer.js
@@ -94,7 +94,7 @@ export default function Post({ post, preview, relatedPosts }) {
                   <SourcePanel
                     titleSize={"lg:text-5xl"}
                     className={
-                      "w-full font-inter-serif mb-4 mt-16 border rounded-lg pb-0 pt-8 border-gray-100"
+                      "w-full  mb-4 mt-16 border rounded-lg pb-0 pt-8 border-gray-100"
                     }
                     title={intl.formatMessage({ id: "newsletterPanel.title3" })}
                     desc={intl.formatMessage({ id: "newsletterPanel.desc3" })}
@@ -110,7 +110,7 @@ export default function Post({ post, preview, relatedPosts }) {
           style={{ maxWidth: "1200px" }}
           className="px-6 md:px-0 mx-auto pb-20 mt-20"
         >
-          <h1 className="text-4xl font-inter-serif font-semibold -mt-3 mb-12">
+          <h1 className="text-4xl  font-semibold -mt-3 mb-12">
             Related Posts
           </h1>
           <div className="mt-10 grid lg:grid-cols-2 grid-cols-1 gap-10">
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index ae18f894..8001dd1e 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -14,7 +14,7 @@ export default {
 };
 
 const Template = (args) => (
-  <div className="font-inter">
+  <div className="">
     <Button variant="" {...args}>
       {args.children}
     </Button>
diff --git a/styles/globaltailwind.css b/styles/globaltailwind.css
index c704eca5..f740fa61 100644
--- a/styles/globaltailwind.css
+++ b/styles/globaltailwind.css
@@ -3923,7 +3923,7 @@ select {
   vertical-align: top;
 }
 
-.font-inter {
+. {
   font-family: 'Inter', sans-serif;;
 }
 
diff --git a/styles/index.scss b/styles/index.scss
index 24a4983d..76f75966 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900');
+// @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900');
 
 @tailwind base;