diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..a3c03c6
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "team58",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}
diff --git a/sports-matcher/package.json b/sports-matcher/package.json
index bad46ea..71556c7 100644
--- a/sports-matcher/package.json
+++ b/sports-matcher/package.json
@@ -3,11 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/sports-matcher/src/App.js b/sports-matcher/src/App.js
index 3784575..f00a5a2 100644
--- a/sports-matcher/src/App.js
+++ b/sports-matcher/src/App.js
@@ -1,23 +1,15 @@
 import logo from './logo.svg';
 import './App.css';
-
+import { Routes, Route, Link } from "react-router-dom";
+import SignIn from './SignIn';
+import SignUp from './SignUp';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Routes>
+        <Route path="sign-in" element={<SignIn />} />
+        <Route path="sign-up" element={<SignUp />} />
+      </Routes>
     </div>
   );
 }
diff --git a/sports-matcher/src/SignIn.js b/sports-matcher/src/SignIn.js
new file mode 100644
index 0000000..e7cd153
--- /dev/null
+++ b/sports-matcher/src/SignIn.js
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { useHistory } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { Link } from '@mui/material';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+
+export default function SignIn() {
+  return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
+            <AccountCircleIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <Box component="form" noValidate sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign In
+            </Button>
+            <Link href="/sign-up" underline="always">
+            {"Don't have an account?"}
+            </Link>
+            </Box>
+            </Box>
+            </Container>
+            )}
\ No newline at end of file
diff --git a/sports-matcher/src/SignUp.js b/sports-matcher/src/SignUp.js
new file mode 100644
index 0000000..c4e86e2
--- /dev/null
+++ b/sports-matcher/src/SignUp.js
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { useHistory } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import AccountBoxIcon from '@mui/icons-material/AccountBox';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { Link } from '@mui/material';
+import { Router, Link as RouterLink } from 'react-router-dom';
+import { Grid } from '@mui/material';
+
+export default function SignUp() {
+  return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: 'info.main' }}>
+            <AccountBoxIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign up
+          </Typography>
+          <Box component="form" noValidate sx={{ mt: 1 }}>
+          <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoComplete="given-name"
+                  name="firstName"
+                  required
+                  fullWidth
+                  id="firstName"
+                  label="First Name"
+                  autoFocus
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  required
+                  fullWidth
+                  id="lastName"
+                  label="Last Name"
+                  name="lastName"
+                  autoComplete="family-name"
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  id="email"
+                  label="Email Address"
+                  name="email"
+                  autoComplete="email"
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  name="password"
+                  label="Password"
+                  type="password"
+                  id="password"
+                  autoComplete="new-password"
+                />
+              </Grid>
+            </Grid>
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign Up
+            </Button>
+            <Link href="/sign-in" underline="always">
+            {'Already have an account?'}
+            </Link>
+            </Box>
+            </Box>
+            </Container>
+            )}
\ No newline at end of file
diff --git a/sports-matcher/src/index.js b/sports-matcher/src/index.js
index ef2edf8..78717fc 100644
--- a/sports-matcher/src/index.js
+++ b/sports-matcher/src/index.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>,
   document.getElementById('root')
 );