diff --git a/website/src/pages/_components/landing-featured-projects.tsx b/website/src/pages/_components/landing-featured-projects.tsx
index 3ca6cfcf2..45c4b846a 100644
--- a/website/src/pages/_components/landing-featured-projects.tsx
+++ b/website/src/pages/_components/landing-featured-projects.tsx
@@ -1,9 +1,17 @@
-import React from "react";
+import React, { ComponentProps } from "react";
 import { FeaturedBadge } from "formidable-oss-badges";
 
 import { LinkButton } from "../../components/link-button";
 
-const projects = [
+type ProjectName = ComponentProps<typeof FeaturedBadge>["name"];
+type Projects = {
+  name: ProjectName;
+  link: string;
+  description: string;
+  title?: string;
+};
+
+const projects: Projects[] = [
   {
     name: "spectacle",
     link: "https://commerce.nearform.com/open-source/spectacle",
@@ -41,9 +49,13 @@ export const LandingFeaturedProjects = () => (
         <a
           href={link}
           key={link}
-          className="col-span-2 sm:col-span-1 block grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 align-center items-center text-theme-2 hover:text-theme-2 dark:text-white dark:hover:text-white"
+          className="col-span-2 sm:col-span-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 align-center items-center text-theme-2 hover:text-theme-2 dark:text-white dark:hover:text-white"
         >
-          <FeaturedBadge name={name} isHoverable className="col-span-1" />
+          <FeaturedBadge
+            name={name}
+            isHoverable
+            className="col-span-1 max-w-full"
+          />
           <span className="flex flex-col col-span-1 lg:col-span-2">
             <span className="text-xl font-semibold capitalize">
               {title || name}
diff --git a/website/src/pages/_components/landing-showcase.tsx b/website/src/pages/_components/landing-showcase.tsx
index e696729e9..581a81842 100644
--- a/website/src/pages/_components/landing-showcase.tsx
+++ b/website/src/pages/_components/landing-showcase.tsx
@@ -18,7 +18,7 @@ export function LandingShowcase() {
       <h2 className="my-8 text-4xl font-semibold text-center dark:text-black">
         A Few of Our Fans
       </h2>
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-4">
         <AirbnbLogo className={logoClass} />
         <FiveThirtyEightLogo className={logoClass} />
         <RedfinLogo className={logoClass} />