diff --git a/components/CopyButton.test.js b/components/CopyButton/CopyButton.test.js
similarity index 100%
rename from components/CopyButton.test.js
rename to components/CopyButton/CopyButton.test.js
diff --git a/components/CopyButton.tsx b/components/CopyButton/CopyButton.tsx
similarity index 94%
rename from components/CopyButton.tsx
rename to components/CopyButton/CopyButton.tsx
index 1faa23f02..341ff8900 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton/CopyButton.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { Button } from './theme/Button'
+import { Button } from '../theme/Button'
 import { AlertIcon, CheckIcon, CopyIcon } from '@primer/octicons-react'
 import * as Sentry from '@sentry/react'
-import { ColorTypes } from './theme/colors'
+import { ColorTypes } from '../theme/colors'
 
 enum State {
   NotCopied,
diff --git a/components/__snapshots__/CopyButton.test.js.snap b/components/CopyButton/__snapshots__/CopyButton.test.js.snap
similarity index 100%
rename from components/__snapshots__/CopyButton.test.js.snap
rename to components/CopyButton/__snapshots__/CopyButton.test.js.snap
diff --git a/components/CopyButton/index.tsx b/components/CopyButton/index.tsx
new file mode 100644
index 000000000..50b84b6ae
--- /dev/null
+++ b/components/CopyButton/index.tsx
@@ -0,0 +1 @@
+export { default } from './CopyButton'
diff --git a/components/DiscordBar.test.js b/components/DiscordBar/DiscordBar.test.js
similarity index 100%
rename from components/DiscordBar.test.js
rename to components/DiscordBar/DiscordBar.test.js
diff --git a/components/DiscordBar.tsx b/components/DiscordBar/DiscordBar.tsx
similarity index 98%
rename from components/DiscordBar.tsx
rename to components/DiscordBar/DiscordBar.tsx
index be94b0667..d3986f057 100644
--- a/components/DiscordBar.tsx
+++ b/components/DiscordBar/DiscordBar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import styles from '../scss/discordBar.module.scss'
+import styles from './discordBar.module.scss'
 type Member = {
   id: string
   username: string
diff --git a/components/__snapshots__/DiscordBar.test.js.snap b/components/DiscordBar/__snapshots__/DiscordBar.test.js.snap
similarity index 100%
rename from components/__snapshots__/DiscordBar.test.js.snap
rename to components/DiscordBar/__snapshots__/DiscordBar.test.js.snap
diff --git a/scss/discordBar.module.scss b/components/DiscordBar/discordBar.module.scss
similarity index 100%
rename from scss/discordBar.module.scss
rename to components/DiscordBar/discordBar.module.scss
diff --git a/components/DiscordBar/index.tsx b/components/DiscordBar/index.tsx
new file mode 100644
index 000000000..a2c746cdb
--- /dev/null
+++ b/components/DiscordBar/index.tsx
@@ -0,0 +1 @@
+export { default } from './DiscordBar'
diff --git a/components/DropdownMenu.test.js b/components/DropdownMenu/DropdownMenu.test.js
similarity index 100%
rename from components/DropdownMenu.test.js
rename to components/DropdownMenu/DropdownMenu.test.js
diff --git a/components/DropdownMenu.tsx b/components/DropdownMenu/DropdownMenu.tsx
similarity index 97%
rename from components/DropdownMenu.tsx
rename to components/DropdownMenu/DropdownMenu.tsx
index 828aed5d3..f7e5d4c75 100644
--- a/components/DropdownMenu.tsx
+++ b/components/DropdownMenu/DropdownMenu.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Dropdown from 'react-bootstrap/Dropdown'
-import styles from '../scss/dropDown.module.scss'
+import styles from './dropdownMenu.module.scss'
 import { DropDirection } from 'react-bootstrap/esm/DropdownContext'
 import { ChevronRightIcon } from '@primer/octicons-react'
 
diff --git a/components/__snapshots__/DropdownMenu.test.js.snap b/components/DropdownMenu/__snapshots__/DropdownMenu.test.js.snap
similarity index 100%
rename from components/__snapshots__/DropdownMenu.test.js.snap
rename to components/DropdownMenu/__snapshots__/DropdownMenu.test.js.snap
diff --git a/scss/dropDown.module.scss b/components/DropdownMenu/dropdownMenu.module.scss
similarity index 95%
rename from scss/dropDown.module.scss
rename to components/DropdownMenu/dropdownMenu.module.scss
index e43d5da54..9390675e5 100644
--- a/scss/dropDown.module.scss
+++ b/components/DropdownMenu/dropdownMenu.module.scss
@@ -1,6 +1,6 @@
 @use 'sass:color';
-@use '_variables.module.scss';
-@import 'colors.module.scss';
+@use '../../scss/variables.module.scss';
+@import '../../scss/colors.module.scss';
 
 .dropdown {
   display: flex;
diff --git a/components/DropdownMenu/index.tsx b/components/DropdownMenu/index.tsx
new file mode 100644
index 000000000..ca9eec800
--- /dev/null
+++ b/components/DropdownMenu/index.tsx
@@ -0,0 +1 @@
+export { type Item, DropdownMenu } from './DropdownMenu'