diff --git a/package-lock.json b/package-lock.json
index c1be014..e118b4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "firebase": "^9.10.0",
+        "firebaseui": "^6.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
@@ -6805,6 +6806,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/dialog-polyfill": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+      "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "license": "Apache-2.0"
@@ -8143,7 +8149,8 @@
     },
     "node_modules/firebase": {
       "version": "9.10.0",
-      "license": "Apache-2.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.10.0.tgz",
+      "integrity": "sha512-oSuED6BT+gQrOoXPV/xkxBLMk03A9nDXosW0xy4loQtGRJr9gW6JXgEOr0nmXFMTGzP87CpoC8Kd6y7XKSAeqQ==",
       "dependencies": {
         "@firebase/analytics": "0.8.0",
         "@firebase/analytics-compat": "0.1.13",
@@ -8173,6 +8180,18 @@
         "@firebase/util": "1.6.3"
       }
     },
+    "node_modules/firebaseui": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.1.tgz",
+      "integrity": "sha512-SMNCFt/xns3mnvd0hImEDu7di5fqRU3MVyIaXpVEfg6v0bH6f3m+YybivU7KElRUT/47DHMn++D8MrZYYnoN5g==",
+      "dependencies": {
+        "dialog-polyfill": "^0.4.7",
+        "material-design-lite": "^1.2.0"
+      },
+      "peerDependencies": {
+        "firebase": "^9.1.3"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "license": "MIT",
@@ -11695,6 +11714,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/material-design-lite": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+      "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "license": "CC0-1.0"
@@ -20735,6 +20762,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "dialog-polyfill": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+      "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
+    },
     "didyoumean": {
       "version": "1.2.2"
     },
@@ -21584,6 +21616,8 @@
     },
     "firebase": {
       "version": "9.10.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.10.0.tgz",
+      "integrity": "sha512-oSuED6BT+gQrOoXPV/xkxBLMk03A9nDXosW0xy4loQtGRJr9gW6JXgEOr0nmXFMTGzP87CpoC8Kd6y7XKSAeqQ==",
       "requires": {
         "@firebase/analytics": "0.8.0",
         "@firebase/analytics-compat": "0.1.13",
@@ -21613,6 +21647,15 @@
         "@firebase/util": "1.6.3"
       }
     },
+    "firebaseui": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.0.1.tgz",
+      "integrity": "sha512-SMNCFt/xns3mnvd0hImEDu7di5fqRU3MVyIaXpVEfg6v0bH6f3m+YybivU7KElRUT/47DHMn++D8MrZYYnoN5g==",
+      "requires": {
+        "dialog-polyfill": "^0.4.7",
+        "material-design-lite": "^1.2.0"
+      }
+    },
     "flat-cache": {
       "version": "3.0.4",
       "requires": {
@@ -23738,6 +23781,11 @@
         "tmpl": "1.0.5"
       }
     },
+    "material-design-lite": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+      "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg=="
+    },
     "mdn-data": {
       "version": "2.0.4"
     },
diff --git a/package.json b/package.json
index 76e9e59..8ed91ad 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,12 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "firebase": "^9.10.0",
+    "firebaseui": "^6.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4",
-    "firebase": "^9.10.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.css b/src/App.css
index 74b5e05..479889f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,7 +3,7 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 20vmin;
   pointer-events: none;
 }
 
@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/App.js b/src/App.js
index 3784575..c5808ca 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,122 @@
 import logo from './logo.svg';
 import './App.css';
+import { initializeApp } from 'firebase/app';
+import { getFirestore, collection, getDocs, connectFirestoreEmulator } from 'firebase/firestore';
+import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInWithRedirect, getRedirectResult, connectAuthEmulator } from "firebase/auth";
+import { getAnalytics } from "firebase/analytics";
+import { useState } from 'react';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyCQ3FcfwlAckhZNEVz3RmGGGuscW1jWDHY",
+  authDomain: "pico22.mgrove.uk",
+  databaseURL: "https://picohack-2022-default-rtdb.europe-west1.firebasedatabase.app",
+  projectId: "picohack-2022",
+  storageBucket: "picohack-2022.appspot.com",
+  messagingSenderId: "200913112341",
+  appId: "1:200913112341:web:4f0edd8dfa37df258bad1c",
+  measurementId: "G-2BENT50640"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+const db = getFirestore(app);
+const auth = getAuth(app);
+
+
+// emulators
+connectFirestoreEmulator(db, 'localhost', 8080);
+connectAuthEmulator(auth, "http://localhost:9099");
+
+
+
+// onAuthStateChanged(auth, (user) => {
+//   if (user) {
+//     // User is signed in, see docs for a list of available properties
+//     // https://firebase.google.com/docs/reference/js/firebase.User
+//     const uid = user.uid;
+//     // ...
+//   } else {
+//     // User is signed out
+//     // ...
+// }});
+
+
+
+
 
 function App() {
+  const signIn = (event) => {
+    event.preventDefault();
+    signInWithEmailAndPassword(auth, email, password)
+      .then((userCredential) => {
+        // Signed in 
+        const user = userCredential.user;
+        alert("logged in!");
+        // ...
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+      });
+  };
+
+  const signUp = (event) => {
+    event.preventDefault();
+    createUserWithEmailAndPassword(auth, email, password)
+      .then((userCredential) => {
+        // Signed in 
+        const user = userCredential.user;
+        alert("logged in!");
+        // ...
+      })
+      .catch((error) => {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        console.log(error);
+        // ..
+      });
+  };
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   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>
+        <h1>Tiny Town Community First Response</h1>
       </header>
+      <main>
+        <form onSubmit={signUp}>
+          <input
+            type="email"
+            placeholder="email"
+            onChange={e => setEmail(e.target.value)}
+            value={email}
+          />
+          <input
+            type="password"
+            placeholder="password"
+            onChange={e => setPassword(e.target.value)}
+            value={password}
+          />
+          <input type="submit" value="Sign up"/>
+        </form>
+        <form onSubmit={signIn}>
+          <input
+            type="email"
+            placeholder="email"
+            onChange={e => setEmail(e.target.value)}
+            value={email}
+          />
+          <input
+            type="password"
+            placeholder="password"
+            onChange={e => setPassword(e.target.value)}
+            value={password}
+          />
+          <input type="submit" value="Sign in"/>
+        </form>
+      </main>
     </div>
   );
 }