diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html b/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html
index 587c202..a96ffe9 100644
--- a/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html
+++ b/print_designer/print_designer/page/print_designer/jinja/macros/spantag.html
@@ -15,7 +15,11 @@
         {%- set value = _(frappe.db.get_value(field.doctype, doc[field.parentField], field.fieldname)) -%}
         {{ frappe.format(value, {'fieldtype': field.fieldtype, 'options': field.options}) }}
     {%- elif row -%}
+    {%- if field.fieldtype == "Image" and row.get(field['options']) -%}
+        <img class="print-item-image" src="{{ row.get(field['options']) }}" alt="">
+    {%- else -%}
         {{row.get_formatted(field.fieldname)}}
+    {%- endif -%}
     {%- else -%}
         {{doc.get_formatted(field.fieldname)}}
     {%- endif -%}
diff --git a/print_designer/public/images/print-designer-logo.svg b/print_designer/public/images/print-designer-logo.svg
index 9517a34..ee3f5ce 100644
--- a/print_designer/public/images/print-designer-logo.svg
+++ b/print_designer/public/images/print-designer-logo.svg
@@ -1,26 +1,18 @@
 <svg width="117" height="117" viewBox="0 0 117 117" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_104_19)">
-<path d="M94 0H23C10.2975 0 0 10.2975 0 23V94C0 106.703 10.2975 117 23 117H94C106.703 117 117 106.703 117 94V23C117 10.2975 106.703 0 94 0Z" fill="url(#paint0_linear_104_19)"/>
-<path d="M81 26H36.43V16H71L81 26Z" fill="#78673B"/>
-<path d="M81 36V26H71V36H81Z" fill="#78673B"/>
-<path d="M91 75.99H101V45.99H91V75.99Z" fill="#78673B"/>
-<path d="M16 75.99H26L26 45.99H16L16 75.99Z" fill="#78673B"/>
-<path d="M47 66H36V101H47V66Z" fill="#78673B"/>
-<path d="M81 66H71V101H81V66Z" fill="#78673B"/>
-<path d="M71.01 101V91H46.44V101H71.01Z" fill="#78673B"/>
-<path d="M101 46H16C16 43.3478 17.0536 40.8043 18.9289 38.9289C20.8043 37.0536 23.3478 36 26 36H91C92.3132 36 93.6136 36.2587 94.8268 36.7612C96.0401 37.2638 97.1425 38.0003 98.0711 38.9289C98.9997 39.8575 99.7362 40.9599 100.239 42.1732C100.741 43.3864 101 44.6868 101 46Z" fill="#78673B"/>
-<path d="M36.43 76V86H25.35C22.8121 85.8347 20.4325 84.7086 18.6955 82.8508C16.9585 80.9931 15.9946 78.5433 16 76H36.43Z" fill="#78673B"/>
-<path d="M101 76V76.53C100.875 78.9823 99.8514 81.3029 98.1253 83.0493C96.3991 84.7958 94.0907 85.846 91.64 86H81V76H101Z" fill="#78673B"/>
-<path d="M34 56V51H29V56H34Z" fill="#78673B"/>
-<path d="M36 66L36 71L81 71L81 66L36 66Z" fill="#78673B"/>
+<mask id="mask0_1458_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="117" height="117">
+<path d="M117 0H0V117H117V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1458_2)">
+<path d="M94 0H23C10.2975 0 0 10.2975 0 23V94C0 106.703 10.2975 117 23 117H94C106.703 117 117 106.703 117 94V23C117 10.2975 106.703 0 94 0Z" fill="#7B4B57"/>
+<path d="M81 31H36.43V21H71L81 31Z" fill="#FDFAED"/>
+<path d="M81 41V31H71V41H81Z" fill="#FDFAED"/>
+<path d="M88 76H98V51H88V76Z" fill="#FDFAED"/>
+<path d="M20 76H30V51H20V76Z" fill="#FDFAED"/>
+<path d="M47 74H36V98H47V74Z" fill="#FDFAED"/>
+<path d="M81 74H71V98H81V74Z" fill="#FDFAED"/>
+<path d="M71.01 98V88H46.44V98H71.01Z" fill="#FDFAED"/>
+<path d="M98 51H20C20 48.3478 20.9668 45.8043 22.6877 43.9289C24.4087 42.0536 26.7427 41 29.1765 41H88.8235C90.0286 41 91.2219 41.2587 92.3352 41.7612C93.4486 42.2638 94.4602 43.0003 95.3123 43.9289C96.1644 44.8575 96.8403 45.9599 97.3017 47.1732C97.7623 48.3864 98 49.6868 98 51Z" fill="#FDFAED"/>
+<path d="M36 76V86H27.3226C25.335 85.8347 23.4714 84.7086 22.111 82.8508C20.7507 80.9931 19.9958 78.5433 20 76H36Z" fill="#FDFAED"/>
+<path d="M98 76V76.53C97.8938 78.9823 97.0237 81.3029 95.5565 83.0493C94.0892 84.7958 92.1271 85.846 90.044 86H81V76H98Z" fill="#FDFAED"/>
 </g>
-<defs>
-<linearGradient id="paint0_linear_104_19" x1="58.5" y1="117" x2="58.5" y2="0" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F9F3E5"/>
-<stop offset="1" stop-color="#F9F3E5"/>
-</linearGradient>
-<clipPath id="clip0_104_19">
-<rect width="117" height="117" fill="white"/>
-</clipPath>
-</defs>
 </svg>
diff --git a/print_designer/public/js/print_designer/App.vue b/print_designer/public/js/print_designer/App.vue
index 248d929..8694a5e 100644
--- a/print_designer/public/js/print_designer/App.vue
+++ b/print_designer/public/js/print_designer/App.vue
@@ -111,8 +111,8 @@ watchEffect(() => {
 	justify-content: space-between;
 	margin: 0;
 	cursor: default;
-	--primary: #6f5f35;
-	--primary-color: #6f5f35;
+	--primary: #7b4b57;
+	--primary-color: #7b4b57;
 	.app-sections {
 		flex: 1;
 		height: calc(100vh - var(--navbar-height));
diff --git a/print_designer/public/js/print_designer/PropertiesPanelState.js b/print_designer/public/js/print_designer/PropertiesPanelState.js
index f631fd7..c9e9b3d 100644
--- a/print_designer/public/js/print_designer/PropertiesPanelState.js
+++ b/print_designer/public/js/print_designer/PropertiesPanelState.js
@@ -704,6 +704,7 @@ export const createPropertiesPanel = () => {
 									fieldtype: "Int",
 									label: "No",
 									options: undefined,
+									tableName: currentEL["table"],
 								};
 								if (value && currentEL) {
 									currentEL["table"] = MainStore.metaFields.find(
@@ -755,6 +756,9 @@ export const createPropertiesPanel = () => {
 														dlKeys[index]
 													],
 												];
+												col.dynamicContent.forEach((dc) => {
+													dc.tableName = currentEL["table"].fieldname;
+												});
 												col.label =
 													col.dynamicContent[0].label ||
 													col.dynamicContent[0].fieldname;
diff --git a/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue b/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
index 1ce3d5a..5edd3b5 100644
--- a/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
@@ -62,6 +62,7 @@
 <script setup>
 import { useMainStore } from "../../store/MainStore";
 import { ref, watch, onMounted } from "vue";
+import { getFormattedValue } from "../../utils";
 
 const selectDynamicText = (isLabel = false) => {
 	props.field.labelStyleEditing = isLabel;
@@ -101,7 +102,7 @@ const props = defineProps({
 });
 
 const parsedValue = ref("");
-const row = ref({});
+const row = ref(null);
 
 onMounted(() => {
 	watch(
@@ -116,43 +117,6 @@ onMounted(() => {
 	);
 });
 
-const parseJinja = async () => {
-	if (props.field.value != "" && props.field.parseJinja) {
-		try {
-			// call render_user_text_withdoc method using frappe.call and return the result
-			const MainStore = useMainStore();
-			let result = await frappe.call({
-				method: "print_designer.print_designer.page.print_designer.print_designer.render_user_text_withdoc",
-				args: {
-					string: props.field.value,
-					doctype: MainStore.doctype,
-					docname: MainStore.currentDoc,
-					row: row.value,
-					send_to_jinja: MainStore.mainParsedJinjaData || {},
-				},
-			});
-			result = result.message;
-			if (result.success) {
-				parsedValue.value = result.message;
-			} else {
-				console.error("Error From User Provided Jinja String\n\n", result.error);
-			}
-		} catch (error) {
-			console.error("Error in Jinja Template\n", { value_string: props.field.value, error });
-			frappe.show_alert(
-				{
-					message: "Unable Render Jinja Template. Please Check Console",
-					indicator: "red",
-				},
-				5
-			);
-			parsedValue.value = props.field.value;
-		}
-	} else {
-		parsedValue.value = props.field.value;
-	}
-};
-
 watch(
 	() => [
 		props.field.value,
@@ -162,39 +126,7 @@ watch(
 		row.value,
 	],
 	async () => {
-		const isDataAvailable = props.table
-			? row.value
-			: Object.keys(MainStore.docData).length > 0;
-		if (props.field.is_static) {
-			if (props.field.parseJinja) {
-				parseJinja();
-				return;
-			}
-			parsedValue.value = props.field.value;
-			return;
-		} else if (props.table) {
-			if (isDataAvailable && typeof row.value[props.field.fieldname] != "undefined") {
-				parsedValue.value = frappe.format(
-					row.value[props.field.fieldname],
-					{ fieldtype: props.field.fieldtype, options: props.field.options },
-					{ inline: true },
-					row.value
-				);
-			} else {
-				parsedValue.value =
-					["Image, Attach Image"].indexOf(props.field.fieldtype) != -1
-						? null
-						: `{{ ${props.field.fieldname} }}`;
-			}
-			return;
-		} else {
-			parsedValue.value =
-				props.field.value ||
-				`{{ ${props.field.parentField ? props.field.parentField + "." : ""}${
-					props.field.fieldname
-				} }}`;
-			return;
-		}
+		parsedValue.value = await getFormattedValue(props.field, row);
 	},
 	{ immediate: true, deep: true }
 );
diff --git a/print_designer/public/js/print_designer/components/base/BaseTable.vue b/print_designer/public/js/print_designer/components/base/BaseTable.vue
index 76f4b92..35b2e27 100644
--- a/print_designer/public/js/print_designer/components/base/BaseTable.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseTable.vue
@@ -17,7 +17,7 @@
 	>
 		<div
 			:style="['overflow: hidden;', widthHeightStyle(width, height)]"
-			@click.stop.self="
+			@click.self="
 				() => {
 					selectedColumn = null;
 					selectedDynamicText = null;
@@ -49,7 +49,7 @@
 							@dragleave="dragleave"
 							@dragover="allowDrop"
 							@contextmenu.prevent="handleMenu($event, index)"
-							@mousedown.self="handleColumnClick(column)"
+							@mousedown="handleColumnClick(column)"
 							@dblclick.stop="handleDblClick(table, column)"
 							:ref="
 								(el) => {
diff --git a/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue b/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
index 11c0e0d..1d50c45 100644
--- a/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
+++ b/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
@@ -148,6 +148,7 @@ import { useMainStore } from "../../store/MainStore";
 import AppModal from "./AppModal.vue";
 import IconsUse from "../../icons/IconsUse.vue";
 import AppDynamicPreviewModal from "./AppDynamicPreviewModal.vue";
+import { getFormattedValue } from "../../utils";
 const MainStore = useMainStore();
 const props = defineProps({
 	openDynamicModal: {
@@ -215,15 +216,21 @@ const parentFieldWatcher = watch(
 
 onMounted(() => {
 	if (props.openDynamicModal) {
-		fieldnames.value = props.openDynamicModal.dynamicContent;
+		fieldnames.value = props.openDynamicModal.dynamicContent || [];
 		selectedDoctypeLabel.value = MainStore.doctype;
-		if (props.table) {
-			fieldnames.value = props.openDynamicModal.dynamicContent || [];
-		}
 		fieldnames.value.findIndex((fd) => fd.print_hide) != -1 && (hiddenFields.value = true);
 		if (!hiddenFields.value) {
 			hiddenFields.value = MainStore.isHiddenFieldsVisible;
 		}
+		fieldnames.value.forEach(async (field) => {
+			let rowValue = null;
+			if (props.table) {
+				rowValue = MainStore.docData[props.table.fieldname][0];
+				field.value = await getFormattedValue(field, rowValue);
+			} else {
+				field.value = await getFormattedValue(field, null);
+			}
+		});
 	}
 });
 
@@ -270,28 +277,11 @@ const selectField = async (field, fieldtype) => {
 	});
 	if (isRemoved) return;
 	let index = fieldnames.value.length;
-	let value = previewRef.value.parentField
-		? await getValue(
-				doctype.value,
-				MainStore.docData[previewRef.value.parentField],
-				field.fieldname
-		  )
-		: props.table
-		? MainStore.docData[props.table.fieldname]?.length &&
-		  typeof MainStore.docData[props.table.fieldname][0][field.fieldname] != "undefined"
-			? frappe.format(
-					MainStore.docData[props.table.fieldname][0][field.fieldname],
-					{ fieldtype: field.fieldtype, options: field.options },
-					{ inline: true },
-					MainStore.docData
-			  )
-			: `{{ ${field.fieldname} }}`
-		: frappe.format(
-				MainStore.docData[field.fieldname],
-				{ fieldtype: field.fieldtype, options: field.options },
-				{ inline: true },
-				MainStore.docData
-		  );
+	let rowValue = null;
+	if (props.table) {
+		rowValue = MainStore.docData[props.table.fieldname][0];
+	}
+	let value = await getFormattedValue(field, rowValue);
 	if (!value) {
 		if (["Image, Attach Image"].indexOf(field.fieldtype) != -1) {
 			value = null;
diff --git a/print_designer/public/js/print_designer/components/layout/AppModal.vue b/print_designer/public/js/print_designer/components/layout/AppModal.vue
index 4b83388..b93ac5a 100644
--- a/print_designer/public/js/print_designer/components/layout/AppModal.vue
+++ b/print_designer/public/js/print_designer/components/layout/AppModal.vue
@@ -182,8 +182,8 @@ onUnmounted(() => {
 </style>
 <style lang="scss" scoped>
 .modal-dialog {
-	--primary: #6f5f35;
-	--primary-color: #6f5f35;
+	--primary: #7b4b57;
+	--primary-color: #7b4b57;
 	display: flex;
 	font-size: 0.75rem;
 	position: absolute;
diff --git a/print_designer/public/js/print_designer/store/MainStore.js b/print_designer/public/js/print_designer/store/MainStore.js
index 23c1275..2cd78d4 100644
--- a/print_designer/public/js/print_designer/store/MainStore.js
+++ b/print_designer/public/js/print_designer/store/MainStore.js
@@ -301,6 +301,7 @@ export const useMainStore = defineStore("MainStore", {
 								fieldtype: "Int",
 								label: "No",
 								options: undefined,
+								table: selectedTable,
 							},
 						];
 					}
@@ -468,7 +469,7 @@ export const useMainStore = defineStore("MainStore", {
 				) {
 					return object.selectedDynamicText?.[styleEditMode][propertyName];
 				}
-				if (state.isValidValue(object.selectedColumn?.["style"][propertyName])) {
+				if (state.isValidValue(object.selectedColumn?.["style"]?.[propertyName])) {
 					return object.selectedColumn?.["style"][propertyName];
 				}
 				if (state.isValidValue(object[styleEditMode][propertyName])) {
diff --git a/print_designer/public/js/print_designer/store/fetchMetaAndData.js b/print_designer/public/js/print_designer/store/fetchMetaAndData.js
index 28778b8..9c02a6e 100644
--- a/print_designer/public/js/print_designer/store/fetchMetaAndData.js
+++ b/print_designer/public/js/print_designer/store/fetchMetaAndData.js
@@ -131,63 +131,4 @@ export const fetchDoc = async (id = null) => {
 		},
 		{ immediate: true }
 	);
-	const updateDynamicData = async () => {
-		MainStore.dynamicData.forEach(async (el) => {
-			if (el.is_static) return;
-			let value = el.parentField
-				? await getValue(el.doctype, MainStore.docData[el.parentField], el.fieldname)
-				: el.tableName
-				? MainStore.docData[el.tableName][0] &&
-				  frappe.format(
-						MainStore.docData[el.tableName][0][el.fieldname],
-						{ fieldtype: el.fieldtype, options: el.options },
-						{ inline: true },
-						MainStore.docData
-				  )
-				: frappe.format(
-						MainStore.docData[el.fieldname],
-						{ fieldtype: el.fieldtype, options: el.options },
-						{ inline: true },
-						MainStore.docData
-				  );
-			if (typeof value == "string" && value.startsWith("<svg")) {
-				value.match(new RegExp(`data-barcode-value="(.*?)">`));
-				value = result[1];
-			}
-			if (!value) {
-				if (["Image, Attach Image"].indexOf(el.fieldtype) != -1) {
-					value = null;
-				} else {
-					switch (el.fieldname) {
-						case "page":
-							value = "0";
-							break;
-						case "topage":
-							value = "999";
-							break;
-						case "date":
-							value = frappe.datetime.now_date();
-							break;
-						case "time":
-							value = frappe.datetime.now_time();
-							break;
-						default:
-							value = `{{ ${el.parentField ? el.parentField + "." : ""}${
-								el.fieldname
-							} }}`;
-					}
-				}
-			}
-			el.value = value;
-		});
-	};
-	watch(
-		() => MainStore.docData,
-		async () => {
-			if (!Object.keys(MainStore.docData).length) return;
-			await frappe.dom.freeze();
-			await updateDynamicData();
-			await frappe.dom.unfreeze();
-		}
-	);
 };
diff --git a/print_designer/public/js/print_designer/utils.js b/print_designer/public/js/print_designer/utils.js
index 6de214e..63a82ff 100644
--- a/print_designer/public/js/print_designer/utils.js
+++ b/print_designer/public/js/print_designer/utils.js
@@ -37,7 +37,7 @@ import { useElementStore } from "./store/ElementStore";
 import { useDraggable } from "./composables/Draggable";
 import { useResizable } from "./composables/Resizable";
 import { useDropZone } from "./composables/DropZone";
-import { isRef, nextTick } from "vue";
+import { ref, isRef, nextTick } from "vue";
 import { getValue } from "./store/fetchMetaAndData";
 
 export const changeDraggable = (element) => {
@@ -350,27 +350,136 @@ const deleteDynamicReferance = (curobj) => {
 		});
 	}
 };
+export const parseJinja = async (field, row) => {
+	if (field.value != "" && field.parseJinja) {
+		try {
+			// call render_user_text_withdoc method using frappe.call and return the result
+			const MainStore = useMainStore();
+			let result = await frappe.call({
+				method: "print_designer.print_designer.page.print_designer.print_designer.render_user_text_withdoc",
+				args: {
+					string: field.value,
+					doctype: MainStore.doctype,
+					docname: MainStore.currentDoc,
+					row: row,
+					send_to_jinja: MainStore.mainParsedJinjaData || {},
+				},
+			});
+			result = result.message;
+			if (result.success) {
+				return result.message;
+			} else {
+				console.error("Error From User Provided Jinja String\n\n", result.error);
+			}
+		} catch (error) {
+			console.error("Error in Jinja Template\n", { value_string: field.value, error });
+			frappe.show_alert(
+				{
+					message: "Unable Render Jinja Template. Please Check Console",
+					indicator: "red",
+				},
+				5
+			);
+			return field.value;
+		}
+	} else {
+		return field.value;
+	}
+};
+
+export const getFormattedValue = async (field, row = null) => {
+	const MainStore = useMainStore();
+	const formattedValue = ref(field.value);
+	if (isRef(row)) {
+		row = row.value;
+	}
+	if (!row && field.tableName && Object.keys(MainStore.docData).length > 0) {
+		row = MainStore.docData[field.tableName][0];
+	}
+
+	const isDataAvailable = !!row || Object.keys(MainStore.docData).length > 0;
+	if (field.is_static) {
+		if (field.parseJinja) {
+			formattedValue.value = await parseJinja(field, row);
+		}
+		return formattedValue.value;
+	} else if (row) {
+		if (field.fieldtype == "Image") {
+			formattedValue.value = frappe.format(
+				row[field.options],
+				{ fieldtype: "Image" },
+				{ inline: true },
+				row
+			);
+			formattedValue.value = `<img class="print-item-image" src="${formattedValue.value}" alt="">`;
+		} else if (isDataAvailable && typeof row[field.fieldname] != "undefined") {
+			formattedValue.value = frappe.format(
+				row[field.fieldname],
+				{ fieldtype: field.fieldtype, options: field.options },
+				{ inline: true },
+				row
+			);
+		} else {
+			formattedValue.value =
+				["Image, Attach Image"].indexOf(field.fieldtype) != -1
+					? null
+					: `{{ ${field.fieldname} }}`;
+		}
+		return formattedValue.value;
+	} else {
+		let rawValue = MainStore.docData[field.fieldname];
+		if (field.parentField) {
+			rawValue = await getValue(
+				field.doctype,
+				MainStore.docData[field.parentField],
+				field.fieldname
+			);
+		}
+		field.value = frappe.format(
+			rawValue,
+			{ fieldtype: field.fieldtype, options: field.options },
+			{ inline: true },
+			MainStore.docData
+		);
+		if (!field.value) {
+			if (["Image, Attach Image"].indexOf(field.fieldtype) != -1) {
+				field.value = null;
+			} else {
+				switch (field.fieldname) {
+					case "page":
+						field.value = "0";
+						break;
+					case "topage":
+						field.value = "999";
+						break;
+					case "date":
+						field.value = frappe.datetime.now_date();
+						break;
+					case "time":
+						field.value = frappe.datetime.now_time();
+						break;
+					default:
+						field.value = `{{ ${field.parentField ? field.parentField + "." : ""}${
+							field.fieldname
+						} }}`;
+				}
+			}
+		}
+		return field.value;
+	}
+};
+
 export const updateDynamicData = async () => {
 	const MainStore = useMainStore();
 	if (!Object.keys(MainStore.docData).length) return;
 	MainStore.dynamicData.forEach(async (el) => {
 		if (el.is_static) return;
-		let value = el.parentField
-			? await getValue(el.doctype, MainStore.docData[el.parentField], el.fieldname)
-			: el.tableName
-			? MainStore.docData[el.tableName][0] &&
-			  frappe.format(
-					MainStore.docData[el.tableName][0][el.fieldname],
-					{ fieldtype: el.fieldtype, options: el.options },
-					{ inline: true },
-					MainStore.docData
-			  )
-			: frappe.format(
-					MainStore.docData[el.fieldname],
-					{ fieldtype: el.fieldtype, options: el.options },
-					{ inline: true },
-					MainStore.docData
-			  );
+		let row;
+		if (el.tableName) {
+			row = MainStore.docData[el.tableName];
+			row && (row = row[0]);
+		}
+		let value = getFormattedValue(el, row);
 		if (typeof value == "string" && value.startsWith("<svg")) {
 			value.match(new RegExp(`data-barcode-value="(.*?)">`));
 			value = result[1];