diff --git a/packages/feedback/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts
index 127cc4616062..26398b74d1b2 100644
--- a/packages/feedback/src/constants/theme.ts
+++ b/packages/feedback/src/constants/theme.ts
@@ -6,37 +6,39 @@ export const LIGHT_THEME = {
   fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
   fontSize: '14px',
 
-  background: LIGHT_BACKGROUND,
-  backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
+  background: LIGHT_BACKGROUND,
+  success: '#268d75',
+  error: '#df3338',
+
+  zIndex: 100000,
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '25px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
-  success: '#268d75',
-  error: '#df3338',
+  backgroundHover: '#f6f6f7',
+  borderRadius: '25px',
 
+  formBorderRadius: '20px',
+  formContentBorderRadius: '6px',
+
+  submitForeground: LIGHT_BACKGROUND,
   submitBackground: 'rgba(88, 74, 192, 1)',
+  submitForegroundHover: LIGHT_BACKGROUND,
   submitBackgroundHover: SUBMIT_COLOR,
   submitBorder: SUBMIT_COLOR,
   submitOutlineFocus: '#29232f',
-  submitForeground: LIGHT_BACKGROUND,
-  submitForegroundHover: LIGHT_BACKGROUND,
 
+  cancelForeground: 'var(--foreground)',
   cancelBackground: 'transparent',
+  cancelForegroundHover: 'var(--foreground)',
   cancelBackgroundHover: 'var(--background-hover)',
   cancelBorder: 'var(--border)',
   cancelOutlineFocus: 'var(--input-outline-focus)',
-  cancelForeground: 'var(--foreground)',
-  cancelForegroundHover: 'var(--foreground)',
 
   inputBackground: INHERIT,
   inputForeground: INHERIT,
   inputBorder: 'var(--border)',
   inputOutlineFocus: SUBMIT_COLOR,
-
-  formBorderRadius: '20px',
-  formContentBorderRadius: '6px',
 };
 
 export const DEFAULT_THEME = {
diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
index bfc135a7c9a0..ea80921b3744 100644
--- a/packages/feedback/src/core/components/Actor.css.ts
+++ b/packages/feedback/src/core/components/Actor.css.ts
@@ -8,34 +8,36 @@ export function createActorStyles(): HTMLStyleElement {
   style.textContent = `
 .widget__actor {
   position: fixed;
-  left: var(--left);
-  right: var(--right);
-  bottom: var(--bottom);
-  top: var(--top);
   z-index: var(--z-index);
-
-  line-height: 16px;
+  margin: 0;
+  inset: var(--actor-inset);
 
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 16px;
 
-
-  border-radius: var(--border-radius);
-  cursor: pointer;
   font-family: inherit;
   font-size: var(--font-size);
   font-weight: 600;
-  padding: 16px;
+  line-height: 16px;
   text-decoration: none;
-  z-index: 9000;
 
-  color: var(--foreground);
   background-color: var(--background);
+  border-radius: var(--border-radius);
   border: var(--border);
   box-shadow: var(--box-shadow);
+  color: var(--foreground);
+  cursor: pointer;
   opacity: 1;
-  transition: opacity 0.1s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transform: translate(0, 0) scale(1);
+}
+.widget__actor[aria-hidden="true"] {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transform: translate(0, 16px) scale(0.98);
 }
 
 .widget__actor:hover {
@@ -47,24 +49,11 @@ export function createActorStyles(): HTMLStyleElement {
   height: 16px;
 }
 
-.widget__actor--hidden {
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-}
-
-.widget__actor__text {
-}
-
 @media (max-width: 600px) {
-  .widget__actor__text {
+  .widget__actor span {
     display: none;
   }
 }
-
-.feedback-icon path {
-  fill: var(--foreground);
-}
 `;
 
   return style;
diff --git a/packages/feedback/src/core/components/Actor.ts b/packages/feedback/src/core/components/Actor.ts
index fb49d5d1b7ee..ac62fad4957e 100644
--- a/packages/feedback/src/core/components/Actor.ts
+++ b/packages/feedback/src/core/components/Actor.ts
@@ -13,6 +13,10 @@ export interface ActorComponent {
   appendToDom: () => void;
 
   removeFromDom: () => void;
+
+  show: () => void;
+
+  hide: () => void;
 }
 
 /**
@@ -27,7 +31,6 @@ export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
   el.appendChild(FeedbackIcon());
   if (buttonLabel) {
     const label = DOCUMENT.createElement('span');
-    label.className = 'widget__actor__text';
     label.appendChild(DOCUMENT.createTextNode(buttonLabel));
     el.appendChild(label);
   }
@@ -44,5 +47,11 @@ export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
       shadow.removeChild(el);
       shadow.removeChild(style);
     },
+    show(): void {
+      el.ariaHidden = 'false';
+    },
+    hide(): void {
+      el.ariaHidden = 'true';
+    },
   };
 }
diff --git a/packages/feedback/src/core/components/FeedbackIcon.ts b/packages/feedback/src/core/components/FeedbackIcon.ts
index a6145ebf8900..d4ca23d9349a 100644
--- a/packages/feedback/src/core/components/FeedbackIcon.ts
+++ b/packages/feedback/src/core/components/FeedbackIcon.ts
@@ -11,11 +11,10 @@ export function FeedbackIcon(): SVGElement {
   const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
     WINDOW.document.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'feedback-icon',
     width: `${SIZE}`,
     height: `${SIZE}`,
     viewBox: `0 0 ${SIZE} ${SIZE}`,
-    fill: 'none',
+    fill: 'var(--foreground)',
   });
 
   const g = setAttributesNS(createElementNS('g'), {
diff --git a/packages/feedback/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts
index ca5f138cb960..92763cacdd93 100644
--- a/packages/feedback/src/core/createMainStyles.ts
+++ b/packages/feedback/src/core/createMainStyles.ts
@@ -46,17 +46,29 @@ export function createMainStyles(
   const style = DOCUMENT.createElement('style');
   style.textContent = `
 :host {
-  --bottom: 1rem;
-  --right: 1rem;
-  --top: auto;
-  --left: auto;
-  --z-index: 100000;
+  --z-index: ${themes.themeLight.zIndex};
   --font-family: ${themes.themeLight.fontFamily};
   --font-size: ${themes.themeLight.fontSize};
 
   font-family: var(--font-family);
   font-size: var(--font-size);
 
+  --page-margin: 16px;
+  --actor-inset: auto var(--page-margin) var(--page-margin) auto;
+
+  --dialog-inset: auto var(--page-margin) var(--page-margin) auto;
+  --dialog-padding: 24px;
+
+  .brand-link path {
+    fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
+  }
+  @media (prefers-color-scheme: dark)
+  {
+    path: {
+      fill: '#fff';
+    }
+  }
+
   ${getThemedCssVariables(colorScheme === 'dark' ? themes.themeDark : themes.themeLight)}
 }
 
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
index fe5eceee4508..32cce8b83fe7 100644
--- a/packages/feedback/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -254,13 +254,13 @@ export const buildFeedbackIntegration = ({
       const mergedOptions = mergeOptions(_options, {
         ...optionOverrides,
         onFormOpen() {
-          actor.removeFromDom();
+          actor.hide();
         },
         onFormClose() {
-          actor.appendToDom();
+          actor.show();
         },
         onFormSubmitted() {
-          actor.appendToDom();
+          actor.show();
         },
       });
       _attachTo(actor.el, mergedOptions);
diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts
index 037f64310120..4d01aae84309 100644
--- a/packages/feedback/src/modal/components/Dialog.css.ts
+++ b/packages/feedback/src/modal/components/Dialog.css.ts
@@ -1,24 +1,23 @@
 import { DOCUMENT } from '../../constants';
 
-/**
- * Creates <style> element for widget dialog
- */
-export function createDialogStyles(): HTMLStyleElement {
-  const style = DOCUMENT.createElement('style');
-
-  style.textContent = `
+const DIALOG = `
 .dialog {
-  line-height: 25px;
-  background-color: rgba(0, 0, 0, 0.05);
-  border: none;
   position: fixed;
-  inset: 0;
-  z-index: 10000;
-  width: 100vw;
-  height: 100vh;
+  z-index: var(--z-index);
+  margin: 0;
+
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+
+  line-height: 1.75em;
+
+  background-color: rgba(0, 0, 0, 0.05);
+  border: none;
+  inset: 0;
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
 }
@@ -34,50 +33,50 @@ export function createDialogStyles(): HTMLStyleElement {
 
 .dialog__content {
   position: fixed;
-  left: var(--left);
-  right: var(--right);
-  bottom: var(--bottom);
-  top: var(--top);
+  inset: var(--dialog-inset);
 
-  border: var(--border);
-  border-radius: var(--form-border-radius);
-  background-color: var(--background);
-  color: var(--foreground);
-
-  max-width: 100%;
-  max-height: calc(100% - 2rem);
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding: var(--dialog-padding);
+  max-width: 100%;
+  max-height: calc(100% - (2 * var(--page-margin)) - (2 * var(--dialog-padding)));
+  overflow: auto;
+
+  background-color: var(--background);
+  border-radius: var(--form-border-radius);
+  border: var(--border);
   box-shadow: var(--box-shadow);
-  transition: transform 0.2s ease-in-out;
+  color: var(--foreground);
   transform: translate(0, 0) scale(1);
+  transition: transform 0.2s ease-in-out;
+}
 
-  padding: 24px;
+.dialog__content:has(.editor) {
+  inset: var(--page-margin);
 }
-.dialog__content-fullscreen {
-  top: 16px;
-  left: 16px;
+@media (max-width: 600px) {
+  .dialog__content {
+    inset: var(--page-margin);
+  }
 }
+`;
 
+const DIALOG_HEADER = `
 .dialog__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 20px;
   font-weight: 600;
   margin: 0;
-
 }
 
 .brand-link {
   display: inline-flex;
 }
+`;
 
-.error {
-  color: var(--error);
-}
-
+const FORM = `
 .form {
   display: flex;
   overflow: auto;
@@ -92,10 +91,21 @@ export function createDialogStyles(): HTMLStyleElement {
   overflow: auto;
   flex-direction: column;
   justify-content: space-between;
-  gap: 16px;
-  flex-shrink: 0;
+  gap: 20px;
+  flex: 1 0 auto;
+}
+
+@media (max-width: 600px) {
+  .form__right {
+    width: auto;
+  }
 }
 
+.form__top {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
 .form__error-container {
   color: var(--error);
@@ -109,11 +119,9 @@ export function createDialogStyles(): HTMLStyleElement {
 }
 
 .form__label__text {
-  display: grid;
+  display: flex;
   gap: 4px;
   align-items: center;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
 }
 
 .form__label__text--required {
@@ -147,10 +155,15 @@ export function createDialogStyles(): HTMLStyleElement {
   resize: vertical;
 }
 
+.error {
+  color: var(--error);
+}
+`;
+
+const BUTTON = `
 .btn-group {
   display: grid;
   gap: 8px;
-  margin-top: 8px;
 }
 
 .btn {
@@ -193,7 +206,9 @@ export function createDialogStyles(): HTMLStyleElement {
 .btn--default:focus-visible {
   outline: 1px auto var(--cancel-outline-focus);
 }
+`;
 
+const SUCCESS = `
 .success-message {
   position: fixed;
   left: var(--left);
@@ -220,11 +235,21 @@ export function createDialogStyles(): HTMLStyleElement {
 .success-icon {
   display: flex;
 }
-
-.success-icon path {
-  fill: var(--success);
-}
 `;
 
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createDialogStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  style.textContent = `
+    ${DIALOG}
+    ${DIALOG_HEADER}
+    ${FORM}
+    ${BUTTON}
+    ${SUCCESS}
+  `;
+
   return style;
 }
diff --git a/packages/feedback/src/modal/components/DialogContainer.tsx b/packages/feedback/src/modal/components/Dialog.tsx
similarity index 83%
rename from packages/feedback/src/modal/components/DialogContainer.tsx
rename to packages/feedback/src/modal/components/Dialog.tsx
index 3f955dc524ab..fddb2cc0448e 100644
--- a/packages/feedback/src/modal/components/DialogContainer.tsx
+++ b/packages/feedback/src/modal/components/Dialog.tsx
@@ -4,7 +4,6 @@ import { Fragment, h } from 'preact'; // eslint-disable-line @typescript-eslint/
 import type { VNode } from 'preact';
 import { useCallback, useMemo, useState } from 'preact/hooks';
 import { SUCCESS_MESSAGE_TIMEOUT } from '../../constants';
-import { DialogContent } from './DialogContent';
 import { DialogHeader } from './DialogHeader';
 import type { Props as HeaderProps } from './DialogHeader';
 import type { Props as FormProps } from './Form';
@@ -17,7 +16,7 @@ interface Props extends HeaderProps, FormProps {
   open: boolean;
 }
 
-export function DialogComponent({ open, onFormSubmitted, successMessageText, ...props }: Props): VNode {
+export function Dialog({ open, onFormSubmitted, successMessageText, ...props }: Props): VNode {
   const successIconHtml = useMemo(() => ({ __html: SuccessIcon().outerHTML }), []);
 
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
@@ -52,10 +51,16 @@ export function DialogComponent({ open, onFormSubmitted, successMessageText, ...
         </div>
       ) : (
         <dialog class="dialog" onClick={props.onFormClose} open={open}>
-          <DialogContent>
+          <div
+            class="dialog__content"
+            onClick={e => {
+              // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog)
+              e.stopPropagation();
+            }}
+          >
             <DialogHeader {...props} />
             <Form {...props} onSubmitSuccess={onSubmitSuccess} />
-          </DialogContent>
+          </div>
         </dialog>
       )}
     </Fragment>
diff --git a/packages/feedback/src/modal/components/DialogContent.tsx b/packages/feedback/src/modal/components/DialogContent.tsx
deleted file mode 100644
index 0a8ebb54a990..000000000000
--- a/packages/feedback/src/modal/components/DialogContent.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// biome-ignore lint/nursery/noUnusedImports: reason
-import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
-import type { ComponentChildren, VNode } from 'preact';
-
-export interface Props {
-  children: ComponentChildren;
-}
-
-export function DialogContent({ children }: Props): VNode {
-  return (
-    <div
-      class="dialog__content"
-      onClick={e => {
-        // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog)
-        e.stopPropagation();
-      }}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/packages/feedback/src/modal/components/DialogHeader.tsx b/packages/feedback/src/modal/components/DialogHeader.tsx
index 0d6c66d8341c..b4190a10e787 100644
--- a/packages/feedback/src/modal/components/DialogHeader.tsx
+++ b/packages/feedback/src/modal/components/DialogHeader.tsx
@@ -3,16 +3,15 @@ import type { FeedbackInternalOptions } from '@sentry/types';
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import type { VNode } from 'preact';
 import { useMemo } from 'preact/hooks';
-import type { Props as LogoProps } from './SentryLogo';
 import { SentryLogo } from './SentryLogo';
 
-export interface Props extends LogoProps {
+export interface Props {
   formTitle: FeedbackInternalOptions['formTitle'];
   showBranding: FeedbackInternalOptions['showBranding'];
 }
 
-export function DialogHeader({ colorScheme, formTitle, showBranding }: Props): VNode {
-  const logoHtml = useMemo(() => ({ __html: SentryLogo({ colorScheme }).outerHTML }), [colorScheme]);
+export function DialogHeader({ formTitle, showBranding }: Props): VNode {
+  const logoHtml = useMemo(() => ({ __html: SentryLogo().outerHTML }), []);
 
   return (
     <h2 class="dialog__header">
diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
index 3a723bc61d1b..15d3bcb3ef91 100644
--- a/packages/feedback/src/modal/components/Form.tsx
+++ b/packages/feedback/src/modal/components/Form.tsx
@@ -222,15 +222,13 @@ export function Form({
             </label>
           ) : null}
         </div>
-        <div class="form__bottom">
-          <div class="btn-group">
-            <button class="btn btn--primary" type="submit">
-              {submitButtonLabel}
-            </button>
-            <button class="btn btn--default" type="button" onClick={onFormClose}>
-              {cancelButtonLabel}
-            </button>
-          </div>
+        <div class="btn-group">
+          <button class="btn btn--primary" type="submit">
+            {submitButtonLabel}
+          </button>
+          <button class="btn btn--default" type="button" onClick={onFormClose}>
+            {cancelButtonLabel}
+          </button>
         </div>
       </div>
     </form>
diff --git a/packages/feedback/src/modal/components/Icon.ts b/packages/feedback/src/modal/components/Icon.ts
deleted file mode 100644
index 93c1d3884c52..000000000000
--- a/packages/feedback/src/modal/components/Icon.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { DOCUMENT } from '../../constants';
-import { setAttributesNS } from '../../util/setAttributesNS';
-
-const SIZE = 20;
-const XMLNS = 'http://www.w3.org/2000/svg';
-
-/**
- * Feedback Icon
- */
-export function Icon(): SVGElement {
-  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
-    DOCUMENT.createElementNS(XMLNS, tagName);
-  const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'feedback-icon',
-    width: `${SIZE}`,
-    height: `${SIZE}`,
-    viewBox: `0 0 ${SIZE} ${SIZE}`,
-    fill: 'none',
-  });
-
-  const g = setAttributesNS(createElementNS('g'), {
-    clipPath: 'url(#clip0_57_80)',
-  });
-
-  const path = setAttributesNS(createElementNS('path'), {
-    ['fill-rule']: 'evenodd',
-    ['clip-rule']: 'evenodd',
-    d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
-  });
-  svg.appendChild(g).appendChild(path);
-
-  const speakerDefs = createElementNS('defs');
-  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
-    id: 'clip0_57_80',
-  });
-
-  const speakerRect = setAttributesNS(createElementNS('rect'), {
-    width: `${SIZE}`,
-    height: `${SIZE}`,
-    fill: 'white',
-  });
-
-  speakerClipPathDef.appendChild(speakerRect);
-  speakerDefs.appendChild(speakerClipPathDef);
-
-  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
-
-  return svg;
-}
diff --git a/packages/feedback/src/modal/components/SentryLogo.ts b/packages/feedback/src/modal/components/SentryLogo.ts
index 4c6cb9f81153..eabdcdf8d9b1 100644
--- a/packages/feedback/src/modal/components/SentryLogo.ts
+++ b/packages/feedback/src/modal/components/SentryLogo.ts
@@ -1,21 +1,15 @@
-import type { FeedbackInternalOptions } from '@sentry/types';
 import { DOCUMENT } from '../../constants';
 import { setAttributesNS } from '../../util/setAttributesNS';
 
 const XMLNS = 'http://www.w3.org/2000/svg';
 
-export type Props = {
-  colorScheme: FeedbackInternalOptions['colorScheme'];
-};
-
 /**
  * Sentry Logo
  */
-export function SentryLogo({ colorScheme }: Props): SVGElement {
+export function SentryLogo(): SVGElement {
   const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
     DOCUMENT.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'sentry-logo',
     width: '32',
     height: '30',
     viewBox: '0 0 72 66',
@@ -26,28 +20,7 @@ export function SentryLogo({ colorScheme }: Props): SVGElement {
     transform: 'translate(11, 11)',
     d: 'M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z',
   });
-  svg.append(path);
-
-  const defs = createElementNS('defs');
-  const style = createElementNS('style');
-
-  style.textContent = `
-    path {
-      fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
-    }`;
-
-  if (colorScheme === 'system') {
-    style.textContent += `
-    @media (prefers-color-scheme: dark) {
-      path: {
-        fill: '#fff';
-      }
-    }
-    `;
-  }
-
-  defs.append(style);
-  svg.append(defs);
+  svg.appendChild(path);
 
   return svg;
 }
diff --git a/packages/feedback/src/modal/components/SuccessIcon.ts b/packages/feedback/src/modal/components/SuccessIcon.ts
index fddd8c6fb941..279938bced49 100644
--- a/packages/feedback/src/modal/components/SuccessIcon.ts
+++ b/packages/feedback/src/modal/components/SuccessIcon.ts
@@ -15,7 +15,7 @@ export function SuccessIcon(): SVGElement {
     width: `${WIDTH}`,
     height: `${HEIGHT}`,
     viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
-    fill: 'none',
+    fill: 'var(--success)',
   });
 
   const g = setAttributesNS(createElementNS('g'), {
diff --git a/packages/feedback/src/modal/integration.tsx b/packages/feedback/src/modal/integration.tsx
index 6f6cc8f5fef6..02a6597f97e1 100644
--- a/packages/feedback/src/modal/integration.tsx
+++ b/packages/feedback/src/modal/integration.tsx
@@ -2,8 +2,8 @@ import { getCurrentScope } from '@sentry/core';
 import type { CreateDialogProps, FeedbackFormData, FeedbackModalIntegration, IntegrationFn } from '@sentry/types';
 import { h, render } from 'preact';
 import { DOCUMENT } from '../constants';
+import { Dialog } from './components/Dialog';
 import { createDialogStyles } from './components/Dialog.css';
-import { DialogComponent } from './components/DialogContainer';
 
 export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
   return {
@@ -19,6 +19,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
       const el = DOCUMENT.createElement('div');
       const style = createDialogStyles();
 
+      let originalOverflow = '';
       const dialog = {
         get el() {
           return el;
@@ -36,9 +37,12 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
         open() {
           renderContent(true);
           options.onFormOpen && options.onFormOpen();
+          originalOverflow = DOCUMENT.body.style.overflow;
+          DOCUMENT.body.style.overflow = 'hidden';
         },
         close() {
           renderContent(false);
+          DOCUMENT.body.style.overflow = originalOverflow;
         },
       };
 
@@ -46,9 +50,8 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
 
       const renderContent = (open: boolean): void => {
         render(
-          <DialogComponent
+          <Dialog
             screenshotInput={screenshotInput}
-            colorScheme={options.colorScheme}
             showBranding={options.showBranding}
             showName={options.showName || options.isNameRequired}
             showEmail={options.showEmail || options.isEmailRequired}
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index eef9ce9322aa..8752afdec0af 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -10,11 +10,6 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   const gray100 = '#302735';
 
   style.textContent = `
-.dialog__content:has(.editor) {
-  top: var(--bottom);
-  left: var(--right);
-}
-
 .editor {
   padding: 10px;
   padding-top: 65px;
diff --git a/packages/types/src/feedback/theme.ts b/packages/types/src/feedback/theme.ts
index 1bfb2e580a99..c9e0b91908f0 100644
--- a/packages/types/src/feedback/theme.ts
+++ b/packages/types/src/feedback/theme.ts
@@ -1,118 +1,167 @@
-export interface FeedbackTheme {
+interface BaseStyles {
   /**
    * Font family for widget
    */
   fontFamily: string;
+
   /**
    * Font size for widget
    */
   fontSize: string;
+
+  /**
+   * Foreground color (i.e. text color)
+   */
+  foreground: string;
+
   /**
    * Background color for actor and dialog
    */
   background: string;
+
   /**
-   * Background color on hover
+   * Success color
    */
-  backgroundHover: string;
+  success: string;
+
   /**
-   * Border styling for actor and dialog
+   * Error color
    */
-  border: string;
+  error: string;
+}
+
+interface ActorAndModal {
   /**
-   * Border radius styling for actor
+   * z-index of the floating Actor or Modal
    */
-  borderRadius: string;
+  zIndex: number;
+
+  /**
+   * Border styling for actor and dialog
+   */
+  border: string;
+
   /**
    * Box shadow for actor and dialog
    */
   boxShadow: string;
+}
+
+interface ActorButton {
   /**
-   * Foreground color (i.e. text color)
+   * Background color on hover
    */
-  foreground: string;
+  backgroundHover: string;
+
   /**
-   * Success color
+   * Border radius styling for actor
    */
-  success: string;
+  borderRadius: string;
+}
+
+interface Modal {
   /**
-   * Error color
+   * Border radius for dialog
    */
-  error: string;
+  formBorderRadius: string;
+
+  /**
+   * Border radius for form inputs
+   */
+  formContentBorderRadius: string;
+}
+
+interface SubmitButton {
+  /**
+   * Foreground color for the submit button
+   */
+  submitForeground: string;
 
   /**
    * Background color for the submit button
    */
   submitBackground: string;
+
+  /**
+   * Foreground color for the submit button, in the hover state
+   */
+  submitForegroundHover: string;
+
   /**
    * Background color when hovering over the submit button
    */
   submitBackgroundHover: string;
+
   /**
    * Border style for the submit button
    */
   submitBorder: string;
+
   /**
    * Border style for the submit button, in the focued state
    */
   submitOutlineFocus: string;
-  /**
-   * Foreground color for the submit button
-   */
-  submitForeground: string;
+}
 
+interface CancelButton {
   /**
-   * Foreground color for the submit button, in the hover state
+   * Foreground color for the cancel button
    */
-  submitForegroundHover: string;
+  cancelForeground: string;
 
   /**
    * Background color for the cancel button
    */
   cancelBackground: string;
+
+  /**
+   * Foreground color for the cancel button, in the hover state
+   */
+  cancelForegroundHover: string;
+
   /**
    * Background color when hovering over the cancel button
    */
   cancelBackgroundHover: string;
+
   /**
    * Border style for the cancel button
    */
   cancelBorder: string;
+
   /**
    * Border style for the cancel button, in the focued state
    */
   cancelOutlineFocus: string;
-  /**
-   * Foreground color for the cancel button
-   */
-  cancelForeground: string;
-  /**
-   * Foreground color for the cancel button, in the hover state
-   */
-  cancelForegroundHover: string;
+}
 
+interface Input {
   /**
    * Background color for form inputs
    */
   inputBackground: string;
+
   /**
    * Foreground color for form inputs
    */
   inputForeground: string;
+
   /**
    * Border styles for form inputs
    */
   inputBorder: string;
+
   /**
    * Border styles for form inputs when focused
    */
   inputOutlineFocus: string;
-  /**
-   * Border radius for dialog
-   */
-  formBorderRadius: string;
-  /**
-   * Border radius for form inputs
-   */
-  formContentBorderRadius: string;
 }
+
+export interface FeedbackTheme
+  extends BaseStyles,
+    ActorAndModal,
+    ActorButton,
+    Modal,
+    SubmitButton,
+    CancelButton,
+    Input {}