diff --git a/public/images/D.jpg b/public/images/D.jpg
new file mode 100644
index 00000000..a453c6c3
Binary files /dev/null and b/public/images/D.jpg differ
diff --git a/public/images/M.JPG b/public/images/M.JPG
new file mode 100644
index 00000000..513d4ee8
Binary files /dev/null and b/public/images/M.JPG differ
diff --git a/public/images/W.JPG b/public/images/W.JPG
new file mode 100644
index 00000000..94f1a7fc
Binary files /dev/null and b/public/images/W.JPG differ
diff --git a/src/components/Acomplishments/Acomplishments.js b/src/components/Acomplishments/Acomplishments.js
index 89e0c598..e1edcf5b 100644
--- a/src/components/Acomplishments/Acomplishments.js
+++ b/src/components/Acomplishments/Acomplishments.js
@@ -1,13 +1,17 @@
-import React from 'react';
+import React from "react";
 
-import { Section, SectionDivider, SectionTitle } from '../../styles/GlobalComponents';
-import { Box, Boxes, BoxNum, BoxText } from './AcomplishmentsStyles';
+import {
+  Section,
+  SectionDivider,
+  SectionTitle,
+} from "../../styles/GlobalComponents";
+import { Box, Boxes, BoxNum, BoxText } from "./AcomplishmentsStyles";
 
 const data = [
-  { number: 20, text: 'Open Source Projects'},
-  { number: 1000, text: 'Students', },
-  { number: 1900, text: 'Github Followers', },
-  { number: 5000, text: 'Github Stars', }
+  { number: 5, text: "Open Source Projects" },
+  { number: 10, text: "Students" },
+  { number: 2, text: "Github Followers" },
+  { number: 0, text: "Github Stars" },
 ];
 
 const Acomplishments = () => (
@@ -21,7 +25,7 @@ const Acomplishments = () => (
         </Box>
       ))}
     </Boxes>
-    <SectionDivider/>
+    <SectionDivider />
   </Section>
 );
 
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index c4af52e2..1337a0be 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -1,8 +1,18 @@
-import React from 'react';
-import { AiFillGithub, AiFillInstagram, AiFillLinkedin } from 'react-icons/ai';
+import React from "react";
+import { AiFillGithub, AiFillInstagram, AiFillLinkedin } from "react-icons/ai";
 
-import { SocialIcons } from '../Header/HeaderStyles';
-import { CompanyContainer, FooterWrapper, LinkColumn, LinkItem, LinkList, LinkTitle, Slogan, SocialContainer, SocialIconsContainer } from './FooterStyles';
+import { SocialIcons } from "../Header/HeaderStyles";
+import {
+  CompanyContainer,
+  FooterWrapper,
+  LinkColumn,
+  LinkItem,
+  LinkList,
+  LinkTitle,
+  Slogan,
+  SocialContainer,
+  SocialIconsContainer,
+} from "./FooterStyles";
 
 const Footer = () => {
   return (
@@ -10,12 +20,12 @@ const Footer = () => {
       <LinkList>
         <LinkColumn>
           <LinkTitle>Call</LinkTitle>
-          <LinkItem href="tel:314-343-3432">314-343-3432</LinkItem>
+          <LinkItem href="tel:919-454-2775">919-454-2775</LinkItem>
         </LinkColumn>
         <LinkColumn>
           <LinkTitle>Email</LinkTitle>
-          <LinkItem href="mailto:contact@jsmastery.com">
-            contact@jsmastery.com
+          <LinkItem href="mailto:christopher@holdersolutions.us">
+            christopher@holdersolutions.us
           </LinkItem>
         </LinkColumn>
       </LinkList>
diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js
index fc7af3ce..736c0b00 100644
--- a/src/components/Hero/Hero.js
+++ b/src/components/Hero/Hero.js
@@ -1,9 +1,14 @@
-import React from 'react';
+import React from "react";
 
-import { Section, SectionText, SectionTitle } from '../../styles/GlobalComponents';
-import Button from '../../styles/GlobalComponents/Button';
-import { LeftSection } from './HeroStyles';
+import {
+  Section,
+  SectionText,
+  SectionTitle,
+} from "../../styles/GlobalComponents";
+import Button from "../../styles/GlobalComponents/Button";
+import { LeftSection } from "./HeroStyles";
 
+let site = "HolderDesigns";
 const Hero = (props) => (
   <>
     <Section row nopadding>
@@ -13,7 +18,8 @@ const Hero = (props) => (
           My Personal Portfolio
         </SectionTitle>
         <SectionText>
-        The purpose of JavaScript Mastery is to help aspiring and established developers to take their development skills to the next level and build awesome apps.
+          The purpose of {site} is to showcase valuable design and development practices to assist with modern business problems.
+          Let's take your project to the next level and build something awesome.
         </SectionText>
         <Button onClick={props.handleClick}>Learn More</Button>
       </LeftSection>
@@ -21,4 +27,4 @@ const Hero = (props) => (
   </>
 );
 
-export default Hero;
\ No newline at end of file
+export default Hero;
diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js
index 00b52800..dc4ce174 100644
--- a/src/components/Projects/Projects.js
+++ b/src/components/Projects/Projects.js
@@ -1,8 +1,24 @@
-import React from 'react';
+import React from "react";
 
-import { BlogCard, CardInfo, ExternalLinks, GridContainer, HeaderThree, Hr, Tag, TagList, TitleContent, UtilityList, Img } from './ProjectsStyles';
-import { Section, SectionDivider, SectionTitle } from '../../styles/GlobalComponents';
-import { projects } from '../../constants/constants';
+import {
+  BlogCard,
+  CardInfo,
+  ExternalLinks,
+  GridContainer,
+  HeaderThree,
+  Hr,
+  Tag,
+  TagList,
+  TitleContent,
+  UtilityList,
+  Img,
+} from "./ProjectsStyles";
+import {
+  Section,
+  SectionDivider,
+  SectionTitle,
+} from "../../styles/GlobalComponents";
+import { projects } from "../../constants/constants";
 
 const Projects = () => (
   <Section nopadding id="projects">
@@ -12,7 +28,7 @@ const Projects = () => (
       {projects.map((p, i) => {
         return (
           <BlogCard key={i}>
-          <Img src={p.image} />
+            <Img src={p.image} />
             <TitleContent>
               <HeaderThree title>{p.title}</HeaderThree>
               <Hr />
@@ -37,4 +53,4 @@ const Projects = () => (
   </Section>
 );
 
-export default Projects;
\ No newline at end of file
+export default Projects;
diff --git a/src/components/Technologies/Technologies.js b/src/components/Technologies/Technologies.js
index 092d6b5e..7cb63f2c 100644
--- a/src/components/Technologies/Technologies.js
+++ b/src/components/Technologies/Technologies.js
@@ -1,15 +1,26 @@
-import React from 'react';
-import { DiFirebase, DiReact, DiZend } from 'react-icons/di';
-import { Section, SectionDivider, SectionText, SectionTitle } from '../../styles/GlobalComponents';
-import { List, ListContainer, ListItem, ListParagraph, ListTitle } from './TechnologiesStyles';
+import React from "react";
+import { DiFirebase, DiReact, DiZend } from "react-icons/di";
+import {
+  Section,
+  SectionDivider,
+  SectionText,
+  SectionTitle,
+} from "../../styles/GlobalComponents";
+import {
+  List,
+  ListContainer,
+  ListItem,
+  ListParagraph,
+  ListTitle,
+} from "./TechnologiesStyles";
 
-const Technologies = () =>  (
+const Technologies = () => (
   <Section id="tech">
     <SectionDivider divider />
     <SectionTitle>Technologies</SectionTitle>
     <SectionText>
-      I've worked with a range a technologies in the web development world.
-      From Back-end To Design
+      I've worked with a range a technologies in the web development world. From
+      Design Tools Like Figma, Zeplin, E-commerce like Shopify or Squarespace. Frontend custom code solutions with HTML, CSS, and Javascript
     </SectionText>
     <List>
       <ListItem>
@@ -20,6 +31,7 @@ const Technologies = () =>  (
           <ListTitle>Front-End</ListTitle>
           <ListParagraph>
             Experiece with <br />
+            HTML CSS
             React.js
           </ListParagraph>
         </ListContainer>
@@ -32,7 +44,7 @@ const Technologies = () =>  (
           <ListTitle>Back-End</ListTitle>
           <ListParagraph>
             Experience with <br />
-            Node and Databases
+            Node and SQL Databases
           </ListParagraph>
         </ListContainer>
       </ListItem>
@@ -44,7 +56,7 @@ const Technologies = () =>  (
           <ListTitle>UI/UX</ListTitle>
           <ListParagraph>
             Experience with <br />
-            tools like Figma
+            tools like Figma & Framer
           </ListParagraph>
         </ListContainer>
       </ListItem>
diff --git a/src/components/TimeLine/TimeLine.js b/src/components/TimeLine/TimeLine.js
index 5a3b0758..b3406b90 100644
--- a/src/components/TimeLine/TimeLine.js
+++ b/src/components/TimeLine/TimeLine.js
@@ -1,8 +1,23 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from "react";
 
-import { CarouselButton, CarouselButtonDot, CarouselButtons, CarouselContainer, CarouselItem, CarouselItemImg, CarouselItemText, CarouselItemTitle, CarouselMobileScrollNode } from './TimeLineStyles';
-import { Section, SectionDivider, SectionText, SectionTitle } from '../../styles/GlobalComponents';
-import { TimeLineData } from '../../constants/constants';
+import {
+  CarouselButton,
+  CarouselButtonDot,
+  CarouselButtons,
+  CarouselContainer,
+  CarouselItem,
+  CarouselItemImg,
+  CarouselItemText,
+  CarouselItemTitle,
+  CarouselMobileScrollNode,
+} from "./TimeLineStyles";
+import {
+  Section,
+  SectionDivider,
+  SectionText,
+  SectionTitle,
+} from "../../styles/GlobalComponents";
+import { TimeLineData } from "../../constants/constants";
 
 const TOTAL_CAROUSEL_COUNT = TimeLineData.length;
 
@@ -11,54 +26,63 @@ const Timeline = () => {
   const carouselRef = useRef();
 
   const scroll = (node, left) => {
-    return node.scrollTo({ left, behavior: 'smooth' });
-  }
+    return node.scrollTo({ left, behavior: "smooth" });
+  };
 
   const handleClick = (e, i) => {
     e.preventDefault();
 
     if (carouselRef.current) {
-      const scrollLeft = Math.floor(carouselRef.current.scrollWidth * 0.7 * (i / TimeLineData.length));
-      
+      const scrollLeft = Math.floor(
+        carouselRef.current.scrollWidth * 0.7 * (i / TimeLineData.length)
+      );
+
       scroll(carouselRef.current, scrollLeft);
     }
-  }
+  };
 
   const handleScroll = () => {
     if (carouselRef.current) {
-      const index = Math.round((carouselRef.current.scrollLeft / (carouselRef.current.scrollWidth * 0.7)) * TimeLineData.length);
+      const index = Math.round(
+        (carouselRef.current.scrollLeft /
+          (carouselRef.current.scrollWidth * 0.7)) *
+          TimeLineData.length
+      );
 
       setActiveItem(index);
     }
-  }
+  };
 
   // snap back to beginning of scroll when window is resized
   // avoids a bug where content is covered up if coming from smaller screen
   useEffect(() => {
     const handleResize = () => {
       scroll(carouselRef.current, 0);
-    }
+    };
 
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
   }, []);
 
   return (
     <Section id="about">
       <SectionTitle>About Me</SectionTitle>
       <SectionText>
-      The purpose of JavaScript Mastery is to help aspiring and established developers to take their development skills to the next level and build awesome apps.
+        The purpose of HolderDesigns is to bring valuable design and development solutions
+        to assist with modern business problems.
       </SectionText>
       <CarouselContainer ref={carouselRef} onScroll={handleScroll}>
         <>
           {TimeLineData.map((item, index) => (
             <CarouselMobileScrollNode
               key={index}
-              final={index === TOTAL_CAROUSEL_COUNT - 1}>
+              final={index === TOTAL_CAROUSEL_COUNT - 1}
+            >
               <CarouselItem
                 index={index}
                 id={`carousel__item-${index}`}
                 active={activeItem}
-                onClick={(e) => handleClick(e, index)}>
+                onClick={(e) => handleClick(e, index)}
+              >
                 <CarouselItemTitle>
                   {`${item.year}`}
                   <CarouselItemImg
@@ -66,7 +90,8 @@ const Timeline = () => {
                     height="6"
                     viewBox="0 0 208 6"
                     fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
                     <path
                       fill-rule="evenodd"
                       clip-rule="evenodd"
@@ -81,7 +106,8 @@ const Timeline = () => {
                         y1="0.5"
                         x2="208"
                         y2="0.500295"
-                        gradientUnits="userSpaceOnUse">
+                        gradientUnits="userSpaceOnUse"
+                      >
                         <stop stop-color="white" />
                         <stop
                           offset="0.79478"
@@ -106,7 +132,8 @@ const Timeline = () => {
               index={index}
               active={activeItem}
               onClick={(e) => handleClick(e, index)}
-              type="button">
+              type="button"
+            >
               <CarouselButtonDot active={activeItem} />
             </CarouselButton>
           );
diff --git a/src/constants/constants.js b/src/constants/constants.js
index abb5c881..b0010adb 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -1,46 +1,59 @@
 export const projects = [
   {
-    title: 'MERN Memories',
-    description: "Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called Memories and it is a simple social media app that allows users to post interesting events that happened in their lives.",
-      image: '/images/1.png',
-      tags: ['Mongo', 'Express', 'React', 'Node'],
-    source: 'https://google.com',
-    visit: 'https://google.com',
+    title: "MERN Memories",
+    description:
+      "Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called Memories and it is a simple social media app that allows users to post interesting events that happened in their lives.",
+    image: "/images/1.png",
+    tags: ["Mongo", "Express", "React", "Node"],
+    source: "https://google.com",
+    visit: "https://google.com",
     id: 0,
   },
   {
-    title: 'E-Commerce',
-    description:"While building it you're going to learn many advanced React & JavaScript topics, as well as how to use Stripe for card transactions. On top of that, at the end of the video, you will have this unique and complex webshop app that you will be able to add to your portfolio. And trust me, e-commerce applications are impressive.",
-    image: '/images/2.png',
-    tags: ['React', 'JavaScript'],
-    source: 'https://google.com',
-    visit: 'https://google.com',
+    title: "E-Commerce",
+    description:
+      "While building it you're going to learn many advanced React & JavaScript topics, as well as how to use Stripe for card transactions. On top of that, at the end of the video, you will have this unique and complex webshop app that you will be able to add to your portfolio. And trust me, e-commerce applications are impressive.",
+    image: "/images/2.png",
+    tags: ["React", "JavaScript"],
+    source: "https://google.com",
+    visit: "https://google.com",
     id: 1,
   },
   {
-    title: 'WebRTC App',
-    description: "This is a code repository for the corresponding YouTube video. In this tutorial, we're going to build and deploy a React Video Chat Application using WebRTC.",
-      image: '/images/3.jpg',
-      tags: ['React', 'WebRTC'],
-    source: 'https://google.com',
-    visit: 'https://google.com',
+    title: "WebRTC App",
+    description:
+      "This is a code repository for the corresponding YouTube video. In this tutorial, we're going to build and deploy a React Video Chat Application using WebRTC.",
+    image: "/images/3.jpg",
+    tags: ["React", "WebRTC"],
+    source: "https://google.com",
+    visit: "https://google.com",
     id: 2,
   },
   {
-    title: 'Unichat',
-    description: "This is a code repository for the corresponding video tutorial. In this video, we will create a full Realtime Chat Application",
-    image: '/images/4.jpg',
-    tags: ['React', 'ChatEngine', 'Firebase'],
-    source: 'https://google.com',
-    visit: 'https://google.com',
+    title: "Unichat",
+    description:
+      "This is a code repository for the corresponding video tutorial. In this video, we will create a full Realtime Chat Application",
+    image: "/images/4.jpg",
+    tags: ["React", "ChatEngine", "Firebase"],
+    source: "https://google.com",
+    visit: "https://google.com",
     id: 3,
   },
-];
+ {
+    title:" Disney Clone",
+    description:"This Code repository is for the clone series tutorial. In this video, we create a full Realtime Disney Plus clone ",
+    image:"/images/D.jpg",
+    tags:["Figma", "Design","Prototype"],
+    source:"https://disneyplus-clone-f8077.web.app/ ",
+    visit:" https://disneyplus-clone-f8077.web.app/",
+    id:4,
+  } 
+]; 
 
 export const TimeLineData = [
-  { year: 2017, text: 'Started my journey', },
-  { year: 2018, text: 'Worked as a freelance developer', },
-  { year: 2019, text: 'Founded JavaScript Mastery', },
-  { year: 2020, text: 'Shared my projects with the world', },
-  { year: 2021, text: 'Started my own platform', },
-];
\ No newline at end of file
+  { year: 2017, text: "Started my journey" },
+  { year: 2018, text: "Working as a Software Tester" },
+  { year: 2019, text: "Started Learning Frontend Development" },
+  { year: 2020, text: "Started HolderDesigns.dev" },
+  { year: 2021, text: "Working as a freelance developer" },
+];
diff --git a/system.ad b/system.ad
new file mode 100644
index 00000000..e69de29b