diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
index 2e904bb0..dcb2da4e 100755
--- a/src/Components/Footer/Footer.css
+++ b/src/Components/Footer/Footer.css
@@ -108,3 +108,7 @@ footer p {
     margin: 0%;
   }
 }
+
+.twitter-footer {
+  overflow: hidden;
+}
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
index 3046e2b0..75582dc9 100755
--- a/src/Components/Footer/Footer.jsx
+++ b/src/Components/Footer/Footer.jsx
@@ -11,7 +11,7 @@ const Footer = () => {
         <footer className="footer">
             <div className="container bottom_border">
                 <div className="row">
-                    <div className=" col-sm-4 col-md col-sm-4  col-12 col">
+                    <div className=" col-sm-4 col-md col-12 col">
                         <h5 className="footer_h5 col_white_amrc pt2">Find Me</h5>
                         <p className="mb10">HoseaCodes’ mission statement is to build the future while empowering every person and every organization on the planet to achieve more. </p>
                         <p><i className="fa fa-location-arrow"></i> Houston, TX </p>
@@ -39,7 +39,7 @@ const Footer = () => {
                             <li><a href="http://webenlance.com">Image Cropping</a></li>
                         </ul>
                     </div>
-                    <div className=" col-sm-4 col-md  col-12 col">
+                    <div className=" col-sm-4 col-md col-12 col twitter-footer">
                         <h5 className="footer_h5 col_white_amrc pt2">Follow Me On</h5>
                         {/* Twitter Profile Tweets */}
                         <ul className="footer_ul2_amrc">
@@ -50,7 +50,7 @@ const Footer = () => {
                     </div>
                 </div>
             </div>
-            <div className="container">
+            <div className="container col-md ">
                 <ul className="foote_bottom_ul_amrc">
                     <li><a href="/">Home</a></li>
                     <li><a href="/about">About</a></li>
diff --git a/src/Components/NavBar/NavBar.jsx b/src/Components/NavBar/NavBar.jsx
index 1063180f..d71b9393 100755
--- a/src/Components/NavBar/NavBar.jsx
+++ b/src/Components/NavBar/NavBar.jsx
@@ -14,7 +14,7 @@ const NavBar = () => {
   const [user] = state.userAPI.user
   const [isActive, toggle] = useReducer(
       (isActive) => !isActive,
-      false
+      true
       );
 
     return (
diff --git a/src/Components/PersonalBrand/PersonalBrand.css b/src/Components/PersonalBrand/PersonalBrand.css
index aede6142..3d784f27 100755
--- a/src/Components/PersonalBrand/PersonalBrand.css
+++ b/src/Components/PersonalBrand/PersonalBrand.css
@@ -145,6 +145,11 @@
   color: #fff;
 }
 
+.personal-btn-wrapper {
+  display: flex;
+  justify-content: space-around;
+}
+
 @keyframes peronal-btn {
   0% {
     left: 250%;
@@ -185,9 +190,10 @@
     height: 50vh;
     margin: auto;
   }
-  .personal-card-info {
+  .personal-btn-wrapper {
     display: none;
   }
+
   .bio-info {
     margin-top: 3rem;
   }
diff --git a/src/Components/PersonalBrand/PersonalBrandOriginal.jsx b/src/Components/PersonalBrand/PersonalBrandOriginal.jsx
index 52f0b35b..8f819053 100755
--- a/src/Components/PersonalBrand/PersonalBrandOriginal.jsx
+++ b/src/Components/PersonalBrand/PersonalBrandOriginal.jsx
@@ -76,9 +76,9 @@ const PersonalBrand = () => {
                         that believe in growth and innovation. I have worked progressively with major
                         companies since the beginning of my career and I am excited for the opportunity
                             to continue this journey with another industry leader.</p>
-                        <div style={{ display: "flex", justifyContent: 'space-around' }}>
+                        <div className="personal-btn-wrapper" >
                           <StyledButton onClick={handleClick}>More about Dominique</StyledButton>
-                          <StyledButton onClick={handleDownload}>Download my Resume</StyledButton>
+                          <StyledButton className="download-btn" onClick={handleDownload}>Download my Resume</StyledButton>
                         </div>
                     </div>
                 </div>
diff --git a/src/Components/Project/projectHighlight.jsx b/src/Components/Project/projectHighlight.jsx
index f734e55d..0ae126e3 100755
--- a/src/Components/Project/projectHighlight.jsx
+++ b/src/Components/Project/projectHighlight.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ProjectCard from '../Cards/projectCard';
+import ProjectCard from '../Cards/project';
 import {projectData} from '../../Pages/Projects/ProjectsData';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
diff --git a/src/Components/Technologies/Technologies.css b/src/Components/Technologies/Technologies.css
index 1cfbe5ac..84cd6197 100755
--- a/src/Components/Technologies/Technologies.css
+++ b/src/Components/Technologies/Technologies.css
@@ -111,7 +111,7 @@
 
 @media only screen and (min-device-width: 375px) and (max-device-width: 768px) {
   .tech-title {
-    /* font-size: 1.5rem; */
+    font-size: 3rem;
   }
 }
 
diff --git a/src/Layout/Button/styledButton.jsx b/src/Layout/Button/styledButton.jsx
index e4b45d6c..29839a4a 100644
--- a/src/Layout/Button/styledButton.jsx
+++ b/src/Layout/Button/styledButton.jsx
@@ -59,10 +59,9 @@ export const StyledButtonATag = styled.a`
         transition: 0.5s color ease;
       }
       @media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
-        width: 20%;
+        width: fit-content;
         margin: auto;
         bottom: 0 !important;
-        width: 40%;
       }
   `}
 `;
diff --git a/src/Pages/Articles/Articles.jsx b/src/Pages/Articles/Articles.jsx
index 3290d2b9..168eff93 100755
--- a/src/Pages/Articles/Articles.jsx
+++ b/src/Pages/Articles/Articles.jsx
@@ -1,5 +1,5 @@
 
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext } from 'react';
 import './Articles.css'
 import Subscribe from '../../Components/Subscribe/Subscribe'
 // import { articleData, categoryTags } from './ArticleData';
diff --git a/src/Pages/Articles/BtnRender.jsx b/src/Pages/Articles/BtnRender.jsx
index 858a7b77..e399f774 100755
--- a/src/Pages/Articles/BtnRender.jsx
+++ b/src/Pages/Articles/BtnRender.jsx
@@ -7,10 +7,8 @@ function BtnRender({ article, deleteArticle }) {
         <div className="row_btn">
             <Link id="btn_buy" to="#!" onClick={() => deleteArticle(article._id, article.images.public_id)}> Delete</Link>
             <Link id="btn_view" to={`/edit_article/${article._id}`}> Edit</Link>
-
-
         </div>
     )
 }
 
-export default BtnRender;
\ No newline at end of file
+export default BtnRender;
diff --git a/src/Pages/Home/Home.css b/src/Pages/Home/Home.css
index 9636e571..af5b8836 100755
--- a/src/Pages/Home/Home.css
+++ b/src/Pages/Home/Home.css
@@ -201,10 +201,6 @@
 }
 
 @media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
-  .testimonies-group h2 {
-    font-size: 3rem !important;
-    letter-spacing: normal !important;
-  }
   .homepage-combo {
     flex-direction: column;
     align-items: center;
@@ -213,437 +209,15 @@
   .socialmedia {
     width: 80%;
   }
-  .contact-group h2 {
-    letter-spacing: normal !important;
-    font-size: 3rem !important;
-  }
   .testomonies {
     width: 85%;
   }
+  .subTitle {
+    font-size: 3.5rem;
+  }
 
   .header-button {
     margin: auto !important;
     width: 40% !important;
   }
 }
-
-/*
-
-/* Medium devices (landscape tablets, 768px and up) */
-/* @media only screen and (min-width: 768px) {
-    .header {
-        background-color: rgba(119,119,119,0.6);;
-        position: relative;
-        height: 50vh;
-        width: 100%;
-        padding-bottom: 35px;
-    }
-
-    .testimonies-group h2 {
-        margin: auto;
-    }
-    .header-button{
-        display: none;
-
-    }
-    .color {
-        height: 5vh;
-    }
-    .homepage-combo {
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-    }
-    .socialmedia {
-        width: 80%;
-    }
-    .testomonies {
-        width: 80%;
-    }
-} */
-/* Large devices (laptops/desktops, 996px and up) */
-/* @media only screen and (min-width: 996px) {
-    .home-page {
-        overflow: hidden;
-    }
-    .header {
-        background-image: linear-gradient(to right bottom, rgba(119,119,119,0.6), rgba(119,119,119,0.6)), url('../../icons/wireframe.jpg');
-        background-size: cover;
-        background-position: top;
-        background-repeat: no-repeat;
-        background-attachment: fixed;
-        position: relative;
-        height: 50vh;
-        width: 100%;
-        padding-bottom: 35px;
-    }
-    .homepage-combo {
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-    }
-    .header-logo {
-        position: absolute;
-        left: 50%;
-        top: 15%;
-        transform: translateX(-50%);
-    }
-    .header-button {
-        position: relative;
-        left: -2%;
-    }
-    .header-button {
-        border: 2px solid #fff;
-        color: white;
-        box-sizing: inherit;
-        cursor: pointer;
-        display: inline-block;
-        font-size: 13pt;
-        margin-bottom: 10px;
-        padding: 10px 20px;
-        background-color: transparent;
-        transition: all 0.5s;
-    }
-
-    .header-button:hover {
-        background-color: #204740;
-        border-color: #204740;
-        font-size: 15pt;
-    }
-
-    .header-username, .header-username2, .header-career, .header-scroll {
-        color: white;
-        display: block;
-        font-family: Lato, sans-serif;
-        font-weight: bold;
-        text-align: center;
-        text-transform: uppercase;
-    }
-    .header-scroll {
-        position: fixed;
-        top: 95%;
-        width: 100%;
-        margin-top: 20rem; */
-/* animation: scrolls 3s steps(3,end) 8s infinite normal; */
-/* animation: up 3s ease-in 8s 1 normal; */
-/* } */
-/* @keyframes scrolls{
-        0% {
-            color: white;
-        }
-        100% {
-            color: #206a5d;
-            font-size: 2rem;
-        }
-    }
-    @keyframes up {
-        0% {
-            bottom: 250%;
-        }
-        100% {
-            bottom: 0%;
-        }
-    } */
-/* .header-username {
-        animation: header 5s ease-in -1s normal;
-
-    }
-
-    @keyframes header{
-        0% {
-            right: 250%;
-        }
-        100% {
-            right: 0%
-        }
-    }
-    .header-username2 {
-        animation: header2 5s ease-in -1s normal;
-
-    }
-    @keyframes header2{
-        0% {
-            left: 250%;
-        }
-        100% {
-            left: 0%
-        }
-    }
-    .projects h1, .testomonies h1 .technologies h1, .color h1, .articles h1, .socialmedia h1, .open-section h1{
-        color: white;
-        display: block;
-        font-family: Lato, sans-serif;
-        font-weight: bold;
-        text-align: center;
-        text-transform: uppercase;
-        font-size: 2rem;
-        letter-spacing: 1rem;
-        line-height: 40px;
-        margin: 0;
-        padding-top: 80px;
-    }
-
-
-    .header-username, .header-username2 {
-        position: relative;
-        font-size: 3rem;
-        letter-spacing: 2.5rem;
-        line-height: 50px;
-        padding: 1rem;
-        }
-
-
-    .color {
-        height: 20vh;
-        background-color: #1A1E23;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .technologies{
-        background-color: #1A1E23;
-
-    }
-
-
-    .contact {
-        background-color: #1A1E23;
-        padding-top: 2.5rem;
-    }
-
-
-    .btn-input {
-        margin-top: 1rem;
-        font-size: 1rem;
-        border-color: #206a5d;
-        border: #206a5d;
-        text-decoration: none;
-        background-color: #206a5d;
-        color: #ebecf1;
-        padding: 2px 6px 2px 6px;
-        border-top: 1px solid #CCCCCC;
-        border-right: 1px solid #333333;
-        border-bottom: 1px solid #333333;
-        border-left: 1px solid #CCCCCC;
-        border-radius: 8%;
-    }
-
-    .btn-input:hover {
-        margin-top: 1rem;
-        font-size: 1.2rem;
-        border-color: #206a5d;
-        border: #206a5d;
-        text-decoration: underline;
-        background-color: #206a5d;
-        color: #ebecf1;
-        padding: 4px 8px 4px 8px;
-        border-top: 1px solid #CCCCCC;
-        border-right: 1px solid #333333;
-        border-bottom: 1px solid #333333;
-        border-left: 1px solid #CCCCCC;
-        border-radius: 8%;
-    }
-} */
-/* @media only screen and (min-device-width: 1024px) {
-    .header-button {
-        display: none;
-    }
-    .domImg {
-        transform: scale(1.5);
-        top: 52%;
-        left: 30%
-    }
-    .open-section-first h1,.projects h1, .testomonies h1 .technologies h1, .color h1, .articles h1, .socialmedia h1, .open-section h1{
-        font-size: 3rem;
-    }
-
-} */
-
-/* Extra large devices (large laptops and desktops, 1200px and up) */
-/* @media only screen and (min-width: 1200px) {
-    .home-page {
-        overflow: hidden;
-    }
-    .header {
-        background-image: linear-gradient(to right bottom, rgba(119,119,119,0.6), rgba(119,119,119,0.6)), url('../../icons/wireframe.jpg');
-        background-size: cover;
-        background-position: top;
-        background-repeat: no-repeat;
-        background-attachment: fixed;
-        position: relative;
-        height: 100vh;
-        padding-bottom: 55px;
-    }
-    .header-logo {
-        position: absolute;
-        left: 50%;
-        top: 15%;
-        transform: translateX(-50%);
-    }
-    .header-button {
-        border: 2px solid #fff;
-        color: white;
-        box-sizing: inherit;
-        cursor: pointer;
-        display: inline-block;
-        font-size: 13pt;
-        margin-bottom: 10px;
-        padding: 10px 10px;
-        background-color: transparent;
-        transition: all 0.5s;
-    }
-    .header-button {
-        left: 35%;
-        overflow: hidden;
-        animation: header-btn 10s steps(1) -1s normal;
-
-    }
-    @keyframes header-btn{
-        0% {
-            left: 250%;
-        }
-        100% {
-            left: 0%
-        }
-    }
-
-    .header-button:hover {
-        background-color: #204740;
-        border-color: #204740;
-        font-size: 15pt;
-    }
-
-    .header-username, .header-username2, .header-career, .header-scroll {
-        color: white;
-        display: block;
-        font-family: Lato, sans-serif;
-        font-weight: bold;
-        text-align: center;
-        text-transform: uppercase;
-    }
-    .header-scroll {
-        position: fixed;
-        top: 95%;
-        width: 100%;
-        margin-top: 20rem; */
-/* animation: scrolls 3s steps(3,end) 8s infinite normal; */
-/* animation: up 3s ease-in 8s 1 normal; */
-/* } */
-/* @keyframes scrolls{
-        0% {
-            color: white;
-        }
-        100% {
-            color: #206a5d;
-            font-size: 2rem;
-        }
-    }
-    @keyframes up {
-        0% {
-            bottom: 250%;
-        }
-        100% {
-            bottom: 0%;
-        }
-    } */
-/* .header-username {
-        animation: header 5s ease-in -1s normal;
-
-    }
-
-    @keyframes header{
-        0% {
-            right: 250%;
-        }
-        100% {
-            right: 0%
-        }
-    }
-    .header-username2 {
-        animation: header2 5s ease-in -1s normal;
-
-    }
-    @keyframes header2{
-        0% {
-            left: 250%;
-        }
-        100% {
-            left: 0%
-        }
-    }
-    .projects h1, .technologies h1, .color h1, .articles h1, .socialmedia h1, .open-section h1{
-        color: white;
-        display: block;
-        font-family: Lato, sans-serif;
-        font-weight: bold;
-        text-align: center;
-        text-transform: uppercase;
-        font-size: 4rem;
-        letter-spacing: 1.5rem;
-        line-height: 40px;
-        margin: 0;
-    }
-
-
-    .header-username, .header-username2 {
-        position: relative;
-        font-size: 5rem;
-        letter-spacing: 2.5rem;
-        line-height: 100px;
-        padding: 1rem;
-        }
-
-
-    .color {
-        height: 20vh;
-        background-color: #1A1E23;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .technologies{
-        background-color: #1A1E23;
-
-    }
-
-
-    .contact {
-        background-color: #1A1E23;
-        padding-top: 2.5rem;
-    }
-
-
-    .btn-input {
-        margin-top: 1rem;
-        font-size: 1rem;
-        border-color: #206a5d;
-        border: #206a5d;
-        text-decoration: none;
-        background-color: #206a5d;
-        color: #ebecf1;
-        padding: 2px 6px 2px 6px;
-        border-top: 1px solid #CCCCCC;
-        border-right: 1px solid #333333;
-        border-bottom: 1px solid #333333;
-        border-left: 1px solid #CCCCCC;
-        border-radius: 8%;
-    }
-
-    .btn-input:hover {
-        margin-top: 1rem;
-        font-size: 1.2rem;
-        border-color: #206a5d;
-        border: #206a5d;
-        text-decoration: underline;
-        background-color: #206a5d;
-        color: #ebecf1;
-        padding: 4px 8px 4px 8px;
-        border-top: 1px solid #CCCCCC;
-        border-right: 1px solid #333333;
-        border-bottom: 1px solid #333333;
-        border-left: 1px solid #CCCCCC;
-        border-radius: 8%;
-    }
-} */
diff --git a/src/Pages/Projects/Project/Project.jsx b/src/Pages/Projects/Project/Project.jsx
index 4fcddf53..da327538 100755
--- a/src/Pages/Projects/Project/Project.jsx
+++ b/src/Pages/Projects/Project/Project.jsx
@@ -10,7 +10,7 @@ const ProjectItem = () => {
     // const newparm = parseInt(params.id)
 
     const { headerImg, name, title, role, objectives, subHeading, source,
-        background, context, design, designImg, headline, date, websites, typography,
+        background, context, design, designImg, headline, date, websites, app, typography,
         designColor, uiDesignImg, userFlows, mainFunctions, goal, version, prototype} = projectData[params.id - 1 ];
 
     //     const nextProjectLink =
@@ -51,6 +51,9 @@ const ProjectItem = () => {
                             <div className="text-loading-overlay is-reveal"></div>
                             <h3 className="hero-single-work-subtitle">{headline}</h3>
                         </div>
+                        <div className="app">
+                          <a href={app} target="_blank" rel="noopener noreferrer" className="button highlight"><i className="fa fa-apple fa-lg"></i>Get The App</a>
+                        </div>
                     </div>
                     <div className="hero-single-context-stripe">
                         <div className="project-content">
@@ -67,6 +70,7 @@ const ProjectItem = () => {
                         </div>
                     </div>
                 </div>
+
                 <StyledHr Primary/>
                 <hr className="header-hr"/>
                 <main className="single-work">
@@ -113,6 +117,7 @@ const ProjectItem = () => {
                                 </div>
                             </div>
                             <div className="button-content single-work-anim-text">
+
                                 <a href={websites[0]} target="_blank" rel="noopener noreferrer" className="case-study-single-button ghost no-smoothState">
                                     <span className="button-text">Visit Website</span>
                                     <span className="button-icon">