diff --git a/.github/workflows/homepage_update.yml b/.github/workflows/homepage_update.yml
index 737ad34..fd565da 100644
--- a/.github/workflows/homepage_update.yml
+++ b/.github/workflows/homepage_update.yml
@@ -5,7 +5,29 @@ on:
       - master
 
 jobs:
+  deploy-website-source-files:
+    runs-on: ubuntu-latest
+    name: web source files to s3
+    defaults:
+      run:
+        working-directory: ./static
+    steps:
+      - name: checkout-current-branch
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      
+      - run: npm install
+
+      - run: npm run test
+
+      - run: npm run build
+
+
   publish-commit-artifact:
+    needs: deploy-website-source-files
     runs-on: ubuntu-latest
     name: favicon to s3 bucket
     env: 
@@ -29,23 +51,3 @@ jobs:
         run: ${{env.ORCHESTRATION_SCRIPT}}
 
 
-  deploy-website-source-files:
-    runs-on: ubuntu-latest
-    name: web source files to s3
-    defaults:
-      run:
-        working-directory: ./static
-    steps:
-      - name: checkout-current-branch
-        uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      
-      - run: npm install
-
-      - run: npm run test
-
-      - run: npm run build
-
diff --git a/static/css/homepageSection.css b/static/css/homepageSection.css
index 9753c4d..7f17e7d 100644
--- a/static/css/homepageSection.css
+++ b/static/css/homepageSection.css
@@ -15,7 +15,9 @@ a:active, a:hover {
     color: white;
 }
 
-
+code{
+    background-color: #8e8786;
+}
 ul{
     margin-right: 10px;
 }
diff --git a/static/img/aboutPhoto.jpg b/static/img/aboutPhoto.jpg
new file mode 100644
index 0000000..686a4be
Binary files /dev/null and b/static/img/aboutPhoto.jpg differ
diff --git a/static/js/About.jsx b/static/js/About.jsx
new file mode 100644
index 0000000..5f08c2f
--- /dev/null
+++ b/static/js/About.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import '../css/homepageSection.css';
+
+
+/**Details about the website
+ * 
+ * @returns react jsx 
+ */
+export function About(){
+    return(
+        <div className='homepage-content'>
+            <div>
+                <ul>
+                    <h3>What do I need to know about this website?</h3>
+                    <li>
+                        <a href='https://github.com/rrigato/homepage'>source code </a>
+                    </li>
+                    <li>I strive to be embarrassed by the quality of the architecture of any application I have built that is more than a year old. </li>
+                    <li>Strive to constantly be improving your craft.</li>
+                    <li>How do you practice your skills in the same way a musician practices cords?</li>
+
+                    <li>This webiste went from a Java EE2 web app hosted in google app engine 
+                        all the way to serverless web app deployed to AWS</li>
+                    <li>Run a <code>git log --before="2018-01-01"</code> on the source code for a stroll down memory lane!</li>
+                    
+                    <li>The world's largest tuned mass damper is at the 
+                        <a href='https://en.wikipedia.org/wiki/Tuned_mass_damper'>Taipei 101</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/static/js/HomePageToggle.jsx b/static/js/HomePageToggle.jsx
index b47005a..ce94a83 100644
--- a/static/js/HomePageToggle.jsx
+++ b/static/js/HomePageToggle.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import '../css/main.css';
 import { Projects } from './Projects.jsx';
+import { About } from './About.jsx';
 
 
 /**Toggle button for different sections of homepage
@@ -75,13 +76,11 @@ export function HomePageToggle(){
                     selectedSection === 0 ? <Projects/> :
                     <div hidden={true}></div>
                 }
-                <div 
-                    id='toggle-1' 
-                    
-                    hidden= {
-                        selectedSection !== 1
-                    }>
-                    About me
+                <div>
+                {
+                    selectedSection === 1 ? <About/> :
+                    <div hidden={true}></div>
+                }
                 </div>
                 <div 
                     id='toggle-2' 
diff --git a/static/package-lock.json b/static/package-lock.json
index d61c31a..7e00e08 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -12,6 +12,7 @@
                 "@babel/preset-env": "^7.23.2",
                 "@babel/preset-react": "^7.22.15",
                 "@testing-library/react": "^14.0.0",
+                "@testing-library/user-event": "^14.5.1",
                 "babel-loader": "^9.1.3",
                 "css-loader": "^6.8.1",
                 "html-loader": "^4.2.0",
@@ -2698,6 +2699,19 @@
                 "react-dom": "^18.0.0"
             }
         },
+        "node_modules/@testing-library/user-event": {
+            "version": "14.5.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
+            "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==",
+            "dev": true,
+            "engines": {
+                "node": ">=12",
+                "npm": ">=6"
+            },
+            "peerDependencies": {
+                "@testing-library/dom": ">=7.21.4"
+            }
+        },
         "node_modules/@tootallnate/once": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
diff --git a/static/package.json b/static/package.json
index 760eed8..569f78a 100644
--- a/static/package.json
+++ b/static/package.json
@@ -9,6 +9,7 @@
         "@babel/preset-env": "^7.23.2",
         "@babel/preset-react": "^7.22.15",
         "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.5.1",
         "babel-loader": "^9.1.3",
         "css-loader": "^6.8.1",
         "html-loader": "^4.2.0",
diff --git a/static/tests/About.test.js b/static/tests/About.test.js
new file mode 100644
index 0000000..c2a48f1
--- /dev/null
+++ b/static/tests/About.test.js
@@ -0,0 +1,20 @@
+import {  render } from '@testing-library/react';
+import { About } from '../js/About.jsx';
+
+
+describe('About displayed on screen', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+      
+    test('About section', async () => {        
+        
+
+        const {getAllByRole} = render(<About/>);
+
+        
+        const numProjectHeaders = getAllByRole(
+            'heading'
+        );
+    });
+});
\ No newline at end of file
diff --git a/static/tests/HomePageToggle.test.js b/static/tests/HomePageToggle.test.js
index edf6ca8..08dbb36 100644
--- a/static/tests/HomePageToggle.test.js
+++ b/static/tests/HomePageToggle.test.js
@@ -1,7 +1,10 @@
 import { render } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { About } from '../js/About.jsx';
 import { HomePageToggle } from '../js/HomePageToggle.jsx';
 import { Projects } from '../js/Projects.jsx';
 
+jest.mock('../js/About.jsx');
 jest.mock('../js/Projects.jsx');
 
 describe('Central Content for site', () => {
@@ -10,8 +13,8 @@ describe('Central Content for site', () => {
     });
       
     test('HomePageToggle default render', async () => {
-        Projects.mockReturnValue(<div>mock-projects</div>);
-
+        Projects.mockReturnValue(<div>mock-projects-component</div>);
+        About.mockReturnValue(<div>mock-about-component</div>);
         
         
         const {findByRole} = render(<HomePageToggle/>);
@@ -29,4 +32,21 @@ describe('Central Content for site', () => {
         expect(Projects).toHaveBeenCalled()
 
     });
+
+    test('About component called when clicked', async () => {
+        const userStep = userEvent.setup();
+        Projects.mockReturnValue(<div>mock-projects-component</div>);
+        About.mockReturnValue(<div>mock-about-component</div>);
+
+        
+        const {findByRole} = render(<HomePageToggle/>);
+
+        
+        const aboutButton = await findByRole(
+            'button', {name: 'About'}
+        );
+        await userStep.click(aboutButton);
+        expect(About).toHaveBeenCalled()
+
+    });
 });
\ No newline at end of file