diff --git a/package-lock.json b/package-lock.json
index e3394d7..2bf3d97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3638,6 +3638,15 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6710,6 +6719,12 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -10512,6 +10527,12 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.22",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
@@ -14364,6 +14385,11 @@
         "wbuf": "^1.7.3"
       }
     },
+    "spectre.css": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/spectre.css/-/spectre.css-0.5.9.tgz",
+      "integrity": "sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -15722,7 +15748,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -16321,7 +16351,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/package.json b/package.json
index 133a40f..789e1f1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react-dom": "^17.0.2",
     "react-google-maps": "^9.4.5",
     "react-scripts": "4.0.3",
+    "spectre.css": "^0.5.9",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 2c78e15..c189ff4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,18 @@
 import { Component } from "react";
-import ListingsPage from "./listings-page/ListingsPage";
+/* import Homepage from './homePage/Homepage' */
+import AgentPage from './agent-page/AgentPage'
 
-import Homepage from './homePage/Homepage';
+
+// import Homepage from './homePage/Homepage';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-          <Homepage></Homepage>
+        {/* <Homepage/> */}
+        <AgentPage/>
+        {/* <Homepage/> */}
+        
       </div>
     );
   }
diff --git a/src/agent-page/AgentPage.js b/src/agent-page/AgentPage.js
new file mode 100644
index 0000000..0d90622
--- /dev/null
+++ b/src/agent-page/AgentPage.js
@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import Agents from './Agents'
+import './agent-page.css';
+import Carousel from 'react-bootstrap/Carousel'
+import Agent1 from "../images/Agent1.jpg";
+import Agent2 from "../images/Agent2.jpg";
+import Agent3 from "../images/Agent3.jpg";
+import Agent4 from "../images/Agent4.jpg";
+import Agent5 from "../images/Agent5.jpg";
+import Agent6 from "../images/Agent6.jpg";
+ class AgentPage extends Component {
+   state={
+     agents: [
+     
+      {title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1},
+       {title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2},
+       {title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3},
+       {title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4},
+       {title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5},
+       {title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6},
+
+  
+     ]
+    }  
+    render(){
+      return(
+          <div className="container">
+              <div className="center  blue-text text-darken-4">
+                  <h1>Meet the team</h1>
+              </div>
+            
+              <Agents agents={this.state.agents} />
+          </div>
+      )
+  }
+  displayAgents= (agent) => {
+    console.log(agent);
+  }
+
+}
+export default AgentPage;
diff --git a/src/agent-page/Agents.js b/src/agent-page/Agents.js
new file mode 100644
index 0000000..ef8b34e
--- /dev/null
+++ b/src/agent-page/Agents.js
@@ -0,0 +1,40 @@
+import React from "react";
+import AgentPage from "./AgentPage";
+/* import {Link} from 'react-router-dom' */
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button";
+
+const Agents = ({ agents }) => {
+  const agentlist = agents.map((agent) => {
+    return (
+      <div className="agent" key={agent.id}>
+        {}
+            <Card style={{ width: "18rem" }}>
+              <Card.Img variant="top" src={agent.src} />
+              <Card.Body>
+                <Card.Title>{agent.title}</Card.Title>
+                <Card.Text>{agent.name}</Card.Text>
+                <Card.Text>
+                  {agent.word}
+                </Card.Text>
+                <Button variant="primary">VIEW</Button>
+              </Card.Body>
+            </Card>
+      </div>
+    );
+  });
+  console.log(agentlist);
+  return (
+    <div className="agent-list">
+      <div className="row">
+        <div className="col m4">{agentlist[0]}</div>
+        <div className="col m4">{agentlist[1]}</div>
+        <div className="col m4">{agentlist[2]}</div>
+        <div className="col m4">{agentlist[3]}</div>
+        <div className="col m4">{agentlist[4]}</div>
+        <div className="col m4">{agentlist[5]}</div>
+      </div>
+    </div>
+  );
+};
+export default Agents;
diff --git a/src/agent-page/agent-page.css b/src/agent-page/agent-page.css
index e69de29..6e07d46 100644
--- a/src/agent-page/agent-page.css
+++ b/src/agent-page/agent-page.css
@@ -0,0 +1,19 @@
+.agentPage {
+    background-image: url('../images/Agent1.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: scroll;
+  }
+  
+  @media screen and (min-width: 992px) {
+    .miniHero {
+      background-position-y: -150px;
+    }
+  }
+  .center{
+    height: 25vh; /* Magic here */
+    background-color: yellow;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
\ No newline at end of file
diff --git a/src/agent-page/agent-page.js b/src/agent-page/agent-page.js
deleted file mode 100644
index a53bbf7..0000000
--- a/src/agent-page/agent-page.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { Component } from "react";
-
-class AgentPage extends Component {
-  render() {
-    return <div>AgentPage</div>;
-  }
-}
-
-export default AgentPage;
diff --git a/src/agent-page/workspace.code-workspace b/src/agent-page/workspace.code-workspace
new file mode 100644
index 0000000..ec89ccf
--- /dev/null
+++ b/src/agent-page/workspace.code-workspace
@@ -0,0 +1,7 @@
+{
+    "folders": [
+        {
+            "path": "../../.."
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js
index f95a614..585708c 100644
--- a/src/homePage/Homepage.js
+++ b/src/homePage/Homepage.js
@@ -1,4 +1,4 @@
-import { Component } from "react";
+/* import { Component } from "react";
 import './Homepage.css';
 import house1 from '../images/house1.jpg';
 import house2 from '../images/house2.jpg';
@@ -105,3 +105,4 @@ class Homepage extends Component {
 }
 
 export default Homepage;
+ */
\ No newline at end of file
diff --git a/src/images/Agent1.jpg b/src/images/Agent1.jpg
new file mode 100644
index 0000000..716c1dd
Binary files /dev/null and b/src/images/Agent1.jpg differ
diff --git a/src/images/Agent2.jpg b/src/images/Agent2.jpg
new file mode 100644
index 0000000..03735d5
Binary files /dev/null and b/src/images/Agent2.jpg differ
diff --git a/src/images/Agent3.jpg b/src/images/Agent3.jpg
new file mode 100644
index 0000000..205480b
Binary files /dev/null and b/src/images/Agent3.jpg differ
diff --git a/src/images/Agent4.jpg b/src/images/Agent4.jpg
new file mode 100644
index 0000000..a60aa5f
Binary files /dev/null and b/src/images/Agent4.jpg differ
diff --git a/src/images/Agent5.jpg b/src/images/Agent5.jpg
new file mode 100644
index 0000000..4580d5f
Binary files /dev/null and b/src/images/Agent5.jpg differ
diff --git a/src/images/Agent6.jpg b/src/images/Agent6.jpg
new file mode 100644
index 0000000..288ae24
Binary files /dev/null and b/src/images/Agent6.jpg differ