diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index c8eeef3e6..84be56aaa 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -6660,6 +6660,29 @@ a = a + 10
`;
+exports[`Storyshots Components/ExerciseReportCard Basic 1`] = `
+
{
+ it('Should submit an issue successfully', async () => {
+ expect.assertions(1)
+
+ render(
+
+
+
+ )
+
+ await userEvent.click(screen.getByText(reportBtn))
+
+ await userEvent.type(screen.getByTestId('textbox'), 'Bad exercise')
+ await userEvent.click(screen.getByText('Submit issue'))
+
+ expect(
+ await screen.findByText('Reported a mistake in this exercise')
+ ).toBeInTheDocument()
+ })
+
+ it('Should cancel the report', async () => {
+ expect.assertions(1)
+
+ render(
+
+
+
+ )
+
+ await userEvent.click(screen.getByText(reportBtn))
+ await userEvent.click(screen.getByText('Cancel'))
+
+ expect(await screen.findByText(reportBtn)).toBeInTheDocument()
+ })
+})
diff --git a/components/ExerciseReportCard/ExerciseReportCard.tsx b/components/ExerciseReportCard/ExerciseReportCard.tsx
new file mode 100644
index 000000000..5d569e4d2
--- /dev/null
+++ b/components/ExerciseReportCard/ExerciseReportCard.tsx
@@ -0,0 +1,141 @@
+import { ApolloError } from '@apollo/client'
+import React, { useState } from 'react'
+import { DISCORD_PATH } from '../../constants'
+import { FlagExerciseMutation, useFlagExerciseMutation } from '../../graphql'
+import styles from './exerciseReportCard.module.scss'
+import { MdInput } from '../MdInput'
+import NavLink from '../NavLink'
+import QueryInfo from '../QueryInfo'
+import { Button } from '../theme/Button'
+import btnStyles from '../../scss/button.module.scss'
+
+type BodyProps = {
+ description: string
+ loading: boolean
+ data?: null | FlagExerciseMutation
+ error?: ApolloError
+ setDescription: (str: string) => void
+ flagExercise: () => void
+ setReportMode: (mode: boolean) => void
+}
+
+const Body = ({
+ description,
+ loading,
+ error,
+ data,
+ setDescription,
+ flagExercise,
+ setReportMode
+}: BodyProps) => (
+
+
Report a mistake in this exercise
+
Remember to double check your answer. Thanks for your help!
+
+ Alternatively, you can{' '}
+
+ report any technical problems
+ {' '}
+ you might be experiencing.
+
+
+
setDescription(v)}
+ value={description}
+ placeHolder="Describe the mistake here..."
+ />
+
+ {loading || error ? (
+
+ ) : (
+ <>
+
+
+ >
+ )}
+
+
+)
+
+type Props = {
+ exerciseId: number
+ answerShown: boolean
+}
+
+const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
+ const [reportMode, setReportMode] = useState(false)
+ const [description, setDescription] = useState('')
+ const [flagExercise, { data, loading, error }] = useFlagExerciseMutation({
+ variables: {
+ id: exerciseId,
+ flagReason: description
+ }
+ })
+
+ const marginOnExpand = answerShown ? 'mt-5' : ''
+
+ if (data && !loading) {
+ return (
+
+
Reported a mistake in this exercise
+
+ We appreciate your input. We will shortly investigate the problem that
+ has been reported.
+
+
+ )
+ }
+
+ return (
+
+ {reportMode ? (
+
+ ) : (
+
+ )}
+
+ )
+}
+
+export default ExerciseReportCard
diff --git a/components/ExerciseReportCard/exerciseReportCard.module.scss b/components/ExerciseReportCard/exerciseReportCard.module.scss
new file mode 100644
index 000000000..0cc49f817
--- /dev/null
+++ b/components/ExerciseReportCard/exerciseReportCard.module.scss
@@ -0,0 +1,28 @@
+@use '../../scss/colors.module.scss';
+
+.container {
+ max-width: 400px;
+ background-color: hsl(0, 0%, 96%);
+ padding: 20px;
+ border: 1px solid hsl(0, 0%, 84%);
+ border-radius: 10px;
+}
+
+.container__reportBtn {
+ font-size: 12px;
+ background-color: transparent;
+ padding: 0;
+
+ &:hover {
+ color: colors.$bg-green;
+ background-color: transparent;
+ box-shadow: unset;
+ }
+}
+
+.container__btns__container {
+ display: grid;
+ row-gap: 8px;
+ margin-top: 18px;
+ width: 100%;
+}
diff --git a/components/ExerciseReportCard/index.tsx b/components/ExerciseReportCard/index.tsx
new file mode 100644
index 000000000..7878cd9b3
--- /dev/null
+++ b/components/ExerciseReportCard/index.tsx
@@ -0,0 +1 @@
+export { default } from './ExerciseReportCard'
diff --git a/stories/components/ExerciseReportCard.stories.tsx b/stories/components/ExerciseReportCard.stories.tsx
new file mode 100644
index 000000000..5239c12af
--- /dev/null
+++ b/stories/components/ExerciseReportCard.stories.tsx
@@ -0,0 +1,41 @@
+import { MockedProvider } from '@apollo/client/testing'
+import React from 'react'
+import ExerciseReportCard from '../../components/ExerciseReportCard'
+import FLAG_EXERCISE from '../../graphql/queries/flagExercise'
+
+export default {
+ component: ExerciseReportCard,
+ title: 'Components/ExerciseReportCard'
+}
+
+export const Basic = () => {
+ return (
+