diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index a8653fec1..4b76d7a0e 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -1,5 +1,122 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Component/QueryInfo Basic 1`] = `
+<div
+  className="fade alert alert-primary show"
+  role="alert"
+>
+  <div
+    className="d-flex align-items-center gap-3"
+  >
+    <div
+      className="info_image"
+    >
+      <img
+        className="img-fluid"
+        height={24}
+        src="/assets/curriculum/icons/icon-tip.svg"
+        width={24}
+      />
+    </div>
+    Update the module successfully! 
+  </div>
+</div>
+`;
+
+exports[`Storyshots Component/QueryInfo Basic With Dismiss 1`] = `
+<div
+  className="fade alert alert-primary alert-dismissible show"
+  role="alert"
+>
+  <button
+    aria-label="Close alert"
+    className="btn-close"
+    onClick={[Function]}
+    type="button"
+  />
+  <div
+    className="d-flex align-items-center gap-3"
+  >
+    <div
+      className="info_image"
+    >
+      <img
+        className="img-fluid"
+        height={24}
+        src="/assets/curriculum/icons/icon-tip.svg"
+        width={24}
+      />
+    </div>
+    Update the module successfully! 
+  </div>
+</div>
+`;
+
+exports[`Storyshots Component/QueryInfo Error 1`] = `
+<div
+  className="fade alert alert-danger show"
+  role="alert"
+>
+  <div
+    className="d-flex align-items-center gap-3"
+  >
+    <div
+      className=""
+    >
+      <img
+        className="img-fluid"
+        height={24}
+        src="/assets/curriculum/icons/exclamation.svg"
+        width={24}
+      />
+    </div>
+    An error occurred. Please try again. 
+  </div>
+</div>
+`;
+
+exports[`Storyshots Component/QueryInfo Error With Dismiss 1`] = `
+<div
+  className="fade alert alert-danger alert-dismissible show"
+  role="alert"
+>
+  <button
+    aria-label="Close alert"
+    className="btn-close"
+    onClick={[Function]}
+    type="button"
+  />
+  <div
+    className="d-flex align-items-center gap-3"
+  >
+    <div
+      className=""
+    >
+      <img
+        className="img-fluid"
+        height={24}
+        src="/assets/curriculum/icons/exclamation.svg"
+        width={24}
+      />
+    </div>
+    An error occurred. Please try again. 
+  </div>
+</div>
+`;
+
+exports[`Storyshots Component/QueryInfo With Loading 1`] = `
+<div
+  className="loading"
+>
+  <div
+    className="spinner-grow spinner-grow-sm"
+  />
+  <span>
+    Sending the request...
+  </span>
+</div>
+`;
+
 exports[`Storyshots Components/AdditionalResources Basic 1`] = `
 <div
   className="additional-resources__container ms-4 d-flex flex-column justify-content-around"
diff --git a/components/QueryInfo/QueryInfo.test.js b/components/QueryInfo/QueryInfo.test.js
new file mode 100644
index 000000000..92e1e9181
--- /dev/null
+++ b/components/QueryInfo/QueryInfo.test.js
@@ -0,0 +1,95 @@
+import React from 'react'
+import QueryInfo from './'
+import { render, screen } from '@testing-library/react'
+
+// Imported to be able to use .toBeInTheDocument()
+import '@testing-library/jest-dom'
+
+describe('QueryInfo component', () => {
+  it('should display successful state', () => {
+    expect.assertions(1)
+
+    render(
+      <QueryInfo
+        hide={false}
+        data={{
+          name: 'noob'
+        }}
+        loading={false}
+        error={''}
+        texts={{
+          loading: 'Loading message...',
+          data: 'Submitted successfully'
+        }}
+      />
+    )
+
+    expect(screen.getByText('Submitted successfully')).toBeInTheDocument()
+  })
+
+  it('should display loading state', () => {
+    expect.assertions(1)
+
+    render(
+      <QueryInfo
+        hide={false}
+        data={{
+          name: 'noob'
+        }}
+        loading={true}
+        error={''}
+        texts={{
+          loading: 'Loading message...',
+          data: 'Submitted successfully'
+        }}
+      />
+    )
+
+    expect(screen.getByText('Loading message...')).toBeInTheDocument()
+  })
+
+  it('should display error state', () => {
+    expect.assertions(1)
+
+    render(
+      <QueryInfo
+        hide={false}
+        data={{
+          name: 'noob'
+        }}
+        loading={false}
+        error={'Missing arguments'}
+        texts={{
+          loading: 'Loading message...',
+          data: 'Submitted successfully'
+        }}
+      />
+    )
+
+    expect(
+      screen.getByText('An error occurred. Please try again.')
+    ).toBeInTheDocument()
+  })
+
+  it('should render nothing when there is no data, error, and loading', () => {
+    expect.assertions(2)
+
+    render(
+      <QueryInfo
+        hide={false}
+        data={undefined}
+        loading={false}
+        error={''}
+        texts={{
+          loading: 'Loading message...',
+          data: 'Submitted successfully'
+        }}
+      />
+    )
+
+    expect(
+      screen.queryByText('Submitted the item successfully!')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText('Loading message...')).not.toBeInTheDocument()
+  })
+})
diff --git a/components/QueryInfo/QueryInfo.tsx b/components/QueryInfo/QueryInfo.tsx
new file mode 100644
index 000000000..37ebdc71f
--- /dev/null
+++ b/components/QueryInfo/QueryInfo.tsx
@@ -0,0 +1,67 @@
+import { get } from 'lodash'
+import React from 'react'
+import { Spinner } from 'react-bootstrap'
+import styles from '../../scss/queryInfo.module.scss'
+import Alert from '../Alert'
+
+type QueryInfo<T> = {
+  data: T
+  loading: boolean
+  error: string
+  texts: {
+    loading: string
+    data: string
+  }
+  dismiss?: {
+    onDismissError?: (id: number) => void
+    onDismissData?: (id: number) => void
+  }
+}
+
+const QueryInfo = <T,>({
+  data,
+  loading,
+  error,
+  texts,
+  dismiss
+}: QueryInfo<T>) => {
+  if (loading) {
+    return (
+      <div className={styles.loading}>
+        <Spinner animation="grow" size="sm" />
+        <span>{texts.loading}</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <Alert
+        alert={{
+          text: 'An error occurred. Please try again.',
+          type: 'urgent',
+          id: 1
+        }}
+        onDismiss={get(dismiss, 'onDismissError')}
+        key={error}
+      />
+    )
+  }
+
+  if (data) {
+    return (
+      <Alert
+        alert={{
+          text: texts.data,
+          type: 'info',
+          id: 2
+        }}
+        onDismiss={get(dismiss, 'onDismissData')}
+      />
+    )
+  }
+
+  return <></>
+}
+
+export default QueryInfo
diff --git a/components/QueryInfo/index.tsx b/components/QueryInfo/index.tsx
new file mode 100644
index 000000000..b2454455e
--- /dev/null
+++ b/components/QueryInfo/index.tsx
@@ -0,0 +1 @@
+export { default } from './QueryInfo'
diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js
index 4537e0b0d..2316ad86f 100644
--- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js
+++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js
@@ -109,7 +109,7 @@ describe('AdminLessonInputs component', () => {
   it('Should add module', async () => {
     expect.assertions(1)
 
-    const { getByText, getByTestId, container } = render(
+    const { getByText, getByTestId } = render(
       <MockedProvider mocks={mocks}>
         <AdminLessonInputs
           lessonId={lesson.id}
@@ -134,7 +134,7 @@ describe('AdminLessonInputs component', () => {
 
     await waitFor(() =>
       expect(
-        container.querySelector('.octicon-check-circle')
+        getByText('Added the item Functions successfully!')
       ).toBeInTheDocument()
     )
   })
@@ -142,7 +142,7 @@ describe('AdminLessonInputs component', () => {
   it('Should update module', async () => {
     expect.assertions(1)
 
-    const { getByText, getByTestId, container } = render(
+    const { getByText, getByTestId } = render(
       <MockedProvider mocks={updateModuleMocks}>
         <AdminLessonInputs
           lessonId={lesson.id}
@@ -168,7 +168,7 @@ describe('AdminLessonInputs component', () => {
 
     await waitFor(() =>
       expect(
-        container.querySelector('.octicon-check-circle')
+        getByText('Updated the item Functions successfully!')
       ).toBeInTheDocument()
     )
   })
@@ -176,7 +176,7 @@ describe('AdminLessonInputs component', () => {
   it('Should display error message if inputs are empty', async () => {
     expect.assertions(1)
 
-    const { getByText, getByTestId, container } = render(
+    const { getByText, getByTestId } = render(
       <MockedProvider mocks={mocks}>
         <AdminLessonInputs lessonId={lesson.id} title={lesson.title} />
       </MockedProvider>
@@ -189,14 +189,16 @@ describe('AdminLessonInputs component', () => {
     await userEvent.click(submit)
 
     await waitFor(() =>
-      expect(container.querySelector('.octicon-alert-fill')).toBeInTheDocument()
+      expect(
+        getByText('An error occurred. Please try again.')
+      ).toBeInTheDocument()
     )
   })
 
   it('Should display error message if network or GraphQL error', async () => {
     expect.assertions(1)
 
-    const { getByText, getByTestId, container } = render(
+    const { getByText, getByTestId } = render(
       <MockedProvider mocks={errorMocks}>
         <AdminLessonInputs lessonId={lesson.id} title={lesson.title} />
       </MockedProvider>
@@ -213,7 +215,9 @@ describe('AdminLessonInputs component', () => {
     await userEvent.click(submit)
 
     await waitFor(() =>
-      expect(container.querySelector('.octicon-alert-fill')).toBeInTheDocument()
+      expect(
+        getByText('An error occurred. Please try again.')
+      ).toBeInTheDocument()
     )
   })
 
@@ -458,7 +462,66 @@ describe('AdminLessonInputs component', () => {
     await userEvent.click(submit)
 
     await waitFor(() =>
-      expect(getByText('Updated the module successfully!')).toBeInTheDocument()
+      expect(getByText('Updated the item successfully!')).toBeInTheDocument()
+    )
+  })
+
+  it('Should dismiss success message', async () => {
+    expect.assertions(1)
+
+    const { getByText, getByTestId, queryByText, getByLabelText } = render(
+      <MockedProvider mocks={mocks}>
+        <AdminLessonInputs
+          lessonId={lesson.id}
+          title={lesson.title}
+          refetch={() => {}}
+        />
+      </MockedProvider>
+    )
+
+    await userEvent.type(getByTestId('input0'), 'Functions', {
+      delay: 1
+    })
+    await userEvent.type(getByTestId('input2'), '1', {
+      delay: 1
+    })
+    await userEvent.type(getByTestId('textbox'), 'Functions are cool', {
+      delay: 1
+    })
+
+    const submit = getByText('ADD MODULE')
+    await userEvent.click(submit)
+
+    await userEvent.click(getByLabelText('Close alert'))
+
+    await waitFor(() =>
+      expect(
+        queryByText('Added the item Functions successfully!')
+      ).not.toBeInTheDocument()
+    )
+  })
+
+  it('Should dismiss error message', async () => {
+    expect.assertions(1)
+
+    const { getByText, getByTestId, queryByText, getByLabelText } = render(
+      <MockedProvider mocks={mocks}>
+        <AdminLessonInputs lessonId={lesson.id} title={lesson.title} />
+      </MockedProvider>
+    )
+
+    await userEvent.clear(getByTestId('input0'))
+    await userEvent.clear(getByTestId('textbox'))
+
+    const submit = getByText('ADD MODULE')
+    await userEvent.click(submit)
+
+    await userEvent.click(getByLabelText('Close alert'))
+
+    await waitFor(() =>
+      expect(
+        queryByText('An error occurred. Please try again.')
+      ).not.toBeInTheDocument()
     )
   })
 })
diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx
index 19fb6b995..36f79f479 100644
--- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx
+++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx
@@ -7,15 +7,14 @@ import {
 } from '../../../../graphql'
 import { formChange } from '../../../../helpers/formChange'
 import { FormCard, MD_INPUT, Option, TextField } from '../../../FormCard'
-import { AlertFillIcon, CheckCircleIcon } from '@primer/octicons-react'
 import styles from './adminLessonInputs.module.scss'
-import { Spinner } from 'react-bootstrap'
-import { get } from 'lodash'
+import { get, isEqual } from 'lodash'
 import {
   ApolloError,
   OperationVariables,
   ApolloQueryResult
 } from '@apollo/client'
+import QueryInfo from '../../../QueryInfo'
 
 type Module = { id: number; name: string; content: string; order: number }
 
@@ -96,6 +95,12 @@ const AdminModuleInputs = ({
       })
     : useAddModuleMutation({ variables: mutationVariables })
 
+  const [dataDiff, setDataDiff] = useState<undefined | typeof data>(data)
+  useEffect(
+    () => setDataDiff(prev => (isEqual(data, prev) ? undefined : data)),
+    [data]
+  )
+
   const [errorMsg, setErrorMsg] = useState(get(error, 'message', ''))
 
   const handleChange = async (value: string, propertyIndex: number) => {
@@ -148,49 +153,33 @@ const AdminModuleInputs = ({
     }
   }
 
-  const QueryStateMessage = () => {
-    if (loading) {
-      return (
-        <div className={styles.loading}>
-          <Spinner animation="grow" size="sm" />
-          <span>Adding the module...</span>
-        </div>
-      )
-    }
-
-    if (errorMsg) {
-      return (
-        <div className={styles.error}>
-          <AlertFillIcon />
-          <span>Failed to add the module: {errorMsg}</span>
-        </div>
-      )
-    }
+  const dataText = () => {
+    const updateModule = get(data, 'updateModule')
+    const addModule = get(data, 'addModule')
 
-    if (data) {
-      const updateModule = get(data, 'updateModule')
-      const addModule = get(data, 'addModule')
-
-      return (
-        <div className={styles.success}>
-          <CheckCircleIcon />
-          <span>
-            {updateModule ? 'Updated' : 'Added'} the module{' '}
-            <strong>
-              {get(addModule, 'name') || get(updateModule, 'name') || ''}
-            </strong>{' '}
-            successfully!
-          </span>
-        </div>
-      )
-    }
-
-    return <></>
+    return `${updateModule ? 'Updated' : 'Added'} the item ${
+      get(addModule, 'name') || get(updateModule, 'name') || ''
+    } successfully!`
   }
 
   return (
     <div className={styles.container}>
-      <QueryStateMessage />
+      <QueryInfo
+        data={dataDiff}
+        loading={loading}
+        error={errorMsg}
+        texts={{
+          loading: 'Adding the module...',
+          data: dataText()
+        }}
+        dismiss={{
+          onDismissError: _ => {
+            setErrorMsg('')
+            setDataDiff(undefined)
+          },
+          onDismissData: () => {}
+        }}
+      />
       <FormCard
         title={name.value || title || 'Untitled'}
         values={formOptions}
diff --git a/components/admin/lessons/AdminLessonInputs/adminLessonInputs.module.scss b/components/admin/lessons/AdminLessonInputs/adminLessonInputs.module.scss
index 33565ed44..d4a64b3b7 100644
--- a/components/admin/lessons/AdminLessonInputs/adminLessonInputs.module.scss
+++ b/components/admin/lessons/AdminLessonInputs/adminLessonInputs.module.scss
@@ -1,41 +1,5 @@
-@use '../../../../scss/_variables.module';
-
-@mixin message($bg, $color) {
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-  background: #ffbbc1;
-  width: fit-content;
-  padding: 5px 15px;
-  border-radius: 8px;
-  background-color: rgba($color: $bg, $alpha: 0.2);
-
-  @if $color {
-    color: $color;
-  } @else {
-    color: $bg;
-  }
-}
-
 .container {
   display: flex;
   flex-direction: column;
   row-gap: 12px;
 }
-
-.success {
-  // Local variable
-  $color: adjust-color(
-    $color: variables.$success,
-    $blackness: 15%
-  );
-  @include message(variables.$success, $color);
-}
-
-.error {
-  @include message(variables.$danger, variables.$danger);
-}
-
-.loading {
-  @include message(variables.$mute, variables.$mute);
-}
diff --git a/scss/queryInfo.module.scss b/scss/queryInfo.module.scss
new file mode 100644
index 000000000..2266b5054
--- /dev/null
+++ b/scss/queryInfo.module.scss
@@ -0,0 +1,22 @@
+@use '_variables.module';
+
+@mixin message($bg, $color) {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+  background-color: rgba($color: $bg, $alpha: 0.2);
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.25rem;
+  margin-bottom: 0;
+
+  @if $color {
+    color: $color;
+    border: 1px solid rgba($color: $color, $alpha: 0.2);
+  } @else {
+    color: $bg;
+  }
+}
+
+.loading {
+  @include message(variables.$mute, variables.$mute);
+}
diff --git a/stories/components/QueryInfo.stories.tsx b/stories/components/QueryInfo.stories.tsx
new file mode 100644
index 000000000..48998597f
--- /dev/null
+++ b/stories/components/QueryInfo.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import QueryInfo from '../../components/QueryInfo'
+
+export default {
+  component: QueryInfo,
+  title: 'Component/QueryInfo'
+}
+
+export const Basic = () => (
+  <QueryInfo
+    data={{
+      title: 'JavaScript'
+    }}
+    loading={false}
+    error={''}
+    texts={{
+      loading: 'Sending the request...',
+      data: 'Update the module successfully!'
+    }}
+  />
+)
+
+export const BasicWithDismiss = () => (
+  <QueryInfo
+    data={{
+      title: 'JavaScript'
+    }}
+    loading={false}
+    error={''}
+    texts={{
+      loading: 'Sending the request...',
+      data: 'Update the module successfully!'
+    }}
+    dismiss={{
+      onDismissData: () => {}
+    }}
+  />
+)
+
+export const Error = () => (
+  <QueryInfo
+    data={{
+      title: 'JavaScript'
+    }}
+    loading={false}
+    error={'JavaScript is not related to Java!'}
+    texts={{
+      loading: 'Sending the request...',
+      data: ''
+    }}
+  />
+)
+
+export const ErrorWithDismiss = () => (
+  <QueryInfo
+    data={{
+      title: 'JavaScript'
+    }}
+    loading={false}
+    error={'JavaScript is not related to Java!'}
+    texts={{
+      loading: 'Sending the request...',
+      data: ''
+    }}
+    dismiss={{
+      onDismissError: () => {}
+    }}
+  />
+)
+
+export const _WithLoading = () => (
+  <QueryInfo
+    data={{
+      title: 'JavaScript'
+    }}
+    loading={true}
+    error={''}
+    texts={{
+      loading: 'Sending the request...',
+      data: ''
+    }}
+  />
+)