diff --git a/apps/dashboard/src/components/primitives/form/avatar-picker.tsx b/apps/dashboard/src/components/primitives/form/avatar-picker.tsx
index b1566c93ff0..1dd0eedd2fc 100644
--- a/apps/dashboard/src/components/primitives/form/avatar-picker.tsx
+++ b/apps/dashboard/src/components/primitives/form/avatar-picker.tsx
@@ -54,7 +54,7 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ n
         <PopoverTrigger asChild>
           <Button variant="outline" size="icon" className="text-foreground-600 relative size-full overflow-hidden">
             {value ? (
-              <Avatar className="p-px">
+              <Avatar className="bg-transparent p-px">
                 <AvatarImage src={value as string} />
               </Avatar>
             ) : (
@@ -91,7 +91,12 @@ export const AvatarPicker = forwardRef<HTMLInputElement, AvatarPickerProps>(({ n
             <TextSeparator text="or" />
             <div className="grid grid-cols-6 gap-4">
               {predefinedAvatars.map((url, index) => (
-                <Button key={index} variant="ghost" className="p-0" onClick={() => handlePredefinedAvatarClick(url)}>
+                <Button
+                  key={index}
+                  variant="ghost"
+                  className="rounded-full p-0"
+                  onClick={() => handlePredefinedAvatarClick(url)}
+                >
                   <Avatar>
                     <AvatarImage src={url} />
                   </Avatar>
diff --git a/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx b/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx
index 5295b27bed6..f68014abdd6 100644
--- a/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx
+++ b/apps/dashboard/src/components/workflow-editor/in-app-preview.tsx
@@ -1,113 +1,170 @@
 import { HTMLAttributes, useMemo } from 'react';
 import { parseMarkdownIntoTokens } from '@novu/js/internal';
-import { ChannelTypeEnum, GeneratePreviewResponseDto, InAppRenderOutput } from '@novu/shared';
 
 import { InboxArrowDown } from '@/components/icons/inbox-arrow-down';
 import { InboxBell } from '@/components/icons/inbox-bell';
 import { InboxEllipsis } from '@/components/icons/inbox-ellipsis';
 import { InboxSettings } from '@/components/icons/inbox-settings';
-import { Button } from '@/components/primitives/button';
+import { Button, ButtonProps } from '@/components/primitives/button';
 import { cn } from '@/utils/ui';
 import { Skeleton } from '../primitives/skeleton';
 
-type InAppPreviewProps = HTMLAttributes<HTMLDivElement> & {
-  truncateBody?: boolean;
-  data?: GeneratePreviewResponseDto;
-  isLoading?: boolean;
+type InAppPreviewBellProps = HTMLAttributes<HTMLDivElement>;
+export const InAppPreviewBell = (props: InAppPreviewBellProps) => {
+  const { className, ...rest } = props;
+  return (
+    <div className={cn('flex items-center justify-end p-2 text-neutral-300', className)} {...rest}>
+      <span className="relative rounded-lg bg-neutral-50 p-1">
+        <InboxBell className="relative size-5" />
+        <div className="bg-primary border-background absolute right-1 top-1 h-2 w-2 translate-y-[1px] rounded-full border border-solid" />
+      </span>
+    </div>
+  );
 };
+
+type InAppPreviewProps = HTMLAttributes<HTMLDivElement>;
 export const InAppPreview = (props: InAppPreviewProps) => {
-  const { className, truncateBody: truncate = false, data, isLoading, ...rest } = props;
+  const { className, ...rest } = props;
 
   return (
     <div
       className={cn(
-        'border-foreground-200 to-background/90 pointer-events-none relative flex h-full w-full flex-col rounded-xl rounded-b-none border border-b-0 border-dashed p-1',
+        'border-foreground-200 to-background/90 pointer-events-none relative mx-auto flex h-full w-full flex-col gap-4 rounded-xl px-2 py-3 shadow-sm',
         className
       )}
       {...rest}
-    >
-      <div className="absolute -left-0.5 bottom-0 top-0 z-10 h-full w-[calc(100%+4px)] bg-gradient-to-t from-[rgb(255,255,255)] from-5% to-95%" />
-      <div className="z-20 flex h-6 items-center justify-end px-2 text-neutral-300">
-        <span className="relative p-1">
-          <InboxBell className="relative size-4" />
-          <div className="bg-primary border-background absolute right-1 top-1 h-2 w-2 translate-y-[1px] rounded-full border border-solid" />
-        </span>
+    />
+  );
+};
+
+type InAppPreviewHeaderProps = HTMLAttributes<HTMLDivElement>;
+export const InAppPreviewHeader = (props: InAppPreviewHeaderProps) => {
+  const { className, ...rest } = props;
+
+  return (
+    <div className={cn('z-20 flex items-center justify-between px-2 text-neutral-300', className)} {...rest}>
+      <div className="flex items-center gap-2">
+        <span className="text-xl font-medium">Inbox</span>
+        <InboxArrowDown />
       </div>
-      <div className="my-0.5 w-full border-b border-b-neutral-100" />
-      <div className="z-20 flex items-center justify-between px-2 text-neutral-300">
-        <div className="flex items-center gap-2">
-          <span className="text-xl font-medium">Inbox</span>
-          <InboxArrowDown />
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="p-0.5">
-            <InboxEllipsis />
-          </span>
-          <span className="p-0.5">
-            <InboxSettings />
-          </span>
-        </div>
+      <div className="flex items-center gap-2">
+        <span className="p-0.5">
+          <InboxEllipsis />
+        </span>
+        <span className="p-0.5">
+          <InboxSettings />
+        </span>
       </div>
-      {isLoading && !data && (
-        <div className="bg-neutral-alpha-50 z-20 mt-2 rounded-lg px-2 py-2">
-          <div className="mb-2 flex items-center gap-2">
-            <Skeleton className="h-5 min-w-5 rounded-full" />
-            <Skeleton className="h-5 w-full" />
-          </div>
-          <Skeleton className="h-5 w-full" />
-        </div>
-      )}
-      {data && data.result?.type === ChannelTypeEnum.IN_APP && (
-        <div className="bg-neutral-alpha-50 z-20 mt-2 rounded-lg px-2 py-2">
-          <div className="mb-2 flex items-center gap-2">
-            {data.result.preview.avatar && (
-              <img src={data.result.preview.avatar} alt="avatar" className="bg-background h-5 min-w-5 rounded-full" />
-            )}
-            {data.result.preview.subject ? (
-              <Subject text={data.result.preview.subject} className={truncate ? 'truncate' : ''} />
-            ) : (
-              <Body text={data.result.preview.body} className={truncate ? 'truncate' : ''} />
-            )}
-          </div>
-
-          {data.result.preview.subject && (
-            <Body text={data.result.preview.body} className={truncate ? 'truncate' : ''} />
-          )}
-
-          {(data.result.preview.primaryAction || data.result.preview.secondaryAction) && (
-            <div className="mt-3 flex items-center justify-start gap-1 overflow-hidden">
-              {data.result.preview.primaryAction && (
-                <Button
-                  className="overflow-hidden text-xs font-medium shadow-none"
-                  type="button"
-                  variant="primary"
-                  size="xs"
-                >
-                  <span className="overflow-hidden text-ellipsis">
-                    {(data.result.preview as InAppRenderOutput).primaryAction?.label}
-                  </span>
-                </Button>
-              )}
-              {data.result.preview.secondaryAction && (
-                <Button variant="outline" className="overflow-hidden text-xs font-medium" type="button" size="xs">
-                  <span className="overflow-hidden text-ellipsis">
-                    {(data.result.preview as InAppRenderOutput).secondaryAction?.label}
-                  </span>
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
-      )}
     </div>
   );
 };
 
-type MarkdownProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & { children: string };
+type InAppPreviewAvatarProps = HTMLAttributes<HTMLImageElement> & {
+  src?: string;
+  isPending?: boolean;
+};
+export const InAppPreviewAvatar = (props: InAppPreviewAvatarProps) => {
+  const { className, isPending, src, ...rest } = props;
+
+  if (isPending) {
+    return <Skeleton className="size-8 shrink-0 rounded-full" />;
+  }
+
+  if (!src) {
+    return null;
+  }
+
+  return <img src={src} alt="avatar" className={cn('bg-background size-7 rounded-full')} {...rest} />;
+};
+
+type InAppPreviewNotificationProps = HTMLAttributes<HTMLDivElement>;
+export const InAppPreviewNotification = (props: InAppPreviewNotificationProps) => {
+  const { className, ...rest } = props;
+
+  return <div className={cn('flex gap-2', className)} {...rest} />;
+};
+
+type InAppPreviewNotificationContentProps = HTMLAttributes<HTMLDivElement>;
+export const InAppPreviewNotificationContent = (props: InAppPreviewNotificationContentProps) => {
+  const { className, ...rest } = props;
+
+  return <div className={cn('flex w-full flex-col gap-1 overflow-hidden', className)} {...rest} />;
+};
+
+type InAppPreviewSubjectProps = MarkdownProps & { isPending?: boolean };
+export const InAppPreviewSubject = (props: InAppPreviewSubjectProps) => {
+  const { className, isPending, ...rest } = props;
+
+  if (isPending) {
+    return <Skeleton className="h-5 w-1/2" />;
+  }
+
+  return <Markdown className={cn('text-foreground-600 truncate text-xs font-medium', className)} {...rest} />;
+};
+
+type InAppPreviewBodyProps = MarkdownProps & { isPending?: boolean };
+export const InAppPreviewBody = (props: InAppPreviewBodyProps) => {
+  const { className, isPending, ...rest } = props;
+
+  if (isPending) {
+    return (
+      <>
+        <Skeleton className="h-5 w-full" />
+        <Skeleton className="h-5 w-full" />
+      </>
+    );
+  }
+
+  return <Markdown className={cn('text-foreground-400 text-xs font-normal', className)} {...rest} />;
+};
+
+type InAppPreviewActionsProps = HTMLAttributes<HTMLDivElement>;
+export const InAppPreviewActions = (props: InAppPreviewActionsProps) => {
+  const { className, ...rest } = props;
+  return <div className={cn('mt-3 flex flex-wrap gap-1 overflow-hidden', className)} {...rest} />;
+};
+
+type InAppPreviewPrimaryActionProps = ButtonProps & { isPending?: boolean };
+export const InAppPreviewPrimaryAction = (props: InAppPreviewPrimaryActionProps) => {
+  const { className, isPending, children, ...rest } = props;
+
+  if (isPending) {
+    return <Skeleton className="h-5 w-[12ch]" />;
+  }
+
+  return (
+    <Button
+      className={cn('px-3 text-xs font-medium shadow-none', className)}
+      type="button"
+      variant="primary"
+      size="xs"
+      {...rest}
+    >
+      {children}
+    </Button>
+  );
+};
+
+type InAppPreviewSecondaryActionProps = ButtonProps & { isPending?: boolean };
+export const InAppPreviewSecondaryAction = (props: InAppPreviewSecondaryActionProps) => {
+  const { className, isPending, children, ...rest } = props;
+
+  if (isPending) {
+    return <Skeleton className="h-5 w-[12ch]" />;
+  }
+
+  return (
+    <Button variant="outline" className={cn('px-3 text-xs font-medium', className)} type="button" size="xs" {...rest}>
+      {children}
+    </Button>
+  );
+};
+
+type MarkdownProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & { children?: string };
 const Markdown = (props: MarkdownProps) => {
   const { children, ...rest } = props;
 
-  const tokens = useMemo(() => parseMarkdownIntoTokens(children), [children]);
+  const tokens = useMemo(() => parseMarkdownIntoTokens(children || ''), [children]);
 
   return (
     <p {...rest}>
@@ -121,11 +178,3 @@ const Markdown = (props: MarkdownProps) => {
     </p>
   );
 };
-
-const Subject = ({ text, className }: { text: string; className?: string }) => {
-  return <Markdown className={cn('text-foreground-600 text-xs font-medium', className)}>{text}</Markdown>;
-};
-
-const Body = ({ text, className }: { text: string; className?: string }) => {
-  return <Markdown className={cn('text-foreground-400 text-xs font-normal', className)}>{text}</Markdown>;
-};
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-preview.tsx
index 987b0bd5963..95e559f0269 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-preview.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-preview.tsx
@@ -1,8 +1,17 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { usePreviewStep } from '@/hooks';
-import { InAppPreview } from '@/components/workflow-editor/in-app-preview';
+import {
+  InAppPreview,
+  InAppPreviewAvatar,
+  InAppPreviewBody,
+  InAppPreviewHeader,
+  InAppPreviewNotification,
+  InAppPreviewNotificationContent,
+  InAppPreviewSubject,
+} from '@/components/workflow-editor/in-app-preview';
 import { useStepEditorContext } from '@/components/workflow-editor/steps/hooks';
+import { InAppRenderOutput } from '@novu/shared';
 
 export function ConfigureInAppPreview() {
   const { previewStep, data, isPending: isPreviewPending } = usePreviewStep();
@@ -23,5 +32,26 @@ export function ConfigureInAppPreview() {
     });
   }, [workflowSlug, stepSlug, previewStep, step, isPendingStep]);
 
-  return <InAppPreview data={data} truncateBody isLoading={isPreviewPending} />;
+  if (!isPreviewPending && !data?.result) {
+    return null;
+  }
+
+  const preview = data?.result?.preview as InAppRenderOutput | undefined;
+
+  return (
+    <InAppPreview>
+      <InAppPreviewHeader />
+
+      <InAppPreviewNotification>
+        <InAppPreviewAvatar src={preview?.avatar} isPending={isPreviewPending} />
+
+        <InAppPreviewNotificationContent>
+          <InAppPreviewSubject isPending={isPreviewPending}>{preview?.subject}</InAppPreviewSubject>
+          <InAppPreviewBody isPending={isPreviewPending} className="line-clamp-2">
+            {preview?.body}
+          </InAppPreviewBody>
+        </InAppPreviewNotificationContent>
+      </InAppPreviewNotification>
+    </InAppPreview>
+  );
 }
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-action.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-action.tsx
index 1a72e6fab53..405181fc017 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-action.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-action.tsx
@@ -172,13 +172,12 @@ const ConfigureActionPopover = (props: ComponentProps<typeof PopoverTrigger> & {
                   <FormLabel>Button text</FormLabel>
                 </div>
                 <FormControl>
-                  <InputField>
+                  <InputField size="fit">
                     <Editor
                       fontFamily="inherit"
                       placeholder="Button text"
                       value={field.value}
                       onChange={field.onChange}
-                      height="30px"
                       extensions={[autocompletion({ override: [completions(variables)] }), EditorView.lineWrapping]}
                     />
                   </InputField>
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor-preview.tsx
index eb3621983fe..c5fd52c50cb 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor-preview.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor-preview.tsx
@@ -1,11 +1,23 @@
 import { CSSProperties, useEffect, useRef, useState } from 'react';
-import { GeneratePreviewResponseDto } from '@novu/shared';
+import { InAppRenderOutput } from '@novu/shared';
 
 import { Notification5Fill } from '@/components/icons';
 import { Code2 } from '@/components/icons/code-2';
 import { Button } from '@/components/primitives/button';
 import { Editor } from '@/components/primitives/editor';
-import { InAppPreview } from '@/components/workflow-editor/in-app-preview';
+import {
+  InAppPreview,
+  InAppPreviewActions,
+  InAppPreviewAvatar,
+  InAppPreviewBell,
+  InAppPreviewBody,
+  InAppPreviewHeader,
+  InAppPreviewNotification,
+  InAppPreviewNotificationContent,
+  InAppPreviewPrimaryAction,
+  InAppPreviewSecondaryAction,
+  InAppPreviewSubject,
+} from '@/components/workflow-editor/in-app-preview';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/primitives/accordion';
 
@@ -20,12 +32,12 @@ const getInitialAccordionValue = (value: string) => {
 type InAppEditorPreviewProps = {
   value: string;
   onChange: (value: string) => void;
-  previewData?: GeneratePreviewResponseDto;
+  preview?: InAppRenderOutput;
   applyPreview: () => void;
-  isPreviewLoading?: boolean;
+  isPreviewPending?: boolean;
 };
 export const InAppEditorPreview = (props: InAppEditorPreviewProps) => {
-  const { value, onChange, previewData, applyPreview, isPreviewLoading } = props;
+  const { value, onChange, preview, applyPreview, isPreviewPending } = props;
   const [accordionValue, setAccordionValue] = useState<string | undefined>(getInitialAccordionValue(value));
   const [payloadError, setPayloadError] = useState('');
   const [height, setHeight] = useState(0);
@@ -47,13 +59,43 @@ export const InAppEditorPreview = (props: InAppEditorPreviewProps) => {
   }, [value]);
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="relative flex flex-col gap-3">
       <div className="flex items-center gap-2.5 text-sm font-medium">
         <Notification5Fill className="size-3" />
         In-app template editor
       </div>
 
-      <InAppPreview data={previewData} isLoading={isPreviewLoading} />
+      <div className="relative my-2">
+        <div className="relative mx-auto max-w-sm">
+          <InAppPreviewBell />
+
+          <InAppPreview className="min-h-64">
+            <InAppPreviewHeader />
+
+            <InAppPreviewNotification>
+              <InAppPreviewAvatar src={preview?.avatar} isPending={isPreviewPending} />
+
+              <InAppPreviewNotificationContent>
+                <InAppPreviewSubject isPending={isPreviewPending}>{preview?.subject}</InAppPreviewSubject>
+                <InAppPreviewBody isPending={isPreviewPending} className="line-clamp-6">
+                  {preview?.body}
+                </InAppPreviewBody>
+
+                <InAppPreviewActions>
+                  <InAppPreviewPrimaryAction isPending={isPreviewPending}>
+                    {preview?.primaryAction?.label}
+                  </InAppPreviewPrimaryAction>
+
+                  <InAppPreviewSecondaryAction isPending={isPreviewPending}>
+                    {preview?.secondaryAction?.label}
+                  </InAppPreviewSecondaryAction>
+                </InAppPreviewActions>
+              </InAppPreviewNotificationContent>
+            </InAppPreviewNotification>
+          </InAppPreview>
+        </div>
+        <div className="to-background absolute -bottom-3 h-16 w-full bg-gradient-to-b from-transparent to-80%" />
+      </div>
 
       <Accordion type="single" collapsible value={accordionValue} onValueChange={setAccordionValue}>
         <AccordionItem value="payload">
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx
index 1091e89bb90..df44076655e 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { type StepDataDto, type StepUpdateDto, type WorkflowResponseDto } from '@novu/shared';
+import { ChannelTypeEnum, type StepDataDto, type StepUpdateDto, type WorkflowResponseDto } from '@novu/shared';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import { useEffect, useMemo, useState } from 'react';
 import { FieldValues, useForm, useWatch } from 'react-hook-form';
@@ -222,19 +222,25 @@ export const InAppTabs = ({ workflow, step }: { workflow: WorkflowResponseDto; s
               <CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
             </TabsContent>
             <TabsContent value="preview" className={tabsContentClassName}>
-              <InAppEditorPreview
-                value={editorValue}
-                onChange={setEditorValue}
-                previewData={previewData}
-                isPreviewLoading={isPreviewPending}
-                applyPreview={() => {
-                  previewStep({
-                    stepSlug,
-                    workflowSlug,
-                    data: { controlValues: form.getValues() as FieldValues, previewPayload: JSON.parse(editorValue) },
-                  });
-                }}
-              />
+              {previewData === undefined ||
+                (previewData.result?.type === ChannelTypeEnum.IN_APP && (
+                  <InAppEditorPreview
+                    value={editorValue}
+                    onChange={setEditorValue}
+                    preview={previewData?.result.preview}
+                    isPreviewPending={isPreviewPending}
+                    applyPreview={() => {
+                      previewStep({
+                        stepSlug,
+                        workflowSlug,
+                        data: {
+                          controlValues: form.getValues() as FieldValues,
+                          previewPayload: JSON.parse(editorValue),
+                        },
+                      });
+                    }}
+                  />
+                ))}
             </TabsContent>
             <Separator />
             <footer className="flex justify-end px-3 py-3.5">