diff --git a/src/components/ui/SchemaRenderer.tsx b/src/components/ui/SchemaRenderer.tsx
index d06e915..68ef9f6 100644
--- a/src/components/ui/SchemaRenderer.tsx
+++ b/src/components/ui/SchemaRenderer.tsx
@@ -12,30 +12,39 @@ type SchemaRendererProps = {
 const SchemaRenderer = (props: SchemaRendererProps) => {
 	const { schema, errors, register } = props;
 
-	return schema.fields.map((field, index) => {
-		if (field.type === "field") {
-			return (
-				<InputField
-					key={`key-${field.accessorKey}`}
-					register={register}
-					labelText={field.fieldName}
-					htmlFor={field.accessorKey}
-					type={field.dataType}
-					validation={field.validation}
-					error={errors[field.accessorKey]}
-				/>
-			);
-		}
+	return (
+		<div
+			id="group-container"
+			className={`grid ${
+				schema.orientation === "horizontal" ? "grid-cols-3" : "grid-rows-1"
+			} gap-[10px]`}
+		>
+			{schema.fields.map((field, index) => {
+				if (field.type === "field") {
+					return (
+						<InputField
+							key={`key-${field.accessorKey}`}
+							register={register}
+							labelText={field.fieldName}
+							htmlFor={field.accessorKey}
+							type={field.dataType}
+							validation={field.validation}
+							error={errors[field.accessorKey]}
+						/>
+					);
+				}
 
-		return (
-			<SchemaRenderer
-				key={`key-${field.type}-${index}`}
-				schema={field}
-				errors={errors}
-				register={register}
-			/>
-		);
-	});
+				return (
+					<SchemaRenderer
+						schema={field}
+						errors={errors}
+						register={register}
+						key={`group-container-${index}`}
+					/>
+				);
+			})}
+		</div>
+	);
 };
 
 export default SchemaRenderer;
diff --git a/src/interfaces/group.ts b/src/interfaces/group.ts
index 4e83f8f..a271351 100644
--- a/src/interfaces/group.ts
+++ b/src/interfaces/group.ts
@@ -3,10 +3,12 @@ import { FieldTypeDef } from "./field";
 
 type GroupFieldType = {
 	type: "group";
+	orientation: "horizontal" | "vertical";
 	fields: (z.infer<typeof FieldTypeDef> | GroupFieldType)[];
 };
 
 export const GroupTypeDef: z.ZodType<GroupFieldType> = z.object({
 	type: z.literal("group"),
+	orientation: z.union([z.literal("horizontal"), z.literal("vertical")]),
 	fields: z.array(z.union([FieldTypeDef, z.lazy(() => GroupTypeDef)])),
 });
diff --git a/src/schemas/forms/personal_info.json b/src/schemas/forms/personal_info.json
index 4666aca..dc7f45a 100644
--- a/src/schemas/forms/personal_info.json
+++ b/src/schemas/forms/personal_info.json
@@ -1,5 +1,6 @@
 {
     "type": "group",
+    "orientation": "horizontal",
     "fields": [
         {
             "type": "field",
@@ -33,6 +34,7 @@
         },
         {
             "type": "group",
+            "orientation": "vertical",
             "fields": [
                 {
                     "type": "field",