diff --git a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss
new file mode 100644
index 000000000000..0825598b67d4
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss
@@ -0,0 +1,10 @@
+.card-wrapper {
+    background-color: var(--core-color-solid-slate-50);
+    margin-top: 0.5rem;
+    padding: 1rem;
+    border-radius: 0.625rem;
+
+    .title {
+        margin-bottom: 1rem;
+    }
+}
diff --git a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.tsx b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.tsx
new file mode 100644
index 000000000000..8dd56b2333b7
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.tsx
@@ -0,0 +1,17 @@
+import { Text } from '@deriv-com/quill-ui';
+import React from 'react';
+
+const CardWrapper = ({ title, children }: { title?: string; children: React.ReactNode }) => {
+    return (
+        <div className='card-wrapper'>
+            {title && (
+                <Text size='sm' bold className='title'>
+                    {title}
+                </Text>
+            )}
+            {children}
+        </div>
+    );
+};
+
+export default CardWrapper;
diff --git a/packages/trader/src/AppV2/Components/CardWrapper/index.ts b/packages/trader/src/AppV2/Components/CardWrapper/index.ts
new file mode 100644
index 000000000000..75b3d0389d48
--- /dev/null
+++ b/packages/trader/src/AppV2/Components/CardWrapper/index.ts
@@ -0,0 +1,4 @@
+import CardWrapper from './card-wrapper';
+import './card-wrapper.scss';
+
+export default CardWrapper;