diff --git a/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png
index a55c7d607c..f718f515b1 100644
Binary files a/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png and b/apps/web/playwright/icons.e2e.ts-snapshots/icons--calcom-web-linux.png differ
diff --git a/apps/web/public/icons/sprite.svg b/apps/web/public/icons/sprite.svg
index e650b0f6c5..58ec216eb8 100644
--- a/apps/web/public/icons/sprite.svg
+++ b/apps/web/public/icons/sprite.svg
@@ -161,6 +161,10 @@
 <symbol class="lucide lucide-chevron-up" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="chevron-up">
   <path d="m18 15-6-6-6 6" ></path>
 </symbol>
+<symbol class="lucide lucide-chevrons-down-up" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="chevrons-down-up">
+  <path d="m7 20 5-5 5 5" ></path>
+  <path d="m7 4 5 5 5-5" ></path>
+</symbol>
 <symbol class="lucide lucide-chevrons-left" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="chevrons-left">
   <path d="m11 17-5-5 5-5" ></path>
   <path d="m18 17-5-5 5-5" ></path>
diff --git a/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx b/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
index 79e2f4c13c..ea492e152f 100644
--- a/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
@@ -330,11 +330,8 @@ const Route = ({
               setRoutes(newRoutes);
             },
           }}
-          label={
-            <div>
-              <span className="mr-2">{`Route ${index + 1}`}</span>
-            </div>
-          }
+          isLabelEditable={false}
+          label={route.name ?? `Route ${index + 1}`}
           className="mb-6">
           <div className="-mt-3">
             <Link href={`${appUrl}/route-builder/${route.id}`}>
@@ -460,7 +457,11 @@ const Route = ({
       className="mb-6"
       moveUp={moveUp}
       moveDown={moveDown}
-      label={route.isFallback ? "Fallback Route" : `Route ${index + 1}`}
+      label={route.name ?? (route.isFallback ? "Fallback Route" : `Route ${index + 1}`)}
+      isLabelEditable={!route.isFallback}
+      onLabelChange={(label) => {
+        setRoute(route.id, { name: label });
+      }}
       deleteField={{
         check: () => routes.length !== 1 && !route.isFallback,
         fn: () => {
@@ -716,6 +717,7 @@ function useRoutes({
         }
         return {
           id: route.id,
+          name: route.name,
           attributeRoutingConfig: route.attributeRoutingConfig,
           action: route.action,
           isFallback: route.isFallback,
diff --git a/packages/app-store/routing-forms/zod.ts b/packages/app-store/routing-forms/zod.ts
index dea6bcbdf4..4f62a9326d 100644
--- a/packages/app-store/routing-forms/zod.ts
+++ b/packages/app-store/routing-forms/zod.ts
@@ -130,6 +130,7 @@ export const queryValueSaveValidationSchema = queryValueSchema
 
 export const zodNonRouterRoute = z.object({
   id: z.string(),
+  name: z.string().optional(),
   attributeRoutingConfig: z
     .object({
       skipContactOwner: z.boolean().optional(),
@@ -168,6 +169,7 @@ export const zodNonRouterRouteView = zodNonRouterRoute;
 export const zodRouterRoute = z.object({
   // This is the id of the Form being used as router
   id: z.string(),
+  name: z.string().optional(),
   isRouter: z.literal(true),
 });
 
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index eee2479cdb..ed3e3424bc 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -30,7 +30,7 @@ const Layout = (props: LayoutProps) => {
   const postHog = usePostHog();
   const isFullPageWithoutSidebar = pathname?.startsWith("/apps/routing-forms/reporting/");
   const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
-
+  const withoutSeo = props.withoutSeo ?? props.withoutMain ?? false;
   useBootIntercom();
   useFormbricks();
 
@@ -42,7 +42,7 @@ const Layout = (props: LayoutProps) => {
 
   return (
     <>
-      {!props.withoutSeo && (
+      {!withoutSeo && (
         <HeadSeo
           title={pageTitle ?? APP_NAME}
           description={props.description ?? props.subtitle?.toString() ?? ""}
@@ -54,7 +54,7 @@ const Layout = (props: LayoutProps) => {
 
       <TimezoneChangeDialog />
 
-      <div className="flex flex-col min-h-screen">
+      <div className="flex min-h-screen flex-col">
         {banners && !props.isPlatformUser && !isFullPageWithoutSidebar && (
           <BannerContainer banners={banners} />
         )}
@@ -65,7 +65,7 @@ const Layout = (props: LayoutProps) => {
           ) : (
             <SideBarContainer isPlatformUser={props.isPlatformUser} bannersHeight={bannersHeight} />
           )}
-          <div className="flex flex-col flex-1 w-0">
+          <div className="flex w-0 flex-1 flex-col">
             <MainContainer {...props} />
           </div>
         </div>
@@ -187,7 +187,7 @@ export function ShellMain(props: LayoutProps) {
                   </h3>
                 )}
                 {props.subtitle && (
-                  <p className="hidden text-sm text-default md:block" data-testid="subtitle">
+                  <p className="text-default hidden text-sm md:block" data-testid="subtitle">
                     {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
                   </p>
                 )}
@@ -243,7 +243,7 @@ function MainContainer({
   ...props
 }: LayoutProps) {
   return (
-    <main className="relative z-0 flex-1 bg-default focus:outline-none">
+    <main className="bg-default relative z-0 flex-1 focus:outline-none">
       {/* show top navigation for md and smaller (tablet and phones) */}
       {TopNavContainerProp}
       <div className="max-w-full px-2 py-4 lg:px-6">
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index 7ffbe4f69d..f31f605038 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -1,16 +1,22 @@
+"use client";
+
 import Link from "next/link";
+import { useState } from "react";
 
 import { classNames } from "@calcom/lib";
 
 import type { BadgeProps } from "../badge";
 import { Badge } from "../badge";
 import { Divider } from "../divider";
+import { Input } from "../form/inputs/TextField";
 import { Icon } from "../icon";
 
 type Action = { check: () => boolean; fn: () => void };
 export default function FormCard({
   children,
   label,
+  isLabelEditable,
+  onLabelChange,
   deleteField,
   moveUp,
   moveDown,
@@ -19,7 +25,9 @@ export default function FormCard({
   ...restProps
 }: {
   children: React.ReactNode;
-  label?: React.ReactNode;
+  label: string;
+  isLabelEditable?: boolean;
+  onLabelChange?: (label: string) => void;
   deleteField?: Action | null;
   moveUp?: Action | null;
   moveDown?: Action | null;
@@ -31,6 +39,12 @@ export default function FormCard({
     "flex items-center group relative w-full rounded-md p-4 border border-subtle"
   );
 
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const toggleFormCard = () => {
+    setIsCollapsed((prev) => !prev);
+  };
+
   return (
     <div className={className} {...restProps}>
       <div>
@@ -54,26 +68,43 @@ export default function FormCard({
       <div className="w-full">
         <div className="flex items-center justify-between">
           <div>
-            <span className="text-emphasis text-sm font-semibold">{label}</span>
+            {isLabelEditable ? (
+              <Input type="text" value={label} onChange={(e) => onLabelChange?.(e.target.value)} />
+            ) : (
+              <span className="text-emphasis text-sm font-semibold">{label}</span>
+            )}
             {badge && (
               <Badge className="ml-2" variant={badge.variant}>
                 {badge.href ? <Link href={badge.href}>{badge.text}</Link> : badge.text}
               </Badge>
             )}
           </div>
-          {deleteField?.check() ? (
+          <div>
             <button
               type="button"
               onClick={() => {
-                deleteField?.fn();
+                toggleFormCard();
               }}
               color="secondary">
-              <Icon name="trash-2" className="text-default h-4 w-4" />
+              <Icon name="chevrons-down-up" className="text-default h-4 w-4" />
             </button>
-          ) : null}
+            {deleteField?.check() ? (
+              <button
+                type="button"
+                className="ml-2"
+                onClick={() => {
+                  deleteField?.fn();
+                }}
+                color="secondary">
+                <Icon name="trash-2" className="text-default h-4 w-4" />
+              </button>
+            ) : null}
+          </div>
+        </div>
+        <div className={isCollapsed ? "hidden" : ""}>
+          <Divider className="mb-6 mt-3" />
+          {children}
         </div>
-        <Divider className="mb-6 mt-3" />
-        {children}
       </div>
     </div>
   );
diff --git a/packages/ui/components/icon/icon-list.mjs b/packages/ui/components/icon/icon-list.mjs
index 42f6e9e226..0c32fea285 100644
--- a/packages/ui/components/icon/icon-list.mjs
+++ b/packages/ui/components/icon/icon-list.mjs
@@ -135,5 +135,6 @@ export const lucideIconList = new Set([
   "webhook",
   "x",
   "zap",
-  "waypoints"
+  "waypoints",
+  "chevrons-down-up",
 ]);
diff --git a/packages/ui/components/icon/icon-names.ts b/packages/ui/components/icon/icon-names.ts
index 0c86290053..3f11b3f77d 100644
--- a/packages/ui/components/icon/icon-names.ts
+++ b/packages/ui/components/icon/icon-names.ts
@@ -33,6 +33,7 @@ export type IconName =
   | "chevron-left"
   | "chevron-right"
   | "chevron-up"
+  | "chevrons-down-up"
   | "chevrons-left"
   | "chevrons-right"
   | "circle-alert"