diff --git a/sports-matcher/client/src/pages/Dashboard.js b/sports-matcher/client/src/pages/Dashboard.js
index c0af309..15338e6 100644
--- a/sports-matcher/client/src/pages/Dashboard.js
+++ b/sports-matcher/client/src/pages/Dashboard.js
@@ -1,11 +1,35 @@
 import React from "react";
-// import { apiClient } from "../utils/httpClients";
+import { Button, InputGroup, FormControl } from "react-bootstrap";
+import "../styles/Dashboard.css";
+import { apiClient } from "../utils/httpClients";
 
 export default class Dashboard extends React.Component{
     constructor(props) {
         super(props);
+        this.state = {
+            displayedMatches: [],
+        };
+    }
+    async getFirstName(){
+        let user = await apiClient.get("/user");
+        return user.firstName;
     }
     render() {
-        return(<h1>Dashboard</h1>);
+        return(
+            <React.Fragment>
+                <h1>Welcome {this.getFirstName()}</h1>
+                <InputGroup className="w-50">
+                    <FormControl
+                        placeholder="Search for Matches"
+                        aria-label="Search Bar"
+                        aria-describedby="basic-addon2"
+                    />
+                    <Button variant="outline-secondary" id="button-addon2">
+                Search
+                    </Button>
+                </InputGroup>
+            </React.Fragment>
+            
+        );
     }
 }
\ No newline at end of file
diff --git a/sports-matcher/client/src/styles/Dashboard.css b/sports-matcher/client/src/styles/Dashboard.css
new file mode 100644
index 0000000..f9ee5e2
--- /dev/null
+++ b/sports-matcher/client/src/styles/Dashboard.css
@@ -0,0 +1,5 @@
+.w-50{
+    margin-top: 5%;
+    margin-left: 25%;
+    margin-right: 25%;
+}
\ No newline at end of file