diff --git a/services/frontend/src/components/Record.tsx b/services/frontend/src/components/Record.tsx
index b273fe7..058ef80 100644
--- a/services/frontend/src/components/Record.tsx
+++ b/services/frontend/src/components/Record.tsx
@@ -1,25 +1,38 @@
-import { Fragment, FunctionComponent, ReactElement, useCallback } from "react";
+import {
+  Fragment,
+  FunctionComponent,
+  ReactElement,
+  useCallback,
+  useMemo
+} from "react";
 import { styled } from "@mui/joy";
 import IconButton from "@mui/joy/IconButton";
 import { MinusSmIcon } from "@heroicons/react/solid";
 import TextField from "./global/FormElements/TextField";
 import Toggle from "./global/FormElements/Toggle";
+import Records, { IRecordsProps } from "./Records";
 
 export interface IFieldType {
   name: string;
-  placeholder: string;
+  placeholder?: string;
   required?: boolean;
-  type: "text" | "toggle";
-  options?: {
-    text: string;
-    value: string;
-  }[];
+  type: "text" | "toggle" | "records";
+  options?:
+    | {
+        text: string;
+        value: string;
+      }[]
+    | IRecordsProps;
 }
 
 export interface IRecordProps {
   fields: IFieldType[];
   index: number;
   onRemove: (index: number) => void;
+  direction?: "column" | "row";
+  renderLayout?: (elements: ReactElement[]) => ReactElement;
+  renderField?: (element: ReactElement, field: IFieldType) => ReactElement;
+  renderRemove?: (element: ReactElement) => ReactElement;
 }
 
 const Root = styled("div")`
@@ -28,6 +41,8 @@ const Root = styled("div")`
   justify-content: flex-start;
   align-items: flex-start;
   column-gap: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+
   @media (max-width: 768px) {
     column-gap: ${({ theme }) => theme.spacing(1)};
   }
@@ -38,37 +53,74 @@ const RemoveButton = styled(IconButton)``;
 const Record: FunctionComponent<IRecordProps> = (
   props: IRecordProps
 ): ReactElement => {
-  const { fields, index, onRemove } = props;
+  const { fields, index, onRemove, renderLayout, renderField, renderRemove } =
+    props;
 
   const handleRemove = useCallback(() => {
     onRemove(index);
   }, [index, onRemove]);
 
+  const renderLayoutWrapper = useMemo(
+    () => renderLayout || ((elements: ReactElement[]) => <>{elements}</>),
+    [renderLayout]
+  );
+
+  const renderFieldWrapper = useMemo(
+    () => renderField || ((element: ReactElement) => element),
+    [renderField]
+  );
+
+  const renderRemoveWrapper = useMemo(
+    () => renderRemove || ((element: ReactElement) => element),
+    [renderRemove]
+  );
+
   return (
     <Root>
-      {fields.map(({ type, name, placeholder, required, options }) => (
-        <Fragment key={name}>
-          {type === "text" && (
-            <TextField
-              id={name}
-              name={name}
-              placeholder={placeholder + (required ? "*" : "")}
-              required={required}
-            />
-          )}
-          {type === "toggle" && (
-            <Toggle name={name} label={placeholder} options={options || []} />
-          )}
-        </Fragment>
-      ))}
-      <RemoveButton
-        variant="soft"
-        size="sm"
-        color="danger"
-        onClick={handleRemove}
-      >
-        <MinusSmIcon className="h-5 w-5" />
-      </RemoveButton>
+      {renderLayoutWrapper(
+        fields.map((field) => (
+          <Fragment key={field.name}>
+            {renderFieldWrapper(
+              <>
+                {field.type === "text" && (
+                  <TextField
+                    id={field.name}
+                    name={field.name}
+                    placeholder={
+                      field.placeholder && !(field as any).label
+                        ? field.placeholder + (field.required ? "*" : "")
+                        : ""
+                    }
+                    label={(field as any).label}
+                    required={field.required}
+                  />
+                )}
+                {field.type === "toggle" && (
+                  <Toggle
+                    name={field.name}
+                    label={field.placeholder || ""}
+                    options={(field.options as any) || []}
+                  />
+                )}
+                {field.type === "records" && (
+                  <Records {...(field.options as any)} />
+                )}
+              </>,
+              field
+            )}
+          </Fragment>
+        ))
+      )}
+      {renderRemoveWrapper(
+        <RemoveButton
+          variant="soft"
+          size="sm"
+          color="danger"
+          onClick={handleRemove}
+        >
+          <MinusSmIcon className="h-5 w-5" />
+        </RemoveButton>
+      )}
     </Root>
   );
 };