diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
new file mode 100644
index 0000000..d3fc3c3
--- /dev/null
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,17 @@
+asset-manifest.json,1624372252289,d3dfe56ca78a0c83df0479f6e8f9347ed8471d0bd763030a4967b60a4fa59a0a
+index.html,1624372252289,5e56a9c4547c520d17ec7365a09387cb99b0c353d10793e1d92a36645d771870
+manifest.json,1624372229091,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+robots.txt,1624372229092,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+static/css/main.b797bbbb.chunk.css,1624372252290,99007f72ba801bee110db053bc37e48ca5a18417acad4cdd76fa77b274789b8c
+static/css/main.b797bbbb.chunk.css.map,1624372252302,f6dfcaf3937079fa838d38a55d07c9ade03133a9e4b602996bfa7acdb5c8c6ee
+static/js/2.b7c222b7.chunk.js.LICENSE.txt,1624372252302,aaa6cf6dd09ddb1bab1116ba7bd3d38f2f513c47279d64972140073cbebed953
+static/js/3.b5976bd6.chunk.js,1624372252300,36cceddbdb2bc0dc43932005824fc214ec352706753bd9da4e73f28e7033c6e1
+static/js/3.b5976bd6.chunk.js.map,1624372252302,e67fe1f07a087227d70399adb531451051e705fd2b6e68b4115e3d13c930bf75
+static/js/main.0a6deb9a.chunk.js,1624372252291,296a3292c01c89113fd80bd953f2b14d394c06636ecc02020056b6eea7df495b
+static/js/main.0a6deb9a.chunk.js.map,1624372252301,ab7e5781711076d858060d0813db85fc77d6ac30c561142dbf1915c53518c8df
+static/js/runtime-main.1240f9b4.js,1624372252300,b5b067a997ec472cd8c229f06330f24f9d505a9640d48525fa8fc8255dddc608
+static/js/runtime-main.1240f9b4.js.map,1624372252301,f16f8d575e1a15a08fe74faca7e8f053c4927211c92cb565506cdf03b455d1d2
+static/css/2.61b4cb56.chunk.css,1624372252301,8eea7a23cc126055d7515599f6c6b7c316953269819b233efe35c6463e0890b9
+static/css/2.61b4cb56.chunk.css.map,1624372252302,0ef9ae9d3f4d0586107b4b54ce94cbd1ee058877e2d539c20cd63401beb6ea60
+static/js/2.b7c222b7.chunk.js,1624372252303,2c6c0c4cc934a4e933b252801301cd751b86179928331ec36a8e508986804138
+static/js/2.b7c222b7.chunk.js.map,1624372252302,cf6529e06c9cfaee2ed019f3e1c32f65b00ed12868355b282616ba26704931c9
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..85863be
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "todo-app-2d091"
+  }
+}
diff --git a/.gitignore b/.gitignore
index 864a05c..6737591 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,8 @@
 package-lock.json
 yarn.lock
 
+.idea
+
 # For mac people
 .DS.Store
 .env*
diff --git a/README.md b/README.md
index 280c785..e8a2dd9 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,21 @@
+# Simple todo app
+
+Can add / toggle / delete todos. Filter by status.
+
+Uses Context API for state management
+
+Uses firebase auth / firestore for persistence
+
+Deployed at: 
+### https://todo-app-2d091.web.app
+
+I will try to add a couple more functions on Friday if time allows :) Sorry, busy week.
+
+P.S. Looks bad!
+
+=========================
+
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 0000000..340ed5b
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/package.json b/package.json
index f267c1a..bf5b8ef 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^5.0.1",
+    "firebase": "^8.6.8",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index a11777c..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
index aa069f2..c69d175 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,24 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+<!--    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />-->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/src/App.css b/src/App.css
index 74b5e05..019cf09 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,154 @@
-.App {
-  text-align: center;
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+
+* {
+  margin: 0px;
+  padding: 0px;
+  /*box-sizing: border-box;*/
+  color: black;
+  font-family: 'Indie Flower', cursive;
+  font-size: large;
+}
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /*margin-top: 2rem;*/
+}
+body {
+  color: black;
+  font-family: 'Indie Flower', cursive;
+  min-height: 100vh;
+}
+header {
+  font-size: 2rem;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+header,
+.add-todo-form {
+  min-height: 20vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+.add-todo-form input,
+.add-todo-form button {
+  padding: 0.5rem;
+  font-size: 2rem;
+  border-width: 1px;
+  background: white;
+  box-shadow: 3px 0px 5px 1px;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.add-todo-form button {
+  color: #888888;
+  background: #f7fffe;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.add-todo-form button:hover {
+  background: #adc8fa;
+  color: white;
+}
+.todo-container {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  align-items: center;
+}
+
+.todo-list {
+  min-width: 30%;
+  list-style: none;
+}
+
+.todo {
+  margin: 0.5rem;
+  background: white;
+  font-size: 1.5rem;
+  color: black;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  transition: all 1s ease;
+}
+.filter-todo {
+  padding: 1rem;
+}
+.todo li {
+  flex: 1;
+}
+
+.trash-btn,
+.complete-btn {
+  background: rgb(203, 203, 203);
   color: white;
+  border: 1px black;
+  padding: 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  box-shadow: 3px 0 5px 1px;
+
 }
 
-.App-link {
-  color: #61dafb;
+.complete-btn:hover {
+  background: rgba(98, 191, 43, 0.32);
+}
+.trash-btn:hover {
+  background: rgba(238, 101, 78, 0.32);
 }
+.todo-item {
+  padding: 1rem 0.5rem;
+  border: 1px black;
+}
+
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.fall {
+  transform: translateY(10rem) rotateZ(20deg);
+  opacity: 0;
+}
+
+.completed {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/*CUSTOM SELECTOR */
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  outline: 0;
+  box-shadow: none;
+  border: 0 !important;
+  background-image: none;
+}
+
+/* Custom Select */
+.select {
+  margin: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+select {
+  color: #000000;
+  cursor: pointer;
+  width: 12rem;
+  border-style: inherit;
+  border-width: 1px;
+  background-color: white;
+  box-shadow: 3px 0 5px 1px;
+
+}
+/* Arrow */
+.select::after {
+  border: 1px black;
+  content: "\25BC";
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  background: #fafafa;
+  cursor: pointer;
+  pointer-events: none;
 }
diff --git a/src/App.js b/src/App.js
index 3784575..fcca004 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,28 @@
-import logo from './logo.svg';
-import './App.css';
+import './App.css'
+import Dashboard from "./components/Dashboard";
+import Login from "./components/Login";
+
+
+import Signup from "./components/Signup";
+import {AuthProvider} from "./contexts/AuthContext";
+import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
+import PrivateRout from "./components/PrivateRout";
 
 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>
-    </div>
-  );
+	
+	return (
+		<>
+			<Router>
+				<AuthProvider>
+					<Switch>
+						<PrivateRout exact path="/" component={Dashboard}/>
+						<Route path="/signup" component={Signup}/>
+						<Route path="/login" component={Login}/>
+					</Switch>
+				</AuthProvider>
+			</Router>
+		</>
+	);
 }
 
 export default App;
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
new file mode 100644
index 0000000..84bd482
--- /dev/null
+++ b/src/components/Dashboard.js
@@ -0,0 +1,120 @@
+import '../App.css';
+import React, {useEffect, useState} from 'react';
+import Todos from "./Todos";
+import Form from "./Form";
+import { useAuth } from "../contexts/AuthContext";
+import app from "../firebase";
+
+import {Container, Card, Navbar, NavItem, Button, Alert} from "react-bootstrap";
+import { useHistory } from "react-router-dom";
+
+
+function Dashboard() {
+	
+	const [inputText, setInputText] = useState("")
+	const [todos, setTodos] = useState([])
+	const [filteredTodos, setFilteredTodos] = useState([])
+	const [status, setStatus] = useState("all")
+	const [error, setError] = useState('')
+	const history = useHistory()
+	const db = app.firestore()
+	
+	const { currentUser, logout } = useAuth()
+	
+	const fetchdata = async () => {
+		const data = await db.collection("todos").where("uid", "==", currentUser.uid).get()
+		const todos = data.docs.map(doc => {
+			return {...doc.data(), id: doc.id}
+		})
+		setTodos(todos)
+	}
+	
+	
+	const addTodo = async (text) => {
+		await db.collection("todos").add({
+			text: text,
+			uid: currentUser.uid,
+			done: false
+		})
+		fetchdata()
+	} 
+	
+	const deleteTodo = async (todoid) => {
+		await db.collection("todos").doc(todoid).delete().then(() => {
+			console.log("deleted!")
+		})
+		fetchdata()
+	}
+	
+	const toggleTodo = async (todoid, done) => {
+		await db.collection("todos").doc(todoid).update({
+			done: !done
+		})
+		fetchdata()
+	}
+	
+	
+	// filter by done / undone / all and save to a separate state
+	const filterTodos = () => {
+		switch (status) {
+			case 'done':
+				setFilteredTodos(todos.filter(el => el.done === true))
+				break
+			case 'undone':
+				setFilteredTodos(todos.filter(el => el.done === false))
+				break
+			default:
+				setFilteredTodos(todos)
+				break
+		}
+	}
+	
+	const logoutHandle = async () => {
+		try {
+			await logout()
+			history.push("/")
+		} catch {
+			setError("Couldn't logout")
+		}
+	}
+	
+	// run once on page load
+	useEffect(() => {
+		fetchdata()
+	}, [])
+	
+	
+	// run when todos or status change
+	useEffect(() => {
+		filterTodos()
+	}, [todos, status])
+	return (
+		<div>
+			<Container className="d-flex justify-content-center" style={{minHeight: "100vh"}}>
+				<div className="w-100" style={{maxWidth: "600px"}}>
+					<div className="App">
+						<Navbar>
+							<NavItem>
+								Hello {JSON.stringify(currentUser.email)}
+							</NavItem>
+							<NavItem>
+								<Button variant="link" onClick={logoutHandle}>Log out</Button>
+							</NavItem>
+						</Navbar>
+						{error && <Alert variant="danger">{error}</Alert>} {/* Showing error message*/}
+						<Card>
+							<Card.Body>
+								<Form setInputText={setInputText} addTodo={addTodo} setTodos={setTodos} todos={todos} inputText={inputText}
+											setStatus={setStatus}/>
+								<Todos toggleTodo={toggleTodo} deleteTodo={deleteTodo} todos={todos} filteredTodos={filteredTodos} setTodos={setTodos} status={status}/>
+							</Card.Body>
+						</Card>
+					</div>
+				</div>
+			</Container>
+		</div>
+	
+	);
+}
+
+export default Dashboard;
diff --git a/src/components/Form.js b/src/components/Form.js
new file mode 100644
index 0000000..e82f986
--- /dev/null
+++ b/src/components/Form.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlus} from '@fortawesome/free-solid-svg-icons'
+
+function Form({ setInputText, addTodo, inputText, setStatus }) {
+	
+	return (
+		<div>
+			<form className="add-todo-form">
+				<input value={inputText} type="text" className="todo-input" onChange={(e) => {
+					e.preventDefault()
+					setInputText(e.target.value)
+				}}/>
+				<button className="todo-button" onClick={(e) => {
+					e.preventDefault()
+					addTodo(inputText)
+					setInputText('')
+				}}>
+					<FontAwesomeIcon icon={faPlus}/>
+				</button>
+				<div className="select">
+					<select onChange={e => setStatus(e.target.value)} name="todos" className="filter-todo">
+						<option value="all">All</option>
+						<option value="done">Done</option>
+						<option value="undone">Undone</option>
+					</select>
+				</div>
+			</form>
+		</div>
+	);
+}
+
+export default Form;
diff --git a/src/components/Login.js b/src/components/Login.js
new file mode 100644
index 0000000..85fa7e0
--- /dev/null
+++ b/src/components/Login.js
@@ -0,0 +1,63 @@
+import React, {useRef, useState} from 'react';
+import {useAuth} from "../contexts/AuthContext";
+import {Form, Card, Button, Alert, Container} from "react-bootstrap";
+import { Link, useHistory } from "react-router-dom";
+
+function Login() {
+	
+	const emailRef = useRef()
+	const passwordRef = useRef()
+	const [error, setError] = useState('')
+	const [loading, setLoading] = useState(false)
+	const history = useHistory()
+	
+	const { login } = useAuth()
+	
+	const handleSubmit = async (e) => {
+		e.preventDefault()
+		
+		try {
+			setError('')
+			setLoading(true)
+			await login(emailRef.current.value, passwordRef.current.value)
+			history.push("/")
+		} catch {
+			setError('Failed to sign in')
+		}
+		setLoading(false)
+	}
+	
+	return (
+		<>
+			<Container className="d-flex align-items-center justify-content-center" style={{minHeight: "100vh"}}>
+				<div className="w-100" style={{maxWidth: "400px"}}>
+					<Card>
+						<Card.Body>
+							<h2 className="text-center mb-4">Log in</h2>
+							{error && <Alert variant="danger">{error}</Alert>} {/* Showing error message*/}
+							<Form onSubmit={handleSubmit}>
+								<Form.Group id="email">
+									<Form.Label>Email</Form.Label>
+									<Form.Control type="email" ref={emailRef} required/>
+								</Form.Group>
+								<Form.Group id="password">
+									<Form.Label>Password</Form.Label>
+									<Form.Control type="password" ref={passwordRef} required/>
+								</Form.Group>
+								<Button disabled={loading} className="w-100" type="submit"> {/* Disabled if loading is true */}
+									Log In
+								</Button>
+							</Form>
+						</Card.Body>
+					</Card>
+					<div className="w-100 text-center mt-2">
+						Need an account? <Link to="/signup">Sign up</Link>
+					</div>
+				</div>
+			
+			</Container>
+		</>
+	);
+}
+
+export default Login;
diff --git a/src/components/PrivateRout.js b/src/components/PrivateRout.js
new file mode 100644
index 0000000..7036b9a
--- /dev/null
+++ b/src/components/PrivateRout.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import {Route, Redirect} from 'react-router-dom'
+import {useAuth} from "../contexts/AuthContext";
+
+
+function PrivateRout({component: Component, ...rest}) {
+	const {currentUser} = useAuth()
+	
+	return (
+		<Route
+			{...rest}
+			render={props => {
+				return currentUser ? <Component {...props} /> : <Redirect to="/login" />
+			}}>
+		</Route>
+	
+	);
+}
+
+export default PrivateRout;
diff --git a/src/components/Signup.js b/src/components/Signup.js
new file mode 100644
index 0000000..866851b
--- /dev/null
+++ b/src/components/Signup.js
@@ -0,0 +1,71 @@
+import React, {useRef, useState} from 'react';
+import {useAuth} from "../contexts/AuthContext";
+import {Form, Card, Button, Alert, Container} from "react-bootstrap";
+import { Link, useHistory } from "react-router-dom";
+
+function Signup() {
+	
+	const emailRef = useRef()
+	const passwordRef = useRef()
+	const passwordConfirmRef = useRef()
+	const [error, setError] = useState('')
+	const [loading, setLoading] = useState(false)
+	const history = useHistory()
+	
+	const { signup } = useAuth()
+	
+	const handleSubmit = async (e) => {
+		e.preventDefault()
+		if (passwordRef.current.value !== passwordConfirmRef.current.value) {
+			return setError("Passwords don't match")
+		}
+		
+		try {
+			setError('')
+			setLoading(true)
+			await signup(emailRef.current.value, passwordRef.current.value)
+			history.push("/")
+		} catch {
+			setError('Failed to create an account')
+		}
+		setLoading(false)
+	}
+	
+	return (
+		<>
+			<Container className="d-flex align-items-center justify-content-center" style={{minHeight: "100vh"}}>
+				<div className="w-100" style={{maxWidth: "400px"}}>
+					<Card>
+						<Card.Body>
+							<h2 className="text-center mb-4">Sign Up</h2>
+							{error && <Alert variant="danger">{error}</Alert>} {/* Showing error message*/}
+							<Form onSubmit={handleSubmit}>
+								<Form.Group id="email">
+									<Form.Label>Email</Form.Label>
+									<Form.Control type="email" ref={emailRef} required/>
+								</Form.Group>
+								<Form.Group id="password">
+									<Form.Label>Password</Form.Label>
+									<Form.Control type="password" ref={passwordRef} required/>
+								</Form.Group>
+								<Form.Group id="password-confirm">
+									<Form.Label>Password Confirmation</Form.Label>
+									<Form.Control type="password" ref={passwordConfirmRef} required/>
+								</Form.Group>
+								<Button disabled={loading} className="w-100" type="submit"> {/* Disabled if loading is true */}
+									Sign Up
+								</Button>
+							</Form>
+						</Card.Body>
+					</Card>
+					<div className="w-100 text-center mt-2">
+						Already have an account? <Link to="/login">Log in</Link>
+					</div>
+				</div>
+			
+			</Container>
+		</>
+	);
+}
+
+export default Signup;
diff --git a/src/components/Todo.js b/src/components/Todo.js
new file mode 100644
index 0000000..f63168b
--- /dev/null
+++ b/src/components/Todo.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCheck} from '@fortawesome/free-solid-svg-icons'
+import {faTrash} from '@fortawesome/free-solid-svg-icons'
+
+function Todo({ todo, deleteTodo, toggleTodo }) {
+	return (
+		<div className="todo">
+			{/* Adding class "completed" if todo.done === true */}
+			<li className={`todo-item ${todo.done ? 'completed' : ''}`}>{todo.text}</li> 
+			<button className="complete-btn" onClick={() => toggleTodo(todo.id, todo.done)}><FontAwesomeIcon icon={faCheck}/></button>
+			<button className="trash-btn" onClick={() => deleteTodo(todo.id)}><FontAwesomeIcon icon={faTrash}/></button>
+		</div>
+	);
+}
+
+export default Todo;
diff --git a/src/components/Todos.js b/src/components/Todos.js
new file mode 100644
index 0000000..41ae34f
--- /dev/null
+++ b/src/components/Todos.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Todo from './Todo'
+
+function Todos({todos, setTodos, filteredTodos, deleteTodo, toggleTodo}) {
+	return (
+		<div className="todo-container">
+			<ul className="todo-list">
+				{/* displaying all todos in the array */}
+				{
+					filteredTodos.map(el => (
+						<Todo toggleTodo={toggleTodo} todo={el} key={el.id} setTodos={setTodos} todos={todos} deleteTodo={deleteTodo}/>
+					))
+				}
+			</ul>
+		</div>
+	);
+}
+
+export default Todos;
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
new file mode 100644
index 0000000..72f7a50
--- /dev/null
+++ b/src/contexts/AuthContext.js
@@ -0,0 +1,56 @@
+import React, {useContext, useEffect, useState} from 'react';
+import "firebase/auth"
+import { auth } from "../firebase";
+
+// Setting up context for authorisation etc
+
+const AuthContext = React.createContext()
+
+export function useAuth() {
+	return useContext(AuthContext);
+}
+
+export function AuthProvider({children}) {
+	const [currentUser, setCurrentUser] = useState()
+	// using this to allow firebase time to check if 
+	// there's cookies on the user already saved in the browser
+	const [loading, setLoading] = useState(true) 
+	
+	
+	// Create user 
+	const signup = (email, password) => {
+		return auth.createUserWithEmailAndPassword(email, password)
+	}
+	
+	// User login
+	const login = (email, password) => {
+		return auth.signInWithEmailAndPassword(email, password)
+	}
+	
+	// User logout
+	const logout = () => {
+		return auth.signOut()
+	}
+	
+	// Setting up created user to our state = currentUser. Runs once on page load
+	useEffect(() => {
+		return auth.onAuthStateChanged(user => {
+			setCurrentUser(user)
+			setLoading(false)
+		})
+	}, []);
+	
+	const value = {
+		currentUser,
+		signup,
+		login,
+		logout
+	}
+	
+	return (
+		<AuthContext.Provider value={value}>
+			{/* Render only if loading is false and currentUser is set */}
+			{!loading && children} 
+		</AuthContext.Provider>
+	);
+}
diff --git a/src/firebase.js b/src/firebase.js
new file mode 100644
index 0000000..585d910
--- /dev/null
+++ b/src/firebase.js
@@ -0,0 +1,16 @@
+import firebase from 'firebase/app'
+import "firebase/auth"
+import "firebase/firestore"
+
+const app = firebase.initializeApp({
+	apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+	authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+	projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+	storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+	messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+	appId: process.env.REACT_APP_FIREBASE_APP_ID,
+	measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
+})
+
+export const auth = app.auth()
+export default app
diff --git a/src/index.js b/src/index.js
index ef2edf8..3a44b71 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import "bootstrap/dist/css/bootstrap.min.css"
+
 
 ReactDOM.render(
   <React.StrictMode>
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file