diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 14f0a7b6bf..4b8c0333ef 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -7,7 +7,7 @@
   import Context from "../context"
 
   export let title = undefined
-  export let size = "small"
+  export let size = "S"
   export let cancelText = "Cancel"
   export let confirmText = "Confirm"
   export let showCancelButton = true
@@ -30,7 +30,11 @@
 </script>
 
 <div
-  class="spectrum-Dialog spectrum-Dialog--{size}"
+  class="spectrum-Dialog"
+  class:spectrum-Dialog--small={size === "S"}
+  class:spectrum-Dialog--medium={size === "M"}
+  class:spectrum-Dialog--large={size === "L"}
+  class:spectrum-Dialog--extraLarge={size === "XL"}
   style="position: relative;"
   role="dialog"
   tabindex="-1"
@@ -76,8 +80,8 @@
 </div>
 
 <style>
-  .spectrum-Dialog--XL {
-    width: 1200px;
+  .spectrum-Dialog--extraLarge {
+    width: 1000px;
   }
   .content-grid {
     display: grid;
diff --git a/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
index f2dd629348..c9825e4896 100644
--- a/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
@@ -117,12 +117,7 @@
   const getOptionValue = (x) => x.key
 </script>
 
-<ModalContent
-  title="Filter"
-  confirmText="Save"
-  onConfirm={saveView}
-  size="large"
->
+<ModalContent title="Filter" confirmText="Save" onConfirm={saveView} size="L">
   {#if view.filters.length}
     <div class="input-group-row">
       {#each view.filters as filter, idx}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 1dc751d6b6..b787697802 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -43,7 +43,7 @@
 
 <ModalContent
   title="Create Datasource"
-  size="large"
+  size="L"
   confirmText="Create"
   onConfirm={saveDatasource}
   disabled={error || !name}