diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index 3df2999ef..13c662757 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -17,7 +17,7 @@ export default function Button({ text, className, href, newTab, theme }) {
   return (
     <div className={className}>
       <a
-        class="main-button"
+        className="main-button"
         href={href}
         target={newTab && "_blank"}
         style={{
diff --git a/src/components/socialMedia/SocialMedia.js b/src/components/socialMedia/SocialMedia.js
index 05ee89038..97deb8ff2 100644
--- a/src/components/socialMedia/SocialMedia.js
+++ b/src/components/socialMedia/SocialMedia.js
@@ -16,9 +16,10 @@ const IconWrapper = styled.span`
 export default function socialMedia(props) {
   return (
     <div className="social-media-div">
-      {socialMediaLinks.map((media) => {
+      {socialMediaLinks.map((media, i) => {
         return (
           <a
+            key={i}
             href={media.link}
             className={`icon-button`}
             target="_blank"
diff --git a/src/components/topButton/TopButton.js b/src/components/topButton/TopButton.js
index 05c0bd246..3438e0994 100644
--- a/src/components/topButton/TopButton.js
+++ b/src/components/topButton/TopButton.js
@@ -59,7 +59,7 @@ export default function TopButton({ theme }) {
       onMouseEnter={() => onMouseEnter(theme.text, theme.body)}
       onMouseLeave={() => onMouseLeave(theme.body, theme.text)}
     >
-      <i class="fas fa-arrow-up" id="arrow" aria-hidden="true" />
+      <i className="fas fa-arrow-up" id="arrow" aria-hidden="true" />
     </div>
   );
 }
diff --git a/src/containers/skills/CloudInfraImg.js b/src/containers/skills/CloudInfraImg.js
index f0cf602fa..4aac34f93 100644
--- a/src/containers/skills/CloudInfraImg.js
+++ b/src/containers/skills/CloudInfraImg.js
@@ -22,9 +22,9 @@ export default class CloudInfraImg extends Component {
             y2="120.78"
             gradientUnits="userSpaceOnUse"
           >
-            <stop offset="0" stop-color="gray" stop-opacity="0.25" />
-            <stop offset="0.54" stop-color="gray" stop-opacity="0.12" />
-            <stop offset="1" stop-color="gray" stop-opacity="0.1" />
+            <stop offset="0" stopColor="gray" stopOpacity="0.25" />
+            <stop offset="0.54" stopColor="gray" stopOpacity="0.12" />
+            <stop offset="1" stopColor="gray" stopOpacity="0.1" />
           </linearGradient>
           <linearGradient
             id="2394db48-9094-48a1-80b4-38413320a0c3"
diff --git a/src/containers/skills/DataScienceImg.js b/src/containers/skills/DataScienceImg.js
index 0f6d4095d..0cca16e62 100644
--- a/src/containers/skills/DataScienceImg.js
+++ b/src/containers/skills/DataScienceImg.js
@@ -28,8 +28,8 @@ export default class DataScienceImg extends Component {
           height="272"
           fill="none"
           stroke={theme.text}
-          stroke-miterlimit="10"
-          stroke-width="2"
+          strokeMiterlimit="10"
+          strokeWidth="2"
         />
         <path
           d="M352.468,237.56768A94,94,0,0,0,286,77.09967v94Z"
@@ -78,8 +78,8 @@ export default class DataScienceImg extends Component {
           height="272"
           fill="none"
           stroke={theme.text}
-          stroke-miterlimit="10"
-          stroke-width="2"
+          strokeMiterlimit="10"
+          strokeWidth="2"
         />
         <rect
           x="175"
@@ -231,15 +231,15 @@ export default class DataScienceImg extends Component {
           height="272"
           fill="none"
           stroke={theme.text}
-          stroke-miterlimit="10"
-          stroke-width="2"
+          strokeMiterlimit="10"
+          strokeWidth="2"
         />
         <polyline
           points="556 227.5 556 435.5 757 435.5"
           fill="none"
           stroke={theme.text}
-          stroke-miterlimit="10"
-          stroke-width="2"
+          strokeMiterlimit="10"
+          strokeWidth="2"
         />
         <rect
           x="567"
diff --git a/src/containers/skills/DesignImg.js b/src/containers/skills/DesignImg.js
index ea3568033..81a0d1230 100644
--- a/src/containers/skills/DesignImg.js
+++ b/src/containers/skills/DesignImg.js
@@ -22,9 +22,9 @@ export default class DesignImg extends Component {
             y2="679.56"
             gradientUnits="userSpaceOnUse"
           >
-            <stop offset="0" stop-color="gray" stop-opacity="0.25" />
-            <stop offset="0.54" stop-color="gray" stop-opacity="0.12" />
-            <stop offset="1" stop-color="gray" stop-opacity="0.1" />
+            <stop offset="0" stopColor="gray" stopOpacity="0.25" />
+            <stop offset="0.54" stopColor="gray" stopOpacity="0.12" />
+            <stop offset="1" stopColor="gray" stopOpacity="0.1" />
           </linearGradient>
           <linearGradient
             id="72a3db62-0825-44ad-a640-19754e14ba99"
diff --git a/src/containers/skills/SkillSection.js b/src/containers/skills/SkillSection.js
index 9bde55428..2568d7eaa 100644
--- a/src/containers/skills/SkillSection.js
+++ b/src/containers/skills/SkillSection.js
@@ -23,9 +23,9 @@ class SkillSection extends Component {
     const theme = this.props.theme;
     return (
       <div>
-        {skills.data.map((skill) => {
+        {skills.data.map((skill, i) => {
           return (
-            <div className="skills-main-div">
+            <div key={i} className="skills-main-div">
               <Fade left duration={2000}>
                 <div className="skills-image-div">
                   {/* <img
@@ -47,9 +47,10 @@ class SkillSection extends Component {
                 </Fade>
                 <Fade right duration={2000}>
                   <div>
-                    {skill.skills.map((skillSentence) => {
+                    {skill.skills.map((skillSentence, i) => {
                       return (
                         <p
+                          key={i}
                           className="subTitle skills-text"
                           style={{ color: theme.secondaryText }}
                         >
diff --git a/src/pages/education/EducationImg.js b/src/pages/education/EducationImg.js
index 7f1972932..6c40b62f7 100644
--- a/src/pages/education/EducationImg.js
+++ b/src/pages/education/EducationImg.js
@@ -23,9 +23,9 @@ export default class EducationImg extends Component {
             gradientTransform="translate(3217.53309 1009.65784) rotate(90)"
             gradientUnits="userSpaceOnUse"
           >
-            <stop offset="0" stop-color="gray" stop-opacity="0.25" />
-            <stop offset="0.53514" stop-color="gray" stop-opacity="0.12" />
-            <stop offset="1" stop-color="gray" stop-opacity="0.1" />
+            <stop offset="0" stopColor="gray" stopOpacity="0.25" />
+            <stop offset="0.53514" stopColor="gray" stopOpacity="0.12" />
+            <stop offset="1" stopColor="gray" stopOpacity="0.1" />
           </linearGradient>
         </defs>
         <title>Graduation</title>
diff --git a/src/pages/projects/ProjectsImg.js b/src/pages/projects/ProjectsImg.js
index 55373f68d..8c64b50ad 100644
--- a/src/pages/projects/ProjectsImg.js
+++ b/src/pages/projects/ProjectsImg.js
@@ -22,9 +22,9 @@ export default class ProjectsImg extends Component {
             y2="522.9"
             gradientUnits="userSpaceOnUse"
           >
-            <stop offset="0" stop-color="gray" stop-opacity="0.25" />
-            <stop offset="0.54" stop-color="gray" stop-opacity="0.12" />
-            <stop offset="1" stop-color="gray" stop-opacity="0.1" />
+            <stop offset="0" stopColor="gray" stopOpacity="0.25" />
+            <stop offset="0.54" stopColor="gray" stopOpacity="0.12" />
+            <stop offset="1" stopColor="gray" stopOpacity="0.1" />
           </linearGradient>
         </defs>
         <title>mind map</title>