diff --git a/src/components/modals/Modal.scss b/src/components/modals/Modal.scss
index 8f2faa1..d813a11 100644
--- a/src/components/modals/Modal.scss
+++ b/src/components/modals/Modal.scss
@@ -1,13 +1,28 @@
 @import '../../styles.scss';
 
-.contents {
-  padding: 20px;
+.jsoneditor-modal {
+  // styling for the select box, 
+  // see docs: https://github.com/rob-balfre/svelte-select#styling
+  --height: 28px;
+  --clearSelectTop: 2px;
+  --clearSelectBottom: 2px;
+  --itemIsActiveBG: #3883fa; // theme-color
+  
+  .contents {
+    padding: 20px;
 
-  .actions {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+    .actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
 
-    padding-top: $padding;
+      padding-top: $padding;
+    }
   }
 }
+
+// custom styling for the modal. 
+// FIXME: not neat to override global styles!
+:global(.bg .window-wrap) {
+  margin-top: 10rem;
+}
diff --git a/src/components/modals/SortModal.scss b/src/components/modals/SortModal.scss
index ed6f8ab..5d44a84 100644
--- a/src/components/modals/SortModal.scss
+++ b/src/components/modals/SortModal.scss
@@ -1,7 +1,7 @@
 @import '../../styles.scss';
 @import './Modal.scss';
 
-.sort-modal {
+.jsoneditor-modal.sort {
   table {
     width: 100%;
     border-collapse: collapse;
@@ -14,4 +14,4 @@
       padding-bottom: $padding;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/modals/SortModal.svelte b/src/components/modals/SortModal.svelte
index 574e3c2..33d73c7 100644
--- a/src/components/modals/SortModal.svelte
+++ b/src/components/modals/SortModal.svelte
@@ -21,11 +21,11 @@
 
   const asc = {
     value: 1,
-    label: 'asc'
+    label: 'ascending'
   }
   const desc = {
     value: -1,
-    label: 'desc'
+    label: 'descending'
   }
   const directions = [ asc, desc ]
 
@@ -83,7 +83,7 @@
   }
 </script>
 
-<div class="sort-modal">
+<div class="jsoneditor-modal sort">
   <Header title={isArray ? 'Sort array items' : 'Sort object keys'} />
 
   <div class="contents">
@@ -115,6 +115,7 @@
           <td>
             <Select 
               items={directions} 
+              containerClasses='test-class'
               bind:selectedValue={selectedDirection} 
               isClearable={false}
             />
diff --git a/src/components/modals/TransformModal.svelte b/src/components/modals/TransformModal.svelte
index 10a2b42..70ba808 100644
--- a/src/components/modals/TransformModal.svelte
+++ b/src/components/modals/TransformModal.svelte
@@ -7,7 +7,7 @@
   const {close} = getContext('simple-modal')
 </script>
 
-<div class="transform-modal">
+<div class="jsoneditor-modal transform">
   <Header title='Transform' />
   <div class="contents">
     TODO...
diff --git a/src/constants.js b/src/constants.js
index 87455b0..c3fe5fa 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -17,13 +17,14 @@ export const SIMPLE_MODAL_OPTIONS = {
   styleBg: {
     top: 0,
     left: 0,
-    background: 'rgba(0, 0, 0, 0.3)'
+    background: 'rgba(0, 0, 0, 0.3)',
+    justifyContent: 'normal'
   },
   styleWindow: {
     borderRadius: '2px'
   },
   styleContent: {
     padding: '0px',
-    overflow: 'visible'
+    overflow: 'visible', // needed for select box dropdowns which are larger than the modal
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index f45ab9d..d1b6bec 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -64,4 +64,4 @@ button.primary {
   &:disabled {
     background: $gray;
   }
-}
\ No newline at end of file
+}