diff --git a/src/App.jsx b/src/App.jsx
index 4419611e3..f38d620b2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,33 +1,40 @@
-import React from 'react';
+import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 
 import Navigation from "./components/Navigation";
 import Greetings from "./containers/Greetings";
 import Skills from "./containers/Skills";
-import Proficiency from './containers/Proficiency';
+import Proficiency from "./containers/Proficiency";
 import Education from "./containers/Education";
-import Experience from './containers/Experience';
-import Projects from './containers/Projects';
-import GithubProfile from './containers/GithubProfile'
+import Experience from "./containers/Experience";
+import Projects from "./containers/Projects";
+import GithubProfile from "./containers/GithubProfile";
+import Feedbacks from "./containers/Feedbacks";
+
 const App = () => {
-    return ( 
-        <BrowserRouter>
-            <Switch>
-                <Route path="/" exact render={props => (
-                    <>
-                        <Navigation />
-                        <Greetings/>
-                        <Skills />
-                        <Proficiency />
-                        <Education />
-                        <Experience />
-                        <Projects />
-                        <GithubProfile />
-                    </>
-                )}/>
-            </Switch>
-        </BrowserRouter>
-     );
-}
- 
-export default App;
\ No newline at end of file
+	return (
+		<BrowserRouter>
+			<Switch>
+				<Route
+					path="/"
+					exact
+					render={(props) => (
+						<>
+							<Navigation />
+							<Greetings />
+							<Skills />
+							<Proficiency />
+							<Education />
+							<Experience />
+							<Feedbacks />
+							<Projects />
+							<GithubProfile />
+						</>
+					)}
+				/>
+			</Switch>
+		</BrowserRouter>
+	);
+};
+
+export default App;
diff --git a/src/components/FeedbackCard.jsx b/src/components/FeedbackCard.jsx
new file mode 100644
index 000000000..0a6d42dee
--- /dev/null
+++ b/src/components/FeedbackCard.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Card, CardBody, Badge } from "reactstrap";
+
+import { Fade } from "react-reveal";
+
+const FeedbackCard = ({ data }) => {
+	return (
+		<Fade right duration={1000} distance="40px">
+			<Card className="card-lift--hover shadow mt-4">
+				<CardBody>
+					<div className="d-flex px-3">
+						<div className="pl-4">
+							<h5 className="text-info">{data.name}</h5>
+							<p className="description mt-3">{data.feedback}</p>
+						</div>
+					</div>
+				</CardBody>
+			</Card>
+		</Fade>
+	);
+};
+
+export default FeedbackCard;
diff --git a/src/containers/Feedbacks.jsx b/src/containers/Feedbacks.jsx
new file mode 100644
index 000000000..76bd94a90
--- /dev/null
+++ b/src/containers/Feedbacks.jsx
@@ -0,0 +1,37 @@
+import { feedbacks } from "portfolio";
+import React from "react";
+import { Col, Container, Fade, Row } from "reactstrap";
+import FeedbackCard from "../components/FeedbackCard";
+const Feedbacks = () => {
+	return (
+		<section className="section section-lg">
+			<Container>
+				<Fade bottom duration={1000} distance="40px">
+					<div className="d-flex p-4">
+						<div>
+							<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-info">
+								<i className="fa fa-star text-info" />
+							</div>
+						</div>
+						<div className="pl-4">
+							<h4 className="display-3 text-info">
+								Our Clients Feedback
+							</h4>
+						</div>
+					</div>
+					<Row className="row-grid align-items-center">
+						{feedbacks.map((data, i) => {
+							return (
+								<Col key={i} lg={6}>
+									<FeedbackCard data={data} />
+								</Col>
+							);
+						})}
+					</Row>
+				</Fade>
+			</Container>
+		</section>
+	);
+};
+
+export default Feedbacks;
diff --git a/src/portfolio.js b/src/portfolio.js
index 007769883..46f1c6392 100644
--- a/src/portfolio.js
+++ b/src/portfolio.js
@@ -1,210 +1,222 @@
-import emoji from 'react-easy-emoji';
+import emoji from "react-easy-emoji";
 
-import googlelogo from './assets/img/icons/common/google.svg'
-import github from './assets/img/icons/common/github.svg'
-import airbnb from './assets/img/icons/common/airbnbLogo.png'
+import googlelogo from "./assets/img/icons/common/google.svg";
+import github from "./assets/img/icons/common/github.svg";
+import airbnb from "./assets/img/icons/common/airbnbLogo.png";
 
 export const greetings = {
-    "name": "Hanzla Tauqeer",
-    "title": "Hi all, I'm Hanzla",
-    "description": "A passionate Full Stack Web Developer and Mobile App Developer having an experience of building Web applications with JavaScript / Reactjs / Nodejs / Python / Django / Flask and some other cool libraries and frameworks and Cross Platform Mobile Apps With Flutter.",
-    "resumeLink": "https://cv.hanzla.ga"
-}
+	name: "Hanzla Tauqeer",
+	title: "Hi all, I'm Hanzla",
+	description:
+		"A passionate Full Stack Web Developer and Mobile App Developer having an experience of building Web applications with JavaScript / Reactjs / Nodejs / Python / Django / Flask and some other cool libraries and frameworks and Cross Platform Mobile Apps With Flutter.",
+	resumeLink: "https://cv.hanzla.ga",
+};
 
 export const openSource = {
-  githubUserName: '1hanzla100',
+	githubUserName: "1hanzla100",
 };
 
-export const contact = {
-  
-}
+export const contact = {};
 
 export const socialLinks = {
-    "facebook": "https://www.facebook.com/1hanzla100",
-    "instagram": "https://www.instagram.com/1hanzla100",
-    "twitter": "https://twitter.com/1hanzla100",
-    "github": "https://github.com/1hanzla100",
-    "linkedin": "https://www.linkedin.com/in/hanzla-tauqeer-0869281ba/"
-}
+	facebook: "https://www.facebook.com/1hanzla100",
+	instagram: "https://www.instagram.com/1hanzla100",
+	twitter: "https://twitter.com/1hanzla100",
+	github: "https://github.com/1hanzla100",
+	linkedin: "https://www.linkedin.com/in/hanzla-tauqeer-0869281ba/",
+};
 
 export const skillsSection = {
-    title: 'What I do',
-    subTitle: 'CRAZY FULL STACK DEVELOPER WHO WANTS TO EXPLORE EVERY TECH STACK',
-    skills: [
-      emoji(
-        '⚡ Develop highly interactive Front end / User Interfaces for your web and mobile applications'
-      ),
-      emoji('⚡ Progressive Web Applications ( PWA ) in normal and SPA Stacks'),
-      emoji(
-        '⚡ Integration of third party services such as Firebase/ AWS / Digital Ocean'
-      ),
-    ],
-    
-    softwareSkills: [
-      {
-        skillName: 'html-5',
-        fontAwesomeClassname: 'vscode-icons:file-type-html',
-      },
-      {
-        skillName: 'css3',
-        fontAwesomeClassname: 'vscode-icons:file-type-css',
-      },
-      {
-        skillName: 'sass',
-        fontAwesomeClassname: 'logos:sass',
-      },
-      {
-        skillName: 'JavaScript',
-        fontAwesomeClassname: 'logos:javascript',
-      },
-      {
-        skillName: 'TypeScript',
-        fontAwesomeClassname: 'logos:typescript-icon',
-      },
-      {
-        skillName: 'reactjs',
-        fontAwesomeClassname: 'vscode-icons:file-type-reactjs',
-      },
-      {
-        skillName: 'nodejs',
-        fontAwesomeClassname: 'logos:nodejs-icon',
-      },
-      {
-        skillName: 'flutter',
-        fontAwesomeClassname: 'logos:flutter',
-      },
-      {
-        skillName: 'swift',
-        fontAwesomeClassname: 'vscode-icons:file-type-swift',
-      },
-      {
-        skillName: 'npm',
-        fontAwesomeClassname: 'vscode-icons:file-type-npm',
-      },
-      {
-        skillName: 'sql-database',
-        fontAwesomeClassname: 'vscode-icons:file-type-sql',
-      },
-      {
-        skillName: 'mongoDB',
-        fontAwesomeClassname: 'vscode-icons:file-type-mongo',
-      },
-      {
-        skillName: 'aws',
-        fontAwesomeClassname: 'logos:aws',
-      },
-      {
-        skillName: 'firebase',
-        fontAwesomeClassname: 'logos:firebase',
-      },
-      {
-        skillName: 'python',
-        fontAwesomeClassname: 'logos:python',
-      },
-      {
-        skillName: 'git',
-        fontAwesomeClassname: 'logos:git-icon',
-      },
-      {
-        skillName: 'docker',
-        fontAwesomeClassname: 'logos:docker-icon',
-      },
-    ],
-}
+	title: "What I do",
+	subTitle:
+		"CRAZY FULL STACK DEVELOPER WHO WANTS TO EXPLORE EVERY TECH STACK",
+	skills: [
+		emoji(
+			"⚡ Develop highly interactive Front end / User Interfaces for your web and mobile applications"
+		),
+		emoji(
+			"⚡ Progressive Web Applications ( PWA ) in normal and SPA Stacks"
+		),
+		emoji(
+			"⚡ Integration of third party services such as Firebase/ AWS / Digital Ocean"
+		),
+	],
 
+	softwareSkills: [
+		{
+			skillName: "html-5",
+			fontAwesomeClassname: "vscode-icons:file-type-html",
+		},
+		{
+			skillName: "css3",
+			fontAwesomeClassname: "vscode-icons:file-type-css",
+		},
+		{
+			skillName: "sass",
+			fontAwesomeClassname: "logos:sass",
+		},
+		{
+			skillName: "JavaScript",
+			fontAwesomeClassname: "logos:javascript",
+		},
+		{
+			skillName: "TypeScript",
+			fontAwesomeClassname: "logos:typescript-icon",
+		},
+		{
+			skillName: "reactjs",
+			fontAwesomeClassname: "vscode-icons:file-type-reactjs",
+		},
+		{
+			skillName: "nodejs",
+			fontAwesomeClassname: "logos:nodejs-icon",
+		},
+		{
+			skillName: "flutter",
+			fontAwesomeClassname: "logos:flutter",
+		},
+		{
+			skillName: "swift",
+			fontAwesomeClassname: "vscode-icons:file-type-swift",
+		},
+		{
+			skillName: "npm",
+			fontAwesomeClassname: "vscode-icons:file-type-npm",
+		},
+		{
+			skillName: "sql-database",
+			fontAwesomeClassname: "vscode-icons:file-type-sql",
+		},
+		{
+			skillName: "mongoDB",
+			fontAwesomeClassname: "vscode-icons:file-type-mongo",
+		},
+		{
+			skillName: "aws",
+			fontAwesomeClassname: "logos:aws",
+		},
+		{
+			skillName: "firebase",
+			fontAwesomeClassname: "logos:firebase",
+		},
+		{
+			skillName: "python",
+			fontAwesomeClassname: "logos:python",
+		},
+		{
+			skillName: "git",
+			fontAwesomeClassname: "logos:git-icon",
+		},
+		{
+			skillName: "docker",
+			fontAwesomeClassname: "logos:docker-icon",
+		},
+	],
+};
 
 export const SkillBars = [
-    {
-      Stack: 'Frontend/Design', //Insert stack or technology you have experience in
-      progressPercentage: '90', //Insert relative proficiency in percentage
-    },
-    {
-      Stack: 'Backend',
-      progressPercentage: '70',
-    },
-    {
-      Stack: 'Programming',
-      progressPercentage: '60',
-    },
-  ]
+	{
+		Stack: "Frontend/Design", //Insert stack or technology you have experience in
+		progressPercentage: "90", //Insert relative proficiency in percentage
+	},
+	{
+		Stack: "Backend",
+		progressPercentage: "70",
+	},
+	{
+		Stack: "Programming",
+		progressPercentage: "60",
+	},
+];
 
 export const educationInfo = [
-    {
-      schoolName: 'Harvard University',
-      subHeader: 'Master of Science in Computer Science',
-      duration: 'September 2017 - April 2019',
-      desc: 'Participated in the research of XXX and published 3 papers.',
-      descBullets: [
-        'Lorem ipsum dolor sit amet, consectetur adipdfgiscing elit',
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      ],
-    },
-    {
-      schoolName: 'Harvard',
-      subHeader: 'Master of Science in Computer Science',
-      duration: 'September 2017 - April 2019',
-      desc: 'Participated in the research of XXX and published 3 papers.',
-      descBullets: [
-        'Lorem ipsum dolor sit amet, consectetfgur adipiscing elit',
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      ],
-    },
-    {
-      schoolName: 'Stanford University',
-      subHeader: 'Bachelor of Science in Computer Science',
-      duration: 'September 2013 - April 2017',
-      desc:
-        'Ranked top 10% in the program. Took courses about Software Engineering, Web Security, Operating Systems, ...',
-      descBullets: ['Lorem ipsum dolorfdg sit amet, consectetur adipiscing elit'],
-    },
-]
+	{
+		schoolName: "Harvard University",
+		subHeader: "Master of Science in Computer Science",
+		duration: "September 2017 - April 2019",
+		desc: "Participated in the research of XXX and published 3 papers.",
+		descBullets: [
+			"Lorem ipsum dolor sit amet, consectetur adipdfgiscing elit",
+			"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+		],
+	},
+	{
+		schoolName: "Harvard",
+		subHeader: "Master of Science in Computer Science",
+		duration: "September 2017 - April 2019",
+		desc: "Participated in the research of XXX and published 3 papers.",
+		descBullets: [
+			"Lorem ipsum dolor sit amet, consectetfgur adipiscing elit",
+			"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+		],
+	},
+	{
+		schoolName: "Stanford University",
+		subHeader: "Bachelor of Science in Computer Science",
+		duration: "September 2013 - April 2017",
+		desc: "Ranked top 10% in the program. Took courses about Software Engineering, Web Security, Operating Systems, ...",
+		descBullets: [
+			"Lorem ipsum dolorfdg sit amet, consectetur adipiscing elit",
+		],
+	},
+];
 
 export const experience = [
-  {
-    role: 'Software Engineer',
-    company: 'Google',
-    companylogo: googlelogo,
-    date: 'June 2018 – Present',
-    desc:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    descBullets: [
-      'Lorem ipsum dolor sit amet, consdfgectetur adipiscing elit',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-    ],
-  },
-  {
-    role: 'Front-End Developer',
-    company: 'Github',
-    companylogo: github,
-    date: 'May 2017 – May 2018',
-    desc:
-      'Lorem ipsum dolor sit amet, consefdctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  },
-  {
-    role: 'Software Engineer Intern',
-    company: 'Airbnb',
-    companylogo: airbnb,
-    date: 'Jan 2015 – Sep 2015',
-    desc:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  },
-]
+	{
+		role: "Software Engineer",
+		company: "Google",
+		companylogo: googlelogo,
+		date: "June 2018 – Present",
+		desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+		descBullets: [
+			"Lorem ipsum dolor sit amet, consdfgectetur adipiscing elit",
+			"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+		],
+	},
+	{
+		role: "Front-End Developer",
+		company: "Github",
+		companylogo: github,
+		date: "May 2017 – May 2018",
+		desc: "Lorem ipsum dolor sit amet, consefdctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+	},
+	{
+		role: "Software Engineer Intern",
+		company: "Airbnb",
+		companylogo: airbnb,
+		date: "Jan 2015 – Sep 2015",
+		desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+	},
+];
 
 export const projects = [
-  {
-    name: "lorem ipsum",
-    desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
-  },
-  {
-    name: "lorem ipsum",
-    desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
-  },
-  {
-    name: "lorem ipsum",
-    desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
-    link: {
-      name: "hanzla",
-      url: "kasjfklsdjf"
-    }
-  }
-]
\ No newline at end of file
+	{
+		name: "lorem ipsum",
+		desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+	},
+	{
+		name: "lorem ipsum",
+		desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+	},
+	{
+		name: "lorem ipsum",
+		desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+		link: {
+			name: "hanzla",
+			url: "kasjfklsdjf",
+		},
+	},
+];
+
+export const feedbacks = [
+	{
+		name: "Hassan Mehmood",
+		feedback:
+			"We have been very happy with our new website! It looks professional and very easy to navigate. Our experience with the customer service at Hanzla tauqeer has been great. They handle things very efficiently and are available for any questions we have. They also keep us updated on daily reports so we know how our site is doing. I would recommend that u have choose hanzla web developer services for u.",
+	},
+	{
+		name: "Maheen Altaf",
+		feedback:
+			"the website is very nice, everything was perfectly made as i need. it just loads in moments, without giving u the chance to wait. the quality is also very amazing. i am using it without any problem. great job",
+	},
+];