diff --git a/apps/web-ui/vite.config.ts b/apps/web-ui/vite.config.ts
index 50a04a6..1dfb14a 100644
--- a/apps/web-ui/vite.config.ts
+++ b/apps/web-ui/vite.config.ts
@@ -2,7 +2,7 @@ import { vitePlugin as remix } from '@remix-run/dev';
 import { defineConfig, loadEnv } from 'vite';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 
-const BASE_URL = '/ui/';
+const BASE_URL = '/ui';
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
diff --git a/libs/data-access/admin-api-fixtures/src/lib/adminApiDb.ts b/libs/data-access/admin-api-fixtures/src/lib/adminApiDb.ts
index 15008a7..0ae9b7f 100644
--- a/libs/data-access/admin-api-fixtures/src/lib/adminApiDb.ts
+++ b/libs/data-access/admin-api-fixtures/src/lib/adminApiDb.ts
@@ -2,10 +2,16 @@ import { factory, manyOf, oneOf, primaryKey } from '@mswjs/data';
 import { faker } from '@faker-js/faker';
 
 faker.seed(Date.now());
+const names = faker.helpers.uniqueArray(faker.word.noun, 1000);
+
+let index = 0;
+export function getName() {
+  return names[index++];
+}
 
 export const adminApiDb = factory({
   handler: {
-    name: primaryKey(() => `${faker.hacker.noun()}`),
+    name: primaryKey(() => `${getName()}`),
     ty: () =>
       faker.helpers.arrayElement(['Exclusive', 'Shared', 'Workflow'] as const),
     input_description: () =>
@@ -13,7 +19,7 @@ export const adminApiDb = factory({
     output_description: () => "value of content-type 'application/json'",
   },
   service: {
-    name: primaryKey(() => `${faker.hacker.noun()}Service`),
+    name: primaryKey<string>(() => `${getName()}Service`),
     handlers: manyOf('handler'),
     deployment: oneOf('deployment'),
     ty: () =>
@@ -30,23 +36,21 @@ export const adminApiDb = factory({
   deployment: {
     id: primaryKey(() => `dp_${faker.string.nanoid(27)}`),
     services: manyOf('service'),
+    dryRun: Boolean,
+    endpoint: () => faker.internet.url(),
   },
 });
 
 const isE2E = process.env['SCENARIO'] === 'E2E';
 
 if (!isE2E) {
-  const services = Array(3)
-    .fill(null)
-    .map(() => adminApiDb.service.create());
   Array(30)
     .fill(null)
-    .map(() =>
-      adminApiDb.deployment.create({
-        services: services.slice(
-          0,
-          Math.floor(Math.random() * services.length + 1)
-        ),
-      })
-    );
+    .map(() => {
+      const deployment = adminApiDb.deployment.create();
+      Array(Math.floor(Math.random() * 3 + 1))
+        .fill(null)
+        .map(() => adminApiDb.service.create({ deployment }));
+      return deployment;
+    });
 }
diff --git a/libs/data-access/admin-api-fixtures/src/lib/adminApiMockHandlers.ts b/libs/data-access/admin-api-fixtures/src/lib/adminApiMockHandlers.ts
index 9086f0a..8a6c27f 100644
--- a/libs/data-access/admin-api-fixtures/src/lib/adminApiMockHandlers.ts
+++ b/libs/data-access/admin-api-fixtures/src/lib/adminApiMockHandlers.ts
@@ -1,7 +1,6 @@
 import * as adminApi from '@restate/data-access/admin-api/spec';
 import { http, HttpResponse } from 'msw';
-import { adminApiDb } from './adminApiDb';
-import { faker } from '@faker-js/faker';
+import { adminApiDb, getName } from './adminApiDb';
 
 type FormatParameterWithColon<S extends string> =
   S extends `${infer A}{${infer P}}${infer B}` ? `${A}:${P}${B}` : S;
@@ -15,12 +14,26 @@ const listDeploymentsHandler = http.get<
   adminApi.operations['list_deployments']['responses']['200']['content']['application/json'],
   GetPath<'/deployments'>
 >('/deployments', async () => {
-  const deployments = adminApiDb.deployment.getAll();
+  const deployments = adminApiDb.deployment
+    .getAll()
+    .filter(({ dryRun }) => !dryRun);
   return HttpResponse.json({
     deployments: deployments.map((deployment) => ({
       id: deployment.id,
-      services: deployment.services,
-      uri: faker.internet.url(),
+      services: adminApiDb.service
+        .findMany({
+          where: { deployment: { id: { equals: deployment.id } } },
+        })
+        .map((service) => ({
+          name: service.name,
+          deployment_id: deployment.id,
+          public: service.public,
+          revision: service.revision,
+          ty: service.ty,
+          idempotency_retention: service.idempotency_retention,
+          workflow_completion_retention: service.idempotency_retention,
+        })),
+      uri: deployment.endpoint,
       protocol_type: 'RequestResponse',
       created_at: new Date().toISOString(),
       http_version: 'HTTP/2.0',
@@ -37,10 +50,68 @@ const registerDeploymentHandler = http.post<
   GetPath<'/deployments'>
 >('/deployments', async ({ request }) => {
   const requestBody = await request.json();
-  const newDeployment = adminApiDb.deployment.create({});
+  const requestEndpoint =
+    'uri' in requestBody ? requestBody.uri : requestBody.arn;
+  const existingDeployment = adminApiDb.deployment.findFirst({
+    where: {
+      endpoint: {
+        equals: requestEndpoint,
+      },
+      dryRun: {
+        equals: true,
+      },
+    },
+  });
+
+  if (existingDeployment) {
+    adminApiDb.deployment.update({
+      where: {
+        id: {
+          equals: existingDeployment.id,
+        },
+      },
+      data: { dryRun: false },
+    });
+
+    return HttpResponse.json({
+      id: existingDeployment.id,
+      services: adminApiDb.service
+        .findMany({
+          where: { deployment: { id: { equals: existingDeployment.id } } },
+        })
+        .map((service) => ({
+          name: service.name,
+          deployment_id: service.deployment!.id,
+          public: service.public,
+          revision: service.revision,
+          ty: service.ty,
+          idempotency_retention: service.idempotency_retention,
+          workflow_completion_retention: service.idempotency_retention,
+          handlers: service.handlers.map((handler) => ({
+            name: handler.name,
+            ty: handler.ty,
+            input_description: handler.input_description,
+            output_description: handler.output_description,
+          })),
+        })),
+    });
+  }
+
+  const newDeployment = adminApiDb.deployment.create({
+    dryRun: requestBody.dry_run,
+    endpoint: requestEndpoint,
+  });
   const services = Array(3)
     .fill(null)
-    .map(() => adminApiDb.service.create({ deployment: newDeployment }));
+    .map(() =>
+      adminApiDb.service.create({
+        deployment: newDeployment,
+        name: `${getName()}Service`,
+        handlers: Array(Math.floor(Math.random() * 6))
+          .fill(null)
+          .map(() => adminApiDb.handler.create({ name: getName() })),
+      })
+    );
 
   return HttpResponse.json({
     id: newDeployment.id,
diff --git a/libs/features/explainers/src/index.ts b/libs/features/explainers/src/index.ts
index 513a74e..bf436f7 100644
--- a/libs/features/explainers/src/index.ts
+++ b/libs/features/explainers/src/index.ts
@@ -1,2 +1,3 @@
 export * from './lib/ServiceDeployment';
 export * from './lib/Service';
+export * from './lib/ServiceType';
diff --git a/libs/features/explainers/src/lib/ServiceDeployment.tsx b/libs/features/explainers/src/lib/ServiceDeployment.tsx
index 4da0439..ef446fc 100644
--- a/libs/features/explainers/src/lib/ServiceDeployment.tsx
+++ b/libs/features/explainers/src/lib/ServiceDeployment.tsx
@@ -3,9 +3,11 @@ import { PropsWithChildren } from 'react';
 
 export function ServiceDeploymentExplainer({
   children,
-}: PropsWithChildren<unknown>) {
+  className,
+}: PropsWithChildren<{ className?: string }>) {
   return (
     <InlineTooltip
+      className={className}
       title="Service Deployment"
       description={
         <p>
diff --git a/libs/features/explainers/src/lib/ServiceType.tsx b/libs/features/explainers/src/lib/ServiceType.tsx
new file mode 100644
index 0000000..fc0391c
--- /dev/null
+++ b/libs/features/explainers/src/lib/ServiceType.tsx
@@ -0,0 +1,47 @@
+import { InlineTooltip } from '@restate/ui/tooltip';
+import { ComponentProps, PropsWithChildren } from 'react';
+import * as adminApi from '@restate/data-access/admin-api/spec';
+type ServiceType = adminApi.components['schemas']['ServiceMetadata']['ty'];
+
+const TITLES: Record<ServiceType, string> = {
+  Service: 'Service',
+  VirtualObject: 'Virtual object',
+  Workflow: 'Workflow',
+};
+
+const DESCRIPTIONS: Record<ServiceType, string> = {
+  Service:
+    'Services expose a collection of durably executed handlers. They do not have any concurrency limits nor K/V store.',
+  VirtualObject:
+    'Virtual objects expose a set of durably executed handlers with access to K/V state stored in Restate. To ensure consistent writes to the state, Restate provides concurrency guarantees for Virtual Objects.',
+  Workflow:
+    'A workflow is a special type of Virtual Object that can be used to implement a set of steps that need to be executed durably. Workflows have additional capabilities such as signaling, querying, additional invocation options',
+};
+
+const LEARN_MORE: Record<ServiceType, string> = {
+  Service: 'https://docs.restate.dev/concepts/services/#services-1',
+  VirtualObject: 'https://docs.restate.dev/concepts/services/#virtual-objects',
+  Workflow: 'https://docs.restate.dev/concepts/services/#workflows',
+};
+export function ServiceTypeExplainer({
+  children,
+  className,
+  variant,
+  type,
+}: PropsWithChildren<{
+  className?: string;
+  variant?: ComponentProps<typeof InlineTooltip>['variant'];
+  type: ServiceType;
+}>) {
+  return (
+    <InlineTooltip
+      variant={variant}
+      className={className}
+      title={TITLES[type]}
+      description={<p>{DESCRIPTIONS[type]}</p>}
+      learnMoreHref={LEARN_MORE[type]}
+    >
+      {children}
+    </InlineTooltip>
+  );
+}
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/AdditionalHeaders.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/AdditionalHeaders.tsx
index 3421e84..ae4305c 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/AdditionalHeaders.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/AdditionalHeaders.tsx
@@ -5,13 +5,10 @@ import {
   FormFieldInput,
 } from '@restate/ui/form-field';
 import { IconName, Icon } from '@restate/ui/icons';
-import { useListData } from 'react-stately';
+import { useRegisterDeploymentContext } from './Context';
 
 export function AdditionalHeaders() {
-  const list = useListData<{ key: string; value: string; index: number }>({
-    initialItems: [{ key: '', value: '', index: 0 }],
-    getKey: (item) => item.index,
-  });
+  const { additionalHeaders: list } = useRegisterDeploymentContext();
 
   return (
     <FormFieldGroup className="h-auto flex gap-1 flex-col items-start">
@@ -23,7 +20,7 @@ export function AdditionalHeaders() {
           Headers added to the discover/invoke requests to the deployment.
         </span>
       </FormFieldLabel>
-      {list.items.map((item) => (
+      {list?.items.map((item) => (
         <div key={item.index} className="flex gap-1.5 items-center w-full">
           <FormFieldInput
             name="key"
@@ -80,7 +77,7 @@ export function AdditionalHeaders() {
       ))}
       <Button
         onClick={() =>
-          list.append({
+          list?.append({
             key: '',
             value: '',
             index: Math.floor(Math.random() * 1000000),
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/AssumeARNRole.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/AssumeARNRole.tsx
index 3b30764..357f62c 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/AssumeARNRole.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/AssumeARNRole.tsx
@@ -10,8 +10,7 @@ export function AssumeARNRole() {
         <>
           <span slot="title">Assume role ARN</span>
           <span slot="description" className="leading-5 text-code block">
-            Optional ARN of a role to assume when invoking the addressed Lambda,
-            to support role chaining
+            ARN of a role to use when invoking the Lambda
           </span>
         </>
       }
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/Context.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/Context.tsx
new file mode 100644
index 0000000..7c63e45
--- /dev/null
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/Context.tsx
@@ -0,0 +1,342 @@
+import { Form } from '@remix-run/react';
+import {
+  createContext,
+  FormEvent,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useId,
+  useReducer,
+  useRef,
+} from 'react';
+import { ListData, useListData } from 'react-stately';
+import * as adminApi from '@restate/data-access/admin-api/spec';
+import {
+  useListDeployments,
+  useRegisterDeployment,
+} from '@restate/data-access/admin-api';
+import { useDialog } from '@restate/ui/dialog';
+import { getEndpoint } from '../types';
+
+type NavigateToAdvancedAction = {
+  type: 'NavigateToAdvancedAction';
+};
+
+type NavigateToConfirmAction = {
+  type: 'NavigateToConfirmAction';
+};
+
+type NavigateToEndpointAction = {
+  type: 'NavigateToEndpointAction';
+};
+type UpdateEndpointAction = {
+  type: 'UpdateEndpointAction';
+  payload: Pick<
+    DeploymentRegistrationContextInterface,
+    'endpoint' | 'isLambda' | 'isDuplicate'
+  >;
+};
+type UpdateRoleArnAction = {
+  type: 'UpdateRoleArnAction';
+  payload: Pick<DeploymentRegistrationContextInterface, 'assumeRoleArn'>;
+};
+type UpdateUseHttp11Action = {
+  type: 'UpdateUseHttp11Action';
+  payload: Pick<DeploymentRegistrationContextInterface, 'useHttp11'>;
+};
+type UpdateServicesActions = {
+  type: 'UpdateServicesActions';
+  payload: Pick<DeploymentRegistrationContextInterface, 'services'>;
+};
+type UpdateShouldForce = {
+  type: 'UpdateShouldForce';
+  payload: Pick<DeploymentRegistrationContextInterface, 'shouldForce'>;
+};
+
+type Action =
+  | NavigateToAdvancedAction
+  | NavigateToConfirmAction
+  | NavigateToEndpointAction
+  | UpdateEndpointAction
+  | UpdateRoleArnAction
+  | UpdateUseHttp11Action
+  | UpdateServicesActions
+  | UpdateShouldForce;
+
+interface DeploymentRegistrationContextInterface {
+  endpoint?: string;
+  stage: 'endpoint' | 'advanced' | 'confirm';
+  assumeRoleArn?: string;
+  useHttp11?: boolean;
+  isLambda: boolean;
+  formId?: string;
+  additionalHeaders?: ListData<{
+    key: string;
+    value: string;
+    index: number;
+  }>;
+  isPending?: boolean;
+  isDuplicate?: boolean;
+  shouldForce?: boolean;
+  services?: adminApi.components['schemas']['ServiceMetadata'][];
+  goToEndpoint?: VoidFunction;
+  goToAdvanced?: VoidFunction;
+  goToConfirm?: VoidFunction;
+  updateEndpoint?: (value: UpdateEndpointAction['payload']) => void;
+  register?: (isDryRun: boolean) => void;
+  updateAssumeRoleArn?: (value: string) => void;
+  updateUseHttp11Arn?: (value: boolean) => void;
+  updateShouldForce?: (value: boolean) => void;
+  error:
+    | {
+        message: string;
+        restate_code?: string | null;
+      }
+    | null
+    | undefined;
+}
+
+type State = Pick<
+  DeploymentRegistrationContextInterface,
+  | 'endpoint'
+  | 'isLambda'
+  | 'stage'
+  | 'services'
+  | 'assumeRoleArn'
+  | 'useHttp11'
+  | 'shouldForce'
+  | 'isDuplicate'
+>;
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'NavigateToAdvancedAction':
+      return { ...state, stage: 'advanced' };
+    case 'NavigateToConfirmAction':
+      return { ...state, stage: 'confirm' };
+    case 'NavigateToEndpointAction':
+      return { ...state, stage: 'endpoint' };
+    case 'UpdateEndpointAction':
+      return { ...state, ...action.payload };
+    case 'UpdateRoleArnAction':
+      return { ...state, assumeRoleArn: action.payload.assumeRoleArn };
+    case 'UpdateUseHttp11Action':
+      return { ...state, useHttp11: action.payload.useHttp11 };
+    case 'UpdateServicesActions':
+      return { ...state, services: action.payload.services };
+    case 'UpdateShouldForce':
+      return { ...state, shouldForce: action.payload.shouldForce };
+
+    default:
+      return state;
+  }
+}
+
+const initialState: DeploymentRegistrationContextInterface = {
+  stage: 'endpoint',
+  isLambda: false,
+  error: null,
+};
+const DeploymentRegistrationContext =
+  createContext<DeploymentRegistrationContextInterface>(initialState);
+
+function withoutTrailingSlash(url?: string) {
+  return url?.endsWith('/') ? url.slice(0, -1) : url;
+}
+
+export function DeploymentRegistrationState(props: PropsWithChildren<unknown>) {
+  const id = useId();
+  const formRef = useRef<HTMLFormElement>(null);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const additionalHeaders = useListData<{
+    key: string;
+    value: string;
+    index: number;
+  }>({
+    initialItems: [{ key: '', value: '', index: 0 }],
+    getKey: (item) => item.index,
+  });
+  const { close } = useDialog();
+  const goToAdvanced = useCallback(() => {
+    dispatch({ type: 'NavigateToAdvancedAction' });
+  }, []);
+  const goToEndpoint = useCallback(() => {
+    dispatch({ type: 'NavigateToEndpointAction' });
+  }, []);
+  const goToConfirm = useCallback(() => {
+    dispatch({ type: 'NavigateToConfirmAction' });
+  }, []);
+  const updateAssumeRoleArn = useCallback((assumeRoleArn: string) => {
+    dispatch({ type: 'UpdateRoleArnAction', payload: { assumeRoleArn } });
+  }, []);
+  const updateUseHttp11Arn = useCallback((useHttp11: boolean) => {
+    dispatch({ type: 'UpdateUseHttp11Action', payload: { useHttp11 } });
+  }, []);
+  const updateServices = useCallback(
+    (services: DeploymentRegistrationContextInterface['services']) => {
+      dispatch({ type: 'UpdateServicesActions', payload: { services } });
+    },
+    []
+  );
+  const updateShouldForce = useCallback(
+    (shouldForce: DeploymentRegistrationContextInterface['shouldForce']) => {
+      dispatch({ type: 'UpdateShouldForce', payload: { shouldForce } });
+    },
+    []
+  );
+  const { refetch, data: listDeployments } = useListDeployments();
+  const updateEndpoint = useCallback(
+    (value: UpdateEndpointAction['payload']) => {
+      if (state.isLambda !== value.isLambda) {
+        formRef.current?.reset();
+      }
+      const isDuplicate = listDeployments?.deployments.some(
+        (deployment) =>
+          withoutTrailingSlash(getEndpoint(deployment)) ===
+          withoutTrailingSlash(value.endpoint)
+      );
+      dispatch({
+        type: 'UpdateEndpointAction',
+        payload: {
+          isLambda: value.isLambda,
+          endpoint: value.endpoint,
+          isDuplicate,
+        },
+      });
+    },
+    [listDeployments?.deployments, state.isLambda]
+  );
+  const { mutate, isPending, error } = useRegisterDeployment({
+    onSuccess(data) {
+      updateServices(data?.services);
+
+      if (state.stage === 'confirm') {
+        refetch();
+        close();
+      } else {
+        goToConfirm();
+      }
+    },
+  });
+
+  const submitHandler = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const submitter = (event.nativeEvent as SubmitEvent)
+      .submitter as HTMLButtonElement;
+    const action = submitter.value;
+    const {
+      endpoint = '',
+      isLambda,
+      assumeRoleArn,
+      useHttp11,
+      shouldForce,
+    } = state;
+
+    if (action === 'advanced') {
+      goToAdvanced();
+      return;
+    }
+
+    const additional_headers: Record<string, string> =
+      additionalHeaders.items.reduce((result, { key, value }) => {
+        if (typeof key === 'string' && typeof value === 'string' && key) {
+          return { ...result, [key]: value };
+        }
+        return result;
+      }, {});
+
+    mutate({
+      body: {
+        ...(isLambda
+          ? { arn: endpoint, assume_role_arn: assumeRoleArn }
+          : {
+              uri: endpoint,
+              use_http_11: Boolean(useHttp11),
+            }),
+        force: Boolean(shouldForce),
+        dry_run: action === 'dryRun',
+        additional_headers,
+      },
+    });
+  };
+
+  return (
+    <DeploymentRegistrationContext.Provider
+      value={{
+        ...state,
+        goToAdvanced,
+        goToConfirm,
+        goToEndpoint,
+        updateEndpoint,
+        formId: id,
+        additionalHeaders,
+        updateAssumeRoleArn,
+        updateUseHttp11Arn,
+        updateShouldForce,
+        error,
+        isPending,
+      }}
+    >
+      <Form
+        id={id}
+        method="post"
+        action="/deployments"
+        ref={formRef}
+        onSubmit={submitHandler}
+      >
+        {props.children}
+      </Form>
+    </DeploymentRegistrationContext.Provider>
+  );
+}
+
+export function useRegisterDeploymentContext() {
+  const {
+    stage,
+    endpoint,
+    isLambda,
+    goToAdvanced,
+    goToConfirm,
+    goToEndpoint,
+    updateEndpoint,
+    formId,
+    additionalHeaders,
+    services,
+    updateAssumeRoleArn,
+    updateUseHttp11Arn,
+    updateShouldForce,
+    shouldForce,
+    useHttp11,
+    assumeRoleArn,
+    error,
+    isPending,
+    isDuplicate,
+  } = useContext(DeploymentRegistrationContext);
+  const isEndpoint = stage === 'endpoint';
+  const isAdvanced = stage === 'advanced';
+  const isConfirm = stage === 'confirm';
+
+  return {
+    isAdvanced,
+    isEndpoint,
+    isConfirm,
+    isLambda,
+    isDuplicate,
+    endpoint,
+    goToAdvanced,
+    goToConfirm,
+    goToEndpoint,
+    updateEndpoint,
+    isPending,
+    formId,
+    additionalHeaders,
+    services,
+    updateAssumeRoleArn,
+    updateUseHttp11Arn,
+    updateShouldForce,
+    shouldForce,
+    useHttp11,
+    assumeRoleArn,
+    error,
+  };
+}
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
index bf3d240..180241a 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/Dialog.tsx
@@ -12,53 +12,81 @@ import { ErrorBanner } from '@restate/ui/error';
 import { RegistrationForm } from './Form';
 import { REGISTER_DEPLOYMENT_QUERY } from './constant';
 import { Link } from '@restate/ui/link';
+import {
+  DeploymentRegistrationState,
+  useRegisterDeploymentContext,
+} from './Context';
 
-function RegisterDeploymentFooter({
-  isDryRun,
-  setIsDryRun,
-  error,
-  isPending,
-  formId,
-}: {
-  isDryRun: boolean;
-  formId: string;
-  isPending: boolean;
-  setIsDryRun: (value: boolean) => void;
-  error?: {
-    message: string;
-    restate_code?: string | null;
-  } | null;
-}) {
+function RegisterDeploymentFooter() {
+  const {
+    isAdvanced,
+    isEndpoint,
+    isConfirm,
+    isPending,
+    goToEndpoint,
+    error,
+    formId,
+  } = useRegisterDeploymentContext();
   return (
     <DialogFooter>
       <div className="flex gap-2 flex-col">
         {error && <ErrorBanner errors={[error]} />}
         <div className="flex gap-2">
-          {isDryRun ? (
-            <DialogClose>
+          <DialogClose>
+            <Button variant="secondary" disabled={isPending}>
+              Cancel
+            </Button>
+          </DialogClose>
+          <div className="flex-auto flex flex-row-reverse gap-2">
+            {(isEndpoint || isAdvanced) && (
+              <SubmitButton
+                variant="primary"
+                form={formId}
+                className="flex gap-1 pr-3.5"
+                name="_action"
+                value="dryRun"
+              >
+                Next
+                <Icon name={IconName.ChevronRight} className="w-[1.25em]" />
+              </SubmitButton>
+            )}
+            {isConfirm && (
+              <SubmitButton
+                variant="primary"
+                form={formId}
+                name="_action"
+                value="register"
+                autoFocus
+              >
+                Confirm
+              </SubmitButton>
+            )}
+            {isEndpoint && (
+              <SubmitButton
+                variant="secondary"
+                disabled={isPending}
+                name="_action"
+                value="advanced"
+                form={formId}
+                hideSpinner
+                className="flex gap-1 pr-3.5"
+              >
+                Advanced
+                <Icon name={IconName.ChevronRight} className="w-[1.25em]" />
+              </SubmitButton>
+            )}
+            {isAdvanced && (
               <Button
                 variant="secondary"
-                className="flex-auto"
                 disabled={isPending}
+                onClick={goToEndpoint}
+                className="flex gap-1 pl-3.5"
               >
-                Cancel
+                <Icon name={IconName.ChevronLeft} className="w-[1.25em]" />
+                Back
               </Button>
-            </DialogClose>
-          ) : (
-            <Button
-              variant="secondary"
-              className="flex-auto"
-              disabled={isPending}
-              onClick={() => {
-                setIsDryRun(true);
-              }}
-            >
-              Back
-            </Button>
-          )}
-          <SubmitButton variant="primary" form={formId} className="flex-auto">
-            {isDryRun ? 'Next' : 'Confirm'}
-          </SubmitButton>
+            )}
+          </div>
         </div>
       </div>
     </DialogFooter>
@@ -80,8 +108,11 @@ export function TriggerRegisterDeploymentDialog({
           {children}
         </Link>
       </DialogTrigger>
-      <DialogContent className="max-w-lg">
-        <RegistrationForm>{RegisterDeploymentFooter}</RegistrationForm>
+      <DialogContent className="max-w-2xl">
+        <DeploymentRegistrationState>
+          <RegistrationForm />
+          <RegisterDeploymentFooter />
+        </DeploymentRegistrationState>
       </DialogContent>
     </QueryDialog>
   );
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/Form.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/Form.tsx
index 51ba79b..5953f0e 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/Form.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/Form.tsx
@@ -1,26 +1,15 @@
-import { Form } from '@remix-run/react';
-import {
-  useListDeployments,
-  useRegisterDeployment,
-} from '@restate/data-access/admin-api';
-import { useDialog } from '@restate/ui/dialog';
 import { FormFieldCheckbox, FormFieldInput } from '@restate/ui/form-field';
 import { Icon, IconName } from '@restate/ui/icons';
-import {
-  FormEvent,
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useId,
-  useState,
-} from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { Radio } from 'react-aria-components';
 import { RadioGroup } from '@restate/ui/radio-group';
 import { RegisterDeploymentResults } from './Results';
 import { AdditionalHeaders } from '../RegisterDeployment/AdditionalHeaders';
-import { DeploymentType } from '../types';
 import { UseHTTP11 } from '../RegisterDeployment/UseHTTP11';
 import { AssumeARNRole } from '../RegisterDeployment/AssumeARNRole';
+import { useRegisterDeploymentContext } from './Context';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@restate/ui/tooltip';
+import { ServiceDeploymentExplainer } from '@restate/features/explainers';
 
 function CustomRadio({
   value,
@@ -33,7 +22,12 @@ function CustomRadio({
   return (
     <Radio
       value={value}
-      className={({ isFocusVisible, isSelected, isPressed }) => `${className}
+      className={({
+        isFocusVisible,
+        isSelected,
+        isPressed,
+        isDisabled,
+      }) => `${className}
         group relative flex cursor-default rounded-lg shadow-none outline-none bg-clip-padding border
         ${
           isFocusVisible
@@ -49,210 +43,198 @@ function CustomRadio({
         }
         ${isPressed && !isSelected ? 'bg-gray-100' : ''}
         ${!isSelected && !isPressed ? 'bg-white/50' : ''}
+        ${isDisabled ? 'opacity-50' : ''}
       `}
     >
       {children}
     </Radio>
   );
 }
-// TODO: change type on paste
-// fix autofocus
-function RegistrationFormFields({
+
+function Container({
+  title,
+  description,
   children,
-  className = '',
-}: PropsWithChildren<{ className?: string }>) {
-  const [type, setType] = useState<DeploymentType>('uri');
-  const isURI = type === 'uri';
-  const isLambda = type === 'arn';
+}: PropsWithChildren<{
+  title: ReactNode;
+  description?: ReactNode;
+}>) {
+  return (
+    <div className="flex flex-col gap-2">
+      <h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
+      {description ? (
+        <p className="text-sm text-gray-500">{description}</p>
+      ) : (
+        <div className="mt-2" />
+      )}
+      <div className="flex flex-col gap-4">{children}</div>
+    </div>
+  );
+}
+
+export function RegistrationForm() {
+  const { isEndpoint, isAdvanced, isConfirm } = useRegisterDeploymentContext();
 
   return (
     <>
-      <div className={`${className} flex flex-col gap-2`}>
-        <h3 className="text-lg font-medium leading-6 text-gray-900">
-          Register deployment
-        </h3>
-        <p className="text-sm text-gray-500">
-          Point Restate to your deployed services so Restate can discover and
-          register your services and handlers
-        </p>
-        <div className="flex flex-col gap-6">
-          <div className="grid grid-cols-1 grid-rows-1">
-            <FormFieldInput
-              autoFocus
-              {...(type === 'uri' && {
-                required: true,
-                type: 'url',
-              })}
-              name="uri"
-              className={`${
-                type !== 'uri' ? 'hidden' : ''
-              } mt-2 row-start-1 row-end-2 col-start-1 col-end-2 [&_input]:pl-[4.75rem]`}
-              placeholder="https://example.com/my-deployment"
-              label={
-                <span slot="description" className="leading-5 text-code block">
-                  Please specify the HTTP endpoint or Lambda identifier:
-                </span>
-              }
-            />
-            <FormFieldInput
-              {...(type === 'arn' && {
-                required: true,
-                pattern:
-                  '^arn:aws:lambda:[a-z0-9\\-]+:\\d+:function:[a-zA-Z0-9\\-_]+:\\d+$',
-                type: 'text',
-              })}
-              name="arn"
-              className={`${
-                type !== 'arn' ? 'hidden' : ''
-              } mt-2 row-start-1 row-end-2 col-start-1 col-end-2 [&_input]:pl-[4.75rem]`}
-              placeholder="arn:aws:lambda:{reg}:{acc}:function:{func}:{version}"
-              label={
-                <span slot="description" className="leading-5 text-code block">
-                  Please specify the HTTP endpoint or Lambda identifier:
-                </span>
-              }
-            />
-            <div className="w-fit h-[1.925rem] row-start-1 row-end-2 col-start-1 col-end-2 self-start mt-[2.23rem] ml-[0.1rem] [&_ul]:bg-black/[0.025] [&_button]:px-2 [&_.active]:px-2 [&_ul]:rounded-[0.35rem] [&_button]:rounded-[0.35rem] [&_.active]:rounded-[0.35rem]">
-              <RadioGroup
-                value={type}
-                name="type"
-                required
-                className="h-full row-start-1 row-end-1 flex-row gap-[2px] bg-black2/[0.05] rounded-lg"
-                onChange={(value) => setType(value as 'uri' | 'arn')}
-              >
+      {isEndpoint && (
+        <Container
+          title={
+            <>
+              Register{' '}
+              <ServiceDeploymentExplainer className="decoration-gray-400">
+                service deployment
+              </ServiceDeploymentExplainer>
+            </>
+          }
+          description="Please provide the HTTP endpoint or Lambda ARN where your service is running:"
+        >
+          <EndpointForm />
+        </Container>
+      )}
+      {isAdvanced && (
+        <Container title="Advanced configurations">
+          <AdvancedForm />
+        </Container>
+      )}
+      {isConfirm && (
+        <Container
+          title="Services"
+          description="Please confirm the list of services discovered in the deployment."
+        >
+          <RegisterDeploymentResults />
+        </Container>
+      )}
+    </>
+  );
+}
+
+function EndpointForm() {
+  const {
+    isLambda,
+    updateEndpoint,
+    endpoint,
+    isPending,
+    isDuplicate,
+    shouldForce,
+    updateShouldForce,
+  } = useRegisterDeploymentContext();
+  return (
+    <>
+      <FormFieldInput
+        autoFocus
+        required
+        value={endpoint}
+        disabled={isPending}
+        type={isLambda ? 'text' : 'url'}
+        {...(isLambda && {
+          pattern:
+            '^arn:aws:lambda:[a-z0-9\\-]+:\\d+:function:[a-zA-Z0-9\\-_]+:\\d+$',
+        })}
+        name="endpoint"
+        className="[&_.error]:absolute [&_.error]:pt-1 [&_input:not([type=radio])]:absolute left-0 right-0 my-2 [&_input:not([type=radio])]:pr-[4.75rem]"
+        placeholder={
+          isLambda
+            ? 'arn:aws:lambda:{reg}:{acc}:function:{func}:{version}'
+            : 'http://localhost:9080'
+        }
+        label={isLambda ? 'Lambda ARN' : 'HTTP endpoint'}
+        onChange={(value) => {
+          updateEndpoint?.({
+            isLambda: value.startsWith('arn')
+              ? true
+              : value.startsWith('http')
+              ? false
+              : isLambda,
+            endpoint: value,
+          });
+        }}
+      >
+        <div className="w-fit top-[2px] absolute right-[2px] self-start [&_ul]:bg-black/[0.025] [&_button]:px-2 [&_.active]:px-2 [&_ul]:rounded-[0.35rem] [&_button]:rounded-[0.35rem] [&_.active]:rounded-[0.35rem]">
+          <RadioGroup
+            value={String(isLambda)}
+            name="isLambda"
+            required
+            className="h-full row-start-1 row-end-1 flex-row gap-[2px] bg-black2/[0.05] rounded-lg"
+            onChange={(value) =>
+              updateEndpoint?.({
+                isLambda: value === 'true',
+                endpoint: '',
+              })
+            }
+            disabled={isPending}
+          >
+            <Tooltip>
+              <TooltipTrigger>
                 <CustomRadio
-                  value="uri"
+                  value="false"
                   className="p-1.5 aspect-square items-center rounded-[0.4rem]"
                 >
                   <Icon name={IconName.Http} className="h-4 w-4" />
                 </CustomRadio>
+              </TooltipTrigger>
+              <TooltipContent small offset={20}>
+                HTTP endpoint
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger>
                 <CustomRadio
-                  value="arn"
+                  value="true"
                   className="p-1.5 aspect-square items-center rounded-[0.4rem]"
                 >
                   <Icon name={IconName.Lambda} className="h-4 w-4" />
                 </CustomRadio>
-              </RadioGroup>
-            </div>
+              </TooltipTrigger>
+              <TooltipContent small offset={20}>
+                AWS Lambda
+              </TooltipContent>
+            </Tooltip>
+          </RadioGroup>
+        </div>
+      </FormFieldInput>
+      {isDuplicate && (
+        <FormFieldCheckbox
+          name="force"
+          className="mb-2 rounded-xl bg-orange-100 p-3 relative [&_.error]:absolute [&_.error]:bottom-[-1.5em] [&_input]:bg-white"
+          value="true"
+          checked={shouldForce}
+          onChange={updateShouldForce}
+          required={isDuplicate}
+          direction="right"
+          autoFocus
+        >
+          <div slot="title" className="flex gap-2 items-center text-orange-600">
+            <Icon
+              className="h-5 w-5  text-orange-600"
+              name={IconName.TriangleAlert}
+            />
+            Override existing deployments
           </div>
-          <FormFieldCheckbox
-            name="force"
-            className="self-baseline mt-0.5"
-            value="true"
-            direction="right"
+
+          <span
+            slot="description"
+            className="pl-7 leading-5 text-sm mt-2 block text-orange-600"
           >
-            <span slot="title" className="text-sm font-medium text-gray-700">
-              Override existing deployments
-            </span>
+            An existing deployment with the same {isLambda ? 'ARN' : 'URL'}{' '}
+            already exists. Would you like to override it?
             <br />
-            <span
-              slot="description"
-              className="leading-5 text-code block text-gray-500"
-            >
-              If selected, it will override any existing deployment with the
-              same URI/identifier, potentially causing unrecoverable errors in
-              active invocations.
-            </span>
-          </FormFieldCheckbox>
-          {isURI && <UseHTTP11 />}
-          {isLambda && <AssumeARNRole />}
-          <AdditionalHeaders />
-        </div>
-      </div>
-      {children}
+            Please note that this may cause{' '}
+            <strong>unrecoverable errors</strong> in active invocations.
+          </span>
+        </FormFieldCheckbox>
+      )}
     </>
   );
 }
 
-export function RegistrationForm({
-  children,
-}: {
-  children: (props: {
-    isDryRun: boolean;
-    isPending: boolean;
-    formId: string;
-    setIsDryRun: (value: boolean) => void;
-    error?: {
-      message: string;
-      restate_code?: string | null;
-    } | null;
-  }) => ReactNode;
-}) {
-  const formId = useId();
-  const { close } = useDialog();
-  const { refetch } = useListDeployments();
-  const [isDryRun, setIsDryRun] = useState(true);
-  const { mutate, isPending, error, data, reset } = useRegisterDeployment({
-    onSuccess: (data, variables) => {
-      setIsDryRun(false);
-      if (variables.body?.dry_run === false) {
-        refetch();
-        close();
-      }
-    },
-  });
-
-  useEffect(() => {
-    return () => {
-      reset();
-    };
-  }, [reset]);
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const uri = String(formData.get('uri'));
-    const arn = String(formData.get('arn'));
-    const type = String(formData.get('type'));
-    const force = formData.get('force') === 'true';
-    const use_http_11 = formData.get('use_http_11') === 'true';
-    const assume_role_arn =
-      formData.get('assume_role_arn')?.toString() || undefined;
-    const keys = formData.getAll('key');
-    const values = formData.getAll('value');
-    const additional_headers: Record<string, string> = keys.reduce(
-      (result, key, index) => {
-        const value = values.at(index);
-        if (typeof key === 'string' && typeof value === 'string' && key) {
-          return { ...result, [key]: value };
-        }
-        return result;
-      },
-      {}
-    );
-
-    mutate({
-      body: {
-        ...(type === 'uri' ? { uri, use_http_11 } : { arn, assume_role_arn }),
-        force,
-        dry_run: isDryRun,
-        additional_headers,
-      },
-    });
-  }
+function AdvancedForm() {
+  const { isLambda } = useRegisterDeploymentContext();
 
   return (
-    <Form
-      id={formId}
-      onSubmit={handleSubmit}
-      method="post"
-      action="/deployments"
-    >
-      <RegistrationFormFields className={isDryRun ? '' : 'hidden'}>
-        {!isDryRun && data?.services && (
-          <div className="flex flex-col gap-2">
-            <h3 className="text-lg font-medium leading-6 text-gray-900">
-              Deployment <code>{data.id}</code>
-            </h3>
-            <p className="text-sm text-gray-500">
-              Below, you will find the list of services and handlers included in
-              this deployment. Please confirm.
-            </p>
-            <RegisterDeploymentResults services={data.services} />
-          </div>
-        )}
-      </RegistrationFormFields>
-      {children({ isDryRun, isPending, setIsDryRun, error, formId })}
-    </Form>
+    <>
+      {isLambda ? <AssumeARNRole /> : <UseHTTP11 />}
+      <AdditionalHeaders />
+    </>
   );
 }
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/Results.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/Results.tsx
index 2ffe28a..e4ed8db 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/Results.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/Results.tsx
@@ -1,11 +1,16 @@
 import * as adminApi from '@restate/data-access/admin-api/spec';
 import { Icon, IconName } from '@restate/ui/icons';
+import { useRegisterDeploymentContext } from './Context';
+import {
+  UNSTABLE_Disclosure as Disclosure,
+  UNSTABLE_DisclosurePanel as DisclosurePanel,
+} from 'react-aria-components';
+import { Button } from '@restate/ui/button';
+import { InlineTooltip } from '@restate/ui/tooltip';
+import { ServiceTypeExplainer } from '@restate/features/explainers';
 
-export function RegisterDeploymentResults({
-  services,
-}: {
-  services: adminApi.components['schemas']['ServiceMetadata'][];
-}) {
+export function RegisterDeploymentResults() {
+  const { services = [] } = useRegisterDeploymentContext();
   if (services.length === 0) {
     return (
       <div className="p-4 flex flex-col gap-2 items-center relative w-full text-center mt-6 justify-center rounded-xl border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]">
@@ -19,7 +24,11 @@ export function RegisterDeploymentResults({
   return (
     <div className="flex flex-col gap-2 items-start w-full mt-6">
       {services.map((service) => (
-        <Service service={service} key={service.name} />
+        <Service
+          service={service}
+          key={service.name}
+          defaultExpanded={services.length < 5}
+        />
       ))}
     </div>
   );
@@ -27,33 +36,71 @@ export function RegisterDeploymentResults({
 
 function Service({
   service,
+  defaultExpanded,
 }: {
   service: adminApi.components['schemas']['ServiceMetadata'];
+  defaultExpanded?: boolean;
 }) {
   return (
-    <div className="w-full rounded-xl border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]">
-      <div className="rounded-[calc(0.75rem-1px)] bg-white shadow-lg shadow-zinc-800/5 border flex gap-2 items-center flex-row m-[1px] pr-4 text-sm">
-        <div className="h-10 aspect-square p-[2px]">
-          <div className="rounded-[calc(0.75rem-2px)] bg-blue-50 h-full w-full flex items-center justify-center text-blue-500">
-            <Icon name={IconName.Box} className="w-5 h-5" />
+    <div className="w-full rounded-xl p-0.5 border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]">
+      <Disclosure
+        defaultExpanded={defaultExpanded}
+        className={({ isExpanded }) =>
+          isExpanded
+            ? '[&_.disclosure-icon]:rotate-180 [&>button]:shadow-lg [&>button]:shadow-zinc-800/5'
+            : ''
+        }
+      >
+        <Button
+          variant="secondary"
+          slot="trigger"
+          className="w-full rounded-[calc(0.75rem-0.125rem)] bg-white border shadow-sm flex items-center flex-row p-0 pr-2 text-sm"
+        >
+          <div className="h-12 aspect-square p-1">
+            <div className="rounded-lg text-blue-400 h-full w-full flex items-center justify-center">
+              <div className="p-1 w-8 h-8">
+                <Icon
+                  name={IconName.Box}
+                  className="w-full h-full fill-blue-50 text-blue-400 drop-shadow-md"
+                />
+              </div>
+            </div>
           </div>
-        </div>
-        <div className="font-medium">{service.name}</div>
-        <div className="rounded-full text-xs bg-gray-50 border px-2 py-0.5 ring-1 ring-inset ring-gray-100">
-          rev. {service.revision}
-        </div>
-        <div className="ml-auto text-xs bg-blue-50 text-blue-800 ring-blue-600/20 inline-flex gap-1 items-center rounded-lg px-2 py-0.5 text-sm font-medium ring-1 ring-inset">
-          {service.ty}
-        </div>
-      </div>
-      <div className="flex flex-col mt-2">
-        <div className="ml-4 uppercase text-xs font-semibold text-gray-400 mt-2">
-          Handlers
-        </div>
-        {service.handlers.map((handler) => (
-          <ServiceHandler handler={handler} key={handler.name} />
-        ))}
-      </div>
+          <div className="flex flex-col gap-1 items-start">
+            <div className="flex items-center gap-2">
+              <div className="font-medium">{service.name}</div>
+              <div className="ml-auto text-xs bg-blue-50 text-blue-800 ring-blue-600/20 inline-flex gap-1 items-center rounded-md px-2 py-0.5 font-medium ring-1 ring-inset">
+                <ServiceTypeExplainer
+                  type={service.ty}
+                  variant="indicator-button"
+                >
+                  {service.ty}
+                </ServiceTypeExplainer>
+              </div>
+            </div>
+          </div>
+          <div className="ml-auto uppercase font-semibold text-2xs font-mono items-center rounded-xl px-2 leading-4 bg-gray-50 ring-1 ring-inset ring-zinc-500/20 text-zinc-500">
+            rev. {service.revision}
+          </div>
+
+          <Icon
+            name={IconName.ChevronDown}
+            className="disclosure-icon flex-shrink-0 text-zinc-400 ml-1.5 text-sm"
+          />
+        </Button>
+        <DisclosurePanel>
+          {service.handlers.length > 0 && (
+            <div className="flex flex-col mt-2 mx-1.5 mb-1.5">
+              <div className="ml-2 uppercase text-xs font-semibold text-gray-400 mt-2 mb-1 flex gap-2 items-center">
+                Handlers
+              </div>
+              {service.handlers.map((handler) => (
+                <ServiceHandler handler={handler} key={handler.name} />
+              ))}
+            </div>
+          )}
+        </DisclosurePanel>
+      </Disclosure>
     </div>
   );
 }
@@ -64,14 +111,20 @@ function ServiceHandler({
   handler: adminApi.components['schemas']['ServiceMetadata']['handlers'][number];
 }) {
   return (
-    <div className="flex flex-row items-center gap-2 pr-4 bg-gray-50 shadow-sm border rounded-[calc(0.75rem-1px)]">
-      <div className="h-9 aspect-square p-[2px]">
-        <div className="rounded-[calc(0.75rem-2px)] bg-gray-200/40 h-full w-full flex items-center justify-center text-gray-400">
-          <Icon name={IconName.Function} className="w-5 h-5" />
+    <div className="flex flex-row items-center gap-2 bg-gray-50 shadow-sm shadow-zinc-700/5 border [&:has(+*)]:rounded-b-none [&+*]:rounded-t-none [&+*]:border-t-0 rounded-[calc(0.75rem-0.5rem)]">
+      <div className="h-9 aspect-square p-1">
+        <div className="rounded h-full w-full flex items-center justify-center text-gray-400">
+          <div className="bg-white border shadow-sm rounded-sm w-6 h-6">
+            <Icon
+              name={IconName.Function}
+              className="w-full h-full text-zinc-400"
+            />
+          </div>
         </div>
       </div>
-      <div className="text-code">{handler.name}</div>
-      <div className="ml-auto text-xs bg-gray-100 text-gray-500 ring-gray-500/20 inline-flex gap-1 items-center rounded-lg px-2 py-0.5 text-sm font-medium ring-1 ring-inset">
+
+      <div className="text-code text-zinc-600">{handler.name}</div>
+      <div className="ml-auto mr-1.5 text-2xs font-medium bg-white text-zinc-500 ring-zinc-500/20 inline-flex gap-1 items-center rounded-md px-2 py-0 ring-1 ring-inset">
         {handler.ty}
       </div>
     </div>
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/UseHTTP11.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/UseHTTP11.tsx
index 712d697..a3832d6 100644
--- a/libs/features/overview-route/src/lib/RegisterDeployment/UseHTTP11.tsx
+++ b/libs/features/overview-route/src/lib/RegisterDeployment/UseHTTP11.tsx
@@ -1,26 +1,28 @@
 import { FormFieldCheckbox } from '@restate/ui/form-field';
+import { useRegisterDeploymentContext } from './Context';
 
 export function UseHTTP11() {
+  const { updateUseHttp11Arn, useHttp11 } = useRegisterDeploymentContext();
+
   return (
-    <FormFieldCheckbox
-      name="use_http_11"
-      className="self-baseline mt-0.5"
-      value="true"
-      direction="right"
-    >
-      <span slot="title" className="text-sm font-medium text-gray-700">
+    <div>
+      <div slot="title" className="text-sm font-medium text-gray-700 mb-2">
         Use <code>HTTP1.1</code>
-      </span>
-      <br />
-      <span
-        slot="description"
-        className="leading-5 text-code block text-gray-500"
+      </div>
+      <FormFieldCheckbox
+        name="use_http_11"
+        className="self-baseline mt-0.5"
+        value="true"
+        checked={useHttp11}
+        onChange={updateUseHttp11Arn}
       >
-        If selected, discovery will use a client defaulting to{' '}
-        <code>HTTP1.1</code>. <code>HTTP2</code> may be used for{' '}
-        <code>TLS</code> servers advertising <code>HTTP2</code> support via
-        ALPN. HTTP1.1 will work only in request-response mode.
-      </span>
-    </FormFieldCheckbox>
+        <span
+          slot="description"
+          className="leading-5 text-code block text-gray-500"
+        >
+          <code>HTTP1.1</code> will be used for service registration.
+        </span>
+      </FormFieldCheckbox>
+    </div>
   );
 }
diff --git a/libs/features/overview-route/src/lib/types.ts b/libs/features/overview-route/src/lib/types.ts
index dfb0293..3aa2a4f 100644
--- a/libs/features/overview-route/src/lib/types.ts
+++ b/libs/features/overview-route/src/lib/types.ts
@@ -13,3 +13,10 @@ export function isLambdaDeployment(
 ): deployment is LambdaDeployment {
   return 'arn' in deployment;
 }
+export function getEndpoint(deployment: Deployment) {
+  if (isHttpDeployment(deployment)) {
+    return deployment.uri;
+  } else {
+    return deployment.arn;
+  }
+}
diff --git a/libs/ui/button/src/lib/Button.tsx b/libs/ui/button/src/lib/Button.tsx
index 6e1c6e7..028f7de 100644
--- a/libs/ui/button/src/lib/Button.tsx
+++ b/libs/ui/button/src/lib/Button.tsx
@@ -20,6 +20,7 @@ export interface ButtonProps {
   variant?: 'primary' | 'secondary' | 'destructive' | 'icon';
   className?: string;
   form?: string;
+  slot?: string;
 }
 
 const styles = tv({
diff --git a/libs/ui/button/src/lib/SubmitButton.tsx b/libs/ui/button/src/lib/SubmitButton.tsx
index d657f65..4e75e73 100644
--- a/libs/ui/button/src/lib/SubmitButton.tsx
+++ b/libs/ui/button/src/lib/SubmitButton.tsx
@@ -4,7 +4,7 @@ import {
   useDeferredValue,
   ComponentProps,
 } from 'react';
-import { useFetchers } from '@remix-run/react';
+import { useFetchers, useHref } from '@remix-run/react';
 import { Button } from './Button';
 import { tv } from 'tailwind-variants';
 import { useIsMutating } from '@tanstack/react-query';
@@ -17,6 +17,8 @@ export interface SubmitButtonProps {
   value?: string;
   variant?: 'primary' | 'secondary' | 'destructive' | 'icon';
   className?: string;
+  autoFocus?: boolean;
+  hideSpinner?: boolean;
 }
 
 const spinnerStyles = tv({
@@ -57,22 +59,23 @@ const styles = tv({
 });
 
 function useIsSubmitting(action?: string) {
+  const basename = useHref('/');
   let actionUrl: URL | null = null;
   try {
     actionUrl = new URL(String(action));
   } catch {
     actionUrl = null;
   }
-
+  const formActionPathname = actionUrl?.pathname.split(basename).at(-1);
   const fetchers = useFetchers();
   const submitFetcher = fetchers.find(
-    (fetcher) => fetcher.formAction === actionUrl?.pathname
+    (fetcher) => fetcher.formAction === formActionPathname
   );
 
   const isMutating = useIsMutating({
     predicate: (mutation) => {
       const [pathName] = mutation.options.mutationKey ?? [];
-      return actionUrl?.pathname === pathName;
+      return formActionPathname === pathName;
     },
   });
 
@@ -82,6 +85,7 @@ function useIsSubmitting(action?: string) {
 export function SubmitButton({
   disabled,
   children,
+  hideSpinner = false,
   ...props
 }: PropsWithChildren<SubmitButtonProps>) {
   const ref = useRef<HTMLButtonElement | null>(null);
@@ -96,7 +100,7 @@ export function SubmitButton({
       ref={ref}
       disabled={deferredIsSubmitting || disabled}
     >
-      {deferredIsSubmitting ? (
+      {deferredIsSubmitting && !hideSpinner ? (
         <div className={styles({})}>
           <Spinner />
           {children}
diff --git a/libs/ui/dialog/src/lib/DialogContent.tsx b/libs/ui/dialog/src/lib/DialogContent.tsx
index 9f8a336..6daa76b 100644
--- a/libs/ui/dialog/src/lib/DialogContent.tsx
+++ b/libs/ui/dialog/src/lib/DialogContent.tsx
@@ -48,7 +48,7 @@ export function DialogContent({
           modalStyles({ ...renderProps, className })
         )}
       >
-        <AriaDialog className="flex flex-col outline bg-gray-100 rounded-[1.125rem] outline-0 p-1.5 [[data-placement]>&]:p-4 max-h-full relative">
+        <AriaDialog className="flex flex-col outline bg-gray-100 rounded-[1.125rem] outline-0 p-1.5 [[data-placement]>&]:p-4 max-h-full w-full relative">
           <DialogFooterContainer>
             <div className="bg-white p-6 border rounded-xl max-h-[inherit] overflow-auto">
               {children}
diff --git a/libs/ui/error/src/lib/ErrorBanner.tsx b/libs/ui/error/src/lib/ErrorBanner.tsx
index da60110..78c7cd0 100644
--- a/libs/ui/error/src/lib/ErrorBanner.tsx
+++ b/libs/ui/error/src/lib/ErrorBanner.tsx
@@ -44,7 +44,7 @@ function SingleError({
             name={IconName.CircleX}
           />
         </div>
-        <output className="text-sm flex-auto text-red-700">
+        <output className="text-sm flex-auto text-red-700 [word-break:break-word] max-h-28 overflow-auto">
           {typeof error === 'string' ? error : error.message}
         </output>
         {children && <div className="flex-shrink-0">{children}</div>}
@@ -81,7 +81,7 @@ export function ErrorBanner({
           <h3 className="text-sm font-medium text-red-800">
             There were {errors.length} errors:
           </h3>
-          <output className="text-sm text-red-700">
+          <output className="text-sm text-red-700 [word-break:break-word] max-h-20 overflow-auto">
             <ul className="list-disc space-y-1 pl-5">
               {errors.map((error) => (
                 <li key={typeof error === 'string' ? error : error.message}>
diff --git a/libs/ui/form-field/src/lib/FormFieldCheckbox.tsx b/libs/ui/form-field/src/lib/FormFieldCheckbox.tsx
index 3d7aa2a..5996f96 100644
--- a/libs/ui/form-field/src/lib/FormFieldCheckbox.tsx
+++ b/libs/ui/form-field/src/lib/FormFieldCheckbox.tsx
@@ -19,6 +19,7 @@ interface FormFieldCheckboxProps
   errorMessage?: ComponentProps<typeof FormFieldError>['children'];
   slot?: string;
   checked?: boolean;
+  onChange?: (checked: boolean) => void;
   direction?: 'left' | 'right';
 }
 
@@ -28,6 +29,7 @@ const styles = tv({
     container: 'grid gap-x-2 items-center',
     input:
       'disabled:text-gray-100 hover:disabled:text-gray-100 focus:disabled:text-gray-100 disabled:bg-gray-100 disabled:border-gray-100 disabled:shadow-none invalid:bg-red-100 invalid:border-red-600 text-blue-600 checked:focus:text-blue-800 bg-gray-100  row-start-1 min-w-0 rounded-md w-5 h-5 border-gray-200 focus:bg-gray-300 hover:bg-gray-300 shadow-[inset_0_0.5px_0.5px_0px_rgba(0,0,0,0.08)]',
+    error: 'error row-start-2 px-0',
   },
   variants: {
     direction: {
@@ -35,11 +37,13 @@ const styles = tv({
         container: 'grid-cols-[1.25rem_1fr]',
         input: 'col-start-1',
         label: 'col-start-2',
+        error: 'col-start-2',
       },
       right: {
         container: 'grid-cols-[1fr_1.25rem]',
-        input: 'col-start-2',
+        input: 'self-baseline col-start-2',
         label: 'col-start-1',
+        error: 'col-start-1',
       },
     },
   },
@@ -49,23 +53,28 @@ export const FormFieldCheckbox = forwardRef<
   PropsWithChildren<FormFieldCheckboxProps>
 >(
   (
-    { className, errorMessage, children, direction = 'left', ...props },
+    {
+      onChange,
+      className,
+      errorMessage,
+      children,
+      direction = 'left',
+      ...props
+    },
     ref
   ) => {
-    const { input, container, label } = styles({ direction });
+    const { input, container, label, error } = styles({ direction });
     return (
-      <TextField className={container()}>
+      <TextField className={container({ className })}>
         <Input
           {...props}
           type="checkbox"
-          className={input({ className })}
+          className={input()}
           ref={ref}
+          onChange={(event) => onChange?.(event.currentTarget.checked)}
         />
         <Label className={label()}>{children}</Label>
-        <FormFieldError
-          children={errorMessage}
-          className="col-start-2 row-start-2 px-0"
-        />
+        <FormFieldError children={errorMessage} className={error()} />
       </TextField>
     );
   }
diff --git a/libs/ui/form-field/src/lib/FormFieldError.tsx b/libs/ui/form-field/src/lib/FormFieldError.tsx
index 430834d..05761cd 100644
--- a/libs/ui/form-field/src/lib/FormFieldError.tsx
+++ b/libs/ui/form-field/src/lib/FormFieldError.tsx
@@ -9,7 +9,7 @@ interface FormFieldErrorProps extends Pick<FieldErrorProps, 'children'> {
 }
 
 const styles = tv({
-  base: 'text-xs px-1 pt-0.5 text-red-600 forced-colors:text-[Mark]',
+  base: 'error text-xs px-1 pt-0.5 text-red-600 forced-colors:text-[Mark]',
 });
 export function FormFieldError({ className, ...props }: FormFieldErrorProps) {
   return <AriaFieldError {...props} className={styles({ className })} />;
diff --git a/libs/ui/form-field/src/lib/FormFieldInput.tsx b/libs/ui/form-field/src/lib/FormFieldInput.tsx
index 9e0e2b3..96c931d 100644
--- a/libs/ui/form-field/src/lib/FormFieldInput.tsx
+++ b/libs/ui/form-field/src/lib/FormFieldInput.tsx
@@ -6,7 +6,12 @@ import {
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 import { FormFieldError } from './FormFieldError';
-import { ComponentProps, ReactNode } from 'react';
+import {
+  ComponentProps,
+  forwardRef,
+  PropsWithChildren,
+  ReactNode,
+} from 'react';
 import { FormFieldLabel } from './FormFieldLabel';
 
 const inputStyles = tv({
@@ -38,34 +43,47 @@ interface InputProps
   label?: ReactNode;
   errorMessage?: ComponentProps<typeof FormFieldError>['children'];
 }
-export function FormFieldInput({
-  className,
-  required,
-  disabled,
-  autoComplete = 'off',
-  placeholder,
-  errorMessage,
-  label,
-  readonly,
-  ...props
-}: InputProps) {
-  return (
-    <TextField
-      {...props}
-      autoComplete={autoComplete}
-      isRequired={required}
-      isDisabled={disabled}
-      isReadOnly={readonly}
-      className={containerStyles({ className })}
-    >
-      {!label && <Label className="sr-only">{placeholder}</Label>}
-      {label && <FormFieldLabel>{label}</FormFieldLabel>}
-      <AriaInput
-        className={inputStyles}
-        placeholder={placeholder}
-        aria-label={placeholder}
-      />
-      <FormFieldError children={errorMessage} />
-    </TextField>
-  );
-}
+export const FormFieldInput = forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<InputProps>
+>(
+  (
+    {
+      className,
+      required,
+      disabled,
+      autoComplete = 'off',
+      placeholder,
+      errorMessage,
+      label,
+      readonly,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <TextField
+        {...props}
+        autoComplete={autoComplete}
+        isRequired={required}
+        isDisabled={disabled}
+        isReadOnly={readonly}
+        className={containerStyles({ className })}
+      >
+        {!label && <Label className="sr-only">{placeholder}</Label>}
+        {label && <FormFieldLabel>{label}</FormFieldLabel>}
+        <div className="relative min-h-[2.125rem]">
+          <AriaInput
+            className={inputStyles}
+            placeholder={placeholder}
+            aria-label={placeholder}
+            ref={ref}
+          />
+          {children}
+        </div>
+        <FormFieldError children={errorMessage} />
+      </TextField>
+    );
+  }
+);
diff --git a/libs/ui/icons/src/lib/Icons.tsx b/libs/ui/icons/src/lib/Icons.tsx
index d245de6..3a92852 100644
--- a/libs/ui/icons/src/lib/Icons.tsx
+++ b/libs/ui/icons/src/lib/Icons.tsx
@@ -26,6 +26,9 @@ import {
   Box,
   SquareFunction,
   Info,
+  ArrowRight,
+  ArrowLeft,
+  ChevronLeft,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { tv } from 'tailwind-variants';
@@ -38,6 +41,8 @@ import { Github } from './custom-icons/Github';
 import { Discord } from './custom-icons/Discord';
 import { SupportTicket } from './custom-icons/SupportTicket';
 import { Help } from './custom-icons/Help';
+import { Question } from './custom-icons/Question';
+import { Function } from './custom-icons/Function';
 
 export const enum IconName {
   ChevronDown = 'ChevronDown',
@@ -76,6 +81,10 @@ export const enum IconName {
   Box = 'Box',
   Function = 'SquareFunction',
   Info = 'Info',
+  ArrowRight = 'ArrowRight',
+  ArrowLeft = 'ArrowLeft',
+  ChevronLeft = 'ChevronLeft',
+  Question = 'Question',
 }
 export interface IconsProps {
   name: IconName;
@@ -118,8 +127,12 @@ const ICONS: Record<IconName, LucideIcon> = {
   [IconName.Help]: Help,
   [IconName.Lambda]: Lambda,
   [IconName.Box]: Box,
-  [IconName.Function]: SquareFunction,
+  [IconName.Function]: Function,
   [IconName.Info]: Info,
+  [IconName.ArrowLeft]: ArrowLeft,
+  [IconName.ArrowRight]: ArrowRight,
+  [IconName.ChevronLeft]: ChevronLeft,
+  [IconName.Question]: Question,
 };
 
 const styles = tv({
diff --git a/libs/ui/icons/src/lib/custom-icons/Function.tsx b/libs/ui/icons/src/lib/custom-icons/Function.tsx
new file mode 100644
index 0000000..69aa526
--- /dev/null
+++ b/libs/ui/icons/src/lib/custom-icons/Function.tsx
@@ -0,0 +1,21 @@
+import { LucideProps } from 'lucide-react';
+import { forwardRef } from 'react';
+
+export const Function = forwardRef<SVGSVGElement, LucideProps>((props, ref) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3" />
+      <path d="M9 11.2h5.7" />
+    </svg>
+  );
+});
diff --git a/libs/ui/icons/src/lib/custom-icons/Question.tsx b/libs/ui/icons/src/lib/custom-icons/Question.tsx
new file mode 100644
index 0000000..1d17d1b
--- /dev/null
+++ b/libs/ui/icons/src/lib/custom-icons/Question.tsx
@@ -0,0 +1,21 @@
+import { LucideProps } from 'lucide-react';
+import { forwardRef } from 'react';
+
+export const Question = forwardRef<SVGSVGElement, LucideProps>((props, ref) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+      <path d="M12 17h.01" />
+    </svg>
+  );
+});
diff --git a/libs/ui/radio-group/src/lib/RadioGroup.tsx b/libs/ui/radio-group/src/lib/RadioGroup.tsx
index 20fd54f..cb19de9 100644
--- a/libs/ui/radio-group/src/lib/RadioGroup.tsx
+++ b/libs/ui/radio-group/src/lib/RadioGroup.tsx
@@ -12,6 +12,7 @@ interface RadioGroupProps {
   className?: string;
   defaultValue?: string;
   value?: string;
+  disabled?: boolean;
   onChange?: AriaRadioGroupProps['onChange'];
 }
 
@@ -22,6 +23,7 @@ export function RadioGroup({
   children,
   required,
   className,
+  disabled,
   ...props
 }: PropsWithChildren<RadioGroupProps>) {
   return (
@@ -29,6 +31,7 @@ export function RadioGroup({
       {...props}
       isRequired={required}
       className={styles({ className })}
+      isDisabled={disabled}
     >
       {children}
       <FormFieldError />
diff --git a/libs/ui/tooltip/src/lib/InlineTooltip.tsx b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
index 7c3fad0..a79e6b7 100644
--- a/libs/ui/tooltip/src/lib/InlineTooltip.tsx
+++ b/libs/ui/tooltip/src/lib/InlineTooltip.tsx
@@ -5,11 +5,14 @@ import { Icon, IconName } from '@restate/ui/icons';
 import { Button } from '@restate/ui/button';
 import { TooltipTrigger as AriaTooltip } from 'react-aria-components';
 import { useFocusable, useObjectRef } from 'react-aria';
+import { tv } from 'tailwind-variants';
 
 interface InlineTooltipProps {
   title: ReactNode;
   description: ReactNode;
   learnMoreHref?: string;
+  className?: string;
+  variant?: 'inline-help' | 'indicator-button';
 }
 
 export function InlineTooltip({
@@ -17,12 +20,18 @@ export function InlineTooltip({
   title,
   description,
   learnMoreHref,
+  className,
+  variant = 'inline-help',
 }: PropsWithChildren<InlineTooltipProps>) {
   const triggerRef = useRef<HTMLDivElement>(null);
+  const Trigger =
+    variant === 'inline-help' ? HelpTooltipTrigger : InfoTooltipTrigger;
 
   return (
     <AriaTooltip delay={250}>
-      <TooltipTrigger ref={triggerRef}>{children}</TooltipTrigger>
+      <Trigger ref={triggerRef} className={className}>
+        {children}
+      </Trigger>
       <InternalTooltipContent triggerRef={triggerRef}>
         <div className="flex flex-col gap-2 items-start">
           <h6 className="text-sm font-semibold text-gray-100">{title}</h6>
@@ -45,29 +54,62 @@ export function InlineTooltip({
   );
 }
 
-const TooltipTrigger = forwardRef<HTMLElement, PropsWithChildren<unknown>>(
-  ({ children }, ref) => {
-    const refObject = useObjectRef(ref);
-    const { focusableProps } = useFocusable({}, refObject);
+const helpStyles = tv({
+  base: 'cursor-help group underline-offset-4 decoration-from-font decoration-dashed underline inline-flex items-center',
+});
 
-    return (
-      <span
-        ref={refObject}
-        {...focusableProps}
-        className="group underline-offset-4 decoration-from-font decoration-dashed underline inline-flex items-center"
-      >
-        <span className="group-hover:bg-black/5 rounded-sm mx-[-0.1em] px-[0.1em] ">
-          {children}{' '}
-        </span>
-        <sup className="-mr-[0.2em]">
-          <Button
-            variant="icon"
-            className="p-0.5 inline [&_svg]:w-[0.85em] [&_svg]:h-[0.85em] [&_svg]:stroke-[0.18em] text-current"
-          >
-            <Icon name={IconName.Info} />
-          </Button>
-        </sup>
+const HelpTooltipTrigger = forwardRef<
+  HTMLElement,
+  PropsWithChildren<{ className?: string }>
+>(({ children, className }, ref) => {
+  const refObject = useObjectRef(ref);
+  const { focusableProps } = useFocusable({}, refObject);
+
+  return (
+    <span
+      ref={refObject}
+      {...focusableProps}
+      className={helpStyles({ className })}
+    >
+      <span className="group-hover:bg-black/5 rounded-sm mx-[-0.1em] px-[0.1em] ">
+        {children}{' '}
       </span>
-    );
-  }
-);
+      <sup className="-ml-[0.1em] -mr-[0.4em]">
+        <Button
+          variant="icon"
+          className="[font-size:inherit] -outline-offset-2 p-0 -mb-[0.4em] inline [&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:stroke-[0.18em] text-current opacity-80"
+        >
+          <Icon name={IconName.Help} />
+        </Button>
+      </sup>
+    </span>
+  );
+});
+
+const infoStyles = tv({
+  base: 'group inline-flex items-center gap-1',
+});
+
+const InfoTooltipTrigger = forwardRef<
+  HTMLElement,
+  PropsWithChildren<{ className?: string }>
+>(({ children, className }, ref) => {
+  const refObject = useObjectRef(ref);
+  const { focusableProps } = useFocusable({}, refObject);
+
+  return (
+    <span
+      ref={refObject}
+      {...focusableProps}
+      className={infoStyles({ className })}
+    >
+      {children}
+      <Button
+        variant="icon"
+        className="[font-size:inherit] p-0 inline [&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:stroke-[0.18em] text-current"
+      >
+        <Icon name={IconName.Info} />
+      </Button>
+    </span>
+  );
+});
diff --git a/libs/ui/tooltip/src/lib/TooltipContent.tsx b/libs/ui/tooltip/src/lib/TooltipContent.tsx
index e22da44..3505fe2 100644
--- a/libs/ui/tooltip/src/lib/TooltipContent.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipContent.tsx
@@ -2,16 +2,19 @@ import { ComponentProps, PropsWithChildren } from 'react';
 import {
   Tooltip as AriaTooltip,
   composeRenderProps,
+  OverlayArrow,
   Tooltip,
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
 interface TooltipContentProps {
   className?: string;
+  small?: boolean;
+  offset?: number;
 }
 
 const styles = tv({
-  base: 'max-w-sm p-4 group bg-zinc-800/90 backdrop-blur-xl border border-zinc-900/80 shadow-[inset_0_1px_0_0_theme(colors.gray.500)] text-gray-300 text-sm rounded-xl drop-shadow-xl will-change-transform',
+  base: 'max-w-sm  group  border border-zinc-900/80 text-gray-300 drop-shadow-xl will-change-transform',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200',
@@ -19,21 +22,45 @@ const styles = tv({
     isExiting: {
       true: 'animate-out fade-out placement-bottom:slide-out-to-top-0.5 placement-top:slide-out-to-bottom-0.5 placement-left:slide-out-to-right-0.5 placement-right:slide-out-to-left-0.5 ease-in duration-150',
     },
+    small: {
+      true: 'text-xs px-2 py-1 rounded-md shadow-[inset_0_0.5px_0_0_theme(colors.gray.500)] bg-zinc-800',
+      false:
+        'text-sm p-4 rounded-xl shadow-[inset_0_1px_0_0_theme(colors.gray.500)] bg-zinc-800/90 backdrop-blur-xl',
+    },
+  },
+  defaultVariants: {
+    small: false,
   },
 });
 
 export function InternalTooltipContent({
   children,
+  small,
+  offset = 10,
   ...props
-}: PropsWithChildren<ComponentProps<typeof Tooltip>>) {
+}: PropsWithChildren<
+  ComponentProps<typeof Tooltip> & Pick<TooltipContentProps, 'small'>
+>) {
   return (
     <AriaTooltip
       {...props}
-      offset={10}
+      offset={offset}
       className={composeRenderProps(props.className, (className, renderProps) =>
-        styles({ ...renderProps, className })
+        styles({ ...renderProps, className, small })
       )}
     >
+      {small && (
+        <OverlayArrow>
+          <svg
+            width={8}
+            height={8}
+            viewBox="0 0 8 8"
+            className="fill-zinc-800 stroke-zinc-900/80 group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
+          >
+            <path d="M0 0 L4 4 L8 0" />
+          </svg>
+        </OverlayArrow>
+      )}
       {children}
     </AriaTooltip>
   );
diff --git a/libs/ui/tooltip/src/lib/TooltipTrigger.tsx b/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
index 864fd7a..fb7090c 100644
--- a/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
+++ b/libs/ui/tooltip/src/lib/TooltipTrigger.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, useContext, type PropsWithChildren } from 'react';
-import { Pressable, PressResponder } from '@react-aria/interactions';
+import { Pressable, PressResponder, useHover } from '@react-aria/interactions';
 import { TooltipTriggerStateContext } from 'react-aria-components';
 
 type TooltipTriggerProps = Pick<ComponentProps<typeof Pressable>, 'children'>;
@@ -7,12 +7,17 @@ export function TooltipTrigger({
   children,
 }: PropsWithChildren<TooltipTriggerProps>) {
   const state = useContext(TooltipTriggerStateContext);
-
+  const { hoverProps } = useHover({
+    onHoverChange(isHovering) {
+      isHovering ? state.open(true) : state.close();
+    },
+  });
   return (
     <PressResponder
       onPress={() => {
         state.open();
       }}
+      {...hoverProps}
     >
       {children}
     </PressResponder>