diff --git a/components/ProfileStarComments.tsx b/components/ProfileStarComments/ProfileStarComments.tsx
similarity index 95%
rename from components/ProfileStarComments.tsx
rename to components/ProfileStarComments/ProfileStarComments.tsx
index 6a3f08e64e..c8c70a99ad 100644
--- a/components/ProfileStarComments.tsx
+++ b/components/ProfileStarComments/ProfileStarComments.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Star as StarType } from '../graphql/index'
+import { Star as StarType } from '../../graphql/index'
 import { Star as StarIcon } from 'react-feather'
 import _ from 'lodash'
-import styles from '../scss/profileStarComments.module.scss'
+import styles from './profileStarComments.module.scss'
 
 type StarCommentsProps = {
   stars: StarType[]
diff --git a/components/ProfileStarComments/index.tsx b/components/ProfileStarComments/index.tsx
new file mode 100644
index 0000000000..4df16daf4e
--- /dev/null
+++ b/components/ProfileStarComments/index.tsx
@@ -0,0 +1 @@
+export { default } from './ProfileStarComments'
diff --git a/scss/profileStarComments.module.scss b/components/ProfileStarComments/profileStarComments.module.scss
similarity index 100%
rename from scss/profileStarComments.module.scss
rename to components/ProfileStarComments/profileStarComments.module.scss
diff --git a/components/ProfileSubmissions.tsx b/components/ProfileSubmissions/ProfileSubmissions.tsx
similarity index 94%
rename from components/ProfileSubmissions.tsx
rename to components/ProfileSubmissions/ProfileSubmissions.tsx
index 4f0da2d4f9..f07012f08e 100644
--- a/components/ProfileSubmissions.tsx
+++ b/components/ProfileSubmissions/ProfileSubmissions.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Star as StarType } from '../graphql/index'
+import { Star as StarType } from '../../graphql/index'
 import { Star } from 'react-feather'
-import styles from '../scss/profileSubmissions.module.scss'
-import { SubmissionStatus as SubmissionStatusEnum } from '../graphql'
+import styles from './profileSubmissions.module.scss'
+import { SubmissionStatus as SubmissionStatusEnum } from '../../graphql'
 
 type ChallengeStatusProps = {
   challengesData: Challenge[]
diff --git a/components/ProfileSubmissions/index.tsx b/components/ProfileSubmissions/index.tsx
new file mode 100644
index 0000000000..537a2a3d3f
--- /dev/null
+++ b/components/ProfileSubmissions/index.tsx
@@ -0,0 +1,5 @@
+export {
+  type LessonChallenge,
+  SubmissionStatus,
+  default
+} from './ProfileSubmissions'
diff --git a/scss/profileSubmissions.module.scss b/components/ProfileSubmissions/profileSubmissions.module.scss
similarity index 100%
rename from scss/profileSubmissions.module.scss
rename to components/ProfileSubmissions/profileSubmissions.module.scss
diff --git a/components/SubmissionCard.tsx b/components/SubmissionCard/SubmissionCard.tsx
similarity index 86%
rename from components/SubmissionCard.tsx
rename to components/SubmissionCard/SubmissionCard.tsx
index c088f73d8d..7dac8c6714 100644
--- a/components/SubmissionCard.tsx
+++ b/components/SubmissionCard/SubmissionCard.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Button } from './theme/Button'
-import UserInfoImage from './UserInfoImage'
-import { UserInfo } from '../@types/user'
-import styles from '../scss/submissionCard.module.scss'
+import { Button } from '../theme/Button'
+import UserInfoImage from '../UserInfoImage'
+import { UserInfo } from '../../@types/user'
+import styles from './submissionCard.module.scss'
 
 type Props = {
   userId: string
diff --git a/components/SubmissionCard/index.tsx b/components/SubmissionCard/index.tsx
new file mode 100644
index 0000000000..7e74c5acc2
--- /dev/null
+++ b/components/SubmissionCard/index.tsx
@@ -0,0 +1 @@
+export { default } from './SubmissionCard'
diff --git a/scss/submissionCard.module.scss b/components/SubmissionCard/submissionCard.module.scss
similarity index 100%
rename from scss/submissionCard.module.scss
rename to components/SubmissionCard/submissionCard.module.scss
diff --git a/components/UserInfoImage.tsx b/components/UserInfoImage/UserInfoImage.tsx
similarity index 92%
rename from components/UserInfoImage.tsx
rename to components/UserInfoImage/UserInfoImage.tsx
index 3f56d9cdee..70fc55d8ba 100644
--- a/components/UserInfoImage.tsx
+++ b/components/UserInfoImage/UserInfoImage.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { UserInfo } from '../@types/user'
+import { UserInfo } from '../../@types/user'
 import Image from 'next/image'
-import styles from '../scss/userInfoImage.module.scss'
+import styles from './userInfoImage.module.scss'
 type UserProps = {
   user: UserInfo
   className?: string
diff --git a/components/UserInfoImage/index.tsx b/components/UserInfoImage/index.tsx
new file mode 100644
index 0000000000..1e9562e72a
--- /dev/null
+++ b/components/UserInfoImage/index.tsx
@@ -0,0 +1 @@
+export { DiscordAvatar, default } from './UserInfoImage'
diff --git a/scss/userInfoImage.module.scss b/components/UserInfoImage/userInfoImage.module.scss
similarity index 100%
rename from scss/userInfoImage.module.scss
rename to components/UserInfoImage/userInfoImage.module.scss