diff --git a/src/components/CVPreview/CVEducation.jsx b/src/components/CVPreview/CVEducation.jsx
new file mode 100644
index 0000000..4a10055
--- /dev/null
+++ b/src/components/CVPreview/CVEducation.jsx
@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import { FaEdit, FaSave, FaTimes, FaPlus, FaMinus } from 'react-icons/fa';
+import styles from './CVEducation.module.css';
+
+const CVEducation = ({ education = [], onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState([...education]);
+
+  const handleChange = (index, field, value) => {
+    const newData = [...editData];
+    newData[index] = {
+      ...newData[index],
+      [field]: value
+    };
+    setEditData(newData);
+  };
+
+  const addEducation = () => {
+    setEditData([
+      ...editData,
+      {
+        program: '',
+        institution: '',
+        startDate: '',
+        endDate: '',
+        highlights: ''
+      }
+    ]);
+  };
+
+  const removeEducation = (index) => {
+    const newData = [...editData];
+    newData.splice(index, 1);
+    setEditData(newData);
+  };
+
+  const handleSave = () => {
+    onSave(editData);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditData([...education]);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className={styles.section}>
+        <div className={styles['section-header-container']}>
+          <h2 className={styles['section-header']}>Education</h2>
+          <div className={styles['button-group']}>
+            <button onClick={handleSave} className={styles['save-button']}>
+              <FaSave /> Save
+            </button>
+            <button onClick={handleCancel} className={styles['cancel-button']}>
+              <FaTimes /> Cancel
+            </button>
+          </div>
+        </div>
+        <hr className={styles.line} />
+        
+        {editData.map((edu, index) => (
+          <div key={index} className={styles['edit-item']}>
+            <div className={styles['form-group']}>
+              <label>Program:</label>
+              <input
+                value={edu.program || ''}
+                onChange={(e) => handleChange(index, 'program', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Institution:</label>
+              <input
+                value={edu.institution || ''}
+                onChange={(e) => handleChange(index, 'institution', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Start Date:</label>
+              <input
+                value={edu.startDate || ''}
+                onChange={(e) => handleChange(index, 'startDate', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>End Date:</label>
+              <input
+                value={edu.endDate || ''}
+                onChange={(e) => handleChange(index, 'endDate', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Highlights:</label>
+              <textarea
+                value={edu.highlights || ''}
+                onChange={(e) => handleChange(index, 'highlights', e.target.value)}
+              />
+            </div>
+            <button 
+              onClick={() => removeEducation(index)} 
+              className={styles['remove-button']}
+            >
+              <FaMinus /> Remove
+            </button>
+          </div>
+        ))}
+        
+        <button onClick={addEducation} className={styles['add-button']}>
+          <FaPlus /> Add Education
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.section}>
+      <div className={styles['section-header-container']}>
+        <h2 className={styles['section-header']}>Education</h2>
+        <button 
+          onClick={() => setIsEditing(true)} 
+          className={styles['edit-button']}
+        >
+          <FaEdit /> Edit
+        </button>
+      </div>
+      <hr className={styles.line} />
+      <div className={styles['education-list']}>
+        {education.map((edu, index) => (
+          <div key={index} className={styles['education-item']}>
+            <h3 className={styles['degree-info']}>
+              {edu.program || 'Program Not Specified'}
+            </h3>
+            <div className={styles['institution-info']}>
+              {edu.institution || 'Institution Not Specified'}
+            </div>
+            <div className={styles['education-duration']}>
+              {edu.startDate && (
+                <span className={styles['education-date']}>
+                  {edu.startDate}
+                </span>
+              )}
+              {edu.endDate && (
+                <>
+                  <span className={styles['education-date-separator']}> - </span>
+                  <span className={styles['education-date']}>
+                    {edu.endDate}
+                  </span>
+                </>
+              )}
+            </div>
+            {edu.highlights && (
+              <div className={styles['education-highlights']}>
+                {edu.highlights.split('\n').map((paragraph, pIndex) => (
+                  <p key={pIndex} className={styles['education-paragraph']}>
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CVEducation;
\ No newline at end of file
diff --git a/src/components/CVPreview/CVEducation.module.css b/src/components/CVPreview/CVEducation.module.css
new file mode 100644
index 0000000..e467266
--- /dev/null
+++ b/src/components/CVPreview/CVEducation.module.css
@@ -0,0 +1,97 @@
+.education-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.education-item {
+    padding: 1rem;
+    background-color: var(--color-white);
+    border-radius: 0.25rem;
+    box-shadow: 0 0.063rem 0.188rem rgb(var(--color-black) / 10%);
+    page-break-inside: avoid;
+    font-family: var(--font-secondary);
+}
+
+.education-duration {
+    color: var(--color-slategrey);
+    font-size: var(--font-size-small);
+    margin-bottom: 0.75rem;
+    font-style: italic;
+    font-family: var(--font-secondary);
+}
+
+.education-date-separator {
+    margin: 0 0.25rem;
+}
+
+.education-description {
+    margin-top: 0.75rem;
+    color: var(--color-dark);
+    font-size: var(--font-size-medium);
+    line-height: 1.5;
+    font-family: var(--font-secondary);
+}
+
+.education-paragraph {
+    margin-bottom: 0.5rem;
+    text-align: justify;
+    font-family: var(--font-secondary);
+}
+
+.degree-info {
+    color: var(--color-dark);
+    font-family: var(--font-secondary);
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-semi-bold);
+}
+
+.institution-info {
+    color: var(--color-dark);
+    font-family: var(--font-secondary);
+}
+
+.education-highlights {
+    margin-top: 0.5rem;
+}
+
+.edit-button {
+    background-color: var(--color-azulblue);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button:hover {
+    background-color: var(--color-royalblue);
+}
+
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.edit-item {
+    background-color: var(--color-white);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+}
+
+@media (width <=37.5rem) {
+    .degree-info {
+        font-size: var(--font-size-medium);
+    }
+
+    .education-item {
+        padding: 0.75rem;
+    } }
\ No newline at end of file
diff --git a/src/components/CVPreview/CVExperience.jsx b/src/components/CVPreview/CVExperience.jsx
new file mode 100644
index 0000000..33d7fe9
--- /dev/null
+++ b/src/components/CVPreview/CVExperience.jsx
@@ -0,0 +1,225 @@
+import { useState } from 'react';
+import { FaEdit, FaSave, FaTimes, FaPlus, FaMinus } from 'react-icons/fa';
+import styles from './CVExperience.module.css';
+
+const CVExperience = ({ experience = [], onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState([...experience]);
+
+  const handleChange = (index, field, value) => {
+    const newData = [...editData];
+    newData[index] = {
+      ...newData[index],
+      [field]: value
+    };
+    setEditData(newData);
+  };
+
+  const handleBulletPointChange = (expIndex, bulletIndex, value) => {
+    const newData = [...editData];
+    const newBulletPoints = [...newData[expIndex].bulletPoints];
+    newBulletPoints[bulletIndex] = value;
+    newData[expIndex] = {
+      ...newData[expIndex],
+      bulletPoints: newBulletPoints
+    };
+    setEditData(newData);
+  };
+
+  const addExperience = () => {
+    setEditData([
+      ...editData,
+      {
+        companyName: '',
+        jobTitle: '',
+        startDate: '',
+        endDate: '',
+        bulletPoints: ['']
+      }
+    ]);
+  };
+
+  const addBulletPoint = (expIndex) => {
+    const newData = [...editData];
+    newData[expIndex] = {
+      ...newData[expIndex],
+      bulletPoints: [...newData[expIndex].bulletPoints, '']
+    };
+    setEditData(newData);
+  };
+
+  const removeExperience = (index) => {
+    const newData = [...editData];
+    newData.splice(index, 1);
+    setEditData(newData);
+  };
+
+  const removeBulletPoint = (expIndex, bulletIndex) => {
+    const newData = [...editData];
+    const newBulletPoints = [...newData[expIndex].bulletPoints];
+    newBulletPoints.splice(bulletIndex, 1);
+    newData[expIndex] = {
+      ...newData[expIndex],
+      bulletPoints: newBulletPoints
+    };
+    setEditData(newData);
+  };
+
+  const handleSave = () => {
+    onSave(editData);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditData([...experience]);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className={styles.section}>
+        <div className={styles['section-header-container']}>
+          <h2 className={styles['section-header']}>Professional Experience</h2>
+          <div className={styles['button-group']}>
+            <button onClick={handleSave} className={styles['save-button']}>
+              <FaSave /> Save
+            </button>
+            <button onClick={handleCancel} className={styles['cancel-button']}>
+              <FaTimes /> Cancel
+            </button>
+          </div>
+        </div>
+        <hr className={styles.line} />
+        
+        {editData.map((exp, expIndex) => (
+          <div key={expIndex} className={styles['edit-item']}>
+            <div className={styles['form-group']}>
+              <label>Company:</label>
+              <input
+                value={exp.companyName || ''}
+                onChange={(e) => handleChange(expIndex, 'companyName', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Position:</label>
+              <input
+                value={exp.jobTitle || ''}
+                onChange={(e) => handleChange(expIndex, 'jobTitle', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Start Date:</label>
+              <input
+                value={exp.startDate || ''}
+                onChange={(e) => handleChange(expIndex, 'startDate', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>End Date:</label>
+              <input
+                value={exp.endDate || ''}
+                onChange={(e) => handleChange(expIndex, 'endDate', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Bullet Points:</label>
+              {exp.bulletPoints?.map((point, bulletIndex) => (
+                <div key={bulletIndex} className={styles['bullet-point-group']}>
+                  <textarea
+                    value={point}
+                    onChange={(e) => 
+                      handleBulletPointChange(expIndex, bulletIndex, e.target.value)
+                    }
+                  />
+                  <button
+                    onClick={() => removeBulletPoint(expIndex, bulletIndex)}
+                    className={styles['remove-button']}
+                  >
+                    <FaMinus /> Remove
+                  </button>
+                </div>
+              ))}
+              <button
+                onClick={() => addBulletPoint(expIndex)}
+                className={styles['add-button']}
+              >
+                <FaPlus /> Add Bullet Point
+              </button>
+            </div>
+            <button
+              onClick={() => removeExperience(expIndex)}
+              className={styles['remove-button']}
+            >
+              <FaMinus /> Remove Experience
+            </button>
+          </div>
+        ))}
+        
+        <button onClick={addExperience} className={styles['add-button']}>
+          <FaPlus /> Add Experience
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.section}>
+      <div className={styles['section-header-container']}>
+        <h2 className={styles['section-header']}>Professional Experience</h2>
+        <button 
+          onClick={() => setIsEditing(true)} 
+          className={styles['edit-button']}
+        >
+          <FaEdit /> Edit
+        </button>
+      </div>
+      <hr className={styles.line} />
+      {experience && experience.length > 0 ? (
+        experience.map((exp, index) => (
+          <div key={index} className={styles['experience-item']}>
+            <div className={styles['experience-header']}>
+              <div>
+                <h3 className={styles['job-title']}>{exp.jobTitle}</h3>
+                <div className={styles['company-info']}>
+                  <div>
+                    <span className={styles['company-name']}>
+                      {exp.companyName}
+                    </span>
+                  </div>
+                  <div>
+                    {(exp.startDate || exp.endDate) && (
+                      <span className={styles['job-duration']}>
+                        {exp.startDate} - {exp.endDate}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+            {exp.bulletPoints && exp.bulletPoints.length > 0 ? (
+              <ul className={styles['responsibilities-list']}>
+                {exp.bulletPoints.map((point, i) => (
+                  <li key={i} className={styles['responsibility-item']}>
+                    {point}
+                  </li>
+                ))}
+              </ul>
+            ) : exp.description ? (
+              <div className={styles['job-description']}>
+                {exp.description.split('\n').map((paragraph, pIndex) => (
+                  <p key={pIndex} className={styles['job-paragraph']}>
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ))
+      ) : (
+        <p className={styles['no-data']}>No experience data available</p>
+      )}
+    </div>
+  );
+};
+
+export default CVExperience;
\ No newline at end of file
diff --git a/src/components/CVPreview/CVExperience.module.css b/src/components/CVPreview/CVExperience.module.css
new file mode 100644
index 0000000..9acdf54
--- /dev/null
+++ b/src/components/CVPreview/CVExperience.module.css
@@ -0,0 +1,121 @@
+.experience-item {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background-color: var(--color-white);
+    border-radius: 0.25rem;
+    box-shadow: 0 0.063rem 0.188rem rgb(var(--color-black) / 10%);
+}
+
+.experience-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 0.5rem;
+}
+
+.job-title {
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-semi-bold);
+    color: var(--color-dark);
+    margin-bottom: 0.25rem;
+    font-family: var(--font-secondary);
+}
+
+.company-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.company-name {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-azulblue);
+    font-family: var(--font-secondary);
+    margin-right: 1.25rem;
+}
+
+.job-duration {
+    color: var(--color-azulblue);
+    font-size: var(--font-size-small);
+    font-family: var(--font-secondary);
+}
+
+.responsibilities-list {
+    padding-left: 1.25rem;
+    margin-top: 0.5rem;
+}
+
+.responsibility-item {
+    position: relative;
+    padding-left: 0.5rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.5;
+    color: var(--color-dark);
+    font-size: var(--font-size-medium);
+    font-family: var(--font-secondary);
+}
+
+.responsibility-item::before {
+    content: "•";
+    position: absolute;
+    left: -0.75rem;
+    color: var(--color-azulblue);
+    font-weight: var(--font-weight-bold);
+}
+
+.job-description {
+    margin-top: 0.5rem;
+    color: var(--color-dark);
+    font-size: var(--font-size-medium);
+    line-height: 1.5;
+    font-family: var(--font-secondary);
+}
+
+.job-paragraph {
+    margin-bottom: 0.5rem;
+}
+
+.edit-button {
+    background-color: var(--color-azulblue);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button:hover {
+    background-color: var(--color-royalblue);
+}
+
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.edit-item {
+    background-color: var(--color-white);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+}
+
+.bullet-point-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+@media (width <=37.5rem) {
+    .experience-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    } }
\ No newline at end of file
diff --git a/src/components/CVPreview/CVHeader.jsx b/src/components/CVPreview/CVHeader.jsx
new file mode 100644
index 0000000..1cce377
--- /dev/null
+++ b/src/components/CVPreview/CVHeader.jsx
@@ -0,0 +1,198 @@
+import {
+  FaPhone,
+  FaEnvelope,
+  FaLinkedin,
+  FaGithub,
+  FaExternalLinkAlt,
+  FaEdit,
+  FaSave,
+  FaTimes
+} from 'react-icons/fa';
+import styles from './CVHeader.module.css';
+import { useState } from 'react';
+
+const CVHeader = ({ fullName, contact, onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState({
+    fullName: fullName || '',
+    contact: { ...contact }
+  });
+
+  const handleInputChange = (field, value) => {
+    setEditData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleContactChange = (field, value) => {
+    setEditData(prev => ({
+      ...prev,
+      contact: {
+        ...prev.contact,
+        [field]: value
+      }
+    }));
+  };
+
+  const handleSave = () => {
+    onSave({
+      fullName: editData.fullName,
+      contact: editData.contact
+    });
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditData({
+      fullName: fullName || '',
+      contact: { ...contact }
+    });
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className={styles['user-section']}>
+        <div className={styles['edit-form']}>
+          <div className={styles['form-group']}>
+            <label>Full Name:</label>
+            <input
+              type="text"
+              value={editData.fullName}
+              onChange={(e) => handleInputChange('fullName', e.target.value)}
+            />
+          </div>
+
+          <div className={styles['contact-section']}>
+            <h3>Contact Information</h3>
+            {['email', 'phone', 'linkedin', 'github', 'portfolio'].map(
+              (field) => (
+                <div key={field} className={styles['form-group']}>
+                  <label>
+                    {field.charAt(0).toUpperCase() + field.slice(1)}:
+                  </label>
+                  <input
+                    type="text"
+                    value={editData.contact[field] || ''}
+                    onChange={(e) => handleContactChange(field, e.target.value)}
+                  />
+                </div>
+              )
+            )}
+          </div>
+
+          <div className={styles['button-group']}>
+            <button onClick={handleSave} className={styles['save-button']}>
+              <FaSave /> Save
+            </button>
+            <button onClick={handleCancel} className={styles['cancel-button']}>
+              <FaTimes /> Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles['user-section']}>
+      <div className={styles['header-edit-container']}>
+        <h1 className={styles['cv-username']}>
+          {fullName || 'Professional Profile'}
+        </h1>
+        <button 
+          onClick={() => setIsEditing(true)} 
+          className={styles['edit-button']}
+        >
+          <FaEdit /> Edit
+        </button>
+      </div>
+      <div className={styles['personal-details']}>
+        <div className={styles['email-and-phone-box']}>
+          {contact.email && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                <FaEnvelope className={styles['icon-color']} />{' '}
+              </span>
+              {contact.email}
+            </p>
+          )}
+
+          {contact.phone && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                <FaPhone className={styles['icon-color']} />{' '}
+              </span>
+              +34 {contact.phone}
+            </p>
+          )}
+        </div>
+
+        <div className={styles['github-portfolio-linkedin-box']}>
+          {contact.linkedin && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                <FaLinkedin className={styles['icon-color']} />{' '}
+              </span>
+              <a
+                href={
+                  contact.linkedin.startsWith('http')
+                    ? contact.linkedin
+                    : `https://${contact.linkedin}`
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles['contact-link']}
+              >
+                LinkedIn
+              </a>
+            </p>
+          )}
+
+          {contact.github && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                <FaGithub className={styles['icon-color']} />{' '}
+              </span>
+              <a
+                href={
+                  contact.github.startsWith('http')
+                    ? contact.github
+                    : `https://github.com/${contact.github}`
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles['contact-link']}
+              >
+                GitHub
+              </a>
+            </p>
+          )}
+
+          {contact.portfolio && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                <FaExternalLinkAlt className={styles['icon-color']} />{' '}
+              </span>
+              <a
+                href={
+                  contact.portfolio.startsWith('http')
+                    ? contact.portfolio
+                    : `https://${contact.portfolio}`
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles['contact-link']}
+              >
+                Portfolio
+              </a>
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CVHeader;
\ No newline at end of file
diff --git a/src/components/CVPreview/CVHeader.module.css b/src/components/CVPreview/CVHeader.module.css
new file mode 100644
index 0000000..7f39294
--- /dev/null
+++ b/src/components/CVPreview/CVHeader.module.css
@@ -0,0 +1,125 @@
+.user-section {
+    display: grid;
+    grid-template-rows: 0.2fr 1fr;
+    justify-items: center;
+    background-color: var(--color-paleskyblue);
+    margin-bottom: 2rem;
+    padding: 1rem;
+}
+
+.header-edit-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.cv-username {
+    margin-bottom: 0.5rem;
+    font-family: var(--font-secondary);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-white);
+    font-size: 2rem;
+}
+
+.edit-button {
+    background-color: var(--color-azulblue);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button:hover {
+    background-color: var(--color-royalblue);
+}
+
+.personal-details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+}
+
+.email-and-phone-box {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.github-portfolio-linkedin-box {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.contact-info {
+    margin-bottom: 0.3rem;
+    color: var(--color-white);
+    font-family: var(--font-secondary);
+    display: flex;
+    align-items: center;
+}
+
+.contact-label {
+    font-weight: var(--font-weight-semi-bold);
+    color: var(--color-white);
+    font-family: var(--font-secondary);
+    margin-right: 0.5rem;
+}
+
+.contact-link {
+    color: var(--color-white);
+    text-decoration: none;
+    font-family: var(--font-secondary);
+    transition: text-decoration 0.3s ease;
+}
+
+.contact-link:hover {
+    text-decoration: underline;
+}
+
+.icon-color {
+    color: var(--color-white);
+    margin-right: 0.5rem;
+}
+
+.edit-form {
+    width: 100%;
+    background-color: var(--color-white);
+    padding: 1rem;
+    border-radius: 0.5rem;
+}
+
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.contact-section {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background-color: var(--color-lightgrey);
+    border-radius: 0.5rem;
+}
+
+@media (width <=37.5rem) {
+
+    .email-and-phone-box,
+    .github-portfolio-linkedin-box {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: center;
+    }
+
+    .cv-username {
+        font-size: 1.5rem;
+    } }
\ No newline at end of file
diff --git a/src/components/CVPreview/CVPreview.jsx b/src/components/CVPreview/CVPreview.jsx
index 3110149..912b269 100644
--- a/src/components/CVPreview/CVPreview.jsx
+++ b/src/components/CVPreview/CVPreview.jsx
@@ -1,1062 +1,184 @@
 import React, { useState, useEffect } from 'react';
-import {
-  FaPhone,
-  FaEnvelope,
-  FaLinkedin,
-  FaGithub,
-  FaExternalLinkAlt,
-} from 'react-icons/fa';
 import styles from './CVPreview.module.css';
-
-const CVPreview = React.forwardRef(
-  ({ cvData, onSave, personalInfo, onEditModeChange }, ref) => {
-    const [isEditing, setIsEditing] = useState(false);
-    const [editedData, setEditedData] = useState({});
-
-    const parseCvData = (data) => {
-      if (!data) return {};
-
-      let parsedData = data;
-
-      if (typeof data === 'string') {
-        try {
-          parsedData = JSON.parse(data);
-        } catch (error) {
-          console.error('Error parsing cvData:', error);
-          return {};
-        }
-      }
-
-      let experienceArray = [];
-      if (Array.isArray(parsedData.experience)) {
-        experienceArray = parsedData.experience.map((exp) => {
-          if (typeof exp === 'string') {
-            return { bulletPoints: [exp] };
-          } else if (Array.isArray(exp.description)) {
-            return { bulletPoints: exp.description };
-          }
-          return exp;
-        });
-      } else if (parsedData.transferableExperience) {
-        if (Array.isArray(parsedData.transferableExperience)) {
-          experienceArray = parsedData.transferableExperience.map((exp) => ({
-            companyName: exp.company,
-            jobTitle: exp.position,
-            startDate: exp.startDate,
-            endDate: exp.endDate,
-            bulletPoints: exp.achievements || [],
-          }));
-        } else {
-          experienceArray = [
-            {
-              companyName: parsedData.transferableExperience.company,
-              jobTitle: parsedData.transferableExperience.position,
-              startDate: parsedData.transferableExperience.startDate,
-              endDate: parsedData.transferableExperience.endDate,
-              bulletPoints:
-                parsedData.transferableExperience.achievements || [],
-            },
-          ];
-        }
-      }
-
-      let skillsData = [];
-      if (Array.isArray(parsedData.skills)) {
-        skillsData = parsedData.skills;
-      } else if (parsedData.skills && typeof parsedData.skills === 'object') {
-        skillsData = [
-          ...(parsedData.skills.technical || []),
-          ...(parsedData.skills.soft || []),
-        ];
+import CVHeader from './CVHeader';
+import CVSummary from './CVSummary';
+import CVSkills from './CVSkills';
+import CVExperience from './CVExperience';
+import CVProjects from './CVProjects';
+import CVEducation from './CVEducation';
+
+const CVPreview = React.forwardRef(({ cvData, onSave, personalInfo }, ref) => {
+  const [cvState, setCvState] = useState({});
+
+  const parseCvData = (data) => {
+    if (!data) return {};
+
+    let parsedData = data;
+
+    if (typeof data === 'string') {
+      try {
+        parsedData = JSON.parse(data);
+      } catch (error) {
+        console.error('Error parsing cvData:', error);
+        return {};
       }
-
-      return {
-        fullName:
-          personalInfo.fullName ||
-          personalInfo.name ||
-          personalInfo.personalInfo?.fullName ||
-          '',
-        contact: {
-          email:
-            personalInfo.contact?.email ||
-            personalInfo.email ||
-            personalInfo.personalInfo?.email ||
-            '',
-          phone:
-            personalInfo.contact?.phone ||
-            personalInfo.phone ||
-            personalInfo.personalInfo?.phone ||
-            '',
-          linkedin:
-            personalInfo.contact?.linkedin ||
-            personalInfo.linkedin ||
-            personalInfo.personalInfo?.linkedin ||
-            '',
-          github:
-            personalInfo.contact?.github ||
-            personalInfo.github ||
-            personalInfo.personalInfo?.github ||
-            '',
-          portfolio:
-            personalInfo.contact?.portfolio ||
-            personalInfo.portfolio ||
-            personalInfo.personalInfo?.portfolio ||
-            '',
-        },
-        professional_summary:
-          parsedData.professionalSummary ||
-          parsedData.professional_summary ||
-          '',
-        experience: experienceArray,
-        projects: Array.isArray(parsedData.projects) ? parsedData.projects : [],
-        education: Array.isArray(parsedData.education)
-          ? parsedData.education
-          : [],
-        skills: skillsData,
-      };
-    };
-
-    useEffect(() => {
-      const parsedData = parseCvData(cvData);
-      setEditedData(parsedData);
-    }, [cvData]);
-
-    if (!cvData)
-      return <p className={styles['no-data']}>No CV data available</p>;
-
-    const parsedCvData = parseCvData(cvData);
-
-    if (!parsedCvData || Object.keys(parsedCvData).length === 0) {
-      return (
-        <p className={styles['no-data']}>Invalid or empty CV data format</p>
-      );
     }
 
-    const handleInputChange = (field, value) => {
-      setEditedData((prev) => ({
-        ...prev,
-        [field]: value,
-      }));
-    };
-
-    const handleContactChange = (field, value) => {
-      setEditedData((prev) => ({
-        ...prev,
-        contact: {
-          ...prev.contact,
-          [field]: value,
-        },
-      }));
-    };
-
-    const handleArrayChange = (arrayName, index, field, value) => {
-      setEditedData((prev) => ({
-        ...prev,
-        [arrayName]:
-          prev[arrayName]?.map((item, i) =>
-            i === index ? { ...item, [field]: value } : item
-          ) || [],
-      }));
-    };
-
-    const handleBulletPointChange = (expIndex, bulletIndex, value) => {
-      setEditedData((prev) => ({
-        ...prev,
-        experience:
-          prev.experience?.map((exp, i) =>
-            i === expIndex
-              ? {
-                  ...exp,
-                  bulletPoints:
-                    exp.bulletPoints?.map((point, j) =>
-                      j === bulletIndex ? value : point
-                    ) || [],
-                }
-              : exp
-          ) || [],
-      }));
-    };
-    const handleExperienceChange = (expIndex, field, value) => {
-      setEditedData((prev) => {
-        const newExperience = [...prev.experience];
-        newExperience[expIndex] = {
-          ...newExperience[expIndex],
-          [field]: value,
-        };
-        return {
-          ...prev,
-          experience: newExperience,
-        };
+    let experienceArray = [];
+    if (Array.isArray(parsedData.experience)) {
+      experienceArray = parsedData.experience.map((exp) => {
+        if (typeof exp === 'string') {
+          return { bulletPoints: [exp] };
+        } else if (Array.isArray(exp.description)) {
+          return { bulletPoints: exp.description };
+        }
+        return exp;
       });
-    };
-
-    const addExperience = () => {
-      setEditedData((prev) => ({
-        ...prev,
-        experience: [
-          ...(prev.experience || []),
+    } else if (parsedData.transferableExperience) {
+      if (Array.isArray(parsedData.transferableExperience)) {
+        experienceArray = parsedData.transferableExperience.map((exp) => ({
+          companyName: exp.company,
+          jobTitle: exp.position,
+          startDate: exp.startDate,
+          endDate: exp.endDate,
+          bulletPoints: exp.achievements || [],
+        }));
+      } else {
+        experienceArray = [
           {
-            companyName: '',
-            jobTitle: '',
-            startDate: '',
-            endDate: '',
-            bulletPoints: [''],
+            companyName: parsedData.transferableExperience.company,
+            jobTitle: parsedData.transferableExperience.position,
+            startDate: parsedData.transferableExperience.startDate,
+            endDate: parsedData.transferableExperience.endDate,
+            bulletPoints: parsedData.transferableExperience.achievements || [],
           },
-        ],
-      }));
-    };
-
-    const addProject = () => {
-      setEditedData((prev) => ({
-        ...prev,
-        projects: [
-          ...(prev.projects || []),
-          {
-            name: '',
-            description: '',
-            deployedWebsite: '',
-            githubLink: '',
-            technologiesUsed: [],
-          },
-        ],
-      }));
-    };
-
-    const addEducation = () => {
-      setEditedData((prev) => ({
-        ...prev,
-        education: [
-          ...(prev.education || []),
-          {
-            program: '',
-            institution: '',
-            duration: '',
-            highlights: '',
-          },
-        ],
-      }));
-    };
-
-    const removeItem = (arrayName, index) => {
-      setEditedData((prev) => ({
-        ...prev,
-        [arrayName]: prev[arrayName]?.filter((_, i) => i !== index) || [],
-      }));
-    };
-
-    const addBulletPoint = (expIndex) => {
-      setEditedData((prev) => ({
-        ...prev,
-        experience:
-          prev.experience?.map((exp, i) =>
-            i === expIndex
-              ? {
-                  ...exp,
-                  bulletPoints: [...(exp.bulletPoints || []), ''],
-                }
-              : exp
-          ) || [],
-      }));
-    };
-
-    const removeBulletPoint = (expIndex, bulletIndex) => {
-      setEditedData((prev) => ({
-        ...prev,
-        experience:
-          prev.experience?.map((exp, i) =>
-            i === expIndex
-              ? {
-                  ...exp,
-                  bulletPoints:
-                    exp.bulletPoints?.filter((_, j) => j !== bulletIndex) || [],
-                }
-              : exp
-          ) || [],
-      }));
-    };
+        ];
+      }
+    }
 
-    const handleSave = () => {
-      setIsEditing(false);
-      if (onSave) onSave(editedData);
-      if (onEditModeChange) onEditModeChange(false);
-    };
+    let skillsData = [];
+    if (Array.isArray(parsedData.skills)) {
+      skillsData = parsedData.skills;
+    } else if (parsedData.skills && typeof parsedData.skills === 'object') {
+      skillsData = [
+        ...(parsedData.skills.technical || []),
+        ...(parsedData.skills.soft || []),
+      ];
+    }
 
-    const handleCancel = () => {
-      const parsedData = parseCvData(cvData);
-      setEditedData({
-        fullName: parsedData.fullName || '',
-        contact: parsedData.contact || {},
-        professional_summary:
-          parsedData.professional_summary ||
-          parsedData.professionalSummary ||
+    return {
+      fullName:
+        personalInfo.fullName ||
+        personalInfo.name ||
+        personalInfo.personalInfo?.fullName ||
+        '',
+      contact: {
+        email:
+          personalInfo.contact?.email ||
+          personalInfo.email ||
+          personalInfo.personalInfo?.email ||
           '',
-        experience: parsedData.experience || [],
-        projects: parsedData.projects || [],
-        education: parsedData.education || [],
-        skills: parsedData.skills || [],
-      });
-      setIsEditing(false);
-      if (onEditModeChange) onEditModeChange(false);
-    };
-
-    const handleEditClick = () => {
-      setIsEditing(true);
-      if (onEditModeChange) onEditModeChange(true);
-    };
-
-    const displayData = isEditing ? editedData : parsedCvData;
-
-    const normalizedData = {
-      fullName: displayData.fullName || '',
-      contact: displayData.contact || {},
+        phone:
+          personalInfo.contact?.phone ||
+          personalInfo.phone ||
+          personalInfo.personalInfo?.phone ||
+          '',
+        linkedin:
+          personalInfo.contact?.linkedin ||
+          personalInfo.linkedin ||
+          personalInfo.personalInfo?.linkedin ||
+          '',
+        github:
+          personalInfo.contact?.github ||
+          personalInfo.github ||
+          personalInfo.personalInfo?.github ||
+          '',
+        portfolio:
+          personalInfo.contact?.portfolio ||
+          personalInfo.portfolio ||
+          personalInfo.personalInfo?.portfolio ||
+          '',
+      },
       professional_summary:
-        displayData.professional_summary ||
-        displayData.professionalSummary ||
+        parsedData.professionalSummary ||
+        parsedData.professional_summary ||
         '',
-      experience: Array.isArray(displayData.experience)
-        ? displayData.experience
-        : [],
-      projects: Array.isArray(displayData.projects) ? displayData.projects : [],
-      education: Array.isArray(displayData.education)
-        ? displayData.education
-        : [],
-      skills: Array.isArray(displayData.skills) ? displayData.skills : [],
+      experience: experienceArray,
+      projects: Array.isArray(parsedData.projects) ? parsedData.projects : [],
+      education: Array.isArray(parsedData.education) ? parsedData.education : [],
+      skills: skillsData,
     };
+  };
 
-    const {
-      fullName,
-      contact,
-      professional_summary,
-      experience,
-      projects,
-      education,
-      skills,
-    } = normalizedData;
+  useEffect(() => {
+    const parsedData = parseCvData(cvData);
+    setCvState(parsedData);
+  }, [cvData]);
 
-    const isSoftSkill = (skill) => {
-      const skillStr = typeof skill === 'string' ? skill.toLowerCase() : '';
-      const softSkills = [
-        'communication',
-        'teamwork',
-        'leadership',
-        'problem-solving',
-        'adaptability',
-        'creativity',
-        'time management',
-        'collaboration',
-        'interpersonal',
-        'negotiation',
-        'critical thinking',
-        'emotional intelligence',
-        'team player',
-        'active listening',
-        'conflict resolution',
-        'presentation',
-        'mentoring',
-        'coaching',
-        'decision making',
-        'strategic thinking',
-      ];
-      return softSkills.some((softSkill) =>
-        skillStr.includes(softSkill.toLowerCase())
-      );
-    };
+  if (!cvData) return <p className={styles['no-data']}>No CV data available</p>;
 
-    if (isEditing) {
-      return (
-        <div ref={ref} className={styles['cv-container']}>
-          <div
-            className={`${styles['button-container']} ${styles['no-print']}`}
-          >
-            <button onClick={handleSave} className={styles['save-button']}>
-              Save Changes
-            </button>
-            <button onClick={handleCancel} className={styles['cancel-button']}>
-              Cancel
-            </button>
-          </div>
+  const parsedCvData = parseCvData(cvData);
 
-          <div className={styles['form-group']}>
-            <label className={styles.label}>Full Name:</label>
-            <input
-              type="text"
-              value={fullName}
-              onChange={(e) => handleInputChange('fullName', e.target.value)}
-              className={styles.input}
-            />
-          </div>
-
-          <div className={styles['contact-section']}>
-            <h3 className={styles['section-title']}>Contact Information</h3>
-            {['email', 'phone', 'linkedin', 'github', 'portfolio'].map(
-              (field) => (
-                <div key={field} className={styles['small-form-group']}>
-                  <label className={styles.label}>
-                    {field.charAt(0).toUpperCase() + field.slice(1)}:
-                  </label>
-                  <input
-                    type="text"
-                    value={contact[field] || ''}
-                    onChange={(e) => handleContactChange(field, e.target.value)}
-                    className={styles.input}
-                  />
-                </div>
-              )
-            )}
-          </div>
-
-          <div className={styles['form-group']}>
-            <label className={styles.label}>Professional Summary:</label>
-            <textarea
-              value={professional_summary}
-              onChange={(e) =>
-                handleInputChange('professional_summary', e.target.value)
-              }
-              className={styles.textarea}
-            />
-          </div>
-
-          <div>
-            <h3 className={styles['section-title']}>Experience</h3>
-            {experience.map((exp, expIndex) => (
-              <div key={expIndex} className={styles['section-container']}>
-                <div className={styles['form-group']}>
-                  <label className={styles.label}>Company:</label>
-                  <input
-                    value={exp.companyName || ''}
-                    onChange={(e) =>
-                      handleExperienceChange(
-                        expIndex,
-                        'companyName',
-                        e.target.value
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <div className={styles['form-group']}>
-                  <label className={styles.label}>Position:</label>
-                  <input
-                    value={exp.jobTitle || ''}
-                    onChange={(e) =>
-                      handleExperienceChange(
-                        expIndex,
-                        'jobTitle',
-                        e.target.value
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <div className={styles['form-group']}>
-                  <label className={styles.label}>Start Date:</label>
-                  <input
-                    value={exp.startDate || ''}
-                    onChange={(e) =>
-                      handleExperienceChange(
-                        expIndex,
-                        'startDate',
-                        e.target.value
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <div className={styles['form-group']}>
-                  <label className={styles.label}>End Date:</label>
-                  <input
-                    value={exp.endDate || ''}
-                    onChange={(e) =>
-                      handleExperienceChange(
-                        expIndex,
-                        'endDate',
-                        e.target.value
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <div className={styles['form-group']}>
-                  <label className={styles.label}>Bullet Points:</label>
-                  {exp.bulletPoints?.map((point, bulletIndex) => (
-                    <div
-                      key={bulletIndex}
-                      className={styles['bullet-point-container']}
-                    >
-                      <textarea
-                        value={point}
-                        onChange={(e) =>
-                          handleBulletPointChange(
-                            expIndex,
-                            bulletIndex,
-                            e.target.value
-                          )
-                        }
-                        className={styles['small-textarea']}
-                      />
-                      <button
-                        onClick={() => removeBulletPoint(expIndex, bulletIndex)}
-                        className={styles['remove-button']}
-                      >
-                        Remove
-                      </button>
-                    </div>
-                  ))}
-                  <button
-                    onClick={() => addBulletPoint(expIndex)}
-                    className={styles['add-button']}
-                  >
-                    Add Bullet Point
-                  </button>
-                </div>
-                <button
-                  onClick={() => removeItem('experience', expIndex)}
-                  className={styles['remove-button']}
-                >
-                  Remove Experience
-                </button>
-              </div>
-            ))}
-            <button onClick={addExperience} className={styles['add-button']}>
-              Add Experience
-            </button>
-          </div>
-
-          <div className={styles['form-group']}>
-            <label className={styles.label}>Skills (comma separated):</label>
-            <textarea
-              value={skills.join(', ')}
-              onChange={(e) => {
-                const newSkills = e.target.value
-                  .split(',')
-                  .map((skill) => skill.trim())
-                  .filter((skill) => skill);
-                handleInputChange('skills', newSkills);
-              }}
-              className={styles.textarea}
-              placeholder="Enter skills separated by commas"
-            />
-          </div>
+  if (!parsedCvData || Object.keys(parsedCvData).length === 0) {
+    return <p className={styles['no-data']}>Invalid or empty CV data format</p>;
+  }
 
-          <div>
-            <h3 className={styles['section-title']}>Projects</h3>
-            {projects.map((project, index) => (
-              <div key={index} className={styles['section-container']}>
-                <div className={styles['small-form-group']}>
-                  <label className={styles.label}>Project Name:</label>
-                  <input
-                    type="text"
-                    value={project.name || ''}
-                    onChange={(e) =>
-                      handleArrayChange(
-                        'projects',
-                        index,
-                        'name',
-                        e.target.value
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <div className={styles['small-form-group']}>
-                  <label className={styles.label}>Description:</label>
-                  <textarea
-                    value={project.description || ''}
-                    onChange={(e) =>
-                      handleArrayChange(
-                        'projects',
-                        index,
-                        'description',
-                        e.target.value
-                      )
-                    }
-                    className={styles['small-textarea']}
-                  />
-                </div>
-                <div className={styles['small-form-group']}>
-                  <label className={styles.label}>Deployed Website:</label>
-                  <input
-                    type="text"
-                    value={project.deployedLink || ''}
-                    onChange={(e) =>
-                      handleArrayChange(
-                        'projects',
-                        index,
-                        'deployedLink',
-                        e.target.value
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <div className={styles['small-form-group']}>
-                  <label className={styles.label}>GitHub Link:</label>
-                  <input
-                    type="text"
-                    value={project.githubLink || ''}
-                    onChange={(e) =>
-                      handleArrayChange(
-                        'projects',
-                        index,
-                        'githubLink',
-                        e.target.value
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <div className={styles['small-form-group']}>
-                  <label className={styles.label}>Technologies Used:</label>
-                  <input
-                    type="text"
-                    value={project.technologiesUsed?.join(', ') || ''}
-                    onChange={(e) =>
-                      handleArrayChange(
-                        'projects',
-                        index,
-                        'technologiesUsed',
-                        e.target.value.split(',').map((tech) => tech.trim())
-                      )
-                    }
-                    className={styles.input}
-                  />
-                </div>
-                <button
-                  onClick={() => removeItem('projects', index)}
-                  className={styles['remove-button']}
-                >
-                  Remove Project
-                </button>
-              </div>
-            ))}
-            <button onClick={addProject} className={styles['add-button']}>
-              Add Project
-            </button>
-          </div>
+  const handleSave = (section, data) => {
+    setCvState(prev => ({
+      ...prev,
+      [section]: data
+    }));
+    
+    if (onSave) {
+      onSave({
+        ...cvState,
+        [section]: data
+      });
+    }
+  };
 
-        <div>
-          <h3 className={styles['section-title']}>Education</h3>
-          {education.map((edu, index) => (
-            <div key={index} className={styles['section-container']}>
-              <div className={styles['small-form-group']}>
-                <label className={styles.label}>Program:</label>
-                <input
-                  type="text"
-                  value={edu.program || ''}
-                  onChange={(e) =>
-                    handleArrayChange(
-                      'education',
-                      index,
-                      'program',
-                      e.target.value
-                    )
-                  }
-                  className={styles.input}
-                />
-              </div>
-              <div className={styles['small-form-group']}>
-                <label className={styles.label}>Institution:</label>
-                <input
-                  type="text"
-                  value={edu.institution || ''}
-                  onChange={(e) =>
-                    handleArrayChange(
-                      'education',
-                      index,
-                      'institution',
-                      e.target.value
-                    )
-                  }
-                  className={styles.input}
-                />
-              </div>
-              <div className={styles['small-form-group']}>
-                <label className={styles.label}>Start Date:</label>
-                <input
-                  type="text"
-                  value={edu.startDate || ''}
-                  onChange={(e) =>
-                    handleArrayChange(
-                      'education',
-                      index,
-                      'startDate',
-                      e.target.value
-                    )
-                  }
-                  className={styles.input}
-                />
-              </div>
-              <div className={styles['small-form-group']}>
-                <label className={styles.label}>End Date:</label>
-                <input
-                  type="text"
-                  value={edu.endDate || ''}
-                  onChange={(e) =>
-                    handleArrayChange(
-                      'education',
-                      index,
-                      'endDate',
-                      e.target.value
-                    )
-                  }
-                  className={styles.input}
-                />
-              </div>
-              <div className={styles['small-form-group']}>
-                <label className={styles.label}>Highlights:</label>
-                <textarea
-                  value={edu.highlights || ''}
-                  onChange={(e) =>
-                    handleArrayChange(
-                      'education',
-                      index,
-                      'highlights',
-                      e.target.value
-                    )
-                  }
-                  className={styles['small-textarea']}
-                />
-              </div>
-              <button
-                onClick={() => removeItem('education', index)}
-                className={styles['remove-button']}
-              >
-                Remove Education
-              </button>
-            </div>
-          ))}
-          <button onClick={addEducation} className={styles['add-button']}>
-            Add Education
-          </button>
-        </div>
-      </div>
-    );
-  }
+  const { fullName, contact, professional_summary, experience, projects, education, skills } = cvState;
 
   return (
     <div ref={ref} className={styles['cv-container']}>
-      <div className={styles['user-section']}>
-        <h1 className={styles['cv-username']}>
-
-          {fullName || 'Professional Profile'}
-        </h1>
-        <div className={styles['personal-details']}>
-          <div className={styles['email-and-phone-box']}>
-            {contact.email && (
-              <p className={styles['contact-info']}>
-                <span className={styles['contact-label']}>
-                  <FaEnvelope className={styles['icon-color']} />{' '}
-                </span>
-                {contact.email}
-              </p>
-            )}
-
-            {contact.phone && (
-              <p className={styles['contact-info']}>
-                <span className={styles['contact-label']}>
-                  {' '}
-                  <FaPhone className={styles['icon-color']} />{' '}
-                </span>
-                +34 {contact.phone}
-              </p>
-            )}
-          </div>
-
-          <div className={styles['github-portfolio-linkedin-box']}>
-            {contact.linkedin && (
-              <p className={styles['contact-info']}>
-                <span className={styles['contact-label']}>
-                  <FaLinkedin className={styles['icon-color']} />{' '}
-                </span>
-                <a
-                  href={
-                    contact.linkedin.startsWith('http')
-                      ? contact.linkedin
-                      : `https://${contact.linkedin}`
-                  }
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles['contact-link']}
-                >
-                  LinkedIn
-                </a>
-              </p>
-            )}
-
-            {contact.github && (
-              <p className={styles['contact-info']}>
-                <span className={styles['contact-label']}>
-                  {' '}
-                  <FaGithub className={styles['icon-color']} />{' '}
-                </span>
-                <a
-                  href={
-                    contact.github.startsWith('http')
-                      ? contact.github
-                      : `https://github.com/${contact.github}`
-                  }
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles['contact-link']}
-                >
-                  GitHub
-                </a>
-              </p>
-            )}
-
-            {contact.portfolio && (
-              <p className={styles['contact-info']}>
-                <span className={styles['contact-label']}>
-                  {' '}
-                  <FaExternalLinkAlt className={styles['icon-color']} />{' '}
-                </span>
-                <a
-                  href={
-                    contact.portfolio.startsWith('http')
-                      ? contact.portfolio
-                      : `https://${contact.portfolio}`
-                  }
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles['contact-link']}
-                >
-                  Portfolio
-                </a>
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className={styles.section}>
-        <h2 className={styles['section-header']}>Professional Summary</h2>
-        <hr className={styles.line} />
-        <div className={styles['summary-content']}>
-          {professional_summary.split('\n').map((paragraph, index) => (
-            <p key={index} className={styles['summary-paragraph']}>
-              {paragraph}
-            </p>
-          ))}
-        </div>
-      </div>
-
+      <CVHeader 
+        fullName={fullName} 
+        contact={contact} 
+        onSave={(data) => handleSave('header', data)}
+      />
+      
+      <CVSummary 
+        professional_summary={professional_summary} 
+        onSave={(data) => handleSave('professional_summary', data)}
+      />
+      
       {skills && skills.length > 0 && (
-        <div className={styles.section}>
-          <h2 className={styles['section-header']}>Skills</h2>
-          <hr className={styles.line} />
-          <div className={styles['skills-container']}>
-            <div className={styles['skills-column']}>
-              <h3 className={styles['skills-subheader']}>Technical Skills</h3>
-              <div className={styles['skills-list']}>
-                {skills
-                  .filter((skill) => !isSoftSkill(skill))
-                  .map((skill, index) => (
-                    <span
-                      key={`technical-${index}`}
-                      className={styles['skill-item']}
-                    >
-                      {skill}
-                    </span>
-                  ))}
-              </div>
-            </div>
-            <div className={styles['skills-column']}>
-              <h3 className={styles['skills-subheader']}>Soft Skills</h3>
-              <div className={styles['skills-list']}>
-                {skills.filter(isSoftSkill).map((skill, index) => (
-                  <span key={`soft-${index}`} className={styles['skill-item']}>
-                    {skill}
-                  </span>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
+        <CVSkills 
+          skills={skills} 
+          onSave={(data) => handleSave('skills', data)}
+        />
       )}
-
-      <div className={styles.section}>
-        <h2 className={styles['section-header']}>Professional Experience</h2>
-        <hr className={styles.line} />
-        {experience && experience.length > 0 ? (
-          experience.map((exp, index) => (
-            <div key={index} className={styles['experience-item']}>
-              <div className={styles['experience-header']}>
-                <div>
-                  <h3 className={styles['job-title']}>{exp.jobTitle}</h3>
-                  <div className={styles['company-info']}>
-                    <div>
-                      <span className={styles['company-name']}>
-                        {exp.companyName}
-                      </span>
-                    </div>
-                    <div>
-                      {(exp.startDate || exp.endDate) && (
-                        <span className={styles['job-duration']}>
-                          {exp.startDate} - {exp.endDate}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {exp.bulletPoints && exp.bulletPoints.length > 0 ? (
-                <ul className={styles['responsibilities-list']}>
-                  {exp.bulletPoints.map((point, i) => (
-                    <li key={i} className={styles['responsibility-item']}>
-                      {point}
-                    </li>
-                  ))}
-                </ul>
-              ) : exp.description ? (
-                <div className={styles['job-description']}>
-                  {exp.description.split('\n').map((paragraph, pIndex) => (
-                    <p key={pIndex} className={styles['job-paragraph']}>
-                      {paragraph}
-                    </p>
-                  ))}
-                </div>
-              ) : null}
-            </div>
-          ))
-        ) : (
-          <p className={styles['no-data']}>No experience data available</p>
-        )}
-      </div>
-
+      
+      <CVExperience 
+        experience={experience} 
+        onSave={(data) => handleSave('experience', data)}
+      />
+      
       {projects && projects.length > 0 && (
-        <div className={styles.section}>
-          <h2 className={styles['section-header']}>Projects</h2>
-          <hr className={styles.line} />
-          <div className={styles['projects-list']}>
-            {projects.map((project, index) => (
-              <div key={index} className={styles['project-item']}>
-                <h3 className={styles['project-name']}>
-                  {project.name || 'Project Name Not Specified'}
-                </h3>
-                {project.description && (
-                  <div className={styles['project-description']}>
-                    {project.description
-                      .split('\n')
-                      .map((paragraph, pIndex) => (
-                        <p key={pIndex} className={styles['project-paragraph']}>
-                          {paragraph}
-                        </p>
-                      ))}
-                  </div>
-                )}
-
-                {project.technologiesUsed &&
-                  project.technologiesUsed.length > 0 && (
-                    <div className={styles['technologies-container']}>
-                      <span className={styles['technologies-label']}>
-                        Technologies:{' '}
-                      </span>
-                      <div className={styles['technologies-list']}>
-                        {project.technologiesUsed.map((tech, techIndex) => (
-                          <span
-                            key={techIndex}
-                            className={styles['technology-tag']}
-                          >
-                            {tech}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                <div className={styles['project-links-container']}>
-                  {project.deployedLink && (
-                    <a
-                      href={
-                        project.deployedLink.startsWith('http')
-                          ? project.deployedLink
-                          : `https://${project.deployedLink}`
-                      }
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className={styles['project-link']}
-                    >
-                      <FaExternalLinkAlt className={styles['icon-color']} />{' '}
-                      Live Demo
-                    </a>
-                  )}
-                  {project.githubLink && (
-                    <a
-                      href={
-                        project.githubLink.startsWith('http')
-                          ? project.githubLink
-                          : `https://github.com/${project.githubLink}`
-                      }
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className={styles['project-link']}
-                    >
-                      <FaGithub className={styles['icon-color']} />
-                      GitHub
-                    </a>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
+        <CVProjects 
+          projects={projects} 
+          onSave={(data) => handleSave('projects', data)}
+        />
       )}
-
+      
       {education && education.length > 0 && (
-        <div className={styles.section}>
-          <h2 className={styles['section-header']}>Education</h2>
-          <hr className={styles.line} />
-          <div className={styles['education-list']}>
-            {education.map((edu, index) => (
-              <div key={index} className={styles['education-item']}>
-                <h3 className={styles['degree-info']}>
-                  {edu.program || 'Program Not Specified'}
-                </h3>
-                <div className={styles['institution-info']}>
-                  {edu.institution || 'Institution Not Specified'}
-                </div>
-                <div className={styles['education-duration']}>
-                  {edu.startDate && (
-                    <span className={styles['education-date']}>
-                      {edu.startDate}
-                    </span>
-                  )}
-                  {edu.endDate && (
-                    <>
-                      <span className={styles['education-date-separator']}>
-                        {' '}
-                        -{' '}
-                      </span>
-                      <span className={styles['education-date']}>
-                        {edu.endDate}
-                      </span>
-                    </>
-                  )}
-                </div>
-                {edu.highlights && (
-                  <div className={styles['education-highlights']}>
-                    {edu.highlights.split('\n').map((paragraph, pIndex) => (
-                      <p key={pIndex} className={styles['education-paragraph']}>
-                        {paragraph}
-                      </p>
-                    ))}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
+        <CVEducation 
+          education={education} 
+          onSave={(data) => handleSave('education', data)}
+        />
       )}
-
-      <div className={`${styles['button-container']} ${styles['no-print']}`}>
-        <button
-          onClick={handleEditClick}
-          className={styles['update-button']}
-        >
-          Update CV
-        </button>
-      </div>
     </div>
   );
 });
 
-export default CVPreview;
+export default CVPreview;
\ No newline at end of file
diff --git a/src/components/CVPreview/CVPreview.module.css b/src/components/CVPreview/CVPreview.module.css
index e21380b..0b8726a 100644
--- a/src/components/CVPreview/CVPreview.module.css
+++ b/src/components/CVPreview/CVPreview.module.css
@@ -12,6 +12,7 @@
 }
 
 @media print {
+
   .button-container,
   .no-print {
     display: none !important;
@@ -64,11 +65,9 @@
 
 .update-button {
   padding: 0.75rem 1.5rem;
-  background: linear-gradient(
-    135deg,
-    var(--color-paleskyblue),
-    var(--color-slategrey) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--color-paleskyblue),
+      var(--color-slategrey) 100%);
   color: var(--color-white);
   border: none;
   cursor: pointer;
@@ -87,11 +86,9 @@
 .update-button:hover {
   transform: translateY(-0.125rem);
   box-shadow: 0 0.5rem 1.57rem rgb(var(--color-slategrey) / 60%);
-  background: linear-gradient(
-    135deg,
-    var(--color-slategrey) 0%,
-    var(--color-paleskyblue) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--color-slategrey) 0%,
+      var(--color-paleskyblue) 100%);
 }
 
 .update-button:active {
@@ -106,12 +103,10 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgb(255 255 255 / 20%),
-    transparent
-  );
+  background: linear-gradient(90deg,
+      transparent,
+      rgb(255 255 255 / 20%),
+      transparent);
   transition: left 0.5s;
 }
 
@@ -122,11 +117,9 @@
 .save-button {
   margin-right: 0.625rem;
   padding: 0.625rem 1.25rem;
-  background: linear-gradient(
-    135deg,
-    var(--color-success) 0%,
-    var(--color-teal) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--color-success) 0%,
+      var(--color-teal) 100%);
   color: var(--color-white);
   border: none;
   cursor: pointer;
@@ -140,20 +133,16 @@
 .save-button:hover {
   transform: translateY(-0.063rem);
   box-shadow: 0 0.25rem 0.938rem var(--color-success);
-  background: linear-gradient(
-    135deg,
-    var(--color-teal) 0%,
-    var(--color-success) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--color-teal) 0%,
+      var(--color-success) 100%);
 }
 
 .cancel-button {
   padding: 0.625rem 1.25rem;
-  background: linear-gradient(
-    135deg,
-    var(--color-slategrey) 0%,
-    var(--color-dark) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--color-slategrey) 0%,
+      var(--color-dark) 100%);
   color: var(--color-white);
   border: none;
   cursor: pointer;
@@ -167,11 +156,9 @@
 .cancel-button:hover {
   transform: translateY(-0.063rem);
   box-shadow: 0 0.25rem 0.938rem var(--color-slategrey);
-  background: linear-gradient(
-    135deg,
-    var(--color-dark) 0%,
-    var(--color-slategrey) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--color-dark) 0%,
+      var(--color-slategrey) 100%);
 }
 
 .add-button {
@@ -365,65 +352,6 @@
   font-family: var(--font-secondary);
 }
 
-.contact-section {
-  margin-bottom: 1.5rem;
-}
-
-.user-section {
-  display: grid;
-  grid-template-rows: 0.2fr 1fr;
-  justify-items: center;
-  background-color: var(--color-paleskyblue);
-  margin-bottom: 2rem;
-  padding: 1rem;
-}
-
-.cv-username {
-  margin-bottom: 0.5rem;
-  font-family: var(--font-secondary);
-  font-weight: var(--font-weight-bold);
-}
-
-.email-and-phone-box {
-  display: flex;
-  justify-content: center;
-  gap: 1.5rem;
-}
-
-.github-portfolio-linkedin-box {
-  display: flex;
-  justify-content: center;
-  gap: 1.5rem;
-}
-
-.contact-info {
-  margin-bottom: 0.3rem;
-  color: var(--color-black);
-  font-family: var(--font-secondary);
-}
-
-.contact-label {
-  font-weight: var(--font-weight-semi-bold);
-  color: var(--color-black);
-  font-family: var(--font-secondary);
-}
-
-.contact-link {
-  color: var(--color-azulblue);
-  text-decoration: none;
-  font-family: var(--font-secondary);
-  transition: text-decoration 0.3s ease;
-}
-
-.contact-link:hover {
-  text-decoration: underline;
-}
-
-.icon-color {
-  color: var(--color-slategrey);
-  margin-right: 0.5rem;
-}
-
 .line {
   border: none;
   height: 0.5px;
@@ -431,303 +359,20 @@
   margin-bottom: 1rem;
 }
 
-.summary-paragraph {
-  position: relative;
-  padding-left: 0.5rem;
-  margin-bottom: 0.5rem;
-  line-height: 1.5;
-  color: var(--color-dark);
-  font-size: var(--font-size-medium);
-  font-family: var(--font-secondary);
-}
-
-.skills-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6rem;
-}
-
-.skills-column {
-  margin-bottom: 1.5rem;
-}
-
-.skills-subheader {
-  color: var(--color-dark);
-  font-size: 1.1rem;
-  font-weight: var(--font-weight-semi-bold);
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.25rem;
-  border-bottom: 0.063rem solid var(--color-white);
-  font-family: var(--font-secondary);
-}
-
-.skills-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.skill-item {
-  background-color: var(--color-paleskyblue);
-  border: 0.065rem solid var(--color-royalblue);
-  color: var(--color-dark);
-  padding: 0.4rem 0.8rem;
-  border-radius: 0.25rem;
-  font-size: var(--font-size-medium);
-  font-family: var(--font-secondary);
-  display: inline-block;
-  position: relative;
-  padding-left: 0.5rem;
-}
-
-.skills-column:nth-child(2) .skill-item {
-  background-color: var(--color-paleskyblue);
-  border: 0.065rem solid var(--color-royalblue);
-  color: var(--color-dark);
-}
-
-.experience-item {
-  margin-bottom: 1.5rem;
-  padding: 1rem;
-  background-color: var(--color-white);
-  border-radius: 0.25rem;
-  box-shadow: 0 0.063rem 0.188rem rgb(var(--color-black) / 10%);
-}
-
-.experience-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 0.5rem;
-}
-
-.job-title {
-  font-size: var(--font-size-medium);
-  font-weight: var(--font-weight-semi-bold);
-  color: #2c3e50;
-  margin-bottom: 0.25rem;
-  font-family: var(--font-secondary);
-}
-
-.company-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.company-name {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-azulblue);
-  font-family: var(--font-secondary);
-  margin-right: 1.25rem;
-}
-
-.job-duration {
-  color: var(--color-azulblue);
-  font-size: var(--font-size-small);
-  font-family: var(--font-secondary);
-}
-
-.responsibilities-list {
-  padding-left: 1.25rem;
-  margin-top: 0.5rem;
-}
-
-.responsibility-item {
-  position: relative;
-  padding-left: 0.5rem;
-  margin-bottom: 0.5rem;
-  line-height: 1.5;
-  color: var(--color-dark);
-  font-size: var(--font-size-medium);
-  font-family: var(--font-secondary);
-}
-
-.responsibility-item::before {
-  content: "•";
-  position: absolute;
-  left: -0.75rem;
-  color: var(--color-azulblue);
-  font-weight: var(--font-weight-bold);
-}
-
-.job-description {
-  margin-top: 0.5rem;
-  color: var(--color-dark);
-  font-size: var(--font-size-medium);
-  line-height: 1.5;
-  font-family: var(--font-secondary);
-}
-
-.job-paragraph {
-  margin-bottom: 0.5rem;
-}
-
-.project-item {
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 0.063rem solid var(--color-white);
-}
-
-.project-item:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
-
-.project-name {
-  font-size: var(--font-size-medium);
-  font-weight: var(--font-weight-semi-bold);
-  color: var(--color-dark);
-  margin-bottom: 0.5rem;
-  font-family: var(--font-secondary);
-}
-
-.project-description {
-  color: var(--color-dark);
-  font-size: var(--font-size-medium);
-  line-height: 1.5;
-  margin-bottom: 0.75rem;
-  font-family: var(--font-secondary);
-}
-
-.project-paragraph {
-  margin-bottom: 0.5rem;
-  font-family: var(--font-secondary);
-}
-
-.project-paragraph:last-child {
-  margin-bottom: 0;
-}
-
-.project-links-container {
-  display: flex;
-  gap: 3rem;
-  margin-bottom: 0.75rem;
-  margin-top: 0.75rem;
-}
-
-.project-link {
-  color: var(--color-azulblue);
-  text-decoration: none;
-  font-size: var(--font-size-medium);
-  font-family: var(--font-secondary);
-  display: inline-block;
-  transition: text-decoration 0.3s ease;
-}
-
-.project-link:hover {
-  text-decoration: underline;
-}
-
-.technologies-container {
-  margin-top: 0.5rem;
-}
-
-.technologies-label {
-  font-size: var(--font-size-medium);
-  color: var(--color-dark);
-  font-weight: var(--font-weight-bold);
-  font-family: var(--font-secondary);
-}
-
-.technologies-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-left: 0.5rem;
-}
-
-.technology-tag {
-  background-color: var(--color-hero2);
-  color: var(--color-dark);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.188rem;
-  font-size: var(--font-small);
-  font-family: var(--font-secondary);
-  white-space: nowrap;
-  transition: background-color 0.3s ease;
-}
-
 .no-data {
   color: var(--color-black);
   font-style: italic;
   font-family: var(--font-secondary);
 }
 
-.education-list {
+.section-header-container {
   display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.education-item {
-  padding: 1rem;
-  background-color: var(--color-white);
-  border-radius: 0.25rem;
-  box-shadow: 0 0.063rem 0.188rem rgb(var(--color-black) / 10%);
-  page-break-inside: avoid;
-  font-family: var(--font-secondary);
-}
-
-.education-duration {
-  color: rgb(var(--color-slategrey) / 40%);
-  font-size: var(--font-size-small);
-  margin-bottom: 0.75rem;
-  font-style: italic;
-  font-family: var(--font-secondary);
-}
-
-.education-date-separator {
-  margin: 0 0.25rem;
-}
-
-.education-description {
-  margin-top: 0.75rem;
-  color: rgb(var(--color-black) / 10%);
-  font-size: var(--font-size-medium);
-  line-height: 1.5;
-  font-family: var(--font-secondary);
-}
-
-.education-paragraph {
-  margin-bottom: 0.5rem;
-  text-align: justify;
-  font-family: var(--font-secondary);
-}
-
-.degree-info {
-  color: var(--color-dark);
-  font-family: var(--font-secondary);
-}
-
-.institution-info {
-  color: var(--color-dark);
-  font-family: var(--font-secondary);
+  justify-content: space-between;
+  align-items: center;
 }
 
-@media (width <= 37.5rem) {
+@media (width <=37.5rem) {
   .cv-container {
     padding: 1rem;
   }
-
-  .degree-info {
-    font-size: var(--font-size-medium);
-  }
-
-  .education-item,
-  .experience-item {
-    padding: 0.75rem;
-  }
-
-  .experience-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.25rem;
-  }
-
-  .project-links-container {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/components/CVPreview/CVProjects.jsx b/src/components/CVPreview/CVProjects.jsx
new file mode 100644
index 0000000..e896f1b
--- /dev/null
+++ b/src/components/CVPreview/CVProjects.jsx
@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import { FaGithub, FaExternalLinkAlt, FaEdit, FaSave, FaTimes, FaPlus, FaMinus } from 'react-icons/fa';
+import styles from './CVProjects.module.css';
+
+const CVProjects = ({ projects = [], onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState([...projects]);
+
+  const handleChange = (index, field, value) => {
+    const newData = [...editData];
+    newData[index] = {
+      ...newData[index],
+      [field]: value
+    };
+    setEditData(newData);
+  };
+
+  const handleTechChange = (index, value) => {
+    const newData = [...editData];
+    newData[index] = {
+      ...newData[index],
+      technologiesUsed: value.split(',').map(tech => tech.trim())
+    };
+    setEditData(newData);
+  };
+
+  const addProject = () => {
+    setEditData([
+      ...editData,
+      {
+        name: '',
+        description: '',
+        deployedLink: '',
+        githubLink: '',
+        technologiesUsed: []
+      }
+    ]);
+  };
+
+  const removeProject = (index) => {
+    const newData = [...editData];
+    newData.splice(index, 1);
+    setEditData(newData);
+  };
+
+  const handleSave = () => {
+    onSave(editData);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditData([...projects]);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className={styles.section}>
+        <div className={styles['section-header-container']}>
+          <h2 className={styles['section-header']}>Projects</h2>
+          <div className={styles['button-group']}>
+            <button onClick={handleSave} className={styles['save-button']}>
+              <FaSave /> Save
+            </button>
+            <button onClick={handleCancel} className={styles['cancel-button']}>
+              <FaTimes /> Cancel
+            </button>
+          </div>
+        </div>
+        <hr className={styles.line} />
+        
+        {editData.map((project, index) => (
+          <div key={index} className={styles['edit-item']}>
+            <div className={styles['form-group']}>
+              <label>Project Name:</label>
+              <input
+                value={project.name || ''}
+                onChange={(e) => handleChange(index, 'name', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Description:</label>
+              <textarea
+                value={project.description || ''}
+                onChange={(e) => handleChange(index, 'description', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Deployed Website:</label>
+              <input
+                value={project.deployedLink || ''}
+                onChange={(e) => handleChange(index, 'deployedLink', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>GitHub Link:</label>
+              <input
+                value={project.githubLink || ''}
+                onChange={(e) => handleChange(index, 'githubLink', e.target.value)}
+              />
+            </div>
+            <div className={styles['form-group']}>
+              <label>Technologies Used (comma separated):</label>
+              <input
+                value={project.technologiesUsed?.join(', ') || ''}
+                onChange={(e) => handleTechChange(index, e.target.value)}
+              />
+            </div>
+            <button
+              onClick={() => removeProject(index)}
+              className={styles['remove-button']}
+            >
+              <FaMinus /> Remove Project
+            </button>
+          </div>
+        ))}
+        
+        <button onClick={addProject} className={styles['add-button']}>
+          <FaPlus /> Add Project
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.section}>
+      <div className={styles['section-header-container']}>
+        <h2 className={styles['section-header']}>Projects</h2>
+        <button 
+          onClick={() => setIsEditing(true)} 
+          className={styles['edit-button']}
+        >
+          <FaEdit /> Edit
+        </button>
+      </div>
+      <hr className={styles.line} />
+      <div className={styles['projects-list']}>
+        {projects.map((project, index) => (
+          <div key={index} className={styles['project-item']}>
+            <h3 className={styles['project-name']}>
+              {project.name || 'Project Name Not Specified'}
+            </h3>
+            {project.description && (
+              <div className={styles['project-description']}>
+                {project.description
+                  .split('\n')
+                  .map((paragraph, pIndex) => (
+                    <p key={pIndex} className={styles['project-paragraph']}>
+                      {paragraph}
+                    </p>
+                  ))}
+              </div>
+            )}
+
+            {project.technologiesUsed && project.technologiesUsed.length > 0 && (
+              <div className={styles['technologies-container']}>
+                <span className={styles['technologies-label']}>
+                  Technologies:{' '}
+                </span>
+                <div className={styles['technologies-list']}>
+                  {project.technologiesUsed.map((tech, techIndex) => (
+                    <span
+                      key={techIndex}
+                      className={styles['technology-tag']}
+                    >
+                      {tech}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            <div className={styles['project-links-container']}>
+              {project.deployedLink && (
+                <a
+                  href={
+                    project.deployedLink.startsWith('http')
+                      ? project.deployedLink
+                      : `https://${project.deployedLink}`
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles['project-link']}
+                >
+                  <FaExternalLinkAlt className={styles['icon-color']} />{' '}
+                  Live Demo
+                </a>
+              )}
+              {project.githubLink && (
+                <a
+                  href={
+                    project.githubLink.startsWith('http')
+                      ? project.githubLink
+                      : `https://github.com/${project.githubLink}`
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles['project-link']}
+                >
+                  <FaGithub className={styles['icon-color']} />
+                  GitHub
+                </a>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CVProjects;
\ No newline at end of file
diff --git a/src/components/CVPreview/CVProjects.module.css b/src/components/CVPreview/CVProjects.module.css
new file mode 100644
index 0000000..5744179
--- /dev/null
+++ b/src/components/CVPreview/CVProjects.module.css
@@ -0,0 +1,125 @@
+.project-item {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 0.063rem solid var(--color-white);
+}
+
+.project-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.project-name {
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-semi-bold);
+    color: var(--color-dark);
+    margin-bottom: 0.5rem;
+    font-family: var(--font-secondary);
+}
+
+.project-description {
+    color: var(--color-dark);
+    font-size: var(--font-size-medium);
+    line-height: 1.5;
+    margin-bottom: 0.75rem;
+    font-family: var(--font-secondary);
+}
+
+.project-paragraph {
+    margin-bottom: 0.5rem;
+    font-family: var(--font-secondary);
+}
+
+.project-paragraph:last-child {
+    margin-bottom: 0;
+}
+
+.project-links-container {
+    display: flex;
+    gap: 1.5rem;
+    margin-bottom: 0.75rem;
+    margin-top: 0.75rem;
+}
+
+.project-link {
+    color: var(--color-azulblue);
+    text-decoration: none;
+    font-size: var(--font-size-medium);
+    font-family: var(--font-secondary);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: text-decoration 0.3s ease;
+}
+
+.project-link:hover {
+    text-decoration: underline;
+}
+
+.technologies-container {
+    margin-top: 0.5rem;
+}
+
+.technologies-label {
+    font-size: var(--font-size-medium);
+    color: var(--color-dark);
+    font-weight: var(--font-weight-bold);
+    font-family: var(--font-secondary);
+}
+
+.technologies-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-left: 0.5rem;
+}
+
+.technology-tag {
+    background-color: var(--color-hero2);
+    color: var(--color-dark);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.188rem;
+    font-size: var(--font-small);
+    font-family: var(--font-secondary);
+    white-space: nowrap;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button {
+    background-color: var(--color-azulblue);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button:hover {
+    background-color: var(--color-royalblue);
+}
+
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.edit-item {
+    background-color: var(--color-white);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+}
+
+@media (width <=37.5rem) {
+    .project-links-container {
+        flex-direction: column;
+        gap: 0.5rem;
+    } }
\ No newline at end of file
diff --git a/src/components/CVPreview/CVSkills.jsx b/src/components/CVPreview/CVSkills.jsx
new file mode 100644
index 0000000..07d55e5
--- /dev/null
+++ b/src/components/CVPreview/CVSkills.jsx
@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { FaEdit, FaSave, FaTimes } from 'react-icons/fa';
+import styles from './CVSkills.module.css';
+
+const CVSkills = ({ skills = [], onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState(skills.join(', '));
+
+  const isSoftSkill = (skill) => {
+    const skillStr = typeof skill === 'string' ? skill.toLowerCase() : '';
+    const softSkills = [
+      'communication',
+      'teamwork',
+      'leadership',
+      'problem-solving',
+      'adaptability',
+      'creativity',
+      'time management',
+      'collaboration',
+      'interpersonal',
+      'negotiation',
+      'critical thinking',
+      'emotional intelligence',
+      'team player',
+      'active listening',
+      'conflict resolution',
+      'presentation',
+      'mentoring',
+      'coaching',
+      'decision making',
+      'strategic thinking',
+    ];
+    return softSkills.some((softSkill) =>
+      skillStr.includes(softSkill.toLowerCase())
+    );
+  };
+
+  const handleSave = () => {
+    const newSkills = editData
+      .split(',')
+      .map(skill => skill.trim())
+      .filter(skill => skill);
+    onSave(newSkills);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditData(skills.join(', '));
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className={styles.section}>
+        <div className={styles['section-header-container']}>
+          <h2 className={styles['section-header']}>Skills</h2>
+          <div className={styles['button-group']}>
+            <button onClick={handleSave} className={styles['save-button']}>
+              <FaSave /> Save
+            </button>
+            <button onClick={handleCancel} className={styles['cancel-button']}>
+              <FaTimes /> Cancel
+            </button>
+          </div>
+        </div>
+        <hr className={styles.line} />
+        <div className={styles['edit-form']}>
+          <div className={styles['form-group']}>
+            <label>Skills (comma separated):</label>
+            <textarea
+              value={editData}
+              onChange={(e) => setEditData(e.target.value)}
+              placeholder="e.g. JavaScript, React, Teamwork, Communication"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.section}>
+      <div className={styles['section-header-container']}>
+        <h2 className={styles['section-header']}>Skills</h2>
+        <button 
+          onClick={() => setIsEditing(true)} 
+          className={styles['edit-button']}
+        >
+          <FaEdit /> Edit
+        </button>
+      </div>
+      <hr className={styles.line} />
+      <div className={styles['skills-container']}>
+        <div className={styles['skills-column']}>
+          <h3 className={styles['skills-subheader']}>Technical Skills</h3>
+          <div className={styles['skills-list']}>
+            {skills
+              .filter((skill) => !isSoftSkill(skill))
+              .map((skill, index) => (
+                <span
+                  key={`technical-${index}`}
+                  className={styles['skill-item']}
+                >
+                  {skill}
+                </span>
+              ))}
+          </div>
+        </div>
+        <div className={styles['skills-column']}>
+          <h3 className={styles['skills-subheader']}>Soft Skills</h3>
+          <div className={styles['skills-list']}>
+            {skills.filter(isSoftSkill).map((skill, index) => (
+              <span key={`soft-${index}`} className={styles['skill-item']}>
+                {skill}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CVSkills;
\ No newline at end of file
diff --git a/src/components/CVPreview/CVSkills.module.css b/src/components/CVPreview/CVSkills.module.css
new file mode 100644
index 0000000..73be620
--- /dev/null
+++ b/src/components/CVPreview/CVSkills.module.css
@@ -0,0 +1,80 @@
+.skills-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.skills-column {
+    margin-bottom: 1.5rem;
+}
+
+.skills-subheader {
+    color: var(--color-dark);
+    font-size: 1.1rem;
+    font-weight: var(--font-weight-semi-bold);
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 0.063rem solid var(--color-white);
+    font-family: var(--font-secondary);
+}
+
+.skills-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.skill-item {
+    background-color: var(--color-paleskyblue);
+    border: 0.065rem solid var(--color-royalblue);
+    color: var(--color-dark);
+    padding: 0.4rem 0.8rem;
+    border-radius: 0.25rem;
+    font-size: var(--font-size-medium);
+    font-family: var(--font-secondary);
+    display: inline-block;
+}
+
+.skills-column:nth-child(2) .skill-item {
+    background-color: var(--color-paleskyblue);
+    border: 0.065rem solid var(--color-royalblue);
+    color: var(--color-dark);
+}
+
+.edit-button {
+    background-color: var(--color-azulblue);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button:hover {
+    background-color: var(--color-royalblue);
+}
+
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.edit-form {
+    background-color: var(--color-white);
+    padding: 1rem;
+    border-radius: 0.5rem;
+}
+
+@media (width <=37.5rem) {
+    .skills-container {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    } }
\ No newline at end of file
diff --git a/src/components/CVPreview/CVSummary.jsx b/src/components/CVPreview/CVSummary.jsx
new file mode 100644
index 0000000..1ca7c24
--- /dev/null
+++ b/src/components/CVPreview/CVSummary.jsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { FaEdit, FaSave, FaTimes } from 'react-icons/fa';
+import styles from './CVSummary.module.css';
+
+const CVSummary = ({ professional_summary = '', onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState(professional_summary);
+
+  const handleSave = () => {
+    onSave(editData);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setEditData(professional_summary);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <div className={styles.section}>
+        <div className={styles['section-header-container']}>
+          <h2 className={styles['section-header']}>Professional Summary</h2>
+          <div className={styles['button-group']}>
+            <button onClick={handleSave} className={styles['save-button']}>
+              <FaSave /> Save
+            </button>
+            <button onClick={handleCancel} className={styles['cancel-button']}>
+              <FaTimes /> Cancel
+            </button>
+          </div>
+        </div>
+        <hr className={styles.line} />
+        <div className={styles['edit-form']}>
+          <textarea
+            value={editData}
+            onChange={(e) => setEditData(e.target.value)}
+            className={styles['edit-textarea']}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.section}>
+      <div className={styles['section-header-container']}>
+        <h2 className={styles['section-header']}>Professional Summary</h2>
+        <button 
+          onClick={() => setIsEditing(true)} 
+          className={styles['edit-button']}
+        >
+          <FaEdit /> Edit
+        </button>
+      </div>
+      <hr className={styles.line} />
+      <div className={styles['summary-content']}>
+        {professional_summary.split('\n').map((paragraph, index) => (
+          <p key={index} className={styles['summary-paragraph']}>
+            {paragraph}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CVSummary;
\ No newline at end of file
diff --git a/src/components/CVPreview/CVSummary.module.css b/src/components/CVPreview/CVSummary.module.css
new file mode 100644
index 0000000..be91a6c
--- /dev/null
+++ b/src/components/CVPreview/CVSummary.module.css
@@ -0,0 +1,51 @@
+.summary-content {
+    color: var(--color-dark);
+    font-size: var(--font-size-medium);
+    line-height: 1.6;
+    font-family: var(--font-secondary);
+}
+
+.summary-paragraph {
+    margin-bottom: 1rem;
+    text-align: justify;
+}
+
+.edit-button {
+    background-color: var(--color-azulblue);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+.edit-button:hover {
+    background-color: var(--color-royalblue);
+}
+
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.edit-textarea {
+    width: 100%;
+    min-height: 10rem;
+    padding: 1rem;
+    border: 1px solid var(--color-paleskyblue);
+    border-radius: 0.5rem;
+    font-family: var(--font-secondary);
+    resize: vertical;
+}
+
+.edit-form {
+    background-color: var(--color-white);
+    padding: 1rem;
+    border-radius: 0.5rem; }
\ No newline at end of file