diff --git a/components/modal/modal-title.tsx b/components/modal/modal-title.tsx
index 841a3bf..4de52cc 100644
--- a/components/modal/modal-title.tsx
+++ b/components/modal/modal-title.tsx
@@ -32,7 +32,7 @@ const ModalTitle: React.FC<ModalTitleProps> = React.memo(({
           justify-content: center;
           align-items: center;
           word-break: break-word;
-          text-transform: uppercase;
+          text-transform: capitalize;
           color: ${theme.palette.foreground};
         }
       `}</style>
diff --git a/components/modal/modal-wrapper.tsx b/components/modal/modal-wrapper.tsx
index d9954ea..4a899c5 100644
--- a/components/modal/modal-wrapper.tsx
+++ b/components/modal/modal-wrapper.tsx
@@ -28,7 +28,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React
         {children}
         <style jsx>{`
         .wrapper {
-          max-width: 90%;
+          max-width: 85%;
           width: ${width};
           overflow: hidden;
           display: flex;
@@ -39,6 +39,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React
           color: ${theme.palette.foreground};
           border-radius: ${theme.layout.radius};
           padding: ${theme.layout.gap};
+          box-shadow: ${theme.expressiveness.shadowLarge};
           opacity: 0;
           transform: translate3d(0px, -40px, 0px);
           transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;
diff --git a/components/shared/backdrop.tsx b/components/shared/backdrop.tsx
index b6464f0..04e7179 100644
--- a/components/shared/backdrop.tsx
+++ b/components/shared/backdrop.tsx
@@ -48,13 +48,16 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(({
           height: 100vh;
           width: 100vw;
           overflow: auto;
-          z-index: 2000;
+          z-index: 1000;
         }
         
         .content {
           display: flex;
           align-items: center;
           justify-content: center;
+          position: relative;
+          z-index: 1001;
+          outline: none;
         }
         
         .offset {
@@ -72,10 +75,10 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(({
           width: 100%;
           height: 100%;
           opacity: ${theme.expressiveness.portalOpacity};
-          background-color: ${theme.palette.foreground};
+          background-color: black;
           transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
           pointer-events: none;
-          z-index: -1;
+          z-index: 1000;
         }
       `}</style>
       </div>
diff --git a/components/styles/themes/dark.ts b/components/styles/themes/dark.ts
index 7ae67f2..7282460 100644
--- a/components/styles/themes/dark.ts
+++ b/components/styles/themes/dark.ts
@@ -48,7 +48,7 @@ export const expressiveness: ZeitUIThemesExpressiveness = {
   shadowSmall: '0 0 0 1px #333',
   shadowMedium: '0 0 0 1px #333',
   shadowLarge: '0 0 0 1px #333',
-  portalOpacity: 0.25,
+  portalOpacity: 0.75,
 }
 
 export const layout: ZeitUIThemesLayout = {