diff --git a/src/client/FlagInputModal.ts b/src/client/FlagInputModal.ts
index 65f56754d..10b826618 100644
--- a/src/client/FlagInputModal.ts
+++ b/src/client/FlagInputModal.ts
@@ -254,7 +254,6 @@ export class FlagInputModal extends LitElement {
         id="flaginputModal"
         title="Flag Input"
         translationKey="flag_input.title"
-        widthRatio="0.8"
         heightRatio="0.75"
         disableScroll="true"
         special="true"
@@ -307,9 +306,9 @@ export class FlagInputModal extends LitElement {
                         this.close();
                       }}
                       class="text-center cursor-pointer border-none bg-none opacity-70 
-                        w-[calc(100%/2-15px)] sm:w-[calc(100%/3-15px)] 
-                        md:w-[calc(100%/4-15px)] lg:w-[calc(100%/5-15px)] 
-                        xl:w-[calc(100%/6-15px)] min-w-[100px]"
+                        w-[calc(100%/2-15px)] sm:w-[calc(100%/4-15px)] 
+                        md:w-[calc(100%/6-15px)] lg:w-[calc(100%/8-15px)] 
+                        xl:w-[calc(100%/10-15px)] min-w-[80px]"
                     >
                       <img
                         class="country-flag w-full h-auto"
@@ -387,7 +386,7 @@ ${colorClass}"
                     : null}
 
                   <div
-                    class="grid grid-cols-2 gap-2 w-full overflow-y-auto pr-1 mb-2"
+                    class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 w-full overflow-y-auto pr-1 mb-2"
                   >
                     ${Object.entries(FlagMap)
                       .filter(([name]) => name !== "frame" && name !== "full")
diff --git a/src/client/components/baseComponents/Modal.ts b/src/client/components/baseComponents/Modal.ts
index b29d13a41..ae109f533 100644
--- a/src/client/components/baseComponents/Modal.ts
+++ b/src/client/components/baseComponents/Modal.ts
@@ -7,7 +7,6 @@ export class OModal extends LitElement {
   @state() public isModalOpen = false;
   @property({ type: String }) title = "";
   @property({ type: String }) translationKey = "";
-  @property({ type: Number }) widthRatio?: number;
   @property({ type: Number }) heightRatio?: number;
   @property({ type: Boolean }) disableScroll = false;
   @property({ type: Boolean }) special = false;
@@ -39,7 +38,7 @@ export class OModal extends LitElement {
       background: #23232382;
       border-radius: 8px;
       min-width: 340px;
-      max-width: 860px;
+      max-width: 1000px;
       display: flex;
       flex-direction: column;
       height: 100%;
@@ -100,7 +99,7 @@ export class OModal extends LitElement {
             <aside class="c-modal">
               <div
                 class="c-modal__wrapper${this.special ? "__special" : ""}"
-                style=${`width: ${this.widthRatio ? this.widthRatio * 100 + "vw" : "auto"}; height: ${this.heightRatio ? this.heightRatio * 100 + "vh" : "auto"};`}
+                style=${`height: ${this.heightRatio ? this.heightRatio * 100 + "vh" : "auto"};`}
               >
                 <header class="c-modal__header">
                   ${`${this.translationKey}` === ""