diff --git a/src/App.css b/src/App.css
index e69de29..646ea16 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,18 @@
+html {
+  overflow: scroll;
+}
+::-webkit-scrollbar {
+  width: 0px;
+  background: transparent; /* make scrollbar transparent */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge add Firefox */
+.scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/src/components/About/About.css b/src/components/About/About.css
index 4191aea..092e9ed 100644
--- a/src/components/About/About.css
+++ b/src/components/About/About.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+
 body {
   background-color: #f9fafb;
 }
@@ -8,7 +10,7 @@ body {
   margin-top: 10px;
   overflow: hidden;
   padding: 0 2rem;
-  font-family: "Fira Code Medium", "monospace";
+  font-family: "Fira Code", "monospace";
 }
 
 .about-head {
diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorld.css b/src/components/CovidInfo/CovidWorld.js/CovidWorld.css
index cbcb2fa..ff31916 100644
--- a/src/components/CovidInfo/CovidWorld.js/CovidWorld.css
+++ b/src/components/CovidInfo/CovidWorld.js/CovidWorld.css
@@ -23,34 +23,19 @@
   margin-top: 10px;
   font-family: monospace;
 }
+/* WORLD CARD CSS ENDS */
 
-.world_head_paper {
+/* WorldChart CSS STARTS */
+.world_head .world_head__WorldChart {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  text-transform: capitalize;
-  width: 32%;
-  height: 50%;
-  margin-top: 10px;
-}
-
-.world_head_paper h3 {
-  text-align: center;
+  overflow: auto;
 }
 
-.world_head_paper .paper_title {
-  background-color: #00917c;
-  color: whitesmoke;
-  padding: 5px;
+.world_head .world_head__WorldChart .world_head__WorldChart_doughnut {
+  margin-top: 2rem;
 }
-
-.world_head_paper .count {
-  padding: 5px;
-  text-align: center;
-  font-size: 25px;
-  font-weight: 400;
-}
-
-/* WORLD CARD CSS ENDS */
+/* WorldChart CSS ENDS */
 
 /* CONTINENTS CARD CSS STARTS */
 .continents_head {
@@ -72,6 +57,23 @@
   text-transform: uppercase;
 }
 
+/* CONTINENTS CARD CSS ENDS */
+
+/* SINGLE CONTINENT CARD CSS STARTS */
+
+.single_continent_head {
+  width: 100%;
+  margin-top: -10px;
+}
+
+.continent_select_options {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+/* SINGLE CONTINENT CARD CSS ENDS */
+
 @media screen and (max-width: 750px) {
   .world_head_paper h3 {
     font-size: 13px;
diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorld.js b/src/components/CovidInfo/CovidWorld.js/CovidWorld.js
index b154fe6..e4c84a6 100644
--- a/src/components/CovidInfo/CovidWorld.js/CovidWorld.js
+++ b/src/components/CovidInfo/CovidWorld.js/CovidWorld.js
@@ -9,109 +9,31 @@ import {
 
 import "./CovidWorld.css";
 
-import { WorldChart, ContinentChart } from "./CovidWorldContents";
+import {
+  WorldChart,
+  SingleContinentChartInformation,
+} from "./CovidWorldContents";
 
 const CovidWorld = ({ value, index }) => {
   const [allWorldData, setAllWorldData] = useState([]);
-  const [dataByContinent, setDataByContinent] = useState([]);
+  const [continentsData, setContinentsData] = useState({});
   const [selectOptions, setSelectOptions] = useState("");
   const [loading, setLoading] = useState(true);
   // TODOs
   // 1. make a select field to filter out the slection
-  //    - get Data by specific continent
+  //    - get whole world (done)
+  //    - get Data by continents (removed as 2 and 3 are the same)
+  //    - get Data by specific continent (done)
   //    - get Data by countries
   //    - get Data by country
 
   const SelectOptions = [
     "Get COVID19 World Information",
-    "Get COVID19 Data by continents",
-    // "Get COVID19 Data by specific continent",
+    "Get COVID19 Data by a specific Continent",
     // "Get COVID19 Data by countries",
     // "Get COVID19 Data by country",
   ];
 
-  const WorldPaperContents = [
-    {
-      paperTitle: "Total Active Cases",
-      paperAnswer: allWorldData.active,
-    },
-    {
-      paperTitle: "Active per one million",
-      paperAnswer: allWorldData.activePerOneMillion,
-    },
-    {
-      paperTitle: "Affected Countries",
-      paperAnswer: allWorldData.affectedCountries,
-    },
-    {
-      paperTitle: "Total Cases",
-      paperAnswer: allWorldData.cases,
-    },
-    {
-      paperTitle: "Active Cases per million",
-      paperAnswer: allWorldData.casesPerOneMillion,
-    },
-    {
-      paperTitle: "critical",
-      paperAnswer: allWorldData.critical,
-    },
-    {
-      paperTitle: "critical per million",
-      paperAnswer: allWorldData.criticalPerOneMillion,
-    },
-    {
-      paperTitle: "deaths",
-      paperAnswer: allWorldData.deaths,
-    },
-    {
-      paperTitle: "deaths Per OneMillion",
-      paperAnswer: allWorldData.deathsPerOneMillion,
-    },
-    {
-      paperTitle: "one Case Per People",
-      paperAnswer: allWorldData.oneCasePerPeople,
-    },
-    {
-      paperTitle: "one Death Per People",
-      paperAnswer: allWorldData.oneDeathPerPeople,
-    },
-    {
-      paperTitle: "one Test Per People",
-      paperAnswer: allWorldData.oneTestPerPeople,
-    },
-    {
-      paperTitle: "population",
-      paperAnswer: allWorldData.population,
-    },
-    {
-      paperTitle: "recovered",
-      paperAnswer: allWorldData.recovered,
-    },
-    {
-      paperTitle: "recovered Per One Million",
-      paperAnswer: allWorldData.recoveredPerOneMillion,
-    },
-    {
-      paperTitle: "tests",
-      paperAnswer: allWorldData.tests,
-    },
-    {
-      paperTitle: "tests Per One Million",
-      paperAnswer: allWorldData.testsPerOneMillion,
-    },
-    {
-      paperTitle: "today's Cases",
-      paperAnswer: allWorldData.todayCases,
-    },
-    {
-      paperTitle: "today's Deaths",
-      paperAnswer: allWorldData.todayDeaths,
-    },
-    {
-      paperTitle: "today's Recoveries",
-      paperAnswer: allWorldData.todayRecovered,
-    },
-  ];
   const getAllWorldCovidData = async () => {
     await fetch(`https://disease.sh/v3/covid-19/all`)
       .then((response) => response.json())
@@ -120,19 +42,20 @@ const CovidWorld = ({ value, index }) => {
         setLoading(false);
       });
   };
-  const getCovidDataByContinent = async () => {
-    await fetch(`https://disease.sh/v3/covid-19/continents`)
+
+  const getCovidDataOfSingleContinent = async (continentValue) => {
+    await fetch(
+      `https://disease.sh/v3/covid-19/continents/${continentValue}?strict=true`
+    )
       .then((response) => response.json())
       .then((data) => {
-        setDataByContinent(data);
         setLoading(false);
-        console.log(data);
+        setContinentsData(data);
       });
   };
 
   useEffect(() => {
     getAllWorldCovidData();
-    getCovidDataByContinent();
   }, []);
 
   return (
@@ -171,18 +94,17 @@ const CovidWorld = ({ value, index }) => {
             <div className="world_head">
               {selectOptions === "Get COVID19 World Information" && (
                 <>
-                  <WorldChart
-                    allWorldData={allWorldData}
-                    WorldPaperContents={WorldPaperContents}
-                    loading={loading}
-                  />
+                  <WorldChart allWorldData={allWorldData} loading={loading} />
                 </>
               )}
-              {selectOptions === "Get COVID19 Data by continents" && (
+              {selectOptions === "Get COVID19 Data by a specific Continent" && (
                 <>
-                  <ContinentChart
-                    dataByContinent={dataByContinent}
+                  <SingleContinentChartInformation
                     loading={loading}
+                    getCovidDataOfSingleContinent={
+                      getCovidDataOfSingleContinent
+                    }
+                    continentsData={continentsData}
                   />
                 </>
               )}
diff --git a/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js b/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js
index a821943..e802456 100644
--- a/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js
+++ b/src/components/CovidInfo/CovidWorld.js/CovidWorldContents.js
@@ -1,5 +1,17 @@
-import { Container, makeStyles, CircularProgress } from "@material-ui/core";
+import { useState } from "react";
+import {
+  CircularProgress,
+  FormControl,
+  Select,
+  InputLabel,
+  MenuItem,
+  FormHelperText,
+  Container,
+  makeStyles,
+} from "@material-ui/core";
+
 import { Line, Doughnut } from "react-chartjs-2";
+import "./CovidWorld.css";
 
 const useStyles = makeStyles({
   progress: {
@@ -14,52 +26,6 @@ const useStyles = makeStyles({
   },
 });
 
-const lineOptions = {
-  scales: {
-    yAxes: [
-      {
-        ticks: {
-          beginAtZero: true,
-        },
-      },
-    ],
-  },
-};
-
-const bgColor = [
-  "rgba(153, 102, 255, 0.2)",
-  "rgba(255, 99, 132, 0.2)",
-  "rgba(54, 162, 235, 0.2)",
-  "rgba(255, 206, 86, 0.2)",
-  "rgba(75, 192, 192, 0.2)",
-  "rgba(255, 159, 64, 0.2)",
-  "rgba(237, 247, 86,0.2)",
-  "rgba(255, 168, 182,0.2)",
-  "rgba(162, 128, 137,0.2)",
-  "rgba(143, 130, 85, 0.2)",
-  "rgba(232, 177, 135, 0.2)",
-  "rgba(220, 207, 236, 0.2)",
-  "rgba(169, 151, 223, 0.2)",
-  "rgba(79, 81, 125, 0.2)",
-];
-
-const borderColor = [
-  "rgba(153, 102, 255, 1)",
-  "rgba(255, 99, 132, 1)",
-  "rgba(54, 162, 235, 1)",
-  "rgba(255, 206, 86, 1)",
-  "rgba(75, 192, 192, 1)",
-  "rgba(255, 159, 64, 1)",
-  "#edf756",
-  "#ffa8B6",
-  "#a28089",
-  "#8F8255",
-  "#E8B187",
-  "#dccfec",
-  "#a997df",
-  "#4f517d",
-];
-
 export const WorldChart = ({ allWorldData, loading }) => {
   const classes = useStyles();
   const initialData = {
@@ -194,9 +160,21 @@ export const WorldChart = ({ allWorldData, loading }) => {
     <Container maxWidth="lg">
       {!loading ? (
         <>
-          <Doughnut data={initialData} className={classes.chart} />
-          <Doughnut data={additionalData1} className={classes.chart} />
-          <Doughnut data={additionalData2} className={classes.chart} />
+          <p>Swipe left to see more details...</p>
+          <div className="world_head__WorldChart">
+            <Doughnut
+              data={initialData}
+              className="world_head__WorldChart_doughnut"
+            />
+            <Doughnut
+              data={additionalData1}
+              className="world_head__WorldChart_doughnut"
+            />
+            <Doughnut
+              data={additionalData2}
+              className="world_head__WorldChart_doughnut"
+            />
+          </div>
         </>
       ) : (
         <div className={classes.progress}>
@@ -207,53 +185,107 @@ export const WorldChart = ({ allWorldData, loading }) => {
   );
 };
 
-export const ContinentChart = ({ dataByContinent, loading }) => {
+export const SingleContinentChartInformation = ({
+  loading,
+  getCovidDataOfSingleContinent,
+  continentsData,
+}) => {
+  const [continentNames] = useState([
+    "North America",
+    "South America",
+    "Europe",
+    "Africa",
+    "Asia",
+    "Australia-Oceania",
+  ]);
+  const [continentValue, setContinentValue] = useState("");
   const classes = useStyles();
-  let count = 0;
-
+  const continentData = {
+    labels: [
+      "Active Cases per million",
+      "Critical",
+      "Recovered Per One Million",
+      "Tests Per One Million",
+      "Today's Cases",
+      "Today's Recoveries",
+    ],
+    datasets: [
+      {
+        label: "Continent Covid19 data",
+        fill: true,
+        data: [
+          continentsData.casesPerOneMillion,
+          continentsData.critical,
+          continentsData.recoveredPerOneMillion,
+          continentsData.testsPerOneMillion,
+          continentsData.todayCases,
+          continentsData.todayRecovered,
+        ],
+        backgroundColor: [
+          "rgba(255, 159, 64, 0.2)",
+          "rgba(255, 206, 86, 0.2)",
+          "rgba(255, 99, 132, 0.2)",
+          "rgba(54, 162, 235, 0.2)",
+          "rgba(75, 192, 192, 0.2)",
+          "rgba(153, 102, 255, 0.2)",
+        ],
+        borderColor: [
+          "rgba(255, 159, 64, 1)",
+          "rgba(255, 206, 86, 1)",
+          "rgba(255, 99, 132, 1)",
+          "rgba(54, 162, 235, 1)",
+          "rgba(75, 192, 192, 1)",
+          "rgba(153, 102, 255, 1)",
+        ],
+        borderWidth: 1,
+      },
+    ],
+  };
   return (
-    <Container maxWidth="lg">
+    <>
       {!loading ? (
         <>
-          {dataByContinent.map((data) => {
-            count = count + 1;
-            return (
-              <Line
-                data={{
-                  labels: [
-                    "Active Cases",
-                    "Cases",
-                    "Critical",
-                    "Deaths",
-                    "Recovered",
-                  ],
-                  datasets: [
-                    {
-                      label: data.continent,
-                      fill: true,
-                      data: [
-                        data.active,
-                        data.cases,
-                        data.critical,
-                        data.deaths,
-                        data.recovered,
-                      ],
-                      backgroundColor: bgColor[count],
-                      borderColor: borderColor[count],
-                      borderWidth: 1,
-                    },
-                  ],
-                }}
-                options={lineOptions}
-              />
-            );
-          })}
+          <div className="single_continent_head">
+            <div className="continent_select_options">
+              <FormControl variant="filled">
+                <InputLabel id="demo-simple-select-filled-label">
+                  Select a Continent
+                </InputLabel>
+                <Select
+                  labelId="continent_select_options"
+                  id="continent_select_options"
+                  value={continentValue}
+                  fullWidth
+                  onChange={(e) => {
+                    setContinentValue(e.target.value);
+                    getCovidDataOfSingleContinent(e.target.value);
+                  }}
+                  error={continentValue === ""}
+                >
+                  {continentNames.map((option, index) => {
+                    return (
+                      <MenuItem key={index} value={option}>
+                        {option}
+                      </MenuItem>
+                    );
+                  })}
+                </Select>
+                <FormHelperText style={{ color: "red" }}>
+                  {continentValue === "" ? "Please Select a value" : " "}
+                </FormHelperText>
+              </FormControl>
+              <br />
+              {continentValue !== "" && <Line data={continentData} />}
+            </div>
+          </div>
         </>
       ) : (
-        <div className={classes.progress}>
-          <CircularProgress />
-        </div>
+        <>
+          <div className={classes.progress}>
+            <CircularProgress />
+          </div>
+        </>
       )}
-    </Container>
+    </>
   );
 };