diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 66272c88b..0d6f4ab0c 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -15,11 +15,11 @@
 
 // Components
 @import "components/accordion", "components/badge", "components/button",
-	"components/card", "components/bulkactions", "components/tags",
-	"components/list-group", "components/modal", "components/nav",
-	"components/search", "components/typography", "components/scroll-ui",
-	"components/dropdown", "components/input", "components/toggle",
-	"components/navigation";
+"components/card", "components/bulkactions", "components/tags",
+"components/list-group", "components/modal", "components/nav",
+"components/search", "components/typography", "components/scroll-ui",
+"components/dropdown", "components/input", "components/toggle",
+"components/navigation";
 
 @import "border";
 @import "spacing";
@@ -50,9 +50,11 @@
 }
 
 body {
+
 	&.user-registration,
 	&.user-registration-page {
 		#wpbody-content {
+
 			.ur-admin-page-topnav,
 			.memberships,
 			.ur-registered-from,
@@ -68,6 +70,7 @@ body {
 					sans-serif;
 
 				table {
+
 					th,
 					td {
 						font-family:
@@ -107,6 +110,7 @@ body {
 
 	&[class*="user-registration-"],
 	&[class^="ur-"] {
+
 		/* Minimal WordPress Editor Styles */
 		.wp-editor-container {
 			border-radius: 8px !important;
@@ -127,7 +131,7 @@ body {
 				margin-bottom: 0 !important;
 				padding: 6px 8px !important;
 
-				&-grp > div {
+				&-grp>div {
 					padding: 0;
 				}
 
@@ -353,6 +357,7 @@ body {
 
 .user-registration {
 	&__wrap {
+
 		*,
 		::before,
 		::after {
@@ -556,6 +561,7 @@ body {
 			.plugin-card-bottom {
 				.action-buttons {
 					.button.updating-message {
+
 						&::before,
 						&::after {
 							margin-top: -1px;
@@ -1044,6 +1050,7 @@ body {
 		}
 
 		input {
+
 			&[type="radio"],
 			&[type="checkbox"] {
 				opacity: 1;
@@ -1079,6 +1086,7 @@ body {
 				}
 
 				input {
+
 					&[type="radio"],
 					&[type="checkbox"] {
 						display: none;
@@ -1291,10 +1299,7 @@ body {
 							}
 
 							&::after {
-								filter: brightness(0) saturate(100%) invert(35%)
-									sepia(13%) saturate(3079%)
-									hue-rotate(194deg) brightness(96%)
-									contrast(89%);
+								filter: brightness(0) saturate(100%) invert(35%) sepia(13%) saturate(3079%) hue-rotate(194deg) brightness(96%) contrast(89%);
 							}
 						}
 					}
@@ -1339,9 +1344,7 @@ body {
 							}
 
 							&::after {
-								filter: invert(36%) sepia(58%) saturate(767%)
-									hue-rotate(193deg) brightness(84%)
-									contrast(88%);
+								filter: invert(36%) sepia(58%) saturate(767%) hue-rotate(193deg) brightness(84%) contrast(88%);
 							}
 						}
 
@@ -1590,7 +1593,7 @@ body {
 					padding-bottom: $spacing_16px;
 					margin-bottom: 0;
 
-					~ hr {
+					~hr {
 						display: none;
 						border-top: 1px solid $border-color;
 						margin: 0;
@@ -1759,8 +1762,7 @@ body {
 
 					&:first-child {
 						border-radius: 0 0 0 $border_radius_4;
-						border-right: $border_width solid
-							transparentize($white, 0.8);
+						border-right: $border_width solid transparentize($white, 0.8);
 					}
 
 					&:nth-child(2) {
@@ -1870,8 +1872,7 @@ body {
 						}
 
 						&.ui-sortable-helper {
-							box-shadow: 0 0 10px 5px
-								transparentize($gray_base, 0.9);
+							box-shadow: 0 0 10px 5px transparentize($gray_base, 0.9);
 						}
 
 						&.ui-sortable-placeholder {
@@ -1976,7 +1977,7 @@ body {
 						}
 					}
 
-					> li.ur-item-dragged {
+					>li.ur-item-dragged {
 						list-style: none;
 						width: 100%;
 						text-align: center;
@@ -2433,6 +2434,7 @@ body {
 			}
 
 			.ur-multiple-choice .ur-subscription-plan {
+
 				.ur-regular-price,
 				.ur-selling-price {
 					display: grid;
@@ -2454,7 +2456,7 @@ body {
 					margin-right: 0;
 				}
 
-				> input[type="text"] {
+				>input[type="text"] {
 					width: 80%;
 				}
 
@@ -2554,7 +2556,7 @@ body {
 		flex-wrap: wrap;
 		margin-bottom: $spacing_8px;
 
-		> div {
+		>div {
 			margin-right: $spacing_8px;
 		}
 
@@ -2585,8 +2587,7 @@ body {
 		}
 	}
 
-	&:has(.collapsed) {
-	}
+	&:has(.collapsed) {}
 }
 
 /**
@@ -2906,8 +2907,7 @@ body {
 			&.entered {
 				display: block;
 				height: 50px;
-				animation: 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) 0s 1
-					normal both open-message;
+				animation: 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) 0s 1 normal both open-message;
 
 				.ur-error {
 					display: flex;
@@ -2928,8 +2928,7 @@ body {
 
 			&.exiting {
 				display: block;
-				animation: 120ms cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both
-					close-message;
+				animation: 120ms cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both close-message;
 			}
 
 			&:first-child {
@@ -3024,8 +3023,7 @@ body {
 }
 
 @media screen and (max-width: 600px) {
-	.user-registration-membership_page_add-new-registration
-		.major-publishing-actions {
+	.user-registration-membership_page_add-new-registration .major-publishing-actions {
 		clear: both;
 		padding: 10px 0 19px;
 		line-height: 28px;
@@ -3101,16 +3099,16 @@ body {
 			height: 22px;
 			width: 40px;
 
-			&:checked + .slider {
+			&:checked+.slider {
 				// background-color: $primary_color;
 			}
 
-			&:focus + .slider {
+			&:focus+.slider {
 				// box-shadow: 0 0 1px #2196f3;
 				box-shadow: none;
 			}
 
-			&:checked + .slider::before {
+			&:checked+.slider::before {
 				transform: translateX(16px);
 			}
 		}
@@ -3382,6 +3380,7 @@ body {
 				}
 
 				&.loading {
+
 					.ur-button,
 					.ur-button::before,
 					.ur-button::after {
@@ -3425,6 +3424,7 @@ body {
 					}
 
 					@-webkit-keyframes load1 {
+
 						0%,
 						80%,
 						100% {
@@ -3439,6 +3439,7 @@ body {
 					}
 
 					@keyframes load1 {
+
 						0%,
 						80%,
 						100% {
@@ -3537,8 +3538,7 @@ body {
 					margin-right: 0;
 					border-left: 3px solid #f27474;
 					justify-content: flex-start;
-					padding: $spacing_12px $spacing_6px $spacing_12px
-						$spacing_6px;
+					padding: $spacing_12px $spacing_6px $spacing_12px $spacing_6px;
 				}
 			}
 
@@ -3617,8 +3617,7 @@ body {
 								transform-origin: left top;
 								border-top: 2px solid $color_gray-lighten;
 								border-right: 2px solid $color_gray-lighten;
-								transform: scaleX(-1) rotate(135deg)
-									translate(-58%, -40%);
+								transform: scaleX(-1) rotate(135deg) translate(-58%, -40%);
 							}
 						}
 
@@ -4163,8 +4162,7 @@ a.button.ur-smart-tags-list-button {
 						font-size: 22px;
 						line-height: 130%;
 						color: $grey-500;
-						padding: $spacing_4px $spacing_8px $spacing_4px
-							$spacing_12px;
+						padding: $spacing_4px $spacing_8px $spacing_4px $spacing_12px;
 						margin: 0;
 						border: $border_width solid transparent;
 						border-radius: 0;
@@ -4337,6 +4335,7 @@ a.button.ur-smart-tags-list-button {
 							}
 
 							&.very-weak {
+
 								&:hover,
 								&.active {
 									label {
@@ -4348,6 +4347,7 @@ a.button.ur-smart-tags-list-button {
 							}
 
 							&.weak {
+
 								&:hover,
 								&.active {
 									label {
@@ -4359,6 +4359,7 @@ a.button.ur-smart-tags-list-button {
 							}
 
 							&.medium {
+
 								&:hover,
 								&.active {
 									label {
@@ -4370,6 +4371,7 @@ a.button.ur-smart-tags-list-button {
 							}
 
 							&.strong {
+
 								&:hover,
 								&.active {
 									label {
@@ -4381,6 +4383,7 @@ a.button.ur-smart-tags-list-button {
 							}
 
 							&.custom {
+
 								&:hover,
 								&.active {
 									label {
@@ -4674,15 +4677,12 @@ a.button.ur-smart-tags-list-button {
 
 														.ur-copy-shortcode {
 															box-shadow: none;
-															transition: all 0.3s
-																ease-in-out;
+															transition: all 0.3s ease-in-out;
 
 															svg {
 																path {
 																	fill: $primary_color;
-																	transition: all
-																		0.3s
-																		ease-in-out;
+																	transition: all 0.3s ease-in-out;
 																}
 															}
 
@@ -4736,8 +4736,7 @@ a.button.ur-smart-tags-list-button {
 
 										&:hover {
 											background-color: #f8f8fa;
-											border: $border_width dashed
-												$primary_color;
+											border: $border_width dashed $primary_color;
 
 											&::before {
 												content: "";
@@ -4747,8 +4746,7 @@ a.button.ur-smart-tags-list-button {
 												display: flex;
 												align-items: center;
 												justify-content: center;
-												border-radius: 0 0 0
-													$border_radius_7;
+												border-radius: 0 0 0 $border_radius_7;
 												background: #676f8a;
 												top: 0;
 												right: 0;
@@ -4784,26 +4782,17 @@ a.button.ur-smart-tags-list-button {
 		padding-left: 0;
 	}
 
-	.user-registration-membership_page_add-new-registration
-		.ur-form-container
-		#menu-management
-		.menu-edit {
+	.user-registration-membership_page_add-new-registration .ur-form-container #menu-management .menu-edit {
 		left: $spacing_36px !important;
 	}
 
-	.ur-registered-from
-		.ur-registered-inputs
-		.ur-tab-contents
-		button#ur-collapse {
+	.ur-registered-from .ur-registered-inputs .ur-tab-contents button#ur-collapse {
 		left: 448px;
 	}
 }
 
 @media screen and (max-width: 782px) {
-	.user-registration-membership_page_add-new-registration
-		.ur-form-container
-		#menu-management
-		.menu-edit {
+	.user-registration-membership_page_add-new-registration .ur-form-container #menu-management .menu-edit {
 		left: 0 !important;
 	}
 }
@@ -4835,7 +4824,7 @@ a.button.ur-smart-tags-list-button {
 								}
 
 								&-sub-details {
-									> p {
+									>p {
 										display: flex;
 										align-items: center;
 										gap: $spacing_8px;
@@ -4864,10 +4853,8 @@ a.button.ur-smart-tags-list-button {
 				td {
 					&:has(.user-registration-user-profile-info) {
 						display: grid;
-						grid-template-columns: repeat(
-							auto-fill,
-							minmax(160px, 1fr)
-						);
+						grid-template-columns: repeat(auto-fill,
+								minmax(160px, 1fr));
 						gap: $spacing_12px;
 						width: 760px;
 
@@ -4878,6 +4865,7 @@ a.button.ur-smart-tags-list-button {
 
 					.user-registration-user-profile-info {
 						input {
+
 							&[type="radio"],
 							&[type="checkbox"] {
 								display: none;
@@ -4933,7 +4921,7 @@ a.button.ur-smart-tags-list-button {
 
 						input[type="radio"],
 						input[type="checkbox"] {
-							&:checked ~ label {
+							&:checked~label {
 								color: #0693e3;
 								border-color: #0693e3;
 
@@ -4981,7 +4969,7 @@ a.button.ur-smart-tags-list-button {
 	padding: $spacing_14px 0px;
 	cursor: pointer;
 
-	& ~ .select2-container {
+	&~.select2-container {
 		visibility: hidden;
 		position: absolute;
 		right: 0;
@@ -5032,6 +5020,7 @@ a.button.ur-smart-tags-list-button {
 						}
 
 						li {
+
 							&.select2-results__option--highlighted,
 							&[data-selected="true"] {
 								background: #f8f8fa;
@@ -5257,7 +5246,7 @@ body.user-registration {
 
 				.user-registration-toggle-form {
 					input {
-						&:checked + .slider {
+						&:checked+.slider {
 							background-color: $green;
 						}
 					}
@@ -5306,7 +5295,7 @@ body.user-registration {
 			}
 		}
 
-		> .ur-button-primary {
+		>.ur-button-primary {
 			color: $grey-400;
 			font-size: 14px;
 			font-weight: $regular;
@@ -5607,7 +5596,7 @@ body.user-registration {
 			width: 275px;
 			position: relative;
 
-			> p {
+			>p {
 				display: none;
 			}
 
@@ -5720,6 +5709,7 @@ body.user-registration {
 		thead,
 		tfoot {
 			tr {
+
 				td,
 				th {
 					border-bottom-color: $border_color;
@@ -5839,7 +5829,7 @@ body.user-registration {
 					}
 
 					.row-actions {
-						> span {
+						>span {
 							font-weight: $regular;
 
 							a {
@@ -5853,6 +5843,7 @@ body.user-registration {
 
 		tfoot {
 			tr {
+
 				td,
 				th {
 					border-top-color: $border_color;
@@ -6165,6 +6156,7 @@ body.user-registration {
 					margin-top: 30px;
 
 					.button {
+
 						&-primary,
 						&-secondary {
 							min-height: 34px;
@@ -6521,10 +6513,8 @@ body.user-registration {
 
 					.icons-group {
 						display: grid;
-						grid-template-columns: repeat(
-							auto-fill,
-							minmax(100px, 1fr)
-						);
+						grid-template-columns: repeat(auto-fill,
+								minmax(100px, 1fr));
 						gap: 10px;
 						width: 100%;
 
@@ -6563,7 +6553,7 @@ body.user-registration {
 									&[type="radio"] {
 										display: none;
 
-										&:checked ~ .dashicons {
+										&:checked~.dashicons {
 											background: rgba(240, 242, 249, 1%);
 											border-color: $primary_color;
 										}
@@ -6741,12 +6731,10 @@ body {
 	font-family: "UserRegistration";
 	src: url("../fonts/UserRegistration.eot?v5p6f");
 	src:
-		url("../fonts/UserRegistration.eot?v5p6f#iefix")
-			format("embedded-opentype"),
+		url("../fonts/UserRegistration.eot?v5p6f#iefix") format("embedded-opentype"),
 		url("../fonts/UserRegistration.ttf?v5p6f") format("truetype"),
 		url("../fonts/UserRegistration.woff?v5p6f") format("woff"),
-		url("../fonts/UserRegistration.svg?v5p6f#UserRegistration")
-			format("svg");
+		url("../fonts/UserRegistration.svg?v5p6f#UserRegistration") format("svg");
 	font-weight: normal;
 	font-style: normal;
 	font-display: block;
@@ -6940,8 +6928,7 @@ body {
 										}
 									}
 
-									label[for="user_registration_login_options_prevent_core_login"]
-										span {
+									label[for="user_registration_login_options_prevent_core_login"] span {
 										bottom: 18px;
 										right: 20px;
 									}
@@ -7031,8 +7018,7 @@ body {
 										}
 
 										.ur-copy-shortcode {
-											border-radius: 0 $border_radius_4
-												$border_radius_4 0;
+											border-radius: 0 $border_radius_4 $border_radius_4 0;
 										}
 									}
 
@@ -7104,28 +7090,21 @@ body {
 		.ur--loading--animate {
 			margin-bottom: 10px;
 			background: #ececec;
-			background-image: -webkit-linear-gradient(
-				90deg,
-				#ddd 0px,
-				#e8e8e8 40px,
-				#ddd 80px
-			);
-			background-image: -o-linear-gradient(
-				90deg,
-				#ddd 0px,
-				#e8e8e8 40px,
-				#ddd 80px
-			);
-			background-image: linear-gradient(
-				90deg,
-				#ddd 0px,
-				#e8e8e8 40px,
-				#ddd 80px
-			);
+			background-image: -webkit-linear-gradient(90deg,
+					#ddd 0px,
+					#e8e8e8 40px,
+					#ddd 80px);
+			background-image: -o-linear-gradient(90deg,
+					#ddd 0px,
+					#e8e8e8 40px,
+					#ddd 80px);
+			background-image: linear-gradient(90deg,
+					#ddd 0px,
+					#e8e8e8 40px,
+					#ddd 80px);
 			background-size: 250px;
 			border-radius: 10px;
-			-webkit-animation: shine-loading-container-items 0.6s infinite
-				ease-out;
+			-webkit-animation: shine-loading-container-items 0.6s infinite ease-out;
 			animation: shine-loading-container-items 0.6s infinite ease-out;
 
 			&.loading-btn {
@@ -7140,31 +7119,24 @@ body {
 
 		.ur--loading--animate--long {
 			background: #f4f4f4;
-			background-image: -webkit-linear-gradient(
-				90deg,
-				#f4f4f4 0px,
-				#f8f8f8 40px,
-				#f8f8f8 70px,
-				#f4f4f4 80px
-			);
-			background-image: -o-linear-gradient(
-				90deg,
-				#f4f4f4 0px,
-				#f8f8f8 40px,
-				#f8f8f8 70px,
-				#f4f4f4 80px
-			);
-			background-image: linear-gradient(
-				90deg,
-				#f4f4f4 0px,
-				#f8f8f8 40px,
-				#f8f8f8 70px,
-				#f4f4f4 80px
-			);
+			background-image: -webkit-linear-gradient(90deg,
+					#f4f4f4 0px,
+					#f8f8f8 40px,
+					#f8f8f8 70px,
+					#f4f4f4 80px);
+			background-image: -o-linear-gradient(90deg,
+					#f4f4f4 0px,
+					#f8f8f8 40px,
+					#f8f8f8 70px,
+					#f4f4f4 80px);
+			background-image: linear-gradient(90deg,
+					#f4f4f4 0px,
+					#f8f8f8 40px,
+					#f8f8f8 70px,
+					#f4f4f4 80px);
 			background-size: 1400px;
 			border-radius: 10px;
-			-webkit-animation: shine-loading-container-items-long 1s infinite
-				ease-out;
+			-webkit-animation: shine-loading-container-items-long 1s infinite ease-out;
 			animation: shine-loading-container-items-long 1s infinite ease-out;
 
 			&.circular {
@@ -7237,6 +7209,7 @@ body {
 // For RTL Options CSS
 .user-registration {
 	&.rtl {
+
 		input,
 		textarea,
 		select {
@@ -7343,10 +7316,7 @@ body {
 		height: auto !important;
 	}
 
-	&.tooltipster-base
-		.tooltipster-arrow
-		.tooltipster-arrow-uncropped
-		.tooltipster-arrow-border {
+	&.tooltipster-base .tooltipster-arrow .tooltipster-arrow-uncropped .tooltipster-arrow-border {
 		border-top-color: #fff !important;
 		border-bottom-color: #fff !important;
 	}
@@ -7786,8 +7756,7 @@ body.user-registration {
 								top: 0;
 								opacity: 0;
 								z-index: -1;
-								border-radius: $border_radius_3 0 0
-									$border_radius_3;
+								border-radius: $border_radius_3 0 0 $border_radius_3;
 								transition: all 0.3s ease-in-out;
 							}
 
@@ -8060,6 +8029,7 @@ body.user-registration {
 		.ur-info-wrap {
 			table {
 				tr {
+
 					th,
 					td {
 						padding: 5px;
@@ -8300,7 +8270,7 @@ body.user-registration {
 					padding: 0 16px;
 					border-radius: 4px;
 
-					> li {
+					>li {
 						padding-right: 0;
 						padding-bottom: 0;
 
@@ -8312,7 +8282,7 @@ body.user-registration {
 							flex-direction: column;
 						}
 
-						> p {
+						>p {
 							span {
 								font-weight: $regular;
 								color: #6b6b6b;
@@ -8322,7 +8292,7 @@ body.user-registration {
 						.ur-user-payment-multiple-choice {
 							padding-left: 12px;
 
-							> li {
+							>li {
 								padding: 0;
 								padding-bottom: 10px;
 
@@ -8369,11 +8339,7 @@ $border-top-color_1: #ff4f55;
 	flex-direction: row-reverse;
 }
 
-#user-registration-pro-single-user-view
-	#user-registration-user-sidebar
-	.sidebar-box
-	ul
-	li:has(a) {
+#user-registration-pro-single-user-view #user-registration-user-sidebar .sidebar-box ul li:has(a) {
 	a.active {
 		background: #505bbf;
 
@@ -8605,6 +8571,7 @@ $border-top-color_1: #ff4f55;
 
 .tablenav-pages {
 	.button {
+
 		&.tablenav-pages-navspan,
 		&.first-page,
 		&.prev-page,
@@ -8627,8 +8594,10 @@ body.user-registration-page {
 			Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
 		#your-profile {
+
 			table.form-table,
 			#application-passwords-section {
+
 				select,
 				input,
 				textarea {
@@ -8949,7 +8918,7 @@ body.user-registration-page {
 			width: 275px;
 			position: relative;
 
-			> p {
+			>p {
 				display: none;
 			}
 
@@ -9027,6 +8996,7 @@ body.user-registration-page {
 		thead,
 		tfoot {
 			tr {
+
 				td,
 				th {
 					border-bottom-color: $border_color;
@@ -9168,6 +9138,7 @@ body.user-registration-page {
 
 		tfoot {
 			tr {
+
 				td,
 				th {
 					border-top-color: $border_color;
@@ -9679,9 +9650,7 @@ body.user-registration-page {
 						border: 1px solid #e1e1e1;
 						border-radius: 4px;
 
-						&:has(
-							.ur-tax-country-checkbox[type="checkbox"]:checked
-						) {
+						&:has(.ur-tax-country-checkbox[type="checkbox"]:checked) {
 							border-color: #475bb2;
 						}
 
@@ -9790,9 +9759,7 @@ body.user-registration-page {
 										}
 									}
 
-									&:has(
-										.ur-tax-entire-country-checkbox:checked
-									) {
+									&:has(.ur-tax-entire-country-checkbox:checked) {
 										&::before {
 											background: none;
 											border-color: #4755b2;
@@ -10184,4 +10151,4 @@ body.user-registration-page {
 	.user-registration-base-list-table-form .tablenav.top {
 		margin-top: 0;
 	}
-}
+}
\ No newline at end of file
diff --git a/assets/css/components/_typography.scss b/assets/css/components/_typography.scss
index f8e7974e5..e0ef1c590 100644
--- a/assets/css/components/_typography.scss
+++ b/assets/css/components/_typography.scss
@@ -5,16 +5,21 @@
         text-decoration: none;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         color: $grey-400;
         margin: 0;
         font-weight: $semi_bold;
     }
 
-    p {
-        font-size: 14px;
-        line-height: 24px;
-        color: $grey-400;
-        font-weight: $regular;
-    }
-}
+    // p {
+    //     font-size: 14px;
+    //     line-height: 24px;
+    //     color: $grey-400;
+    //     font-weight: $regular;
+    // }
+}
\ No newline at end of file
diff --git a/src/form-templates/App.js b/src/form-templates/App.js
index a7cbbafd1..70881ae97 100644
--- a/src/form-templates/App.js
+++ b/src/form-templates/App.js
@@ -29,21 +29,30 @@ const TabFilters = ({ onTabChange }) => {
 
 	return (
 		<Tabs variant="unstyled" ml="auto" onChange={onTabChange}>
-			<TabList gap="8px">
+			<TabList
+				bg="#f3f4f6"
+				gap="2px"
+				borderRadius="5px"
+				p="4px"
+				>
 				{filters.map((label) => (
 					<Tab
 						key={label}
 						_selected={{
 							color: "#475bb2",
-							borderBottom: "2px solid",
-							borderColor: "#475bb2"
+							bg:"white",
+							boxShadow:"0 4px 24px 0 rgba(10,10,10, .06)",
 						}}
-						color="#383838"
-						fontWeight="500"
-						fontSize="16px"
-						lineHeight="20px"
-						px={{ base: 1, md: 2 }} // Add horizontal padding to tabs
+						fontSize="14px"
+						lineHeight="24px"
+						color="#646970"
+						fontWeight="medium"
+						whiteSpace="nowrap"
+						h="32px"
+						borderRadius="4px"
+						p="6px 16px"
 						boxShadow="none !important"
+						ml="0px !important"
 					>
 						{label}
 					</Tab>
@@ -80,34 +89,29 @@ const App = () => {
 				border={"1px solid #e1e1e1"}
 				borderRadius={"13px"}
 				backgroundColor="white"
-				padding="24px 28px"
+				padding="24px"
+				overflow="hidden"
 			>
-				<Box gap="24px" display="flex" flexDirection="column">
+				<Box display="flex" flexDirection="column">
 					<HStack
 						align="center"
 						bg="white"
 						direction={{ base: "column", md: "row" }}
 						borderBottom="1px solid #e1e1e1"
-						padding="0 0 10px"
+						margin="0 -24px"
+						padding="0 24px 20px"
 						boxShadow="none"
 					>
-						<HStack gap="24px">
-							<HStack gap="16px">
-								<Heading
-									textAlign={{ base: "center", md: "left" }}
-									lineHeight="30px"
-									fontWeight="600"
-									margin="0"
-									fontSize={{
-										base: "16px",
-										md: "18px",
-										lg: "20px"
-									}}
-									color="#222222"
-								>
-									{__("Add New Form", "user-registration")}
-								</Heading>
-							</HStack>
+						<HStack gap="16px">
+							<Heading
+								lineHeight="26px"
+								fontWeight="600"
+								margin="0"
+								fontSize="18px"
+								color="#383838"
+							>
+								{__("Add New Form", "user-registration")}
+							</Heading>
 							<Button
 								style={{
 									border: "1px solid #475bb2",
@@ -118,7 +122,7 @@ const App = () => {
 								backgroundColor="#f6f7f7"
 								fontWeight="500"
 								height="34px"
-								padding="0 12px"
+								padding="0 16px"
 								alignContent="center"
 								fontSize="14px"
 								lineHeight="20px"
@@ -141,33 +145,6 @@ const App = () => {
 						<TabFilters onTabChange={handleTabChange} />
 					</HStack>
 					{/* Main Content Area */}
-					<Box bg="white" p="0" rounded="md" gap="24px">
-						<VStack align="start" gap="4px">
-							<Heading
-								as="h2"
-								fontSize="16px"
-								lineHeight="26px"
-								m={0}
-								color="#26262E"
-								fontWeight="500"
-								fontFamily={"inherit"}
-							>
-								{__("Select a Template", "user-registration")}
-							</Heading>
-							<Text
-								fontSize="14px"
-								lineHeight="25px"
-								fontWeight="400"
-								color="#4D4D4D"
-								m={0}
-							>
-								{__(
-									"To get started quickly, you can pick from our ready-made templates, begin with a blank form, or design your own.",
-									"user-registration"
-								)}
-							</Text>
-						</VStack>
-					</Box>
 					<Box bg="white" rounded="md" gap="24px" boxShadow="none">
 						<Main filter={selectedTab} />
 					</Box>
diff --git a/src/form-templates/components/Main.js b/src/form-templates/components/Main.js
index 93803a225..44f812bed 100644
--- a/src/form-templates/components/Main.js
+++ b/src/form-templates/components/Main.js
@@ -100,9 +100,11 @@ const Main = ({ filter }) => {
 		<Box>
 			<Flex direction={{ base: "column", md: "row" }}>
 				<Box
-					width={sidebarWidth}
-					mr={{ base: 0, md: 4 }}
-					mb={{ base: 4, md: 0 }}
+					maxWidth="320px"
+					w="100%"
+					pl="24px"
+					ml="-24px"
+					boxSizing="border-box"
 				>
 					<Sidebar
 						categories={categories}
@@ -111,13 +113,7 @@ const Main = ({ filter }) => {
 						onSearchChange={handleSearchChange}
 					/>
 				</Box>
-				<Box
-					width="1px"
-					bg="linear-gradient(90deg, #CDD0D8 0%, rgba(255, 255, 255, 0) 158.04%)"
-					mx="4"
-					marginRight="28px"
-				/>
-				<Box flex={1}>
+				<Box borderLeft="1px solid #e1e1e1" p="24px" mr="-24px" flex={1}>
 					<TemplateList
 						selectedCategory={selectedCategory}
 						templates={filteredTemplates}
diff --git a/src/form-templates/components/Sidebar.js b/src/form-templates/components/Sidebar.js
index 9f6403dc9..3ecebf179 100644
--- a/src/form-templates/components/Sidebar.js
+++ b/src/form-templates/components/Sidebar.js
@@ -47,7 +47,12 @@ const Sidebar = React.memo(
 				: categories;
 
 		return (
-			<Box>
+			<Box 
+				p="24px 24px 24px 0"
+				maxWidth="320px"
+				w="100%"
+				boxSizing="border-box"
+				>
 				<InputGroup mb="26px">
 					<InputLeftElement
 						pointerEvents="none"
@@ -83,14 +88,14 @@ const Sidebar = React.memo(
 					/>
 				</InputGroup>
 
-				<VStack align="stretch" gap="2px">
+				<VStack align="stretch" gap="4px">
 					{orderedCategories.map((category) => (
 						<HStack
 							key={category.name}
-							p="12px"
+							p="10px 10px 10px 16px"
+							bg="#f5f5f5"
 							_hover={{
-								bg: "#EDEFF7",
-								color: "#475bb2",
+								bg: "#f5f5f5",
 								"& > .badge": {
 									bg:
 										selectedCategory === category.name
@@ -100,25 +105,21 @@ const Sidebar = React.memo(
 							}}
 							borderRadius="md"
 							cursor="pointer"
+							justifyContent="space-between"
 							bg={
 								selectedCategory === category.name
-									? "#EDEFF7"
+									? "#f5f5f5"
 									: "transparent"
 							}
 							onClick={() => onCategorySelect(category.name)}
-							justifyContent="space-between"
 						>
 							<Text
-								color={
-									selectedCategory === category.name
-										? "#475bb2"
-										: ""
-								}
-								fontWeight="500"
+								className="urm-category-list"
+								color={selectedCategory === category.name ? "#475bb2" : "#4A5568"}
+								fontWeight="medium"
 								margin="0px"
-								fontSize="16px"
-								lineHeight="20px"
-								alignItems="center"
+								fontSize="14px"
+								lineHeight="22px"
 							>
 								{category.name}
 							</Text>
@@ -127,11 +128,11 @@ const Sidebar = React.memo(
 								display="flex"
 								alignItems="center"
 								justifyContent="center"
+								fontWeight="semibold"
 								width="32px"
-								height="32px"
-								padding="6px"
-								borderRadius="8px"
-								gap="10px"
+								height="26px"
+								padding="0"
+								borderRadius="4px"
 								color={
 									selectedCategory === category.name
 										? "#475bb2"
@@ -140,58 +141,56 @@ const Sidebar = React.memo(
 								bg={
 									selectedCategory === category.name
 										? "white"
-										: "#F2F2F2"
+										: "#f5f5f5"
 								}
 							>
 								{category.count}
 							</Badge>
 						</HStack>
 					))}
+
 					<Card
-						align="center"
-						background="linear-gradient(70deg, #475bb2, #94A7E7B2)"
-						padding="40px 24px"
+						align='center'
 						marginTop="26px"
-					>
-						<CardHeader padding="0px">
-							<Heading
-								fontSize="18px"
-								color="#ffffff"
-								lineHeight="28px"
-								padding="0px 20px"
-								textAlign="center"
-							>
-								{__(
-									"Can't Find The Form Template You Need?",
-									"user-registration"
-								)}
+						padding="16px"
+						bg="linear-gradient(135deg, rgba(64, 129, 240, 0.08), rgba(61,126,245,0.06))"
+						border="1px solid rgba(64, 99, 240, 0.18)"
+						borderRadius="9px"
+						boxShadow="none"
+						>
+						<CardHeader padding="0px" marginBottom="12px">
+							<Heading as="h5" fontSize="16px" color="#0f0f1a !important" lineHeight="26px" fontWeight="semibold"  padding="0px" margin="0px 0px 6px !important">
+							{__("Can't find a template?", "user-registration")}
 							</Heading>
+							<Text fontSize="14px" lineHeight="22px !important" color="#6b6b85 !important" margin="0">{__('Request a custom template built for your needs.', 'user-registration')}</Text>
 						</CardHeader>
 						<CardFooter padding="0" width="100%">
-							<a
-								href="https://wpuserregistration.com/request-template"
-								target="_blank"
-								rel="noopener noreferrer"
-								style={{ width: "inherit" }}
+						<a
+							href="https://wpuserregistration.com/request-template"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="evf-custom-template"
+							style={{
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								borderRadius:"4px",
+								width: "100%",
+								padding: "0px 12px",
+								background: "linear-gradient(135deg, #4045f0, #3d71f5)",
+								color: "white",
+								fontSize: "14px",
+								lineHeight: "24px",
+								fontWeight: "medium",
+								height: "34px"
+							}}
+							onFocus={(e) => {
+								e.currentTarget.style.outline = "none";
+								e.currentTarget.style.boxShadow = "none";
+							}}
 							>
-								<Button
-									backgroundColor="#FFFFFF"
-									color="#475bb2"
-									padding="12px 10px"
-									borderRadius="4px"
-									width="inherit"
-									fontWeight="500"
-									_hover={{
-										backgroundColor: "#475BB2",
-										color: "white !important"
-									}}
-								>
-									{__(
-										"Request Template",
-										"user-registration"
-									)}
-								</Button>
-							</a>
+								✦ {__("Request Template","user-registration")}
+						</a>
 						</CardFooter>
 					</Card>
 				</VStack>
diff --git a/src/form-templates/components/TemplateList.js b/src/form-templates/components/TemplateList.js
index 504cad0e1..70ca50e23 100644
--- a/src/form-templates/components/TemplateList.js
+++ b/src/form-templates/components/TemplateList.js
@@ -329,30 +329,132 @@ const TemplateList = ({ selectedCategory, templates }) => {
 
 	return (
 		<Box>
+			<VStack
+				position="relative"
+				bg="white"
+				border="1px solid rgba(0, 0, 0, 0.08)"
+				borderRadius="13px"
+				p="26px 30px"
+				mb="32px"
+				overflow="hidden"
+				display="flex"
+				alignItems="flex-start"
+				width="100%"
+				sx={{
+					'::before': {
+					content: '""',
+					position: "absolute",
+					inset: "0",
+					bg: "radial-gradient(ellipse 60% 120% at 100% 50%, rgba(64, 99, 240, 0.07) 0%, transparent 70%), radial-gradient(ellipse 40% 80% at 80% 20%, rgba(61, 126, 245, 0.06) 0%, transparent 60%)",
+					pointerEvents: "none",
+					},
+				}}
+				>
+				<Text
+					display="inline-block"
+					alignItems="center"
+					gap="6px"
+					bg="rgba(66, 64, 240, 0.08)"
+					border="1px solid rgba(64, 92, 240, 0.2)"
+					borderRadius="20px"
+					p="4px 12px"
+					fontSize="12px !important"
+					lineHeight="1.5 !important"
+					fontWeight="medium !important"
+					color="#475bb2 !important"
+					letterSpacing="0.23px"
+					m="0 0 12px"
+				>✦ {__('Ready-made templates', 'user-registration')}</Text>
+				<Heading
+					as="h2"
+					fontSize="26px"
+					lineHeight="1.2"
+					m="0 0 8px !important"
+					color="#0f0f1a !important"
+					fontWeight="700 !important"
+					fontFamily={"inherit"}
+				>
+					{__("Build faster with beautiful templates", "user-registration")}
+				</Heading>
+				<Text
+					fontSize="14px"
+					lineHeight="1.6"
+					fontWeight="400"
+					color="#4A5568"
+					maxWidth="480px"
+					m={0}
+				>
+					{__(
+						"Pick from 50 professionally designed form templates. Customize, deploy, and start collecting responses in minutes.",
+						"user-registration"
+					)}
+				</Text>
+			</VStack>
+		
 			<Heading
 				as="h3"
 				fontSize="18px"
 				lineHeight="26px"
+				letterSpacing="0.2px"
 				fontWeight="semibold"
-				m="0px 0px 32px"
+				m="0px 0px 32px !important"
 				color="#26262E"
 				borderBottom="1px solid #e1e1e1"
-				paddingBottom="20px"
-				mb="30px !important"
+				paddingBottom="12px"
 			>
-				{selectedCategory.toUpperCase()}
+				{selectedCategory}
 			</Heading>
 			{templates?.length ? (
-				<SimpleGrid
-					columns={{ base: 1, md: 2, lg: 2, xl: 3, "2xl": 4 }}
-					spacing={6}
-				>
-					{templates.map((template) => (
+				<SimpleGrid gridTemplateColumns="repeat(auto-fill, minmax(280px, 1fr))" spacing={6}>
+					{templates.map((template) => {
+						if (template.slug === 'blank') {
+							return (
+								<Box
+									key={template.slug}
+									borderWidth="2px"
+									borderStyle="dashed"
+									borderColor="#c3c3c3"
+									borderRadius="13px"
+									bg="white"
+									display="flex"
+									flexDirection="column"
+									minHeight="320px"
+									alignItems="center"
+									justifyContent="center"
+									cursor="pointer"
+									transition="all .3s"
+									onClick={() => handleTemplateClick(template)}
+									_hover={{
+										borderColor: '#475bb2',
+										boxShadow: '0px 5px 24px rgba(58, 34, 93, 0.12)',
+									}}
+								>
+									<Center
+										bg="rgba(71, 91, 178, 0.10)"
+										borderRadius="50%"
+										w="48px"
+										h="48px"
+										mb="16px"
+									>
+										<Icon viewBox="0 0 24 24" boxSize={6} color="#475bb2">
+											<path fill="currentColor" d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z" />
+										</Icon>
+									</Center>
+									<Heading fontSize="18px" fontWeight="600" mb="8px !important" color="#0f0f1a">
+										{__('Start Blank', 'everest-forms')}
+									</Heading>
+									<Text fontSize="14px" color="gray.500" m={0}>
+										{__('Create from scratch', 'user-registration')}
+									</Text>
+								</Box>
+							);
+						}
+
+						return (
 						<Box
 							key={template.slug}
-							borderWidth="2px"
+							border="1px solid #e1e1e1"
 							borderRadius="8px"
-							borderColor="#F6F4FA"
 							overflow="hidden"
 							position="relative"
 							onMouseOver={() => setHoverCardId(template.id)}
@@ -362,46 +464,47 @@ const TemplateList = ({ selectedCategory, templates }) => {
 							p={0}
 							transition="all .3s"
 							_hover={{
+								borderColor:"transparent",
 								boxShadow:
 									"0px 5px 24px rgba(58, 34, 93, 0.12)",
-								"::before": {
+								'::before': {
 									content: '""',
-									position: "absolute",
+									position: 'absolute',
 									top: 0,
 									left: 0,
-									width: "100%",
-									height: "207px",
-									bg: "rgba(0, 0, 0, 0.4)",
-									zIndex: 1
+									width: '100%',
+									height: '250px',
+									bg: "#181818",
+									opacity: ".5",
+									zIndex: 1,
 								},
 								"& > div > .template-title": {
 									color: "#475bb2"
 								}
 							}}
 						>
-							<Center mb={0} height="207px">
+							<Center mb={0}>
 								<Box
 									position="relative"
 									width="100%"
-									height="100%"
+									height="250px"
 									display="flex"
 									justifyContent="center"
-									alignItems="center"
-									bg="#ECECF6"
-									borderRadius="4px 4px 0px 0px"
+									alignItems="flex-start"
+									bg= { 'linear-gradient(129deg, #F3F2F8 2.83%, #F7F5F9 110.96%)' }
+									p="10px 18px 0"
+									borderRadius="6px 6px 0px 0px"
 									overflow="hidden"
 									transition="all .3s"
+									borderBottom="1px solid #e1e1e1"
 								>
 									<Image
-										boxShadow={
-											template.slug == "blank"
-												? "none"
-												: "0px 3px 12px rgba(58, 34, 93, 0.12)"
-										}
+										boxShadow="0 6px 14px 0 #E5E1EF"
 										src={modifyImageUrl(template.imageUrl)}
 										alt={template.title}
 										objectFit="contain"
-										height="100%"
+										borderRadius="6px"
+										marginTop="8px"
 									/>
 									{template.isPro ? (
 										!licenseDetail ? (
@@ -412,11 +515,11 @@ const TemplateList = ({ selectedCategory, templates }) => {
 												bottom="12px"
 												right="12px"
 												borderRadius="4px"
-												fontSize="12px"
-												p="2px 6px"
-												textTransform="capitalize"
+												fontSize="11px"
+												fontWeight="semibold"
+												p="4px 8px"
+												textTransform="uppercase"
 												zIndex="2"
-												fontWeight="500"
 											>
 												{__("Pro", "user-registration")}
 											</Badge>
@@ -428,11 +531,11 @@ const TemplateList = ({ selectedCategory, templates }) => {
 												bottom="12px"
 												right="12px"
 												borderRadius="4px"
-												fontSize="12px"
-												p="2px 6px"
-												textTransform="capitalize"
+												fontSize="11px"
+												p="4px 8px"
+												textTransform="uppercase"
 												zIndex="2"
-												fontWeight="500"
+												fontWeight="semibold"
 											>
 												{template.plan?.[0] ||
 													__(
@@ -444,8 +547,8 @@ const TemplateList = ({ selectedCategory, templates }) => {
 									) : null}
 									{/* Hover Buttons */}
 									{hoverCardId === template.id && (
-										<VStack
-											spacing={4}
+										<HStack
+											spacing={3}
 											position="absolute"
 											top="50%"
 											left="50%"
@@ -453,8 +556,12 @@ const TemplateList = ({ selectedCategory, templates }) => {
 											zIndex={2}
 										>
 											<Button
-												borderRadius="50px"
-												leftIcon={<IoPlayOutline />}
+												borderRadius="4px"
+												fontSize="14px"
+												lineHeight="24px"
+												fontWeight="medium"
+												p="0 16px"
+												minWidth="auto"
 												style={{
 													borderColor: "#475bb2",
 													color: "white"
@@ -469,18 +576,21 @@ const TemplateList = ({ selectedCategory, templates }) => {
 												width="100%"
 											>
 												{__(
-													"Get Started",
+													"Use Template",
 													"user-registration"
 												)}
 											</Button>
 											{template.preview_link && (
 												<Button
-													borderRadius="50px"
-													leftIcon={
-														<MdOutlineRemoveRedEye />
-													}
-													color="#4D4D4D"
-													variant="outline"
+													borderRadius="4px"
+													fontSize="14px"
+													lineHeight="24px"
+													fontWeight="medium"
+													p="0 16px"
+													minWidth="auto"
+													color="#0f0f1a"
+													bg="#f4f4f4"
+													border="1px solid rgba(0,0,0,0.12)"
 													onClick={() =>
 														window.open(
 															template.preview_link,
@@ -493,6 +603,7 @@ const TemplateList = ({ selectedCategory, templates }) => {
 													}}
 													bg="#FFFFFF"
 													width="100%"
+													ml="0px !important"
 												>
 													{__(
 														"Preview",
@@ -500,7 +611,7 @@ const TemplateList = ({ selectedCategory, templates }) => {
 													)}
 												</Button>
 											)}
-										</VStack>
+										</HStack>
 									)}
 								</Box>
 							</Center>
@@ -513,11 +624,14 @@ const TemplateList = ({ selectedCategory, templates }) => {
 									}
 									aria-label={`Toggle favorite for ${template.title}`}
 									position="absolute"
-									top={2}
-									right={2}
+									top={3}
+									right={3}
 									zIndex={3}
 									bg="transparent"
 									border="none"
+									display="flex"
+									alignItems="center"
+									justifyContent="center"
 									_hover={{ color: "red.600" }}
 								>
 									<Icon
@@ -526,7 +640,7 @@ const TemplateList = ({ selectedCategory, templates }) => {
 												? FaHeart
 												: FaRegHeart
 										}
-										boxSize={6}
+										boxSize={5}
 										color={
 											favorites.includes(template.slug)
 												? "red"
@@ -536,15 +650,18 @@ const TemplateList = ({ selectedCategory, templates }) => {
 								</Box>
 							)}
 
-							<VStack padding="8px 16px 16px 16px" gap="10px">
+							<VStack 
+								p="16px"
+								alignItems="flex-start"
+								>
 								<Heading
 									className="template-title"
 									width="100%"
 									textAlign="left"
-									fontWeight="500"
+									fontWeight="bold"
 									fontSize="16px"
 									margin="0px"
-									lineHeight="22px"
+									lineHeight="24px"
 								>
 									{template.title}
 								</Heading>
@@ -554,13 +671,13 @@ const TemplateList = ({ selectedCategory, templates }) => {
 									fontSize="14px"
 									fontWeight="400"
 									color="gray.600"
-									lineHeight="25px"
+									lineHeight="22px"
 								>
 									{template.description}
 								</Text>
 							</VStack>
 						</Box>
-					))}
+					)})}
 				</SimpleGrid>
 			) : (
 				<Box