diff --git a/src/features/common/components/debugger-picker/debugger-picker.component.tsx b/src/features/common/components/debugger-picker/debugger-picker.component.tsx
index df256aa4..450e9619 100644
--- a/src/features/common/components/debugger-picker/debugger-picker.component.tsx
+++ b/src/features/common/components/debugger-picker/debugger-picker.component.tsx
@@ -5,7 +5,6 @@ import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-pic
 import { LibraryFilterLabel } from "@/features/libraries/models/library-filters.model";
 import { isGroupedOptionsType } from "./utils";
 
-
 interface PickerLabelProps {
   label: string | null;
 }
@@ -17,12 +16,12 @@ const getGroupLabel = (
   >,
   selected: DebuggerPickerOptionModel
 ): LibraryFilterLabel | undefined => {
-  if(!isGroupedOptionsType(options)) return undefined
+  if (!isGroupedOptionsType(options)) return undefined;
 
   const group = (options as GroupBase<DebuggerPickerOptionModel>[]).find(
     (group) => group.options.some((opt) => opt.value === selected.value)
   );
-  return group ? group.label as LibraryFilterLabel : undefined;
+  return group ? (group.label as LibraryFilterLabel) : undefined;
 };
 
 const PickerLabel: React.FC<PickerLabelProps> = ({ label }) => {
@@ -56,15 +55,12 @@ export const DebuggerPickerComponent: React.FC<
   label,
   options,
   handleSelection,
-  selectedOptionCode,
   placeholder,
   minWidth,
 }) => {
   const [isClient, setIsClient] = useState(false);
 
-  const handleChange = (
-    selection: SingleValue<DebuggerPickerOptionModel>
-  ) => {
+  const handleChange = (selection: SingleValue<DebuggerPickerOptionModel>) => {
     if (!selection) {
       return;
     }
@@ -78,21 +74,20 @@ export const DebuggerPickerComponent: React.FC<
 
   if (!isClient) {
     return (
-      <div className={styles.picker} data-has-label={label !== null}>
+      <>
         <PickerLabel label={label} />
         <div className="react-select-placeholder"></div>
-      </div>
+      </>
     );
   }
 
   return (
-    <div className={styles.picker} data-has-label={label !== null}>
+    <>
       {label && <PickerLabel label={label} />}
       <Select
         aria-label={"Debugger picker"}
         className="react-select-container"
         onChange={handleChange}
-        value={selectedOptionCode}
         options={options}
         menuPortalTarget={document.body}
         classNamePrefix={"react-select"}
@@ -101,8 +96,22 @@ export const DebuggerPickerComponent: React.FC<
         styles={{
           control: (base) => ({
             ...base,
-            minHeight: "1.75rem",
-            height: "1.75rem",
+            alignItems: 'center',
+            cursor: 'pointer',
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            minHeight: '2.5rem',
+            position: 'relative',
+            transition: '0.2s ease-out',
+            borderRadius: '1rem',
+            boxShadow: 'rgba(0, 0, 0, 0.04) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.04) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset',
+            boxSizing: 'border-box',
+            height: '2.5rem',
+            width: '100%',
+            padding: '0px 0.25rem',
+            minWidth: '240px',
+            outline: '0px !important',
             ...(minWidth ? { minWidth: minWidth } : {}),
           }),
 
@@ -125,6 +134,6 @@ export const DebuggerPickerComponent: React.FC<
           }),
         }}
       ></Select>
-    </div>
+    </>
   );
 };
diff --git a/src/features/common/components/debugger-picker/debugger-picker.module.scss b/src/features/common/components/debugger-picker/debugger-picker.module.scss
index 8541f752..ab3f065d 100644
--- a/src/features/common/components/debugger-picker/debugger-picker.module.scss
+++ b/src/features/common/components/debugger-picker/debugger-picker.module.scss
@@ -14,15 +14,14 @@ $picker-list-width-lg: 7rem;
 $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 
 .picker {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: transparent;
-  border: none;
-  color: var(--color_fg_bold);
-  cursor: pointer;
-  gap: 0.75rem;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: transparent;
+    color: var(--color_fg_bold);
+    gap: .75rem;
+    width: 100vh;
 
   //width: $picker-width-sm;
 
@@ -56,4 +55,4 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 
 .picker__fullName {
   display: flex;
-}
+}
\ No newline at end of file
diff --git a/src/features/common/components/widget/widget/widget.component.tsx b/src/features/common/components/widget/widget/widget.component.tsx
index eff71f5c..4069b3d2 100644
--- a/src/features/common/components/widget/widget/widget.component.tsx
+++ b/src/features/common/components/widget/widget/widget.component.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useId } from "react";
 import styles from "./widget.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
-import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component";
 import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
 import { clsx } from "clsx";
 import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
@@ -23,12 +22,9 @@ interface WidgetComponentProps {
 
 export const WidgetComponent: React.FC<WidgetComponentProps> = ({
   id,
-  widget,
   languageCode,
   headlineConfig,
   title,
-  description,
-  exampleGenerator,
   contentInput,
   contentOutput,
 }) => {
@@ -42,6 +38,7 @@ export const WidgetComponent: React.FC<WidgetComponentProps> = ({
       contentClassName={styles.content}
       aria-labelledby={headlineConfig.isVisible ? widgetId : undefined}
     >
+      
       {headlineConfig.isVisible && (
         <h2
           id={widgetId}
@@ -54,14 +51,7 @@ export const WidgetComponent: React.FC<WidgetComponentProps> = ({
           {headlineConfig.actions}
         </h2>
       )}
-      <div className={styles.input__description}>
-        <span>{description}</span>
-        <WidgetAlgPickerComponent
-          label={exampleGenerator.label}
-          languageCode={languageCode}
-          widget={widget}
-        />
-      </div>
+      
       <div heap-ignore="true" className={styles.content__input}>
         {contentInput}
       </div>
diff --git a/src/features/common/components/widget/widget/widget.module.scss b/src/features/common/components/widget/widget/widget.module.scss
index 75066a1b..543c34e3 100644
--- a/src/features/common/components/widget/widget/widget.module.scss
+++ b/src/features/common/components/widget/widget/widget.module.scss
@@ -42,29 +42,3 @@
     line-height: 2.25rem;
   }
 }
-
-.input__description {
-  grid-column: span 6;
-  width: 100%;
-  color: var(--color_fg_default);
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 2rem;
-
-  gap: 0.625rem;
-  row-gap: 0.25rem;
-
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-
-  & strong {
-    font-weight: 500;
-  }
-
-  @media #{$breakpoint-dimension-sm} {
-    grid-column: span 12;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
diff --git a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx
index f1d10216..3242b44f 100644
--- a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx
+++ b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx
@@ -15,9 +15,7 @@ import {
   algDictionary,
   jwsExampleAlgHeaderParameterValuesDictionary,
 } from "@/features/common/values/jws-alg-header-parameter-values.dictionary";
-import { useButton } from "@react-aria/button";
-import { clsx } from "clsx";
-import { PrimaryFont } from "@/libs/theme/fonts";
+import { useButton } from "@react-aria/button"
 import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model";
 
 enum PickerStates {
@@ -60,11 +58,11 @@ export const WidgetAlgPickerComponent: React.FC<
       elementType: "span",
       preventFocusOnPress: true,
     },
-    buttonRef,
+    buttonRef
   );
 
   const [pickerState, setPickerState] = useState<PickerStates>(
-    PickerStates.IDLE,
+    PickerStates.IDLE
   );
   const [canUseEs512, setCanUseEs512] = useState(false);
   const [canUseEd25519, setCanUseEd25519] = useState(false);
@@ -73,11 +71,11 @@ export const WidgetAlgPickerComponent: React.FC<
   const dictionary = getPickersUiDictionary(languageCode);
 
   const selectEncoderAlg$ = useEncoderStore(
-    (state) => state.selectEncodingExample,
+    (state) => state.selectEncodingExample
   );
 
   const selectDecoderAlg$ = useDecoderStore(
-    (state) => state.selectDecodingExample,
+    (state) => state.selectDecodingExample
   );
 
   const selectExample = (value: string) => {
@@ -94,13 +92,6 @@ export const WidgetAlgPickerComponent: React.FC<
     setPickerState(PickerStates.IDLE);
   };
 
-  const openPicker = () => {
-    setPickerState(PickerStates.PICKING);
-  };
-
-  const closePicker = () => {
-    setPickerState(PickerStates.IDLE);
-  };
 
   useEffect(() => {
     (async function runEs512Check() {
@@ -116,9 +107,9 @@ export const WidgetAlgPickerComponent: React.FC<
     })();
   }, []);
 
-  const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
+  /* const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
     return Object.entries(
-      jwsExampleAlgHeaderParameterValuesDictionary.unsecured,
+      jwsExampleAlgHeaderParameterValuesDictionary.unsecured
     ).map((entry) => {
       const [key, value] = entry;
 
@@ -127,7 +118,7 @@ export const WidgetAlgPickerComponent: React.FC<
         label: value.name,
       };
     });
-  }, []);
+  }, []); */
 
   const symmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
     return Object.entries(jwsExampleAlgHeaderParameterValuesDictionary.mac).map(
@@ -138,13 +129,13 @@ export const WidgetAlgPickerComponent: React.FC<
           value: key,
           label: value.name,
         };
-      },
+      }
     );
   }, []);
 
   const asymmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
     const digitalSignatureEntries = Object.entries(
-      jwsExampleAlgHeaderParameterValuesDictionary.digitalSignature,
+      jwsExampleAlgHeaderParameterValuesDictionary.digitalSignature
     );
 
     const asymmetricAlgOptions: DebuggerPickerOptionModel[] = [];
@@ -194,24 +185,21 @@ export const WidgetAlgPickerComponent: React.FC<
   }, [canUseEd25519, canUseEd448, canUseEs512]);
 
   const algOptions = useMemo(() => {
-    return [...noneAlgOptions, ...symmetricAlgOptions, ...asymmetricAlgOptions];
-  }, [asymmetricAlgOptions, noneAlgOptions, symmetricAlgOptions]);
+    return [...symmetricAlgOptions, ...asymmetricAlgOptions];
+  }, [asymmetricAlgOptions, symmetricAlgOptions]);
 
   return (
-    <div role="region" aria-label={label} className={styles.picker}>
-      {pickerState === PickerStates.IDLE && (
-        <button
-          role="button"
-          className={clsx(styles.button, PrimaryFont.className)}
-          onClick={openPicker}
-        >
-          {dictionary.exampleAlgPicker.label}
-        </button>
-      )}
-      {pickerState === PickerStates.PICKING && (
-        <>
+    <div role="region" aria-label={label} className={styles.alg_picker}>
+      <div className={styles.container}>
+        <div className={styles.picker}>
+          <div className={styles.picker__label}>
+            <label className={styles.picker__fullName}>
+              {dictionary.exampleAlgPicker.label}
+            </label>
+          </div>
           <DebuggerPickerComponent
             label={null}
+            data-has-label={label !== null}
             languageCode={languageCode}
             handleSelection={selectExample}
             selectedOptionCode={null}
@@ -219,16 +207,8 @@ export const WidgetAlgPickerComponent: React.FC<
             placeholder={dictionary.exampleAlgPicker.defaultValue}
             minWidth={null}
           />
-          <button
-            {...buttonProps}
-            aria-label={dictionary.exampleAlgPicker.closeButton.label}
-            className={styles.closeButton}
-            onClick={closePicker}
-          >
-            <span>+</span>
-          </button>
-        </>
-      )}
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss
index 05fb7e17..48f7278b 100644
--- a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss
+++ b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss
@@ -1,30 +1,65 @@
 @use "@/libs/theme/styles/variables" as *;
 
-.picker {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.5rem;
-  height: 2rem;
+.alg_picker {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: .5rem;
+    height: 2rem;
+    width: 100%;
 
   @media #{$breakpoint-dimension-sm} {
     justify-content: center;
+    width: unset;
   }
 }
 
 .container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    align-self: flex-end;
+    height: 100%;
+    width: 100%;
+    flex-shrink: 0;
+
+  @media #{$breakpoint-dimension-sm} {
+    align-self: unset;
+    width: fit-content;
+  }
+}
+
+.picker {
   position: relative;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 0.5rem;
-  align-self: flex-end;
+  background: transparent;
+  border: none;
+  color: var(--color_fg_bold);
+  gap: .75rem;
+  width: 100%;
+}
+
+.picker__label {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+  list-style-type: none;
+  margin: 0;
+  margin-top: .475rem;
+  gap: .5rem;
+  font-size: .875rem;
+  line-height: 1.35;
+  width: 100%;
   height: 100%;
-  width: fit-content;
-  flex-shrink: 0;
+}
 
-  @media #{$breakpoint-dimension-sm} {
-    align-self: unset;
-  }
+.picker__fullName {
+  display: flex;
+  font-weight: 600;
 }
 
 .button {
@@ -40,7 +75,7 @@
   cursor: pointer;
 
   &:focus-visible {
-    outline: solid 1px var(--color_border_focus);
+    outline: solid 2px var(--color_border_focus);
     outline-offset: 0.125rem;
     border-radius: 0.125rem;
   }
diff --git a/src/features/decoder/components/token-decoder.component.tsx b/src/features/decoder/components/token-decoder.component.tsx
index 721ef51d..27faea8e 100644
--- a/src/features/decoder/components/token-decoder.component.tsx
+++ b/src/features/decoder/components/token-decoder.component.tsx
@@ -20,6 +20,8 @@ import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-k
 import { WidgetComponent } from "@/features/common/components/widget/widget/widget.component";
 import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary";
 import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
+import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component";
+import styles from "./token-decoder.module.scss";
 
 interface TokenDecoderComponentProps {
   languageCode: string;
@@ -49,7 +51,7 @@ export const TokenDecoderComponent: React.FC<TokenDecoderComponentProps> = ({
   const loadDecoderInputs = useDecoderStore((state) => state.loadDecoderInputs);
   const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange);
   const showUseHashWarning$ = useDecoderStore(
-    (state) => state.showUseHashWarning,
+    (state) => state.showUseHashWarning
   );
 
   useEffect(() => {
@@ -184,41 +186,51 @@ export const TokenDecoderComponent: React.FC<TokenDecoderComponentProps> = ({
   }, [decoderInputs$, loadDecoderInputs, headlineConfig.isVisible]);
 
   return (
-    <WidgetComponent
-      id={dataTestidDictionary.decoder.id}
-      widget={DebuggerWidgetValues.DECODER}
-      languageCode={languageCode}
-      headlineConfig={headlineConfig}
-      title={dictionary.title}
-      description={dictionary.description}
-      exampleGenerator={dictionary.exampleGenerator}
-      contentInput={
-        <JwtInputComponent
-          dictionary={dictionary.jwtEditor}
+    <>
+      <div className={styles.input__description}>
+        <span>{dictionary.description}</span>
+        <WidgetAlgPickerComponent
+          label={dictionary.exampleGenerator.label}
           languageCode={languageCode}
+          widget={DebuggerWidgetValues.DECODER}
         />
-      }
-      contentOutput={
-        <>
-          <DecodedHeaderOutputComponent
-            languageCode={languageCode}
-            dictionary={dictionary.decodedHeader}
-            decodedHeaderInitialTabId={decodedHeaderInitialTabId}
-            descriptionVisibility={decodedHeaderDescriptionVisibility}
-          />
-          <DecodedPayloadOutputComponent
-            languageCode={languageCode}
-            dictionary={dictionary.decodedPayload}
-            decodedPayloadInitialTabId={decodedPayloadInitialTabId}
-            descriptionVisibility={decodedPayloadDescriptionVisibility}
-          />
-          <SecretKeyInputComponent
+      </div>
+      <WidgetComponent
+        id={dataTestidDictionary.decoder.id}
+        widget={DebuggerWidgetValues.DECODER}
+        languageCode={languageCode}
+        headlineConfig={headlineConfig}
+        title={dictionary.title}
+        description={dictionary.description}
+        exampleGenerator={dictionary.exampleGenerator}
+        contentInput={
+          <JwtInputComponent
+            dictionary={dictionary.jwtEditor}
             languageCode={languageCode}
-            dictionary={dictionary.signatureVerification}
           />
-        </>
-      }
-      warnings={null}
-    />
+        }
+        contentOutput={
+          <>
+            <DecodedHeaderOutputComponent
+              languageCode={languageCode}
+              dictionary={dictionary.decodedHeader}
+              decodedHeaderInitialTabId={decodedHeaderInitialTabId}
+              descriptionVisibility={decodedHeaderDescriptionVisibility}
+            />
+            <DecodedPayloadOutputComponent
+              languageCode={languageCode}
+              dictionary={dictionary.decodedPayload}
+              decodedPayloadInitialTabId={decodedPayloadInitialTabId}
+              descriptionVisibility={decodedPayloadDescriptionVisibility}
+            />
+            <SecretKeyInputComponent
+              languageCode={languageCode}
+              dictionary={dictionary.signatureVerification}
+            />
+          </>
+        }
+        warnings={null}
+      />
+    </>
   );
 };
diff --git a/src/features/decoder/components/token-decoder.module.scss b/src/features/decoder/components/token-decoder.module.scss
index 39909fa5..b57e7dc2 100644
--- a/src/features/decoder/components/token-decoder.module.scss
+++ b/src/features/decoder/components/token-decoder.module.scss
@@ -1,2 +1,32 @@
 @use "@/libs/theme/styles/variables" as *;
 @use "@/libs/theme/styles/mixins" as *;
+
+.input__description {
+    display: flex;
+    width: calc(100% - 2rem);
+    max-width: 1312px;
+    flex-direction: column;
+    grid-row-gap: 0;
+    margin: 0 auto 2rem;
+    color: var(--color_fg_default);
+    font-size: .875rem;
+    line-height: 1.375rem;
+    margin-bottom: .5rem;
+
+  & strong {
+    font-weight: 500;
+  }
+
+  @media #{$breakpoint-dimension-sm} {
+    width: calc(100% - 4rem);
+     grid-column: span 12;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  @media #{$breakpoint-dimension-lg} {
+    width: calc(100% - 8rem);
+  }
+ 
+}
\ No newline at end of file
diff --git a/src/features/localization/dictionaries/ui/pickers/en.tsx b/src/features/localization/dictionaries/ui/pickers/en.tsx
index b2b4f6b7..eed010d2 100644
--- a/src/features/localization/dictionaries/ui/pickers/en.tsx
+++ b/src/features/localization/dictionaries/ui/pickers/en.tsx
@@ -9,7 +9,7 @@ export const enPickersUiDictionary: PickersUiDictionaryModel = {
   exampleAlgPicker: {
     label: "Generate example",
     compactLabel: "Alg",
-    defaultValue: "Select a signing algorithm",
+    defaultValue: "Select signing algorithm",
     description: "Generate a JWT",
     closeButton: {
       label: "Close signing algorithm list",
diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss
index 9efc4bbb..4b320253 100644
--- a/src/libs/theme/styles/globals.scss
+++ b/src/libs/theme/styles/globals.scss
@@ -55,9 +55,9 @@
   --color_fg_link_hover: var(--functional-gray-50);
   --color_fg_link_pressed: var(--functional-gray-50);
 
-  --color_fg_selected: #99a7f1;
-  --color_border_selected: #99a7f1;
-  --color_border_focus: #99a7f1;
+  --color_fg_selected: var(--functional-gray-850);
+  --color_border_selected: var(--functional-gray-850);
+  --color_border_focus: var(--functional-gray-850);
 
   --color_bg_auth0-cta: linear-gradient(251deg, #1e1e1e 2.29%, #191919 87.03%);
 
@@ -206,9 +206,9 @@ html[data-theme="system-light"] {
   --color_fg_link_hover: var(--charcoal2);
   --color_fg_link_pressed: var(--charcoal2);
 
-  --color_fg_selected: #3f59e4;
-  --color_border_selected: #3f59e4;
-  --color_border_focus: #3f59e4;
+  --color_fg_selected: var(--functional-gray-850);
+  --color_border_selected: var(--functional-gray-850);
+  --color_border_focus: var(--functional-gray-850);
 
   --color_bg_auth0-cta: var(--functional-gray-150);
 
@@ -513,13 +513,19 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 .react-select__control {
   background-color: transparent !important;
   border-color: var(--color_border_button) !important;
+  background-color: var(--color_bg_layer);
+  border: 1px solid var(--color_border_default) !important;
   height: 100% !important;
-  border: 1px solid var(--color_border_inverse_static) !important;
+  &:hover {
+    border-color: var(--color_border_bold) !important;
+    transition: 0.2s ease-out !important;
+  }
 }
 
 .react-select__control--is-focused {
-  border-color: var(--color_border_focus) !important;
-  box-shadow: 0 0 0 1px var(--color_border_focus) !important;
+  transition: 0.2s ease-out;
+  border-color: var(--color_border_default) !important;
+  box-shadow: 0 0 0 3px var(--color_border_default) !important;
 }
 
 .react-select__value-container {
@@ -542,13 +548,16 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 }
 
 .react-select__menu {
-  background-color: var(--color_bg_layer_alternate-bold) !important;
-  color: var(--color_fg_bold) !important;
-  border: 1px solid var(--color_border_bold) !important;
-  font-size: 0.875rem !important;
-  font-family: var(--font-primary), monospace !important;
-  width: max-content !important;
-  min-width: 100% !important;
+    background-color: var(--color_bg_layer) !important;
+    border-radius: 0.75rem !important;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px !important;
+    margin-bottom: 8px !important;
+    margin-top: 8px !important;
+    box-sizing: border-box !important;
+    border: 1px solid var(--color_border_default);
+    padding: 0.25rem;
+    overflow: hidden;
+    min-width: 240px;
 }
 
 .react-select__menu-portal {
@@ -581,28 +590,29 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 }
 
 .react-select__option {
-  display: flex !important;
-  align-items: center !important;
-  color: var(--color_fg_default) !important;
-  position: relative !important;
-  height: 2.5rem !important;
-  border-bottom: 1px solid var(--color_border_bold) !important;
-  padding: 0.25rem 1rem !important;
-  background-color: transparent !important;
-  font-family: var(--font-primary), monospace !important;
-
-  gap: 0.5rem !important;
-  font-size: 0.8125rem !important;
-  line-height: 1.3125rem !important;
-  letter-spacing: -0.05px !important;
-
-  &:last-child {
-    border-bottom: unset;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
+    cursor: pointer !important;
+    display: flex !important;
+    font-size: 0.875rem !important;
+    width: 100% !important;
+    user-select: none !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+    background-color: transparent !important;
+    color: var(--color_fg_default) !important;
+    padding: 8px 12px 8px 1.25rem !important;
+    box-sizing: border-box !important;
+    -webkit-box-align: center !important;
+    align-items: center !important;
+    position: relative !important;
+    height: 1.5rem !important;
+    border-radius: 0.5rem !important;
+    font-family: var(--font-primary),monospace !important;
+    line-height: 1.3125rem !important;
+    letter-spacing: -0.05px !important;
+    font-weight: 500 !important;
+    opacity: 1 !important;
+    &:hover {
+      background-color: var(--color_bg_layer_alternate) !important;
+    }
 }
 
 .react-select__option--is-selected {
@@ -628,7 +638,7 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 .react-select__option--is-disabled {
   color: var(--color_fg_bold) !important;
   font-weight: 500;
-  opacity: 0.32;
+  opacity: 0.32 !important;
   cursor: not-allowed !important;
 }