diff --git a/.changeset/long-shrimps-roll.md b/.changeset/long-shrimps-roll.md
new file mode 100644
index 0000000000..9b3d2ec265
--- /dev/null
+++ b/.changeset/long-shrimps-roll.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated `.form-select` select to v2.
diff --git a/.changeset/loud-peaches-hang.md b/.changeset/loud-peaches-hang.md
new file mode 100644
index 0000000000..5cdda45838
--- /dev/null
+++ b/.changeset/loud-peaches-hang.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed size variants for form select.
diff --git a/packages/documentation/src/stories/components/forms/select/select.docs.mdx b/packages/documentation/src/stories/components/forms/select/select.docs.mdx
index 78c610ee40..8a354f06f3 100644
--- a/packages/documentation/src/stories/components/forms/select/select.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/select/select.docs.mdx
@@ -23,8 +23,7 @@ Custom `<select>` menus need only the class `.form-select` to trigger the custom
   <Controls of={SelectStories.Default} />
 </div>
 
-<StylesPackageImport components={["forms", "form-select"]}
-                     required={{ 'floating-label': true, 'form-feedback': true }} />
+<StylesPackageImport components={['form-select']} required={{ 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
@@ -44,26 +43,6 @@ you can dynamically add the class `.form-select-empty` to the `<select>` when th
 
 <Canvas of={SelectStories.FloatingLabelPlaceholder} />
 
-### Sizing
-
-<div className="alert alert-warning">
-  <h4 className="alert-heading">We're deprecating the regular and medium sizes for text input, textarea and select.</h4>
-  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />`.form-select-rg` and `.form-select-md` are deprecated and will be removed in the next major version.</p>
-</div>
-
-The size can be adjusted, by simply adding one of the following four classes:
-
-- Small: `.form-select-sm`
-- Regular: `.form-select-rg`
-- Medium: default or `.form-select-md`
-- Large: `.form-select-lg`
-
-<div className="alert alert-info alert-md">
-  Regular and medium size classes are not available on floating-label elements
-</div>
-
-<Canvas of={SelectStories.Size} />
-
 ### Validation
 
 Simply add the classes `is-valid` or `is-invalid` to the `<select>` element to show it in the expected state.<br/>
diff --git a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
index b5065a76fe..ec96e6c1aa 100644
--- a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
@@ -28,12 +28,10 @@ export const Select: Story = {
         hint: ['Hintus textus', context.args.hint],
       }),
       ...bombArgs({
-        size: context.argTypes.size.options,
         disabled: [false, true],
         validation: context.argTypes.validation.options,
       }),
       ...bombArgs({
-        size: context.argTypes.size.options,
         validation: context.argTypes.validation.options.filter(
           (option: string) => option !== 'is-invalid',
         ),
@@ -60,7 +58,6 @@ export const Select: Story = {
       }),
       ...bombArgs({
         multiple: [true],
-        size: context.argTypes.size.options,
         disabled: [false, true],
         validation: context.argTypes.validation.options,
       }),
@@ -77,17 +74,6 @@ export const Select: Story = {
               class="${bg} d-flex gap-16 flex-column p-16"
               data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
             >
-              <h2>Default</h2>
-              ${bombArgsGeneratedDefault.map((args: Args) => {
-                return html`
-                  <div>
-                    ${Default.render?.(
-                      { ...context.args, ...Default.args, ...args },
-                      { ...context, id: args.id },
-                    )}
-                  </div>
-                `;
-              })}
               <h2>Floating Label</h2>
               ${bombArgsGeneratedDefault.map(
                 (args: Args) =>
@@ -100,18 +86,19 @@ export const Select: Story = {
                     </div>
                   `,
               )}
-              <h2>Multiple - Default</h2>
-              ${bombArgsGeneratedMultiple.map(
-                (args: Args) =>
-                  html`
+              <h2>Default</h2>
+              ${bombArgsGeneratedDefault
+                .map((args: Args) => ({ ...args, floatingLabel: false }))
+                .map((args: Args) => {
+                  return html`
                     <div>
                       ${Default.render?.(
                         { ...context.args, ...Default.args, ...args },
                         { ...context, id: args.id },
                       )}
                     </div>
-                  `,
-              )}
+                  `;
+                })}
               <h2>Multiple - Floating Label</h2>
               ${bombArgsGeneratedMultiple.map(
                 (args: Args) =>
@@ -124,6 +111,18 @@ export const Select: Story = {
                     </div>
                   `,
               )}
+              <h2>Multiple - Default</h2>
+              ${bombArgsGeneratedMultiple.map(
+                (args: Args) =>
+                  html`
+                    <div>
+                      ${Default.render?.(
+                        { ...context.args, ...Default.args, ...args },
+                        { ...context, id: args.id },
+                      )}
+                    </div>
+                  `,
+              )}
             </div>
           `;
         })}
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index ed35da3737..67874e8c78 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -18,16 +18,14 @@ const meta: MetaComponent = {
     badges: [],
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=22183-21629&mode=design&t=3lniLiZhl7q9Gqgn-4',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-183',
     },
   },
   args: {
     label: 'Label',
-    floatingLabel: false,
+    floatingLabel: true,
     hiddenLabel: false,
     value: undefined,
-    size: 'form-select-lg',
-    sizeFloatingLabel: 'form-select-lg',
     options: 5,
     multiple: false,
     multipleSize: 4,
@@ -81,46 +79,6 @@ const meta: MetaComponent = {
         disable: true,
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: false,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'form-select-sm': 'Small',
-          'form-select-rg': 'Regular (deprecated)',
-          'null': 'Medium (deprecated)',
-          'form-select-lg': 'Large',
-        },
-      },
-      options: ['form-select-sm', 'form-select-rg', 'null', 'form-select-lg'],
-      table: {
-        category: 'General',
-      },
-    },
-    sizeFloatingLabel: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: true,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'form-select-sm': 'Small',
-          'form-select-lg': 'Large',
-        },
-      },
-      options: ['form-select-sm', 'form-select-lg'],
-      table: {
-        category: 'General',
-      },
-    },
     options: {
       name: 'Options',
       description: 'Amount of `option` elements to render in the component.',
@@ -213,8 +171,6 @@ const Template: Story = {
     const [_, updateArgs] = useArgs();
     const classes = [
       'form-select',
-      args.size,
-      args.sizeFloatingLabel,
       args.validation,
       args.floatingLabelPlaceholder && !args.value ? 'form-select-empty' : null,
     ]
@@ -295,15 +251,7 @@ export const FloatingLabel: Story = {
   ...Template,
   parameters: {
     controls: {
-      exclude: [
-        'Hidden Label',
-        'Options',
-        'Multiple',
-        'Size',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
+      exclude: ['Hidden Label', 'Options', 'Multiple', 'Helper Text', 'Disabled', 'Validation'],
     },
   },
   args: {
@@ -316,15 +264,7 @@ export const FloatingLabelPlaceholder: Story = {
   ...Template,
   parameters: {
     controls: {
-      exclude: [
-        'Hidden Label',
-        'Options',
-        'Multiple',
-        'Size',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
+      exclude: ['Hidden Label', 'Options', 'Multiple', 'Helper Text', 'Disabled', 'Validation'],
     },
   },
   args: {
@@ -334,28 +274,6 @@ export const FloatingLabelPlaceholder: Story = {
   },
 };
 
-export const Size: Story = {
-  ...Template,
-  parameters: {
-    controls: {
-      exclude: [
-        'Label',
-        'Floating Label',
-        'Hidden Label',
-        'Options',
-        'Multiple',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
-    },
-  },
-  args: {
-    size: 'form-select-sm',
-    hint: '',
-  },
-};
-
 export const Validation: Story = {
   ...Template,
   parameters: {
@@ -365,7 +283,6 @@ export const Validation: Story = {
         'Floating Label',
         'Hidden Label',
         'Options',
-        'Size',
         'Multiple',
         'Helper Text',
         'Disabled',
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 14db565f9c..9d767dd68f 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -18,16 +18,17 @@
 
 tokens.$default-map: components.$post-text-input;
 
+// TODO: Since each input/select/textarea will have their own tokens, make sure to separate this file between the 3 corresponding files form-select, forms (should be renamed text-input) and form-textarea
 .form-floating {
   position: relative;
 
-  > .form-control,
-  > .form-select {
+  > .form-control {
     height: tokens.get('input-sizing-height');
     min-height: tokens.get('input-sizing-height');
   }
 
-  > label {
+  > .form-control ~ label,
+  > textarea ~ label {
     position: absolute;
     z-index: 2;
     text-align: start;
@@ -81,7 +82,7 @@ tokens.$default-map: components.$post-text-input;
       color: tokens.get('input-color-disabled-fg');
     }
 
-    &:hover ~ label {
+    &:not(:disabled):hover ~ label {
       color: tokens.get('input-color-hover-fg');
     }
 
@@ -93,73 +94,13 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > .form-select {
-    padding-block-start: tokens.get('input-filled-padding-block-start');
-    padding-block-end: tokens.get('input-filled-padding-block-end');
-
-    ~ label {
-      color: tokens.get('input-color-enabled-fg');
-      padding-block-start: tokens.get('input-label-filled-padding-block-start');
-      max-width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-      transition: all 0.25s ease-in-out;
-    }
-
-    &:disabled {
-      ~ label {
-        color: tokens.get('input-color-disabled-fg');
-      }
-    }
-
-    &:empty,
-    &.form-select-empty {
-      padding-block-start: tokens.get('input-filled-padding-block-start');
-      padding-block-end: tokens.get('input-filled-padding-block-end');
-
-      ~ label {
-        padding-block-start: tokens.get('input-label-empty-padding-block-start');
-        max-width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-      }
-    }
-
-    &[multiple] {
-      padding-block-start: spacing.$size-big;
-      padding-block-end: 0;
-      height: auto;
-
-      ~ label {
-        padding-block-end: 0;
-        max-width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-        height: auto;
-      }
-
-      &:not(:disabled) {
-        ~ label {
-          background-color: tokens.get('input-color-enabled-bg');
-        }
-      }
-
-      &:empty {
-        ~ label {
-          padding-block-start: forms.$form-floating-padding-y;
-          padding-block-end: forms.$form-floating-padding-y;
-          width: calc(
-            100% - (#{tokens.get('input-border-width')} * 2) - #{tokens.get(
-                'input-label-empty-padding-inline-start'
-              )}
-          );
-        }
-      }
-    }
-  }
-
   > .form-control:focus,
-  > .form-control:not(:placeholder-shown),
-  > .form-select {
+  > .form-control:not(:placeholder-shown) {
     ~ label {
       font-size: tokens.get('input-label-filled-font-size');
     }
 
-    &:not(:hover) {
+    &:not(:hover):not(:disabled) {
       ~ label {
         color: tokens.get('input-color-selected-fg');
       }
@@ -177,7 +118,7 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > :disabled ~ label,
+  > textarea:disabled ~ label,
   > .form-control:disabled ~ label {
     // Required for `.form-control`s because of specificity
     color: tokens.get('input-color-disabled-fg');
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index 9169d2ed10..11380c204b 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -1,97 +1,215 @@
 @forward './../variables/options';
 
-@use './../themes/bootstrap/core' as b;
-@use './../themes/bootstrap/forms/form-select' as bffs;
-@use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';
+@use './../mixins/forms';
+@use './../functions/tokens';
+@use './../tokens/components';
+@use './../tokens/elements';
 
-@use './../variables/commons';
-@use './../variables/components/forms';
-@use './../variables/components/form-select' as form-select;
-
-.form-select-wrapper {
-  @include utilities.focus-style {
-    border-radius: commons.$border-radius;
-  }
-}
-
-:not(.form-select-wrapper) > {
-  .form-select {
-    @include utilities.focus-style {
-      border-radius: commons.$border-radius;
-    }
-  }
-}
+tokens.$default-map: components.$post-select;
 
 .form-select {
-  --form-select-indicator: #{form-select.$form-select-indicator};
-
-  &:focus {
-    box-shadow: none; // Override bootstrap
-
-    @include utilities.high-contrast-mode {
-      border-color: FieldText !important;
+  display: block;
+  width: 100%;
+  font-family: tokens.get('body-font-family', elements.$post-body);
+  appearance: none;
+  position: relative;
+  min-height: tokens.get('select-sizing-height');
+  padding-block: tokens.get('select-empty-padding-block');
+  padding-inline-start: tokens.get('select-padding-inline-start');
+  padding-inline-end: tokens.get('select-padding-inline-end');
+  background-color: tokens.get('select-color-enabled-bg');
+  background-repeat: no-repeat;
+  background-size: tokens.get('select-sizing-icon');
+  background-position: center right tokens.get('select-padding-inline-end');
+  border-width: tokens.get('select-border-width');
+  border-color: tokens.get('select-color-enabled-border');
+  border-radius: tokens.get('select-border-radius-surface');
+  color: tokens.get('select-color-enabled-fg');
+  @include forms.select-bg-image('enabled');
+
+  &:disabled {
+    color: tokens.get('select-color-disabled-fg');
+    background-color: tokens.get('select-color-disabled-bg');
+    border-color: tokens.get('select-color-disabled-border');
+    border-style: tokens.get('select-border-style-disabled');
+
+    &:not([multiple]) {
+      @include forms.select-bg-image('disabled');
     }
   }
 
   &:not(:disabled) {
-    &:hover,
     &:focus {
+      background-color: tokens.get('select-color-selected-bg');
+      color: tokens.get('select-color-selected-fg');
+      border-color: tokens.get('select-color-selected-border');
+      @include forms.select-bg-image('selected');
+
+      @include utilities.focus-style;
+
       @include utilities.high-contrast-mode {
         border-color: FieldText;
       }
     }
 
     &:hover {
+      background-color: tokens.get('select-color-hover-bg');
+      color: tokens.get('select-color-enabled-fg');
+      border-color: tokens.get('select-color-hover-border');
+
+      &:not([multiple]) {
+        @include forms.select-bg-image('hover');
+      }
+
       @include utilities.high-contrast-mode {
         border-color: Highlight;
       }
     }
   }
 
-  @include utilities.disabled-style {
-    ~ .form-text {
-      color: var(--post-gray-60);
+  @include utilities.high-contrast-mode() {
+    background-color: Field;
+    border-color: FieldText;
+    color: FieldText;
+
+    &:focus-visible {
+      color: FieldText;
     }
   }
 
-  &:not([multiple]) {
-    &:disabled {
-      background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
-        var(--form-select-indicator), var(--bs-form-select-bg-icon, none);
+  &.is-valid,
+  &.is-invalid {
+    &:not(:disabled) {
+      background-position:
+        center right tokens.get('select-validation-icon-position-inline-end'),
+        center right
+          calc(
+            tokens.get('select-validation-icon-position-inline-end') +
+              tokens.get('select-sizing-icon') + tokens.get('select-gap-inline-2')
+          );
     }
   }
 
-  @include utilities.high-contrast-mode() {
-    --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-dark)};
-    background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
+  &.is-valid:not(:disabled) {
+    @include forms.select-bg-image('enabled', 'valid');
 
-    @media (prefers-color-scheme: light) {
-      --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-light)};
-      background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
+    &:focus {
+      @include forms.select-bg-image('selected', 'valid');
     }
 
-    background-color: Field;
-    border-color: FieldText;
-    color: FieldText;
+    &:hover {
+      &:not([multiple]) {
+        @include forms.select-bg-image('hover', 'valid');
+      }
+    }
+  }
 
-    &:focus-visible {
-      color: FieldText;
+  &.is-invalid:not(:disabled) {
+    @include forms.select-bg-image('enabled', 'invalid');
+
+    &:focus {
+      @include forms.select-bg-image('selected', 'invalid');
+    }
+
+    &:hover {
+      &:not([multiple]) {
+        @include forms.select-bg-image('hover', 'invalid');
+      }
     }
   }
-}
 
-.form-select-rg {
-  @include forms-mixins.form-rg;
-  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
-}
+  &[multiple],
+  &[size]:not([size='1']) {
+    background-image: none;
+
+    &.is-valid,
+    &.is-invalid {
+      background-position: center right
+        calc(#{tokens.get('select-validation-icon-position-inline-end')} * 2);
+    }
+
+    &.is-valid:not(:disabled) {
+      @include forms.select-bg-image($validation: 'valid');
+    }
 
-.form-select-sm {
-  @include forms-mixins.form-sm;
-  background-size: forms.$form-bg-size-sm; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+    &.is-invalid:not(:disabled) {
+      @include forms.select-bg-image($validation: 'invalid');
+    }
+  }
 }
 
-.form-select-lg {
-  @include forms-mixins.form-lg;
-  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+.form-floating {
+  position: relative;
+
+  > .form-select {
+    padding-block-start: tokens.get('select-filled-padding-block-start');
+    padding-block-end: tokens.get('select-filled-padding-block-end');
+
+    ~ label {
+      position: absolute;
+      z-index: 2;
+      text-align: start;
+      pointer-events: none;
+      display: block;
+      left: tokens.get('select-border-width');
+      top: tokens.get('select-border-width');
+      font-size: tokens.get('select-label-filled-font-size');
+      padding-inline-start: tokens.get('select-label-empty-padding-inline-start');
+      padding-inline-end: tokens.get('select-label-empty-padding-inline-end');
+      padding-block-start: tokens.get('select-label-filled-padding-block-start');
+      color: tokens.get('select-color-enabled-fg');
+      max-width: calc(100% - (#{tokens.get('select-border-width')} * 2));
+      background-color: tokens.get('select-color-enabled-bg');
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: all 0.25s ease-in-out;
+    }
+
+    &:not(:disabled):hover ~ label {
+      color: tokens.get('select-color-hover-fg');
+    }
+
+    &:disabled ~ label {
+      color: tokens.get('select-color-disabled-fg');
+    }
+
+    &:empty,
+    &.form-select-empty {
+      ~ label {
+        padding-block-start: tokens.get('select-label-empty-padding-block-start');
+        font-size: unset;
+      }
+    }
+
+    &[multiple] {
+      padding-block-end: 0;
+      height: auto;
+
+      option {
+        color: tokens.get('select-color-enabled-fg');
+      }
+
+      ~ label {
+        // Add some distance on the right to leave space for the scrollbar
+        width: calc(100% - (#{tokens.get('select-padding-inline-end')} * 2));
+      }
+
+      &:disabled option {
+        color: tokens.get('select-color-disabled-fg');
+      }
+
+      &:empty {
+        ~ label {
+          padding-block: tokens.get('select-empty-padding-block');
+          width: calc(
+            100% - (#{tokens.get('select-border-width')} * 2) - #{tokens.get(
+                'select-label-empty-padding-inline-start'
+              )}
+          );
+        }
+      }
+    }
+  }
 }
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
index c6ea0e47a4..43567e26e5 100644
--- a/packages/styles/src/components/forms.scss
+++ b/packages/styles/src/components/forms.scss
@@ -6,6 +6,7 @@
 
 @use './../mixins/icons';
 @use './../mixins/utilities';
+@use './../variables/components/forms';
 
 tokens.$default-map: components.$post-text-input;
 
@@ -194,11 +195,11 @@ tokens.$default-map: components.$post-text-input;
   }
 
   &.is-valid:not(:disabled) {
-    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    background-image: forms.$valid-icon;
   }
 
   &.is-invalid:not(:disabled) {
-    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    background-image: forms.$invalid-icon;
   }
 }
 
diff --git a/packages/styles/src/components/timepicker.scss b/packages/styles/src/components/timepicker.scss
index ed42857a10..69aaf1c530 100644
--- a/packages/styles/src/components/timepicker.scss
+++ b/packages/styles/src/components/timepicker.scss
@@ -7,6 +7,7 @@
 @use './../mixins/forms' as form-mixins;
 @use './../mixins/button' as button-mixins;
 
+@use './../variables/type';
 @use './../variables/color';
 @use './../variables/components/forms';
 @use './../variables/components/button';
@@ -74,7 +75,9 @@
   }
 
   .form-control {
-    @include form-mixins.form-rg;
+    padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
+    font-size: type.$font-size-regular;
+    line-height: forms.$input-line-height-rg;
   }
 }
 
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index ca11c46b1a..fc596604ff 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -1,12 +1,10 @@
-@use './../variables/color';
-@use './../variables/type';
-@use './../variables/components/form-validation';
 @use './../variables/components/forms';
-@use './../variables/components/tooltips';
 @use './../mixins/utilities';
+@use './../functions/icons';
+@use './../functions/tokens';
+@use './../tokens/components';
 
 // Placeholder in input fields
-
 @mixin placeholder() {
   &::placeholder {
     @content;
@@ -20,33 +18,6 @@
   /* stylelint-enable */
 }
 
-@mixin icon-placement {
-  padding-right: form-validation.$form-feedback-icon-offset +
-    form-validation.$form-feedback-icon-size;
-  background-repeat: no-repeat;
-  background-position: calc(100% - #{form-validation.$form-feedback-icon-offset}) center;
-}
-
-@mixin form-rg {
-  padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
-  font-size: type.$font-size-regular;
-  line-height: forms.$input-line-height-rg;
-}
-
-@mixin form-sm {
-  font-size: type.$font-size-14;
-  line-height: forms.$input-line-height-sm;
-  min-height: forms.$input-height-sm;
-  padding-block: forms.$input-padding-y-sm;
-  padding-inline: forms.$input-padding-x-sm;
-}
-
-@mixin form-lg {
-  font-size: type.$font-size-16 !important;
-  line-height: forms.$input-line-height-lg;
-  min-height: forms.$input-height-lg;
-}
-
 /* Deprecated use the one in utilities.scss */
 @mixin focus-outline {
   outline: none;
@@ -58,3 +29,16 @@
     @content;
   }
 }
+
+@mixin select-bg-image($state: null, $validation: null) {
+  @if ($validation == 'valid') {
+    $validation: forms.$valid-icon;
+  } @else if ($validation == 'invalid') {
+    $validation: forms.$invalid-icon;
+  }
+
+  @if ($state) {
+    $state: url('#{icons.get-colored-svg-url('2052', tokens.get('select-color-#{$state}-fg',components.$post-select))}');
+  }
+  background-image: $state, $validation;
+}
diff --git a/packages/styles/src/themes/bootstrap/_forms.scss b/packages/styles/src/themes/bootstrap/_forms.scss
index 9d163b8c5e..25c57e2585 100644
--- a/packages/styles/src/themes/bootstrap/_forms.scss
+++ b/packages/styles/src/themes/bootstrap/_forms.scss
@@ -1,4 +1,3 @@
 @forward './forms/form-text';
-@forward './forms/form-select';
 @forward './forms/form-range';
 @forward './forms/input-group';
diff --git a/packages/styles/src/themes/bootstrap/_overrides-variables.scss b/packages/styles/src/themes/bootstrap/_overrides-variables.scss
index 4131f4789d..c7fe19486d 100644
--- a/packages/styles/src/themes/bootstrap/_overrides-variables.scss
+++ b/packages/styles/src/themes/bootstrap/_overrides-variables.scss
@@ -22,7 +22,6 @@
 @forward './../../variables/components/figures';
 @forward './../../variables/components/form-check';
 @forward './../../variables/components/form-validation';
-@forward './../../variables/components/form-select';
 @forward './../../variables/components/forms';
 @forward './../../variables/components/modal';
 @forward './../../variables/components/nav';
diff --git a/packages/styles/src/themes/bootstrap/forms/_form-select.scss b/packages/styles/src/themes/bootstrap/forms/_form-select.scss
deleted file mode 100644
index 286e51bf48..0000000000
--- a/packages/styles/src/themes/bootstrap/forms/_form-select.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use './../core' as *;
-@import 'bootstrap/scss/forms/form-select';
diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss
deleted file mode 100644
index 574b5bd16d..0000000000
--- a/packages/styles/src/variables/components/_form-select.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use './forms';
-@use './../color';
-@use './../../functions/icons';
-
-$form-select-border-radius: forms.$input-border-radius;
-$form-select-disabled-color: forms.$input-disabled-color;
-$form-select-disabled-bg: forms.$input-disabled-bg;
-$form-select-disabled-border-color: color.$gray-40;
-$form-select-indicator-color: color.$black;
-$form-select-indicator: url('#{icons.get-colored-svg-url('2113', $form-select-indicator-color)}') !default;
-$form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-border-color)}') !default;
-$form-select-indicator-hcm-dark: url('#{icons.get-colored-svg-url('2113', color.$white)}') !default;
-$form-select-indicator-hcm-light: url('#{icons.get-colored-svg-url('2113', color.$black)}') !default;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 821a1a9231..1182c8cc8d 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -12,9 +12,6 @@
 
 // Used elsewhere than text input
 
-$form-bg-size: 32px !default;
-$form-bg-size-sm: 24px !default;
-
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
 $input-line-height: type.$line-height-copy !default;
@@ -94,3 +91,6 @@ $form-floating-padding-y: $input-padding-y-lg;
 
 $form-floating-textarea-padding-t: spacing.$size-mini + $form-floating-label-font-size *
   type.$line-height-copy * $form-floating-label-scale; // The Space needed for the label on focus
+
+$valid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+$invalid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
diff --git a/packages/styles/src/variables/components/_index.scss b/packages/styles/src/variables/components/_index.scss
index db49058b2d..d69a673607 100644
--- a/packages/styles/src/variables/components/_index.scss
+++ b/packages/styles/src/variables/components/_index.scss
@@ -11,7 +11,6 @@
 @forward 'figures';
 @forward 'form-check';
 @forward 'form-validation';
-@forward 'form-select';
 @forward 'forms';
 @forward 'modal';
 @forward 'nav';
diff --git a/packages/styles/tests/mixins/forms.test.scss b/packages/styles/tests/mixins/forms.test.scss
index 90d53b5ae7..dbe1d26c06 100644
--- a/packages/styles/tests/mixins/forms.test.scss
+++ b/packages/styles/tests/mixins/forms.test.scss
@@ -5,7 +5,5 @@ body {
     color: red;
   }
 
-  @include forms.icon-placement();
-  @include forms.form-rg();
   @include forms.focus-outline();
 }
diff --git a/packages/styles/tests/mixins/index.test.scss b/packages/styles/tests/mixins/index.test.scss
index 9a00dbb4a3..acaf720c69 100644
--- a/packages/styles/tests/mixins/index.test.scss
+++ b/packages/styles/tests/mixins/index.test.scss
@@ -7,8 +7,6 @@ body {
   @include mixins.placeholder() {
     color: red;
   }
-  @include mixins.icon-placement();
-  @include mixins.form-rg();
   @include mixins.focus-outline();
 
   @include mixins.bezel-small();