diff --git a/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx b/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx
index eec450799..f0c3cf878 100644
--- a/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx
+++ b/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx
@@ -24,9 +24,9 @@ export default function ColorPickerModal({
 }: AdLerUIComponent<Props>) {
   if (!showModal) return null;
   return (
-    <div>
-      <StyledModal showModal={showModal} canClose={false} lefthalfshift={true}>
-        <div className="p-2 text-adlerdarkblue">
+    <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center h-full bg-blacktrans">
+      <div className="flex portrait:flex-col items-center justify-center h-full w-full">
+        <div className=" z-50 p-4 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden flex flex-col text-adlerdarkblue">
           <h1 className="text-2xl font-bold">{title}</h1>
           <ColorPicker
             colors={colorPalette}
@@ -42,7 +42,8 @@ export default function ColorPickerModal({
             Zurück
           </StyledButton>
         </div>
-      </StyledModal>
+        <div className="w-1/2"></div>
+      </div>
     </div>
   );
 }