diff --git a/src/Editor/Editor.jsx b/src/Editor/Editor.jsx
index 6207354..9d1b4ac 100644
--- a/src/Editor/Editor.jsx
+++ b/src/Editor/Editor.jsx
@@ -163,6 +163,7 @@ const Editor = () => {
       </div>
     );
   }
+  console.log(components);
 
   return (
     <div className="editor-wrapper">
diff --git a/src/Input/Input.jsx b/src/Input/Input.jsx
index 2ecb785..d18066d 100644
--- a/src/Input/Input.jsx
+++ b/src/Input/Input.jsx
@@ -23,13 +23,13 @@ const Input = ({
   }, []);
   const iconComponents = useIconMapper({ isActive: select || hover });
 
-  const [deleteQuestion] = useQuestions((state) => {
-    return [state.deleteQuestion];
+  const [deleteQuestion, reorderQuestion] = useQuestions((state) => {
+    return [state.deleteQuestion, state.reorderQuestion];
   });
 
   const handleDelete = (e) => {
     e.stopPropagation();
-    deleteQuestion(component.id);
+    deleteQuestion(component.id, component.form_id);
   };
 
   return (
diff --git a/src/_services/QuestionService.js b/src/_services/QuestionService.js
index 13ea4db..eff6f95 100644
--- a/src/_services/QuestionService.js
+++ b/src/_services/QuestionService.js
@@ -38,10 +38,16 @@ export const useQuestions = create((set, get) => ({
       set(() => ({ error: error.message, loading: false }));
     }
   },
-  deleteQuestion: async (question_id) => {
+  deleteQuestion: async (question_id, form_id) => {
     set(() => ({ loading: true }));
-
     try {
+      const { data, errorReorder } = await supabase.rpc(
+        "delete_question_with_order",
+        {
+          formid: form_id,
+          questionid: question_id,
+        }
+      );
       const { error } = await supabase
         .from("question")
         .delete()
@@ -53,6 +59,7 @@ export const useQuestions = create((set, get) => ({
       set(() => ({ error: error.message, loading: false }));
     }
   },
+  reorderQuestion: async (form_id) => {},
   updateQuestionName: async (question_id, name) => {
     set(() => ({ loading: true }));
     try {
diff --git a/src/_styles/colors.scss b/src/_styles/colors.scss
index 491bd23..1c1d95a 100644
--- a/src/_styles/colors.scss
+++ b/src/_styles/colors.scss
@@ -23,6 +23,7 @@ $overlay-background: rgb(17, 116, 203);
 $select-input-border: #007be5;
 $description-text: rgba(0, 0, 0, 0.7);
 $response-text: rgb(187, 187, 187);
+$delete-color: rgb(140, 3, 3);
 
 $button-text-color: #05051b;
 $button-hover-color: #077f7f;