diff --git a/.env b/.env
new file mode 100644
index 0000000..b27ed78
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+REACT_APP_OPENAI_API_KEY=your_api_key
diff --git a/package.json b/package.json
index bf489db..8466859 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "axios": "^1.7.7",
     "eslint": "^8.40.0",
     "eslint-plugin-react": "^7.32.2",
 
diff --git a/src/RefineDescription.js b/src/RefineDescription.js
new file mode 100644
index 0000000..5db8a37
--- /dev/null
+++ b/src/RefineDescription.js
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const RefineDescription = ({ description, setDescription }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const fetchRefinedDescription = async () => {
+        setLoading(true);
+        setError('');
+
+        try {
+            const response = await axios.post('https://api.openai.com/v1/chat/completions', {
+                model: "gpt-3.5-turbo",
+                messages: [{ role: "user", content: description }],
+                max_tokens: 50,
+            }, {
+                headers: {
+                    'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            // Ensure response contains choices and a message
+            if (response.data.choices && response.data.choices.length > 0) {
+                setDescription(response.data.choices[0].message.content);
+            } else {
+                throw new Error('No choices received from the API.');
+            }
+        } catch (err) {
+            setError('Failed to fetch refined description. Please try again.');
+            console.error('Error fetching refined description:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div>
+            {loading && <p>Loading...</p>}
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            <button onClick={fetchRefinedDescription} disabled={loading}>
+                Refine Description
+            </button>
+        </div>
+    );
+};
+
+export default RefineDescription;
diff --git a/src/components/education/EducationForm.jsx b/src/components/education/EducationForm.jsx
index 9b9228d..894b0ef 100644
--- a/src/components/education/EducationForm.jsx
+++ b/src/components/education/EducationForm.jsx
@@ -1,106 +1,197 @@
-import { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
+import RefineDescription from "../../RefineDescription";
 import Dropzone from "../Dropzone";
 
-const EducationForm = () => {
+function ExperienceForm({ onSubmit, onCancel }) {
   const [formData, setFormData] = useState({
-    course: "",
-    school: "",
+    title: "",
+    company: "",
     start_date: "",
     end_date: "",
-    grade: "",
+    description: "",
     logo: "",
+    isCurrent: false,
   });
 
-  const handleChange = (field) => (e) => {
-    e.preventDefault();
+  const [errors, setErrors] = useState({});
+
+  const modalRef = useRef();
+
+  const handleClickOutside = (e) => {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      onCancel(); // Close the form if clicked outside
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFormData({ ...formData, logo: reader.result });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleCheckboxChange = () => {
+    setFormData((prev) => ({
+      ...prev,
+      isCurrent: !prev.isCurrent,
+      end_date: "",
+    }));
+  };
 
-    setFormData({
-      ...formData,
-      [field]: e.currentTarget.value,
-    });
+  const validateDates = () => {
+    if (!formData.isCurrent && formData.end_date) {
+      if (new Date(formData.end_date) < new Date(formData.start_date)) {
+        setErrors({ end_date: "End date cannot be earlier than start date" });
+        return false;
+      }
+    }
+    setErrors({});
+    return true;
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    fetch("http://127.0.0.1:5000/resume/education", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(formData),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        alert("Education successfully added!");
-      })
-      .catch((error) => {
-        alert("Error: Education not added :(");
-      });
+    if (!validateDates()) return;
+
+    const experienceData = {
+      title: formData.title,
+      company: formData.company,
+      start_date: formData.start_date,
+      end_date: formData.isCurrent ? "Present" : formData.end_date,
+      description: formData.description,
+      logo: formData.logo,
+    };
+
+    onSubmit(experienceData);
   };
 
   return (
-    <>
-      <div className="education-form-container">
-        <form onSubmit={handleSubmit}>
-          <label>
-            <h2>Course</h2>
-            <input
-              type="text"
-              value={formData.course}
-              placeholder="Course"
-              onChange={handleChange("course")}
-            />
-          </label>
+    <div className="experienceForm modal-overlay">
+      <div className="experienceForm modal experienceModal" ref={modalRef}>
+        <button className="close-button" onClick={onCancel}>
+          &times;
+        </button>
+
+        <form onSubmit={handleSubmit} className="experienceForm">
+          {formData.logo && (
+            <div className="logoPreviewContainer">
+              <img src={formData.logo} alt="Logo" className="logoPreview" />
+            </div>
+          )}
+          <div className="fileUploadContainer">
+            <label className="fullWidth">
+              Logo:
+              <input type="file" name="logo" onChange={handleFileChange} />
+            </label>
+          </div>
+          <div className="row">
+            <label>
+              Title:
+              <input
+                type="text"
+                name="title"
+                value={formData.title}
+                onChange={handleChange}
+                required
+              />
+            </label>
+            <label>
+              Company:
+              <input
+                type="text"
+                name="company"
+                value={formData.company}
+                onChange={handleChange}
+                required
+              />
+            </label>
+          </div>
+
+          <div className="row">
+            <label>
+              Start Date:
+              <input
+                type="date"
+                name="start_date"
+                value={formData.start_date}
+                onChange={handleChange}
+                required
+              />
+            </label>
+            <label>
+              End Date:
+              <input
+                type="date"
+                name="end_date"
+                value={formData.isCurrent ? "" : formData.end_date}
+                onChange={handleChange}
+                disabled={formData.isCurrent}
+              />
+              {errors.end_date && (
+                <span className="error" style={{ color: "red" }}>
+                  {errors.end_date}
+                </span>
+              )}
+            </label>
+          </div>
+
           <label>
-            <h2>School</h2>
             <input
-              type="text"
-              value={formData.school}
-              placeholder="School"
-              onChange={handleChange("school")}
+              type="checkbox"
+              name="isCurrent"
+              checked={formData.isCurrent}
+              onChange={handleCheckboxChange}
             />
+            Current Job
           </label>
-          <label>
-            <h2>Start Date</h2>
-            <input
-              type="month"
-              value={formData.start_date}
-              placeholder="Month Year"
-              onChange={handleChange("start_date")}
+          <label className="fullWidth">
+            Description:
+            <textarea
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              style={{ width: "100%", height: "100px" }}
             />
-          </label>
-          <label>
-            <h2>End Date</h2>
-            <input
-              type="month"
-              value={formData.end_date}
-              placeholder="End Date"
-              onChange={handleChange("end_date")}
+            <RefineDescription
+              description={formData.description}
+              setDescription={(refinedDescription) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  description: refinedDescription,
+                }))
+              }
             />
-          </label>
-          <label>
-            <h2>Grade</h2>
-            <input
-              type="number"
-              min="0"
-              max="100"
-              value={formData.grade}
-              placeholder="Grade"
-              onChange={handleChange("grade")}
-            />
-            %
-          </label>
-          <label>
             <h2>Logo</h2>
             <Dropzone />
           </label>
 
-          <button onSubmit={handleSubmit}>Submit Education</button>
+          <div className="buttonRow">
+            <button type="submit">Submit</button>
+            <button type="button" name="cancel" onClick={onCancel}>
+              Cancel
+            </button>
+          </div>
         </form>
       </div>
-    </>
+    </div>
   );
-};
+}
 
-export default EducationForm;
+export default ExperienceForm;