diff --git a/forms-flow-service/src/formsflow-services.ts b/forms-flow-service/src/formsflow-services.ts
index 2c46c64d7..24073d5a5 100644
--- a/forms-flow-service/src/formsflow-services.ts
+++ b/forms-flow-service/src/formsflow-services.ts
@@ -3,5 +3,6 @@ import StorageService from "./storage/storageService";
 import RequestService from "./request/requestService";
 import i18nService from "./resourceBundles/i18n";
 import HelperServices from "./helpers/helperServices";
+import StyleServices from "./helpers/styleService"
 
-export { KeycloakService, StorageService, RequestService, i18nService, HelperServices };
+export { KeycloakService, StorageService, RequestService, i18nService, HelperServices, StyleServices };
diff --git a/forms-flow-service/src/helpers/styleService.ts b/forms-flow-service/src/helpers/styleService.ts
new file mode 100644
index 000000000..433a617d6
--- /dev/null
+++ b/forms-flow-service/src/helpers/styleService.ts
@@ -0,0 +1,12 @@
+class StyleServices {
+  //css variable fetcher utility
+  public static getCSSVariable(
+    variableName: string,
+    element: HTMLElement = document.documentElement
+  ): string {
+    const value = getComputedStyle(element).getPropertyValue(variableName);
+    return value.trim();
+  }
+}
+
+export default StyleServices;
diff --git a/forms-flow-theme/scss/_card.scss b/forms-flow-theme/scss/_card.scss
index cde6a4fa7..84773e932 100644
--- a/forms-flow-theme/scss/_card.scss
+++ b/forms-flow-theme/scss/_card.scss
@@ -201,4 +201,11 @@
   color: var(--ff-gray-800);
   font-size: var(--font-size-xs);
   line-height: var(--text-line-height);
+}
+
+.preview-header-text {
+  color: var(--ff-gray-800);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-xl);
+  line-height: var(--text-line-height);
 }
\ No newline at end of file
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index 7568a1245..6a40c1d57 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -412,6 +412,12 @@ select option:hover {
   pointer-events: none;
   cursor: not-allowed;
 }
+.form-preview-tab {
+  padding: var(--spacer-200);
+  height: 100vh; 
+  overflow-y: auto;
+  overflow-x: hidden; 
+}
 
 .dropdown-main {
   display: block !important;