diff --git a/cv-project/index.html b/cv-project/index.html
index cabbba2..af8155d 100644
--- a/cv-project/index.html
+++ b/cv-project/index.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CV-Creator</title>
   </head>
diff --git a/cv-project/src/App.css b/cv-project/src/App.css
index 708ee62..acff0e3 100644
--- a/cv-project/src/App.css
+++ b/cv-project/src/App.css
@@ -51,6 +51,13 @@ body {
   background: hsl(var(--white-color));
 }
 
+.general-info-header {
+  font-family: "Inter Tight", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 700;
+  font-style: normal;
+}
+
 .basic-info {
   display: flex;
   flex-direction: column;
@@ -66,3 +73,9 @@ body {
   display: flex;
   gap: 1rem;
 }
+
+.education-info-form {
+  padding: 20px;
+  margin-bottom: 1rem;
+  background: hsl(var(--white-color));
+}
diff --git a/cv-project/src/components/educationInfoForm.jsx b/cv-project/src/components/educationInfoForm.jsx
index d989445..8140039 100644
--- a/cv-project/src/components/educationInfoForm.jsx
+++ b/cv-project/src/components/educationInfoForm.jsx
@@ -1,27 +1,26 @@
 import { useState, useEffect } from "react";
+import Input from "./input";
 
 export default function EducationInfoForm(props) {
   const [educationItemActive, setEducationItemActive] = useState(false);
 
   return (
-    <div className="education-info section">
-      <div>
-        <button
-          onClick={() => {
-            setEducationItemActive(!educationItemActive);
-          }}
-        >
-          Add Education Info
-        </button>
+    <>
+      <button
+        onClick={() => {
+          setEducationItemActive(!educationItemActive);
+        }}
+      >
+        Add Education Info
+      </button>
 
-        <EducationForm
-          isActive={educationItemActive}
-          educationInfo={props.educationInfo}
-          setEducationInfo={props.setEducationInfo}
-          editSchool={props.editEducation}
-        />
-      </div>
-    </div>
+      <EducationForm
+        isActive={educationItemActive}
+        educationInfo={props.educationInfo}
+        setEducationInfo={props.setEducationInfo}
+        editSchool={props.editEducation}
+      />
+    </>
   );
 }
 
@@ -57,23 +56,23 @@ function EducationForm({
   };
 
   return (
-    <div>
+    <>
       {isActive ? (
         <div className="education-info-form">
           <form action="" style={contactFormStyle}>
-            <input
+            <Input
               type="text"
               placeholder="Enter university/school"
               value={schoolName}
               onChange={(e) => setSchoolName(e.target.value)}
             />
-            <input
+            <Input
               type="text"
               placeholder="Enter graduation date"
               value={graduationDate}
               onChange={(e) => setGraduationDate(e.target.value)}
             />
-            <input
+            <Input
               type="text"
               placeholder="Enter degree/field of study"
               value={fieldOfStudy}
@@ -124,6 +123,6 @@ function EducationForm({
           </form>
         </div>
       ) : null}
-    </div>
+    </>
   );
 }
diff --git a/cv-project/src/styles/input.css b/cv-project/src/styles/input.css
index 0a2f55a..aa06f51 100644
--- a/cv-project/src/styles/input.css
+++ b/cv-project/src/styles/input.css
@@ -3,6 +3,10 @@
   flex-direction: column;
   font-size: 1.3rem;
   line-height: 1.3;
+  font-family: "Inter Tight", sans-serif;
+  font-optical-sizing: auto;
+  /* font-weight: <weight>; */
+  font-style: normal;
 }
 
 .input label {
