diff --git a/apps/web/src/components/workflow/preview/ErrorPrettyRender.tsx b/apps/web/src/components/workflow/preview/ErrorPrettyRender.tsx
index 6b2fecc0340..ff369276c8d 100644
--- a/apps/web/src/components/workflow/preview/ErrorPrettyRender.tsx
+++ b/apps/web/src/components/workflow/preview/ErrorPrettyRender.tsx
@@ -1,10 +1,34 @@
+import { css } from '@novu/novui/css';
+import { Text } from '@novu/novui';
+import { Center } from '@novu/novui/jsx';
+import { IconErrorOutline } from '@novu/novui/icons';
+
 export function ErrorPrettyRender({ error }) {
   return (
-    <div style={{ padding: 20, background: '#990000', borderRadius: 10 }}>
+    <div
+      className={css({
+        bg: 'input.border.error/20',
+        borderColor: 'input.border.error !important',
+        border: '1px solid !important',
+        width: '100%',
+        borderRadius: 'input !important',
+        my: 'margins.layout.tabs.bottom !important',
+        p: '125',
+      })}
+    >
+      <Center gap={10}>
+        <IconErrorOutline
+          className={css({ fill: 'input.border.error !important' })}
+          color={'input.border.error !important'}
+        />
+        <Text color={'input.border.error'} variant={'mono'}>
+          Error
+        </Text>
+      </Center>
       <h3 style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 10 }}>Error while rendering</h3>
       <div>{error.message}</div> <br />
       {error.data ? (
-        <pre style={{ overflow: 'auto', background: 'rgb(19 19 19)', padding: 15 }}>
+        <pre style={{ overflow: 'auto', background: 'input.surface !important', padding: 15 }}>
           {JSON.stringify(error.data, null, 2)}
         </pre>
       ) : null}
diff --git a/apps/web/src/components/workflow/preview/chat/ChatBasePreview.tsx b/apps/web/src/components/workflow/preview/chat/ChatBasePreview.tsx
index b62804f00c6..b63f5504b0d 100644
--- a/apps/web/src/components/workflow/preview/chat/ChatBasePreview.tsx
+++ b/apps/web/src/components/workflow/preview/chat/ChatBasePreview.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { Divider, Flex, useMantineColorScheme } from '@mantine/core';
 import { colors, Text } from '@novu/design-system';
-import { ErrorPrettyRender } from '../ErrorPrettyRender';
 import { LocaleSelect } from '../common';
 import { ChatContent } from './ChatContent';
 import { ChatInput } from './ChatInput';
@@ -15,7 +14,6 @@ export const ChatBasePreview = ({
   content,
   loading = false,
   error,
-  previewError,
   showEditOverlay = false,
   onLocaleChange,
   selectedLocale,
@@ -24,7 +22,6 @@ export const ChatBasePreview = ({
   content: string;
   loading?: boolean;
   error?: string;
-  previewError?: any;
   showEditOverlay?: boolean;
   onLocaleChange: (locale: string) => void;
   selectedLocale?: string;
@@ -33,10 +30,6 @@ export const ChatBasePreview = ({
   const { colorScheme } = useMantineColorScheme();
   const isDark = colorScheme === 'dark';
 
-  if (previewError) {
-    return <ErrorPrettyRender error={previewError} />;
-  }
-
   return (
     <ChatPreviewContainer>
       <Flex>
diff --git a/apps/web/src/components/workflow/preview/in-app/InAppBasePreview.tsx b/apps/web/src/components/workflow/preview/in-app/InAppBasePreview.tsx
index a8edd8f8098..87be9e45b2c 100644
--- a/apps/web/src/components/workflow/preview/in-app/InAppBasePreview.tsx
+++ b/apps/web/src/components/workflow/preview/in-app/InAppBasePreview.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { ParsedPreviewStateType } from '../../../../pages/templates/hooks/usePreviewInAppTemplate';
-import { ErrorPrettyRender } from '../ErrorPrettyRender';
 import { Header } from './Header';
 import Content from './Content';
 
@@ -17,7 +16,6 @@ export const InAppBasePreview = ({
   content,
   loading = false,
   error,
-  previewError,
   showEditOverlay = false,
   onLocaleChange,
   selectedLocale,
@@ -27,17 +25,12 @@ export const InAppBasePreview = ({
   content: ParsedPreviewStateType;
   loading?: boolean;
   error?: string;
-  previewError?: any;
   showEditOverlay?: boolean;
   onLocaleChange: (locale: string) => void;
   selectedLocale?: string;
   locales: any[];
   enableAvatar?: boolean;
 }) => {
-  if (previewError) {
-    return <ErrorPrettyRender error={previewError} />;
-  }
-
   return (
     <ContainerStyled removePadding={!showEditOverlay}>
       <Header
diff --git a/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx b/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx
index ca8ebe0fe8d..bd811059088 100644
--- a/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx
+++ b/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx
@@ -69,7 +69,6 @@ export function InAppPreview({ showVariables = true }: { showVariables?: boolean
           content={bridge ? bridgeContent : parsedPreviewState}
           onLocaleChange={onLocaleChange}
           locales={locales}
-          previewError={previewError}
           error={bridge ? '' : templateError}
           enableAvatar={enableAvatar}
           selectedLocale={selectedLocale}
diff --git a/apps/web/src/components/workflow/preview/push/Content.tsx b/apps/web/src/components/workflow/preview/push/Content.tsx
index f03b72b17d1..47828d379dd 100644
--- a/apps/web/src/components/workflow/preview/push/Content.tsx
+++ b/apps/web/src/components/workflow/preview/push/Content.tsx
@@ -70,7 +70,6 @@ export default function Content({
       showEditOverlay={showOverlay}
       bridge={bridge}
       error={templateError}
-      previewError={previewError}
       loading={isPreviewLoading || isBridgeLoading || showLoading || areLocalesLoading}
     />
   );
diff --git a/apps/web/src/components/workflow/preview/push/PushBasePreview.tsx b/apps/web/src/components/workflow/preview/push/PushBasePreview.tsx
index aa45b9d5ec6..4f9385b7cf5 100644
--- a/apps/web/src/components/workflow/preview/push/PushBasePreview.tsx
+++ b/apps/web/src/components/workflow/preview/push/PushBasePreview.tsx
@@ -2,7 +2,6 @@ import { Flex, Group, Skeleton, Stack, useMantineColorScheme } from '@mantine/co
 import styled from '@emotion/styled';
 import { colors, Text } from '@novu/design-system';
 import { useHover } from '../../../../hooks';
-import { ErrorPrettyRender } from '../ErrorPrettyRender';
 import {
   ContentAndOVerlayWrapperStyled,
   ContentHeaderStyled,
@@ -52,7 +51,6 @@ export const PushBasePreview = ({
   title,
   loading = false,
   error,
-  previewError,
   showEditOverlay = false,
   bridge = false,
   onLocaleChange,
@@ -64,7 +62,6 @@ export const PushBasePreview = ({
   loading?: boolean;
   bridge?: boolean;
   error?: string;
-  previewError?: any;
   showEditOverlay?: boolean;
   onLocaleChange: (locale: string) => void;
   selectedLocale?: string;
@@ -74,14 +71,6 @@ export const PushBasePreview = ({
   const { colorScheme } = useMantineColorScheme();
   const isDark = colorScheme === 'dark';
 
-  if (previewError) {
-    return (
-      <div style={{ marginTop: 20, padding: 10 }}>
-        <ErrorPrettyRender error={previewError} />
-      </div>
-    );
-  }
-
   return (
     <ContentWrapperStyled>
       <Group>
diff --git a/apps/web/src/components/workflow/preview/sms/SmsBasePreview.tsx b/apps/web/src/components/workflow/preview/sms/SmsBasePreview.tsx
index bb9acd06cba..423fe62b1d8 100644
--- a/apps/web/src/components/workflow/preview/sms/SmsBasePreview.tsx
+++ b/apps/web/src/components/workflow/preview/sms/SmsBasePreview.tsx
@@ -3,7 +3,6 @@ import { colors } from '@novu/design-system';
 import { MouseEventHandler } from 'react';
 import { LocaleSelect, MobileSimulator } from '../common';
 import { SmsBubble } from './SmsBubble';
-import { ErrorPrettyRender } from '../ErrorPrettyRender';
 
 const BodyContainer = styled.div`
   display: flex;
@@ -28,7 +27,6 @@ export const SmsBasePreview = ({
   error,
   showEditOverlay = false,
   onLocaleChange,
-  previewError,
   selectedLocale,
   locales,
   onEditClick,
@@ -36,21 +34,12 @@ export const SmsBasePreview = ({
   content: string;
   loading?: boolean;
   error?: string;
-  previewError?: any;
   showEditOverlay?: boolean;
   onLocaleChange: (locale: string) => void;
   selectedLocale?: string;
   locales: any[];
   onEditClick?: MouseEventHandler<HTMLButtonElement>;
 }) => {
-  if (previewError) {
-    return (
-      <div style={{ marginTop: 20, padding: 10 }}>
-        <ErrorPrettyRender error={previewError} />
-      </div>
-    );
-  }
-
   return (
     <MobileSimulator withBackground={false}>
       <BodyContainer>
diff --git a/apps/web/src/components/workflow/preview/sms/SmsPreview.tsx b/apps/web/src/components/workflow/preview/sms/SmsPreview.tsx
index 27845ca4d42..ef07a96914d 100644
--- a/apps/web/src/components/workflow/preview/sms/SmsPreview.tsx
+++ b/apps/web/src/components/workflow/preview/sms/SmsPreview.tsx
@@ -67,7 +67,6 @@ export const SmsPreview = ({
       loading={isPreviewContentLoading || areLocalesLoading || isBridgeLoading}
       onEditClick={navigateToStepEditor}
       error={bridge ? undefined : templateError}
-      previewError={previewError}
     />
   );
 };
diff --git a/apps/web/src/pages/templates/editor_v2/TemplateStepEditorV2.tsx b/apps/web/src/pages/templates/editor_v2/TemplateStepEditorV2.tsx
index 7103c5d8497..eaae2744465 100644
--- a/apps/web/src/pages/templates/editor_v2/TemplateStepEditorV2.tsx
+++ b/apps/web/src/pages/templates/editor_v2/TemplateStepEditorV2.tsx
@@ -32,6 +32,7 @@ export const WorkflowsStepEditorPageV2 = () => {
     data: preview,
     isLoading: loadingPreview,
     mutateAsync: renderStepPreview,
+    error,
   } = useMutation<any, any, any>((data) => api.post('/v1/echo/preview/' + workflow?.name + '/' + stepId, data));
 
   const title = step?.stepId;
@@ -74,7 +75,7 @@ export const WorkflowsStepEditorPageV2 = () => {
       }
     >
       <WorkflowsPanelLayout>
-        <WorkflowStepEditorContentPanel step={step} preview={preview} isLoadingPreview={loadingPreview} />
+        <WorkflowStepEditorContentPanel error={error} step={step} preview={preview} isLoadingPreview={loadingPreview} />
         <WorkflowStepEditorInputsPanel
           isLoadingSave={isSavingInputs}
           onSave={() => {
diff --git a/apps/web/src/studio/components/workflows/step-editor/WorkflowStepEditorContentPanel.tsx b/apps/web/src/studio/components/workflows/step-editor/WorkflowStepEditorContentPanel.tsx
index c918bc488ce..a3e11746ed7 100644
--- a/apps/web/src/studio/components/workflows/step-editor/WorkflowStepEditorContentPanel.tsx
+++ b/apps/web/src/studio/components/workflows/step-editor/WorkflowStepEditorContentPanel.tsx
@@ -2,7 +2,7 @@ import { FC, useMemo } from 'react';
 import { Prism } from '@mantine/prism';
 import { Tabs } from '@novu/novui';
 import { IconOutlineCode, IconVisibility } from '@novu/novui/icons';
-import { Center } from '@novu/novui/jsx';
+import { VStack } from '@novu/novui/jsx';
 import { StepTypeEnum } from '@novu/shared';
 import { PreviewWeb } from '../../../../components/workflow/preview/email/PreviewWeb';
 import { useActiveIntegrations } from '../../../../hooks';
@@ -14,6 +14,7 @@ import {
 } from '../../../../components/workflow/preview';
 import { MobileSimulator } from '../../../../components/workflow/preview/common';
 import { css } from '@novu/novui/css';
+import { ErrorPrettyRender } from '../../../../components/workflow/preview/ErrorPrettyRender';
 
 interface IWorkflowStepEditorContentPanelProps {
   preview: any;
@@ -34,14 +35,14 @@ export const WorkflowStepEditorContentPanel: FC<IWorkflowStepEditorContentPanelP
       value: 'preview',
       label: 'Preview',
       content: (
-        <Center>
+        <VStack className={css({ width: '100%' })}>
+          {error && <ErrorPrettyRender error={error} />}
           <PreviewStep
             channel={step?.template?.type || step?.type}
             preview={preview}
-            loadingPreview={isLoadingPreview}
-            error={error}
+            loadingPreview={error || isLoadingPreview}
           />
-        </Center>
+        </VStack>
       ),
     },
   ];
@@ -65,19 +66,17 @@ export const PreviewStep = ({
   channel,
   preview,
   loadingPreview,
-  error,
 }: {
   channel: StepTypeEnum;
   preview: any;
   loadingPreview: boolean;
-  error?: any;
 }) => {
   const { integrations = [] } = useActiveIntegrations();
   const integration = useMemo(() => {
     return integrations.find((item) => item.channel === 'email' && item.primary) || null;
   }, [integrations]);
 
-  const props = { locales: [], loading: loadingPreview, onLocaleChange: () => {}, previewError: error };
+  const props = { locales: [], loading: loadingPreview, onLocaleChange: () => {} };
 
   switch (channel) {
     case StepTypeEnum.EMAIL:
diff --git a/libs/novui/src/json-schema-components/widgets/InputWidget.tsx b/libs/novui/src/json-schema-components/widgets/InputWidget.tsx
index 140c9d355da..4d2e38efd23 100644
--- a/libs/novui/src/json-schema-components/widgets/InputWidget.tsx
+++ b/libs/novui/src/json-schema-components/widgets/InputWidget.tsx
@@ -12,11 +12,11 @@ export const InputWidget = (props: WidgetProps) => {
         event.preventDefault();
         onChange(event.target.value);
       }}
-      value={value || ''}
+      value={value || value === 0 ? value : ''}
       required={required}
       label={label}
       type={inputProps.type as TextInputType}
-      error={rawErrors}
+      error={rawErrors?.length > 0 && rawErrors}
       readOnly={readonly}
       disabled={disabled}
     />
diff --git a/libs/novui/src/json-schema-components/widgets/SelectWidget.tsx b/libs/novui/src/json-schema-components/widgets/SelectWidget.tsx
index 95b68d65e18..9d984e2ba07 100644
--- a/libs/novui/src/json-schema-components/widgets/SelectWidget.tsx
+++ b/libs/novui/src/json-schema-components/widgets/SelectWidget.tsx
@@ -1,4 +1,4 @@
-import { WidgetProps } from '@rjsf/utils';
+import { enumOptionsIndexForValue, WidgetProps } from '@rjsf/utils';
 import { Select } from '../../components/select/Select';
 
 export const SelectWidget = (props: WidgetProps) => {
@@ -9,18 +9,19 @@ export const SelectWidget = (props: WidgetProps) => {
       value: String(option.value),
     };
   });
+  const selectedIndex = enumOptionsIndexForValue(value, options.enumOptions, false);
 
   return (
     <Select
       description={schema.description}
       onChange={onChange}
-      value={value}
+      value={typeof value === 'undefined' ? '' : (selectedIndex as string)}
       required={required}
       label={label}
       data={data}
       disabled={disabled}
       readOnly={readonly}
-      error={rawErrors}
+      error={rawErrors?.length > 0 && rawErrors}
     />
   );
 };