diff --git a/src/components/RightPanel/RightPanel.tsx b/src/components/RightPanel/RightPanel.tsx
new file mode 100644
index 0000000..623b6d1
--- /dev/null
+++ b/src/components/RightPanel/RightPanel.tsx
@@ -0,0 +1,50 @@
+import { ThemeSection } from './ThemeSection';
+import { PatternSection } from './PatternSection';
+import { ColorsSection } from './ColorsSection';
+import { GradientSection } from './GradientSection';
+import { CornerStyleSection } from './CornerStyleSection';
+import { LogoSection } from './LogoSection';
+import { FrameLabelSection } from './FrameLabelSection';
+import { DownloadSizeSection } from './DownloadSizeSection';
+
+interface Props { embedded?: boolean }
+
+function Divider() {
+  return <div style={{ borderTop: '1px solid var(--border)' }} />;
+}
+
+export function RightPanel({ embedded }: Props) {
+  return (
+    <div
+      className="flex-shrink-0 flex flex-col h-full overflow-y-auto"
+      style={{
+        width: embedded ? '100%' : 'var(--right-w)',
+        background: 'var(--bg-panel)',
+        borderLeft: embedded ? 'none' : '1px solid var(--border)',
+      }}
+    >
+      {!embedded && (
+        <div className="p-5 pb-4 xl:p-6 xl:pb-4">
+          <h2 className="text-[17px] xl:text-[19px] font-bold" style={{ color: 'var(--text-primary)' }}>Style your QR</h2>
+        </div>
+      )}
+      <div className="flex flex-col gap-5 px-4 xl:px-6 pb-8 pt-4">
+        <ThemeSection />
+        <Divider />
+        <PatternSection />
+        <Divider />
+        <CornerStyleSection />
+        <Divider />
+        <ColorsSection />
+        <Divider />
+        <GradientSection />
+        <Divider />
+        <LogoSection />
+        <Divider />
+        <FrameLabelSection />
+        <Divider />
+        <DownloadSizeSection />
+      </div>
+    </div>
+  );
+}