diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c497bd04..e4f415dac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   Implement animations for `Dialog` and `DialogAlert` components
 -   Implement `DaoAvatar` and `MemberAvatar` module components
 -   Implement `OdsModulesProvider` for using wagmi hooks on modules components
+-   Introduce component customisations for the z-index property of the `Dropdown` and `Dialogs` components
 
 ### Changed
 
diff --git a/index.css b/index.css
index 6811201d6..5b3f370e1 100644
--- a/index.css
+++ b/index.css
@@ -1,4 +1,4 @@
-@import "./src/theme/index.css";
+@import "./src";
 
 @tailwind base;
 @tailwind components;
diff --git a/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.tsx b/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.tsx
index 2cf2c570d..0186a0a2f 100644
--- a/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.tsx
+++ b/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.tsx
@@ -74,7 +74,11 @@ export const DialogRoot: React.FC<IDialogRootProps> = (props) => {
                 {rootProps.open && (
                     <Portal forceMount key="portal">
                         <Overlay
-                            className={classNames('fixed inset-0 bg-modal-overlay backdrop-blur-md', overlayClassName)}
+                            className={classNames(
+                                'fixed inset-0 bg-modal-overlay backdrop-blur-md',
+                                'z-[var(--ods-dialog-overlay-z-index)]',
+                                overlayClassName,
+                            )}
                             asChild
                         >
                             <motion.div
@@ -88,6 +92,7 @@ export const DialogRoot: React.FC<IDialogRootProps> = (props) => {
                             className={classNames(
                                 'fixed inset-x-2 bottom-2 mx-auto max-h-[calc(100vh-80px)] lg:bottom-auto lg:top-[120px] lg:max-h-[calc(100vh-200px)]',
                                 'flex max-w-[480px] flex-col rounded-xl border border-neutral-100 bg-neutral-0 shadow-neutral-md md:min-w-[480px]',
+                                'z-[var(--ods-dialog-content-z-index)]',
                                 containerClassName,
                             )}
                             onCloseAutoFocus={onCloseAutoFocus}
diff --git a/src/core/components/dialogs/dialog/dialogRoot/index.css b/src/core/components/dialogs/dialog/dialogRoot/index.css
new file mode 100644
index 000000000..81cd0e91a
--- /dev/null
+++ b/src/core/components/dialogs/dialog/dialogRoot/index.css
@@ -0,0 +1,7 @@
+:root {
+  /* Z-index property of the dialog overlay */
+  --ods-dialog-overlay-z-index: auto;
+
+  /* Z-index property of the dialog content */
+  --ods-dialog-content-z-index: auto;
+}
diff --git a/src/core/components/dialogs/dialog/index.css b/src/core/components/dialogs/dialog/index.css
new file mode 100644
index 000000000..5d6fa897f
--- /dev/null
+++ b/src/core/components/dialogs/dialog/index.css
@@ -0,0 +1 @@
+@import "./dialogRoot";
diff --git a/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.tsx b/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.tsx
index 39c114f5c..8cd0ae241 100644
--- a/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.tsx
+++ b/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.tsx
@@ -82,7 +82,11 @@ export const DialogAlertRoot: React.FC<IDialogAlertRootProps> = (props) => {
                 {rootProps.open && (
                     <Portal forceMount key="portal">
                         <Overlay
-                            className={classNames('fixed inset-0 bg-modal-overlay backdrop-blur-md', overlayClassName)}
+                            className={classNames(
+                                'fixed inset-0 bg-modal-overlay backdrop-blur-md',
+                                'z-[var(--ods-dialog-alert-overlay-z-index)]',
+                                overlayClassName,
+                            )}
                             asChild
                         >
                             <motion.div
@@ -96,6 +100,7 @@ export const DialogAlertRoot: React.FC<IDialogAlertRootProps> = (props) => {
                             className={classNames(
                                 'fixed inset-x-2 bottom-2 mx-auto max-h-[calc(100vh-80px)] lg:bottom-auto lg:top-[120px] lg:max-h-[calc(100vh-200px)]',
                                 'flex max-w-[480px] flex-col rounded-xl border border-neutral-100 bg-neutral-0 shadow-neutral-md md:min-w-[480px]',
+                                'z-[var(--ods-dialog-alert-content-z-index)]',
                                 containerClassName,
                             )}
                             onCloseAutoFocus={onCloseAutoFocus}
diff --git a/src/core/components/dialogs/dialogAlert/dialogAlertRoot/index.css b/src/core/components/dialogs/dialogAlert/dialogAlertRoot/index.css
new file mode 100644
index 000000000..24807e29f
--- /dev/null
+++ b/src/core/components/dialogs/dialogAlert/dialogAlertRoot/index.css
@@ -0,0 +1,7 @@
+:root {
+  /* Z-index property of the dialog overlay */
+  --ods-dialog-alert-overlay-z-index: auto;
+
+  /* Z-index property of the dialog content */
+  --ods-dialog-alert-content-z-index: auto;
+}
diff --git a/src/core/components/dialogs/dialogAlert/index.css b/src/core/components/dialogs/dialogAlert/index.css
new file mode 100644
index 000000000..831b5b2b2
--- /dev/null
+++ b/src/core/components/dialogs/dialogAlert/index.css
@@ -0,0 +1 @@
+@import "./dialogAlertRoot";
diff --git a/src/core/components/dialogs/index.css b/src/core/components/dialogs/index.css
new file mode 100644
index 000000000..8ddfae10f
--- /dev/null
+++ b/src/core/components/dialogs/index.css
@@ -0,0 +1,2 @@
+@import "./dialog";
+@import "./dialogAlert";
diff --git a/src/core/components/dropdown/dropdownContainer.tsx b/src/core/components/dropdown/dropdownContainer.tsx
index 91df98200..87f4a79e0 100644
--- a/src/core/components/dropdown/dropdownContainer.tsx
+++ b/src/core/components/dropdown/dropdownContainer.tsx
@@ -91,6 +91,7 @@ export const DropdownContainer: React.FC<IDropdownContainerProps> = (props) => {
                     className={classNames(
                         'flex min-w-48 flex-col gap-1.5 overflow-auto rounded-xl border border-neutral-100 bg-neutral-0 p-2 shadow-neutral-sm',
                         'max-h-[var(--radix-dropdown-menu-content-available-height)] max-w-[var(--radix-dropdown-menu-content-available-width)]',
+                        'z-[var(--ods-dropdown-container-content-z-index)]',
                     )}
                     onCloseAutoFocus={(event) => event.preventDefault()}
                     align={align}
diff --git a/src/core/components/dropdown/index.css b/src/core/components/dropdown/index.css
new file mode 100644
index 000000000..950c6f6ab
--- /dev/null
+++ b/src/core/components/dropdown/index.css
@@ -0,0 +1,4 @@
+:root {
+  /* Z-index property of the content insdie the dropdown container */
+  --ods-dropdown-container-content-z-index: auto;
+}
diff --git a/src/core/components/index.css b/src/core/components/index.css
new file mode 100644
index 000000000..474ceabda
--- /dev/null
+++ b/src/core/components/index.css
@@ -0,0 +1,2 @@
+@import "./dialogs";
+@import "./dropdown";
diff --git a/src/core/index.css b/src/core/index.css
new file mode 100644
index 000000000..3976f24ef
--- /dev/null
+++ b/src/core/index.css
@@ -0,0 +1 @@
+@import "./components";
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 000000000..e9aab3821
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,2 @@
+@import "./core";
+@import "./theme";