diff --git a/README.md b/README.md
index 934ed9a..5e1030d 100644
--- a/README.md
+++ b/README.md
@@ -89,45 +89,55 @@ function App() {
 
 ## Components
 
-### General
-
-- [Inline Message](https://github.com/wri/wri-design-systems/tree/main/src/components/InlineMessage)
-- [Navigation Rail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
-- [Slider](https://github.com/wri/wri-design-systems/tree/main/src/components/Slider)
-- [Tab Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
-- [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)
+## Forms
 
 ### Buttons
 
 - [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/Button)
-- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/CloseButton)
 - [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)
 
 ### Controls
 
-- [Checkbox](https://github.com/wri/wri-design-systems/tree/main/src/components/Checkbox)
-- [Radio Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Radio)
 - [Switch](https://github.com/wri/wri-design-systems/tree/main/src/components/Switch)
+- [Radio Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Radio)
+- [Checkbox](https://github.com/wri/wri-design-systems/tree/main/src/components/Checkbox)
+- [Slider](https://github.com/wri/wri-design-systems/tree/main/src/components/Slider)
+
+### Tags
+- [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)
 
 ### Inputs
 
 - [Text Input](https://github.com/wri/wri-design-systems/tree/main/src/components/TextInput)
 - [Text Area](https://github.com/wri/wri-design-systems/tree/main/src/components/Textarea)
 
+## Navigation
+
+- [Tab Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
+- [Navigation Rail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
+
+## Status
+
+- [Inline Message](https://github.com/wri/wri-design-systems/tree/main/src/components/InlineMessage)
+
+## Geospatial
+
 ### Layers
 
-- [Layer Group](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerGroup)
 - [Layer Item](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerItem)
+- [Layer Group](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerGroup)
 - [Layer Panel](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerPanel)
 - [Layer Sidebar](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerSidebar)
 
-### Legend
+### Legends
 
+- [Qualitative Attributes](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/QualitativeLegend)
+- [Scale Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/ScaleBar)
 - [Layer Parameters](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LayerParameters)
 - [Legend Item](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendItem)
 - [Legend Panel](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendPanel)
-- [Qualitative Attributes](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/QualitativeLegend)
-- [Scale Legend](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/ScaleLegend)
+
 
 ## Building the lib
 
diff --git a/src/App.tsx b/src/App.tsx
index 62d65c4..aa917b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,7 +15,7 @@ import IconButtonDemo from './components/Buttons/IconButton/IconButtonDemo'
 import SliderDemo from './components/Slider/SliderDemo'
 import QualitativeDemo from './components/Legend/QualitativeLegend/QualitativeLegendDemo'
 import LayerParametersDemo from './components/Legend/LayerParameters/LayerParametersDemo'
-import ScaleLegendDemo from './components/Legend/ScaleLegend/ScaleLegendDemo'
+import ScaleBarDemo from './components/Legend/ScaleBar/ScaleBarDemo'
 import { LegendItemDemo } from './components/Legend/LegendItem/LegendItemDemo'
 import LegendPanelDemo from './components/Legend/LegendPanel/LegendPanelDemo'
 
@@ -33,7 +33,7 @@ const App = () => (
       >
         <LegendPanelDemo />
         <LegendItemDemo />
-        <ScaleLegendDemo />
+        <ScaleBarDemo />
         <LayerParametersDemo />
         <QualitativeDemo />
         <SliderDemo />
diff --git a/src/components/Buttons/Button/Button.stories.tsx b/src/components/Buttons/Button/Button.stories.tsx
index c41ce54..21b142b 100644
--- a/src/components/Buttons/Button/Button.stories.tsx
+++ b/src/components/Buttons/Button/Button.stories.tsx
@@ -7,7 +7,7 @@ import Button from '.'
 import { CheckIcon } from '../../icons'
 
 const meta = {
-  title: 'Buttons/Button',
+  title: 'Forms/Buttons/Button',
   component: Button,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Buttons/CloseButton/CloseButton.stories.tsx b/src/components/Buttons/CloseButton/CloseButton.stories.tsx
index 86494c7..4c67d5d 100644
--- a/src/components/Buttons/CloseButton/CloseButton.stories.tsx
+++ b/src/components/Buttons/CloseButton/CloseButton.stories.tsx
@@ -6,7 +6,7 @@ import { fn } from '@storybook/test'
 import CloseButton from '.'
 
 const meta = {
-  title: 'Buttons/Close Button',
+  title: 'Forms/Buttons/Close Button',
   component: CloseButton,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Buttons/IconButton/IconButton.stories.tsx b/src/components/Buttons/IconButton/IconButton.stories.tsx
index 90caf74..28e47fc 100644
--- a/src/components/Buttons/IconButton/IconButton.stories.tsx
+++ b/src/components/Buttons/IconButton/IconButton.stories.tsx
@@ -7,7 +7,7 @@ import IconButton from '.'
 import { ChevronDownIcon, MenuDotsIcon } from '../../icons'
 
 const meta = {
-  title: 'Buttons/Icon Button',
+  title: 'Forms/Buttons/Icon Button',
   component: IconButton,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index d5a4aa5..28632fd 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -7,7 +7,7 @@ import { Stack } from '@chakra-ui/react'
 import Checkbox from '.'
 
 const meta = {
-  title: 'Controls/Checkbox',
+  title: 'Forms/Controls/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',
diff --git a/src/components/InlineMessage/InlineMessage.stories.tsx b/src/components/InlineMessage/InlineMessage.stories.tsx
index cc437cf..4e555f7 100644
--- a/src/components/InlineMessage/InlineMessage.stories.tsx
+++ b/src/components/InlineMessage/InlineMessage.stories.tsx
@@ -6,7 +6,7 @@ import { fn } from '@storybook/test'
 import InlineMessage from '.'
 
 const meta = {
-  title: 'Inline Message',
+  title: 'Status/Inline Message',
   component: InlineMessage,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
index 4dde856..4b8d89e 100644
--- a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
+++ b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
@@ -6,7 +6,7 @@ import LayerGroupContainer from './LayerGroupContainer'
 import LayerGroup from '.'
 
 const meta = {
-  title: 'Layers/Layer Group',
+  title: 'Geospatial/Layers/Layer Group',
   component: LayerGroupContainer,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Layer/LayerItem/LayerItem.stories.tsx b/src/components/Layer/LayerItem/LayerItem.stories.tsx
index cd94eda..a67959f 100644
--- a/src/components/Layer/LayerItem/LayerItem.stories.tsx
+++ b/src/components/Layer/LayerItem/LayerItem.stories.tsx
@@ -6,7 +6,7 @@ import LayerItem from '.'
 import RadioGroup from '../../Radio/RadioGroup'
 
 const meta = {
-  title: 'Layers/Layer Item',
+  title: 'Geospatial/Layers/Layer Item',
   component: LayerItem,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Layer/LayerPanel/LayerPanel.stories.tsx b/src/components/Layer/LayerPanel/LayerPanel.stories.tsx
index 03b39c0..3a453b5 100644
--- a/src/components/Layer/LayerPanel/LayerPanel.stories.tsx
+++ b/src/components/Layer/LayerPanel/LayerPanel.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from '../LayerGroup/LayerGroupDemo'
 
 const meta = {
-  title: 'Layers/Layer Panel',
+  title: 'Geospatial/Layers/Layer Panel',
   component: LayerPanel,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx b/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx
index 5f975b1..7c06a4a 100644
--- a/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx
+++ b/src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx
@@ -6,7 +6,7 @@ import NavigationRail from '../../NavigationRail'
 import LayerPanelDemo from '../LayerPanel/LayerPanelDemo'
 
 const meta = {
-  title: 'Layers/Layer Sidebar',
+  title: 'Geospatial/Layers/Layer Sidebar',
   component: NavigationRail,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/Legend/LayerParameters/LayerParameters.stories.tsx b/src/components/Legend/LayerParameters/LayerParameters.stories.tsx
index b9e06a2..7b0d371 100644
--- a/src/components/Legend/LayerParameters/LayerParameters.stories.tsx
+++ b/src/components/Legend/LayerParameters/LayerParameters.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import LayerParametersStory from '.'
 
 const meta = {
-  title: 'Legend/Layer Parameters',
+  title: 'Geospatial/Legends/Layer Parameters',
   component: LayerParametersStory,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Legend/LegendItem/LegendItem.stories.tsx b/src/components/Legend/LegendItem/LegendItem.stories.tsx
index dc6eeed..6a670af 100644
--- a/src/components/Legend/LegendItem/LegendItem.stories.tsx
+++ b/src/components/Legend/LegendItem/LegendItem.stories.tsx
@@ -4,13 +4,13 @@ import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
 import LegendItemStory from '.'
-import ScaleLegend from '../ScaleLegend'
+import ScaleBar from '../ScaleBar'
 import QualitativeLegend from '../QualitativeLegend'
 import InlineMessage from '../../InlineMessage'
 import LayerParameters from '../LayerParameters'
 
 const meta = {
-  title: 'Legend/Legend Item',
+  title: 'Geospatial/Legends/Legend Item',
   component: LegendItemStory,
   parameters: {
     layout: 'centered',
@@ -43,7 +43,7 @@ export const LegendItem: Story = {
   render: function Render(args) {
     return (
       <LegendItemStory {...args}>
-        <ScaleLegend
+        <ScaleBar
           colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
           values={['0%', '25%', '50%', '75%', '100%']}
         />
diff --git a/src/components/Legend/LegendItem/LegendItemDemo.tsx b/src/components/Legend/LegendItem/LegendItemDemo.tsx
index 4071ffe..08776ed 100644
--- a/src/components/Legend/LegendItem/LegendItemDemo.tsx
+++ b/src/components/Legend/LegendItem/LegendItemDemo.tsx
@@ -7,7 +7,7 @@ import {
   LayerParameters,
   LegendItem,
   QualitativeLegend,
-  ScaleLegend,
+  ScaleBar,
 } from '../..'
 
 export const LegendItemDemo = ({
@@ -30,7 +30,7 @@ export const LegendItemDemo = ({
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
     >
-      <ScaleLegend
+      <ScaleBar
         colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
         values={['0%', '25%', '50%', '75%', '100%']}
       />
@@ -84,7 +84,7 @@ export const LegendItemDemo2 = ({
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
     >
-      <ScaleLegend
+      <ScaleBar
         colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
         values={['0%', '25%', '50%', '75%', '100%']}
       />
@@ -137,7 +137,7 @@ export const LegendItemDemo3 = ({
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
     >
-      <ScaleLegend
+      <ScaleBar
         colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
         values={['0%', '25%', '50%', '75%', '100%']}
       />
diff --git a/src/components/Legend/LegendItem/README.md b/src/components/Legend/LegendItem/README.md
index 6c95ae6..0f4de94 100644
--- a/src/components/Legend/LegendItem/README.md
+++ b/src/components/Legend/LegendItem/README.md
@@ -13,7 +13,7 @@ import {
   LayerParameters,
   LegendItem,
   QualitativeLegend,
-  ScaleLegend,
+  ScaleBar,
 } from '@worldresources/wri-design-systems'
 ```
 
@@ -30,7 +30,7 @@ import {
   onInfoClick={() => console.log('info')}
   onOpacityChanged={(value) => console.log('opacity changed', value)}
 >
-  <ScaleLegend
+  <ScaleBar
     colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
     values={['0%', '25%', '50%', '75%', '100%']}
   />
diff --git a/src/components/Legend/LegendPanel/LegendItem.stories.tsx b/src/components/Legend/LegendPanel/LegendItem.stories.tsx
index 6f2f2b8..7643d53 100644
--- a/src/components/Legend/LegendPanel/LegendItem.stories.tsx
+++ b/src/components/Legend/LegendPanel/LegendItem.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from '../LegendItem/LegendItemDemo'
 
 const meta = {
-  title: 'Legend/Legend Panel',
+  title: 'Geospatial/Legends/Legend Panel',
   component: LegendPanelStory,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx b/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx
index 5bfa6ed..da449be 100644
--- a/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx
+++ b/src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx
@@ -7,7 +7,7 @@ import QualitativeLegend from '.'
 import { InfoIcon } from '../../icons'
 
 const meta = {
-  title: 'Legend/Qualitative Attributes',
+  title: 'Geospatial/Legends/Qualitative Attributes',
   component: QualitativeLegend,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Legend/ScaleLegend/README.md b/src/components/Legend/ScaleBar/README.md
similarity index 77%
rename from src/components/Legend/ScaleLegend/README.md
rename to src/components/Legend/ScaleBar/README.md
index 384d93f..a6ec6c4 100644
--- a/src/components/Legend/ScaleLegend/README.md
+++ b/src/components/Legend/ScaleBar/README.md
@@ -1,19 +1,19 @@
-# ScaleLegend
+# ScaleBar
 
-[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/legend-scale-legend--docs)
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/legend-scale-bar--docs)
 
-[ScaleLegendDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Legend/ScaleLegend/ScaleLegendDemo.tsx)
+[ScaleBarDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Legend/ScaleBar/ScaleBarDemo.tsx)
 
 ## Import
 
 ```js
-import { ScaleLegend } from '@worldresources/wri-design-systems'
+import { ScaleBar } from '@worldresources/wri-design-systems'
 ```
 
 ## Usage
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#E5F5F9', '#2CA25F']}
   values={['Low', 'Medium', 'High']}
   subLabels={['<100K', '>600K']}
@@ -23,7 +23,7 @@ import { ScaleLegend } from '@worldresources/wri-design-systems'
 ## Props
 
 ```ts
-type ScaleLegendProps = {
+type ScaleBarProps = {
   colors: string[]
   values: string[]
   subLabels?: string[]
@@ -34,7 +34,7 @@ type ScaleLegendProps = {
 ## Gradient
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#E5F5F9', '#2CA25F']}
   values={['Low', 'Medium', 'High']}
   subLabels={['<100K', '>600K']}
@@ -45,7 +45,7 @@ type ScaleLegendProps = {
 ## Sequential
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
   values={['0%', '25%', '50%', '75%', '100%']}
 />
@@ -54,7 +54,7 @@ type ScaleLegendProps = {
 ## Diverging
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#A6611A', '#DFC27D', '#F5F5F5', '#80CDC1', '#018571']}
   values={['0%', '25%', '50%', '75%', '100%']}
 />
@@ -63,7 +63,7 @@ type ScaleLegendProps = {
 ## WithSubLabels
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#A6611A', '#DFC27D', '#F5F5F5', '#80CDC1', '#018571']}
   values={['Low', 'Low-medium', 'Medium-high', 'High', 'Extremely high']}
   subLabels={['(0 to 9 in 1,000,000)', '(9 in 1,000,000 to 7 in 100,000)', '(7 in 100,000 to 3 in 10,000)', '(3 in 10,000 to 2 in 1,000)', '(more than 2 in 1,000)']}
diff --git a/src/components/Legend/ScaleLegend/ScaleLegend.stories.tsx b/src/components/Legend/ScaleBar/ScaleBar.stories.tsx
similarity index 90%
rename from src/components/Legend/ScaleLegend/ScaleLegend.stories.tsx
rename to src/components/Legend/ScaleBar/ScaleBar.stories.tsx
index e58068d..51e4240 100644
--- a/src/components/Legend/ScaleLegend/ScaleLegend.stories.tsx
+++ b/src/components/Legend/ScaleBar/ScaleBar.stories.tsx
@@ -2,11 +2,11 @@
 import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
-import ScaleLegend from '.'
+import ScaleBar from '.'
 
 const meta = {
-  title: 'Legend/Scale Legend',
-  component: ScaleLegend,
+  title: 'Geospatial/Legends/Scale Bar',
+  component: ScaleBar,
   parameters: {
     layout: 'centered',
   },
@@ -18,7 +18,7 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof ScaleLegend>
+} satisfies Meta<typeof ScaleBar>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/src/components/Legend/ScaleLegend/ScaleLegendDemo.tsx b/src/components/Legend/ScaleBar/ScaleBarDemo.tsx
similarity index 83%
rename from src/components/Legend/ScaleLegend/ScaleLegendDemo.tsx
rename to src/components/Legend/ScaleBar/ScaleBarDemo.tsx
index c139bce..eaa43ea 100644
--- a/src/components/Legend/ScaleLegend/ScaleLegendDemo.tsx
+++ b/src/components/Legend/ScaleBar/ScaleBarDemo.tsx
@@ -1,22 +1,22 @@
-import { ScaleLegend } from '../..'
+import { ScaleBar } from '../..'
 
-const ScaleLegendDemo = () => (
+const ScaleBarDemo = () => (
   <div style={{ width: '238px' }}>
-    <ScaleLegend
+    <ScaleBar
       colors={['#E5F5F9', '#2CA25F']}
       values={['Low', 'Medium', 'High']}
       subLabels={['<100K', '>600K']}
       isGradient
     />
-    <ScaleLegend
+    <ScaleBar
       colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
       values={['0%', '25%', '50%', '75%', '100%']}
     />
-    <ScaleLegend
+    <ScaleBar
       colors={['#A6611A', '#DFC27D', '#F5F5F5', '#80CDC1', '#018571']}
       values={['0%', '25%', '50%', '75%', '100%']}
     />
-    <ScaleLegend
+    <ScaleBar
       colors={['#A6611A', '#DFC27D', '#F5F5F5', '#80CDC1', '#018571']}
       values={['Low', 'Low-medium', 'Medium-high', 'High', 'Extremely high']}
       subLabels={[
@@ -30,4 +30,4 @@ const ScaleLegendDemo = () => (
   </div>
 )
 
-export default ScaleLegendDemo
+export default ScaleBarDemo
diff --git a/src/components/Legend/ScaleLegend/index.tsx b/src/components/Legend/ScaleBar/index.tsx
similarity index 64%
rename from src/components/Legend/ScaleLegend/index.tsx
rename to src/components/Legend/ScaleBar/index.tsx
index 390e63c..703a1c4 100644
--- a/src/components/Legend/ScaleLegend/index.tsx
+++ b/src/components/Legend/ScaleBar/index.tsx
@@ -2,14 +2,14 @@
 import React from 'react'
 
 import {
-  ScaleLegendGradientBar,
-  ScaleLegendContainer,
-  ScaleLegendLabelContainer,
-  ScaleLegendSubLabels,
-  ScaleLegendValue,
-  ScaleLegendBar,
+  ScaleBarGradientBar,
+  ScaleBarContainer,
+  ScaleBarLabelContainer,
+  ScaleBarSubLabels,
+  ScaleBarValue,
+  ScaleBarBar,
 } from './styled'
-import { ScaleLegendProps } from './types'
+import { ScaleBarProps } from './types'
 
 const generateGradient = (colors: string[]) => {
   const percentages = colors.map((_, index) => {
@@ -20,26 +20,26 @@ const generateGradient = (colors: string[]) => {
   return `linear-gradient(to right, ${colors.map((color, index) => `${color} ${percentages[index]}`).join(', ')})`
 }
 
-const ScaleLegend = ({
+const ScaleBar = ({
   colors,
   values,
   subLabels,
   isGradient,
-}: ScaleLegendProps) => (
-  <ScaleLegendContainer>
+}: ScaleBarProps) => (
+  <ScaleBarContainer>
     {isGradient ? (
-      <ScaleLegendGradientBar gradient={generateGradient(colors)} />
+      <ScaleBarGradientBar gradient={generateGradient(colors)} />
     ) : (
-      <ScaleLegendBar>
+      <ScaleBarBar>
         {colors?.map((color, idx) => (
           <div
             key={`${color}-${values?.[idx]}`}
             style={{ backgroundColor: color, width: '100%', height: '100%' }}
           />
         ))}
-      </ScaleLegendBar>
+      </ScaleBarBar>
     )}
-    <ScaleLegendLabelContainer>
+    <ScaleBarLabelContainer>
       {values?.map((value) => (
         <div
           style={{
@@ -48,12 +48,12 @@ const ScaleLegend = ({
             justifyContent: 'center',
           }}
         >
-          <ScaleLegendValue key={value}>{value}</ScaleLegendValue>
+          <ScaleBarValue key={value}>{value}</ScaleBarValue>
         </div>
       ))}
-    </ScaleLegendLabelContainer>
+    </ScaleBarLabelContainer>
     {subLabels && subLabels.length ? (
-      <ScaleLegendLabelContainer>
+      <ScaleBarLabelContainer>
         {subLabels.map((subLabel) => (
           <div
             style={{
@@ -62,14 +62,14 @@ const ScaleLegend = ({
               justifyContent: 'center',
             }}
           >
-            <ScaleLegendSubLabels key={subLabel} style={{ width: '100%' }}>
+            <ScaleBarSubLabels key={subLabel} style={{ width: '100%' }}>
               {subLabel}
-            </ScaleLegendSubLabels>
+            </ScaleBarSubLabels>
           </div>
         ))}
-      </ScaleLegendLabelContainer>
+      </ScaleBarLabelContainer>
     ) : null}
-  </ScaleLegendContainer>
+  </ScaleBarContainer>
 )
 
-export default ScaleLegend
+export default ScaleBar
diff --git a/src/components/Legend/ScaleLegend/styled.ts b/src/components/Legend/ScaleBar/styled.ts
similarity index 78%
rename from src/components/Legend/ScaleLegend/styled.ts
rename to src/components/Legend/ScaleBar/styled.ts
index 1942f57..b828375 100644
--- a/src/components/Legend/ScaleLegend/styled.ts
+++ b/src/components/Legend/ScaleBar/styled.ts
@@ -1,14 +1,14 @@
 import styled from '@emotion/styled'
 import { getThemedColor } from '../../../lib/theme'
 
-export const ScaleLegendContainer = styled.div`
+export const ScaleBarContainer = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   margin-bottom: 16px;
 `
 
-export const ScaleLegendGradientBar = styled.div<{ gradient: string }>`
+export const ScaleBarGradientBar = styled.div<{ gradient: string }>`
   height: 20px;
   width: 100%;
   margin-bottom: 8px;
@@ -17,7 +17,7 @@ export const ScaleLegendGradientBar = styled.div<{ gradient: string }>`
   ${({ gradient }) => (gradient ? `background: ${gradient};` : '')}
 `
 
-export const ScaleLegendBar = styled.div`
+export const ScaleBarBar = styled.div`
   height: 20px;
   width: 100%;
   margin-bottom: 8px;
@@ -37,13 +37,13 @@ export const ScaleLegendBar = styled.div`
   }
 `
 
-export const ScaleLegendLabelContainer = styled.div`
+export const ScaleBarLabelContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 `
 
-export const ScaleLegendValue = styled.p`
+export const ScaleBarValue = styled.p`
   width: 100%;
   font-size: 12px;
   line-height: 16px;
@@ -52,7 +52,7 @@ export const ScaleLegendValue = styled.p`
   text-align: center;
 `
 
-export const ScaleLegendSubLabels = styled.p`
+export const ScaleBarSubLabels = styled.p`
   font-size: 12px;
   line-height: 16px;
   font-weight: 400;
diff --git a/src/components/Legend/ScaleLegend/types.ts b/src/components/Legend/ScaleBar/types.ts
similarity index 72%
rename from src/components/Legend/ScaleLegend/types.ts
rename to src/components/Legend/ScaleBar/types.ts
index 091f5a1..0242fc4 100644
--- a/src/components/Legend/ScaleLegend/types.ts
+++ b/src/components/Legend/ScaleBar/types.ts
@@ -1,4 +1,4 @@
-export type ScaleLegendProps = {
+export type ScaleBarProps = {
   colors: string[]
   values: string[]
   subLabels?: string[]
diff --git a/src/components/NavigationRail/NavigationRail.stories.tsx b/src/components/NavigationRail/NavigationRail.stories.tsx
index e040da9..4d21edf 100644
--- a/src/components/NavigationRail/NavigationRail.stories.tsx
+++ b/src/components/NavigationRail/NavigationRail.stories.tsx
@@ -7,7 +7,7 @@ import NavigationRail from '.'
 import { CheckIcon } from '../icons'
 
 const meta = {
-  title: 'Navigation Rail',
+  title: 'Navigation/Navigation Rail',
   component: NavigationRail,
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/Radio/Radio.stories.tsx b/src/components/Radio/Radio.stories.tsx
index 5b97b3e..1d96e17 100644
--- a/src/components/Radio/Radio.stories.tsx
+++ b/src/components/Radio/Radio.stories.tsx
@@ -7,7 +7,7 @@ import Radio from '.'
 import RadioGroup from './RadioGroup'
 
 const meta = {
-  title: 'Controls/Radio Button',
+  title: 'Forms/Controls/Radio Button',
   component: RadioGroup,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 703f770..eb33605 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import Slider from '.'
 
 const meta = {
-  title: 'Slider',
+  title: 'Forms/Controls/Slider',
   component: Slider,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Switch/Switch.stories.ts b/src/components/Switch/Switch.stories.ts
index 6426290..aee1b54 100644
--- a/src/components/Switch/Switch.stories.ts
+++ b/src/components/Switch/Switch.stories.ts
@@ -3,7 +3,7 @@ import { fn } from '@storybook/test'
 import Switch from '.'
 
 const meta = {
-  title: 'Controls/Switch',
+  title: 'Forms/Controls/Switch',
   component: Switch,
   parameters: {
     layout: 'centered',
diff --git a/src/components/TabBar/TabBar.stories.tsx b/src/components/TabBar/TabBar.stories.tsx
index 6071b0d..494adcb 100644
--- a/src/components/TabBar/TabBar.stories.tsx
+++ b/src/components/TabBar/TabBar.stories.tsx
@@ -6,7 +6,7 @@ import TabBar from '.'
 import { CheckIcon } from '../icons'
 
 const meta = {
-  title: 'Tab Bar',
+  title: 'Navigation/Tab Bar',
   component: TabBar,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index 0f3b40b..70aa84e 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/src/components/Tag/Tag.stories.tsx
@@ -7,7 +7,7 @@ import Tag from '.'
 import { InfoIcon } from '../icons'
 
 const meta = {
-  title: 'Tag',
+  title: 'Forms/Tag',
   component: Tag,
   parameters: {
     layout: 'centered',
diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
index 0add003..26750db 100644
--- a/src/components/TextInput/TextInput.stories.tsx
+++ b/src/components/TextInput/TextInput.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import TextInput from '.'
 
 const meta = {
-  title: 'Inputs/Text Input',
+  title: 'Forms/Inputs/Text Input',
   component: TextInput,
   parameters: {
     layout: 'centered',
diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
index fa2eed1..00bb980 100644
--- a/src/components/Textarea/Textarea.stories.tsx
+++ b/src/components/Textarea/Textarea.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import Textarea from '.'
 
 const meta = {
-  title: 'Inputs/Text Area',
+  title: 'Forms/Inputs/Text Area',
   component: Textarea,
   parameters: {
     layout: 'centered',
diff --git a/src/components/index.ts b/src/components/index.ts
index 9ab18ef..a7a8dcf 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -18,6 +18,6 @@ export { default as IconButton } from './Buttons/IconButton'
 export { default as Slider } from './Slider'
 export { default as QualitativeLegend } from './Legend/QualitativeLegend'
 export { default as LayerParameters } from './Legend/LayerParameters'
-export { default as ScaleLegend } from './Legend/ScaleLegend'
+export { default as ScaleBar } from './Legend/ScaleBar'
 export { default as LegendItem } from './Legend/LegendItem'
 export { default as LegendPanel } from './Legend/LegendPanel'