diff --git a/apps/app/public/colosseum-logo-white.svg b/apps/app/public/colosseum-logo-white.svg
new file mode 100644
index 0000000..a513aa3
--- /dev/null
+++ b/apps/app/public/colosseum-logo-white.svg
@@ -0,0 +1,24 @@
+<svg width="389" height="49" viewBox="0 0 389 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2709_757)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.7871 0.064209H0V6.20549H51.7871V0.064209ZM46.6638 10.9727H5.11214V17.114H46.6638V10.9727ZM22.733 21.883H29.0432V48.8511H22.733V21.883ZM16.4229 21.883H10.1126V48.8511H16.4229V21.883ZM35.3589 21.883H41.6692V48.8511H35.3589V21.883Z" fill="white"/>
+<mask id="mask0_2709_757" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="68" y="8" width="321" height="33">
+<path d="M388.97 8.59595H68.0195V40.3194H388.97V8.59595Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2709_757)">
+<path d="M84.8472 13.818C78.4534 13.818 73.6065 17.4446 73.6065 24.1973C73.6065 30.9502 78.6178 35.077 85.3612 35.077C90.2748 35.077 94.7414 32.3258 95.6048 27.3587C97.0492 27.984 98.4627 28.6092 99.9429 29.1695C99.0434 37.3579 91.4622 40.2041 84.6879 40.2041C74.9583 40.1992 68.0195 33.4164 68.0195 24.1924C68.0195 14.9685 75.0868 8.84595 84.9449 8.84595C92.2023 8.84595 98.5603 12.0023 100.071 18.8151L95.4763 20.5359C94.063 15.8789 89.0824 13.783 84.8472 13.783V13.813V13.818Z" fill="white"/>
+<path d="M104.57 24.5677C104.57 14.8136 110.964 8.59595 120.596 8.59595C130.228 8.59595 136.817 14.9086 136.817 24.2575C136.817 33.6065 130.392 40.2294 120.724 40.2294C111.056 40.2294 104.539 33.9467 104.539 24.5677H104.57ZM120.627 13.438C114.104 13.438 109.962 17.4697 109.962 24.1275C109.962 30.7854 114.104 35.4423 120.719 35.4423C127.334 35.4423 131.477 31.4106 131.477 24.7528C131.477 18.095 127.236 13.438 120.622 13.438H120.627Z" fill="white"/>
+<path d="M169.926 39.229H143.688V9.72144H148.827V34.3518H169.926V39.229Z" fill="white"/>
+<path d="M171.793 24.5677C171.793 14.8136 178.182 8.59595 187.85 8.59595C197.518 8.59595 204.071 14.9086 204.071 24.2575C204.071 33.6065 197.646 40.2294 187.978 40.2294C178.31 40.2294 171.793 33.9467 171.793 24.5677ZM187.85 13.438C181.333 13.438 177.185 17.4697 177.185 24.1275C177.185 30.7854 181.327 35.4423 187.942 35.4423C194.557 35.4423 198.7 31.4106 198.7 24.7528C198.7 18.095 194.46 13.438 187.845 13.438H187.85Z" fill="white"/>
+<path d="M240.969 29.915C240.969 37.9784 232.556 40.3245 225.844 40.3245C220.735 40.3245 211.806 39.6042 210.074 31.6357L214.633 29.5097C216.561 34.447 221.346 35.1072 225.299 35.1072C228.865 35.1072 235.321 34.3869 235.321 30.3253C235.321 22.732 210.239 31.1355 210.239 18.3551C210.239 11.4472 218.622 8.72607 225.334 8.72607C232.046 8.72607 239.274 10.912 240.301 17.5398L236.03 19.1955C234.745 14.7586 229.833 13.348 225.334 13.348C221.094 13.348 216.309 14.9737 216.309 17.8799C216.309 24.8829 241.006 17.4448 241.006 29.945L240.975 29.915H240.969Z" fill="white"/>
+<path d="M276.656 29.915C276.656 37.9784 268.211 40.3245 261.53 40.3245C256.427 40.3245 247.493 39.6042 245.762 31.6357L250.319 29.5097C252.248 34.447 257.033 35.1072 260.985 35.1072C264.553 35.1072 271.008 34.3869 271.008 30.3253C271.008 22.732 245.926 31.1355 245.926 18.3551C245.926 11.4472 254.308 8.72607 261.022 8.72607C267.734 8.72607 274.96 10.912 275.989 17.5398L271.718 19.1955C270.433 14.7586 265.518 13.348 261.022 13.348C256.782 13.348 251.996 14.9737 251.996 17.8799C251.996 24.8829 276.693 17.4448 276.693 29.945L276.661 29.915H276.656Z" fill="white"/>
+<path d="M311.596 39.229H283.234V9.72144H310.729V14.6936H288.344V21.5363H306.94V26.5987H288.344V34.3518H311.596V39.229Z" fill="white"/>
+<path d="M317.414 28.3192V9.72144H322.554V27.1639C322.554 32.3511 325.638 35.2271 332.125 35.2271C338.611 35.2271 341.695 32.3511 341.695 27.1639V9.72144H346.835V28.3192C346.835 35.4472 341.31 40.2893 332.125 40.2893C322.939 40.2893 317.414 35.4423 317.414 28.3192Z" fill="white"/>
+<path d="M371.789 30.4452L382.454 9.72144H388.971V39.229H383.831V18.6302C381.745 22.4418 375.129 35.4472 373.039 39.259H370.565L359.808 18.6302V39.1989H354.668V9.72144H361.154C363.24 13.6281 369.764 26.5686 371.819 30.4452H371.789Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2709_757">
+<rect width="389" height="49" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index 6925319..b6fd91e 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -15,6 +15,11 @@ import {
 import { easeOut } from "motion"
 
 const SUPPORTED_BY_LOGOS = [
+  {
+    name: "colosseum",
+    href: "https://blog.colosseum.com/announcing-colosseums-accelerator-cohort-4/",
+    src: "/colosseum-logo-white.svg",
+  },
   {
     name: "coinbase",
     href: "https://www.coinbase.com/developer-platform/discover/launches/summer-builder-grants",
@@ -48,6 +53,8 @@ const getLogoSize = (name: string) => {
       return { className: "h-6 w-[60px]", width: 60, height: 24 }
     case "ethglobal":
       return { className: "h-5 w-[90px]", width: 80, height: 20 }
+    case "colosseum":
+      return { className: "h-6 w-[120px]", width: 120, height: 24 }
     default:
       return { className: "h-12 w-[160px]", width: 160, height: 64 }
   }
@@ -64,6 +71,46 @@ const getMaskStyle = (src: string): React.CSSProperties => ({
   WebkitMaskPosition: "center",
 })
 
+const renderLogo = (logo: typeof SUPPORTED_BY_LOGOS[number], index?: number) => {
+  const logoSize = getLogoSize(logo.name)
+  return (
+    <Link
+      key={`${logo.name}-${index ?? ''}`}
+      href={logo.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex-shrink-0"
+    >
+      <div
+        className={cn(
+          "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300 min-w-[140px]",
+          logo.name === "colosseum" 
+            ? "bg-[#1C2123] dark:bg-[#D8DDDF] group-hover:opacity-90"
+            : "bg-muted/50 group-hover:bg-muted"
+        )}
+      >
+        <div
+          className={cn(
+            "transition-all duration-300",
+            logoSize.className,
+            logo.name === "colosseum"
+              ? "[background-color:var(--background)] dark:[background-color:var(--background)]"
+              : "opacity-70 group-hover:opacity-100 [background-color:var(--foreground)]"
+          )}
+          style={getMaskStyle(logo.src)}
+        />
+        <Image
+          src={logo.src}
+          alt={`${logo.name} logo`}
+          width={logoSize.width}
+          height={logoSize.height}
+          className="sr-only"
+        />
+      </div>
+    </Link>
+  )
+}
+
 export function SupportedBySection() {
   const prefersReduced = useReducedMotion()
   const [isMounted, setIsMounted] = React.useState(false)
@@ -84,56 +131,41 @@ export function SupportedBySection() {
     [prefersReduced]
   )
 
+  // Duplicate logos for seamless infinite scroll (exactly 2 copies for -50% animation)
+  const duplicatedLogos = [...SUPPORTED_BY_LOGOS, ...SUPPORTED_BY_LOGOS]
+
   return (
-    <motion.section
-      className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
-      initial="hidden"
-      animate={isMounted ? "visible" : "hidden"}
-      variants={fadeUp}
-    >
-      <div className="flex flex-col items-start space-y-4">
-        <HighlighterText>SUPPORTED BY</HighlighterText>
-        <div className="flex flex-wrap gap-3">
-          {SUPPORTED_BY_LOGOS.map((logo) => {
-            const logoSize = getLogoSize(logo.name)
-            return (
-              <Link
-                key={logo.name}
-                href={logo.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group"
-              >
-                <div
-                  className={cn(
-                    "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
-                    "bg-muted/50",
-                    "group-hover:bg-muted"
-                  )}
-                >
-                  <div
-                    className={cn(
-                      "transition-all duration-300",
-                      logoSize.className,
-                      "opacity-70 group-hover:opacity-100",
-                      "[background-color:var(--foreground)]"
-                    )}
-                    style={getMaskStyle(logo.src)}
-                  />
-                  <Image
-                    src={logo.src}
-                    alt={`${logo.name} logo`}
-                    width={logoSize.width}
-                    height={logoSize.height}
-                    className="sr-only"
-                  />
-                </div>
-              </Link>
-            )
-          })}
+    <>
+      <motion.section
+        className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
+        initial="hidden"
+        animate={isMounted ? "visible" : "hidden"}
+        variants={fadeUp}
+      >
+        <div className="flex flex-col items-start space-y-4">
+          <HighlighterText>SUPPORTED BY</HighlighterText>
+          
+          {/* Desktop: flex-wrap layout */}
+          <div className="hidden md:flex flex-wrap gap-3">
+            {SUPPORTED_BY_LOGOS.map((logo) => renderLogo(logo))}
+          </div>
+        </div>
+      </motion.section>
+
+      {/* Mobile: auto-scrolling carousel - full width to edge */}
+      <div className="md:hidden w-screen overflow-x-scroll scrollbar-hide -mt-4">
+        <div
+          className="flex gap-3"
+          style={{
+            width: 'max-content',
+            animation: prefersReduced ? 'none' : 'scroll-carousel 25s linear infinite',
+            animationFillMode: 'both',
+          }}
+        >
+          {duplicatedLogos.map((logo, index) => renderLogo(logo, index))}
         </div>
       </div>
-    </motion.section>
+    </>
   )
 }
 
diff --git a/apps/app/src/components/custom-ui/mcp-example-card.tsx b/apps/app/src/components/custom-ui/mcp-example-card.tsx
index 394fdc7..654a1a7 100644
--- a/apps/app/src/components/custom-ui/mcp-example-card.tsx
+++ b/apps/app/src/components/custom-ui/mcp-example-card.tsx
@@ -13,6 +13,7 @@ import { Spinner } from "@/components/ui/spinner"
 import Image from "next/image"
 import { toast } from "sonner"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from "@/components/ui/drawer"
 
 interface McpExampleCardProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string
@@ -26,6 +27,7 @@ export default function McpExampleCard({
 }: McpExampleCardProps) {
   const [selectedTool, setSelectedTool] = useState<ToolFromMcpServerWithStats | null>(null)
   const [showToolModal, setShowToolModal] = useState(false)
+  const [toolDescriptionDrawer, setToolDescriptionDrawer] = useState<{ toolName: string; description: string } | null>(null)
   const [data, setData] = useState<{
     serverId: string
     origin?: string
@@ -189,34 +191,47 @@ export default function McpExampleCard({
               displayTools.map((tool) => (
               <div
                 key={tool.id}
-                className="flex items-center justify-between gap-4 p-4 pr-6 md:pr-4 rounded-[2px] bg-muted-2"
+                className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-4 p-4 pr-6 md:pr-4 rounded-[2px] bg-muted-2"
               >
-                {/* Left: Name + Info Icon */}
+                {/* Mobile: First line - Tool name + Info Icon */}
+                {/* Desktop: Left - Name + Info Icon */}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
                     <h4 className="font-mono text-sm font-medium text-foreground">{tool.name}</h4>
                     {tool.description && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
+                      <>
+                        {/* Desktop: Tooltip */}
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Info className="hidden md:block h-4 w-4 text-muted-foreground opacity-60 cursor-help" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p className="max-w-xs">{tool.description}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        {/* Mobile: Clickable button to open drawer */}
+                        <button
+                          type="button"
+                          onClick={() => setToolDescriptionDrawer({ toolName: tool.name, description: tool.description })}
+                          className="md:hidden"
+                        >
                           <Info className="h-4 w-4 text-muted-foreground opacity-60" />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p className="max-w-xs">{tool.description}</p>
-                        </TooltipContent>
-                      </Tooltip>
+                        </button>
+                      </>
                     )}
                   </div>
                 </div>
                 
-                {/* Right: Price + RUN Button */}
-                <div className="flex items-center gap-2 shrink-0">
+                {/* Mobile: Second line - Price (1/4) + RUN Button (3/4) */}
+                {/* Desktop: Right - Price + RUN Button */}
+                <div className="flex items-center gap-2 md:shrink-0 w-full md:w-auto">
                   {tool.paymentHint && tool.paymentPriceUSD && (
-                    <HighlighterText variant="blue" className="h-8 py-0 flex items-center text-sm">${tool.paymentPriceUSD}</HighlighterText>
+                    <HighlighterText variant="blue" className="h-8 py-0 flex items-center justify-center text-sm w-[25%] md:w-auto shrink-0">${tool.paymentPriceUSD}</HighlighterText>
                   )}
                   <Button
                     variant="customTallAccent"
                     size="sm"
-                    className="h-8 rounded-[2px]"
+                    className="h-8 rounded-[2px] w-[75%] md:w-auto md:flex-none"
                     onClick={() => openToolModal(tool)}
                   >
                     RUN
@@ -281,6 +296,22 @@ export default function McpExampleCard({
           url={data?.origin}
         />
       )}
+
+      {/* Tool Description Drawer (Mobile only) */}
+      <Drawer open={!!toolDescriptionDrawer} onOpenChange={(open) => !open && setToolDescriptionDrawer(null)}>
+        <DrawerContent className="max-h-[85vh] bg-background border-border">
+          <DrawerHeader>
+            <DrawerTitle className="text-foreground text-left font-mono">
+              {toolDescriptionDrawer?.toolName}
+            </DrawerTitle>
+          </DrawerHeader>
+          <div className="px-4 pb-16 overflow-y-auto">
+            <p className="text-base text-muted-foreground">
+              {toolDescriptionDrawer?.description}
+            </p>
+          </div>
+        </DrawerContent>
+      </Drawer>
     </>
   )
 }