diff --git a/app/blogs/components/FeaturedPost.tsx b/app/blogs/components/FeaturedPost.tsx
index 9b23b3a..b7b5149 100644
--- a/app/blogs/components/FeaturedPost.tsx
+++ b/app/blogs/components/FeaturedPost.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import type { Post } from '@/lib/blog/types'
 import { BookOpen02Icon, Megaphone01Icon } from '@hugeicons/core-free-icons'
 import { HugeiconsIcon } from '@hugeicons/react'
@@ -9,16 +10,41 @@ import { TagPill } from './TagPill'
 
 interface FeaturedPostProps {
   post: Post
+  /** Stretch to parent height (e.g. match adjacent stacked cards). */
+  fillHeight?: boolean
+  /** Hide tags, author, and featured chrome — title + description + CTA only. */
+  hideMeta?: boolean
 }
 
-export function FeaturedPost({ post }: FeaturedPostProps) {
+export function FeaturedPost({
+  post,
+  fillHeight = false,
+  hideMeta = false,
+}: FeaturedPostProps) {
   const href = `/blogs/${post.slug.join('/')}`
 
   return (
-    <article className="group relative overflow-hidden rounded-3xl border border-zinc-200/80 bg-white shadow-xs hover:border-zinc-300 transition-all duration-400">
-      <div className="grid grid-cols-1 lg:grid-cols-2">
-        {/* Image side */}
-        <div className="relative aspect-4/3 lg:aspect-auto overflow-hidden bg-linear-to-br from-zinc-100 to-zinc-50 border-b lg:border-b-0 lg:border-r border-zinc-100">
+    <article
+      className={cn(
+        'group relative overflow-hidden rounded-3xl border border-zinc-200/80 bg-white shadow-xs hover:border-zinc-300 transition-all duration-400',
+        fillHeight && 'h-full',
+      )}
+    >
+      <div
+        className={cn(
+          'grid grid-cols-1 lg:grid-cols-5',
+          fillHeight && 'h-full',
+        )}
+      >
+        {/* Image side — narrower than content */}
+        <div
+          className={cn(
+            'relative overflow-hidden bg-linear-to-br from-zinc-100 to-zinc-50 border-b lg:border-b-0 lg:border-r border-zinc-100 lg:col-span-2',
+            fillHeight
+              ? 'min-h-48 h-full lg:min-h-0'
+              : 'aspect-4/3 lg:aspect-auto',
+          )}
+        >
           {post.coverImage ? (
             <Image
               src={post.coverImage}
@@ -28,7 +54,12 @@ export function FeaturedPost({ post }: FeaturedPostProps) {
               className="object-cover transition-transform duration-700 group-hover:scale-105"
             />
           ) : (
-            <div className="flex h-full min-h-70 items-center justify-center">
+            <div
+              className={cn(
+                'flex h-full items-center justify-center',
+                !fillHeight && 'min-h-70',
+              )}
+            >
               <div className="text-center px-8">
                 <div
                   className="mx-auto mb-4 size-16 rounded-2xl flex items-center justify-center shadow-lg"
@@ -50,7 +81,7 @@ export function FeaturedPost({ post }: FeaturedPostProps) {
           )}
 
           {/* Featured badge */}
-          {post.featured && (
+          {!hideMeta && post.featured && (
             <div className="absolute left-4 top-4 flex items-center gap-1.5 rounded-full bg-white/90 backdrop-blur-sm px-3 py-1 text-[11px] font-bold text-zinc-800 border border-zinc-200/80 shadow-sm">
               <span className="size-1.5 rounded-full bg-primary" />
               Featured
@@ -59,20 +90,34 @@ export function FeaturedPost({ post }: FeaturedPostProps) {
         </div>
 
         {/* Content side */}
-        <div className="flex flex-col justify-center p-8 lg:p-10">
-          <TagPill kind={post.kind} category={post.category} className="mb-4" />
+        <div className="flex flex-col justify-center p-8 lg:col-span-3 lg:p-10">
+          {!hideMeta && (
+            <TagPill kind={post.kind} category={post.category} className="mb-4" />
+          )}
 
-          <h2 className="mb-3 text-2xl lg:text-3xl font-bold text-zinc-900 leading-snug tracking-tight group-hover:text-primary transition-colors duration-200">
+          <h2
+            className={cn(
+              'mb-3 font-bold leading-snug tracking-tight text-zinc-900 transition-colors duration-200 group-hover:text-primary',
+              hideMeta ? 'text-xl lg:text-2xl' : 'text-2xl lg:text-3xl',
+            )}
+          >
             {post.title}
           </h2>
 
-          <p className="mb-6 text-[15px] text-zinc-500 leading-relaxed line-clamp-3">
+          <p
+            className={cn(
+              'text-[15px] text-zinc-500 leading-relaxed line-clamp-3',
+              hideMeta ? 'mb-8' : 'mb-6',
+            )}
+          >
             {post.description}
           </p>
 
-          <div className="mb-6">
-            <AuthorByline post={post} />
-          </div>
+          {!hideMeta && (
+            <div className="mb-6">
+              <AuthorByline post={post} />
+            </div>
+          )}
 
           <Button
             asChild
diff --git a/app/blogs/components/PostCard.tsx b/app/blogs/components/PostCard.tsx
index cba4ae3..c8e8152 100644
--- a/app/blogs/components/PostCard.tsx
+++ b/app/blogs/components/PostCard.tsx
@@ -8,6 +8,7 @@ import { AUTHORS } from '@/lib/blog/authors'
 import type { Post } from '@/lib/blog/types'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { BookOpen02Icon, Megaphone01Icon } from '@hugeicons/core-free-icons'
+import { cn } from '@/lib/utils'
 
 function formatDate(iso: string) {
   return new Date(iso).toLocaleDateString('en-US', {
@@ -19,20 +20,37 @@ function formatDate(iso: string) {
 
 interface PostCardProps {
   post: Post
+  /** Stretch to parent height (e.g. equal split in a stacked column). */
+  fillHeight?: boolean
+  /** Hide tags, author, and date — title + description only. */
+  hideMeta?: boolean
 }
 
-export function PostCard({ post }: PostCardProps) {
+export function PostCard({
+  post,
+  fillHeight = false,
+  hideMeta = false,
+}: PostCardProps) {
   const author = AUTHORS[post.author] ?? { name: post.author, avatar: '' }
   const href = `/blogs/${post.slug.join('/')}`
 
   return (
     <motion.article
       transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
-      className="group relative flex flex-col overflow-hidden rounded-2xl border border-zinc-200/80 bg-white shadow-xs hover:shadow-md hover:border-zinc-300 transition-all duration-400"
+      className={cn(
+        'group relative flex flex-col overflow-hidden rounded-2xl border border-zinc-200/80 bg-white shadow-xs hover:shadow-md hover:border-zinc-300 transition-all duration-400',
+        fillHeight && 'h-full',
+      )}
     >
-      <Link href={href} className="block flex-1">
+      <Link href={href} className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         {/* Cover image placeholder */}
-        <div className="mb-4 h-42 w-full overflow-hidden bg-linear-to-br from-zinc-100 to-zinc-50 border border-zinc-100">
+        <div
+          className={cn(
+            'w-full overflow-hidden bg-linear-to-br from-zinc-100 to-zinc-50 border border-zinc-100',
+            hideMeta ? 'mb-5' : 'mb-4',
+            fillHeight ? 'min-h-28 flex-1' : 'h-42',
+          )}
+        >
           {post.coverImage ? (
             <Image
               src={post.coverImage}
@@ -64,40 +82,56 @@ export function PostCard({ post }: PostCardProps) {
           )}
         </div>
 
-        <TagPill kind={post.kind} category={post.category} className="mb-3 px-5" />
-
-        <h3 className="mb-2 text-[15px] px-5 font-semibold text-zinc-900 leading-snug line-clamp-2 group-hover:text-primary transition-colors duration-200">
-          {post.title}
-        </h3>
+        {!hideMeta && (
+          <TagPill kind={post.kind} category={post.category} className="mb-3 px-5" />
+        )}
 
-        <p className="text-[13px] text-zinc-500 leading-relaxed line-clamp-2 px-5">
-          {post.description}
-        </p>
+        <div
+          className={cn(
+            'w-full min-w-0 shrink-0 px-5',
+            hideMeta ? 'pb-8' : 'pb-4',
+          )}
+        >
+          <h3 className="mb-2 line-clamp-2 text-[15px] font-semibold leading-snug text-zinc-900 transition-colors duration-200 group-hover:text-primary">
+            {post.title}
+          </h3>
+          <p
+            className="overflow-hidden text-[13px] leading-relaxed text-zinc-500"
+            style={{
+              display: '-webkit-box',
+              WebkitBoxOrient: 'vertical',
+              WebkitLineClamp: 2,
+            }}
+          >
+            {post.description}
+          </p>
+        </div>
       </Link>
 
-      {/* Footer */}
-      <div className="flex items-center gap-2.5 border-t border-zinc-100 px-5 py-3">
-        {author.avatar && (
-          <div className="relative size-6 shrink-0 overflow-hidden rounded-full ring-1 ring-zinc-200">
-            <Image
-              src={author.avatar}
-              alt={author.name}
-              fill
-              className="object-cover"
-              sizes="24px"
-            />
-          </div>
-        )}
-        <span className="flex-1 truncate text-[12px] font-medium text-zinc-600">
-          {author.name}
-        </span>
-        <time className="shrink-0 text-[11px] text-zinc-400" dateTime={post.publishedAt}>
-          {formatDate(post.publishedAt)}
-        </time>
-        <span className="shrink-0 text-[11px] text-zinc-400">
-          · {post.readingTime}m
-        </span>
-      </div>
+      {!hideMeta && (
+        <div className="mt-auto flex items-center gap-2.5 border-t border-zinc-100 px-5 py-3">
+          {author.avatar && (
+            <div className="relative size-6 shrink-0 overflow-hidden rounded-full ring-1 ring-zinc-200">
+              <Image
+                src={author.avatar}
+                alt={author.name}
+                fill
+                className="object-cover"
+                sizes="24px"
+              />
+            </div>
+          )}
+          <span className="flex-1 truncate text-[12px] font-medium text-zinc-600">
+            {author.name}
+          </span>
+          <time className="shrink-0 text-[11px] text-zinc-400" dateTime={post.publishedAt}>
+            {formatDate(post.publishedAt)}
+          </time>
+          <span className="shrink-0 text-[11px] text-zinc-400">
+            · {post.readingTime}m
+          </span>
+        </div>
+      )}
     </motion.article>
   )
 }
diff --git a/app/components/landing/FeaturedGuides.tsx b/app/components/landing/FeaturedGuides.tsx
new file mode 100644
index 0000000..f77df0a
--- /dev/null
+++ b/app/components/landing/FeaturedGuides.tsx
@@ -0,0 +1,107 @@
+import Link from "next/link"
+import { getAllPosts } from "@/lib/blog/getAllPosts"
+import type { Post } from "@/lib/blog/types"
+import { FeaturedPost } from "@/app/blogs/components/FeaturedPost"
+import { PostCard } from "@/app/blogs/components/PostCard"
+import { Badge } from "@/components/ui/badge"
+import { Blur } from "@/components/animate-ui/primitives/effects/blur"
+import { KineticText } from "@/components/ui/kinetic-text"
+import { ArrowRight01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+const SIDE_SLUGS = [
+  "guides/ai-context/why-claude-and-agents-md",
+  "guides/ai-context/cursor-with-structured-ai-context",
+] as const
+
+function bySlug(posts: Post[], slugPath: string): Post | undefined {
+  return posts.find((post) => post.slug.join("/") === slugPath)
+}
+
+export async function FeaturedGuides() {
+  const allPosts = await getAllPosts()
+
+  // Same rule as /blogs: latest post marked featured: true
+  const featured = allPosts
+    .filter((post) => post.featured)
+    .sort(
+      (a, b) =>
+        new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(),
+    )[0]
+
+  const featuredKey = featured?.slug.join("/")
+
+  const sidePosts = SIDE_SLUGS.map((slug) => bySlug(allPosts, slug))
+    .filter((post): post is Post => Boolean(post))
+    .filter((post) => post.slug.join("/") !== featuredKey)
+    .slice(0, 2)
+
+  if (!featured && sidePosts.length === 0) {
+    return null
+  }
+
+  return (
+    <section id="blogs" className="relative w-full overflow-hidden bg-zinc-50/50 py-24">
+      <div className="pointer-events-none absolute top-0 left-1/2 h-full w-full -translate-x-1/2 bg-[radial-gradient(circle_at_50%_0%,var(--color-primary)_0.03,transparent_50%)] opacity-5" />
+
+      <div className="relative z-10 mx-auto flex max-w-7xl flex-col gap-12 px-6 md:px-12">
+        <div className="flex flex-col items-center gap-4 text-center">
+          <Badge
+            variant="outline"
+            className="rounded-full border-primary/10 bg-primary/5 px-3 py-3 text-[11px] font-bold uppercase tracking-wider text-primary"
+          >
+            <span
+              aria-hidden="true"
+              className="mr-2 inline-flex size-1.5 animate-pulse rounded-full bg-primary"
+            />
+            From the Blog
+          </Badge>
+          <Blur inView={true}>
+            <h2 className="text-4xl leading-[1.1] font-bold tracking-tight text-zinc-400 md:text-5xl lg:text-6xl">
+              Guides from{" "}
+              <KineticText
+                as="span"
+                text="FlutterInit"
+                className="pointer-events-auto font-extrabold tracking-wider text-primary"
+              />
+            </h2>
+          </Blur>
+          <p className="max-w-2xl text-lg font-medium leading-relaxed text-zinc-500">
+            Featured updates, AI context deep-dives and tips.
+          </p>
+        </div>
+
+        {/*
+          lg: featured spans 2 rows; each side card is one row.
+          Featured height = card1 + gap + card2.
+        */}
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-5 lg:grid-rows-2">
+          {featured && (
+            <div className="min-h-0 h-full lg:col-span-3 lg:row-span-2">
+              <FeaturedPost post={featured} fillHeight hideMeta />
+            </div>
+          )}
+          {sidePosts.map((post) => (
+            <div key={post.slug.join("/")} className="min-h-0 lg:col-span-2">
+              <PostCard post={post} fillHeight hideMeta />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-center">
+          <Link
+            href="/blogs"
+            className="group inline-flex h-12 items-center gap-2 rounded-2xl border border-zinc-200 bg-white px-5 text-sm font-semibold text-zinc-700 shadow-xs transition-all duration-300 hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900"
+          >
+            Browse all posts
+            <HugeiconsIcon
+              icon={ArrowRight01Icon}
+              size={16}
+              className="text-zinc-400 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-700"
+            />
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/app/components/landing/Footer.tsx b/app/components/landing/Footer.tsx
index cfc698b..6e7cf4b 100644
--- a/app/components/landing/Footer.tsx
+++ b/app/components/landing/Footer.tsx
@@ -33,7 +33,7 @@ export function Footer() {
   };
 
   return (
-    <footer id="guides" className="w-full bg-white border-t border-zinc-200 pt-12 pb-8 overflow-hidden relative">
+    <footer className="w-full bg-white border-t border-zinc-200 pt-12 pb-8 overflow-hidden relative">
       {/* Background decoration */}
       <div className="absolute bottom-0 left-0 w-full h-25 bg-linear-to-t from-zinc-50 to-transparent pointer-events-none" />
 
diff --git a/app/components/landing/Navbar.tsx b/app/components/landing/Navbar.tsx
index 30d2c49..3a289c0 100644
--- a/app/components/landing/Navbar.tsx
+++ b/app/components/landing/Navbar.tsx
@@ -1,31 +1,29 @@
 'use client'
 
-import { useState } from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
+import {
+  Highlight,
+  HighlightItem,
+} from '@/components/animate-ui/primitives/effects/highlight'
 import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-import { Menu04Icon, Cancel01Icon } from '@hugeicons/core-free-icons'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { Cancel01Icon, Menu04Icon } from '@hugeicons/core-free-icons'
 import { HugeiconsIcon } from '@hugeicons/react'
 import {
   AnimatePresence,
   motion,
-  useMotionValueEvent,
   useScroll,
   useTransform,
   type MotionValue,
 } from 'motion/react'
-import {
-  Highlight,
-  HighlightItem,
-} from '@/components/animate-ui/primitives/effects/highlight'
-import { useIsMobile } from '@/hooks/use-mobile'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useState } from 'react'
 
 const NAV_LINKS = [
   { href: '#how-it-works', label: 'How it Works' },
   { href: '#features', label: 'Features' },
   { href: '#showcase', label: 'Showcase' },
-  { href: '/blogs', label: 'Blogs' },
+  { href: '#blogs', label: 'Blogs' },
 ]
 
 const SCROLL_RANGE = 500
@@ -34,16 +32,10 @@ const easeOut: [number, number, number, number] = [0.16, 1, 0.3, 1]
 
 export function Navbar({ githubStars }: { githubStars?: React.ReactNode }) {
   const [mobileOpen, setMobileOpen] = useState(false)
-  const [scrolled, setScrolled] = useState(false)
   const isMobile = useIsMobile()
 
   const { scrollY } = useScroll()
 
-  // Track scrolled boolean for mobile menu shape
-  useMotionValueEvent(scrollY, 'change', (y) => {
-    setScrolled(y > SCROLL_RANGE * 0.5)
-  })
-
   // ── Derived motion values ───────────────────────────────────────
 
   /** Header top padding: 0 → 16px */
@@ -63,8 +55,8 @@ export function Navbar({ githubStars }: { githubStars?: React.ReactNode }) {
   /** Inner horizontal padding: 120px → 20px */
   const navPaddingX = useTransform(scrollY, [0, SCROLL_RANGE], [120, 35], { clamp: true })
 
-  /** Gap between nav links: 32px → 16px (kept for mobile menu spacing) */
-  const linkGap = useTransform(scrollY, [0, SCROLL_RANGE], [32, 16], { clamp: true })
+  /** Right padding after nav links: 0 → 16px when collapsed */
+  const linkPaddingRight = useTransform(scrollY, [0, SCROLL_RANGE], [0, 30], { clamp: true })
 
   /** Bottom border line opacity: 0 → 0 (hidden always, separator removed) */
   const lineOpacity = useTransform(scrollY, [0, SCROLL_RANGE * 0.5], [0, 0], { clamp: true })
@@ -168,25 +160,30 @@ export function Navbar({ githubStars }: { githubStars?: React.ReactNode }) {
           </div>
 
           {/* Center: Nav links — always at the true mid-point of the symmetric padding */}
-          <Highlight
-            mode="parent"
-            hover={true}
-            click={false}
-            controlledItems={true}
-            className="rounded-full bg-zinc-200/50"
-            containerClassName="hidden items-center gap-1 lg:flex"
+          <motion.div
+            className="hidden lg:block"
+            style={{ paddingRight: isMobile ? 0 : linkPaddingRight }}
           >
-            {NAV_LINKS.map((link) => (
-              <HighlightItem key={link.href} value={link.href} asChild>
-                <a
-                  href={link.href}
-                  className="relative z-10 px-3 py-1.5 text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors duration-200"
-                >
-                  {link.label}
-                </a>
-              </HighlightItem>
-            ))}
-          </Highlight>
+            <Highlight
+              mode="parent"
+              hover={true}
+              click={false}
+              controlledItems={true}
+              className="rounded-full bg-zinc-200/50"
+              containerClassName="flex items-center gap-1"
+            >
+              {NAV_LINKS.map((link) => (
+                <HighlightItem key={link.href} value={link.href} asChild>
+                  <a
+                    href={link.href}
+                    className="relative z-10 px-3 py-1.5 text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors duration-200"
+                  >
+                    {link.label}
+                  </a>
+                </HighlightItem>
+              ))}
+            </Highlight>
+          </motion.div>
 
           {/* Right: Actions */}
           <div className="hidden flex-1 items-center justify-end gap-3 lg:flex">
diff --git a/app/components/wizard/CodeEditorWorkspace.tsx b/app/components/wizard/CodeEditorWorkspace.tsx
index 48195ed..d02110f 100644
--- a/app/components/wizard/CodeEditorWorkspace.tsx
+++ b/app/components/wizard/CodeEditorWorkspace.tsx
@@ -8,7 +8,8 @@ import {
   Cancel01Icon,
   File01Icon,
   FolderMinusIcon,
-  PaintBrushIcon,
+  SwatchIcon,
+  SidebarLeftIcon,
 } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
@@ -71,6 +72,13 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@/lib/utils"
 
 type CacheEntry = {
@@ -119,7 +127,7 @@ function FileTreeView({
           "w-full rounded-none text-left transition-colors duration-150",
           activePath === node.path
             ? "bg-primary/15 text-foreground rounded-md"
-            : "hover:bg-muted rounded-md"
+            : "hover:bg-muted rounded-md active:bg-muted"
         )}
       >
         <FileItem
@@ -182,9 +190,9 @@ function HighlightedPane({
   return (
     <div
       className={cn(
-        "h-full overflow-auto bg-background text-foreground text-[13px] leading-normal",
-        "[&_pre]:m-0 [&_pre]:min-h-full [&_pre]:bg-transparent! [&_pre]:px-4 [&_pre]:py-3 [&_pre]:text-foreground!",
-        "[&_code]:font-mono [&_code]:text-[13px]"
+        "h-full overflow-auto overscroll-contain bg-background text-foreground text-[12px] leading-normal sm:text-[13px]",
+        "[&_pre]:m-0 [&_pre]:min-h-full [&_pre]:min-w-full [&_pre]:bg-transparent! [&_pre]:px-3 [&_pre]:py-3 [&_pre]:text-foreground! sm:[&_pre]:px-4",
+        "[&_code]:font-mono [&_code]:text-[12px] sm:[&_code]:text-[13px]"
       )}
       dangerouslySetInnerHTML={{ __html: html }}
     />
@@ -210,7 +218,7 @@ function ThemePicker({
           size="sm"
           className="h-7 gap-1.5 rounded-md px-2.5 text-xs font-medium text-foreground/80 hover:bg-muted hover:text-foreground"
         >
-          <HugeiconsIcon icon={PaintBrushIcon} className="size-3.5 shrink-0" />
+          <HugeiconsIcon icon={SwatchIcon} className="size-3.5 shrink-0" />
           <span className="hidden max-w-36 truncate sm:inline">
             {getShikiThemeLabel(value)}
           </span>
@@ -264,30 +272,122 @@ function SyncStatus({ syncing }: { syncing: boolean }) {
   return (
     <div
       className={cn(
-        "flex h-7 items-center gap-2 rounded-md border px-2.5 text-xs font-medium",
+        "flex h-7 items-center gap-1.5 rounded-md border px-2 text-xs font-medium sm:gap-2 sm:px-2.5",
         syncing
           ? "border-primary/25 bg-primary/10 text-primary"
           : "border-border bg-background text-muted-foreground"
       )}
       aria-live="polite"
+      aria-label={syncing ? "Syncing" : "Live"}
     >
       {syncing ? (
-        <>
-          <Spinner className="size-3.5 text-primary" />
-          <span>Syncing</span>
-        </>
+        <Spinner className="size-3.5 text-primary" />
       ) : (
-        <>
-          <span className="size-2 shrink-0 rounded-full bg-emerald-500" />
-          <span>Live</span>
-        </>
+        <span className="size-2 shrink-0 rounded-full bg-emerald-500" />
       )}
+      <span className="hidden sm:inline">{syncing ? "Syncing" : "Live"}</span>
+    </div>
+  )
+}
+
+function ExplorerPane({
+  projectName,
+  loading,
+  error,
+  tree,
+  treeKey,
+  openFolders,
+  setOpenFolders,
+  activePath,
+  onSelect,
+  onCollapseAll,
+  inSheet = false,
+}: {
+  projectName: string
+  loading: boolean
+  error: string | null
+  tree: FileTreeNode[]
+  treeKey: number
+  openFolders: string[]
+  setOpenFolders: (value: string[]) => void
+  activePath: string | null
+  onSelect: (path: string) => void
+  onCollapseAll: () => void
+  inSheet?: boolean
+}) {
+  return (
+    <div
+      className={cn(
+        "group/explorer flex h-full flex-col overflow-hidden bg-muted/25",
+        inSheet ? "pt-12" : "pt-3"
+      )}
+    >
+      <div
+        className={cn(
+          "mb-1 flex items-center gap-1 px-3 pb-1",
+          inSheet && "pr-2"
+        )}
+      >
+        <div className="min-w-0 flex-1 truncate text-[12px] font-semibold text-muted-foreground">
+          {projectName.toUpperCase()}
+        </div>
+        <div className="flex shrink-0 items-center opacity-100 transition-opacity duration-150 md:opacity-0 md:group-hover/explorer:opacity-100 md:focus-within:opacity-100">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="size-8 rounded-sm text-muted-foreground hover:text-foreground md:size-6 cursor-pointer"
+            onClick={onCollapseAll}
+            aria-label="Collapse all folders"
+            title="Collapse all"
+          >
+            <HugeiconsIcon icon={FolderMinusIcon} className="size-3.5" />
+          </Button>
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-hidden">
+        {loading ? (
+          <div className="flex flex-col gap-1.5 px-3 py-2" aria-busy="true">
+            <div className="h-6 animate-pulse rounded-sm bg-muted" />
+            <div className="h-6 animate-pulse rounded-sm bg-muted" />
+            <div className="ml-3 h-6 animate-pulse rounded-sm bg-muted" />
+            <div className="ml-3 h-6 animate-pulse rounded-sm bg-muted" />
+          </div>
+        ) : error ? (
+          <div className="px-3 py-2 text-xs text-destructive">{error}</div>
+        ) : tree.length === 0 ? (
+          <div className="px-3 py-2 text-xs text-muted-foreground">
+            No files generated.
+          </div>
+        ) : (
+          <Files
+            key={treeKey}
+            open={openFolders}
+            onOpenChange={setOpenFolders}
+            className={cn(
+              "h-full py-0 pl-2 pr-0 md:**:data-[slot=folder]:py-0.5 md:**:data-[slot=file]:py-0.5",
+              "[scrollbar-width:none] hover:[scrollbar-width:thin]",
+              "[&::-webkit-scrollbar]:w-0 hover:[&::-webkit-scrollbar]:w-1.5",
+              "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-transparent",
+              "hover:[&::-webkit-scrollbar-thumb]:bg-border",
+              "[&::-webkit-scrollbar-track]:bg-transparent"
+            )}
+          >
+            <FileTreeView
+              nodes={tree}
+              activePath={activePath}
+              onSelect={onSelect}
+            />
+          </Files>
+        )}
+      </div>
     </div>
   )
 }
 
 export function CodeEditorWorkspace() {
   const { config, fontFiles, isHydrated } = useWizard()
+  const isMobile = useIsMobile()
   const isValid = React.useMemo(
     () => scaffoldConfigSchema.safeParse(config).success,
     [config]
@@ -313,6 +413,7 @@ export function CodeEditorWorkspace() {
   const [loading, setLoading] = React.useState(false)
   const [pendingSync, setPendingSync] = React.useState(false)
   const [error, setError] = React.useState<string | null>(null)
+  const [explorerOpen, setExplorerOpen] = React.useState(false)
   const hasLoadedRef = React.useRef(false)
   const requestIdRef = React.useRef(0)
 
@@ -410,6 +511,10 @@ export function CodeEditorWorkspace() {
     return () => window.clearTimeout(timer)
   }, [isHydrated, isValid, configKey, loadScaffold])
 
+  React.useEffect(() => {
+    if (!isMobile) setExplorerOpen(false)
+  }, [isMobile])
+
   const isSyncing = pendingSync || loading
 
   const collapseAllFolders = React.useCallback(() => {
@@ -417,10 +522,14 @@ export function CodeEditorWorkspace() {
     setTreeKey((key) => key + 1)
   }, [])
 
-  const openFile = React.useCallback((path: string) => {
-    setOpenPaths((prev) => (prev.includes(path) ? prev : [...prev, path]))
-    setActivePath(path)
-  }, [])
+  const openFile = React.useCallback(
+    (path: string) => {
+      setOpenPaths((prev) => (prev.includes(path) ? prev : [...prev, path]))
+      setActivePath(path)
+      if (isMobile) setExplorerOpen(false)
+    },
+    [isMobile]
+  )
 
   const closeTab = React.useCallback((path: string, event?: React.MouseEvent) => {
     event?.stopPropagation()
@@ -475,6 +584,214 @@ export function CodeEditorWorkspace() {
   const canPreview =
     activePath != null && canPreviewAsText(activePath, activeCode)
 
+  const explorer = (
+    <ExplorerPane
+      projectName={projectName}
+      loading={loading}
+      error={error}
+      tree={tree}
+      treeKey={treeKey}
+      openFolders={openFolders}
+      setOpenFolders={setOpenFolders}
+      activePath={activePath}
+      onSelect={openFile}
+      onCollapseAll={collapseAllFolders}
+      inSheet={isMobile}
+    />
+  )
+
+  const editorColumn = (
+    <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
+      {/* Tabs */}
+      <div className="flex h-10 shrink-0 items-center gap-1 border-b border-border/60 bg-muted/20 px-1.5 sm:border-b-0 sm:px-2">
+        <div
+          className={cn(
+            "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto overscroll-x-contain px-0.5 py-1.5",
+            "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          )}
+        >
+          {orderedOpenPaths.length === 0 && !loading ? (
+            <span className="px-2 text-xs text-muted-foreground">
+              No open editors
+            </span>
+          ) : null}
+          {orderedOpenPaths.map((path) => {
+            const isActive = path === activePath
+            const isPinned = pinnedPaths.includes(path)
+            const name = basename(path)
+            return (
+              <ContextMenu key={path}>
+                <ContextMenuTrigger asChild>
+                  <div
+                    role="tab"
+                    aria-selected={isActive}
+                    tabIndex={0}
+                    onClick={() => setActivePath(path)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault()
+                        setActivePath(path)
+                      }
+                    }}
+                    className={cn(
+                      "group flex h-8 max-w-38 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 text-[12px] transition-colors duration-150 sm:h-7 sm:w-40 sm:max-w-none",
+                      isActive
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground hover:bg-muted/70 hover:text-foreground"
+                    )}
+                  >
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        "size-3.5 shrink-0",
+                        isActive ? "bg-primary" : "bg-muted-foreground"
+                      )}
+                      style={{
+                        maskImage: "url(/icons/dart.svg)",
+                        maskSize: "contain",
+                        maskRepeat: "no-repeat",
+                        maskPosition: "center",
+                        WebkitMaskImage: "url(/icons/dart.svg)",
+                        WebkitMaskSize: "contain",
+                        WebkitMaskRepeat: "no-repeat",
+                        WebkitMaskPosition: "center",
+                      }}
+                    />
+                    <span className="min-w-0 flex-1 truncate font-medium">
+                      {name}
+                    </span>
+                    {isPinned ? (
+                      <span
+                        aria-label="Pinned"
+                        className={cn(
+                          "size-1.5 shrink-0 rounded-full",
+                          isActive ? "bg-primary" : "bg-muted-foreground"
+                        )}
+                      />
+                    ) : null}
+                    <button
+                      type="button"
+                      aria-label={`Close ${name}`}
+                      onClick={(e) => closeTab(path, e)}
+                      className={cn(
+                        "ml-auto flex size-6 shrink-0 items-center justify-center rounded-sm transition-opacity hover:bg-muted sm:size-auto sm:p-0.5",
+                        isActive
+                          ? "text-primary/70 opacity-100 hover:text-primary"
+                          : "text-muted-foreground opacity-100 hover:text-foreground sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100"
+                      )}
+                    >
+                      <HugeiconsIcon
+                        icon={Cancel01Icon}
+                        className="size-3"
+                      />
+                    </button>
+                  </div>
+                </ContextMenuTrigger>
+                <ContextMenuContent className="w-44">
+                  <ContextMenuItem onClick={() => closeTab(path)}>
+                    Close
+                  </ContextMenuItem>
+                  <ContextMenuItem
+                    onClick={() => closeAllTabs()}
+                    disabled={orderedOpenPaths.length === 0}
+                  >
+                    Close all
+                  </ContextMenuItem>
+                  <ContextMenuItem
+                    onClick={() => closeOtherTabs(path)}
+                    disabled={orderedOpenPaths.length <= 1}
+                  >
+                    Close others
+                  </ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem onClick={() => moveTabToRight(path)}>
+                    Move to right
+                  </ContextMenuItem>
+                  <ContextMenuItem onClick={() => togglePinTab(path)}>
+                    {isPinned ? "Unpin" : "Pin"}
+                  </ContextMenuItem>
+                </ContextMenuContent>
+              </ContextMenu>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Breadcrumb */}
+      {activePath ? (
+        <div className="flex h-7 shrink-0 items-center gap-1 overflow-x-auto overscroll-x-contain bg-background px-3 text-[11px] text-muted-foreground sm:h-6 sm:text-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {activePath.split("/").map((segment, index, parts) => (
+            <React.Fragment key={`${segment}-${index}`}>
+              {index > 0 && <span className="shrink-0 opacity-40">/</span>}
+              <span
+                className={cn(
+                  "shrink-0",
+                  index === parts.length - 1 && "text-foreground"
+                )}
+              >
+                {segment}
+              </span>
+            </React.Fragment>
+          ))}
+        </div>
+      ) : null}
+
+      {/* Code */}
+      <div className="min-h-0 min-w-0 flex-1 bg-background">
+        {loading ? (
+          <div className="flex h-full flex-col gap-2 p-4" aria-busy="true">
+            <div className="h-3 w-2/3 animate-pulse rounded bg-muted" />
+            <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
+            <div className="h-3 w-3/4 animate-pulse rounded bg-muted" />
+          </div>
+        ) : error ? (
+          <div className="flex h-full items-center justify-center p-6 text-center text-sm text-destructive">
+            {error}
+          </div>
+        ) : !activePath ? (
+          <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center text-sm text-muted-foreground">
+            <HugeiconsIcon icon={File01Icon} className="size-8 opacity-40" />
+            <p>
+              {isMobile
+                ? "Open the explorer to pick a file."
+                : "Open a file from the explorer to start."}
+            </p>
+            {isMobile ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="gap-1.5"
+                onClick={() => setExplorerOpen(true)}
+              >
+                <HugeiconsIcon icon={SidebarLeftIcon} className="size-3.5" />
+                Browse files
+              </Button>
+            ) : null}
+          </div>
+        ) : !canPreview ? (
+          <Empty className="h-full border-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <HugeiconsIcon icon={File01Icon} />
+              </EmptyMedia>
+              <EmptyTitle>No preview available</EmptyTitle>
+              <EmptyDescription>
+                This file type can&apos;t be previewed in the editor.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <HighlightedPane
+            code={activeCode}
+            filePath={activePath}
+            theme={shikiTheme}
+          />
+        )}
+      </div>
+    </div>
+  )
+
   if (!isHydrated) {
     return (
       <div className="flex h-dvh items-center justify-center bg-background text-sm text-muted-foreground">
@@ -499,27 +816,42 @@ export function CodeEditorWorkspace() {
   return (
     <div className="flex h-dvh flex-col overflow-hidden bg-background text-foreground">
       {/* Title bar */}
-      <header className="flex h-10 shrink-0 items-center gap-2 border-b border-border bg-muted/40 px-2">
-        <Button
-          asChild
-          variant="ghost"
-          size="sm"
-          className="h-7 gap-1.5 rounded-md px-2.5 text-xs font-medium text-foreground/80 hover:bg-muted hover:text-foreground"
-        >
-          <Link href="/create">
-            <HugeiconsIcon icon={ArrowLeft01Icon} className="size-3.5" />
-            Wizard
-          </Link>
-        </Button>
-        <div className="mx-auto flex min-w-0 items-center gap-2">
+      <header className="flex h-11 shrink-0 items-center gap-1 border-b border-border bg-muted/40 px-1.5 sm:h-10 sm:gap-2 sm:px-2">
+        <div className="flex min-w-0 shrink-0 items-center gap-0.5 sm:gap-1">
+          {isMobile ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="size-8 rounded-md text-foreground/80 hover:bg-muted hover:text-foreground"
+              onClick={() => setExplorerOpen(true)}
+              aria-label="Open file explorer"
+            >
+              <HugeiconsIcon icon={SidebarLeftIcon} className="size-4" />
+            </Button>
+          ) : null}
+          <Button
+            asChild
+            variant="ghost"
+            size="sm"
+            className="h-8 gap-1.5 rounded-md px-2 text-xs font-medium text-foreground/80 hover:bg-muted hover:text-foreground sm:h-7 sm:px-2.5"
+          >
+            <Link href="/create">
+              <HugeiconsIcon icon={ArrowLeft01Icon} className="size-3.5" />
+              <span className="sm:hidden">Back</span>
+              <span className="hidden sm:inline">Wizard</span>
+            </Link>
+          </Button>
+        </div>
+        <div className="mx-auto flex min-w-0 flex-1 items-center justify-center gap-2 px-1">
           <span className="truncate text-xs font-semibold text-foreground">
             {projectName}
           </span>
-          <span className="hidden text-xs text-muted-foreground sm:inline">
+          <span className="hidden text-xs text-muted-foreground md:inline">
             Preview
           </span>
         </div>
-        <div className="flex items-center gap-1.5">
+        <div className="flex shrink-0 items-center gap-1 sm:gap-1.5">
           <ThemePicker value={shikiTheme} onChange={setShikiTheme} />
           <SyncStatus syncing={isSyncing} />
         </div>
@@ -536,251 +868,44 @@ export function CodeEditorWorkspace() {
         <div className="h-0.5 w-full shrink-0 bg-transparent" aria-hidden="true" />
       )}
 
-      <div className="flex min-h-0 flex-1">
-        <ResizablePanelGroup orientation="horizontal" className="min-w-0 flex-1">
-          {/* Sidebar explorer */}
-          <ResizablePanel
-            defaultSize="20%"
-            minSize="12rem"
-            maxSize="36%"
-            className="min-w-0 bg-muted/25"
+      <div className="flex min-h-0 min-w-0 flex-1">
+        {isMobile ? (
+          <>
+            <Sheet open={explorerOpen} onOpenChange={setExplorerOpen}>
+              <SheetContent
+                side="left"
+                showCloseButton
+                className="w-[min(100%,20rem)] gap-0 p-0 [&>button]:top-2.5 [&>button]:right-2"
+              >
+                <SheetHeader className="sr-only">
+                  <SheetTitle>File explorer</SheetTitle>
+                </SheetHeader>
+                <div className="h-full min-h-0">{explorer}</div>
+              </SheetContent>
+            </Sheet>
+            {editorColumn}
+          </>
+        ) : (
+          <ResizablePanelGroup
+            orientation="horizontal"
+            className="min-w-0 flex-1"
           >
-            <div className="group/explorer flex h-full flex-col overflow-hidden pt-3">
-              <div className="mb-1 flex items-center gap-1 px-3 pb-1">
-                <div className="min-w-0 flex-1 truncate text-[12px] font-semibold text-muted-foreground">
-                  {projectName.toUpperCase()}
-                </div>
-                <div className="flex shrink-0 items-center opacity-0 transition-opacity duration-150 group-hover/explorer:opacity-100 focus-within:opacity-100">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    className="size-6 rounded-sm text-muted-foreground hover:text-foreground cursor-pointer"
-                    onClick={collapseAllFolders}
-                    aria-label="Collapse all folders"
-                    title="Collapse all"
-                  >
-                    <HugeiconsIcon icon={FolderMinusIcon} className="size-3.5" />
-                  </Button>
-                </div>
-              </div>
-              <div className="min-h-0 flex-1 overflow-hidden">
-                {loading ? (
-                  <div className="flex flex-col gap-1.5 px-3 py-2" aria-busy="true">
-                    <div className="h-6 animate-pulse rounded-sm bg-muted" />
-                    <div className="h-6 animate-pulse rounded-sm bg-muted" />
-                    <div className="ml-3 h-6 animate-pulse rounded-sm bg-muted" />
-                    <div className="ml-3 h-6 animate-pulse rounded-sm bg-muted" />
-                  </div>
-                ) : error ? (
-                  <div className="px-3 py-2 text-xs text-destructive">{error}</div>
-                ) : tree.length === 0 ? (
-                  <div className="px-3 py-2 text-xs text-muted-foreground">
-                    No files generated.
-                  </div>
-                ) : (
-                  <Files
-                    key={treeKey}
-                    open={openFolders}
-                    onOpenChange={setOpenFolders}
-                    className={cn(
-                      "h-full py-0 pl-2 pr-0 **:data-[slot=folder]:py-0.5 **:data-[slot=file]:py-0.5",
-                      "[scrollbar-width:none] hover:[scrollbar-width:thin]",
-                      "[&::-webkit-scrollbar]:w-0 hover:[&::-webkit-scrollbar]:w-1.5",
-                      "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-transparent",
-                      "hover:[&::-webkit-scrollbar-thumb]:bg-border",
-                      "[&::-webkit-scrollbar-track]:bg-transparent"
-                    )}
-                  >
-                    <FileTreeView
-                      nodes={tree}
-                      activePath={activePath}
-                      onSelect={openFile}
-                    />
-                  </Files>
-                )}
-              </div>
-            </div>
-          </ResizablePanel>
-
-          <ResizableHandle className="w-px bg-border hover:bg-primary/40" />
-
-          {/* Editor column */}
-          <ResizablePanel defaultSize="80%" className="min-w-0">
-            <div className="flex h-full min-h-0 flex-col">
-              {/* Tabs */}
-              <div className="flex h-10 shrink-0 items-center gap-1 bg-muted/20 px-2">
-                <div
-                  className={cn(
-                    "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto px-0.5 py-1.5",
-                    "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-                  )}
-                >
-                  {orderedOpenPaths.length === 0 && !loading ? (
-                    <span className="px-2 text-xs text-muted-foreground">
-                      No open editors
-                    </span>
-                  ) : null}
-                  {orderedOpenPaths.map((path) => {
-                    const isActive = path === activePath
-                    const isPinned = pinnedPaths.includes(path)
-                    const name = basename(path)
-                    return (
-                      <ContextMenu key={path}>
-                        <ContextMenuTrigger asChild>
-                          <div
-                            role="tab"
-                            aria-selected={isActive}
-                            tabIndex={0}
-                            onClick={() => setActivePath(path)}
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault()
-                                setActivePath(path)
-                              }
-                            }}
-                            className={cn(
-                              "group flex h-7 w-40 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 text-[12px] transition-colors duration-150",
-                              isActive
-                                ? "bg-primary/10 text-primary"
-                                : "text-muted-foreground hover:bg-muted/70 hover:text-foreground"
-                            )}
-                          >
-                            <span
-                              aria-hidden="true"
-                              className={cn(
-                                "size-3.5 shrink-0",
-                                isActive ? "bg-primary" : "bg-muted-foreground"
-                              )}
-                              style={{
-                                maskImage: "url(/icons/dart.svg)",
-                                maskSize: "contain",
-                                maskRepeat: "no-repeat",
-                                maskPosition: "center",
-                                WebkitMaskImage: "url(/icons/dart.svg)",
-                                WebkitMaskSize: "contain",
-                                WebkitMaskRepeat: "no-repeat",
-                                WebkitMaskPosition: "center",
-                              }}
-                            />
-                            <span className="min-w-0 flex-1 truncate font-medium">
-                              {name}
-                            </span>
-                            {isPinned ? (
-                              <span
-                                aria-label="Pinned"
-                                className={cn(
-                                  "size-1.5 shrink-0 rounded-full",
-                                  isActive ? "bg-primary" : "bg-muted-foreground"
-                                )}
-                              />
-                            ) : null}
-                            <button
-                              type="button"
-                              aria-label={`Close ${name}`}
-                              onClick={(e) => closeTab(path, e)}
-                              className={cn(
-                                "ml-auto shrink-0 rounded-sm p-0.5 transition-opacity hover:bg-muted",
-                                isActive
-                                  ? "text-primary/70 opacity-70 hover:text-primary"
-                                  : "text-muted-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:text-foreground"
-                              )}
-                            >
-                              <HugeiconsIcon
-                                icon={Cancel01Icon}
-                                className="size-3"
-                              />
-                            </button>
-                          </div>
-                        </ContextMenuTrigger>
-                        <ContextMenuContent className="w-44">
-                          <ContextMenuItem onClick={() => closeTab(path)}>
-                            Close
-                          </ContextMenuItem>
-                          <ContextMenuItem
-                            onClick={() => closeAllTabs()}
-                            disabled={orderedOpenPaths.length === 0}
-                          >
-                            Close all
-                          </ContextMenuItem>
-                          <ContextMenuItem
-                            onClick={() => closeOtherTabs(path)}
-                            disabled={orderedOpenPaths.length <= 1}
-                          >
-                            Close others
-                          </ContextMenuItem>
-                          <ContextMenuSeparator />
-                          <ContextMenuItem onClick={() => moveTabToRight(path)}>
-                            Move to right
-                          </ContextMenuItem>
-                          <ContextMenuItem onClick={() => togglePinTab(path)}>
-                            {isPinned ? "Unpin" : "Pin"}
-                          </ContextMenuItem>
-                        </ContextMenuContent>
-                      </ContextMenu>
-                    )
-                  })}
-                </div>
-              </div>
-
-              {/* Breadcrumb */}
-              {activePath ? (
-                <div className="flex h-6 shrink-0 items-center gap-1 bg-background px-3 text-[12px] text-muted-foreground">
-                  {activePath.split("/").map((segment, index, parts) => (
-                    <React.Fragment key={`${segment}-${index}`}>
-                      {index > 0 && <span className="opacity-40">/</span>}
-                      <span
-                        className={cn(
-                          index === parts.length - 1 && "text-foreground"
-                        )}
-                      >
-                        {segment}
-                      </span>
-                    </React.Fragment>
-                  ))}
-                </div>
-              ) : null}
-
-              {/* Code */}
-              <div className="min-h-0 flex-1 bg-background">
-                {loading ? (
-                  <div className="flex h-full flex-col gap-2 p-4" aria-busy="true">
-                    <div className="h-3 w-2/3 animate-pulse rounded bg-muted" />
-                    <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
-                    <div className="h-3 w-3/4 animate-pulse rounded bg-muted" />
-                  </div>
-                ) : error ? (
-                  <div className="flex h-full items-center justify-center p-6 text-sm text-destructive">
-                    {error}
-                  </div>
-                ) : !activePath ? (
-                  <div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-sm text-muted-foreground">
-                    <HugeiconsIcon icon={File01Icon} className="size-8 opacity-40" />
-                    <p>Open a file from the explorer to start.</p>
-                  </div>
-                ) : !canPreview ? (
-                  <Empty className="h-full border-0">
-                    <EmptyHeader>
-                      <EmptyMedia variant="icon">
-                        <HugeiconsIcon icon={File01Icon} />
-                      </EmptyMedia>
-                      <EmptyTitle>No preview available</EmptyTitle>
-                      <EmptyDescription>
-                        This file type can&apos;t be previewed in the editor.
-                      </EmptyDescription>
-                    </EmptyHeader>
-                  </Empty>
-                ) : (
-                  <HighlightedPane
-                    code={activeCode}
-                    filePath={activePath}
-                    theme={shikiTheme}
-                  />
-                )}
-              </div>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
+            <ResizablePanel
+              defaultSize="20%"
+              minSize="12rem"
+              maxSize="36%"
+              className="min-w-0"
+            >
+              {explorer}
+            </ResizablePanel>
+
+            <ResizableHandle className="w-px bg-border hover:bg-primary/40" />
+
+            <ResizablePanel defaultSize="80%" className="min-w-0">
+              {editorColumn}
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        )}
       </div>
     </div>
   )
diff --git a/app/components/wizard/WizardShell.tsx b/app/components/wizard/WizardShell.tsx
index b94880a..0b31cc5 100644
--- a/app/components/wizard/WizardShell.tsx
+++ b/app/components/wizard/WizardShell.tsx
@@ -195,18 +195,18 @@ export function WizardShell() {
                             variant="outline"
                             asChild
                             disabled={!isValid || isGenerating}
-                            className="h-10 px-4 border-border/40 bg-background/50 shadow-sm cursor-pointer"
+                            className="h-10 px-4 border-border/40 bg-background/50 shadow-xs cursor-pointer"
                         >
                             <Link
-                              href={isValid ? "/create/code" : "#"}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              aria-disabled={!isValid || isGenerating}
-                              className={cn((!isValid || isGenerating) && "pointer-events-none opacity-50")}
+                                href={isValid ? "/create/code" : "#"}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                aria-disabled={!isValid || isGenerating}
+                                className={cn((!isValid || isGenerating) && "pointer-events-none opacity-50")}
                             >
-                              <HugeiconsIcon icon={SourceCodeIcon} className="size-4 mr-1.5" />
-                              <span className="hidden sm:inline">Preview code</span>
-                              <span className="sm:hidden">Code</span>
+                                <HugeiconsIcon icon={SourceCodeIcon} className="size-4 mr-1.5" />
+                                <span className="hidden sm:inline">Preview code</span>
+                                <span className="sm:hidden">Code</span>
                             </Link>
                         </Button>
                         <Button
diff --git a/app/page.tsx b/app/page.tsx
index a345db8..a8125d0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import { FeaturedGuides } from "@/app/components/landing/FeaturedGuides"
 import { Footer } from "@/app/components/landing/Footer"
 import { GitHubStars, GitHubStarsSkeleton } from "@/app/components/landing/GitHubStars"
 import { HeroSection } from "@/app/components/landing/HeroSection"
@@ -33,6 +34,7 @@ export default function Page() {
                 <StatsSection />
             </Suspense>
             <WhyFlutterInit />
+            <FeaturedGuides />
             <Footer />
         </main>
     )