diff --git a/src/components/CardWithSideImage/cmp.builder.tsx b/src/components/CardWithSideImage/cmp.builder.tsx
index 684097f..8daee88 100644
--- a/src/components/CardWithSideImage/cmp.builder.tsx
+++ b/src/components/CardWithSideImage/cmp.builder.tsx
@@ -1,7 +1,49 @@
 import { Builder, withChildren } from "@builder.io/react";
 import { DEFAULT_PROPS } from "@/constants/builderProps";
-import CardWithSideImage from ".";
-import { BACKGROUND_COLORS } from "@/constants/builderEnums";
+import {
+  ALIGN_ITEMS_VALUES,
+  BACKGROUND_COLORS,
+  JUSTIFY_CONTENT_VALUES,
+} from "@/constants/builderEnums";
+import { CardWithSideImage } from "@aleph-front/core";
+type AlignProps =
+  | "normal"
+  | "stretch"
+  | "center"
+  | "start"
+  | "end"
+  | "flex-start"
+  | "flex-end"
+  | "baseline"
+  | "first baseline"
+  | "last baseline"
+  | "safe center"
+  | "unsafe center"
+  | "inherit"
+  | "initial"
+  | "revert"
+  | "revert-layer"
+  | "unset";
+type JustifyProps =
+  | "normal"
+  | "center"
+  | "start"
+  | "end"
+  | "flex-start"
+  | "flex-end"
+  | "left"
+  | "right"
+  | "space-between"
+  | "space-around"
+  | "space-evenly"
+  | "stretch"
+  | "safe center"
+  | "unsafe center"
+  | "inherit"
+  | "initial"
+  | "revert"
+  | "revert-layer"
+  | "unset";
 
 Builder.registerComponent(withChildren(CardWithSideImage), {
   ...DEFAULT_PROPS,
@@ -29,6 +71,30 @@ Builder.registerComponent(withChildren(CardWithSideImage), {
       enum: ["left", "right"],
       defaultValue: "left",
     },
+    {
+      name: "alignCard",
+      type: "string",
+      enum: ALIGN_ITEMS_VALUES,
+      defaultValue: "center",
+    },
+    {
+      name: "justifyCard",
+      type: "string",
+      enum: JUSTIFY_CONTENT_VALUES,
+      defaultValue: "center",
+    },
+    {
+      name: "alignImage",
+      type: "string",
+      enum: ALIGN_ITEMS_VALUES,
+      defaultValue: "center",
+    },
+    {
+      name: "justifyImage",
+      type: "string",
+      enum: JUSTIFY_CONTENT_VALUES,
+      defaultValue: "center",
+    },
     {
       name: "cardBackgroundColor",
       type: "string",
diff --git a/src/components/CardWithSideImage/cmp.tsx b/src/components/CardWithSideImage/cmp.tsx
deleted file mode 100644
index b436929..0000000
--- a/src/components/CardWithSideImage/cmp.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-
-import React from "react";
-import { CardWithSideImageProps } from "./types";
-import { Col, Row } from "@aleph-front/core";
-import Image from "next/image";
-
-export const CardWithSideImage = ({
-  children,
-  imageSrc,
-  imageAlt,
-  imagePosition,
-  cardBackgroundColor,
-  reverseColumnsWhenStacked,
-}: CardWithSideImageProps) => {
-  const imageCmp = (
-    <Image src={imageSrc} alt={imageAlt} fill={true} tw="relative!" />
-  );
-
-  const cardCmp = (
-    <Col tw="flex items-center">
-      <div className={cardBackgroundColor} tw="p-6">
-        {children}
-      </div>
-    </Col>
-  );
-
-  return (
-    <>
-      {imagePosition === "left" ? (
-        <Row xs={1} md={2} gap="1.5rem">
-          {reverseColumnsWhenStacked ? (
-            <Col tw="order-last md:order-first">{imageCmp}</Col>
-          ) : (
-            <Col>{imageCmp}</Col>
-          )}
-
-          {cardCmp}
-        </Row>
-      ) : (
-        <Row xs={1} md={2} gap="1.5rem">
-          {cardCmp}
-          {reverseColumnsWhenStacked ? (
-            <Col tw="order-first md:order-last">{imageCmp}</Col>
-          ) : (
-            <Col>{imageCmp}</Col>
-          )}
-        </Row>
-      )}
-    </>
-  );
-};
-
-export default CardWithSideImage;
diff --git a/src/components/CardWithSideImage/types.ts b/src/components/CardWithSideImage/types.ts
deleted file mode 100644
index 7bf5bbc..0000000
--- a/src/components/CardWithSideImage/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type CardWithSideImageProps = {
-  children: React.ReactNode;
-  imageSrc: string;
-  imageAlt: string;
-  imagePosition: string;
-  cardBackgroundColor: string;
-  reverseColumnsWhenStacked: boolean;
-};
diff --git a/src/constants/builderEnums.tsx b/src/constants/builderEnums.tsx
index 7144f63..7f4b89f 100644
--- a/src/constants/builderEnums.tsx
+++ b/src/constants/builderEnums.tsx
@@ -209,3 +209,45 @@ export const ONE_TO_TWELVE = [
   "11",
   "12",
 ];
+
+export const JUSTIFY_CONTENT_VALUES = [
+  "normal",
+  "center",
+  "start",
+  "end",
+  "flex-start",
+  "flex-end",
+  "left",
+  "right",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch",
+  "safe center",
+  "unsafe center",
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset",
+];
+
+export const ALIGN_ITEMS_VALUES = [
+  "normal",
+  "stretch",
+  "center",
+  "start",
+  "end",
+  "flex-start",
+  "flex-end",
+  "baseline",
+  "first baseline",
+  "last baseline",
+  "safe center",
+  "unsafe center",
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset",
+];