diff --git a/demo/client/App.tsx b/demo/client/App.tsx
index 36f68ee..fdce9a3 100644
--- a/demo/client/App.tsx
+++ b/demo/client/App.tsx
@@ -4,6 +4,7 @@ import {
   createStyles, makeStyles, Typography, Container,
 } from '@material-ui/core';
 import { Element } from 'react-scroll';
+import { sizing } from '@material-ui/system';
 import MainContainer from './containers/MainContainer';
 import { BackdropProvider } from './context/BackDropContext';
 import GlobalNavBar from './components/GlobalNavBar';
@@ -11,6 +12,8 @@ import LandingBody from './components/LandingBody';
 import TeamContainer from './containers/TeamContainer';
 import GettingStarted from './components/GettingStarted';
 import ParticlesBackdrop from './components/ParticlesBackdrop';
+import Footer from './components/Footer';
+
 
 const useStyles = makeStyles(() => createStyles({
   container: {
@@ -53,7 +56,7 @@ const App: FC = () => {
           >
             kafka-penguin
           </Typography>
-          <img alt="mainLogo" style={{ height: '30vh', paddingBottom: '5vh' }} src="/assets/penguin.svg" />
+          <img alt="mainLogo" style={{ height: '30vh', paddingBottom: '5vh' }} src="/assets/penguinCompressed.svg" />
           <Typography
             variant="h6"
             align="center"
@@ -77,6 +80,7 @@ const App: FC = () => {
         <Container className={classes.segment} component={Element} name="team">
           <TeamContainer />
         </Container>
+        <Footer height="25%" />
       </Container>
     </>
   );
diff --git a/demo/client/assets/penguinCompressed.svg b/demo/client/assets/penguinCompressed.svg
new file mode 100644
index 0000000..a6c9ca5
--- /dev/null
+++ b/demo/client/assets/penguinCompressed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:v="https://vecta.io/nano"><path d="M511.987 254.928C511.408 114.037 397.027 0 256 0 114.615 0 0 114.615 0 256c0 124.893 89.443 228.879 207.764 251.442l304.223-252.514z" fill="#a3ebfe"/><path d="M92.92 314.154L78.778 356.58c-.004.005 92.478 92.486 92.478 92.486L160.322 460l47.442 47.442C223.388 510.422 239.509 512 256 512c141.385 0 256-114.615 256-256l-.014-1.072L309.02 51.962 92.92 314.154z" fill="#70e2ff"/><path d="M172.024 150.639l-98 169.741c-8.284 14.349-3.368 32.696 10.981 40.981L122.741 296c22.091 0 39.999-17.908 39.999-40l35.265-90.361-25.981-15z" fill="#01538d"/><path d="M437.976 320.38l-98-169.741-25.981 15L349.259 256c0 22.092 17.908 40 39.999 40l37.736 65.361c14.35-8.285 19.266-26.632 10.982-40.981z" fill="#01375f"/><path d="M383.202 345.082L329.381 89.471C322.227 55.503 292.096 30 256 30l-40 215 120 215h15.678C372.984 436.847 386 405.945 386 372a130.52 130.52 0 0 0-2.798-26.918z" fill="#001a31"/><path d="M256 30c-36.096 0-66.227 25.503-73.381 59.471l-53.822 255.611A130.59 130.59 0 0 0 126 372c0 33.945 13.016 64.847 34.322 88H176l80-30V30z" fill="#01375f"/><path d="M216 430l99.546 22.33C340.089 434.108 356 404.916 356 372c0-7.1-.745-14.025-2.152-20.706l-36.573-173.702H216V430z" fill="#e0f9ff"/><path d="M196.454 452.33L256 430V177.592h-61.275l-36.573 173.702C156.745 357.975 156 364.9 156 372c0 32.916 15.911 62.108 40.454 80.33z" fill="#fff"/><path d="M300.028 95.682H216L256 200c23.353 0 44.732-8.431 61.275-22.408l-17.247-81.91z" fill="#ffc65c"/><path d="M211.972 95.682l-17.246 81.91A94.61 94.61 0 0 0 256 200V95.682h-44.028z" fill="#ffdd7d"/><path d="M256 55l-20 40.683L256 155l50-50c0-27.614-22.386-50-50-50z" fill="#001a31"/><path d="M206 105l50 50V55c-27.614 0-50 22.386-50 50z" fill="#01375f"/><path d="M305.285 411.606c.014 0-9.846-58.321-9.846-58.321H226L256 460h20l28.974-29.974c.66-3.241 1.026-6.59 1.026-10.026a50.36 50.36 0 0 0-.715-8.394z" fill="#0272aa"/><path d="M216.561 353.284l-9.86 58.321c-.448 2.73-.702 5.532-.702 8.395 0 3.437.366 6.785 1.026 10.026L236 460h20V353.284h-39.439z" fill="#0391c6"/><path d="M216,360c0,22.092,17.909,40,40,40s40-17.908,40-40H216z" fill="#fff"/><path d="M256 320l-20 40 20 40 40-40c0-22.092-17.909-40-40-40z" fill="#01375f"/><path d="M216 360l40 40v-80c-22.091 0-40 17.908-40 40z" fill="#0272aa"/><path d="M206 430c-16.569 0-30 13.432-30 30h60c0-16.568-13.431-30-30-30z" fill="#001a31"/><path d="M306 430c-16.569 0-30 13.432-30 30h60c0-16.568-13.431-30-30-30z" fill="#01375f"/></svg>
\ No newline at end of file
diff --git a/demo/client/assets/ziyad.jpeg b/demo/client/assets/ziyad.jpeg
new file mode 100644
index 0000000..cfe922e
Binary files /dev/null and b/demo/client/assets/ziyad.jpeg differ
diff --git a/demo/client/assets/ziyad.png b/demo/client/assets/ziyad.png
deleted file mode 100644
index 53bd462..0000000
Binary files a/demo/client/assets/ziyad.png and /dev/null differ
diff --git a/demo/client/components/Footer.tsx b/demo/client/components/Footer.tsx
new file mode 100644
index 0000000..fea3c13
--- /dev/null
+++ b/demo/client/components/Footer.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { FC } from 'react';
+import {
+  createStyles, makeStyles, withStyles, AppBar, Toolbar, IconButton, Button, Icon,
+} from '@material-ui/core';
+import { Link } from 'react-scroll';
+import { sizing } from '@material-ui/system';
+
+const useStyles = makeStyles(() => createStyles({
+  root: {
+    width: '100vw',
+    padding: 0,
+    bottom: '0',
+  },
+  landingButtons: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  logo: {
+    alignSelf: 'flex-start',
+  },
+  button: {
+    margin: '1rem 1rem 1rem 1rem',
+  },
+  toolbarStyle: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '70px',
+  },
+}));
+
+const toolbarStyle = {
+  minHeight: '200px',
+};
+
+const Footer: FC = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      {/* <GlobalCss /> */}
+      {/* className={classes.toolbarStyle} */}
+      <AppBar position="sticky" style={toolbarStyle}>
+        <Toolbar
+          className={classes.toolbarStyle}
+       // style={classes.toolbarStyle}
+        >
+          <IconButton className={classes.button}>
+            <Icon
+              component={Link}
+              to="top"
+              activeClass="active"
+              spy
+              smooth
+            >
+              <img alt="navLogo" src="assets/penguinCompressed.svg" />
+            </Icon>
+          </IconButton>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="features"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Features
+          </Button>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="demo"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Demo
+          </Button>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="getting started"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Getting Started
+          </Button>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="team"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Team
+          </Button>
+          {/* <Button
+            className={classes.button}
+            color="inherit"
+            href="https://app.gitbook.com/@kafka-penguin-1/s/kafka-penguin/"
+          >
+            Docs
+          </Button>
+          <Button
+            className={classes.button}
+            color="inherit"
+            href="https://github.com/oslabs-beta/kafka-penguin"
+          >
+            Github
+          </Button> */}
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/demo/client/components/GlobalNavBar.tsx b/demo/client/components/GlobalNavBar.tsx
index b78ed7b..a20540e 100644
--- a/demo/client/components/GlobalNavBar.tsx
+++ b/demo/client/components/GlobalNavBar.tsx
@@ -36,7 +36,7 @@ const GlobalNavBar: FC = () => {
   return (
     <div className={classes.root}>
       <GlobalCss />
-      <AppBar>
+      <AppBar position="sticky">
         <Toolbar className={classes.landingButtons}>
           <IconButton className={classes.button}>
             <Icon
@@ -46,7 +46,7 @@ const GlobalNavBar: FC = () => {
               spy
               smooth
             >
-              <img alt="navLogo" src="/assets/penguin.svg" />
+              <img alt="navLogo" src="assets/penguinCompressed.svg" />
             </Icon>
           </IconButton>
           <Button
diff --git a/demo/client/containers/TeamContainer.tsx b/demo/client/containers/TeamContainer.tsx
index 45b1160..929876e 100644
--- a/demo/client/containers/TeamContainer.tsx
+++ b/demo/client/containers/TeamContainer.tsx
@@ -22,6 +22,8 @@ const TeamContainer: FC = () => {
 
     },
   }));
+
+  //Add alt tags for images
   const timeo = {
     name: 'Timeo Williams',
     linkedIn: 'https://www.linkedin.com/in/timeowilliams/',
@@ -38,7 +40,7 @@ const TeamContainer: FC = () => {
     name: 'Ziyad Elbaz',
     linkedIn: 'https://www.linkedin.com/in/ziyadelbaz/',
     github: 'https://github.com/zelbaz946',
-    photo: '/assets/ziyad.png',
+    photo: '/assets/ziyad.jpeg',
   };
   const kushal = {
     name: 'Kushal Talele',
diff --git a/demo/client/index.html b/demo/client/index.html
index b5d0377..bb29a6e 100644
--- a/demo/client/index.html
+++ b/demo/client/index.html
@@ -4,10 +4,11 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg+xml" href="/assets/penguin.svg">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css"/>
+    <link rel="icon" type="image/svg+xml" href="assets/penguinCompressed.svg">
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet"> -->
+    
+    <link href="http://fonts.cdnfonts.com/css/nexa-bold" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css"/>
     <title>kafka-penguin</title>
 </head>
 <body>
diff --git a/demo/client/kafka-penguin.xml b/demo/client/kafka-penguin.xml
new file mode 100644
index 0000000..143c282
--- /dev/null
+++ b/demo/client/kafka-penguin.xml
@@ -0,0 +1,18 @@
+//Add key: event-driven, all our names
+
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://www.kafka-penguin.io:443/</loc>
+  <lastmod>2021-04-15T02:55:01+00:00</lastmod>
+</url>
+
+
+</urlset>
\ No newline at end of file
diff --git a/demo/client/theme.ts b/demo/client/theme.ts
index c06f259..dd1e0c9 100644
--- a/demo/client/theme.ts
+++ b/demo/client/theme.ts
@@ -1,6 +1,6 @@
-import { createMuiTheme } from '@material-ui/core/styles';
-
-const theme = createMuiTheme({
+import { createTheme } from '@material-ui/core/styles';
+//import {createMuiTheme} to {createTheme}
+const theme = createTheme({
   // spacing: factor => `${0.25 * factor}rem`,
   palette: {
     primary: {
@@ -28,7 +28,8 @@ const theme = createMuiTheme({
   typography: {
     fontSize: 14,
     fontFamily: [
-      'Montserrat',
+      // 'Montserrat', 'Gotham',
+      'Nexa', 'sans-serif',
     ].join(','),
   },
 });
diff --git a/demo/package.json b/demo/package.json
index 8771b3e..88446d8 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -13,7 +13,7 @@
     "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
     "tsc": "tsc -p tsconfig.json",
     "build": "tsc",
-    "dev": "concurrently \"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --hot --mode development\" \"nodemon server/server.ts\"",
+    "dev": "concurrently \"cross-env NODE_ENV=development webpack serve --config webpack.config.js --hot --mode development\" \"nodemon server/server.ts\"",
     "test": "jest --detectOpenHandles --testTimeout=20000"
   },
   "jest": {