diff --git a/src/components/Test/TestTopicConfiguration.js b/src/components/Test/TestTopicConfiguration.js
index 95eeed0365073f3d1c090268d4e0d20a786cbfb7..72553c4d7602406243be8a63b04bfa8733db8c39 100644
--- a/src/components/Test/TestTopicConfiguration.js
+++ b/src/components/Test/TestTopicConfiguration.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import FeatherIcon from 'feather-icons-react';
 import React, {useEffect, useState} from 'react';
 import {
+  delete_test_topic,
   get_test_topic,
   get_test_topic_question_count,
   update_test_topic
@@ -9,6 +10,7 @@ import {
 import SuccessModal from '../SuccessModal';
 import InputField from '../InputField';
 import Button from '../Button';
+import ConfirmationModal from '../ConfirmationModal';
 
 function TestTopicConfiguration(props) {
   const [multipleChoiceCountEasy, setMultipleChoiceCountEasy] = useState(0);
@@ -34,6 +36,8 @@ function TestTopicConfiguration(props) {
   const [isOpenFailedModal, setIsOpenFailedModal] = useState(false);
 
   const [isOpenSuccessUpdateTestTopicModal, setIsOpenSuccessUpdateTestTopicModal] = useState(false);
+  const [isOpenConfirmDeleteTestTopicModal, setIsOpenConfirmDeleteTestTopicModal] = useState(false);
+  const [isOpenSuccessDeleteTestTopicModal, setIsOpenSuccessDeleteTestTopicModal] = useState(false);
 
   useEffect(() => {
     get_test_topic_question_count(setErrorMessage,setIsOpenFailedModal, props.navigate, props.testTopicData['test_topic_id'])
@@ -227,6 +231,32 @@ function TestTopicConfiguration(props) {
     props.callback(testTopicResponseData.id);
   }
 
+  const handleClickDeleteTestTopicButton = function() {
+    setIsOpenConfirmDeleteTestTopicModal(true);
+  }
+
+  const handleCloseConfirmDeleteTestTopicModal = function() {
+    setIsOpenConfirmDeleteTestTopicModal(false);
+  }
+
+  const handleConfirmDeleteTestTopic = async function() {
+    setIsOpenConfirmDeleteTestTopicModal(false);
+    const response = await delete_test_topic(
+      setErrorMessage,
+      setIsOpenFailedModal,
+      props.navigate,
+      testTopicResponseData.id
+    );
+    if (response) {
+      setIsOpenSuccessDeleteTestTopicModal(true);
+    }
+  }
+
+  const handleCloseSuccessDeleteTestTopicModal = function() {
+    setIsOpenSuccessDeleteTestTopicModal(false);
+    props.callback();
+  }
+
   return (
     <div>
       {
@@ -468,17 +498,45 @@ function TestTopicConfiguration(props) {
             </div>
           </div>
 
+          <p className='text-primary mb-4'><b>Total:</b> {
+            multipleChoiceCountEasy +
+            multipleChoiceCountMedium +
+            multipleChoiceCountHard +
+            multipleAnswerCountEasy +
+            multipleAnswerCountMedium +
+            multipleAnswerCountHard +
+            trueOrFalseCountEasy +
+            trueOrFalseCountMedium +
+            trueOrFalseCountHard +
+            essayCountEasy +
+            essayCountMedium +
+            essayCountHard
+          } questions</p>
+
           {
             testTopicResponseData.can_modify ?
-              <div onClick={handleSave} className='mr-4 mb-8'>
-                <Button
-                  buttonLabel='Save'
-                  color='bg-blue'
-                  textColor='text-white'
-                  borderColor='border-blue'
-                  disabled={!checkCanBeSaved() || !testTopicResponseData.can_modify}
-                  featherIconName='save'
-                />
+              <div class='flex flex-row'>
+                <div onClick={handleSave} className='mr-4 mb-8'>
+                  <Button
+                    buttonLabel='Save'
+                    color='bg-blue'
+                    textColor='text-white'
+                    borderColor='border-blue'
+                    disabled={!checkCanBeSaved() || !testTopicResponseData.can_modify}
+                    featherIconName='save'
+                  />
+                </div>
+
+                <div onClick={handleClickDeleteTestTopicButton}>
+                  <Button
+                    buttonLabel='Delete Test'
+                    color='bg-white'
+                    textColor='text-red'
+                    borderColor='border-red'
+                    featherIconName='trash-2'
+                    disabled={!testTopicResponseData.can_modify}
+                  />
+                </div>
               </div>
               :
               <div className='my-auto'>
@@ -496,6 +554,24 @@ function TestTopicConfiguration(props) {
             message={<>Question configuration for topic <b>{testTopicResponseData.topic_name}</b> successfully saved.</>}
             isSuccess={true}
           />
+
+          <ConfirmationModal
+            isOpen={isOpenConfirmDeleteTestTopicModal}
+            handleClose={handleCloseConfirmDeleteTestTopicModal}
+            title='Delete Test Topic'
+            message={<>Are you sure to delete topic <b>"{testTopicResponseData.topic_name}"</b> from this test?</>}
+            actionButtonName='Yes, delete'
+            actionColor='red'
+            iconName='trash-2'
+            callback={handleConfirmDeleteTestTopic}
+          />
+
+          <SuccessModal
+            isOpen={isOpenSuccessDeleteTestTopicModal}
+            handleClose={handleCloseSuccessDeleteTestTopicModal}
+            message={<>Topic <b>"{testTopicResponseData.topic_name}"</b> has been <b>deleted</b> from test.</>}
+            isSuccess={true}
+          />
         </div>
       }
 
diff --git a/src/modules/api/TestApi.js b/src/modules/api/TestApi.js
index 90e17fb56a4ecb5b6e425d1a603f46c9ce0477d9..0ee6f4d4ebdf5a1166f552820e9b221a30ecad9a 100644
--- a/src/modules/api/TestApi.js
+++ b/src/modules/api/TestApi.js
@@ -48,9 +48,12 @@ export const testApi = {
     return get(navigate, `${BASE_URL}/test-topic/get_topic_questions_count?test_topic_id=${testTopicId}`, token);
   },
   update_test_topic: (navigate, token, form, testTopicId) => {
-    return put(navigate, `${BASE_URL}/test-topic/update_test_topic?test_topic_id=${testTopicId}`, token, form)
+    return put(navigate, `${BASE_URL}/test-topic/update_test_topic?test_topic_id=${testTopicId}`, token, form);
+  },
+  delete_test_topic: (navigate, token, testTopicId) => {
+    return delete_(navigate, `${BASE_URL}/test-topic/delete_test_topic?test_topic_id=${testTopicId}`, token);
   },
   publish_test: (navigate, token, testId) => {
-    return put(navigate, `${BASE_URL}/crud-test/publish_test?test_id=${testId}`, token)
+    return put(navigate, `${BASE_URL}/crud-test/publish_test?test_id=${testId}`, token);
   }
 }
\ No newline at end of file
diff --git a/src/pages/Test/TestModule.js b/src/pages/Test/TestModule.js
index 7e2d04d64d6f533829a7f2f4b7aac4567432dba3..5f7f76e7ae061550673df28d95ee474f0f6a1d98 100644
--- a/src/pages/Test/TestModule.js
+++ b/src/pages/Test/TestModule.js
@@ -160,6 +160,16 @@ export async function update_test_topic(setErrorMessage, setIsOpenFailedModal, n
   }
 }
 
+export async function delete_test_topic(setErrorMessage, setIsOpenFailedModal, navigate, testTopicId) {
+  try {
+    const token = localStorage.getItem('accessToken');
+    return await testApi.delete_test_topic(navigate, token, testTopicId);
+  } catch (error) {
+    setErrorMessage('Failed to delete test topic. ' + error.response);
+    setIsOpenFailedModal(true);
+  }
+}
+
 export async function publish_test(setErrorMessage, setIsOpenFailedModal, navigate, testId) {
   try {
     const token = localStorage.getItem('accessToken');