diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss
index 6be784598..dec23ca05 100644
--- a/webapp/src/components/cardDetail/cardDetail.scss
+++ b/webapp/src/components/cardDetail/cardDetail.scss
@@ -30,17 +30,38 @@
 
     .octo-propertyrow {
         display: flex;
-        margin: 4px 0;
+        align-items: center;
+        margin: 6px 0;
         height: 32px;
 
+        .Switch {
+            margin-left: 8px;
+            width: 40px;
+            height: 24px;
+            box-sizing: border-box;
+            padding: 2px;
+
+            .octo-switch-inner {
+                width: 20px;
+                height: 20px;
+            }
+
+            &.on {
+                .octo-switch-inner {
+                    transform: translateX(16px) translateY(0);
+                }
+            }
+        }
+
         .octo-propertyvalue {
             font-size: 14px;
+            padding: 4px 8px;
+            height: 32px;
 
             &:not(.readonly) {
                 min-width: 180px;
                 transition: background 100ms ease-out 0s;
                 cursor: pointer;
-                padding: 4px 8px;
                 border-radius: 4px;
 
                 &:hover {
@@ -59,6 +80,16 @@
         }
     }
 
+    .UserProperty {
+        .react-select__value-container {
+            padding: 0;
+        }
+
+        .react-select__control {
+            margin-top: 0;
+        }
+    }
+
     .octo-propertyname {
         width: 150px;
         margin-right: 5px;
@@ -67,12 +98,13 @@
         .Button {
             width: 100%;
             height: 100%;
-            padding: 8px;
+            padding: 4px 8px;
             text-align: left;
             justify-content: unset;
         }
 
         &.add-property {
+            margin: 8px 0 0;
             color: rgba(var(--center-channel-color-rgb), 0.4);
         }
     }
diff --git a/webapp/src/components/properties/dateRange/dateRange.scss b/webapp/src/components/properties/dateRange/dateRange.scss
index 2df801ac2..68cb9aabe 100644
--- a/webapp/src/components/properties/dateRange/dateRange.scss
+++ b/webapp/src/components/properties/dateRange/dateRange.scss
@@ -46,6 +46,7 @@
         width: 100%;
         height: 100%;
         justify-content: left;
+        padding: 0;
 
         &.--empty {
             opacity: 0;
diff --git a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
index 7c6343c0a..1d0763825 100644
--- a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
+++ b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
@@ -12,13 +12,13 @@ exports[`components/properties/user not readonly 1`] = `
       class="css-1f43avz-a11yText-A11yText"
     />
     <div
-      class=" css-pwgt1w-Control"
+      class="react-select__control css-pwgt1w-Control"
     >
       <div
-        class=" css-kpfmlq-ValueContainer"
+        class="react-select__value-container react-select__value-container--has-value css-kpfmlq-ValueContainer"
       >
         <div
-          class=" css-ciz25-singleValue"
+          class="react-select__single-value css-ciz25-singleValue"
         >
           username-1
         </div>
@@ -26,7 +26,7 @@ exports[`components/properties/user not readonly 1`] = `
           class="css-1shkodo-Input"
         >
           <div
-            class=""
+            class="react-select__input"
             style="display: inline-block;"
           >
             <input
@@ -48,11 +48,11 @@ exports[`components/properties/user not readonly 1`] = `
         </div>
       </div>
       <div
-        class=" css-1hb7zxy-IndicatorsContainer"
+        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
       >
         <div
           aria-hidden="true"
-          class=" css-tpaeio-indicatorContainer"
+          class="react-select__indicator react-select__clear-indicator css-tpaeio-indicatorContainer"
         >
           <svg
             aria-hidden="true"
@@ -68,11 +68,11 @@ exports[`components/properties/user not readonly 1`] = `
           </svg>
         </div>
         <span
-          class=" css-43ykx9-indicatorSeparator"
+          class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
         />
         <div
           aria-hidden="true"
-          class=" css-19sxey8-indicatorContainer"
+          class="react-select__indicator react-select__dropdown-indicator css-19sxey8-indicatorContainer"
         >
           <svg
             aria-hidden="true"
@@ -105,13 +105,13 @@ exports[`components/properties/user not readonly not existing user 1`] = `
       class="css-1f43avz-a11yText-A11yText"
     />
     <div
-      class=" css-pwgt1w-Control"
+      class="react-select__control css-pwgt1w-Control"
     >
       <div
-        class=" css-kpfmlq-ValueContainer"
+        class="react-select__value-container css-kpfmlq-ValueContainer"
       >
         <div
-          class=" css-1oswhd8-placeholder"
+          class="react-select__placeholder css-1oswhd8-placeholder"
         >
           Empty
         </div>
@@ -119,7 +119,7 @@ exports[`components/properties/user not readonly not existing user 1`] = `
           class="css-1shkodo-Input"
         >
           <div
-            class=""
+            class="react-select__input"
             style="display: inline-block;"
           >
             <input
@@ -141,14 +141,14 @@ exports[`components/properties/user not readonly not existing user 1`] = `
         </div>
       </div>
       <div
-        class=" css-1hb7zxy-IndicatorsContainer"
+        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
       >
         <span
-          class=" css-43ykx9-indicatorSeparator"
+          class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
         />
         <div
           aria-hidden="true"
-          class=" css-19sxey8-indicatorContainer"
+          class="react-select__indicator react-select__dropdown-indicator css-19sxey8-indicatorContainer"
         >
           <svg
             aria-hidden="true"
@@ -200,13 +200,13 @@ exports[`components/properties/user user dropdown open 1`] = `
       </span>
     </span>
     <div
-      class=" css-pwgt1w-Control"
+      class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-pwgt1w-Control"
     >
       <div
-        class=" css-kpfmlq-ValueContainer"
+        class="react-select__value-container react-select__value-container--has-value css-kpfmlq-ValueContainer"
       >
         <div
-          class=" css-ciz25-singleValue"
+          class="react-select__single-value css-ciz25-singleValue"
         >
           username-1
         </div>
@@ -214,7 +214,7 @@ exports[`components/properties/user user dropdown open 1`] = `
           class="css-1shkodo-Input"
         >
           <div
-            class=""
+            class="react-select__input"
             style="display: inline-block;"
           >
             <input
@@ -236,11 +236,11 @@ exports[`components/properties/user user dropdown open 1`] = `
         </div>
       </div>
       <div
-        class=" css-1hb7zxy-IndicatorsContainer"
+        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
       >
         <div
           aria-hidden="true"
-          class=" css-13eygzs-indicatorContainer"
+          class="react-select__indicator react-select__clear-indicator css-13eygzs-indicatorContainer"
         >
           <svg
             aria-hidden="true"
@@ -256,11 +256,11 @@ exports[`components/properties/user user dropdown open 1`] = `
           </svg>
         </div>
         <span
-          class=" css-43ykx9-indicatorSeparator"
+          class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
         />
         <div
           aria-hidden="true"
-          class=" css-hl9mox-indicatorContainer"
+          class="react-select__indicator react-select__dropdown-indicator css-hl9mox-indicatorContainer"
         >
           <svg
             aria-hidden="true"
@@ -278,13 +278,13 @@ exports[`components/properties/user user dropdown open 1`] = `
       </div>
     </div>
     <div
-      class=" css-l4y5re-menu"
+      class="react-select__menu css-l4y5re-menu"
     >
       <div
-        class=" css-g29tl0-MenuList"
+        class="react-select__menu-list css-g29tl0-MenuList"
       >
         <div
-          class=" css-xoibch-option"
+          class="react-select__option react-select__option--is-focused react-select__option--is-selected css-xoibch-option"
           id="react-select-4-option-0"
           tabindex="-1"
         >
diff --git a/webapp/src/components/properties/user/user.tsx b/webapp/src/components/properties/user/user.tsx
index cb6316c33..76c2f86de 100644
--- a/webapp/src/components/properties/user/user.tsx
+++ b/webapp/src/components/properties/user/user.tsx
@@ -41,6 +41,7 @@ const UserProperty = (props: Props): JSX.Element => {
             isClearable={true}
             backspaceRemovesValue={true}
             className={'UserProperty octo-propertyvalue'}
+            classNamePrefix={'react-select'}
             styles={selectStyles}
             placeholder={'Empty'}
             getOptionLabel={(o: IUser) => o.username}