Index: jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
@@ -1,4 +1,6 @@
 import React, {useState} from "react";
 import "./Form.css";
+
+import { Editor } from 'primereact/editor';
 
 import 'react-responsive-modal/styles.css';
@@ -19,4 +21,5 @@
 export const AddJobAdModal = () => {
     const [modal, setModal] = useState(false);
+    const [text, setText] = useState("");
     const dispatch = useDispatch();
     const auth = useSelector(state => state.auth.currentUser)
@@ -52,5 +55,5 @@
                     employmentStatus: values.employmentStatus.value,
                 }, (success, response) => {
-                    if(success) {
+                    if (success) {
                         console.log("Job Advertisement added")
                         toggleModal()
@@ -66,80 +69,99 @@
 
     return (<div className="modal-wrap">
-            <button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button>
-            <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
-                <div className="head-modal">
-                    <h3>Post Job Advertisement</h3>
-                    <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
-                </div>
+        <div className="col">
+            <button onClick={toggleModal} className="add-new-card">
+                <h3>+ Post Advertisement</h3>
+            </button>
+        </div>
+        {/*<button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button>*/}
+        <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
+            <div className="head-modal">
+                <h3>Post Job Advertisement</h3>
+                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
+            </div>
 
-                <div className="modal-content">
-                    <form onSubmit={handleSubmit(addJobAdvertisement)}>
-                        <div className="row">
-                            <div className="col-md-7">
+            <div className="modal-content">
+                <form onSubmit={handleSubmit(addJobAdvertisement)}>
+                    <div className="row">
+                        <div className="col-md-7">
 
-                                <label className="label">Job title:</label>
-                                <input type="text" {...register("title")}/>
-                                <p style={{color: "red"}}>{errors.title?.message}</p>
+                            <label className="label">Job title:</label>
+                            <input type="text" {...register("title")}/>
+                            <p style={{color: "red"}}>{errors.title?.message}</p>
 
-                                <label className="label">Job description:</label>
-                                <textarea type="text" placeholder="Describe the job position and all the requirements"
-                                          className="description-textarea" {...register("description")}/>
-                                <p style={{color: "red"}}>{errors.description?.message}</p>
-                            </div>
-
-                            <div className="col-md-5">
-                                <label className="label">Hourly rate:</label>
-                                <input {...register("startingSalary")}/>
-                                <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
-
-                                <label className="label">Industry:</label>
-                                <Controller
-                                    name="industry"
-                                    control={control}
-                                    render={({ field })  => (<Select
-                                            {...field}
-                                            options={industryOptions}
-                                        />)}
-                                />
-                                <p style={{color: "red"}}>{errors.industry?.message}</p>
-
-                                <label className="label">Job type:</label>
-                                <Controller
-                                    name="jobType"
-                                    control={control}
-                                    render={({ field }) => (<Select
-                                            {...field}
-                                            options={jobTypeOptions}
-                                        />)}
-                                />
-                                <p style={{color: "red"}}>{errors.jobType?.message}</p>
-
-                                <label className="label">Employment status</label>
-                                <Controller
-                                    name="employmentStatus"
-                                    control={control}
-                                    render={({ field }) => (<Select
-                                            {...field}
-                                            options={employmentStatusOptions}
-                                        />)}
-                                />
-                                <p style={{color: "red"}}>{errors.employmentStatus?.message}</p>
-
-                                <label htmlFor="start">Active until:</label>
-                                <input type="date" defaultValue={minimumDate.toLocaleDateString('en-CA')}
-                                       min={minimumDate.toLocaleDateString('en-CA')} onChange={(event) => console.log(event.target.value)}
-                                       {...register("date")}/>
+                            <label className="label">Job description:</label>
+                            {/*<textarea type="text" placeholder="Describe the job position and all the requirements"*/}
+                            {/*          className="description-textarea" {...register("description")}/>*/}
 
 
-                            </div>
+                            <Controller
+                                name="description"
+                                control={control}
+                                render={({ field }) => (
+                                    <Editor
+                                        value={field.value}
+                                        onTextChange={(e) => field.onChange(e.htmlValue)}
+                                        style={{ height: '300px', fontSize: "16px", fontFamily: "Segoe UI" }}
+                                    />
+                                )}
+                            />
+                            <p style={{color: "red"}}>{errors.description?.message}</p>
                         </div>
 
-                        <div className="aligned">
-                            <button className="submit-btn"> Submit</button>
+                        <div className="col-md-5">
+                            <label className="label">Hourly rate:</label>
+                            <input {...register("startingSalary")}/>
+                            <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
+
+                            <label className="label">Industry:</label>
+                            <Controller
+                                name="industry"
+                                control={control}
+                                render={({field}) => (<Select
+                                    {...field}
+                                    options={industryOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.industry?.message}</p>
+
+                            <label className="label">Job type:</label>
+                            <Controller
+                                name="jobType"
+                                control={control}
+                                render={({field}) => (<Select
+                                    {...field}
+                                    options={jobTypeOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.jobType?.message}</p>
+
+                            <label className="label">Employment status</label>
+                            <Controller
+                                name="employmentStatus"
+                                control={control}
+                                render={({field}) => (<Select
+                                    {...field}
+                                    options={employmentStatusOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.employmentStatus?.message}</p>
+
+                            <label htmlFor="start">Active until:</label>
+                            <input type="date" defaultValue={minimumDate.toLocaleDateString('en-CA')}
+                                   min={minimumDate.toLocaleDateString('en-CA')}
+                                   onChange={(event) => console.log(event.target.value)}
+                                   {...register("date")}/>
+
+
                         </div>
+                    </div>
 
-                    </form>
-                </div>
-            </Modal>
-        </div>)
+                    <div className="aligned">
+                        <button className="submit-btn"> Submit</button>
+                    </div>
+
+                </form>
+            </div>
+        </Modal>
+    </div>)
 }
