diff --git a/components/Breadcrumbs.test.js b/components/Breadcrumbs/Breadcrumbs.test.js
similarity index 98%
rename from components/Breadcrumbs.test.js
rename to components/Breadcrumbs/Breadcrumbs.test.js
index ed26bfaeb..18c5b9086 100644
--- a/components/Breadcrumbs.test.js
+++ b/components/Breadcrumbs/Breadcrumbs.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Breadcrumbs from './Breadcrumbs.tsx'
+import Breadcrumbs from './Breadcrumbs'
 
 // Imported to be able to use expect(...).toBeInTheDocument()
 import '@testing-library/jest-dom'
diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs/Breadcrumbs.tsx
similarity index 97%
rename from components/Breadcrumbs.tsx
rename to components/Breadcrumbs/Breadcrumbs.tsx
index 93f1168c6..985dc2ae7 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import styles from '../scss/breadcrumbs.module.scss'
+import styles from './breadcrumbs.module.scss'
 import { Dropdown } from 'react-bootstrap'
-import { GetAppQuery } from '../graphql'
+import { GetAppQuery } from '../../graphql'
 import { ChevronRightIcon } from '@primer/octicons-react'
 import { lowerCase } from 'lodash'
 
diff --git a/scss/breadcrumbs.module.scss b/components/Breadcrumbs/breadcrumbs.module.scss
similarity index 96%
rename from scss/breadcrumbs.module.scss
rename to components/Breadcrumbs/breadcrumbs.module.scss
index 2877b5419..55d66599f 100644
--- a/scss/breadcrumbs.module.scss
+++ b/components/Breadcrumbs/breadcrumbs.module.scss
@@ -1,4 +1,4 @@
-@use './_variables.module';
+@use '../../scss/_variables.module';
 
 @mixin flexRow {
   display: flex;
diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx
new file mode 100644
index 000000000..04223fc92
--- /dev/null
+++ b/components/Breadcrumbs/index.tsx
@@ -0,0 +1 @@
+export { default } from './Breadcrumbs'
diff --git a/components/Card.tsx b/components/Card/Card.tsx
similarity index 100%
rename from components/Card.tsx
rename to components/Card/Card.tsx
diff --git a/components/Card/index.tsx b/components/Card/index.tsx
new file mode 100644
index 000000000..95cfda28e
--- /dev/null
+++ b/components/Card/index.tsx
@@ -0,0 +1 @@
+export { default } from './Card'
diff --git a/components/ChallengeMaterial.test.js b/components/ChallengeMaterial/ChallengeMaterial.test.js
similarity index 94%
rename from components/ChallengeMaterial.test.js
rename to components/ChallengeMaterial/ChallengeMaterial.test.js
index 1c9a65918..451be03f7 100644
--- a/components/ChallengeMaterial.test.js
+++ b/components/ChallengeMaterial/ChallengeMaterial.test.js
@@ -9,23 +9,23 @@ import {
   within
 } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { mockUseBreakpoint } from '../__mocks__/useBreakpoint.mock'
-import ChallengeMaterial from './ChallengeMaterial'
+import { mockUseBreakpoint } from '../../__mocks__/useBreakpoint.mock'
+import ChallengeMaterial from '.'
 import { MockedProvider } from '@apollo/client/testing'
-import ADD_COMMENT from '../graphql/queries/addComment'
-import SET_STAR from '../graphql/queries/setStar'
-import GET_PREVIOUS_SUBMISSIONS from '../graphql/queries/getPreviousSubmissions'
-import GET_LESSON_MENTORS from '../graphql/queries/getLessonMentors'
-import lessonMentorsData from '../__dummy__/getLessonMentorsData'
+import ADD_COMMENT from '../../graphql/queries/addComment'
+import SET_STAR from '../../graphql/queries/setStar'
+import GET_PREVIOUS_SUBMISSIONS from '../../graphql/queries/getPreviousSubmissions'
+import GET_LESSON_MENTORS from '../../graphql/queries/getLessonMentors'
+import lessonMentorsData from '../../__dummy__/getLessonMentorsData'
 import '@testing-library/jest-dom'
-import { SubmissionStatus } from '../graphql'
-import getPreviousSubmissionsData from '../__dummy__/getPreviousSubmissionsData'
-import dummySessionData from '../__dummy__/sessionData'
-import { ContextProvider, GlobalContext } from '../helpers/globalContext'
+import { SubmissionStatus } from '../../graphql'
+import getPreviousSubmissionsData from '../../__dummy__/getPreviousSubmissionsData'
+import dummySessionData from '../../__dummy__/sessionData'
+import { ContextProvider, GlobalContext } from '../../helpers/globalContext'
 import _ from 'lodash'
 
-jest.mock('../helpers/updateCache')
-import { updateCache } from '../helpers/updateCache'
+jest.mock('../../helpers/updateCache')
+import { updateCache } from '../../helpers/updateCache'
 
 jest.useFakeTimers('modern').setSystemTime(new Date('2000-11-22').getTime())
 
diff --git a/components/ChallengeMaterial.tsx b/components/ChallengeMaterial/ChallengeMaterial.tsx
similarity index 95%
rename from components/ChallengeMaterial.tsx
rename to components/ChallengeMaterial/ChallengeMaterial.tsx
index 5f444e9c4..ff3a01d02 100644
--- a/components/ChallengeMaterial.tsx
+++ b/components/ChallengeMaterial/ChallengeMaterial.tsx
@@ -10,26 +10,26 @@ import {
   Submission,
   UserLesson,
   useGetPreviousSubmissionsQuery
-} from '../graphql/index'
-import NavLink from './NavLink'
+} from '../../graphql/index'
+import NavLink from '../NavLink'
 import Markdown from 'markdown-to-jsx'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
-import { GiveStarCard } from '../components/GiveStarCard'
+import { GiveStarCard } from '../GiveStarCard'
 import _ from 'lodash'
 import Modal from 'react-bootstrap/Modal'
-import { SubmissionStatus, useAddCommentMutation } from '../graphql'
-import DiffView from './DiffView'
-import { Button } from './theme/Button'
-import { MdInput } from './MdInput'
-import { updateCache } from '../helpers/updateCache'
-import { GlobalContext } from '../helpers/globalContext'
-import { SubmissionComments } from './SubmissionComments'
-import { SelectIteration } from './SelectIteration'
-import Error, { StatusCode } from './Error'
-import { ReviewStatus } from './ReviewStatus'
-import useBreakpoint from '../helpers/useBreakpoint'
+import { SubmissionStatus, useAddCommentMutation } from '../../graphql'
+import DiffView from '../DiffView'
+import { Button } from '../theme/Button'
+import { MdInput } from '../MdInput'
+import { updateCache } from '../../helpers/updateCache'
+import { GlobalContext } from '../../helpers/globalContext'
+import { SubmissionComments } from '../SubmissionComments'
+import { SelectIteration } from '../SelectIteration'
+import Error, { StatusCode } from '../Error'
+import { ReviewStatus } from '../ReviewStatus'
+import useBreakpoint from '../../helpers/useBreakpoint'
 dayjs.extend(relativeTime)
 dayjs.extend(LocalizedFormat)
 
diff --git a/components/__snapshots__/ChallengeMaterial.test.js.snap b/components/ChallengeMaterial/__snapshots__/ChallengeMaterial.test.js.snap
similarity index 100%
rename from components/__snapshots__/ChallengeMaterial.test.js.snap
rename to components/ChallengeMaterial/__snapshots__/ChallengeMaterial.test.js.snap
diff --git a/components/ChallengeMaterial/index.tsx b/components/ChallengeMaterial/index.tsx
new file mode 100644
index 000000000..23c744a53
--- /dev/null
+++ b/components/ChallengeMaterial/index.tsx
@@ -0,0 +1 @@
+export { default } from './ChallengeMaterial'
diff --git a/stories/components/ChallengeQuestionCard.stories.tsx b/stories/components/ChallengeQuestionCard.stories.tsx
index 5cbdb5dd2..4e1c0a80d 100644
--- a/stories/components/ChallengeQuestionCard.stories.tsx
+++ b/stories/components/ChallengeQuestionCard.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ChallengeQuestionCard } from '../../components/ChallengeMaterial'
+import { ChallengeQuestionCard } from '../../components/ChallengeMaterial/ChallengeMaterial'
 import { MockedProvider } from '@apollo/client/testing'
 
 export default {
diff --git a/stories/components/ChallengeTitleCard.stories.tsx b/stories/components/ChallengeTitleCard.stories.tsx
index e1ba8ec97..55531c203 100644
--- a/stories/components/ChallengeTitleCard.stories.tsx
+++ b/stories/components/ChallengeTitleCard.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { action } from '@storybook/addon-actions'
-import { ChallengeTitleCard } from '../../components/ChallengeMaterial'
+import { ChallengeTitleCard } from '../../components/ChallengeMaterial/ChallengeMaterial'
 
 export default {
   component: ChallengeTitleCard,
diff --git a/stories/components/ChallengesCompletedCard.stories.tsx b/stories/components/ChallengesCompletedCard.stories.tsx
index 2ee41f814..53ba9a724 100644
--- a/stories/components/ChallengesCompletedCard.stories.tsx
+++ b/stories/components/ChallengesCompletedCard.stories.tsx
@@ -1,6 +1,6 @@
 import { MockedProvider } from '@apollo/client/testing'
 import * as React from 'react'
-import { ChallengesCompletedCard } from '../../components/ChallengeMaterial'
+import { ChallengesCompletedCard } from '../../components/ChallengeMaterial/ChallengeMaterial'
 import SET_STAR from '../../graphql/queries/setStar'
 import GET_LESSON_MENTORS from '../../graphql/queries/getLessonMentors'
 import lessonMentorsData from '../../__dummy__/getLessonMentorsData'