diff --git a/apps/web/src/common/components/forms/input-formik/input-formik.component.module.css b/apps/web/src/common/components/forms/input-formik/input-formik.component.module.css
index 8e907b56..24474b45 100644
--- a/apps/web/src/common/components/forms/input-formik/input-formik.component.module.css
+++ b/apps/web/src/common/components/forms/input-formik/input-formik.component.module.css
@@ -6,7 +6,108 @@
 }
 
 .label {
-  font-size: 60%;
+  font-size: var(--fs-m);
+  margin: 0;
+}
+
+.select {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  gap: 10px;
+}
+
+.selectContainer {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.selectLabel {
+  min-width: 20ch;
+  margin: 0;
+  font-size: var(--fs-m);
+  line-height: 1.5;
+}
+
+.colorInput {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 40px;
+  padding: 0;
+  border: 1px solid var(--input-border-color);
+  background-color: var(--bg-input);
+  border-radius: var(--border-radius-xs);
+  cursor: pointer;
+  font-size: var(--fs-m);
+  line-height: 1.5em;
+  transition: all 0.2s ease;
+  color: inherit;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  accent-color: inherit;
+  box-sizing: border-box;
+}
+
+.colorInput:hover,
+.colorInput:focus,
+.colorInput:active {
+  border-color: var(--input-border-color-active);
+  background-color: var(--hover-input);
+}
+
+.colorInput:hover,
+.colorInput:focus {
+  box-shadow: 0 0 4px var(--hover-checkbox);
+}
+
+.colorInput::-webkit-color-swatch-wrapper {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.colorInput::-webkit-color-swatch {
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+  background-clip: padding-box;
+}
+
+.colorInput::-moz-color-swatch {
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.colorInput:hover {
+  border-color: var(--input-border-color-active);
+}
+
+.colorInput:focus {
+  border-color: var(--input-border-color-active);
+  box-shadow: 0 0 4px var(--hover-checkbox);
+}
+
+.colorInput::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.colorInput::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--border-radius-xs);
+}
+
+.colorInput::-moz-color-swatch {
+  border: none;
+  border-radius: var(--border-radius-xs);
 }
 
 .error {
diff --git a/apps/web/src/common/components/forms/input-formik/input-formik.component.tsx b/apps/web/src/common/components/forms/input-formik/input-formik.component.tsx
index 719bfe9f..4ae1f7c7 100644
--- a/apps/web/src/common/components/forms/input-formik/input-formik.component.tsx
+++ b/apps/web/src/common/components/forms/input-formik/input-formik.component.tsx
@@ -25,16 +25,59 @@ export const InputFormik: React.FC<InputFormikProps> = props => {
   // of error a the initial state
   const hasError = Boolean(meta && meta.touched && meta.error);
 
-  return (
+  const isColorInput = props.type === 'color';
+  const inputStyle: React.CSSProperties = {
+    flex: isColorInput ? '1 1 auto' : undefined,
+    minWidth: isColorInput ? 0 : undefined,
+    height: isColorInput ? '40px' : undefined,
+    padding: isColorInput ? '0' : undefined,
+    borderRadius: isColorInput ? 'var(--border-radius-xs)' : undefined,
+    border: isColorInput ? '1px solid var(--input-border-color)' : undefined,
+    backgroundColor: isColorInput ? 'var(--bg-input)' : undefined,
+    cursor: isColorInput ? 'pointer' : undefined,
+    fontSize: isColorInput ? 'var(--fs-m)' : undefined,
+    lineHeight: isColorInput ? '1.5em' : undefined,
+    boxSizing: isColorInput ? 'border-box' : undefined,
+    WebkitAppearance: isColorInput ? 'none' : undefined,
+    MozAppearance: isColorInput ? 'none' : undefined,
+    appearance: isColorInput ? 'none' : undefined,
+    ...props.style,
+  };
+
+  const labelStyle: React.CSSProperties | undefined = isColorInput
+    ? { minWidth: '20ch', margin: 0 }
+    : undefined;
+
+  return isColorInput ? (
+    <div className={classes.select}>
+      {label ? <p className={classes.selectLabel}>{label}</p> : null}
+      <div className={classes.selectContainer}>
+        <input
+          {...props}
+          className={classes.colorInput}
+          name={inputFieldProps.name}
+          onChange={inputFieldProps.onChange}
+          onBlur={inputFieldProps.onBlur}
+          value={inputFieldProps.value}
+          style={inputStyle}
+        />
+        <span className={classes.error}>{hasError ? meta.error : ''}</span>
+      </div>
+    </div>
+  ) : (
     <div className={classes.container}>
-      {label ? <span>{label}</span> : null}
+      {label ? (
+        <p className={classes.label} style={labelStyle}>
+          {label}
+        </p>
+      ) : null}
       <input
         {...props}
         name={inputFieldProps.name}
         onChange={inputFieldProps.onChange}
         onBlur={inputFieldProps.onBlur}
         value={inputFieldProps.value}
-        style={{ width: '100%' }}
+        style={inputStyle}
       />
       <span className={classes.error}>{hasError ? meta.error : ''}</span>
     </div>
diff --git a/apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts b/apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
index b3ee64a7..1485f40a 100644
--- a/apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
+++ b/apps/web/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
@@ -29,6 +29,7 @@ export interface RelationVm {
   fromFieldId: string;
   toFieldId: string;
   type: RelationType;
+  color?: string;  //
 }
 
 export interface NoteVm {
diff --git a/apps/web/src/pods/canvas/components/relation/components/fork.component.tsx b/apps/web/src/pods/canvas/components/relation/components/fork.component.tsx
index f327fbff..3cd54a69 100644
--- a/apps/web/src/pods/canvas/components/relation/components/fork.component.tsx
+++ b/apps/web/src/pods/canvas/components/relation/components/fork.component.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Coords } from '@/core/model';
 import { FORK_LINE_SPACING, FORK_WIDTH } from '../relation.vm';
 import classes from './fork.component.module.css';
@@ -6,11 +7,15 @@ interface Props {
   isSelected: boolean;
   forkCoords: Coords;
   drawLeftToRight: boolean;
+  relationColor?: string;
 }
 
 export const ForkComponent: React.FC<Props> = props => {
-  const { forkCoords, drawLeftToRight, isSelected } = props;
+  const { forkCoords, drawLeftToRight, isSelected, relationColor } = props;
   const direction = drawLeftToRight ? 1 : -1;
+  const relationStrokeStyle = relationColor
+    ? { stroke: relationColor }
+    : undefined;
 
   return (
     <g>
@@ -23,6 +28,7 @@ export const ForkComponent: React.FC<Props> = props => {
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
       />
       <line
         x1={forkCoords.x}
@@ -32,6 +38,7 @@ export const ForkComponent: React.FC<Props> = props => {
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
       />
       <line
         x1={forkCoords.x}
@@ -41,6 +48,7 @@ export const ForkComponent: React.FC<Props> = props => {
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
       />
     </g>
   );
diff --git a/apps/web/src/pods/canvas/components/relation/database-relation-collection.component.tsx b/apps/web/src/pods/canvas/components/relation/database-relation-collection.component.tsx
index aa0132b3..2ba35c25 100644
--- a/apps/web/src/pods/canvas/components/relation/database-relation-collection.component.tsx
+++ b/apps/web/src/pods/canvas/components/relation/database-relation-collection.component.tsx
@@ -75,6 +75,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
               endCoords={endCoords}
               isSelected={relation.id === schema.selectedElementId}
               tableWidth={fromTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH}
+              relationColor={relation.color}
             />
           );
         case 'overlapping':
@@ -91,6 +92,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
                 fromTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH
               }
               endTableWidth={toTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH}
+              relationColor={relation.color}
             />
           );
         case 'straight':
@@ -107,6 +109,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
                 fromTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH
               }
               endTableWidth={toTable.width ?? TABLE_CONST.DEFAULT_TABLE_WIDTH}
+              relationColor={relation.color}
             />
           );
       }
diff --git a/apps/web/src/pods/canvas/components/relation/database-relation-self.component.tsx b/apps/web/src/pods/canvas/components/relation/database-relation-self.component.tsx
index 3573fd35..26396465 100644
--- a/apps/web/src/pods/canvas/components/relation/database-relation-self.component.tsx
+++ b/apps/web/src/pods/canvas/components/relation/database-relation-self.component.tsx
@@ -15,6 +15,7 @@ interface DatabaseSelfRelationshipProps {
   onDoubleClick: (relationId: GUID) => void;
   isSelected: boolean;
   tableWidth: number;
+  relationColor?: string;
 }
 
 export const DatabaseRelationSelfComponent: React.FC<
@@ -29,6 +30,7 @@ export const DatabaseRelationSelfComponent: React.FC<
     onClick,
     onDoubleClick,
     tableWidth,
+    relationColor,
   } = props;
 
   // Determine the direction of the fork
@@ -72,6 +74,10 @@ export const DatabaseRelationSelfComponent: React.FC<
     }
   };
 
+  const relationStrokeStyle = relationColor
+    ? { stroke: relationColor }
+    : undefined;
+
   return (
     <svg>
       {/* Glow filter if selected */}
@@ -89,6 +95,7 @@ export const DatabaseRelationSelfComponent: React.FC<
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
         filter={isSelected ? `url(#table_glow)` : ''}
       />
 
@@ -98,6 +105,7 @@ export const DatabaseRelationSelfComponent: React.FC<
           isSelected={isSelected}
           forkCoords={{ x: originXMinusFork, y: endCoords.y }}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
@@ -105,6 +113,7 @@ export const DatabaseRelationSelfComponent: React.FC<
           isSelected={isSelected}
           forkCoords={{ x: originXMinusFork, y: startCoords.y }}
           drawLeftToRight={!isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
 
diff --git a/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-path.component.tsx b/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-path.component.tsx
index d2f63a6d..6a8a0fd1 100644
--- a/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-path.component.tsx
+++ b/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-path.component.tsx
@@ -19,6 +19,7 @@ interface DatabaseRelationshipTwoTablesProps {
   isSelected: boolean;
   startTableWidth?: number;
   endTableWidth?: number;
+  relationColor?: string;
 }
 
 export const DatabaseRelationshipTwoTablePathComponent: React.FC<
@@ -33,6 +34,7 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
   onDoubleClick,
   startTableWidth,
   endTableWidth,
+  relationColor,
 }) => {
   const isDrawLeftToRight = isDrawLeftToRightLogic(
     relationType,
@@ -40,6 +42,10 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
     endCoords
   );
 
+  const relationStrokeStyle = relationColor
+    ? { stroke: relationColor }
+    : undefined;
+
   return (
     <svg>
       {/* Glow filter if selected */}
@@ -63,6 +69,7 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
         filter={isSelected ? `url(#table_glow)` : ''}
       />
 
@@ -78,6 +85,7 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
             endTableWidth
           )}
           drawLeftToRight={!isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
@@ -91,6 +99,7 @@ export const DatabaseRelationshipTwoTablePathComponent: React.FC<
             endTableWidth
           )}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
 
diff --git a/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-straight.component.tsx b/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-straight.component.tsx
index b03f3ed0..b649e5a8 100644
--- a/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-straight.component.tsx
+++ b/apps/web/src/pods/canvas/components/relation/database-relation-two-tables-straight.component.tsx
@@ -19,6 +19,7 @@ interface DatabaseRelationshipTwoTablesProps {
   isSelected: boolean;
   startTableWidth?: number;
   endTableWidth?: number;
+  relationColor?: string;
 }
 
 export const DatabaseRelationshipTwoTablesStraightComponent: React.FC<
@@ -33,11 +34,16 @@ export const DatabaseRelationshipTwoTablesStraightComponent: React.FC<
   onDoubleClick,
   startTableWidth,
   endTableWidth,
+  relationColor,
 }) => {
   // Suppress unused parameter warnings - these are used for interface compatibility
   void startTableWidth;
   void endTableWidth;
 
+  const relationStrokeStyle = relationColor
+    ? { stroke: relationColor }
+    : undefined;
+
   // Determine the direction of the fork
   const isDrawLeftToRight = isDrawLeftToRightLogic(
     relationType,
@@ -79,6 +85,7 @@ export const DatabaseRelationshipTwoTablesStraightComponent: React.FC<
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
+        style={relationStrokeStyle}
         filter={isSelected ? `url(#table_glow)` : ''}
       />
 
@@ -88,6 +95,7 @@ export const DatabaseRelationshipTwoTablesStraightComponent: React.FC<
           isSelected={isSelected}
           forkCoords={{ x: destinationXMinusFork, y: endCoords.y }}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
@@ -95,6 +103,7 @@ export const DatabaseRelationshipTwoTablesStraightComponent: React.FC<
           isSelected={isSelected}
           forkCoords={{ x: originXMinusFork, y: startCoords.y }}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
 
diff --git a/apps/web/src/pods/edit-relation/edit-relation.business.ts b/apps/web/src/pods/edit-relation/edit-relation.business.ts
index 3d550ad3..1764fe31 100644
--- a/apps/web/src/pods/edit-relation/edit-relation.business.ts
+++ b/apps/web/src/pods/edit-relation/edit-relation.business.ts
@@ -20,6 +20,7 @@ export const mapRelationFormVmToRelationVM = (
     fromFieldId: values.fromFieldId,
     toFieldId: values.toFieldId,
     toTableId: values.toTableId,
+    color: values.color,
   };
 };
 
@@ -168,7 +169,7 @@ export const createInitialIdValues = (
   canvasSchema: DatabaseSchemaVm
 ): RelationFormVm => {
   const relation = findRelation(canvasSchema.relations, relationId);
-  const { fromFieldId, fromTableId, toFieldId, toTableId, type } = relation;
+  const { fromFieldId, fromTableId, toFieldId, toTableId, type, color } = relation;
 
   return {
     fromTableId,
@@ -176,6 +177,7 @@ export const createInitialIdValues = (
     fromFieldId,
     toFieldId,
     type,
+    color: color ?? '#ecad5a',
   };
 };
 
@@ -185,4 +187,5 @@ export const createInitialValues = (): RelationFormVm => ({
   toFieldId: '',
   toTableId: '',
   type: '1:1',
+  color: '#ecad5a',
 });
diff --git a/apps/web/src/pods/edit-relation/edit-relation.component.tsx b/apps/web/src/pods/edit-relation/edit-relation.component.tsx
index 30b915d8..f209f8ac 100644
--- a/apps/web/src/pods/edit-relation/edit-relation.component.tsx
+++ b/apps/web/src/pods/edit-relation/edit-relation.component.tsx
@@ -4,7 +4,7 @@ import { DatabaseSchemaVm } from '@/core/providers/canvas-schema';
 import { mapTablesFieldsToPkOptionVm } from './edit-relation.business';
 import { PkOptionVm } from '@/common/components';
 import { RelationFormVm } from './edit-relation.vm';
-import { DropdownFormik, TablePkPickerFormik } from '@/common/components/forms';
+import { DropdownFormik, InputFormik, TablePkPickerFormik } from '@/common/components/forms';
 
 const DROPDOWN_ORIGIN_TABLE_TITLE = 'Select origin collection';
 const DROPDOWN_DESTINATION_TABLE_TITLE = 'Select destination collection';
@@ -68,6 +68,11 @@ export const EditRelationComponent: React.FC<Props> = props => {
         selectTitle={DROPDOWN_DESTINATION_FIELD}
         disabled={!values.toTableId}
       ></TablePkPickerFormik>
+      <InputFormik
+        name="color"
+        label="Relation color"
+        type="color"
+      ></InputFormik>
     </>
   );
 };
diff --git a/apps/web/src/pods/edit-relation/edit-relation.vm.ts b/apps/web/src/pods/edit-relation/edit-relation.vm.ts
index 56cef7d6..b6558e74 100644
--- a/apps/web/src/pods/edit-relation/edit-relation.vm.ts
+++ b/apps/web/src/pods/edit-relation/edit-relation.vm.ts
@@ -4,4 +4,5 @@ export interface RelationFormVm {
   toFieldId: string;
   toTableId: string;
   type: string;
+  color: string; 
 }
diff --git a/apps/web/src/pods/edit-relation/map-relation-form.vm.spec.ts b/apps/web/src/pods/edit-relation/map-relation-form.vm.spec.ts
index 21543e31..5639400c 100644
--- a/apps/web/src/pods/edit-relation/map-relation-form.vm.spec.ts
+++ b/apps/web/src/pods/edit-relation/map-relation-form.vm.spec.ts
@@ -14,6 +14,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: '1:1',
+      color: '#000000',
     };
 
     vi.spyOn(generate, 'GenerateGUID').mockReturnValue('55');
@@ -29,6 +30,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: '1:1',
+      color: '#000000',
     });
   });
   it('Should return RelationVm and ID when passing FormRelationVm an ID', () => {
@@ -39,6 +41,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: '1:1',
+      color: '#000000',
     };
 
     const id = '33';
@@ -54,6 +57,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: '1:1',
+      color: '#000000',
     });
   });
   it('Should return type "1:M" and ID when passing FormRelationVm type "1:M"', () => {
@@ -64,6 +68,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: '1:M',
+      color: '#000000',
     };
 
     const id = '33';
@@ -79,6 +84,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: '1:M',
+      color: '#000000',
     });
   });
   it('Should return type "M:1" and ID when passing FormRelationVm type "M:1"', () => {
@@ -89,6 +95,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: 'M:1',
+      color: '#000000',
     };
 
     const id = '33';
@@ -104,6 +111,7 @@ describe('mapRelationFormVmToRelationVM', () => {
       toFieldId: '3',
       toTableId: '4',
       type: 'M:1',
+      color: '#000000',
     });
   });
 });
diff --git a/apps/web/src/pods/export/components/relation/components/database-relation-self-export.component.tsx b/apps/web/src/pods/export/components/relation/components/database-relation-self-export.component.tsx
index de0e5b5f..6c612772 100644
--- a/apps/web/src/pods/export/components/relation/components/database-relation-self-export.component.tsx
+++ b/apps/web/src/pods/export/components/relation/components/database-relation-self-export.component.tsx
@@ -10,10 +10,11 @@ interface Props {
   relationType: RelationType;
   startCoords: Coords;
   endCoords: Coords;
+  relationColor?: string;
 }
 
 export const DatabaseRelationSelfExportComponent: React.FC<Props> = props => {
-  const { relationType, startCoords, endCoords } = props;
+  const { relationType, startCoords, endCoords, relationColor } = props;
   const isDrawLeftToRight = isDrawLeftToRightLogic(
     relationType,
     startCoords,
@@ -69,7 +70,7 @@ export const DatabaseRelationSelfExportComponent: React.FC<Props> = props => {
       <path
         d={getRelationPathBasedOnType(relationType)}
         fill="none"
-        stroke={exportStylesVariables.RELATION_COLOR}
+        stroke={relationColor ?? exportStylesVariables.RELATION_COLOR}
         strokeWidth={2}
       />
 
@@ -78,12 +79,14 @@ export const DatabaseRelationSelfExportComponent: React.FC<Props> = props => {
         <ForkExportComponent
           forkCoords={{ x: originXMinusFork, y: endCoords.y }}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
         <ForkExportComponent
           forkCoords={{ x: originXMinusFork, y: startCoords.y }}
           drawLeftToRight={!isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
     </svg>
diff --git a/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-path-export.component.tsx b/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-path-export.component.tsx
index 90e1b6d9..fdaeb715 100644
--- a/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-path-export.component.tsx
+++ b/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-path-export.component.tsx
@@ -13,12 +13,13 @@ interface Props {
   relationType: RelationType;
   startCoords: Coords;
   endCoords: Coords;
+  relationColor?: string;
 }
 
 export const DatabaseRelationshipTwoTablePathExportComponent: React.FC<
   Props
 > = props => {
-  const { relationType, startCoords, endCoords } = props;
+  const { relationType, startCoords, endCoords, relationColor } = props;
 
   const isDrawLeftToRight = isDrawLeftToRightLogic(
     relationType,
@@ -41,7 +42,7 @@ export const DatabaseRelationshipTwoTablePathExportComponent: React.FC<
       <path
         d={getRelationPath(relationType, startCoords, endCoords)}
         fill="none"
-        stroke={exportStylesVariables.RELATION_COLOR}
+        stroke={relationColor ?? exportStylesVariables.RELATION_COLOR}
         strokeWidth={2}
       />
 
@@ -50,12 +51,14 @@ export const DatabaseRelationshipTwoTablePathExportComponent: React.FC<
         <ForkExportComponent
           forkCoords={getForkCoords(relationType, startCoords, endCoords)}
           drawLeftToRight={!isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
         <ForkExportComponent
           forkCoords={getForkCoords(relationType, startCoords, endCoords)}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
     </svg>
diff --git a/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-straight-export.component.tsx b/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-straight-export.component.tsx
index 92f6de88..efc109b1 100644
--- a/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-straight-export.component.tsx
+++ b/apps/web/src/pods/export/components/relation/components/database-relation-two-tables-straight-export.component.tsx
@@ -13,12 +13,13 @@ interface Props {
   relationType: RelationType;
   startCoords: Coords;
   endCoords: Coords;
+  relationColor?: string;
 }
 
 export const DatabaseRelationshipTwoTablesStraightExportComponent: React.FC<
   Props
 > = props => {
-  const { relationType, startCoords, endCoords } = props;
+  const { relationType, startCoords, endCoords, relationColor } = props;
   // Determine the direction of the fork
   const isDrawLeftToRight = isDrawLeftToRightLogic(
     relationType,
@@ -57,7 +58,7 @@ export const DatabaseRelationshipTwoTablesStraightExportComponent: React.FC<
         y1={startCoords.y}
         x2={destinationXMinusFork}
         y2={endCoords.y}
-        stroke={exportStylesVariables.RELATION_COLOR}
+        stroke={relationColor ?? exportStylesVariables.RELATION_COLOR}
         strokeWidth={2}
       />
 
@@ -66,12 +67,14 @@ export const DatabaseRelationshipTwoTablesStraightExportComponent: React.FC<
         <ForkExportComponent
           forkCoords={{ x: destinationXMinusFork, y: endCoords.y }}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
       {relationType === 'M:1' && (
         <ForkExportComponent
           forkCoords={{ x: originXMinusFork, y: startCoords.y }}
           drawLeftToRight={isDrawLeftToRight}
+          relationColor={relationColor}
         />
       )}
     </svg>
diff --git a/apps/web/src/pods/export/components/relation/components/fork-export.component.tsx b/apps/web/src/pods/export/components/relation/components/fork-export.component.tsx
index b6f6d782..21628b0c 100644
--- a/apps/web/src/pods/export/components/relation/components/fork-export.component.tsx
+++ b/apps/web/src/pods/export/components/relation/components/fork-export.component.tsx
@@ -8,11 +8,13 @@ import { exportStylesVariables } from '@/pods/export/export-variables.const';
 interface Props {
   forkCoords: Coords;
   drawLeftToRight: boolean;
+  relationColor?: string;
 }
 
 export const ForkExportComponent: React.FC<Props> = props => {
-  const { forkCoords, drawLeftToRight } = props;
+  const { forkCoords, drawLeftToRight, relationColor } = props;
   const direction = drawLeftToRight ? 1 : -1;
+  const strokeColor = relationColor ?? exportStylesVariables.RELATION_COLOR;
 
   return (
     <g>
@@ -22,7 +24,7 @@ export const ForkExportComponent: React.FC<Props> = props => {
         y1={forkCoords.y}
         x2={forkCoords.x + FORK_WIDTH * direction}
         y2={forkCoords.y}
-        stroke={exportStylesVariables.RELATION_COLOR}
+        stroke={strokeColor}
         strokeWidth={2}
       />
       <line
@@ -30,7 +32,7 @@ export const ForkExportComponent: React.FC<Props> = props => {
         y1={forkCoords.y}
         x2={forkCoords.x + FORK_WIDTH * direction}
         y2={forkCoords.y - FORK_LINE_SPACING}
-        stroke={exportStylesVariables.RELATION_COLOR}
+        stroke={strokeColor}
         strokeWidth={2}
       />
       <line
@@ -38,7 +40,7 @@ export const ForkExportComponent: React.FC<Props> = props => {
         y1={forkCoords.y}
         x2={forkCoords.x + FORK_WIDTH * direction}
         y2={forkCoords.y + FORK_LINE_SPACING}
-        stroke={exportStylesVariables.RELATION_COLOR}
+        stroke={strokeColor}
         strokeWidth={2}
       />
     </g>
diff --git a/apps/web/src/pods/export/components/relation/database-relation-collection.component.tsx b/apps/web/src/pods/export/components/relation/database-relation-collection.component.tsx
index 3fd526e3..6647c308 100644
--- a/apps/web/src/pods/export/components/relation/database-relation-collection.component.tsx
+++ b/apps/web/src/pods/export/components/relation/database-relation-collection.component.tsx
@@ -66,6 +66,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
               relationType={relation.type}
               startCoords={startCoords}
               endCoords={endCoords}
+              relationColor={relation.color}
             />
           );
         case 'overlapping':
@@ -74,6 +75,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
               relationType={relation.type}
               startCoords={startCoords}
               endCoords={endCoords}
+              relationColor={relation.color}
             />
           );
         case 'straight':
@@ -82,6 +84,7 @@ export const DatabaseRelationCollectionComponent: React.FC<
               relationType={relation.type}
               startCoords={startCoords}
               endCoords={endCoords}
+              relationColor={relation.color}
             />
           );
       }
diff --git a/package-lock.json b/package-lock.json
index a61e65ee..0078d15b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -824,7 +824,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -848,7 +847,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1382,7 +1380,6 @@
       "resolved": "https://registry.npmjs.org/@lemoncode/fonk/-/fonk-1.5.4.tgz",
       "integrity": "sha512-PUxmdfrQrtrVxh2lqXaVbpOV8PHkiko9ff/H4ZoMxchH39khD2iuGcTm0PnYM7qNDWexc69hyk/TqL/kAQSsgA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       }
@@ -2760,7 +2757,6 @@
       "integrity": "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2783,7 +2779,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -2890,7 +2885,6 @@
       "integrity": "sha512-q3PchVhZINX23Pv+RERgAtDlp6wzVkID/smOPnZ5YGWpeWUe3jMNYppeVh15j4il3G7JIJty1d1Kicpm0HSMig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/browser": "4.1.4",
         "@vitest/mocker": "4.1.4",
@@ -2915,7 +2909,6 @@
       "integrity": "sha512-x7FptB5oDruxNPDNY2+S8tCh0pcq7ymCe1gTHcsp733jYjrJl8V1gMUlVysuCD9Kz46Xz9t1akkv08dPcYDs1w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@bcoe/v8-coverage": "^1.0.2",
         "@vitest/utils": "4.1.4",
@@ -3045,7 +3038,6 @@
       "integrity": "sha512-EgFR7nlj5iTDYZYCvavjFokNYwr3c3ry0sFiCg+N7B233Nwp+NNx7eoF/XvMWDCKY71xXAG3kFkt97ZHBJVL8A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/utils": "4.1.4",
         "fflate": "^0.8.2",
@@ -4656,7 +4648,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -7921,7 +7912,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7934,7 +7924,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -9396,7 +9385,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -9484,7 +9472,6 @@
       "integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9992,7 +9979,6 @@
       "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -10819,7 +10805,6 @@
       "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },