diff --git a/src/App.scss b/src/App.scss
index 620a069529..dabe342329 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -27,4 +27,8 @@
 
 .subTitle {
   color: $subTitle;
+  
+  &.dark-mode {
+    color: $subTitleDark;
+  }
 }
diff --git a/src/_globalColor.scss b/src/_globalColor.scss
index 03b06c22aa..7d43714483 100644
--- a/src/_globalColor.scss
+++ b/src/_globalColor.scss
@@ -10,17 +10,20 @@ $topButtonHover: #000;
 // text colors light theme
 $titleColor: #000000;
 $textColor: #000000;
-$subTitle: #868e96;
+$subTitle: #666666;
 $cardSubtitle: #666666;
-$talkCardSubTitle: #7f8287;
+$talkCardSubTitle: #666666;
 $blogCardTitleColor: #262626;
 
-// text color dark theme
+// text colors dark theme
 $textColorDark: #ffffff;
+$subTitleDark: #cccccc;
+$cardSubtitleDark: #cccccc;
+$talkCardSubTitleDark: #cccccc;
 
 // toggle switch colors
 $toggleCheck: #2196f3;
-$toggleSwitchSliderBG: #ccc;
+$toggleSwitchSliderBG: #cccccc;
 
 // githubRepo specific colors
 $githubRepoCardLanguageColorBG: #0000ff;
@@ -80,11 +83,13 @@ $appLink: #09d3ac;
 // social media icons
 $faceBook: #3b5998;
 $linkedin: #0e76a8;
-$github: #333;
 $gitlab: #fca326;
 $google: #ea4335;
 $twitter: #1da1f2;
-$medium: #000;
 $stackoverflow: #f48024;
 $instagram: #c13584;
 $kaggle: #20beff;
+$github: #000000;
+$githubDark: #ffffff;
+$medium: #000000;
+$mediumDark: #ffffff;
diff --git a/src/components/achievementCard/AchievementCard.scss b/src/components/achievementCard/AchievementCard.scss
index 2d41b0de15..1b3f6f5020 100644
--- a/src/components/achievementCard/AchievementCard.scss
+++ b/src/components/achievementCard/AchievementCard.scss
@@ -12,6 +12,9 @@
   font-weight: 700;
   margin: 15px 0 0 0;
 }
+.dark-mode.card-subtitle {
+  color: $cardSubtitleDark;
+}
 .card-subtitle {
   color: $cardSubtitle;
   font-size: 1.063rem;
diff --git a/src/components/blogCard/BlogCard.js b/src/components/blogCard/BlogCard.js
index c74e64aa50..cb272e76ca 100644
--- a/src/components/blogCard/BlogCard.js
+++ b/src/components/blogCard/BlogCard.js
@@ -20,10 +20,10 @@ export default function BlogCard({blog, isDark}) {
           }
           href="#blog"
         >
-          <h3 className={isDark ? "small-dark blog-title" : "blog-title"}>
+          <h3 className={isDark ? "dark-mode blog-title" : "blog-title"}>
             {blog.title}
           </h3>
-          <p className={isDark ? "small-dark small" : "small"}>
+          <p className={isDark ? "small dark-mode" : "small"}>
             {blog.description}
           </p>
           <div className="go-corner">
diff --git a/src/components/blogCard/BlogCard.scss b/src/components/blogCard/BlogCard.scss
index 2f804c1ea8..23c0e49d81 100644
--- a/src/components/blogCard/BlogCard.scss
+++ b/src/components/blogCard/BlogCard.scss
@@ -1,9 +1,5 @@
 @import "../../_globalColor";
 
-.small-dark {
-  color: $textColorDark !important;
-}
-
 .blog-container {
   border-radius: 10px;
   color: $blogCardContainerColor;
@@ -39,6 +35,10 @@
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   margin: 0px;
+  
+  &.dark-mode {
+    color: $subTitleDark;
+  }
 }
 
 .go-corner {
diff --git a/src/components/educationCard/EducationCard.js b/src/components/educationCard/EducationCard.js
index 5be83d0cee..f96a8fa9dc 100644
--- a/src/components/educationCard/EducationCard.js
+++ b/src/components/educationCard/EducationCard.js
@@ -5,17 +5,17 @@ import StyleContext from "../../contexts/StyleContext";
 
 export default function EducationCard({school}) {
   const imgRef = createRef();
+  const {isDark} = useContext(StyleContext);
 
   const GetDescBullets = ({descBullets}) => {
     return descBullets
       ? descBullets.map((item, i) => (
-          <li key={i} className="subTitle">
+          <li key={i} className={(isDark ? "dark-mode " : "") + "subTitle"}>
             {item}
           </li>
         ))
       : null;
   };
-  const {isDark} = useContext(StyleContext);
 
   if (!school.logo)
     console.error(`Image of ${school.name} is missing in education section`);
diff --git a/src/components/experienceCard/ExperienceCard.scss b/src/components/experienceCard/ExperienceCard.scss
index 1d63c93039..6279456618 100644
--- a/src/components/experienceCard/ExperienceCard.scss
+++ b/src/components/experienceCard/ExperienceCard.scss
@@ -101,15 +101,22 @@
   line-height: normal;
 }
 .dark-mode-text {
-  color: $textColorDark !important;
+  color: $textColorDark;
+}
+.subTitle.dark-mode-text {
+  color: $subTitleDark;
 }
 .experience-text-date {
   text-align: center;
-  color: $textColor;
   font-size: 20px;
   margin: 0px;
   padding-top: 1rem;
   font-weight: 600;
+  color: $textColor;
+  
+  &.dark-mode-text {
+    color: $textColorDark;
+  }
 }
 
 .experience-text-desc {
diff --git a/src/components/footer/Footer.scss b/src/components/footer/Footer.scss
index 590602ab11..b20e65387e 100644
--- a/src/components/footer/Footer.scss
+++ b/src/components/footer/Footer.scss
@@ -6,7 +6,7 @@
 }
 
 .dark-mode {
-  color: $textColorDark !important;
+  color: $subTitleDark !important;
 }
 
 .footer-div {
diff --git a/src/components/githubProfileCard/GithubProfileCard.js b/src/components/githubProfileCard/GithubProfileCard.js
index 11d15c9188..6a209d6297 100644
--- a/src/components/githubProfileCard/GithubProfileCard.js
+++ b/src/components/githubProfileCard/GithubProfileCard.js
@@ -1,16 +1,14 @@
-import React from "react";
+import React, {useContext} from "react";
 import "./GithubProfileCard.scss";
 import SocialMedia from "../../components/socialMedia/SocialMedia";
 import {contactInfo, isHireable} from "../../portfolio";
 import emoji from "react-easy-emoji";
 import {Fade} from "react-reveal";
+import StyleContext from "../../contexts/StyleContext";
 
 export default function GithubProfileCard({prof}) {
-  if (isHireable) {
-    prof.hireable = "Yes";
-  } else {
-    prof.hireable = "No";
-  }
+  prof.hireable = isHireable ? "Yes" : "No";
+  const {isDark} = useContext(StyleContext);
   return (
     <Fade bottom duration={1000} distance="20px">
       <div className="main" id="contact">
@@ -18,7 +16,7 @@ export default function GithubProfileCard({prof}) {
         <div className="row">
           <div className="main-content-profile">
             <div className="blog-header">
-              <p className="subTitle blog-subtitle">{contactInfo.subtitle}</p>
+              <p className={(isDark ? "dark-mode " : "") + "subTitle blog-subtitle"}>{contactInfo.subtitle}</p>
             </div>
             <h2 className="bio-text">"{emoji(String(prof.bio))}"</h2>
             {prof.location !== null && (
diff --git a/src/components/githubProfileCard/GithubProfileCard.scss b/src/components/githubProfileCard/GithubProfileCard.scss
index 9b09af27ff..b401327147 100644
--- a/src/components/githubProfileCard/GithubProfileCard.scss
+++ b/src/components/githubProfileCard/GithubProfileCard.scss
@@ -54,10 +54,6 @@
   font-size: 19px;
 }
 
-.subTitle {
-  color: $subTitle;
-}
-
 @media (max-width: 768px) {
   .row {
     display: flex;
diff --git a/src/components/githubRepoCard/GithubRepoCard.scss b/src/components/githubRepoCard/GithubRepoCard.scss
index 9f20a46d1c..547b1e9eb5 100644
--- a/src/components/githubRepoCard/GithubRepoCard.scss
+++ b/src/components/githubRepoCard/GithubRepoCard.scss
@@ -83,6 +83,10 @@
 }
 .dark-card-mode p {
   color: $textColorDark;
+  
+  &.repo-description {
+    color: $subTitleDark;
+  }
 }
 
 .dark-card-mode .repo-svg {
diff --git a/src/components/header/Header.scss b/src/components/header/Header.scss
index 04a6746b68..fdfd25b242 100644
--- a/src/components/header/Header.scss
+++ b/src/components/header/Header.scss
@@ -38,6 +38,14 @@
   color: $subTitle;
 }
 
+.dark-menu .grey-color {
+  color: $subTitleDark;
+}
+
+.dark-mode .grey-color {
+  color: $subTitleDark;
+}
+
 .header li a {
   display: block;
   padding: 15px 20px;
@@ -63,8 +71,8 @@
 .header .logo-name {
   font-family: "Agustina Regular";
   font-weight: bold;
-  font-variant-ligatures: no-common-ligatures;
   -webkit-font-variant-ligatures: no-common-ligatures;
+  font-variant-ligatures: no-common-ligatures;
   padding: 0 10px;
 }
 
@@ -80,10 +88,11 @@
 
 .header .menu-icon {
   cursor: pointer;
-  display: inline-block;
+  display: block;
   float: right;
   padding: 28px 20px;
   position: relative;
+  -webkit-user-select: none;
   user-select: none;
 }
 
diff --git a/src/components/socialMedia/SocialMedia.scss b/src/components/socialMedia/SocialMedia.scss
index aec6fc0b9f..2f2abca15d 100644
--- a/src/components/socialMedia/SocialMedia.scss
+++ b/src/components/socialMedia/SocialMedia.scss
@@ -72,16 +72,57 @@
 .twitter i:hover,
 .google i:hover,
 .gitlab i:hover,
-.github i:hover,
 .linkedin i:hover,
 .facebook i:hover,
 .instagram i:hover,
 .stack-overflow i:hover,
-.kaggle i:hover,
-.medium i:hover {
+.kaggle i:hover {
   background-color: $textColor;
 }
 
+.fa-github {
+  background-color: $github;
+  color: $githubDark;
+}
+
+.fa-github:hover {
+  background-color: $githubDark;
+  color: $github;
+}
+
+.fa-medium {
+  background-color: $medium;
+  color: $mediumDark;
+}
+
+.fa-medium:hover {
+  background-color: $mediumDark;
+  color: $medium;
+}
+
+.dark-mode {
+
+  .fa-github {
+    background-color: $githubDark;
+    color: $github;
+  }
+
+  .fa-github:hover {
+    background-color: $github;
+    color: $githubDark;
+  }
+
+  .fa-medium {
+    background-color: $mediumDark;
+    color: $medium;
+  }
+
+  .fa-medium:hover {
+    background-color: $medium;
+    color: $mediumDark;
+  }
+}
+
 /* Media Query */
 @media (max-width: 768px) {
   .social-media-div {
diff --git a/src/components/softwareSkills/SoftwareSkill.js b/src/components/softwareSkills/SoftwareSkill.js
index f4239a178c..e76543e8c8 100644
--- a/src/components/softwareSkills/SoftwareSkill.js
+++ b/src/components/softwareSkills/SoftwareSkill.js
@@ -1,8 +1,10 @@
-import React from "react";
+import React, {useContext} from "react";
 import "./SoftwareSkill.scss";
 import {skillsSection} from "../../portfolio";
+import StyleContext from "../../contexts/StyleContext";
 
 export default function SoftwareSkill() {
+  const {isDark} = useContext(StyleContext);
   return (
     <div>
       <div className="software-skills-main-div">
@@ -11,7 +13,7 @@ export default function SoftwareSkill() {
             return (
               <li
                 key={i}
-                className="software-skill-inline"
+                className={"software-skill-inline" + (isDark ? " dark-mode" : "")}
                 name={skills.skillName}
               >
                 <i className={skills.fontAwesomeClassname}></i>
diff --git a/src/components/softwareSkills/SoftwareSkill.scss b/src/components/softwareSkills/SoftwareSkill.scss
index 4d302a1b4d..2f8f7c85d9 100644
--- a/src/components/softwareSkills/SoftwareSkill.scss
+++ b/src/components/softwareSkills/SoftwareSkill.scss
@@ -13,19 +13,21 @@
   display: inline-block;
   margin-right: 20px;
   margin-bottom: 20px;
+  color: $subTitle;
+
+  &.dark-mode {
+    color: $subTitleDark;
+  }
 }
 
-.software-skill-inline > i {
-  color: $subTitle;
+.software-skill-inline > p {
+  font-size: 10px;
 }
 
 .software-skill-inline > i:hover {
   color: $skillsColor;
 }
-.software-skill-inline > p {
-  color: $subTitle;
-  font-size: 10px;
-}
+
 .software-skill-inline > i:hover ~ p {
   color: $skillsColor;
 }
diff --git a/src/components/talkCard/TalkCard.js b/src/components/talkCard/TalkCard.js
index 49ff5285b3..4ae82242f7 100644
--- a/src/components/talkCard/TalkCard.js
+++ b/src/components/talkCard/TalkCard.js
@@ -12,7 +12,7 @@ export default function TalkCard({talkDetails}) {
         >
           <div className="diagonal-fill"></div>
           <div className="talk-card-title">{talkDetails.title}</div>
-          <p className="talk-card-subtitle">{talkDetails.subtitle}</p>
+          <p className={"talk-card-subtitle" + (talkDetails.isDark ? " dark-mode" : "")}>{talkDetails.subtitle}</p>
 
           <div className="card-footer-button-div">
             <a href={talkDetails.slides_url} target="_" className="talk-button">
diff --git a/src/components/talkCard/TalkCard.scss b/src/components/talkCard/TalkCard.scss
index 0fc003de83..dc3b3ce564 100644
--- a/src/components/talkCard/TalkCard.scss
+++ b/src/components/talkCard/TalkCard.scss
@@ -49,12 +49,16 @@
   padding-left: 30px;
   padding-right: 30px;
   font-size: 16px;
-  color: $talkCardSubTitle;
   line-height: 18px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  color: $talkCardSubTitle;
+
+  &.dark-mode {
+    color: $talkCardSubTitleDark;
+  }
 }
 .talk-button {
   background-color: $buttonColor;
diff --git a/src/containers/achievement/Achievement.scss b/src/containers/achievement/Achievement.scss
index 684f009b08..20bdda02a0 100644
--- a/src/containers/achievement/Achievement.scss
+++ b/src/containers/achievement/Achievement.scss
@@ -11,9 +11,6 @@
   margin: 0px;
   margin-bottom: 50px;
 }
-.subTitle {
-  color: $subTitle;
-}
 
 /* Media Query */
 @media (max-width: 1380px) {
diff --git a/src/containers/blogs/Blog.scss b/src/containers/blogs/Blog.scss
index 9be97efb7c..9e1d6101e0 100644
--- a/src/containers/blogs/Blog.scss
+++ b/src/containers/blogs/Blog.scss
@@ -22,6 +22,10 @@
   font-weight: 400;
 }
 
+.dark-mode.blog-subtitle {
+  color: $subTitleDark;
+}
+
 .blog-subtitle {
   text-transform: uppercase;
 }
@@ -41,9 +45,6 @@
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   gap: 32px;
 }
-.subTitle {
-  color: $subTitle;
-}
 
 /* Media Query */
 @media (max-width: 1380px) {
diff --git a/src/containers/greeting/Greeting.scss b/src/containers/greeting/Greeting.scss
index 919418e2ed..2b24e35d66 100644
--- a/src/containers/greeting/Greeting.scss
+++ b/src/containers/greeting/Greeting.scss
@@ -17,8 +17,8 @@
   display: flex;
 }
 
-.subTitle {
-  color: $subTitle !important;
+.dark-mode.greeting-text-p {
+  color: $subTitleDark;
 }
 
 .greeting-main {
@@ -40,7 +40,7 @@
 .greeting-text {
   font-size: 70px;
   line-height: 1.1;
-  color: $textColor !important;
+  color: $textColor;
 }
 
 .greeting-text-p {
diff --git a/src/containers/podcast/Podcast.scss b/src/containers/podcast/Podcast.scss
index 71206ce516..270e5b585d 100644
--- a/src/containers/podcast/Podcast.scss
+++ b/src/containers/podcast/Podcast.scss
@@ -15,8 +15,9 @@
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1rem 1rem;
 }
-.subTitle {
-  color: $subTitle;
+
+.dark-mode.podcast-header-subtitle {
+  color: $subTitleDark;
 }
 
 @media (max-width: 768px) {
diff --git a/src/containers/skills/Skills.scss b/src/containers/skills/Skills.scss
index 0bfa2ef4a3..91ac793f21 100644
--- a/src/containers/skills/Skills.scss
+++ b/src/containers/skills/Skills.scss
@@ -24,9 +24,6 @@
   font-size: 56px;
   font-weight: 400;
 }
-.subTitle {
-  color: $subTitle;
-}
 
 /* Media Query */
 @media (max-width: 1380px) {
diff --git a/src/containers/talks/Talks.scss b/src/containers/talks/Talks.scss
index 5462ab7515..fa3f63606c 100644
--- a/src/containers/talks/Talks.scss
+++ b/src/containers/talks/Talks.scss
@@ -12,10 +12,6 @@
   gap: 1rem 1rem;
 }
 
-.subTitle {
-  color: $subTitle;
-}
-
 @media (max-width: 768px) {
   .talk-header-title {
     font-size: 30px;