+          
+            {props.extraButtons}
             
               Save Changes
-              {isLoading && }
+              {isLoading && }
             
           
         
diff --git a/web/src/components/Main.tsx b/web/src/components/Main.tsx
index b7fc746..b5473e2 100644
--- a/web/src/components/Main.tsx
+++ b/web/src/components/Main.tsx
@@ -69,7 +69,7 @@ export default async function Main() {
             
 
             
-              
+              
                 {meta.tagline}
               
             
diff --git a/web/src/components/OutputPreviews.tsx b/web/src/components/OutputPreviews.tsx
new file mode 100644
index 0000000..f22e85f
--- /dev/null
+++ b/web/src/components/OutputPreviews.tsx
@@ -0,0 +1,52 @@
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import * as React from "react";
+
+export function OutputPreview() {
+  const [api, setApi] = React.useState
();
+  const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  return (
+    
+      
+        
+          {Array.from({ length: 5 }).map((_, index) => (
+            
+              
+                
+                  {index + 1}
+                
+              
+            
+          ))}
+        
+        
+        
+      
+      
+        Slide {current} of {count}
+      
+    
 
+  );
+}
diff --git a/web/src/components/RouteRefresher.tsx b/web/src/components/RouteRefresher.tsx
index b772986..f17cb28 100644
--- a/web/src/components/RouteRefresher.tsx
+++ b/web/src/components/RouteRefresher.tsx
@@ -1,14 +1,21 @@
 "use client";
 
 import { LoadingIcon } from "@/components/LoadingIcon";
+import { Button } from "@/components/ui/button";
+import { RefreshCcw } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useTransition } from "react";
 
-export function RouteRefresher(props: { interval: number }) {
+export function RouteRefresher(props: {
+  interval: number;
+  autoRefresh: boolean;
+}) {
   const [isPending, startTransition] = useTransition();
   const router = useRouter();
 
   useEffect(() => {
+    if (!props.autoRefresh) return;
+
     let timeout: NodeJS.Timeout;
 
     const refresh = () => {
@@ -35,7 +42,24 @@ export function RouteRefresher(props: { interval: number }) {
       clearTimeout(timeout);
       window.removeEventListener("visibilitychange", handleVisibilityChange);
     };
-  }, [props.interval, router]);
+  }, [props.interval, router, props.autoRefresh]);
 
-  return {isPending && }
;
+  return (
+    
+      {isPending && }
+      {!isPending && !props.autoRefresh && (
+        
+      )}
+    
+  );
 }
diff --git a/web/src/components/RunDisplay.tsx b/web/src/components/RunDisplay.tsx
index 5f0f7da..445b061 100644
--- a/web/src/components/RunDisplay.tsx
+++ b/web/src/components/RunDisplay.tsx
@@ -33,7 +33,9 @@ export async function RunDisplay({
           
           {run.version?.version}
           
-            {run.origin}
+            
+              {run.origin}
+            
           
           
         
diff --git a/web/src/components/RunWorkflowInline.tsx b/web/src/components/RunWorkflowInline.tsx
index cf1f94b..ccb4242 100644
--- a/web/src/components/RunWorkflowInline.tsx
+++ b/web/src/components/RunWorkflowInline.tsx
@@ -40,13 +40,10 @@ export function RunWorkflowInline({
   } = publicRunStore();
 
   const runWorkflow = async () => {
-    console.log();
-
     if (!user.isSignedIn) {
       clerk.openSignIn({
         redirectUrl: window.location.href,
       });
-      console.log("hi");
       return;
     }
     console.log(values);
diff --git a/web/src/components/RunsTable.tsx b/web/src/components/RunsTable.tsx
index d869d93..6eee49c 100644
--- a/web/src/components/RunsTable.tsx
+++ b/web/src/components/RunsTable.tsx
@@ -14,6 +14,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { parseAsInteger } from "next-usequerystate";
+import { headers } from "next/headers";
 
 const itemPerPage = 6;
 const pageParser = parseAsInteger.withDefault(1);
@@ -69,8 +70,14 @@ export async function RunsTable(props: {
 
 export async function DeploymentsTable(props: { workflow_id: string }) {
   const allRuns = await findAllDeployments(props.workflow_id);
+
+  const headersList = headers();
+  const host = headersList.get("host") || "";
+  const protocol = headersList.get("x-forwarded-proto") || "";
+  const domain = `${protocol}://${host}`;
+
   return (
-    
+    
       
         A list of your deployments
         
@@ -83,7 +90,7 @@ export async function DeploymentsTable(props: { workflow_id: string }) {
         
         
           {allRuns.map((run) => (
-            
+            
           ))}
         
       
diff --git a/web/src/components/Section.tsx b/web/src/components/Section.tsx
index 7ac27c9..ca24cff 100644
--- a/web/src/components/Section.tsx
+++ b/web/src/components/Section.tsx
@@ -1,33 +1,37 @@
-import { Button, buttonVariants } from '@/components/ui/button';
-type ButtonProps = React.ComponentProps
;
-type LinkProps = React.ComponentProps;
-import { Card as BaseCard } from '@/components/ui/card';
-type CardProps = React.ComponentProps;
-import { Tabs, TabsTrigger as Tab, TabsList } from '@/components/ui/tabs';
-type TabsProps = React.ComponentProps;
 import {
   Accordion,
   AccordionItem,
   AccordionContent,
   AccordionTrigger,
-} from '@/components/ui/accordion';
-type AccordionProps = React.ComponentProps;
-import { Badge as Chip } from '@/components/ui/badge';
-type ChipProps = React.ComponentProps;
-
-import Link from 'next/link';
+} from "@/components/ui/accordion";
+import { Badge as Chip } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card as BaseCard } from "@/components/ui/card";
+import { Tabs, TabsTrigger as Tab, TabsList } from "@/components/ui/tabs";
+// import { PiCheckCircleDuotone } from 'react-icons/pi';
+import { cn } from "@/lib/utils";
+import { ChevronRight as MdChevronRight } from "lucide-react";
+import { CheckCircle as PiCheckCircleDuotone } from "lucide-react";
+import Link from "next/link";
 import type {
   HTMLAttributeAnchorTarget,
   HTMLAttributes,
   ReactNode,
-} from 'react';
-import { twMerge } from 'tailwind-merge';
-import { ChevronRight as MdChevronRight} from 'lucide-react'
+} from "react";
 // import { MdChevronRight } from 'react-icons/md';
-import React from 'react';
-import { CheckCircle as PiCheckCircleDuotone } from 'lucide-react'
-// import { PiCheckCircleDuotone } from 'react-icons/pi';
-import { cn } from '@/lib/utils';
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+type ButtonProps = React.ComponentProps;
+type LinkProps = React.ComponentProps;
+
+type CardProps = React.ComponentProps;
+
+type TabsProps = React.ComponentProps;
+
+type AccordionProps = React.ComponentProps;
+
+type ChipProps = React.ComponentProps;
 
 function Section({
   className,
@@ -41,8 +45,8 @@ function Section({
   return (
     
@@ -64,12 +68,12 @@ function Title({
     
       {children}
@@ -86,12 +90,12 @@ function Subtitle({
     
       {children}
@@ -103,7 +107,7 @@ function Announcement({
   className,
   children,
   href,
-  target = '_blank',
+  target = "_blank",
   ...props
 }: ChipProps & {
   href?: string; //string | UrlObject;
@@ -112,8 +116,8 @@ function Announcement({
   return (
     
       
         {children}
-      {' '}
+      {" "}
       
@@ -186,8 +190,8 @@ function PrimaryAction({
         buttonVariants({
           variant: variant,
         }),
-        'group',
-        className,
+        "group",
+        className
       )}
       {...props}
     >
@@ -206,17 +210,17 @@ function SecondaryAction({
   hideArrow,
   ...props
 }: ActionLinkProps | ActionProps) {
-  if (props.be === 'button') {
+  if (props.be === "button") {
     return (