diff --git a/cv-project/src/App.jsx b/cv-project/src/App.jsx
index 1a96c3f..d00749c 100644
--- a/cv-project/src/App.jsx
+++ b/cv-project/src/App.jsx
@@ -7,6 +7,7 @@ import ExperienceDisplay from "./components/experienceDisplay";
 
 import "./App.css";
 import { useState } from "react";
+import Button from "./components/button";
 
 function App() {
   const [basicInfo, setBasicInfo] = useState({
@@ -26,16 +27,18 @@ function App() {
       <div className="form">
         <GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} />
         <div className="btn-group">
-          <button
+          <Button
             onClick={() => {
               setEducationItemActive(!educationItemActive);
             }}
-          >
-            Add Education Info
-          </button>
-          <button onClick={() => setShowJobForm(!showJobForm)}>
-            Add Employer Info
-          </button>
+            text="Add Education"
+            className="normal-btn"
+          />
+          <Button
+            onClick={() => setShowJobForm(!showJobForm)}
+            text="Add Employment"
+            className="normal-btn"
+          />
         </div>
         <EducationInfoForm
           educationInfo={educationInfo}
diff --git a/cv-project/src/components/educationInfoForm.jsx b/cv-project/src/components/educationInfoForm.jsx
index b1749d4..48cd26b 100644
--- a/cv-project/src/components/educationInfoForm.jsx
+++ b/cv-project/src/components/educationInfoForm.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import Input from "./input";
+import Button from "./button";
 
 export default function EducationInfoForm(props) {
   return (
@@ -78,48 +79,49 @@ function EducationForm({
               value={fieldOfStudy}
               onChange={(e) => setFieldOfStudy(e.target.value)}
             />
-            <button
-              type="submit"
-              onClick={(e) => {
-                e.preventDefault();
-                const updatedSchools = [...educationInfo];
-                if (schoolId !== -1 && schoolId !== null) {
-                  updatedSchools[schoolId] = {
-                    schoolName: schoolName,
-                    graduationDate: graduationDate,
-                    fieldOfStudy: fieldOfStudy,
-                  };
-                  setEducationInfo(updatedSchools);
-                } else {
-                  setEducationInfo([
-                    ...educationInfo,
-                    {
+            <div className="btn-group">
+              <Button
+                onClick={(e) => {
+                  e.preventDefault();
+                  setGraduationDate("");
+                  setSchoolName("");
+                  setFieldOfStudy("");
+                  schoolId = null;
+                }}
+                text="Clear"
+              />
+              <Button
+                type="submit"
+                className="submit-btn"
+                onClick={(e) => {
+                  e.preventDefault();
+                  const updatedSchools = [...educationInfo];
+                  if (schoolId !== -1 && schoolId !== null) {
+                    updatedSchools[schoolId] = {
                       schoolName: schoolName,
-                      fieldOfStudy: fieldOfStudy,
                       graduationDate: graduationDate,
-                      id: crypto.randomUUID(),
-                    },
-                  ]);
-                }
+                      fieldOfStudy: fieldOfStudy,
+                    };
+                    setEducationInfo(updatedSchools);
+                  } else {
+                    setEducationInfo([
+                      ...educationInfo,
+                      {
+                        schoolName: schoolName,
+                        fieldOfStudy: fieldOfStudy,
+                        graduationDate: graduationDate,
+                        id: crypto.randomUUID(),
+                      },
+                    ]);
+                  }
 
-                setGraduationDate("");
-                setSchoolName("");
-                setFieldOfStudy("");
-              }}
-            >
-              Submit
-            </button>
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                setGraduationDate("");
-                setSchoolName("");
-                setFieldOfStudy("");
-                schoolId = null;
-              }}
-            >
-              Clear
-            </button>
+                  setGraduationDate("");
+                  setSchoolName("");
+                  setFieldOfStudy("");
+                }}
+                text="Submit"
+              />
+            </div>
           </form>
         </div>
       ) : null}
diff --git a/cv-project/src/components/experienceForm.jsx b/cv-project/src/components/experienceForm.jsx
index 0efb964..4c94302 100644
--- a/cv-project/src/components/experienceForm.jsx
+++ b/cv-project/src/components/experienceForm.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import Input from "./input";
+import Button from "./button";
 
 export default function ExperienceForm(props) {
   return (
@@ -94,27 +95,28 @@ function JobForm({ isActive, jobs, setJobs }) {
                 onChange={(e) => setJobDescription(e.target.value)}
               />
             </div>
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                clear();
-              }}
-            >
-              Clear
-            </button>
-            <button
-              onClick={(e) =>
-                handleSubmit(e, {
-                  employer,
-                  jobTitle,
-                  jobDescription,
-                  employmentStart,
-                  employmentEnd,
-                })
-              }
-            >
-              Submit
-            </button>
+            <div className="btn-group">
+              <Button
+                onClick={(e) => {
+                  e.preventDefault();
+                  clear();
+                }}
+                text="Clear"
+              />
+              <Button
+                onClick={(e) =>
+                  handleSubmit(e, {
+                    employer,
+                    jobTitle,
+                    jobDescription,
+                    employmentStart,
+                    employmentEnd,
+                  })
+                }
+                className="submit-btn"
+                text="Submit"
+              />
+            </div>
           </form>
         </div>
       ) : null}
diff --git a/cv-project/src/styles/input.css b/cv-project/src/styles/input.css
index aa06f51..4245b70 100644
--- a/cv-project/src/styles/input.css
+++ b/cv-project/src/styles/input.css
@@ -15,5 +15,13 @@
 }
 
 .input input {
-  font-size: 1.3rem;
+  font-size: 1.1rem;
+  padding: 0.5rem;
+  border-radius: 0.4rem;
+  outline: 1px solid hsl(var(--light-gray));
+  border: none;
+}
+
+.input input:focus {
+  outline: 2px solid hsl(var(--dark-gray));
 }