diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index 908aa3c..bf6681a 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '20'
           cache: npm
       - run: npm install
 
diff --git a/.github/workflows/sonarcloud.yml b/.github/workflows/sonarcloud.yml
index 67576a8..0b41db2 100644
--- a/.github/workflows/sonarcloud.yml
+++ b/.github/workflows/sonarcloud.yml
@@ -1,23 +1,25 @@
 name: SonarCloud analysis
 
 on:
-    pull_request:
-        branches: ['main']
-    workflow_dispatch:
+  pull_request:
+    branches: ['main']
+  workflow_dispatch:
 
 permissions:
-    pull-requests: read
+  pull-requests: read
 
 jobs:
-    Analysis:
-        runs-on: ubuntu-latest
+  Analysis:
+    runs-on: ubuntu-latest
 
-        steps:
-            - name: Analyze with SonarCloud
+    steps:
+      - name: Analyze with SonarCloud
 
-              uses: SonarSource/sonarcloud-github-action@de2e56b42aa84d0b1c5b622644ac17e505c9a049
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
-                  SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
-              with:
-                  args: -Dsonar.projectKey=dd3tech_dd360-components-docs -Dsonar.organization=dd3tech-1
+        uses: SonarSource/sonarcloud-github-action@de2e56b42aa84d0b1c5b622644ac17e505c9a049
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
+        with:
+          args:
+            -Dsonar.projectKey=dd3tech_dd360-components-docs
+            -Dsonar.organization=dd3tech-1
diff --git a/docs/form/single-select.mdx b/docs/form/single-select.mdx
new file mode 100644
index 0000000..1d8d3b0
--- /dev/null
+++ b/docs/form/single-select.mdx
@@ -0,0 +1,166 @@
+---
+product: dd360-ds
+title: React SingleSelect component
+components: SingleSelect
+---
+import { DynamicHeroIcon } from 'dd360-ds'
+
+<br id='top' />
+<br />
+
+<Label>Form</Label>
+
+# <HeaderDocCustom title="Single Select" pathUrl="form-single-select" />
+
+The SingleSelect component allows you to create a modern and functional option selector, ideal for forms and web applications that require option selection.
+
+<br />
+
+##### <span name="floating-nav">Imports</span>
+
+The first alternative is recommended as it can reduce the application bundle
+
+<WindowEditor codeString="import SingleSelect from 'dd360-ds/SingleSelect'" />
+<WindowEditor codeString="import { SingleSelect } from 'dd360-ds'" />
+
+##### <span name="floating-nav">Usage</span>
+
+The SingleSelect component requires at least the `optionsList` property that defines the available options for selection.
+
+<Playground className='h-60'>
+  <SingleSelect
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+The following code shows how to use the SingleSelect component:
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Label</span>
+
+The <TagDocs text='label' /> property allows you to add a descriptive label to the selector.
+
+<Playground className='h-60'>
+  <SingleSelect
+    label="Select an option"
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  label="Select an option"
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Large</span>
+
+The <TagDocs text='large' /> property allows you to increase the size of the selector.
+
+<Playground className='h-60'>
+  <SingleSelect
+    large
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  large
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Disabled</span>
+
+The <TagDocs text='isDisabled' /> property allows you to disable the selector.
+
+<Playground className='h-60'>
+  <SingleSelect
+    isDisabled
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  isDisabled
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+  dataTable={[
+    { title: 'optionsList', default: null, types: ['ISelectOption[]'], required: true },
+    { title: 'label', default: null, types: ['string'] },
+    { title: 'value', default: null, types: ['string | number'] },
+    { title: 'large', default: false, types: ['boolean'] },
+    { title: 'isDisabled', default: false, types: ['boolean'] },
+    { title: 'isRequired', default: false, types: ['boolean'] },
+    { title: 'className', default: null, types: ['string'] },
+    { title: 'classNameAdornment', default: null, types: ['string'] },
+    { title: 'classNameDropdown', default: null, types: ['string'] },
+    { title: 'styleDropdown', default: null, types: ['StyleObject'] },
+    { title: 'onChangeSelect', default: null, types: ['(option: ISelectOption) => void'] }
+  ]}
+/>
+
+Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.
+
+<BackAndForwardController />
diff --git a/package-lock.json b/package-lock.json
index 4f579a0..80b105f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "6.38.0",
+        "dd360-ds": "6.39.1",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -1526,9 +1526,9 @@
       "dev": true
     },
     "node_modules/dd360-ds": {
-      "version": "6.38.0",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.38.0.tgz",
-      "integrity": "sha512-iFnUotZAaHR+zbKwXTrpL1Gt2rmOTD4yw8OB0Rej3PZ/O5BQlAMRVU5AS/ISur5bilR2XtFxPbv0wMcc//AcVQ==",
+      "version": "6.39.1",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.39.1.tgz",
+      "integrity": "sha512-vKKwo3f4x5i+bLrHjFX+ZXWNrska7jdPTFbdi3WDpoOJ39GsjXl7ncG7OGZwcWDuLqubaSDcSNcqrcE3nKKcUQ==",
       "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^1.0.6",
@@ -8009,9 +8009,9 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "6.38.0",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.38.0.tgz",
-      "integrity": "sha512-iFnUotZAaHR+zbKwXTrpL1Gt2rmOTD4yw8OB0Rej3PZ/O5BQlAMRVU5AS/ISur5bilR2XtFxPbv0wMcc//AcVQ==",
+      "version": "6.39.1",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.39.1.tgz",
+      "integrity": "sha512-vKKwo3f4x5i+bLrHjFX+ZXWNrska7jdPTFbdi3WDpoOJ39GsjXl7ncG7OGZwcWDuLqubaSDcSNcqrcE3nKKcUQ==",
       "requires": {
         "@heroicons/react": "^1.0.6",
         "@popperjs/core": "2.11.8",
diff --git a/package.json b/package.json
index 9f5a292..61718bc 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.38.0",
+    "dd360-ds": "6.39.1",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
diff --git a/src/components/Layout/SideBarDocs.tsx b/src/components/Layout/SideBarDocs.tsx
index 6e4447f..843890f 100644
--- a/src/components/Layout/SideBarDocs.tsx
+++ b/src/components/Layout/SideBarDocs.tsx
@@ -97,7 +97,8 @@ export const components: ComponentObjectProps = {
       },
       {
         label: 'Filter Bar Button',
-        pathname: 'filter-bar-button'
+        pathname: 'filter-bar-button',
+        badge: BADGE_TYPES.new
       }
     ]
   },
@@ -193,6 +194,11 @@ export const components: ComponentObjectProps = {
         label: 'Select',
         pathname: 'select'
       },
+      {
+        label: 'Single Select',
+        pathname: 'single-select',
+        badge: BADGE_TYPES.new
+      },
       {
         label: 'Text Area',
         pathname: 'textarea'