diff --git a/packages/css/src/formElements/autocomplete/autocomplete.css b/packages/css/src/formElements/autocomplete/autocomplete.css
index cb628d1f..6bc4aa5b 100644
--- a/packages/css/src/formElements/autocomplete/autocomplete.css
+++ b/packages/css/src/formElements/autocomplete/autocomplete.css
@@ -13,12 +13,14 @@
 
 .md-autocomplete__container {
   position: relative;
+  background-color: white;
 }
 
 .md-autocomplete__label {
   display: flex;
   align-items: flex-end;
   font-weight: 600;
+  padding-bottom: 0.25em;
 }
 
 .md-autocomplete__label > * + * {
@@ -28,7 +30,7 @@
 .md-autocomplete__input {
   max-width: 100%;
   width: 100%;
-  background-color: #fff;
+  background-color: transparent;
   border-radius: 0;
   color: var(--mdGreyColor);
   box-sizing: border-box;
@@ -39,15 +41,20 @@
   justify-content: space-between;
   padding: 1em;
   border: 1px solid var(--mdGreyColor60);
-  margin: 0.8em 0 0 0;
   text-align: left;
   cursor: pointer;
+  position: relative;
+  z-index: 2;
 }
 
 .md-autocomplete__input.md-autocomplete__input--error {
   border-color: var(--mdErrorColor);
 }
 
+.md-autocomplete--small > .md-autocomplete__input {
+  padding: 0.75em;
+}
+
 .md-autocomplete--disabled .md-autocomplete__input {
   background-color: var(--mdGreyColor20);
   color: var(--mdGreyColor60);
@@ -65,15 +72,6 @@
   padding-right: 1em;
 }
 
-.md-autocomplete__input-icon {
-  display: flex;
-  flex-shrink: 0;
-  width: 15px;
-  height: 15px;
-  rotate: 90deg;
-  color: var(--mdGreyColor);
-}
-
 .md-autocomplete__input.md-autocomplete__input--has-prefix {
   padding-left: 2.5em;
 }
@@ -90,6 +88,12 @@
   width: 16px;
   display: flex;
   color: var(--mdPrimaryColor);
+  z-index: 1;
+}
+
+.md-autocomplete--small > .md-autocomplete__input__prefix {
+  top: 1em;
+  left: 1em;
 }
 
 .md-autocomplete__input__prefix.md-autocomplete__input__prefix--disabled {
@@ -101,12 +105,17 @@
   top: 1.3em;
   right: 0.9em;
   display: flex;
-  width: 15px;
-  height: 15px;
+  width: 16px;
+  height: 16px;
   rotate: 90deg;
   color: var(--mdGreyColor);
 }
 
+.md-autocomplete--small > .md-autocomplete__input-icon {
+  top: 1em;
+  right: 1em;
+}
+
 .md-autocomplete__help-text {
   max-height: 0;
   overflow: hidden;
@@ -130,6 +139,7 @@
 
 .md-autocomplete__dropdown-item {
   display: flex;
+  align-items: center;
   font-family: 'Open sans';
   border: 0;
   background-color: #fff;
@@ -169,6 +179,10 @@
   border-left: 2px solid var(--mdPrimaryColor);
   border-right: 2px solid var(--mdPrimaryColor);
   border-top: 2px solid var(--mdPrimaryColor);
+  padding-bottom: calc(1em - 1px);
+}
+.md-autocomplete--open.md-autocomplete--small .md-autocomplete__input {
+  padding-bottom: calc(0.75em - 1px);
 }
 
 .md-autocomplete--open .md-autocomplete__dropdown {
@@ -179,6 +193,7 @@
   border-right: 2px solid var(--mdPrimaryColor);
   border-left: 2px solid var(--mdPrimaryColor);
   border-bottom: 2px solid var(--mdPrimaryColor);
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
   z-index: 2;
 }
 
diff --git a/packages/css/src/formElements/multiselect/multiselect.css b/packages/css/src/formElements/multiselect/multiselect.css
index 0bbb25da..0524f247 100644
--- a/packages/css/src/formElements/multiselect/multiselect.css
+++ b/packages/css/src/formElements/multiselect/multiselect.css
@@ -15,6 +15,7 @@
   display: flex;
   align-items: flex-end;
   font-weight: 600;
+  padding-bottom: 0.25em;
 }
 
 .md-multiselect__label > * + * {
@@ -36,6 +37,10 @@
   cursor: pointer;
 }
 
+.md-multiselect__button.md-multiselect--small {
+  padding: 0.75em;
+}
+
 .md-multiselect--disabled .md-multiselect__button {
   background-color: var(--mdGreyColor20);
   color: var(--mdGreyColor60);
@@ -46,11 +51,18 @@
 .md-multiselect__button:focus-within {
   outline: none;
 }
+.md-multiselect:not(.md-multiselect--disabled)
+  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
+.md-multiselect:not(.md-multiselect--disabled)
+  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
+  padding: calc(0.75em - 1px);
+  border: 2px solid var(--mdPrimaryColor80);
+}
 
 .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus,
 .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
   padding: calc(1em - 1px);
-  border: 2px solid var(--mdPrimaryColor);
+  border: 2px solid var(--mdPrimaryColor80);
 }
 
 .md-multiselect--error:not(.md-multiselect--disabled) .md-multiselect__button {
@@ -93,7 +105,6 @@
 
 .md-multiselect__dropdown-wrapper {
   position: relative;
-  margin: 0.7em 0 0 0;
 }
 
 .md-multiselect__dropdown {
@@ -127,13 +138,22 @@
   display: flex;
   flex-shrink: 0;
   flex-grow: 1;
-  padding: 0.9em;
+  padding: 0.75em;
 }
 
 .md-multiselect__dropdown-item .md-checkbox .md-checkbox__label .md-checkbox__labelText {
   padding: 0;
 }
 
+.md-multiselect__dropdown-item .md-checkbox__labelText {
+  font-family: 'Open Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--mdGreyColor);
+}
+
 .md-multiselect__dropdown-item:hover,
 .md-multiselect__dropdown-item:focus,
 .md-multiselect__dropdown-item:focus-within {
@@ -191,24 +211,39 @@
 
 /* Open state */
 .md-multiselect--open .md-multiselect__button {
-  border-top: 2px solid var(--mdPrimaryColor);
-  border-right: 2px solid var(--mdPrimaryColor);
-  border-left: 2px solid var(--mdPrimaryColor);
+  border-top: 2px solid var(--mdPrimaryColor80);
+  border-right: 2px solid var(--mdPrimaryColor80);
+  border-left: 2px solid var(--mdPrimaryColor80);
   padding: calc(1em - 1px);
   padding-bottom: 1em;
 }
 
+.md-multiselect--open .md-multiselect__button.md-multiselect--small {
+  border-top: 2px solid var(--mdPrimaryColor80);
+  border-right: 2px solid var(--mdPrimaryColor80);
+  border-left: 2px solid var(--mdPrimaryColor80);
+  padding: calc(0.75em - 1px);
+  padding-bottom: 0.75em;
+}
+
 .md-multiselect__button:not(.md-multiselect__button--open):focus,
 .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
   padding: calc(1em - 1px);
-  border: 2px solid var(--mdPrimaryColor);
+  border: 2px solid var(--mdPrimaryColor80);
+}
+
+.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
+.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
+  padding: calc(0.75em - 1px);
+  border: 2px solid var(--mdPrimaryColor80);
 }
 
 .md-multiselect__dropdown--open {
   max-height: 350px;
   overflow-y: auto;
   opacity: 1;
-  border: 2px solid var(--mdPrimaryColor);
+  border: 2px solid var(--mdPrimaryColor80);
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
   border-top: 0;
 }
 .md-multiselect--open.md-multiselect--error .md-multiselect__dropdown {
diff --git a/packages/css/src/formElements/select/select.css b/packages/css/src/formElements/select/select.css
index 94aa8861..b5de6f9c 100644
--- a/packages/css/src/formElements/select/select.css
+++ b/packages/css/src/formElements/select/select.css
@@ -19,6 +19,7 @@
   display: flex;
   align-items: flex-end;
   font-weight: 600;
+  padding-bottom: 0.25em;
 }
 
 .md-select__label > * + * {
@@ -36,7 +37,6 @@
   padding: 1em;
   border: 1px solid var(--mdGreyColor60);
   color: var(--mdGreyColor);
-  margin: 0.8em 0 0 0;
   text-align: left;
   cursor: pointer;
 }
@@ -45,6 +45,17 @@
   border-color: var(--mdErrorColor);
 }
 
+.md-select__button.md-select__button--small {
+  padding: 0.75em;
+}
+
+.md-select__button:not(.md-select__button--open):focus.md-select__button--small {
+  padding: calc(0.75em - 1px);
+}
+.md-select__button.md-select__button--open.md-select__button--small {
+  padding: calc(0.75em - 1px);
+}
+
 .md-select--disabled .md-select__button {
   background-color: var(--mdGreyColor20);
   color: var(--mdGreyColor60);
@@ -106,6 +117,7 @@
 
 .md-select__dropdown-item {
   display: flex;
+  align-items: center;
   font-family: 'Open sans';
   border: 0;
   background-color: #fff;
@@ -158,6 +170,7 @@
   opacity: 1;
   transition: max-height 0.5s ease-in-out;
   border: 2px solid var(--mdPrimaryColor);
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
   border-top: 0;
   z-index: 2;
 }
diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx
index b01f9a5e..31f8be4f 100644
--- a/packages/react/src/formElements/MdAutocomplete.tsx
+++ b/packages/react/src/formElements/MdAutocomplete.tsx
@@ -28,6 +28,7 @@ export interface MdAutocompleteProps {
   error?: boolean;
   errorText?: string;
   prefixIcon?: React.ReactNode;
+  dropdownHeight?: number;
 }
 
 const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
@@ -46,6 +47,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
       errorText,
       prefixIcon = null,
       onChange,
+      dropdownHeight,
       ...otherProps
     },
     ref,
@@ -71,6 +73,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
       'md-autocomplete__input--open': !!open,
       'md-autocomplete__input--error': !!error,
       'md-autocomplete__input--has-prefix': prefixIcon !== null && prefixIcon !== '',
+      'md-autocomplete--small': size === 'small',
     });
 
     const selectedOption =
@@ -107,27 +110,27 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
 
     return (
       <div className={classNames}>
-        <div className="md-autocomplete__label">
-          {label && label !== '' && (
+        {label && label !== '' && (
+          <div className="md-autocomplete__label">
             <label id={`md-autocomplete_label_${autocompleteId}`} htmlFor={autocompleteId}>
               {label}
             </label>
-          )}
-          {helpText && helpText !== '' && (
-            <div className="md-autocomplete__help-button">
-              <MdHelpButton
-                ariaLabel={`Hjelpetekst for ${label}`}
-                id={`md-autocomplete_help-button_${autocompleteId}`}
-                aria-expanded={helpOpen}
-                aria-controls={`md-autocomplete_help-text_${autocompleteId}`}
-                onClick={() => {
-                  return setHelpOpen(!helpOpen);
-                }}
-                expanded={helpOpen}
-              />
-            </div>
-          )}
-        </div>
+            {helpText && helpText !== '' && (
+              <div className="md-autocomplete__help-button">
+                <MdHelpButton
+                  ariaLabel={`Hjelpetekst for ${label}`}
+                  id={`md-autocomplete_help-button_${autocompleteId}`}
+                  aria-expanded={helpOpen}
+                  aria-controls={`md-autocomplete_help-text_${autocompleteId}`}
+                  onClick={() => {
+                    return setHelpOpen(!helpOpen);
+                  }}
+                  expanded={helpOpen}
+                />
+              </div>
+            )}
+          </div>
+        )}
 
         {helpText && helpText !== '' && (
           <div className={`md-autocomplete__help-text ${helpOpen ? 'md-autocomplete__help-text--open' : ''}`}>
@@ -147,7 +150,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
           onClickOutside={() => {
             return setOpen(false);
           }}
-          className="md-autocomplete__container"
+          className={`md-autocomplete__container ${size === 'small' ? 'md-autocomplete--small' : ''}`}
         >
           {prefixIcon && (
             <div
@@ -194,7 +197,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
             {...otherProps}
           />
           <div aria-hidden="true" className="md-autocomplete__input-icon">
-            <MdChevronIcon />
+            <MdChevronIcon transform={`rotate(${open ? '180' : '0'})`} />
           </div>
 
           {options && options.length > 0 && (
@@ -203,6 +206,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
               role="listbox"
               id={`md-autocomplete__dropdown_${autocompleteId}`}
               className="md-autocomplete__dropdown"
+              style={{ maxHeight: dropdownHeight && `${dropdownHeight}px` }}
             >
               {(autocompleteValue ? results : defaultOptions ? defaultOptions : options ? options : []).map(option => {
                 return (
diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx
index f4026bc0..76f68f65 100644
--- a/packages/react/src/formElements/MdMultiSelect.tsx
+++ b/packages/react/src/formElements/MdMultiSelect.tsx
@@ -31,6 +31,7 @@ export interface MdMultiSelectProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   id?: any;
   onChange?(_e: React.ChangeEvent): void;
+  dropdownHeight?: number;
 }
 
 const MdMultiSelect = React.forwardRef<HTMLButtonElement, MdMultiSelectProps>(
@@ -49,6 +50,7 @@ const MdMultiSelect = React.forwardRef<HTMLButtonElement, MdMultiSelectProps>(
       closeOnSelect = false,
       id,
       onChange,
+      dropdownHeight,
       ...otherProps
     },
     ref,
@@ -71,6 +73,7 @@ const MdMultiSelect = React.forwardRef<HTMLButtonElement, MdMultiSelectProps>(
 
     const buttonClassNames = classnames('md-multiselect__button', {
       'md-multiselect__button--open': !!open,
+      'md-multiselect--small': size === 'small',
     });
 
     const dropDownClassNames = classnames('md-multiselect__dropdown', {
@@ -143,24 +146,25 @@ const MdMultiSelect = React.forwardRef<HTMLButtonElement, MdMultiSelectProps>(
 
     return (
       <div className={classNames}>
-        <div className="md-multiselect__label">
-          {label && label !== '' && <div id={`md-multiselect_label_${multiSelectId}`}>{label}</div>}
-
-          {helpText && helpText !== '' && (
-            <div className="md-multiselect__help-button">
-              <MdHelpButton
-                ariaLabel={`Hjelpetekst for ${label}`}
-                id={`md-multiselect_help-button_${multiSelectId}`}
-                aria-expanded={helpOpen}
-                aria-controls={`md-multiselect_help-text_${multiSelectId}`}
-                onClick={() => {
-                  return setHelpOpen(!helpOpen);
-                }}
-                expanded={helpOpen}
-              />
-            </div>
-          )}
-        </div>
+        {label && label !== '' && (
+          <div className="md-multiselect__label">
+            {label && label !== '' && <div id={`md-multiselect_label_${multiSelectId}`}>{label}</div>}
+            {helpText && helpText !== '' && (
+              <div className="md-multiselect__help-button">
+                <MdHelpButton
+                  ariaLabel={`Hjelpetekst for ${label}`}
+                  id={`md-multiselect_help-button_${multiSelectId}`}
+                  aria-expanded={helpOpen}
+                  aria-controls={`md-multiselect_help-text_${multiSelectId}`}
+                  onClick={() => {
+                    return setHelpOpen(!helpOpen);
+                  }}
+                  expanded={helpOpen}
+                />
+              </div>
+            )}
+          </div>
+        )}
 
         {helpText && helpText !== '' && (
           <div className={`md-multiselect__help-text ${helpOpen ? 'md-multiselect__help-text--open' : ''}`}>
@@ -201,7 +205,7 @@ const MdMultiSelect = React.forwardRef<HTMLButtonElement, MdMultiSelectProps>(
               <div className="md-multiselect__button-hasmultiple">+{selected.length - 1}</div>
             )}
             <div aria-hidden="true" className="md-multiselect__button-icon">
-              <MdChevronIcon />
+              <MdChevronIcon transform={`rotate(${open ? '180' : '0'})`} />
             </div>
           </button>
 
@@ -211,6 +215,7 @@ const MdMultiSelect = React.forwardRef<HTMLButtonElement, MdMultiSelectProps>(
               role="listbox"
               id={`md-multiselect_dropdown_${multiSelectId}`}
               className={dropDownClassNames}
+              style={{ maxHeight: dropdownHeight ? `${dropdownHeight}px` : 'auto' }}
             >
               {options.map(option => {
                 return (
diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx
index 2c1054e5..4202749f 100644
--- a/packages/react/src/formElements/MdSelect.tsx
+++ b/packages/react/src/formElements/MdSelect.tsx
@@ -27,6 +27,7 @@ export interface MdSelectProps {
   error?: boolean;
   errorText?: string;
   onChange(_e: MdSelectOptionProps): void;
+  dropdownHeight?: number;
 }
 
 const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
@@ -43,6 +44,7 @@ const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
       error = false,
       errorText,
       onChange,
+      dropdownHeight,
       ...otherProps
     },
     ref,
@@ -117,6 +119,7 @@ const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
     const buttonClassNames = classnames('md-select__button', {
       'md-select__button--open': !!open,
       'md-select__button--error': !!error,
+      'md-select__button--small': size === 'small',
     });
 
     const optionClass = (option: MdSelectOptionProps) => {
@@ -127,24 +130,25 @@ const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
 
     return (
       <div className={classNames}>
-        <div className="md-select__label">
-          {label && label !== '' && <div id={`md-select_label_${selectId}`}>{label}</div>}
-          {helpText && helpText !== '' && (
-            <div className="md-select__help-button">
-              <MdHelpButton
-                ariaLabel={`Hjelpetekst for ${label}`}
-                id={`md-select_help-button_${selectId}`}
-                aria-expanded={helpOpen}
-                aria-controls={`md-select_help-text_${selectId}`}
-                onClick={() => {
-                  return setHelpOpen(!helpOpen);
-                }}
-                expanded={helpOpen}
-              />
-            </div>
-          )}
-        </div>
-
+        {label && label !== '' && (
+          <div className="md-select__label">
+            {label && label !== '' && <div id={`md-select_label_${selectId}`}>{label}</div>}
+            {helpText && helpText !== '' && (
+              <div className="md-select__help-button">
+                <MdHelpButton
+                  ariaLabel={`Hjelpetekst for ${label}`}
+                  id={`md-select_help-button_${selectId}`}
+                  aria-expanded={helpOpen}
+                  aria-controls={`md-select_help-text_${selectId}`}
+                  onClick={() => {
+                    return setHelpOpen(!helpOpen);
+                  }}
+                  expanded={helpOpen}
+                />
+              </div>
+            )}
+          </div>
+        )}
         {helpText && helpText !== '' && (
           <div className={`md-select__help-text ${helpOpen ? 'md-select__help-text--open' : ''}`}>
             <MdHelpText
@@ -181,7 +185,7 @@ const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
           >
             <div className="md-select__button-text">{displayValue}</div>
             <div aria-hidden="true" className="md-select__button-icon">
-              <MdChevronIcon />
+              <MdChevronIcon transform={`rotate(${open ? '180' : '0'})`} />
             </div>
           </button>
 
@@ -191,6 +195,7 @@ const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
               role="listbox"
               className="md-select__dropdown"
               id={`md-select_dropdown_${selectId}`}
+              style={{ maxHeight: dropdownHeight && `${dropdownHeight}px` }}
             >
               {options.map(option => {
                 return (
diff --git a/stories/Autocomplete.stories.tsx b/stories/Autocomplete.stories.tsx
index b7bc1ee9..4db6fdcb 100644
--- a/stories/Autocomplete.stories.tsx
+++ b/stories/Autocomplete.stories.tsx
@@ -145,6 +145,17 @@ export default {
         },
       },
     },
+    dropdownHeight: {
+      type: { name: 'number' },
+      description: 'Set max height of dropdown in pixels',
+      table: {
+        defaultValue: { summary: 'variable' },
+        type: {
+          summary: 'number',
+        },
+      },
+      control: { type: 'number' },
+    },
     inputRef: {
       type: { name: 'Ref<HTMLButtonElement>' },
       description:
@@ -190,4 +201,5 @@ Autocomplete.args = {
   helpText: '',
   error: false,
   errorText: '',
+  dropdownHeight: null,
 };
diff --git a/stories/MultiSelect.stories.tsx b/stories/MultiSelect.stories.tsx
index 8990ab07..6bf459dc 100644
--- a/stories/MultiSelect.stories.tsx
+++ b/stories/MultiSelect.stories.tsx
@@ -34,7 +34,7 @@ export default {
   argTypes: {
     label: {
       type: { name: 'string' },
-      description: 'The label for the selct box.',
+      description: 'The label for the select box.',
       table: {
         defaultValue: { summary: 'null' },
         type: {
@@ -162,6 +162,17 @@ export default {
         },
       },
     },
+    dropdownHeight: {
+      type: { name: 'number' },
+      description: 'Set max height of dropdown in pixels',
+      table: {
+        defaultValue: { summary: '350px' },
+        type: {
+          summary: 'number',
+        },
+      },
+      control: { type: 'number' },
+    },
   },
 };
 
@@ -213,4 +224,5 @@ Multiselect.args = {
   helpText: '',
   error: false,
   errorText: '',
+  dropdownHeight: null,
 };
diff --git a/stories/Select.stories.tsx b/stories/Select.stories.tsx
index b56adf12..1f41746e 100644
--- a/stories/Select.stories.tsx
+++ b/stories/Select.stories.tsx
@@ -135,6 +135,17 @@ export default {
         },
       },
     },
+    dropdownHeight: {
+      type: { name: 'number' },
+      description: 'Set max height of dropdown in pixels',
+      table: {
+        defaultValue: { summary: '350' },
+        type: {
+          summary: 'number',
+        },
+      },
+      control: { type: 'number' },
+    },
     selectRef: {
       type: { name: 'Ref<HTMLButtonElement>' },
       description:
@@ -175,4 +186,5 @@ Select.args = {
   helpText: '',
   error: false,
   errorText: '',
+  dropdownHeight: null,
 };