diff --git a/.github/workflows/frontend-service-tests-deploy.yml b/.github/workflows/frontend-service-tests-deploy.yml
index bf7c36a4..d916bd42 100644
--- a/.github/workflows/frontend-service-tests-deploy.yml
+++ b/.github/workflows/frontend-service-tests-deploy.yml
@@ -60,4 +60,12 @@ jobs:
       with:
         service-id: ${{ secrets.MY_RENDER_SERVICE_ID_FE }}
         api-key: ${{ secrets.MY_RENDER_API_KEY }}
-        wait-for-success: true
+
+    - name: Wait for Render Deployment
+      uses: bounceapp/render-action@0.6.0
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        service-id: ${{ secrets.MY_RENDER_SERVICE_ID_FE }}
+        retries: 20
+        wait: 60000
+        sleep: 30000
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e06604e1..e1ab06db 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { Button, Modal } from "antd";
+import { Button } from "antd";
 import "./App.css";
-import NoteForm from "./components/NoteForm";
+import NoteFormModal from "./components/NoteFormModal";
 import NoteGrid from "./components/NoteGrid";
 import Spinner from "./components/Spinner";
 import type NoteType from "./types/note";
@@ -97,19 +97,15 @@ function App() {
       {connectionIssue && (
         <h3 className="connection-warning">Warning: API Connection Issue</h3>
       )}
-      <Modal
-        title="Note Form"
-        open={isModalVisible}
-        onCancel={handleCancel}
-        footer={null}
-      >
-        <NoteForm
-          onCancel={handleCancel}
-          selectedNote={selectedNote}
-          addNote={addNote}
-          updateNote={updateNote}
-        />
-      </Modal>
+
+      <NoteFormModal
+        isModalVisible={isModalVisible}
+        handleCancel={handleCancel}
+        selectedNote={selectedNote}
+        addNote={addNote}
+        updateNote={updateNote}
+      />
+
       {isDataLoading ? (
         <Spinner />
       ) : (
diff --git a/frontend/src/components/NoteFormModal.tsx b/frontend/src/components/NoteFormModal.tsx
new file mode 100644
index 00000000..40556799
--- /dev/null
+++ b/frontend/src/components/NoteFormModal.tsx
@@ -0,0 +1,32 @@
+
+import { Modal } from "antd";
+import NoteForm from "./NoteForm";
+import type NoteType from "../types/note";
+
+interface ModalNoteFormProps {
+  addNote: (newNote: NoteType) => void;
+  updateNote: (updatedNote: NoteType) => void;
+  selectedNote: NoteType | null;
+  handleCancel: () => void;
+  isModalVisible: boolean;
+}
+
+ const ModalNoteForm: React.FC<ModalNoteFormProps>  = (props) => {
+  return (
+    <Modal
+      title="Note Form"
+      open={props.isModalVisible}
+      onCancel={props.handleCancel}
+      footer={null}
+    >
+      <NoteForm
+        onCancel={props.handleCancel}
+        selectedNote={props.selectedNote}
+        addNote={props.addNote}
+        updateNote={props.updateNote}
+      />
+    </Modal>
+  );
+}
+
+export default ModalNoteForm;