diff --git a/apps/design-system/src/components/SingleSelect.stories.tsx b/apps/design-system/src/components/Dropdown.stories.tsx
similarity index 77%
rename from apps/design-system/src/components/SingleSelect.stories.tsx
rename to apps/design-system/src/components/Dropdown.stories.tsx
index d95219d14..8647e1df5 100644
--- a/apps/design-system/src/components/SingleSelect.stories.tsx
+++ b/apps/design-system/src/components/Dropdown.stories.tsx
@@ -1,20 +1,20 @@
-import { SelectDropdown, SelectDropdownOption } from '@asyncapi/studio-ui'
+import { Dropdown, DropdownOption } from '@asyncapi/studio-ui'
 import type { Meta, StoryObj } from "@storybook/react"
 /* eslint-disable import/no-anonymous-default-export */
 
 
-const meta: Meta<typeof SelectDropdown> = {
-  component: SelectDropdown,
+const meta: Meta<typeof Dropdown> = {
+  component: Dropdown,
   parameters: {
     layout: "fullscreen",
     backgrounds: {
-      default: "dark",
+      default: "light",
     },
   },
 }
 export default meta
 
-const options: SelectDropdownOption[] = [
+const options: DropdownOption[] = [
   {
     type: "group",
     label: "MQTT",
@@ -57,7 +57,7 @@ const options: SelectDropdownOption[] = [
     value: "socket.io",
   },
 ]
-type Story = StoryObj<typeof SelectDropdown>
+type Story = StoryObj<typeof Dropdown>
 export const Default: Story = {
   args: {
     options,
diff --git a/apps/design-system/src/components/Form.stories.tsx b/apps/design-system/src/components/Form.stories.tsx
index 83f0c2bf4..c6237432c 100644
--- a/apps/design-system/src/components/Form.stories.tsx
+++ b/apps/design-system/src/components/Form.stories.tsx
@@ -9,7 +9,7 @@ import {
   IconButton,
   TextInput,
   Label,
-  SelectDropdown,
+  Dropdown,
   ChipInput,
 } from "@asyncapi/studio-ui"
 import { AddIcon, TrashIcon } from "@asyncapi/studio-ui/icons"
@@ -35,7 +35,6 @@ const singleSelectOptions = [
   { label: "Pulsar", value: "pulsar" },
 ]
 export const Default = () => (
-  <>
   <Form
     title="User Registration"
     summary="Type a short summary description..."
@@ -52,7 +51,7 @@ export const Default = () => (
     <FormSection title="Connection Details">
       <div className="flex gap-3">
         <Field name="protocol" label="Protocol">
-          <SelectDropdown options={singleSelectOptions} placeholder="Select a protocol..." />
+          <Dropdown options={singleSelectOptions} placeholder="Select a protocol..." />
         </Field>
         <Field name="host" label="Host" className="grow" tooltip='Server host url.'>
           <TextInput value='kafka.in.mycompany.com:{port}/production' placeholder="" className='w-full' />
@@ -70,7 +69,7 @@ export const Default = () => (
       <FormGroup>
         <div className="flex flex-col gap-3">
           <div className="flex gap-3">
-            <SelectDropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
+            <Dropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
             <TextInput placeholder="Type something here..." className="grow" />
             <TrashIcon className="w-6 h-6 text-gray-500" />
           </div>
@@ -80,7 +79,7 @@ export const Default = () => (
       <FormGroup>
         <div className="flex flex-col gap-3">
           <div className="flex gap-3">
-            <SelectDropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
+            <Dropdown options={[{ label: "User/Password", value: "user/password" }]} value="user/password" />
             <TextInput placeholder="Type something here..." className="grow" />
             <TrashIcon className="w-6 h-6 text-gray-500" />
           </div>
@@ -103,5 +102,4 @@ export const Default = () => (
       </Field>
     </FormSection>
   </Form>
-  </>
 )
diff --git a/packages/ui/components/Form/Inputs/SelectDropdown.tsx b/packages/ui/components/Form/Inputs/Dropdown.tsx
similarity index 69%
rename from packages/ui/components/Form/Inputs/SelectDropdown.tsx
rename to packages/ui/components/Form/Inputs/Dropdown.tsx
index a5ad5aa3c..55256eb00 100644
--- a/packages/ui/components/Form/Inputs/SelectDropdown.tsx
+++ b/packages/ui/components/Form/Inputs/Dropdown.tsx
@@ -2,17 +2,17 @@ import * as RadixSelect from '@radix-ui/react-select'
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
 import classnames from 'classnames'
 
-type SelectDropdownRegularOption = {
+type DropdownRegularOption = {
   type?: 'regular'
   value: string
   label: string
 }
 
-type SelectDropdownRegularOptionProps = {
-  option: SelectDropdownRegularOption
+type DropdownRegularOptionProps = {
+  option: DropdownRegularOption
 }
 
-const SelectDropdownRegularOption = ({ option: { value, label } }: SelectDropdownRegularOptionProps) => {
+const DropdownRegularOption = ({ option: { value, label } }: DropdownRegularOptionProps) => {
   return (
     <RadixSelect.Item
       className="flex items-center relative text-gray-200 text-sm leading-7 pl-6 pr-7 hover:bg-gray-700 focus:bg-gray-700 my-2 rounded outline-none"
@@ -26,55 +26,55 @@ const SelectDropdownRegularOption = ({ option: { value, label } }: SelectDropdow
   )
 }
 
-type SelectDropdownGroupOption = {
+type DropdownGroupOption = {
   type: 'group'
   label: string
-  options: SelectDropdownRegularOption[]
+  options: DropdownRegularOption[]
 }
 
-type SelectDropdownGroupOptionProps = {
-  option: SelectDropdownGroupOption
+type DropdownGroupOptionProps = {
+  option: DropdownGroupOption
 }
 
-const SelectDropdownGroupOption = ({ option: { label, options } }: SelectDropdownGroupOptionProps) => {
+const DropdownGroupOption = ({ option: { label, options } }: DropdownGroupOptionProps) => {
   return (
     <>
       <RadixSelect.Group>
         <RadixSelect.Label className="text-xs text-gray-500 px-4 leading-6">{label}</RadixSelect.Label>
         {options.map((option) => (
-          <SelectDropdownRegularOption option={option} key={option.value} />
+          <DropdownRegularOption option={option} key={option.value} />
         ))}
       </RadixSelect.Group>
     </>
   )
 }
-type SelectDropdownSeparatorOption = {
+type DropdownSeparatorOption = {
   type: 'separator'
 }
 
-const SelectDropdownSeparatorOption = () => {
+const DropdownSeparatorOption = () => {
   return <RadixSelect.Separator className="w-full h-px bg-gray-700 my-2" />
 }
 
-export type SelectDropdownOption = SelectDropdownGroupOption | SelectDropdownRegularOption | SelectDropdownSeparatorOption
+export type DropdownOption = DropdownGroupOption | DropdownRegularOption | DropdownSeparatorOption
 
-type SelectDropdownOptionProps = {
-  option: SelectDropdownOption
+type DropdownOptionProps = {
+  option: DropdownOption
 }
 
-const SelectDropdownOption = ({ option }: SelectDropdownOptionProps) => {
+const DropdownOption = ({ option }: DropdownOptionProps) => {
   switch (option.type) {
   case 'separator':
-    return <SelectDropdownSeparatorOption />
+    return <DropdownSeparatorOption />
   case 'group':
-    return <SelectDropdownGroupOption option={option} />
+    return <DropdownGroupOption option={option} />
   default:
-    return <SelectDropdownRegularOption option={option} />
+    return <DropdownRegularOption option={option} />
   }
 }
 
-export type SelectDropdownProps = {
-  options: SelectDropdownOption[]
+export type DropdownProps = {
+  options: DropdownOption[]
   value?: string
   onChange?: (selectedOption: string) => void
   placeholder?: string
@@ -84,7 +84,7 @@ export type SelectDropdownProps = {
   className?: string
 }
 
-export function SelectDropdown({
+export function Dropdown({
   options,
   value,
   onChange,
@@ -92,7 +92,7 @@ export function SelectDropdown({
   name,
   isDisabled,
   className,
-}: SelectDropdownProps) {
+}: DropdownProps) {
   return (
     <>
       <RadixSelect.Root value={value} onValueChange={onChange} name={name} disabled={isDisabled}>
@@ -116,7 +116,7 @@ export function SelectDropdown({
             </RadixSelect.ScrollUpButton>
             <RadixSelect.Viewport>
               {options.map((option, index) => (
-                <SelectDropdownOption option={option} key={index} />
+                <DropdownOption option={option} key={index} />
               ))}
             </RadixSelect.Viewport>
             <RadixSelect.ScrollDownButton className="flex justify-center items-center">
diff --git a/packages/ui/components/Form/Inputs/index.ts b/packages/ui/components/Form/Inputs/index.ts
index c7df7fc7e..752a77f30 100644
--- a/packages/ui/components/Form/Inputs/index.ts
+++ b/packages/ui/components/Form/Inputs/index.ts
@@ -1,3 +1,3 @@
 export * from './TextInput'
 export * from './TextArea'
-export * from './SelectDropdown'
+export * from './Dropdown'