diff --git a/packages/app-store/hitpay/components/KeyInput.tsx b/packages/app-store/hitpay/components/KeyInput.tsx
index de829c0dee..8e560b4908 100644
--- a/packages/app-store/hitpay/components/KeyInput.tsx
+++ b/packages/app-store/hitpay/components/KeyInput.tsx
@@ -40,143 +40,144 @@ const Addon = ({ children, className, error }: AddonProps) => (
   </div>
 );
 
-export const KeyField = forwardRef<HTMLInputElement, InputFieldProps & { defaultValue: string }>(
-  function KeyField(props, ref) {
-    const id = useId();
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const [currentValue, setCurrentValue] = useState<string>("");
-    const toggleIsPasswordVisible = useCallback(
-      () => setIsPasswordVisible(!isPasswordVisible),
-      [isPasswordVisible, setIsPasswordVisible]
-    );
+export const KeyField: React.FC<InputFieldProps & { defaultValue: string }> = forwardRef<
+  HTMLInputElement,
+  InputFieldProps & { defaultValue: string }
+>(function KeyField(props, ref) {
+  const id = useId();
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [currentValue, setCurrentValue] = useState<string>("");
+  const toggleIsPasswordVisible = useCallback(
+    () => setIsPasswordVisible(!isPasswordVisible),
+    [isPasswordVisible, setIsPasswordVisible]
+  );
 
-    const { t: _t, isLocaleReady, i18n } = useLocale();
-    const t = props.t || _t;
-    const name = props.name || "";
-    const {
-      label = t(name),
-      labelProps,
-      labelClassName,
-      LockedIcon,
-      placeholder = isLocaleReady && i18n.exists(`${name}_placeholder`) ? t(`${name}_placeholder`) : "",
-      className,
-      addOnLeading,
-      addOnClassname,
-      inputIsFullWidth,
-      labelSrOnly,
-      noLabel,
-      containerClassName,
-      readOnly,
-      showAsteriskIndicator,
-      defaultValue,
-      ...passThrough
-    } = props;
+  const { t: _t, isLocaleReady, i18n } = useLocale();
+  const t = props.t || _t;
+  const name = props.name || "";
+  const {
+    label = t(name),
+    labelProps,
+    labelClassName,
+    LockedIcon,
+    placeholder = isLocaleReady && i18n.exists(`${name}_placeholder`) ? t(`${name}_placeholder`) : "",
+    className,
+    addOnLeading,
+    addOnClassname,
+    inputIsFullWidth,
+    labelSrOnly,
+    noLabel,
+    containerClassName,
+    readOnly,
+    showAsteriskIndicator,
+    defaultValue,
+    ...passThrough
+  } = props;
 
-    useEffect(() => {
-      if (currentValue.trim().length === 0) {
-        setIsPasswordVisible(true);
-      }
-    }, [currentValue]);
+  useEffect(() => {
+    if (currentValue.trim().length === 0) {
+      setIsPasswordVisible(true);
+    }
+  }, [currentValue]);
 
-    useEffect(() => {
-      setCurrentValue(defaultValue);
-      if (defaultValue.length > 0) {
-        setIsPasswordVisible(false);
-      }
-    }, [defaultValue]);
+  useEffect(() => {
+    setCurrentValue(defaultValue);
+    if (defaultValue.length > 0) {
+      setIsPasswordVisible(false);
+    }
+  }, [defaultValue]);
 
-    const getHiddenKey = (): string => {
-      let hiddenKey = currentValue;
-      const length = currentValue.length;
-      if (length > 6) {
-        const start = currentValue.slice(0, 3);
-        const end = currentValue.slice(length - 3);
-        hiddenKey = `${start}${"*".repeat(length - 6)}${end}`;
-      }
+  const getHiddenKey = (): string => {
+    let hiddenKey = currentValue;
+    const length = currentValue.length;
+    if (length > 6) {
+      const start = currentValue.slice(0, 3);
+      const end = currentValue.slice(length - 3);
+      hiddenKey = `${start}${"*".repeat(length - 6)}${end}`;
+    }
 
-      return hiddenKey;
-    };
+    return hiddenKey;
+  };
 
-    const onInput = (event: FormEvent<HTMLInputElement>) => {
-      const target = event.target as HTMLInputElement;
-      const fullValue = target.value;
-      setCurrentValue(fullValue);
-      target.value = fullValue;
-    };
+  const onInput = (event: FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const fullValue = target.value;
+    setCurrentValue(fullValue);
+    target.value = fullValue;
+  };
 
-    return (
-      <div className={classNames(containerClassName)}>
-        {!!label && !noLabel && (
-          <Skeleton
-            as={Label}
-            htmlFor={id}
-            loadingClassName="w-16"
-            {...labelProps}
-            className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
-            {label}
-            {showAsteriskIndicator && !readOnly && passThrough.required ? (
-              <span className="text-default ml-1 font-medium">*</span>
-            ) : null}
-            {LockedIcon}
-          </Skeleton>
-        )}
+  return (
+    <div className={classNames(containerClassName)}>
+      {!!label && !noLabel && (
+        <Skeleton
+          as={Label}
+          htmlFor={id}
+          loadingClassName="w-16"
+          {...labelProps}
+          className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
+          {label}
+          {showAsteriskIndicator && !readOnly && passThrough.required ? (
+            <span className="text-default ml-1 font-medium">*</span>
+          ) : null}
+          {LockedIcon}
+        </Skeleton>
+      )}
 
-        <div
-          dir="ltr"
-          className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md transition focus-within:outline-none focus-within:ring-2">
-          {addOnLeading && (
-            <Addon className={classNames("ltr:rounded-l-md rtl:rounded-r-md", addOnClassname)}>
-              {addOnLeading}
-            </Addon>
-          )}
-          <Input
-            id={id}
-            type="text"
-            placeholder={placeholder}
-            isFullWidth={inputIsFullWidth}
-            className={classNames(
-              className,
-              "disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
-              addOnLeading && "rounded-l-none border-l-0",
-              isPasswordVisible && "inline-block",
-              !isPasswordVisible && "hidden",
-              "!my-0 !ring-0"
-            )}
-            {...passThrough}
-            ref={ref}
-            onInput={onInput}
-          />
-          <Input
-            type="text"
-            isFullWidth={inputIsFullWidth}
-            className={classNames(
-              className,
-              "disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
-              addOnLeading && "rounded-l-none border-l-0",
-              !isPasswordVisible && "inline-block",
-              isPasswordVisible && "hidden",
-              "!my-0 !ring-0"
-            )}
-            disabled
-            value={getHiddenKey()}
-          />
-          <Addon className={classNames("ltr:rounded-r-md rtl:rounded-l-md", addOnClassname)}>
-            <button
-              className="text-emphasis h-9"
-              tabIndex={-1}
-              type="button"
-              onClick={() => toggleIsPasswordVisible()}>
-              {isPasswordVisible ? (
-                <Icon name="eye-off" className="h-4 w-4 stroke-[2.5px]" />
-              ) : (
-                <Icon name="eye" className="h-4 w-4 stroke-[2.5px]" />
-              )}
-            </button>
+      <div
+        dir="ltr"
+        className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md transition focus-within:outline-none focus-within:ring-2">
+        {addOnLeading && (
+          <Addon className={classNames("ltr:rounded-l-md rtl:rounded-r-md", addOnClassname)}>
+            {addOnLeading}
           </Addon>
-        </div>
+        )}
+        <Input
+          id={id}
+          type="text"
+          placeholder={placeholder}
+          isFullWidth={inputIsFullWidth}
+          className={classNames(
+            className,
+            "disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
+            addOnLeading && "rounded-l-none border-l-0",
+            isPasswordVisible && "inline-block",
+            !isPasswordVisible && "hidden",
+            "!my-0 !ring-0"
+          )}
+          {...passThrough}
+          ref={ref}
+          onInput={onInput}
+        />
+        <Input
+          type="text"
+          isFullWidth={inputIsFullWidth}
+          className={classNames(
+            className,
+            "disabled:bg-subtle disabled:hover:border-subtle mb-0 rounded-r-none border-r-0 disabled:cursor-not-allowed",
+            addOnLeading && "rounded-l-none border-l-0",
+            !isPasswordVisible && "inline-block",
+            isPasswordVisible && "hidden",
+            "!my-0 !ring-0"
+          )}
+          disabled
+          value={getHiddenKey()}
+        />
+        <Addon className={classNames("ltr:rounded-r-md rtl:rounded-l-md", addOnClassname)}>
+          <button
+            className="text-emphasis h-9"
+            tabIndex={-1}
+            type="button"
+            onClick={() => toggleIsPasswordVisible()}>
+            {isPasswordVisible ? (
+              <Icon name="eye-off" className="h-4 w-4 stroke-[2.5px]" />
+            ) : (
+              <Icon name="eye" className="h-4 w-4 stroke-[2.5px]" />
+            )}
+          </button>
+        </Addon>
       </div>
-    );
-  }
-);
+    </div>
+  );
+});
 
 export default KeyField;
diff --git a/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx b/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx
index c5370f7ae4..48ec8d4ed4 100644
--- a/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx
@@ -1,23 +1,27 @@
 "use client";
 
-import type { GetServerSidePropsContext } from "next";
-import React from "react";
+import type { GetServerSidePropsContext, GetServerSideProps } from "next";
+import type { ReactElement, ReactNode, ComponentType } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
-import type { AppPrisma, AppSsrInit, AppUser } from "@calcom/types/AppGetServerSideProps";
-
-import type { AppProps } from "@lib/app-providers";
 
 import RoutingFormsRoutingConfig from "../app-routing.config";
 
 const DEFAULT_ROUTE = "forms";
 
-type GetServerSidePropsRestArgs = [AppPrisma, AppUser, AppSsrInit];
-type Component = {
-  default: React.ComponentType & Pick<AppProps["Component"], "getLayout">;
-  getServerSideProps?: (context: GetServerSidePropsContext, ...rest: GetServerSidePropsRestArgs) => void;
+type ComponentWithLayout = ComponentType & {
+  getLayout?: (page: ReactElement) => ReactNode;
 };
+
+type Component = {
+  default: ComponentWithLayout;
+  getServerSideProps?: (
+    context: GetServerSidePropsContext,
+    ...rest: Parameters<GetServerSideProps>
+  ) => ReturnType<GetServerSideProps>;
+};
+
 const getComponent = (route: string): Component => {
   return (RoutingFormsRoutingConfig as unknown as Record<string, Component>)[route];
 };