diff --git a/components/v4/layout/HeroPostGrid.js b/components/v4/layout/HeroPostGrid.js
index afa33dca..0f73bdd5 100644
--- a/components/v4/layout/HeroPostGrid.js
+++ b/components/v4/layout/HeroPostGrid.js
@@ -8,7 +8,7 @@ import RSSTitle from "../text/RSSTitle";
 import PostsGroup3Cards from "./PostsGroup3Cards";
 import BigBackgroundCard from "../card/BigCard/BigBackgroundCard";
 
-const HeroPostGrid = ({ largePost,showBigPost, smallPosts, showHeading,title, cols }) => {
+const HeroPostGrid = ({ largePost,showBigPost, smallPosts, showHeading,showHeadingRow,title, cols }) => {
   let url = largePost?.attributes?.featuredImage?.data?.attributes?.url;
   const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
   const largeCoverImage = url
@@ -19,7 +19,7 @@ const HeroPostGrid = ({ largePost,showBigPost, smallPosts, showHeading,title, co
     let largePostAvatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
   return (
     <>
-    <div className="flex justify-between mb-6">
+    {showHeadingRow!==false && <div className="flex justify-between mb-6">
       {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">
@@ -33,7 +33,7 @@ const HeroPostGrid = ({ largePost,showBigPost, smallPosts, showHeading,title, co
               </Link>
             </div>
           </div>
-    </div>
+    </div>}
     <div className="flex flex-col justify-between max-w-[1320px] relative">
     {showBigPost && <div className="w-full mb-8">
       <div className="z-20 relative">
diff --git a/components/v4/layout/LargePostGridC.js b/components/v4/layout/LargePostGridC.js
index 7740e146..25f9fbeb 100644
--- a/components/v4/layout/LargePostGridC.js
+++ b/components/v4/layout/LargePostGridC.js
@@ -26,7 +26,7 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
            {showHeading!==false?<div className="flex w-full justify-between mb-6">
             <div className="flex">
               <Tag className="hidden md:inline-block my-auto mr-3" size={32}/>
-              <h2 className="text-xl md:text-3xl capitalize font-semibold text-black/80">
+              <h2 className="text-xl md:text-3xl capitalize font-semibold text-black/90">
                 {heading}
               </h2>
             </div>
diff --git a/components/v4/layout/ToolLargeCardRow.js b/components/v4/layout/ToolLargeCardRow.js
index efb29201..42ff5026 100644
--- a/components/v4/layout/ToolLargeCardRow.js
+++ b/components/v4/layout/ToolLargeCardRow.js
@@ -11,7 +11,7 @@ const ToolLargeCardRow = ({ tools }) => {
     <>
     {/* <Container maxWidth="max-w-[1320px] w-full mb-8"> */}
       <div className="flex justify-between mb-6">
-        <h3 className="text-3xl text-black/80 font-semibold font-inter max-w-md">
+        <h3 className="text-3xl text-black/90 font-semibold font-inter max-w-md">
           {/* Featured <span className="hidden sm:inline text-gray-400">tools</span> */}
           Featured tools
         </h3>
diff --git a/components/v4/layout/TopicsGridHome.js b/components/v4/layout/TopicsGridHome.js
index c29aca54..d7b76086 100644
--- a/components/v4/layout/TopicsGridHome.js
+++ b/components/v4/layout/TopicsGridHome.js
@@ -29,7 +29,7 @@ const TopicsGridHome = ({ largePost, smallPosts, tools,showHeading, slug, headin
            {showHeading!==false?<div className="flex w-full justify-between mb-6">
             <div className="flex">
               <Tag className="hidden md:inline-block my-auto mr-3" size={32}/>
-              <h2 className="text-xl md:text-3xl capitalize font-semibold text-black/80">
+              <h2 className="text-xl md:text-3xl capitalize font-semibold text-black/90">
                 {heading}
               </h2>
             </div>
diff --git a/components/v4/section/NewsletterSection.js b/components/v4/section/NewsletterSection.js
index 2d198072..f3b90906 100644
--- a/components/v4/section/NewsletterSection.js
+++ b/components/v4/section/NewsletterSection.js
@@ -10,7 +10,7 @@ const NewsletterSection = ({title,padding}) =>{
             className="w-full shadow-md relative flex h-full bg-gray-100 w-full lg:mt-8 rounded-3xl p-6"
             >
             <div className="max-w-xl lg:max-w-xl">
-                <h3 className="text-xl lg:text-3xl mb-2 font-inter text-black/80 font-semibold">{title?title:'The best design articles, every week'}</h3>
+                <h3 className="text-xl lg:text-3xl mb-2 font-inter text-black/90 font-semibold">{title?title:'The best design articles, every week'}</h3>
                 <p className="font-inter mb-4 text-base text-gray-900 text-opacity-80">Join 25,000+ creatives who enjoy a regular dose of inspiration and motivation, delivered to your inbox every week.</p>
                 <SignupHomepage/>
             </div>
diff --git a/components/v4/section/PostsSectionHero.js b/components/v4/section/PostsSectionHero.js
index 99bf5854..4a965bec 100644
--- a/components/v4/section/PostsSectionHero.js
+++ b/components/v4/section/PostsSectionHero.js
@@ -1,22 +1,26 @@
 // import SidebarDiscover from "@/components/v4/layout/SidebarDiscover";
 import Container from "@/components/container";
-import PostsGridHero from "@/components/v4/layout/PostsGridHero";
+// import PostsGridHero from "@/components/v4/layout/PostsGridHero";
 import PostsGroup3Cards from "../layout/PostsGroup3Cards";
 import RSSTitle from "../text/RSSTitle";
 import SectionDivider from "./SectionDivider";
 import TagsNavRow from "./TagsNavRow";
-import {CaretRight} from 'phosphor-react'
-import ToolIconCard from "../card/ToolIconCard";
-import Link from 'next/link'
+import HeroPostGrid from "../layout/HeroPostGrid";
+// import {CaretRight} from 'phosphor-react'
+// import ToolIconCard from "../card/ToolIconCard";
+// import Link from 'next/link'
 // import {RssSimple} from 'phosphor-react'
 const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewablePosts, showTags,title, showRecent,showTitle }) => {
   return (
     <Container maxWidth="max-w-[1320px]">
       {showRecent && 
       <>
-        <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 mt-6 lg:p-6">
+        {/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 mt-6 lg:p-6"> */}
+        <div className="w-full h-full grid grid-cols-12 flex justify-center">
             <div className={`w-full max-w-full flex flex-col col-span-12 `}>
-            <PostsGridHero title={title} largePost={heroCardPost} showHeading={showHeroTitle!==false} smallPosts={viewablePosts} />
+            {/* <PostsGridHero title={title} largePost={heroCardPost} showHeading={showHeroTitle!==false} smallPosts={viewablePosts} /> */}
+            <PostsGroup3Cards posts={[heroCardPost,...viewablePosts?.slice(0,2)]} />
+            {/* <HeroPostGrid cols={3} showBigPost={2} showHeadingRow={false} largePost={heroCardPost} smallPosts={viewablePosts} /> */}
             </div>
         </div>
         <SectionDivider py="py-4" transparentLine={true}/>
diff --git a/components/v4/section/ToolsCarouselSection.js b/components/v4/section/ToolsCarouselSection.js
index 0f61a84f..6fc17878 100644
--- a/components/v4/section/ToolsCarouselSection.js
+++ b/components/v4/section/ToolsCarouselSection.js
@@ -10,7 +10,7 @@ const ToolsCarouselSection = () =>{
     return(
         <div className="z-50 relative pt-[40px] px-3">
           <div className="text-xs font-medium mb-2 text-center text-gray-500/90 uppercase">Prototypr Toolbox</div>
-          <h2 className="text-3xl font-bold mb-[42px] text-center text-black/80">Tools to shape <span className="text-underline inline-block md:inline">every idea</span></h2>
+          <h2 className="text-3xl font-bold mb-[42px] text-center text-black/90">Tools to shape <span className="text-underline inline-block md:inline">every idea</span></h2>
             <div className="pb-3">
               <MotionSlider
                   duration={50}
diff --git a/components/v4/section/TopicIndexSection.js b/components/v4/section/TopicIndexSection.js
index d8018340..474a14df 100644
--- a/components/v4/section/TopicIndexSection.js
+++ b/components/v4/section/TopicIndexSection.js
@@ -28,7 +28,7 @@ const TopicIndexSection = ({index,user, heroCardPost, viewablePosts, jobsSidebar
           <div className="flex w-full justify-between mb-3 md:mb-6">
             <div className="flex">
               <Tag className="inline-block my-auto mr-3" size={32}/>
-              <h2 className="text-2xl md:text-3xl capitalize font-semibold text-black/80">
+              <h2 className="text-2xl md:text-3xl capitalize font-semibold text-black/90">
               {intl.formatMessage({ id: title })}
               </h2>
             </div>
diff --git a/components/v4/text/RSSTitle.js b/components/v4/text/RSSTitle.js
index 9d2258fc..07518d2b 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-3xl drop-shadow-sm text-black/80 font-semibold font-inter max-w-md">
+            <h2 className="text-3xl drop-shadow-sm text-black/90 font-semibold font-inter max-w-md">
              {title?intl.formatMessage({ id: title }):
              <>
             New & Noteworthy
diff --git a/pages/index.js b/pages/index.js
index 49b78102..c577d219 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -51,7 +51,7 @@ import Button from "@/components/Primitives/Button";
 // import CategoriesIconCard from "@/components/v4/card/CategoriesIconCard";
 // import TopicSubscription from "@/components/Settings/topicsSubscription";
 import { TAB_ITEMS } from "@/lib/constants";
-import GiantTag from "@/components/v4/tag/GiantTag";
+// import GiantTag from "@/components/v4/tag/GiantTag";
 import HeroArticleSection from "@/components/v4/section/HeroArticleSection";
 import TopicSectionHome from "@/components/v4/section/TopicSectionHome";
 import ToolsCarouselSection from "@/components/v4/section/ToolsCarouselSection";
@@ -185,7 +185,7 @@ export default function Index({
 
           <div className="max-w-[1320px] mx-auto px-6 pb-8 ">
           <div className="flex justify-between mb-8">
-              <h3 className="text-3xl text-black/80 font-semibold font-inter max-w-md leading-[32px]">
+              <h3 className="text-3xl text-black/90 font-semibold font-inter max-w-md leading-[32px]">
               Browse by <span className="text-underline">category</span>
               </h3>
               <div className="flex relative p-2">