diff --git a/app/(landing)/hero-block.tsx b/app/(landing)/hero-block.tsx
new file mode 100644
index 0000000000..e5f187dc62
--- /dev/null
+++ b/app/(landing)/hero-block.tsx
@@ -0,0 +1,62 @@
+import { memo } from 'react'
+import { Handle, NodeProps, Position } from 'reactflow'
+import { AgentIcon, ApiIcon, ConnectIcon } from '@/components/icons'
+import { Card } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+const icons = {
+  api: ApiIcon,
+  agent: AgentIcon,
+  router: ConnectIcon,
+}
+
+export const HeroBlock = memo(({ data }: NodeProps) => {
+  const Icon = icons[data.type as keyof typeof icons]
+
+  return (
+    <Card
+      className={cn(
+        'shadow-md select-none group relative cursor-default',
+        'w-[200px]', // Default width
+        'sm:w-[200px]', // Small screens and up
+        'xs:w-[120px]' // Extra small screens
+      )}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        className={cn(
+          '!w-3 !h-3',
+          '!bg-white !rounded-full !border !border-gray-200',
+          'group-hover:!border-blue-500',
+          '!cursor-crosshair',
+          'transition-[border-color] duration-150',
+          '!left-[-6px]'
+        )}
+      />
+      <div className="flex items-center gap-3 p-3 workflow-drag-handle cursor-grab active:cursor-grabbing">
+        <div
+          className="flex items-center justify-center w-7 h-7 rounded"
+          style={{ backgroundColor: data.color }}
+        >
+          <Icon className="w-5 h-5 text-white" />
+        </div>
+        <span className="font-medium text-md">{data.name}</span>
+      </div>
+      <Handle
+        type="source"
+        position={Position.Right}
+        className={cn(
+          '!w-3 !h-3',
+          '!bg-white !rounded-full !border !border-gray-200',
+          'group-hover:!border-blue-500',
+          '!cursor-crosshair',
+          'transition-[border-color] duration-150',
+          '!right-[-6px]'
+        )}
+      />
+    </Card>
+  )
+})
+
+HeroBlock.displayName = 'HeroBlock'
diff --git a/app/(landing)/hero-workflow.tsx b/app/(landing)/hero-workflow.tsx
new file mode 100644
index 0000000000..1006ef36d4
--- /dev/null
+++ b/app/(landing)/hero-workflow.tsx
@@ -0,0 +1,149 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import ReactFlow, {
+  Background,
+  ConnectionLineType,
+  Edge,
+  Node,
+  NodeTypes,
+  Position,
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState,
+} from 'reactflow'
+import 'reactflow/dist/style.css'
+import { HeroBlock } from './hero-block'
+
+const nodeTypes: NodeTypes = {
+  heroBlock: HeroBlock,
+}
+
+// Initial nodes configuration
+const initialNodes: Node[] = [
+  {
+    id: 'api',
+    type: 'heroBlock',
+    position: { x: 50, y: -150 },
+    data: {
+      type: 'api',
+      name: 'API Block',
+      color: '#2F55FF',
+    },
+    dragHandle: '.workflow-drag-handle',
+  },
+  {
+    id: 'router',
+    type: 'heroBlock',
+    position: { x: 100, y: -25 },
+    data: {
+      type: 'router',
+      name: 'Router',
+      color: '#28C43F',
+    },
+    dragHandle: '.workflow-drag-handle',
+  },
+  {
+    id: 'agent1',
+    type: 'heroBlock',
+    position: { x: 400, y: -75 },
+    data: {
+      type: 'agent',
+      name: 'Agent 1',
+      color: '#7F2FFF',
+    },
+    dragHandle: '.workflow-drag-handle',
+  },
+  {
+    id: 'agent2',
+    type: 'heroBlock',
+    position: { x: 400, y: 25 },
+    data: {
+      type: 'agent',
+      name: 'Agent 2',
+      color: '#7F2FFF',
+    },
+    dragHandle: '.workflow-drag-handle',
+  },
+]
+
+// Initial edges configuration
+const initialEdges: Edge[] = [
+  {
+    id: 'api-router',
+    source: 'api',
+    target: 'router',
+    type: 'smoothstep',
+    style: { stroke: '#94a3b8', strokeWidth: 2, strokeDasharray: '5,5' },
+  },
+  {
+    id: 'router-agent1',
+    source: 'router',
+    target: 'agent1',
+    type: 'smoothstep',
+    style: { stroke: '#94a3b8', strokeWidth: 2, strokeDasharray: '5,5' },
+  },
+  {
+    id: 'router-agent2',
+    source: 'router',
+    target: 'agent2',
+    type: 'smoothstep',
+    style: { stroke: '#94a3b8', strokeWidth: 2, strokeDasharray: '5,5' },
+  },
+  {
+    id: 'router-agent3',
+    source: 'router',
+    target: 'agent3',
+    type: 'smoothstep',
+    style: { stroke: '#94a3b8', strokeWidth: 2, strokeDasharray: '5,5' },
+  },
+]
+
+export function HeroWorkflow() {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+
+  return (
+    <div className="w-full h-[300px] md:h-[420px]">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={nodeTypes}
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+          style: { stroke: '#94a3b8', strokeWidth: 2, strokeDasharray: '5,5' },
+        }}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        connectionLineStyle={{ stroke: '#94a3b8', strokeWidth: 2 }}
+        fitView
+        minZoom={0.8}
+        maxZoom={1.3}
+        defaultViewport={{ x: 0, y: 0, zoom: 1 }}
+        proOptions={{ hideAttribution: true }}
+        selectionOnDrag={true}
+        panOnScroll={false}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+        nodeExtent={[
+          [-100, -200],
+          [600, 200],
+        ]}
+        translateExtent={[
+          [-100, -200],
+          [600, 200],
+        ]}
+      />
+    </div>
+  )
+}
+
+export default function HeroWorkflowProvider() {
+  return (
+    <ReactFlowProvider>
+      <HeroWorkflow />
+    </ReactFlowProvider>
+  )
+}
diff --git a/app/(landing)/landing.tsx b/app/(landing)/landing.tsx
new file mode 100644
index 0000000000..f31844398b
--- /dev/null
+++ b/app/(landing)/landing.tsx
@@ -0,0 +1,66 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import HeroWorkflowProvider from './hero-workflow'
+
+export default function Landing() {
+  return (
+    <main className="bg-[#020817] relative overflow-x-hidden">
+      <nav className="fixed top-1 left-0 right-0 z-10 bg-[#020817]/80 backdrop-blur-sm px-4 py-4">
+        <div className="max-w-6xl mx-auto flex justify-between items-center">
+          <div className="text-xl font-medium text-white">sim studio</div>
+
+          {/* Update navigation section */}
+          <div className="flex items-center gap-6">
+            <a
+              href="https://github.com"
+              className="text-muted-foreground hover:text-muted-foreground/80 transition-colors text-sm font-normal"
+            >
+              GitHub
+            </a>
+          </div>
+        </div>
+      </nav>
+
+      <section className="min-h-[100dvh] pt-28 text-white relative">
+        <div
+          className="absolute inset-0 z-0"
+          style={{
+            backgroundImage: "url('/Hero.png')",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+          }}
+        />
+        <div className="absolute inset-0 z-0 bg-gradient-to-b from-[#020817]/80 to-[#020817]/40" />
+        <div className="max-w-6xl mx-auto text-center space-y-4 relative z-10 px-4">
+          <h1 className="text-4xl md:text-6xl font-medium tracking-tight">
+            dev first agent
+            <br />
+            workflow builder
+          </h1>
+
+          <p className="text-base md:text-xl text-muted-foreground max-w-3xl mx-auto">
+            Build and deploy your agentic workflows with an open source,
+            <br className="hidden md:block" />
+            user-friendly environment for devs and agents
+          </p>
+
+          <div className="flex gap-3 justify-center max-w-lg mx-auto mt-8">
+            <Input
+              type="email"
+              placeholder="you@example.com"
+              className="flex-1 text-md bg-[#020817] border-white/20 focus:border-white/40 rounded-md h-12"
+            />
+            <Button className="bg-white text-black hover:bg-gray-100 rounded-md px-8 h-12">
+              Join waitlist
+            </Button>
+          </div>
+
+          <div className="mt-10 -mx-4">
+            <HeroWorkflowProvider />
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
index 89bbf285ff..5195ceb433 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,3 @@
-export default function Home() {
-  return <div>Go to /w/1</div>
-}
+import Landing from './(landing)/landing'
+
+export default Landing
diff --git a/public/hero.png b/public/hero.png
new file mode 100644
index 0000000000..42598034cc
Binary files /dev/null and b/public/hero.png differ