diff --git a/README.md b/README.md
index 5a0086a..ae24f37 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,10 @@ There are many ways you can contribute even if you don't code:
     - [HomeBrew](https://brew.sh/) and `brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman`
     - If you have **xcode 10.0 or higher** installed, in order to build from source you need **NPM 6.4.1 or higher** `npm install -g npm@latest`.
 
+3. Linux ARM CPU Installation Error
+    - If error has `node-pre-gyp WARN Pre-built binaries not installable for canvas@x.x.x and node@x.x.x` it means that there aren't any pre-built binaries for your system so it will try to compile them
+    - In order to do that you need `sudo apt-get update && sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev`
+
 ## License
 
 [GNU Affero General Public License v3.0](license.txt)
diff --git a/print_designer/hooks.py b/print_designer/hooks.py
index 166f781..68e9d5e 100644
--- a/print_designer/hooks.py
+++ b/print_designer/hooks.py
@@ -11,7 +11,7 @@
 # ------------------
 
 # include js, css files in header of desk.html
-app_include_js = "pdf.worker.bundle.js"
+# app_include_js = ""
 
 
 # include js, css files in header of web template
@@ -26,7 +26,10 @@
 # webform_include_css = {"doctype": "public/css/doctype.css"}
 
 # include js in page
-page_js = {"print": "print_designer/client_scripts/print.js"}
+page_js = {
+	"print": "print_designer/client_scripts/print.js",
+	"point-of-sale": "print_designer/client_scripts/point_of_sale.js",
+}
 
 # include js in doctype views
 doctype_js = {"Print Format": "print_designer/client_scripts/print_format.js"}
@@ -84,6 +87,7 @@
 pdf_body_html = "print_designer.pdf.pdf_body_html"
 pdf_footer_html = "print_designer.pdf.pdf_header_footer_html"
 
+get_print_format_template = "print_designer.pdf.get_print_format_template"
 # Desk Notifications
 # ------------------
 # See frappe.core.notifications.get_notification_config
diff --git a/print_designer/patches.txt b/print_designer/patches.txt
index 1869987..ffb6301 100644
--- a/print_designer/patches.txt
+++ b/print_designer/patches.txt
@@ -2,4 +2,7 @@ print_designer.patches.update_white_space_property
 print_designer.patches.introduce_barcode
 print_designer.patches.introduce_jinja
 print_designer.patches.introduce_schema_versioning
-print_designer.patches.rerun_introduce_jinja
\ No newline at end of file
+print_designer.patches.rerun_introduce_jinja
+print_designer.patches.introduce_table_alt_row_styles
+print_designer.patches.introduce_column_style
+print_designer.patches.introduce_suffix_dynamic_content
\ No newline at end of file
diff --git a/print_designer/patches/introduce_column_style.py b/print_designer/patches/introduce_column_style.py
new file mode 100644
index 0000000..3d2b551
--- /dev/null
+++ b/print_designer/patches/introduce_column_style.py
@@ -0,0 +1,18 @@
+import frappe
+
+from print_designer.patches.patch_utils import patch_formats
+
+
+def execute():
+	"""Modify Formats to work with New Column Style Feature"""
+
+	def element_callback(el):
+		el["selectedColumn"] = None
+		for col in el["columns"]:
+			col["style"] = {}
+			col["applyStyleToHeader"] = False
+
+	patch_formats(
+		{"element": element_callback},
+		types=["table"],
+	)
diff --git a/print_designer/patches/introduce_suffix_dynamic_content.py b/print_designer/patches/introduce_suffix_dynamic_content.py
new file mode 100644
index 0000000..07640f3
--- /dev/null
+++ b/print_designer/patches/introduce_suffix_dynamic_content.py
@@ -0,0 +1,17 @@
+import frappe
+
+from print_designer.patches.patch_utils import patch_formats
+
+
+def execute():
+	"""Introduce suffix to dynamic content elements"""
+
+	def dynamic_content_callback(el):
+		if not el.get("is_static", True):
+			if not "suffix" in el:
+				el["suffix"] = None
+
+	patch_formats(
+		{"dynamic_content": dynamic_content_callback},
+		types=["text", "table"],
+	)
diff --git a/print_designer/patches/introduce_table_alt_row_styles.py b/print_designer/patches/introduce_table_alt_row_styles.py
new file mode 100644
index 0000000..2c22f78
--- /dev/null
+++ b/print_designer/patches/introduce_table_alt_row_styles.py
@@ -0,0 +1,30 @@
+import frappe
+
+from print_designer.patches.patch_utils import patch_formats
+
+
+def execute():
+	"""Add altStyle object for alternate rows in table elements and in globalStyles of print formats that uses print designer"""
+	print_formats = frappe.get_all(
+		"Print Format",
+		filters={"print_designer": 1},
+		fields=["name", "print_designer_settings"],
+		as_list=1,
+	)
+	for pf in print_formats:
+		settings = frappe.parse_json(pf[1])
+		if settings:
+			# If globalStyles is not present, skip
+			if not (gs := settings.get("globalStyles")):
+				continue
+
+			gs["table"]["altStyle"] = {}
+			frappe.db.set_value("Print Format", pf[0], "print_designer_settings", frappe.as_json(settings))
+
+	def element_callback(el):
+		el["altStyle"] = {}
+
+	patch_formats(
+		{"element": element_callback},
+		types=["table"],
+	)
diff --git a/print_designer/pdf.py b/print_designer/pdf.py
index 7b58a7d..f10684f 100644
--- a/print_designer/pdf.py
+++ b/print_designer/pdf.py
@@ -1,25 +1,36 @@
+import hashlib
+import html
 import json
 
 import frappe
+from frappe.monitor import add_data_to_monitor
+from frappe.utils.error import log_error
 from frappe.utils.jinja_globals import is_rtl
 
 
 def pdf_header_footer_html(soup, head, content, styles, html_id, css):
 	if soup.find(id="__print_designer"):
-		return frappe.render_template(
-			"print_designer/page/print_designer/jinja/header_footer.html",
-			{
-				"head": head,
-				"content": content,
-				"styles": styles,
-				"html_id": html_id,
-				"css": css,
-				"headerFonts": soup.find(id="headerFontsLinkTag"),
-				"footerFonts": soup.find(id="footerFontsLinkTag"),
-				"lang": frappe.local.lang,
-				"layout_direction": "rtl" if is_rtl() else "ltr",
-			},
-		)
+		try:
+			return frappe.render_template(
+				"print_designer/page/print_designer/jinja/header_footer.html",
+				{
+					"head": head,
+					"content": content,
+					"styles": styles,
+					"html_id": html_id,
+					"css": css,
+					"headerFonts": soup.find(id="headerFontsLinkTag"),
+					"footerFonts": soup.find(id="footerFontsLinkTag"),
+					"lang": frappe.local.lang,
+					"layout_direction": "rtl" if is_rtl() else "ltr",
+				},
+			)
+		except Exception as e:
+			error = log_error(title=e, reference_doctype="Print Format")
+			frappe.throw(
+				msg=f"Something went wrong ( Error ) : If you don't know what just happened, and wish to file a ticket or issue on github, please copy the error from <b>Error Log {error.name}</b> or ask Administrator.",
+				exc=e,
+			)
 	else:
 		from frappe.utils.pdf import pdf_footer_html, pdf_header_html
 
@@ -35,7 +46,11 @@ def pdf_header_footer_html(soup, head, content, styles, html_id, css):
 
 def pdf_body_html(print_format, jenv, args, template):
 	if print_format and print_format.print_designer and print_format.print_designer_body:
-		template = jenv.loader.get_source(jenv, "print_designer/page/print_designer/jinja/main.html")[0]
+		print_format_name = hashlib.md5(print_format.name.encode(), usedforsecurity=False).hexdigest()
+		add_data_to_monitor(print_designer=print_format_name, print_designer_action="download_pdf")
+		# DEPRECATED: remove this in few months added for backward compatibility incase user didn't update frappe framework.
+		if not frappe.get_hooks("get_print_format_template"):
+			template = jenv.loader.get_source(jenv, "print_designer/page/print_designer/jinja/main.html")[0]
 		args.update(
 			{
 				"headerElement": json.loads(print_format.print_designer_header),
@@ -49,5 +64,21 @@ def pdf_body_html(print_format, jenv, args, template):
 		template_source = template.replace(
 			"<!-- user_generated_jinja_code -->", args["settings"].get("userProvidedJinja", "")
 		)
-		template = jenv.from_string(template_source)
+		try:
+			template = jenv.from_string(template_source)
+			return template.render(args, filters={"len": len})
+
+		except Exception as e:
+			error = log_error(title=e, reference_doctype="Print Format", reference_name=print_format.name)
+			if frappe.conf.developer_mode:
+				return f"<h1><b>Something went wrong while rendering the print format.</b> <hr/> If you don't know what just happened, and wish to file a ticket or issue on Github <hr /> Please copy the error from <code>Error Log {error.name}</code> or ask Administrator.<hr /><h3>Error rendering print format: {error.reference_name}</h3><h4>{error.method}</h4><pre>{html.escape(error.error)}</pre>"
+			else:
+				return f"<h1><b>Something went wrong while rendering the print format.</b> <hr/> If you don't know what just happened, and wish to file a ticket or issue on Github <hr /> Please copy the error from <code>Error Log {error.name}</code> or ask Administrator.</h1>"
+
 	return template.render(args, filters={"len": len})
+
+
+def get_print_format_template(jenv, print_format):
+	# if print format is created using print designer, then use print designer template
+	if print_format and print_format.print_designer and print_format.print_designer_body:
+		return jenv.loader.get_source(jenv, "print_designer/page/print_designer/jinja/main.html")[0]
diff --git a/print_designer/print_designer/client_scripts/point_of_sale.js b/print_designer/print_designer/client_scripts/point_of_sale.js
new file mode 100644
index 0000000..d519541
--- /dev/null
+++ b/print_designer/print_designer/client_scripts/point_of_sale.js
@@ -0,0 +1,26 @@
+// overrides the print util function that is used in the point of sale page.
+// we should ideally change util function in framework to extend it. this is workaround until that.
+const original_util = frappe.utils.print;
+frappe.utils.print = (doctype, docname, print_format, letterhead, lang_code) => {
+	if (frappe.model.get_value("Print Format", print_format, "print_designer")) {
+		let w = window.open(
+			frappe.urllib.get_full_url(
+				"/app/print/" +
+					encodeURIComponent(doctype) +
+					"/" +
+					encodeURIComponent(docname) +
+					"?format=" +
+					encodeURIComponent(print_format) +
+					"&no_letterhead=0" +
+					"&trigger_print=1" +
+					(lang_code ? "&_lang=" + lang_code : "")
+			)
+		);
+		if (!w) {
+			frappe.msgprint(__("Please enable pop-ups"));
+			return;
+		}
+	} else {
+		original_util(doctype, docname, print_format, letterhead, lang_code);
+	}
+};
diff --git a/print_designer/print_designer/client_scripts/print.js b/print_designer/print_designer/client_scripts/print.js
index 25a08ec..50410fc 100644
--- a/print_designer/print_designer/client_scripts/print.js
+++ b/print_designer/print_designer/client_scripts/print.js
@@ -104,10 +104,13 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
 	}
 	async designer_pdf(print_format) {
 		if (typeof pdfjsLib == "undefined") {
-			await frappe.require("assets/print_designer/js/pdf.min.js", () => {
-				pdfjsLib.GlobalWorkerOptions.workerSrc =
-					frappe.boot.assets_json["pdf.worker.bundle.js"];
-			});
+			await frappe.require(
+				["assets/print_designer/js/pdf.min.js", "pdf.worker.bundle.js"],
+				() => {
+					pdfjsLib.GlobalWorkerOptions.workerSrc =
+						frappe.boot.assets_json["pdf.worker.bundle.js"];
+				}
+			);
 		}
 		let me = this;
 		let print_designer_settings = JSON.parse(print_format.print_designer_settings);
@@ -142,16 +145,26 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
 				await renderPage(this.pdfDoc, pageno);
 			}
 			this.pdf_download_btn.prop("disabled", false);
+			if (frappe.route_options.trigger_print) {
+				this.printit();
+			}
 			this.print_btn.prop("disabled", false);
 		} catch (err) {
-			console.log(err);
-			frappe.show_alert(
-				{
-					message: "Unable to generate PDF",
-					indicator: "red",
+			console.error(err);
+			frappe.msgprint({
+				title: __("Unable to generate PDF"),
+				message: `There was error while generating PDF. Please check the error log for more details.`,
+				indicator: "red",
+				primary_action: {
+					label: "Open Error Log",
+					action(values) {
+						frappe.set_route("List", "Error Log", {
+							doctype: "Error Log",
+							reference_doctype: "Print Format",
+						});
+					},
 				},
-				5
-			);
+			});
 		}
 		/**
 		 * Get page info from document, resize canvas accordingly, and render page.
@@ -235,6 +248,11 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
 						setTimeout(() => {
 							iframe.focus();
 							iframe.contentWindow.print();
+							if (frappe.route_options.trigger_print) {
+								setTimeout(function () {
+									window.close();
+								}, 5000);
+							}
 						}, 1);
 					};
 				} else {
diff --git a/print_designer/print_designer/page/print_designer/jinja/main.html b/print_designer/print_designer/page/print_designer/jinja/main.html
index c634941..c1fb537 100644
--- a/print_designer/print_designer/page/print_designer/jinja/main.html
+++ b/print_designer/print_designer/page/print_designer/jinja/main.html
@@ -1,7 +1,7 @@
 {% macro render_statictext(element, send_to_jinja) -%}
-<div style="position: absolute; top:{% if 'printY' in element %}{{ element.printY }}{% else %}{{ element.startY }}{% endif %}px; left:{% if 'printX' in element %}{{ element.printX }}{% else %}{{ element.startX }}{% endif %}px;{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; max-width: {{ settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX }}px; {%endif%}" class="
+<div style="position: absolute; top:{% if 'printY' in element %}{{ element.printY }}{% else %}{{ element.startY }}{% endif %}px; left:{% if 'printX' in element %}{{ element.printX }}{% else %}{{ element.startX }}{% endif %}px;{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; max-width: {{ (settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX) + 2 }}px; white-space:nowrap; {%endif%}" class="
     {{ element.classes | join(' ') }}">
-    <p style="{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; max-width: {{ settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX }}px; {%endif%} {{convert_css(element.style)}}"
+    <p style="{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; max-width: {{ (settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX ) + 2 }}px; white-space:nowrap;{%endif%} {{convert_css(element.style)}}"
         class="staticText {{ element.classes | join(' ') }}">
         {% if element.parseJinja %}
         <!-- third Arg is row which is not sent outside table -->
@@ -18,9 +18,9 @@
     {% endif %}
 {% endmacro %}
 {% macro render_dynamictext(element, send_to_jinja) -%}
-<div style="position: absolute; top:{% if 'printY' in element %}{{ element.printY }}{% else %}{{ element.startY }}{% endif %}px; left:{% if 'printX' in element %}{{ element.printX }}{% else %}{{ element.startX }}{% endif %}px;{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; max-width: {{ settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX }}px;{%endif%}" class="
+<div style="position: absolute; top:{% if 'printY' in element %}{{ element.printY }}{% else %}{{ element.startY }}{% endif %}px; left:{% if 'printX' in element %}{{ element.printX }}{% else %}{{ element.startX }}{% endif %}px;{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; white-space:nowrap; max-width: {{ (settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX) + 2 }}px;{%endif%}" class="
     {{ element.classes | join(' ') }}">
-        <div style="{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; max-width: {{ settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX }}px;{%endif%} {{convert_css(element.style)}}"
+        <div style="{% if element.isFixedSize %}width:{{ element.width }}px;height:{{ element.height }}px;{% else %}width:fit-content; height:fit-content; white-space:nowrap; max-width: {{ (settings.page.width - settings.page.marginLeft - settings.page.marginRight - element.startX) + 2 }}px;{%endif%} {{convert_css(element.style)}}"
             class="dynamicText {{ element.classes | join(' ') }}">
             {% for field in element.dynamicContent %}
             <!-- third Arg is row which is not sent outside table -->
@@ -90,7 +90,7 @@
         {% if element.columns %}
             <tr>
         {% for column in element.columns%}
-                <th style="{% if column.width %}width: {{column.width}}%; max-width: {{column.width}}%;{%endif%} {{convert_css(element.headerStyle)}}border-top-style: solid !important;border-bottom-style: solid !important;{%if loop.first%}border-left-style: solid !important;{%elif loop.last%}border-right-style: solid !important;{%endif%}">
+                <th style="{% if column.width %}width: {{column.width}}%; max-width: {{column.width}}%;{%endif%} {{convert_css(element.headerStyle)}}border-top-style: solid !important;border-bottom-style: solid !important;{%if loop.first%}border-left-style: solid !important;{%elif loop.last%}border-right-style: solid !important;{%endif%}{%- if column.applyStyleToHeader and column.style -%}{{convert_css(column.style)}}{%- endif -%}">
                 {{ _(column.label) }}
                 </th>
         {% endfor %}
@@ -103,7 +103,7 @@
             <tr>
                 {% set isLastRow = loop.last %}
             {% for column in element.columns%}
-                <td style="{{convert_css(element.style)}}{%if isLastRow%}border-bottom-style: solid !important;{%endif%}{%if loop.first%}border-left-style: solid !important;{%elif loop.last%}border-right-style: solid !important;{%endif%}">
+                <td style="{{convert_css(element.style)}}{%if row.idx % 2 == 0 %}{{convert_css(element.altStyle)}}{%endif%}{%if isLastRow%}border-bottom-style: solid !important;{%endif%}{%if loop.first%}border-left-style: solid !important;{%elif loop.last%}border-right-style: solid !important;{%endif%}{%- if column.style -%}{{convert_css(column.style)}}{%- endif -%}">
             {% if column is mapping %}
                 {% for field in column.dynamicContent%}
                     {{ render_spantag(field, element, row, send_to_jinja) }}
@@ -142,14 +142,20 @@
 {% set span_value = render_spanvalue(field, element, row, send_to_jinja) %}
 <span class="{% if not field.is_static and field.is_labelled %}baseSpanTag{% endif %}">
     {% if not field.is_static and field.is_labelled and span_value %}
-    <span class="{% if row %}printTable{% else %}dynamicText{% endif %} label-text labelSpanTag" style="user-select:auto;{%if element.labelStyle %}{{convert_css(element.labelStyle)}}{%endif%}{%if field.labelStyle %}{{convert_css(field.labelStyle)}}{%endif%}">
+    <span class="{% if row %}printTable{% else %}dynamicText{% endif %} label-text labelSpanTag" style="user-select:auto; {%if element.labelStyle %}{{convert_css(element.labelStyle)}}{%endif%}{%if field.labelStyle %}{{convert_css(field.labelStyle)}}{%endif%} white-space:nowrap; ">
         {{ _(field.label) }}
     </span>
     {% endif %}
     <span class="dynamic-span {% if not field.is_static and field.is_labelled %}valueSpanTag{%endif%} {{page_class(field)}} }}"
-        style="{{convert_css(field.style)}} user-select:auto;">
+        style="{%- if element.style.get('color') -%}{{ convert_css({'color': element.style.get('color')})}}{%- endif -%} {{convert_css(field.style)}} user-select:auto;">
         {{ span_value }}
     </span>
+    {% if field.suffix and span_value %}
+    <span class="dynamic-span"
+        style="{%- if element.style.get('color') -%}{{ convert_css({'color': element.style.get('color')})}}{%- endif -%} {{convert_css(field.style)}} user-select:auto;">
+        {{ _(field.suffix) }}
+    </span>
+    {% endif %}
     {% if field.nextLine %}
     <br/>
     {% endif %}
diff --git a/print_designer/print_designer/page/print_designer/print_designer.js b/print_designer/print_designer/page/print_designer/print_designer.js
index d0c461e..e4b168c 100644
--- a/print_designer/print_designer/page/print_designer/print_designer.js
+++ b/print_designer/print_designer/page/print_designer/print_designer.js
@@ -117,8 +117,8 @@ const set_current_doc = async (format_name) => {
 		format_name,
 		"print_designer_settings"
 	);
-	if (!settings.message) return;
-	settings = JSON.parse(settings.message.print_designer_settings || "{}");
+	if (!settings.message?.print_designer_settings) return;
+	settings = JSON.parse(settings.message.print_designer_settings);
 	settings["currentDoc"] = currentDoc;
 	await frappe.db.set_value(
 		"Print Format",
diff --git a/print_designer/print_designer/page/print_designer/print_designer.py b/print_designer/print_designer/page/print_designer/print_designer.py
index 748f60a..e97bddf 100644
--- a/print_designer/print_designer/page/print_designer/print_designer.py
+++ b/print_designer/print_designer/page/print_designer/print_designer.py
@@ -15,6 +15,7 @@ def render_user_text_withdoc(string, doctype, docname=None, row=None, send_to_ji
 	if not docname or docname == "":
 		return render_user_text(string=string, doc={}, row=row, send_to_jinja=send_to_jinja)
 	doc = frappe.get_cached_doc(doctype, docname)
+	doc.check_permission()
 	return render_user_text(string=string, doc=doc, row=row, send_to_jinja=send_to_jinja)
 
 
@@ -132,7 +133,7 @@ def convert_css(css_obj):
 			string_css += (
 				"".join(["-" + i.lower() if i.isupper() else i for i in item[0]]).lstrip("-")
 				+ ":"
-				+ str(item[1])
+				+ str(item[1] if item[1] != "" or item[0] != "backgroundColor" else "transparent")
 				+ "!important;"
 			)
 	string_css += "user-select: all;"
diff --git a/print_designer/public/js/print_designer/PropertiesPanelState.js b/print_designer/public/js/print_designer/PropertiesPanelState.js
index 9b311cb..4624b9c 100644
--- a/print_designer/public/js/print_designer/PropertiesPanelState.js
+++ b/print_designer/public/js/print_designer/PropertiesPanelState.js
@@ -438,8 +438,9 @@ export const createPropertiesPanel = () => {
 	MainStore.propertiesPanel.push({
 		title: "Table Settings",
 		sectionCondtional: () =>
-			MainStore.getCurrentElementsId.length === 1 &&
-			MainStore.getCurrentElementsValues[0]?.type == "table",
+			(MainStore.getCurrentElementsId.length === 1 &&
+				MainStore.getCurrentElementsValues[0]?.type == "table") ||
+			MainStore.activeControl == "table",
 		fields: [
 			[
 				{
@@ -448,6 +449,7 @@ export const createPropertiesPanel = () => {
 					isLabelled: true,
 					labelDirection: "column",
 					flex: 3,
+					condtional: () => MainStore.getCurrentElementsValues[0]?.type == "table",
 					frappeControl: (ref, name) => {
 						const MainStore = useMainStore();
 						makeFeild({
@@ -469,11 +471,69 @@ export const createPropertiesPanel = () => {
 							propertyName: "table",
 							isStyle: false,
 							onChangeCallback: (value = null) => {
-								if (value && MainStore.getCurrentElementsValues[0]) {
-									MainStore.getCurrentElementsValues[0]["table"] =
-										MainStore.metaFields.find(
-											(field) => field.fieldname == value
+								const currentEL = MainStore.getCurrentElementsValues[0];
+								const idx = {
+									fieldname: "idx",
+									fieldtype: "Int",
+									label: "No",
+									options: undefined,
+								};
+								if (value && currentEL) {
+									currentEL["table"] = MainStore.metaFields.find(
+										(field) => field.fieldname == value
+									);
+									currentEL["table"].default_layout =
+										frappe.get_user_settings(MainStore.doctype, "GridView")[
+											currentEL["table"].options
+										] || {};
+									if (Object.keys(currentEL["table"].default_layout).length) {
+										df = { idx };
+										Object.values(currentEL["table"].default_layout).forEach(
+											(value) => {
+												key = value.fieldname;
+												df[key] = currentEL["table"].childfields.find(
+													(df) => df.fieldname == key
+												);
+											}
 										);
+										currentEL["table"].default_layout = df;
+									} else {
+										currentEL["table"].childfields.map((df) => {
+											currentEL["table"].default_layout["idx"] = idx;
+											if (
+												df.fieldname &&
+												df.in_list_view &&
+												!df.is_virtual &&
+												frappe.model.is_value_type(df) &&
+												df.fieldtype !== "Read Only" &&
+												!frappe.model.layout_fields.includes(df.fieldtype)
+											) {
+												currentEL["table"].default_layout[df.fieldname] =
+													df;
+											}
+										});
+									}
+									// fill columns with default fields if table is empty
+									if (
+										currentEL.columns &&
+										!currentEL.columns.some((c) => c.dynamicContent) &&
+										currentEL["table"].default_layout
+									) {
+										dlKeys = Object.keys(currentEL["table"].default_layout);
+										currentEL.columns
+											.slice(0, dlKeys.length)
+											.forEach((col, index) => {
+												col.dynamicContent = [
+													currentEL["table"].default_layout[
+														dlKeys[index]
+													],
+												];
+												col.label =
+													col.dynamicContent[0].label ||
+													col.dynamicContent[0].fieldname;
+											});
+									}
+
 									MainStore.frappeControls[name].$input.blur();
 								}
 							},
@@ -517,7 +577,7 @@ export const createPropertiesPanel = () => {
 			],
 			[
 				{
-					label: "Set as Primary Table",
+					label: "Primary Table",
 					name: "isPrimaryTable",
 					isLabelled: true,
 					labelDirection: "column",
@@ -554,6 +614,107 @@ export const createPropertiesPanel = () => {
 					},
 					flex: 1,
 				},
+				{
+					label: "Style Mode :",
+					isLabelled: true,
+					name: "tableStyleEditMode",
+					labelDirection: "column",
+					condtional: () =>
+						[
+							MainStore.getCurrentElementsValues[0]?.type,
+							MainStore.activeControl,
+						].indexOf("table") != -1,
+					frappeControl: (ref, name) => {
+						const MainStore = useMainStore();
+						makeFeild({
+							name: name,
+							ref: ref,
+							fieldtype: "Select",
+							requiredData: [MainStore],
+							options: () => {
+								return [
+									{ label: "Table Header", value: "header" },
+									{ label: "All Rows", value: "main" },
+									{ label: "Alternate Rows", value: "alt" },
+									{ label: "Field Labels", value: "label" },
+								];
+							},
+							reactiveObject: () => {
+								return (
+									MainStore.getCurrentElementsValues[0] ||
+									MainStore.globalStyles["table"]
+								);
+							},
+							onChangeCallback: (value) => {
+								if (MainStore.getCurrentElementsValues[0]?.selectedDynamicText) {
+									if (
+										MainStore.getCurrentElementsValues[0].styleEditMode ==
+										"label"
+									) {
+										MainStore.getCurrentElementsValues[0].selectedDynamicText.labelStyleEditing = true;
+									} else {
+										MainStore.getCurrentElementsValues[0].selectedDynamicText.labelStyleEditing = false;
+										if (
+											MainStore.getCurrentElementsValues[0].styleEditMode ==
+											"header"
+										) {
+											MainStore.getCurrentElementsValues[0].selectedDynamicText =
+												null;
+										}
+									}
+								}
+								if (MainStore.getCurrentElementsValues[0]?.selectedColumn && value != "main"){
+									MainStore.getCurrentElementsValues[0].selectedColumn = null;
+								}
+							},
+							propertyName: "styleEditMode",
+						});
+					},
+				},
+			],
+			[
+				{
+					label: "Apply Style to Header",
+					name: "applyStyleToHeader",
+					isLabelled: true,
+					labelDirection: "column",
+					condtional: () =>
+						MainStore.getCurrentElementsValues[0]?.type == "table" &&
+						MainStore.getCurrentElementsValues[0].selectedColumn,
+					frappeControl: (ref, name) => {
+						const MainStore = useMainStore();
+						const ElementStore = useElementStore();
+						makeFeild({
+							name,
+							ref,
+							fieldtype: "Select",
+							requiredData: [MainStore.getCurrentElementsValues[0]],
+							reactiveObject: () =>
+								MainStore.getCurrentElementsValues[0].selectedColumn,
+							propertyName: "applyStyleToHeader",
+							isStyle: false,
+							options: () => [
+								{ label: "Yes", value: "Yes" },
+								{ label: "No", value: "No" },
+							],
+							formatValue: (object, property, isStyle) => {
+								if (!object) return;
+								return object[property] ? "Yes" : "No";
+							},
+							onChangeCallback: (value = null) => {
+								if (
+									value &&
+									MainStore.getCurrentElementsValues[0].selectedColumn
+								) {
+									MainStore.getCurrentElementsValues[0].selectedColumn.applyStyleToHeader =
+										value === "Yes";
+									MainStore.frappeControls[name].$input.blur();
+								}
+							},
+						});
+					},
+					flex: 1,
+				},
 			],
 		],
 	});
@@ -652,9 +813,13 @@ export const createPropertiesPanel = () => {
 			[
 				{
 					label: "Choose Element :",
-					name: "styleEditMode",
+					name: "textStyleEditMode",
 					labelDirection: "column",
-					condtional: null,
+					condtional: () =>
+						[
+							MainStore.getCurrentElementsValues[0]?.type,
+							MainStore.activeControl,
+						].indexOf("table") == -1,
 					frappeControl: (ref, name) => {
 						const MainStore = useMainStore();
 						makeFeild({
@@ -663,20 +828,11 @@ export const createPropertiesPanel = () => {
 							fieldtype: "Select",
 							requiredData: [MainStore],
 							options: () => {
-								if (
-									"table" == MainStore.getCurrentElementsValues[0]?.type ||
-									"table" == MainStore.activeControl
-								)
-									return [
-										{ label: "Label Element", value: "label" },
-										{ label: "Main Element", value: "main" },
-										{ label: "Header Element", value: "header" },
-									];
 								if (
 									("text" == MainStore.getCurrentElementsValues[0]?.type &&
 										MainStore.getCurrentElementsValues[0]?.isDynamic) ||
 									("text" == MainStore.activeControl &&
-										MainStore.textControlType == "static")
+										MainStore.textControlType == "dynamic")
 								)
 									return [
 										{ label: "Label Element", value: "label" },
@@ -685,13 +841,9 @@ export const createPropertiesPanel = () => {
 								return [{ label: "Main Element", value: "main" }];
 							},
 							reactiveObject: () => {
-								let styleClass = "table";
-								if (MainStore.activeControl == "text") {
-									if (MainStore.textControlType == "dynamic") {
-										styleClass = "dynamicText";
-									} else {
-										styleClass = "staticText";
-									}
+								let styleClass = "staticText";
+								if (MainStore.textControlType == "dynamic") {
+									styleClass = "dynamicText";
 								}
 								return (
 									MainStore.getCurrentElementsValues[0] ||
@@ -707,13 +859,6 @@ export const createPropertiesPanel = () => {
 										MainStore.getCurrentElementsValues[0].selectedDynamicText.labelStyleEditing = true;
 									} else {
 										MainStore.getCurrentElementsValues[0].selectedDynamicText.labelStyleEditing = false;
-										if (
-											MainStore.getCurrentElementsValues[0].styleEditMode ==
-											"header"
-										) {
-											MainStore.getCurrentElementsValues[0].selectedDynamicText =
-												null;
-										}
 									}
 								}
 							},
diff --git a/print_designer/public/js/print_designer/components/base/BaseDynamicText.vue b/print_designer/public/js/print_designer/components/base/BaseDynamicText.vue
index 07ffe71..3ba71f9 100644
--- a/print_designer/public/js/print_designer/components/base/BaseDynamicText.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseDynamicText.vue
@@ -23,6 +23,7 @@
 		<div
 			:style="[
 				style,
+				style.backgroundColor == '' && { backgroundColor: 'transparent' },
 				widthHeightStyle(width, height),
 				!isFixedSize && {
 					width: 'fit-content',
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 c7ef1a4..1ce3d5a 100644
--- a/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseDynamicTextSpanTag.vue
@@ -38,6 +38,23 @@
 			v-html="parsedValue"
 		>
 		</span>
+		<span
+			v-if="field.suffix"
+			:class="[
+				parentClass,
+				'dynamic-span',
+				{
+					'dynamic-span-hover':
+						parentClass == 'printTable' ? true : MainStore.activeControl == 'text',
+					'dynamic-span-selected':
+						selectedDynamicText === field && !field.labelStyleEditing,
+				},
+			]"
+			@click="selectDynamicText()"
+			:style="[field?.style]"
+			v-html="field.suffix"
+		>
+		</span>
 		<br v-if="field.nextLine" />
 	</span>
 </template>
diff --git a/print_designer/public/js/print_designer/components/base/BaseImage.vue b/print_designer/public/js/print_designer/components/base/BaseImage.vue
index b3e3dd4..0842a19 100644
--- a/print_designer/public/js/print_designer/components/base/BaseImage.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseImage.vue
@@ -12,6 +12,7 @@
 			:style="[
 				widthHeightStyle(width, height),
 				style,
+				style.backgroundColor == '' && { backgroundColor: 'transparent' },
 				`background-image: url('${isDynamic ? image.value : image.file_url}');`,
 			]"
 			:class="['image', classes]"
diff --git a/print_designer/public/js/print_designer/components/base/BaseRectangle.vue b/print_designer/public/js/print_designer/components/base/BaseRectangle.vue
index 1092101..43114ee 100644
--- a/print_designer/public/js/print_designer/components/base/BaseRectangle.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseRectangle.vue
@@ -1,6 +1,10 @@
 <template>
 	<div
-		:style="[style, postionalStyles(startX, startY, width, height)]"
+		:style="[
+			style,
+			style.backgroundColor == '' && { backgroundColor: 'transparent' },
+			postionalStyles(startX, startY, width, height),
+		]"
 		:class="[
 			'rectangle',
 			{ 'active-elements': MainStore.getCurrentElementsId.includes(id) },
diff --git a/print_designer/public/js/print_designer/components/base/BaseStaticText.vue b/print_designer/public/js/print_designer/components/base/BaseStaticText.vue
index 62d1868..9bd0d83 100644
--- a/print_designer/public/js/print_designer/components/base/BaseStaticText.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseStaticText.vue
@@ -28,6 +28,7 @@
 			@keyup.stop
 			:style="[
 				style,
+				style.backgroundColor == '' && { backgroundColor: 'transparent' },
 				widthHeightStyle(width, height),
 				!isFixedSize && {
 					width: 'fit-content',
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 56b471b..5e48a9d 100644
--- a/print_designer/public/js/print_designer/components/base/BaseTable.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseTable.vue
@@ -12,7 +12,15 @@
 			MainStore.getCurrentElementsId.includes(id) && 'active-elements',
 		]"
 	>
-		<div :style="['overflow: hidden;', widthHeightStyle(width - 2, height)]">
+		<div
+			:style="['overflow: hidden;', widthHeightStyle(width, height)]"
+			@click.stop.self="
+				() => {
+					selectedColumn = null;
+					selectedDynamicText = null;
+				}
+			"
+		>
 			<table class="printTable">
 				<thead>
 					<tr v-if="columns.length">
@@ -24,9 +32,13 @@
 									maxWidth: `${column.width}%`,
 								},
 								headerStyle,
+								column.applyStyleToHeader && column.style,
 							]"
 							v-for="(column, index) in columns"
-							:class="menu?.index == index && 'current-column'"
+							:class="
+								(menu?.index == index || column == selectedColumn) &&
+								'current-column'
+							"
 							:key="column.fieldname"
 							:draggable="columnDragging"
 							@dragstart="dragstart($event, index)"
@@ -34,6 +46,7 @@
 							@dragleave="dragleave"
 							@dragover="allowDrop"
 							@contextmenu.prevent="handleMenu($event, index)"
+							@mousedown.self="handleColumnClick(column)"
 							@dblclick.stop="handleDblClick(table, column)"
 							:ref="
 								(el) => {
@@ -81,6 +94,7 @@
 								selectedDynamicText,
 								setSelectedDynamicText,
 								table,
+								altStyle,
 							}"
 						/>
 					</tr>
@@ -108,7 +122,7 @@ import {
 	deleteCurrentElements,
 	widthHeightStyle,
 } from "../../utils";
-import { toRefs, ref } from "vue";
+import { toRefs, ref, watch } from "vue";
 import { useDraw } from "../../composables/Draw";
 import BaseResizeHandles from "./BaseResizeHandles.vue";
 import AppTableContextMenu from "../layout/AppTableContextMenu.vue";
@@ -142,13 +156,24 @@ const {
 	style,
 	labelStyle,
 	headerStyle,
+	altStyle,
 	classes,
 	PreviewRowNo,
 	styleEditMode,
+	selectedColumn,
 	selectedDynamicText,
 	DOMRef,
 } = toRefs(props.object);
 
+watch(
+	() => selectedColumn.value,
+	(value) => {
+		if (value) {
+			MainStore.frappeControls.applyStyleToHeader?.set_value(value.applyStyleToHeader);
+		}
+	}
+);
+
 const setSelectedDynamicText = (value, isLabel) => {
 	if (
 		selectedDynamicText.value === value &&
@@ -157,6 +182,7 @@ const setSelectedDynamicText = (value, isLabel) => {
 		selectedDynamicText.value = null;
 	} else {
 		selectedDynamicText.value = value;
+		selectedColumn.value = null;
 		let removeSelectedText = onClickOutside(DOMRef.value, (event) => {
 			for (let index = 0; index < event.composedPath().length; index++) {
 				if (event.composedPath()[index].id === "canvas") {
@@ -169,6 +195,24 @@ const setSelectedDynamicText = (value, isLabel) => {
 	styleEditMode.value = isLabel ? "label" : "main";
 };
 
+const handleColumnClick = (column) => {
+	if (!props.object.table) {
+		MainStore.frappeControls.table.set_focus();
+	} else if (MainStore.activeControl == "mouse-pointer") {
+		selectedColumn.value = column;
+		MainStore.frappeControls.tableStyleEditMode?.set_value("main");
+		selectedDynamicText.value = null;
+		let removeSelectedColumn = onClickOutside(DOMRef.value, (event) => {
+			for (let index = 0; index < event.composedPath().length; index++) {
+				if (event.composedPath()[index].id === "canvas") {
+					selectedColumn.value = null;
+					removeSelectedColumn();
+				}
+			}
+		});
+	}
+};
+
 const handleDblClick = (table, column) => {
 	if (!props.object.table) {
 		MainStore.frappeControls.table.set_focus();
@@ -310,6 +354,9 @@ const handleMouseUp = (e, tablewidth) => {
 	MainStore.setActiveControl("MousePointer");
 	MainStore.isMoved = MainStore.isMoveStart = false;
 	MainStore.lastCloned = null;
+	if (MainStore.frappeControls.table?.get_value() == "") {
+		MainStore.frappeControls.table.set_focus();
+	}
 };
 </script>
 
@@ -321,7 +368,6 @@ const handleMouseUp = (e, tablewidth) => {
 	background-color: var(--gray-300);
 }
 .table-container {
-	border: 1px solid var(--gray-400);
 	background-color: var(--gray-50);
 	.printTable {
 		border-collapse: collapse;
diff --git a/print_designer/public/js/print_designer/components/base/BaseTableTd.vue b/print_designer/public/js/print_designer/components/base/BaseTableTd.vue
index c7e817a..33b2cf4 100644
--- a/print_designer/public/js/print_designer/components/base/BaseTableTd.vue
+++ b/print_designer/public/js/print_designer/components/base/BaseTableTd.vue
@@ -2,7 +2,7 @@
 	<td
 		v-for="column in columns"
 		:key="column.fieldname"
-		:style="style"
+		:style="[style, altStyle && row.idx % 2 == 0 && altStyle, column.style]"
 		@click.self="setSelectedDynamicText(null)"
 	>
 		<template
@@ -47,6 +47,10 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
+	altStyle: {
+		type: Object,
+		required: false,
+	},
 	selectedDynamicText: {
 		type: Object,
 		required: false,
diff --git a/print_designer/public/js/print_designer/components/layout/AppCanvas.vue b/print_designer/public/js/print_designer/components/layout/AppCanvas.vue
index aaa7ef0..9768b87 100644
--- a/print_designer/public/js/print_designer/components/layout/AppCanvas.vue
+++ b/print_designer/public/js/print_designer/components/layout/AppCanvas.vue
@@ -175,7 +175,8 @@ const handleMouseMove = (e) => {
 			let width = MainStore.currentDrawListener.parameters.width;
 			let columns = Math.floor(width / 100);
 			let elementColumns = MainStore.lastCreatedElement.columns;
-			!elementColumns.length && elementColumns.push({ id: 0, label: "" });
+			!elementColumns.length &&
+				elementColumns.push({ id: 0, label: "", style: {}, applyStyleToHeader: false });
 			if (width > 100) {
 				let columnDif = columns - elementColumns.length;
 				if (columnDif == 0) {
@@ -187,6 +188,8 @@ const handleMouseMove = (e) => {
 						elementColumns.push({
 							id: elementColumns.length,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						});
 					}
 				}
@@ -229,6 +232,9 @@ const handleMouseUp = (e) => {
 			}
 			if (MainStore.activeControl == "table") {
 				MainStore.setActiveControl("MousePointer");
+				if (MainStore.frappeControls.table?.get_value() == "") {
+					MainStore.frappeControls.table.set_focus();
+				}
 			}
 		} else {
 			MainStore.currentDrawListener?.drawEventHandler.mouseup(e);
@@ -430,6 +436,23 @@ onMounted(() => {
 							{ deep: true, immediate: true }
 						);
 					}
+					if (element[1].altStyle) {
+						watch(
+							() => MainStore.globalStyles[element[0]].altStyle,
+							() => {
+								if (MainStore.screenStyleSheet && element[1].altCssRule) {
+									Object.entries(
+										MainStore.globalStyles[element[0]].altStyle
+									).forEach((style) => {
+										if (element[1].altCssRule.style[style[0]] != style[1]) {
+											element[1].altCssRule.style[style[0]] = style[1];
+										}
+									});
+								}
+							},
+							{ deep: true, immediate: true }
+						);
+					}
 				});
 			}
 		}
diff --git a/print_designer/public/js/print_designer/components/layout/AppDynamicPreviewModal.vue b/print_designer/public/js/print_designer/components/layout/AppDynamicPreviewModal.vue
index f16e6a0..403c292 100644
--- a/print_designer/public/js/print_designer/components/layout/AppDynamicPreviewModal.vue
+++ b/print_designer/public/js/print_designer/components/layout/AppDynamicPreviewModal.vue
@@ -42,21 +42,16 @@
 					:contenteditable="contenteditable"
 					:class="['label-text', selectedEl?.field == field && 'label-text-selected']"
 					:ref="(el) => (field.labelRef = el)"
-					@dblclick="handleDblClick($event, field)"
+					@dblclick="handleDblClick($event, field, 'label')"
 					@blur="handleBlur($event, field)"
-					v-html="
-						`${field.label}` ||
-						`{{ ${field.parentField ? field.parentField + '.' : ''}${
-							field.fieldname
-						} }}`
-					"
+					v-html="field.label || 'Add Label'"
 				></span>
 				<span
 					:ref="(el) => (field.spanRef = el)"
 					class="preview-text"
 					:class="{ 'preview-text-selected': selectedEl?.field == field }"
 					:contenteditable="contenteditable"
-					@dblclick="handleDblClick($event, field)"
+					@dblclick="handleDblClick($event, field, 'main')"
 					@blur="handleBlur($event, field)"
 					v-html="
 						field.value ||
@@ -67,6 +62,15 @@
 							  } }}`)
 					"
 				></span>
+				<span
+					v-if="field.suffix"
+					:contenteditable="contenteditable"
+					:class="['label-text', selectedEl?.field == field && 'label-text-selected']"
+					:ref="(el) => (field.suffixRef = el)"
+					@dblclick="handleDblClick($event, field, 'suffix')"
+					@blur="handleBlur($event, field)"
+					v-html="field.suffix || 'Add Suffix'"
+				></span>
 				<span v-if="field.nextLine" class="next-line fa fa-level-down"></span>
 			</div>
 			<br v-if="field.nextLine" />
@@ -95,6 +99,22 @@
 					>{{ selectedEl.field.is_labelled ? "Remove Label" : "Add Label" }}</span
 				>
 			</div>
+			<div
+				v-if="selectedEl"
+				@click="selectedEl.field.suffix = !selectedEl.field.suffix && 'Add Suffix'"
+			>
+				<span
+					class="fa fa-angle-double-right"
+					:style="[selectedEl.field.suffix && 'color:var(--primary)']"
+				></span>
+				<span
+					:style="[
+						'font-size: 12px; padding: 0px 5px',
+						selectedEl.field.suffix && 'color:var(--primary)',
+					]"
+					>{{ selectedEl.field.suffix ? "Remove Suffix" : "Add Suffix" }}</span
+				>
+			</div>
 			<div v-if="selectedEl" @click="selectedEl.field.nextLine = !selectedEl.field.nextLine">
 				<span
 					class="next-line fa fa-level-down"
@@ -211,21 +231,49 @@ const handleClick = (event, field, index) => {
 	parentField.value = field.parentField;
 };
 
-const handleDblClick = (event, field) => {
-	if (field.fieldtype != "StaticText" && !field.is_labelled) return;
+const handleDblClick = (event, field, type) => {
+	let ref = null;
+	if (type == "label") {
+		ref = field.labelRef;
+	} else if (type == "suffix") {
+		ref = field.suffixRef;
+	} else if (type == "main" && field.is_static) {
+		ref = field.spanRef;
+	}
+	if (!ref) return;
 	contenteditable.value = true;
 	setTimeout(() => {
 		event.target.focus();
-		selectElementContents(field.labelRef || field.spanRef);
+		selectElementContents(ref);
 	}, 0);
 };
 
 const handleBlur = (event, field) => {
 	contenteditable.value = false;
-	if (event.target == field.spanRef) {
-		field.value = event.target.innerHTML;
-	} else {
-		field.label = event.target.innerHTML;
+	if (!event.target.innerHTML) {
+		// If the field is empty, set the default value in HTML as well as in the field object
+		switch (event.target) {
+			case field.spanRef:
+				event.target.innerHTML = "Add Text";
+				break;
+			case field.labelRef:
+				event.target.innerHTML = "Add Label";
+				break;
+			case field.suffixRef:
+				event.target.innerHTML = "Add Suffix";
+				break;
+		}
+	}
+	switch (event.target) {
+		case field.spanRef:
+			field.value = event.target.innerHTML;
+			break;
+		case field.labelRef:
+			field.label = event.target.innerHTML;
+			break;
+		case field.suffixRef:
+			field.suffix = event.target.innerHTML;
+			break;
 	}
 };
 
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 2e3007d..11c0e0d 100644
--- a/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
+++ b/print_designer/public/js/print_designer/components/layout/AppDynamicTextModal.vue
@@ -324,6 +324,7 @@ const selectField = async (field, fieldtype) => {
 		value,
 		fieldtype,
 		label: props.table ? field.label : `${field.label} :`,
+		suffix: null,
 		is_labelled: false,
 		is_static: false,
 		print_hide: field.print_hide,
diff --git a/print_designer/public/js/print_designer/components/layout/AppPropertiesFrappeControl.vue b/print_designer/public/js/print_designer/components/layout/AppPropertiesFrappeControl.vue
index 385546d..4408ad9 100644
--- a/print_designer/public/js/print_designer/components/layout/AppPropertiesFrappeControl.vue
+++ b/print_designer/public/js/print_designer/components/layout/AppPropertiesFrappeControl.vue
@@ -10,6 +10,7 @@
 				field.frappeControl(el, field.name);
 			}
 		"
+		:key="MainStore.getCurrentElementsValues[0]?.id || '' + field.name"
 		class="frappeControl"
 	></div>
 </template>
diff --git a/print_designer/public/js/print_designer/defaultObjects.js b/print_designer/public/js/print_designer/defaultObjects.js
index c4fd3a8..2b64547 100644
--- a/print_designer/public/js/print_designer/defaultObjects.js
+++ b/print_designer/public/js/print_designer/defaultObjects.js
@@ -152,6 +152,7 @@ export const createTable = (cordinates, parent = null) => {
 		table: null,
 		columns: [],
 		PreviewRowNo: 1,
+		selectedColumn: null,
 		selectedDynamicText: null,
 		startX: cordinates.startX,
 		startY: cordinates.startY,
@@ -164,6 +165,7 @@ export const createTable = (cordinates, parent = null) => {
 		style: {},
 		labelStyle: {},
 		headerStyle: {},
+		altStyle: {},
 		classes: [],
 	};
 
diff --git a/print_designer/public/js/print_designer/frappeControl.js b/print_designer/public/js/print_designer/frappeControl.js
index 9c2cd48..b887e34 100644
--- a/print_designer/public/js/print_designer/frappeControl.js
+++ b/print_designer/public/js/print_designer/frappeControl.js
@@ -56,10 +56,19 @@ export const makeFeild = ({
 						last_value = value;
 						obj_value = formatValue(object, propertyName, isStyle);
 
-						if (value && formatValue(object, propertyName, isStyle) != value) {
+						if (
+							(value || fieldtype == "Color") &&
+							formatValue(object, propertyName, isStyle) != value
+						) {
 							object[propertyName] = value;
 							onChangeCallback && onChangeCallback(value);
 						} else if (!value && formatValue(object, propertyName, isStyle)) {
+							if (
+								fieldtype == "Color" &&
+								propertyName == "backgroundColor" &&
+								!value
+							)
+								return;
 							MainStore.frappeControls[name].set_value(
 								formatValue(object, propertyName, isStyle)
 							);
@@ -187,9 +196,10 @@ export const makeFeild = ({
 							];
 						} else {
 							MainStore.frappeControls[name].df.options = [
-								{ label: "Label Element", value: "label" },
-								{ label: "Main Element", value: "main" },
-								{ label: "Header Element", value: "header" },
+								{ label: "Table Header", value: "header" },
+								{ label: "All Rows", value: "main" },
+								{ label: "Alternate Rows", value: "alt" },
+								{ label: "Field Labels", value: "label" },
 							];
 						}
 						MainStore.frappeControls[name].refresh();
diff --git a/print_designer/public/js/print_designer/globalStyles.js b/print_designer/public/js/print_designer/globalStyles.js
index caa4a08..b753b54 100644
--- a/print_designer/public/js/print_designer/globalStyles.js
+++ b/print_designer/public/js/print_designer/globalStyles.js
@@ -24,7 +24,7 @@ export const globalStyles = {
 			borderColor: "#000000",
 			borderStyle: "solid",
 			borderRadius: 0,
-			backgroundColor: "#ffffff",
+			backgroundColor: "",
 			paddingTop: "0px",
 			paddingBottom: "0px",
 			paddingLeft: "0px",
@@ -67,7 +67,7 @@ export const globalStyles = {
 			borderColor: "#000000",
 			borderStyle: "solid",
 			borderRadius: 0,
-			backgroundColor: "#ffffff",
+			backgroundColor: "",
 			paddingTop: "0px",
 			paddingBottom: "0px",
 			paddingLeft: "0px",
@@ -98,7 +98,7 @@ export const globalStyles = {
 			borderColor: "#000000",
 			borderStyle: "solid",
 			borderRadius: 0,
-			backgroundColor: "#ffffff",
+			backgroundColor: "",
 			paddingTop: "0px",
 			paddingBottom: "0px",
 			paddingLeft: "0px",
@@ -135,7 +135,7 @@ export const globalStyles = {
 			minWidth: "0px",
 			minHeight: "0px",
 			color: "#000000",
-			backgroundColor: "#ffffff",
+			backgroundColor: "",
 			border: "1px solid black",
 			borderColor: "#000000",
 			borderStyle: "solid",
@@ -216,6 +216,7 @@ export const globalStyles = {
 		isDynamic: true,
 		mainRuleSelector: ".printTable td",
 		headerRuleSelector: ".printTable th",
+		altRuleSelector: ".printTable tr:nth-child(even) td",
 		labelRuleSelector: ".printTable .label-text",
 		style: {
 			fontFamily: "Inter",
@@ -310,5 +311,6 @@ export const globalStyles = {
 			opacity: 1,
 			zIndex: 1,
 		},
+		altStyle: {},
 	}),
 };
diff --git a/print_designer/public/js/print_designer/store/ElementStore.js b/print_designer/public/js/print_designer/store/ElementStore.js
index a49fdaf..c5061c0 100644
--- a/print_designer/public/js/print_designer/store/ElementStore.js
+++ b/print_designer/public/js/print_designer/store/ElementStore.js
@@ -440,33 +440,48 @@ export const useElementStore = defineStore("ElementStore", {
 						{
 							id: 0,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						},
 						{
 							id: 1,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						},
 						{
 							id: 2,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						},
 						{
 							id: 3,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						},
 						{
 							id: 4,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						},
 						{
 							id: 5,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						},
 						{
 							id: 6,
 							label: "",
+							style: {},
+							applyStyleToHeader: false,
 						},
 					],
 					PreviewRowNo: 1,
+					selectedColumn: null,
 					selectedDynamicText: null,
 					startX: 11.338582677,
 					startY: 393.826771658,
@@ -479,6 +494,7 @@ export const useElementStore = defineStore("ElementStore", {
 					style: {},
 					labelStyle: {},
 					headerStyle: {},
+					altStyle: {},
 					classes: [],
 				};
 				this.Elements.push(newTable);
diff --git a/print_designer/public/js/print_designer/store/MainStore.js b/print_designer/public/js/print_designer/store/MainStore.js
index ea0e70f..1e00a86 100644
--- a/print_designer/public/js/print_designer/store/MainStore.js
+++ b/print_designer/public/js/print_designer/store/MainStore.js
@@ -370,6 +370,7 @@ export const useMainStore = defineStore("MainStore", {
 				main: "style",
 				label: "labelStyle",
 				header: "headerStyle",
+				alt: "altStyle",
 			});
 			let styleEditMode;
 			if (object) {
@@ -403,11 +404,14 @@ export const useMainStore = defineStore("MainStore", {
 				main: "style",
 				label: "labelStyle",
 				header: "headerStyle",
+				alt: "altStyle",
 			});
 			let styleEditMode = mapper[object.styleEditMode];
 			return !isFontStyle
-				? object[styleEditMode]
-				: object.selectedDynamicText?.[styleEditMode] || object[styleEditMode];
+				? object.selectedColumn?.["style"] || object[styleEditMode]
+				: object.selectedDynamicText?.[styleEditMode] ||
+						object.selectedColumn?.["style"] ||
+						object[styleEditMode];
 		},
 		getCurrentStyle: (state) => (propertyName) => {
 			let object = state.getCurrentElementsValues[0];
@@ -416,13 +420,31 @@ export const useMainStore = defineStore("MainStore", {
 				main: "style",
 				label: "labelStyle",
 				header: "headerStyle",
+				alt: "altStyle",
 			});
 			let styleEditMode = mapper[object.styleEditMode];
-			return (
-				object.selectedDynamicText?.[styleEditMode][propertyName] ||
-				object[styleEditMode][propertyName] ||
-				state.getGlobalStyleObject[propertyName]
-			);
+			if (propertyName != "backgroundColor") {
+				return (
+					object.selectedDynamicText?.[styleEditMode][propertyName] ||
+					object.selectedColumn?.["style"][propertyName] ||
+					object[styleEditMode][propertyName] ||
+					state.getGlobalStyleObject[propertyName]
+				);
+			} else {
+				// we need to check if empty string incase it is background color and set as transparent
+				if (typeof object.selectedDynamicText?.[styleEditMode][propertyName] == "string") {
+					return object.selectedDynamicText?.[styleEditMode][propertyName];
+				}
+				if (typeof object.selectedColumn?.["style"][propertyName] == "string") {
+					return object.selectedColumn?.["style"][propertyName];
+				}
+				if (typeof object[styleEditMode][propertyName] == "string") {
+					return object[styleEditMode][propertyName];
+				}
+				if (typeof state.getGlobalStyleObject[propertyName] == "string") {
+					return state.getGlobalStyleObject[propertyName];
+				}
+			}
 		},
 	},
 	actions: {
@@ -466,7 +488,7 @@ export const useMainStore = defineStore("MainStore", {
 				for (let pl = rule.length; j < pl; j++) {
 					const prop = rule[j];
 					prop[0] = prop[0]
-						.replace(/([a-z])([A-Z])/g, "$1-$2")
+						?.replace(/([a-z])([A-Z])/g, "$1-$2")
 						.replace(/[\s_]+/g, "-")
 						.toLowerCase();
 					propStr += `${prop[0]}: ${prop[1]}${prop[2] ? " !important" : ""};\n`;
@@ -510,6 +532,15 @@ export const useMainStore = defineStore("MainStore", {
 						element[1].headerCssRule = markRaw(this.screenStyleSheet.cssRules[id]);
 					}
 				}
+				if (!element[1].altCssRule) {
+					let altSelector = element[1].altRuleSelector;
+					if (altSelector) {
+						const id = this.addStylesheetRules([
+							[altSelector, [...Object.entries(element[1].altStyle)]],
+						]);
+						element[1].altCssRule = markRaw(this.screenStyleSheet.cssRules[id]);
+					}
+				}
 			});
 		},
 	},
diff --git a/print_designer/public/js/print_designer/store/fetchMetaAndData.js b/print_designer/public/js/print_designer/store/fetchMetaAndData.js
index a27b177..f40b8f3 100644
--- a/print_designer/public/js/print_designer/store/fetchMetaAndData.js
+++ b/print_designer/public/js/print_designer/store/fetchMetaAndData.js
@@ -66,7 +66,15 @@ export const getMeta = async (doctype, parentField) => {
 	let fields = [];
 	childfields.map((field) => {
 		let obj = {};
-		["fieldname", "fieldtype", "label", "options", "print_hide"].forEach((attr) => {
+		[
+			"fieldname",
+			"fieldtype",
+			"label",
+			"options",
+			"print_hide",
+			"is_virtual",
+			"in_list_view",
+		].forEach((attr) => {
 			obj[attr] = field[attr];
 		});
 		fields.push({ ...obj });
diff --git a/print_designer/public/js/print_designer/utils.js b/print_designer/public/js/print_designer/utils.js
index e4f32fa..920e180 100644
--- a/print_designer/public/js/print_designer/utils.js
+++ b/print_designer/public/js/print_designer/utils.js
@@ -159,6 +159,7 @@ const childrensCleanUp = (parentElement, element, isClone, isMainElement) => {
 	element.style = { ...element.style };
 	element.labelStyle && (element.labelStyle = { ...element.labelStyle });
 	element.headerStyle && (element.headerStyle = { ...element.headerStyle });
+	element.altStyle && (element.altStyle = { ...element.altStyle });
 	element.classes = [...element.classes];
 	element.snapPoints = [];
 	element.snapEdges = [];
@@ -615,7 +616,7 @@ export const handleBorderIconClick = (element, icon) => {
 	}
 };
 
-const getGlobalStyleObject = (object = null) => {
+const getGlobalStyleObject = (object = null, checkProperty = null) => {
 	const MainStore = useMainStore();
 	let globalStyleName = MainStore.activeControl;
 	if (globalStyleName == "text") {
@@ -642,6 +643,12 @@ const getGlobalStyleObject = (object = null) => {
 			return MainStore.globalStyles[globalStyleName].labelStyle;
 		case "header":
 			return MainStore.globalStyles[globalStyleName].headerStyle;
+		case "alt":
+			if (checkProperty && MainStore.globalStyles[globalStyleName].altStyle[checkProperty]) {
+				return MainStore.globalStyles[globalStyleName].altStyle;
+			} else {
+				return MainStore.globalStyles[globalStyleName].style;
+			}
 	}
 };
 export const getConditonalObject = (field) => {
@@ -657,9 +664,12 @@ export const getConditonalObject = (field) => {
 			switch (object.styleEditMode) {
 				case "main":
 					if (field.isFontStyle) {
-						object = object.selectedDynamicText?.style || object.style;
+						object =
+							object.selectedDynamicText?.style ||
+							object.selectedColumn?.style ||
+							object.style;
 					} else {
-						object = object.style;
+						object = object.selectedColumn?.style || object.style;
 					}
 					break;
 				case "label":
@@ -676,10 +686,22 @@ export const getConditonalObject = (field) => {
 						object = object.headerStyle;
 					}
 					break;
+				case "alt":
+					if (field.isFontStyle) {
+						// This is not implemented yet but will be implemented in future if user requests it.
+						object = object.selectedDynamicText?.altStyle || object.altStyle;
+					} else {
+						object = object.altStyle;
+					}
+					// Incase There is no Alternate Style Fallback to All Row/Main Style
+					if (property && !object[property]) {
+						object = orignalObject.style;
+					}
+					break;
 			}
 			if (property) {
 				if (object[property]) return object[property];
-				return getGlobalStyleObject(orignalObject)[property];
+				return getGlobalStyleObject(orignalObject, property)[property];
 			}
 		} else {
 			return getGlobalStyleObject();
@@ -705,6 +727,27 @@ export const handlePrintFonts = (element, printFonts) => {
 			el?.[styleEditMode]?.["fontStyle"] ||
 			element[styleEditMode]["fontStyle"] ||
 			MainStore.globalStyles[globalStyleName][styleEditMode]["fontStyle"];
+		// fallback to main style if not available in altstyle
+		if (styleEditMode == "altStyle") {
+			if (!fontFamily) {
+				fontFamily =
+					el?.["style"]?.["fontFamily"] ||
+					element["style"]["fontFamily"] ||
+					MainStore.globalStyles[globalStyleName]["style"]["fontFamily"];
+			}
+			if (!fontWeight) {
+				fontWeight =
+					el?.["style"]?.["fontWeight"] ||
+					element["style"]["fontWeight"] ||
+					MainStore.globalStyles[globalStyleName]["style"]["fontWeight"];
+			}
+			if (!fontStyle) {
+				fontStyle =
+					el?.["style"]?.["fontStyle"] ||
+					element["style"]["fontStyle"] ||
+					MainStore.globalStyles[globalStyleName]["style"]["fontStyle"];
+			}
+		}
 		if (!fontFamily || !fontWeight || !fontStyle) return;
 		if (!printFonts[fontFamily]) {
 			printFonts[fontFamily] = {
@@ -724,6 +767,7 @@ export const handlePrintFonts = (element, printFonts) => {
 	}
 	if (element.type == "table") {
 		styleModes.push("headerStyle");
+		styleModes.push("altStyle");
 	}
 	styleModes.forEach((styleEditMode) => {
 		let globalStyleName = element.type;
@@ -737,18 +781,20 @@ export const handlePrintFonts = (element, printFonts) => {
 		pushFonts({ styleEditMode, globalStyleName });
 		if (element.dynamicContent) {
 			element.dynamicContent.forEach((el) => {
-				if (styleEditMode != "headerStyle") {
+				if (["headerStyle", "altStyle"].indexOf(styleEditMode) == -1) {
 					pushFonts({ el, styleEditMode, globalStyleName });
 				}
 			});
 		} else if (element.columns) {
-			element.columns.forEach((col) => {
-				col.dynamicContent?.forEach((el) => {
-					if (styleEditMode != "headerStyle") {
+			if (["headerStyle", "altStyle"].indexOf(styleEditMode) != -1) {
+				pushFonts({ el: element, styleEditMode, globalStyleName });
+			} else {
+				element.columns.forEach((col) => {
+					col.dynamicContent?.forEach((el) => {
 						pushFonts({ el, styleEditMode, globalStyleName });
-					}
+					});
 				});
-			});
+			}
 		}
 	});
 };