diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
index f97f5eac61..025da2aa56 100644
--- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
+++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -435,7 +435,7 @@ const ContributorHighlightCard = ({
   }, []);
 
   return (
-    <article className="flex flex-col  md:max-w-[40rem] flex-1 gap-3 lg:gap-6">
+    <article className="w-full flex flex-col flex-1 gap-3 md:max-w-[40rem] lg:gap-6 lg:max-w-[29rem] 2xl:max-w-[34rem]">
       <div>
         <div className={clsx("flex items-center mb-4 gap-1 text-light-slate-11", title && "mb-2")}>
           {icon}
diff --git a/components/organisms/FollowersHighlightWrapper/following-highlight-wrapper.tsx b/components/organisms/FollowersHighlightWrapper/following-highlight-wrapper.tsx
index 30365bdb63..101215045e 100644
--- a/components/organisms/FollowersHighlightWrapper/following-highlight-wrapper.tsx
+++ b/components/organisms/FollowersHighlightWrapper/following-highlight-wrapper.tsx
@@ -58,7 +58,7 @@ const FollowingHighlightWrapper = ({ emojis, selectedFilter }: HighlightWrapperP
                   </span>
                 </Link>
               </div>
-              <div className="p-4 py-6 border bg-light-slate-1 md:px-6 lg:px-12 rounded-xl">
+              <div className="w-full p-4 border bg-light-slate-1 md:px-6 lg:px-9 lg:py-5 lg:max-w-[33rem] sm:py-3 xs:py-2 rounded-xl">
                 <ContributorHighlightCard
                   emojis={emojis}
                   refreshCallBack={mutate}
diff --git a/components/organisms/HomeHighlightsWrapper/home-highlights-wrapper.tsx b/components/organisms/HomeHighlightsWrapper/home-highlights-wrapper.tsx
index d81d7c57f5..2d4ddcf32c 100644
--- a/components/organisms/HomeHighlightsWrapper/home-highlights-wrapper.tsx
+++ b/components/organisms/HomeHighlightsWrapper/home-highlights-wrapper.tsx
@@ -47,7 +47,7 @@ const HomeHighlightsWrapper = ({ emojis, highlights, loading, mutate }: HomeHigh
                   </span>
                 </Link>
               </div>
-              <div className="p-4 border bg-light-slate-1 md:px-6 lg:px-9 lg:py-5 sm:py-3 xs:py-2 rounded-xl">
+              <div className="w-full p-4 border bg-light-slate-1 md:px-6 lg:px-9 lg:py-5 lg:max-w-[33rem] sm:py-3 xs:py-2 rounded-xl">
                 <ContributorHighlightCard
                   emojis={emojis}
                   refreshCallBack={mutate}
diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
index 74d430bc99..c16e5ff89f 100644
--- a/pages/feed/index.tsx
+++ b/pages/feed/index.tsx
@@ -294,7 +294,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
             </DialogContent>
           </Dialog>
         )}
-        <Tabs onValueChange={onTabChange} defaultValue="home" className="grow">
+        <Tabs onValueChange={onTabChange} defaultValue="home" className="w-full 2xl:max-w-[40rem] xl:max-w-[33rem]">
           <TabsList className={clsx("justify-start  w-full border-b", !user && "hidden")}>
             <TabsTrigger
               className="data-[state=active]:border-sauced-orange data-[state=active]:border-b-2 text-lg"
diff --git a/tailwind.config.js b/tailwind.config.js
index 0801f0d8e0..a9ac6932c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,6 @@
 const plugin = require("tailwindcss/plugin");
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
@@ -7,15 +9,17 @@ module.exports = {
     "./stories/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    screens: {
+      xs: "425px",
+      // => @media (min-width: 425px) { ... }
+      ...defaultTheme.screens,
+    },
     extend: {
       gridTemplateColumns: {
         autodesktop: "repeat(auto-fit, minmax(410px, 1fr))",
         automobile: "repeat(auto-fit, minmax(300px, 1fr))",
       },
       screens: {
-        xs: "425px",
-        // => @media (min-width: 425px) { ... }
-
         "2xl": "1440px",
         // => @media (min-width: 1440px) { ... }
       },