diff --git a/src/components/aboutData.js b/src/components/aboutData.js
new file mode 100644
index 0000000..c882cbe
--- /dev/null
+++ b/src/components/aboutData.js
@@ -0,0 +1,48 @@
+import Accordian from "./AccordianComponent";
+
+const data = [
+  {
+    id: 1,
+    name: "Annual Reports",
+    to: "annual-report",
+    component: { Accordian },
+  },
+  {
+    id: 2,
+    name: "Awards",
+    to: "awards",
+    component: {},
+  },
+  {
+    id: 3,
+    name: "History of Day",
+    to: "history-of-day",
+    component: {},
+  },
+  {
+    id: 4,
+    name: "Member Services",
+    to: "member-services",
+    component: {},
+  },
+  {
+    id: 5,
+    name: "People",
+    to: "people",
+    component: {},
+  },
+  {
+    id: 6,
+    name: "Calender",
+    to: "calender",
+    component: {},
+  },
+  {
+    id: 7,
+    name: "Contact Us",
+    to: "contact-us",
+    component: {},
+  },
+];
+
+export default data;
diff --git a/src/components/accordianData.js b/src/components/accordianData.js
index 3a604a8..71ecf2e 100644
--- a/src/components/accordianData.js
+++ b/src/components/accordianData.js
@@ -1,54 +1,60 @@
-import UCS from '../assets/img/UCS.jpeg';
-import AWS from '../assets/img/aws.jpeg';
+import UCS from "../assets/img/UCS.jpeg";
+import AWS from "../assets/img/aws.jpeg";
 
 const reports = [
   {
-    'title': 'Report 2018-19',
-    'details': 'Click here to download the official report of PEC ACM Achievements and Awards for the year 2018-19',
-    'link': '/',
+    title: "Report 2018-19",
+    details:
+      "Click here to download the official report of PEC ACM Achievements and Awards for the year 2018-19",
+    link: "/",
     // 'linkLabel': '2018-19.pdf'
   },
   {
-    'title': 'Report 2019-20',
-    'details': 'Click here to download the official report of PEC ACM Achievements and Awards for the year 2019-20',
-    'link': '/',
+    title: "Report 2019-20",
+    details:
+      "Click here to download the official report of PEC ACM Achievements and Awards for the year 2019-20",
+    link: "/",
     // 'linkLabel': '2019-20.pdf'
-  }
+  },
 ];
 
 const achievements = [
   {
-    title: 'UCS',
-    content: 'Ultimate Coding Showdown',
+    title: "UCS",
+    content: "Ultimate Coding Showdown",
     image: UCS,
-    altText: 'Ultimate Coding Showdown',
-  }, {
-    title: 'AWS',
-    content: 'Amazon Web Services',
+    altText: "Ultimate Coding Showdown",
+  },
+  {
+    title: "AWS",
+    content: "Amazon Web Services",
     image: AWS,
-    altText: 'Amazon Web Services',
-  }, {
-    title: 'Andhadhun',
-    content: 'Ultimate Coding Showdown',
+    altText: "Amazon Web Services",
+  },
+  {
+    title: "Andhadhun",
+    content: "Ultimate Coding Showdown",
     image: UCS,
-    altText: 'Ultimate Coding Showdown',
+    altText: "Ultimate Coding Showdown",
   },
   {
-    title: 'IIT Bombay',
-    content: 'Among top 10 teams for Ideate',
+    title: "IIT Bombay",
+    content: "Among top 10 teams for Ideate",
     image: UCS,
-    altText: 'Ultimate Coding Showdown',
-  }, {
-    title: 'GNDU',
-    content: 'Bagged 1st prize in HackZeroToOne',
+    altText: "Ultimate Coding Showdown",
+  },
+  {
+    title: "GNDU",
+    content: "Bagged 1st prize in HackZeroToOne",
     image: AWS,
-    altText: 'Amazon Web Services',
-  }, {
-    title: 'CCET',
-    content: '3rd Prize in Chaos 2.0',
+    altText: "Amazon Web Services",
+  },
+  {
+    title: "CCET",
+    content: "3rd Prize in Chaos 2.0",
     image: UCS,
-    altText: 'Ultimate Coding Showdown',
-  }
+    altText: "Ultimate Coding Showdown",
+  },
 ];
 
-export {reports, achievements};
\ No newline at end of file
+export { reports, achievements };
diff --git a/src/components/pages/About.js b/src/components/pages/About.js
index 141b0a6..e9695ca 100644
--- a/src/components/pages/About.js
+++ b/src/components/pages/About.js
@@ -1,5 +1,66 @@
 import React from "react";
+import { Typography } from "@material-ui/core";
+import { Helmet } from "react-helmet";
+import Footer from "../Footer";
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { Tabs, Tab, Box } from "@material-ui/core";
+import data from "../aboutData";
+
+function RenderTab(props) {
+  return <Tab label={props.name} component={Link} to={`/about/${props.to}`} />;
+}
+
+function search(data, key) {
+  for (var i = 0; i < data.length; i++) {
+    if (data[i].to === key) {
+      console.log("found");
+      return data[i].component;
+    }
+  }
+}
+
+const Comp = ({ match }) =>
+  console.log("match", match) || <div>{search(data, match.params.id)}</div>;
 
 export default function About() {
-  return <div></div>;
+  return (
+    <div>
+      <div className="Home">
+        <Helmet>
+          <title>PEC ACM Society</title>
+          <meta name="title" content="Computer Science Society" />
+        </Helmet>
+        <Box justifyContent="flex-start">
+          <Typography
+            variant={"subtitle1"}
+            component={"h1"}
+            className="fadeInUp"
+            style={{ animationDelay: "0.7s" }}
+          >
+            About Us
+          </Typography>
+        </Box>
+      </div>
+      <div className="Home">
+        {/* Navtab*/}
+        <Router>
+          <Tabs
+            indicatorColor="primary"
+            textColor="primary"
+            className="tabs fadeInUp"
+            style={{ animationDelay: "1.2s" }}
+          >
+            <Box display="flex" flexWrap="wrap">
+              {data.map(RenderTab)}
+            </Box>
+          </Tabs>
+
+          {/* Router*/}
+          <Route path="/about/:id" component={Comp} />
+        </Router>
+      </div>
+
+      <Footer />
+    </div>
+  );
 }