diff --git a/README.md b/README.md
index c870722..6380f7c 100644
--- a/README.md
+++ b/README.md
@@ -93,9 +93,9 @@ function App() {
 
 ### Buttons
 
-- [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/Button)
-- [Icon Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/IconButton)
-- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/CloseButton)
+- [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Buttons/Button)
+- [Icon Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Buttons/IconButton)
+- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Buttons/CloseButton)
 
 ### Controls
 
diff --git a/src/App.tsx b/src/App.tsx
index 59f8297..f553fc7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import SwitchDemo from './components/Switch/SwitchDemo'
-import ButtonDemo from './components/Buttons/Button/ButtonDemo'
+import ButtonDemo from './components/Forms/Buttons/Button/ButtonDemo'
 import RadioDemo from './components/Radio/RadioDemo'
 import TabBarDemo from './components/TabBar/TabBarDemo'
 import CheckboxDemo from './components/Checkbox/CheckboxDemo'
@@ -10,8 +10,8 @@ import TagDemo from './components/Tag/TagDemo'
 import InlineMessageDemo from './components/InlineMessage/InlineMessageDemo'
 import TextInputDemo from './components/TextInput/TextInputDemo'
 import TextareaDemo from './components/Textarea/TextareaDemo'
-import CloseButtonDemo from './components/Buttons/CloseButton/CloseButtonDemo'
-import IconButtonDemo from './components/Buttons/IconButton/IconButtonDemo'
+import CloseButtonDemo from './components/Forms/Buttons/CloseButton/CloseButtonDemo'
+import IconButtonDemo from './components/Forms/Buttons/IconButton/IconButtonDemo'
 import SliderDemo from './components/Slider/SliderDemo'
 import QualitativeDemo from './components/Legend/QualitativeLegend/QualitativeLegendDemo'
 import LayerParametersDemo from './components/Legend/LayerParameters/LayerParametersDemo'
diff --git a/src/components/Buttons/Button/Button.stories.tsx b/src/components/Forms/Buttons/Button/Button.stories.tsx
similarity index 96%
rename from src/components/Buttons/Button/Button.stories.tsx
rename to src/components/Forms/Buttons/Button/Button.stories.tsx
index 21b142b..545b75f 100644
--- a/src/components/Buttons/Button/Button.stories.tsx
+++ b/src/components/Forms/Buttons/Button/Button.stories.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import Button from '.'
-import { CheckIcon } from '../../icons'
+import { CheckIcon } from '../../../icons'
 
 const meta = {
   title: 'Forms/Buttons/Button',
diff --git a/src/components/Buttons/Button/ButtonDemo.tsx b/src/components/Forms/Buttons/Button/ButtonDemo.tsx
similarity index 96%
rename from src/components/Buttons/Button/ButtonDemo.tsx
rename to src/components/Forms/Buttons/Button/ButtonDemo.tsx
index 64943a5..a670679 100644
--- a/src/components/Buttons/Button/ButtonDemo.tsx
+++ b/src/components/Forms/Buttons/Button/ButtonDemo.tsx
@@ -1,4 +1,4 @@
-import { Button } from '../..'
+import { Button } from '../../..'
 
 const ButtonDemo = () => (
   <div
diff --git a/src/components/Buttons/Button/README.md b/src/components/Forms/Buttons/Button/README.md
similarity index 96%
rename from src/components/Buttons/Button/README.md
rename to src/components/Forms/Buttons/Button/README.md
index 55af4c2..699a1a7 100644
--- a/src/components/Buttons/Button/README.md
+++ b/src/components/Forms/Buttons/Button/README.md
@@ -2,7 +2,7 @@
 
 [Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/forms-buttons-button--docs)
 
-[ButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Buttons/Button/ButtonDemo.tsx)
+[ButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Forms/Buttons/Button/ButtonDemo.tsx)
 
 ## Import
 
diff --git a/src/components/Buttons/Button/index.tsx b/src/components/Forms/Buttons/Button/index.tsx
similarity index 100%
rename from src/components/Buttons/Button/index.tsx
rename to src/components/Forms/Buttons/Button/index.tsx
diff --git a/src/components/Buttons/Button/styled.ts b/src/components/Forms/Buttons/Button/styled.ts
similarity index 98%
rename from src/components/Buttons/Button/styled.ts
rename to src/components/Forms/Buttons/Button/styled.ts
index 5d1db51..3d5c360 100644
--- a/src/components/Buttons/Button/styled.ts
+++ b/src/components/Forms/Buttons/Button/styled.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { Button } from '@chakra-ui/react'
-import { getThemedColor } from '../../../lib/theme'
+import { getThemedColor } from '../../../../lib/theme'
 import { ButtonProps } from './types'
 
 export const BaseButton = styled(Button)<ButtonProps>`
diff --git a/src/components/Buttons/Button/types.ts b/src/components/Forms/Buttons/Button/types.ts
similarity index 100%
rename from src/components/Buttons/Button/types.ts
rename to src/components/Forms/Buttons/Button/types.ts
diff --git a/src/components/Buttons/CloseButton/CloseButton.stories.tsx b/src/components/Forms/Buttons/CloseButton/CloseButton.stories.tsx
similarity index 100%
rename from src/components/Buttons/CloseButton/CloseButton.stories.tsx
rename to src/components/Forms/Buttons/CloseButton/CloseButton.stories.tsx
diff --git a/src/components/Buttons/CloseButton/CloseButtonDemo.tsx b/src/components/Forms/Buttons/CloseButton/CloseButtonDemo.tsx
similarity index 83%
rename from src/components/Buttons/CloseButton/CloseButtonDemo.tsx
rename to src/components/Forms/Buttons/CloseButton/CloseButtonDemo.tsx
index bb8ec38..6a9d39a 100644
--- a/src/components/Buttons/CloseButton/CloseButtonDemo.tsx
+++ b/src/components/Forms/Buttons/CloseButton/CloseButtonDemo.tsx
@@ -1,4 +1,4 @@
-import { CloseButton } from '../..'
+import { CloseButton } from '../../..'
 
 const CloseButtonDemo = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
diff --git a/src/components/Buttons/CloseButton/README.md b/src/components/Forms/Buttons/CloseButton/README.md
similarity index 89%
rename from src/components/Buttons/CloseButton/README.md
rename to src/components/Forms/Buttons/CloseButton/README.md
index 482a72d..9cf0f4a 100644
--- a/src/components/Buttons/CloseButton/README.md
+++ b/src/components/Forms/Buttons/CloseButton/README.md
@@ -2,7 +2,7 @@
 
 [Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/forms-buttons-close-button--docs)
 
-[CloseButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Buttons/CloseButton/CloseButtonDemo.tsx)
+[CloseButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Forms/Buttons/CloseButton/CloseButtonDemo.tsx)
 
 ## Import
 
diff --git a/src/components/Buttons/CloseButton/index.tsx b/src/components/Forms/Buttons/CloseButton/index.tsx
similarity index 90%
rename from src/components/Buttons/CloseButton/index.tsx
rename to src/components/Forms/Buttons/CloseButton/index.tsx
index 688fb7c..787a7ca 100644
--- a/src/components/Buttons/CloseButton/index.tsx
+++ b/src/components/Forms/Buttons/CloseButton/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 
 import { StyledCloseButton } from './styled'
 import { CloseButtonProps } from './types'
-import { CloseIcon } from '../../icons'
+import { CloseIcon } from '../../../icons'
 
 const CloseButton = ({ disabled, ...rest }: CloseButtonProps) => (
   <StyledCloseButton
diff --git a/src/components/Buttons/CloseButton/styled.ts b/src/components/Forms/Buttons/CloseButton/styled.ts
similarity index 94%
rename from src/components/Buttons/CloseButton/styled.ts
rename to src/components/Forms/Buttons/CloseButton/styled.ts
index 637602e..2adb11c 100644
--- a/src/components/Buttons/CloseButton/styled.ts
+++ b/src/components/Forms/Buttons/CloseButton/styled.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { getThemedColor } from '../../../lib/theme'
+import { getThemedColor } from '../../../../lib/theme'
 import IconButton from '../IconButton'
 
 export const StyledCloseButton = styled(IconButton)`
diff --git a/src/components/Buttons/CloseButton/types.ts b/src/components/Forms/Buttons/CloseButton/types.ts
similarity index 100%
rename from src/components/Buttons/CloseButton/types.ts
rename to src/components/Forms/Buttons/CloseButton/types.ts
diff --git a/src/components/Buttons/IconButton/IconButton.stories.tsx b/src/components/Forms/Buttons/IconButton/IconButton.stories.tsx
similarity index 91%
rename from src/components/Buttons/IconButton/IconButton.stories.tsx
rename to src/components/Forms/Buttons/IconButton/IconButton.stories.tsx
index 28e47fc..ba487ac 100644
--- a/src/components/Buttons/IconButton/IconButton.stories.tsx
+++ b/src/components/Forms/Buttons/IconButton/IconButton.stories.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import IconButton from '.'
-import { ChevronDownIcon, MenuDotsIcon } from '../../icons'
+import { ChevronDownIcon, MenuDotsIcon } from '../../../icons'
 
 const meta = {
   title: 'Forms/Buttons/Icon Button',
diff --git a/src/components/Buttons/IconButton/IconButtonDemo.tsx b/src/components/Forms/Buttons/IconButton/IconButtonDemo.tsx
similarity index 76%
rename from src/components/Buttons/IconButton/IconButtonDemo.tsx
rename to src/components/Forms/Buttons/IconButton/IconButtonDemo.tsx
index bd6a4a2..6a04b84 100644
--- a/src/components/Buttons/IconButton/IconButtonDemo.tsx
+++ b/src/components/Forms/Buttons/IconButton/IconButtonDemo.tsx
@@ -1,5 +1,5 @@
-import { IconButton } from '../..'
-import { CheckIcon, InfoIcon, MenuDotsIcon } from '../../icons'
+import { IconButton } from '../../..'
+import { CheckIcon, InfoIcon, MenuDotsIcon } from '../../../icons'
 
 const IconButtonDemo = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
diff --git a/src/components/Buttons/IconButton/README.md b/src/components/Forms/Buttons/IconButton/README.md
similarity index 91%
rename from src/components/Buttons/IconButton/README.md
rename to src/components/Forms/Buttons/IconButton/README.md
index 93512cf..98b8cc3 100644
--- a/src/components/Buttons/IconButton/README.md
+++ b/src/components/Forms/Buttons/IconButton/README.md
@@ -2,7 +2,7 @@
 
 [Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/forms-buttons-icon-button--docs)
 
-[IconButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Buttons/IconButton/IconButtonDemo.tsx)
+[IconButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Forms/Buttons/IconButton/IconButtonDemo.tsx)
 
 ## Import
 
diff --git a/src/components/Buttons/IconButton/index.tsx b/src/components/Forms/Buttons/IconButton/index.tsx
similarity index 100%
rename from src/components/Buttons/IconButton/index.tsx
rename to src/components/Forms/Buttons/IconButton/index.tsx
diff --git a/src/components/Buttons/IconButton/styled.ts b/src/components/Forms/Buttons/IconButton/styled.ts
similarity index 94%
rename from src/components/Buttons/IconButton/styled.ts
rename to src/components/Forms/Buttons/IconButton/styled.ts
index d81a1b5..134c869 100644
--- a/src/components/Buttons/IconButton/styled.ts
+++ b/src/components/Forms/Buttons/IconButton/styled.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { Button } from '@chakra-ui/react'
-import { getThemedColor } from '../../../lib/theme'
+import { getThemedColor } from '../../../../lib/theme'
 
 export const StyledIconButton = styled(Button)`
   width: 20px !important;
diff --git a/src/components/Buttons/IconButton/types.ts b/src/components/Forms/Buttons/IconButton/types.ts
similarity index 100%
rename from src/components/Buttons/IconButton/types.ts
rename to src/components/Forms/Buttons/IconButton/types.ts
diff --git a/src/components/InlineMessage/index.tsx b/src/components/InlineMessage/index.tsx
index e938604..f5bfa1f 100644
--- a/src/components/InlineMessage/index.tsx
+++ b/src/components/InlineMessage/index.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react'
 
-import Button from '../Buttons/Button'
+import Button from '../Forms/Buttons/Button'
 import { InfoIcon } from '../icons'
 import {
   InfoWhiteInlineMessage,
diff --git a/src/components/Layer/LayerItem/index.tsx b/src/components/Layer/LayerItem/index.tsx
index a7ec376..6e8fe2b 100644
--- a/src/components/Layer/LayerItem/index.tsx
+++ b/src/components/Layer/LayerItem/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { Box } from '@chakra-ui/react'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 import Switch from '../../Switch'
 import Radio from '../../Radio'
 import { LayerItemProps } from './types'
diff --git a/src/components/Legend/LegendItem/index.tsx b/src/components/Legend/LegendItem/index.tsx
index 5f710b9..658450c 100644
--- a/src/components/Legend/LegendItem/index.tsx
+++ b/src/components/Legend/LegendItem/index.tsx
@@ -10,9 +10,9 @@ import {
   LegendItemLayerName,
   LegendItemButtonsContainer,
 } from './styled'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 import { ChevronDownIcon, CloseIcon, DotsIcon, InfoIcon } from '../../icons'
-import IconButton from '../../Buttons/IconButton'
+import IconButton from '../../Forms/Buttons/IconButton'
 import OpacityControl from '../OpacityControl'
 
 const LegendItem = ({
diff --git a/src/components/Legend/LegendPanel/DraggableItem.tsxaaa b/src/components/Legend/LegendPanel/DraggableItem.tsxaaa
new file mode 100644
index 0000000..d778d3c
--- /dev/null
+++ b/src/components/Legend/LegendPanel/DraggableItem.tsxaaa
@@ -0,0 +1,74 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { DraggableItemProps } from './types'
+
+type Props = {
+  item: DraggableItemProps
+  removeItem: (id: number) => void
+  forceDragging?: boolean
+}
+
+const DraggableItem = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  item,
+  removeItem,
+  forceDragging = false,
+}: Props) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: item.sequence,
+  })
+
+  const parentStyles = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition || undefined,
+    opacity: isDragging ? '0.4' : '1',
+    lineHeight: '4',
+  }
+
+  const draggableStyles = {
+    cursor: isDragging || forceDragging ? 'grabbing' : 'grab',
+  }
+
+  return (
+    <div style={parentStyles} ref={setNodeRef}>
+      <div
+        ref={setActivatorNodeRef}
+        className='flex-grow p-2'
+        style={draggableStyles}
+        {...attributes}
+        {...listeners}
+      >
+        {item.child}
+      </div>
+
+      <p>{item.sequence}</p>
+
+      <div
+        ref={setActivatorNodeRef}
+        className='flex-grow p-2'
+        style={draggableStyles}
+        {...attributes}
+        {...listeners}
+      >
+        <p>{item.id}</p>
+      </div>
+
+      <button type='button' onClick={() => removeItem(item.id)}>
+        X
+      </button>
+    </div>
+  )
+}
+
+export default DraggableItem
diff --git a/src/components/Legend/OpacityControl/index.tsx b/src/components/Legend/OpacityControl/index.tsx
index e3dd77a..e139bc5 100644
--- a/src/components/Legend/OpacityControl/index.tsx
+++ b/src/components/Legend/OpacityControl/index.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 
 import { Popover as ChakraPopover } from '@chakra-ui/react'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 import { InfoIcon } from '../../icons'
 import TextInput from '../../TextInput'
 import Slider from '../../Slider'
diff --git a/src/components/Legend/QualitativeLegend/index.tsx b/src/components/Legend/QualitativeLegend/index.tsx
index e9f295a..b422d53 100644
--- a/src/components/Legend/QualitativeLegend/index.tsx
+++ b/src/components/Legend/QualitativeLegend/index.tsx
@@ -13,7 +13,7 @@ import {
   RasterIndicator,
 } from './styled'
 import { HideIcon, ShowIcon } from '../../icons'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 
 const QualitativeLegend = ({
   type,
diff --git a/src/components/index.ts b/src/components/index.ts
index 9eac441..f7f4b36 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,5 @@
 export { default as Switch } from './Switch'
-export { default as Button } from './Buttons/Button'
+export { default as Button } from './Forms/Buttons/Button'
 export { default as NavigationRail } from './NavigationRail'
 export { default as Radio } from './Radio'
 export { default as RadioGroup } from './Radio/RadioGroup'
@@ -13,8 +13,8 @@ export { default as Tag } from './Tag'
 export { default as InlineMessage } from './InlineMessage'
 export { default as TextInput } from './TextInput'
 export { default as Textarea } from './Textarea'
-export { default as CloseButton } from './Buttons/CloseButton'
-export { default as IconButton } from './Buttons/IconButton'
+export { default as CloseButton } from './Forms/Buttons/CloseButton'
+export { default as IconButton } from './Forms/Buttons/IconButton'
 export { default as Slider } from './Slider'
 export { default as QualitativeLegend } from './Legend/QualitativeLegend'
 export { default as LayerParameters } from './Legend/LayerParameters'