diff --git a/README.md b/README.md
index 9910d840d..1c67a1b69 100644
--- a/README.md
+++ b/README.md
@@ -132,6 +132,25 @@ Therefore, this part of portfolio is not customizable. But don't worry we have a
   - Now, if you see your website using `npm start`, it will directly open `home` rather than animating logo `splash` screen.
   - If you design your logo in future, then edit the files in `./src/components/Loader` and then revert `isSplash` to `true` in `src/portfolio.js`.
 
+
+
+### Opensource Page Optional 
+
+- Since everyone do not have an opensource contribution profile or they do not want to show the open source page.
+- Follow the steps mentioned below to remove the open source page.
+Steps:
+  1. Go to src/portfolio.js file
+  2. Inside portfolio.js file, go to line number 4, you will se the settings code:
+
+    ```javascript 
+    const settings = {
+      opensourcePageRequired: true, // Change this to 'false' if you do not want opensource page
+    };```
+
+- Change the opensourcePageRequired: false, if you want to remove the open source page.
+- In future, you can add the page again making it true once again
+
+
 # Choose Theme 🌈
 
 - You can take a look at `src/theme.js` file where all available themes are mentioned with respective color codes.
diff --git a/src/components/achievementCard/AchivementCard.js b/src/components/achievementCard/AchivementCard.js
index fdf9a17ff..ec2349cae 100644
--- a/src/components/achievementCard/AchivementCard.js
+++ b/src/components/achievementCard/AchivementCard.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Button from "../../components/button/Button";
 
 export default function AchivementCard({ cardInfo }) {
   function openUrlInNewTab(url) {
@@ -8,18 +9,20 @@ export default function AchivementCard({ cardInfo }) {
 
   return (
     <div className="certificate-card">
-      <div className="certificate-image-div">
+      {/**
+    
+       <div className="certificate-image-div">
         <img src={cardInfo.image} alt="PWA" className="card-image"></img>
       </div>
+    
+    */}
       <div className="certificate-detail-div">
         <h5 className="card-title">{cardInfo.title}</h5>
         <p className="card-subtitle">{cardInfo.description}</p>
       </div>
       <div className="certificate-card-footer">
-        {cardInfo.footer.map((v, i) => {
-          return <p onClick={() => openUrlInNewTab(v.url)}>{v.name}</p>;
-        })}
-      </div>
+        <Button text="View" href={cardInfo.footer} newTab={true} className="btn btn-primary" theme={cardInfo.theme} />
+    </div>
     </div>
   );
 }
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
index 67876bb99..29162b443 100644
--- a/src/components/button/Button.css
+++ b/src/components/button/Button.css
@@ -21,12 +21,14 @@
 .main-button:hover {
   /* background-color: #ffffff; */
   /* color: black; */
+  color: white;
   transition: ease-in 0.3s;
 }
 .project-button {
   display: flex;
   justify-content: center;
   margin-top: 20px;
+  
 }
 /* Media Query */
 @media (max-width: 768px) {
@@ -35,9 +37,21 @@
     padding: 12px 18px;
     margin-right: 0px;
   }
+  .main-button:hover {
+    /* background-color: #ffffff; */
+    /* color: black; */
+    color: white;
+    transition: ease-in 0.3s;
+  }
 }
 @media (max-width: 320px) {
   .main-button {
     font-size: 12px;
   }
+  .main-button:hover {
+    /* background-color: #ffffff; */
+    /* color: black; */
+    color: white;
+    transition: ease-in 0.3s;
+  }
 }
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index 3df2999ef..53e93e408 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -3,13 +3,13 @@ import "./Button.css";
 
 const onMouseEnter = (event, color, bgColor) => {
   const el = event.target;
-  el.style.color = color;
+  el.style.color = 'grey';
   el.style.backgroundColor = bgColor;
 };
 
 const onMouseOut = (event, color, bgColor) => {
   const el = event.target;
-  el.style.color = color;
+  el.style.color = 'white';
   el.style.backgroundColor = bgColor;
 };
 
diff --git a/src/components/githubRepoCard/GithubRepoCard.css b/src/components/githubRepoCard/GithubRepoCard.css
index acae792b7..7cbc4fa7a 100644
--- a/src/components/githubRepoCard/GithubRepoCard.css
+++ b/src/components/githubRepoCard/GithubRepoCard.css
@@ -4,6 +4,8 @@
   box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px;
   padding: 2rem;
   cursor: pointer;
+  min-height: 90%;
+  max-height: 90%;
 }
 .repo-card-div:hover {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px;
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index b0f646874..b40087732 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -86,16 +86,26 @@ class Header extends Component {
                 </NavLink>
               </li>
               <li>
+
+              {
+                settings.opensourcePageRequired ? 
+
                 <NavLink
-                  to="/opensource"
-                  tag={Link}
-                  activeStyle={{ fontWeight: "bold" }}
-                  style={{ color: theme.text }}
-                  onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
-                  onMouseOut={(event) => onMouseOut(event)}
-                >
-                  Open Source
-                </NavLink>
+                to="/opensource"
+                tag={Link}
+                activeStyle={{ fontWeight: "bold" }}
+                style={{ color: theme.text }}
+                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
+                onMouseOut={(event) => onMouseOut(event)}
+              >
+                Open Source
+              </NavLink>
+
+              : 
+              
+              ''
+              }
+               
               </li>
               <li>
                 <NavLink
diff --git a/src/containers/Main.js b/src/containers/Main.js
index 421bf4ee2..01b390964 100644
--- a/src/containers/Main.js
+++ b/src/containers/Main.js
@@ -42,12 +42,24 @@ export default class Main extends Component {
                   <Education {...props} theme={this.props.theme} />
                 )}
               />
-              <Route
+
+              {
+                
+                settings.opensourcePageRequired ? 
+                <Route
                 path="/opensource"
                 render={(props) => (
                   <Opensource {...props} theme={this.props.theme} />
                 )}
               />
+
+              :
+
+              ''
+              
+              }
+
+              
               <Route
                 path="/contact"
                 render={(props) => (
@@ -97,6 +109,22 @@ export default class Main extends Component {
                   <Education {...props} theme={this.props.theme} />
                 )}
               />
+
+
+              {
+                settings.opensourcePageRequired ? 
+                <Route
+                path="/opensource"
+                render={(props) => (
+                  <Opensource {...props} theme={this.props.theme} />
+                )}
+              />
+
+              : 
+              ''
+              
+              }
+
               <Route
                 path="/opensource"
                 render={(props) => (
diff --git a/src/containers/achievement/Achievement.js b/src/containers/achievement/Achievement.js
index 5864e6789..ba92ef39e 100644
--- a/src/containers/achievement/Achievement.js
+++ b/src/containers/achievement/Achievement.js
@@ -3,7 +3,7 @@ import "./Achievement.css";
 import AchivementCard from "../../components/achievementCard/AchivementCard";
 import { achievementSection } from "../../portfolio";
 
-export default function Achievement() {
+export default function Achievement({theme}) {
   // function openUrlInNewTab(url) {
   //   var win = window.open(url, "_blank");
   //   win.focus();
@@ -15,19 +15,23 @@ export default function Achievement() {
           <h1 className="heading achievement-heading">
             {achievementSection.title}
           </h1>
-          <p className="subTitle achievement-subtitle">
+          {/**
+          
+            <p className="subTitle achievement-subtitle">
             {achievementSection.subtitle}
           </p>
+
+          */}
         </div>
         <div className="achievement-cards-div">
-          {achievementSection.achivementsCards.map((card) => {
+          {achievementSection.achievementCard.map((card) => {
             return (
               <AchivementCard
                 cardInfo={{
                   title: card.title,
                   description: card.subtitle,
-                  image: card.image,
                   footer: card.footerLink,
+                  theme: theme,
                 }}
               />
             );
diff --git a/src/containers/experienceAccordion/ExperienceAccordion.js b/src/containers/experienceAccordion/ExperienceAccordion.js
index b06b719de..695a97749 100644
--- a/src/containers/experienceAccordion/ExperienceAccordion.js
+++ b/src/containers/experienceAccordion/ExperienceAccordion.js
@@ -4,17 +4,47 @@ import "./ExperienceAccordion.css";
 import { Accordion, Panel } from "baseui/accordion";
 
 class ExperienceAccordion extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      Work: true,
+      Interships: true,
+      Volunteerships: true
+    }
+ }
+
   render() {
     const theme = this.props.theme;
     return (
       <div className="experience-accord">
-        <Accordion onChange={({ expanded }) => console.log(expanded)}>
-          {this.props.sections.map((section) => {
+        <Accordion onPanelChange={(key, onChange) => {console.log('Key: ' + key)}} >
+          {this.props.sections.map((section, index) => {
             return (
               <Panel
                 className="accord-panel"
                 title={section["title"]}
-                key={section["title"]}
+                key={index}
+                value={section["title"]}
+                expanded={
+                  index == 0 ? this.state.Work : (index == 1 ? this.state.Internships : false) 
+                }
+              
+                onClick={(event) => {
+                  console.log('Event', event)
+          
+                  switch(index) {
+                    case 0: {
+                      this.setState({Work: this.state.Word})
+                    }
+                    case 1: {
+                      this.setState({Interships: !this.state.Interships})
+                    }
+                    case 2: {
+                      this.setState({Volunteerships: !this.state.Volunteerships})
+                    }
+                  }
+                }}
               >
                 {section["experiences"].map((experience) => {
                   return (
diff --git a/src/containers/greeting/Greeting.js b/src/containers/greeting/Greeting.js
index 395c8ffb5..8794d1336 100644
--- a/src/containers/greeting/Greeting.js
+++ b/src/containers/greeting/Greeting.js
@@ -18,7 +18,10 @@ export default function Greeting(props) {
                 {greeting.title}
               </h1>
               <h2 className="greeting-nickname" style={{ color: theme.text }}>
-                ( {greeting.nickname} )
+              {
+                greeting.nickname ? '( '+greeting.nickname+' )' : greeting.nickname
+              }
+             
               </h2>
               <p
                 className="greeting-text-p subTitle"
diff --git a/src/pages/home/HomeComponent.js b/src/pages/home/HomeComponent.js
index 652c45a67..b7915d1bd 100644
--- a/src/pages/home/HomeComponent.js
+++ b/src/pages/home/HomeComponent.js
@@ -4,6 +4,7 @@ import Greeting from "../../containers/greeting/Greeting";
 import Skills from "../../containers/skills/Skills";
 import Footer from "../../components/footer/Footer";
 import TopButton from "../../components/topButton/TopButton";
+import Achievement from "../../containers/achievement/Achievement";
 
 class Home extends Component {
   render() {
@@ -13,6 +14,7 @@ class Home extends Component {
         <Header theme={this.props.theme} />
         <Greeting theme={this.props.theme} />
         <Skills theme={this.props.theme} />
+        <Achievement theme={this.props.theme} />
         <Footer theme={this.props.theme} />
         <TopButton theme={this.props.theme} />
       </div>
diff --git a/src/portfolio.js b/src/portfolio.js
index e4332f855..4fd2341ae 100644
--- a/src/portfolio.js
+++ b/src/portfolio.js
@@ -3,6 +3,7 @@
 // Website related settings
 const settings = {
   isSplash: true, // Change this to false if you don't want Splash screen.
+  opensourcePageRequired: true, // Change this to 'false' if you do not want opensource page
 };
 
 //SEO Related settings
@@ -83,6 +84,26 @@ const socialMediaLinks = [
   },
 ];
 
+const achievementSection = {
+  title: "Achievements",
+  achievementCard: [
+    {
+      title: "Google Explore ML Facilitator",
+      subtitle:
+        "Explore Machine Learning (ML) is a Google-sponsored program for university students to get started with Machine Learning. The curriculum offers 3 tracks of ML Content (Beginner, Intermediate, Advanced) and relies on university student facilitators to train other students on campus and to build opensource projects under this program.",
+
+      footerLink: "https://about.google/",
+    },
+    {
+      title: "Microsoft Student Partner",
+      subtitle:
+        "Microsoft Student Partner is a program for university students to lead the awareness and use of Cloud especially Azure tools in the development of their projects and startups. Under this program, I have organised hands on workshops and seminars to teach Cloud Computing concepts to students.",
+
+      footerLink: "https://www.microsoft.com/",
+    },
+  ],
+};
+
 const skills = {
   data: [
     {
@@ -675,6 +696,7 @@ export {
   greeting,
   socialMediaLinks,
   skills,
+  achievementSection,
   competitiveSites,
   degrees,
   certifications,
diff --git a/src/theme.js b/src/theme.js
index bfb989de0..4ad7ba604 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,6 +1,12 @@
 // theme.js
 export const blueTheme = {
-  body: "#EDF9FE",
+  body: "#E0EAFC" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #CFDEF3, #E0EAFC)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #CFDEF3, #E0EAFC)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#EDF9FE",
   text: "#001C55",
   highlight: "#A6E1FA",
   dark: "#00072D",
@@ -12,7 +18,13 @@ export const blueTheme = {
 };
 
 export const brownTheme = {
-  body: "#FFFEFD",
+  body: "#eacda3" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #d6ae7b, #eacda3)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #d6ae7b, #eacda3)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#FFFEFD",
   text: "#5D2A42",
   highlight: "#FFF9EC",
   dark: "#00072D",
@@ -24,7 +36,13 @@ export const brownTheme = {
 };
 
 export const purpleTheme = {
-  body: "#F8EFF4",
+  body: "#654ea3" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #eaafc8, #654ea3)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #eaafc8, #654ea3)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#F8EFF4",
   text: "#231942",
   highlight: "#E0B1CB",
   dark: "#00072D",
@@ -36,7 +54,13 @@ export const purpleTheme = {
 };
 
 export const yelGreenTheme = {
-  body: "#FFFFEB",
+  body: "#A1FFCE" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #FAFFD1, #A1FFCE)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #FAFFD1, #A1FFCE)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#FFFFEB",
   text: "#003F2F",
   highlight: "#dddf00",
   dark: "#00072D",
@@ -48,7 +72,13 @@ export const yelGreenTheme = {
 };
 
 export const redTheme = {
-  body: "#FFF8E6",
+  body: "#EF3B36" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #FFFFFF, #EF3B36)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #FFFFFF, #EF3B36)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#FFF8E6",
   text: "#6a040f",
   highlight: "#ffba08",
   dark: "#03071e",
@@ -60,7 +90,10 @@ export const redTheme = {
 };
 
 export const blackTheme = {
-  body: "#E5E5E5",
+  body: "#2d3436",
+  body: "linear-gradient(315deg, #2d3436 0%, #d3d3d3 74%)",
+
+  //body: "#E5E5E5",
   text: "#14213d",
   highlight: "#ffffff",
   dark: "#000000",
@@ -72,7 +105,13 @@ export const blackTheme = {
 };
 
 export const pinkTheme = {
-  body: "#FEE9F2",
+  body: "#f4c4f3" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #fc67fa, #f4c4f3)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #fc67fa, #f4c4f3)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#FEE9F2",
   text: "#620E34",
   highlight: "#FBA7CD",
   dark: "#31071A",
@@ -84,7 +123,13 @@ export const pinkTheme = {
 };
 
 export const violetTheme = {
-  body: "#F4EEFC",
+  body: "#CC95C0" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #7AA1D2, #DBD4B4, #CC95C0)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #7AA1D2, #DBD4B4, #CC95C0)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#F4EEFC",
   text: "#430A58",
   highlight: "#D6BEF4",
   dark: "#21052C",
@@ -96,7 +141,13 @@ export const violetTheme = {
 };
 
 export const greenTheme = {
-  body: "#E6FAF5",
+  body: "#A1FFCE" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #FAFFD1, #A1FFCE)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #FAFFD1, #A1FFCE)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#E6FAF5",
   text: "#084c61",
   highlight: "#9BEED8",
   dark: "#031E26",
@@ -108,7 +159,13 @@ export const greenTheme = {
 };
 
 export const orangeTheme = {
-  body: "#FFF0EA",
+  body: "#C6FFDD" /* fallback for old browsers */,
+  body:
+    "-webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD)" /* Chrome 10-25, Safari 5.1-6 */,
+  body:
+    "linear-gradient(to right, #f7797d, #FBD786, #C6FFDD)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
+
+  //body: "#FFF0EA",
   text: "#99401F",
   highlight: "#FFB59A",
   dark: "#33150A",