diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..317df57
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,277 @@
+import React from 'react';
+import './App.css';
+import { BrowserRouter as Router, Route, Switch, Redirect, Link } from 'react-router-dom';
+import Home from "./Home";
+import LoggedInHome from "./LoggedInHome";
+import Login from "./Login";
+import SetPage from "./SetPage";
+import GroupPage from "./GroupPage";
+import UserGroups from "./UserGroups";
+import Settings from "./Settings";
+import Progress from "./Progress";
+import CreateSet from "./CreateSet";
+import UserSets from "./UserSets";
+import EditSet from "./EditSet";
+import Error404 from "./Error404";
+import History from "./History";
+import TermsOfService from "./TermsOfService";
+import PrivacyPolicy from "./PrivacyPolicy";
+import Button from "./Button";
+import { CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon } from "@material-ui/icons";
+
+import Cookies from 'universal-cookie';
+
+import firebase from "firebase/app";
+import "firebase/auth";
+import "firebase/functions";
+import "firebase/app-check";
+import "firebase/firestore";
+
+// TODO: app check debug token set in index.html - remove before deploy
+
+const firebaseConfig = {
+  apiKey: "AIzaSyCv5A51xC90hu-Tfw9F7yPasyslzNY0bP4",
+  authDomain: "parandum.mgrove.uk",
+  projectId: "parandum",
+  storageBucket: "parandum.appspot.com",
+  messagingSenderId: "639286122165",
+  appId: "1:639286122165:web:62f1e81a35e26ec4e5d0fc",
+  measurementId: "G-MX83SH11CJ"
+};
+firebase.initializeApp(firebaseConfig);
+const appCheck = firebase.appCheck();
+appCheck.activate(
+  "6LfxoQAcAAAAACEuhx1aaBl69svfRDDlq9Md96we",
+  true
+);
+
+// firebase.functions().useEmulator("localhost", 5001);
+// firebase.auth().useEmulator("http://localhost:9099");
+// firebase.firestore().useEmulator("localhost", 8080);
+const functions = firebase.app().functions("europe-west2");//firebase.functions();
+
+firebase.firestore().enablePersistence()
+  .catch((err) => {
+    if (err.code === 'failed-precondition') {
+      console.log("Offline persistence can only be enabled in one tab at a time");
+    } else if (err.code === 'unimplemented') {
+      console.log("Your browser doesn't support offline persistence");
+    }
+  });
+
+const themes = [
+  "default",
+  "pink",
+  "maroon",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "light-blue"
+];
+
+const db = firebase.firestore();
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      user: null,
+      sound: true,
+      theme: "default",
+    };
+  }
+
+  componentDidMount() {
+    firebase.auth().onAuthStateChanged(async (userData) => {
+      let newState = {
+        user: userData,
+      };
+
+      if (userData) await firebase.firestore()
+        .collection("users")
+        .doc(userData.uid)
+        .get()
+        .then((userDoc) => {
+          newState.sound = userDoc.data().sound;
+          newState.theme = userDoc.data().theme;
+        }).catch((error) => {
+          newState.sound = true;
+          newState.theme = "default";
+        });
+      
+      this.setState(newState);
+    });
+    
+    this.cookies = new Cookies();
+    this.cookieNotice = document.getElementById("cookie-notice");
+    this.root = document.getElementById("root");
+    this.cookieNoticeHeight = this.cookieNotice.offsetHeight;
+
+    if (this.cookies.get("parandum-cookies-accepted") !== "true") {
+      this.cookieNotice.style.display = "flex";
+      this.cookieNotice.animate({
+        bottom: [`-${this.cookieNotice.offsetHeight}px`, "0px"],
+      }, {
+        duration: 1000,
+        easing: "ease-in-out",
+        iterations: 1,
+        fill: "forwards",
+      });
+      this.root.animate({
+        marginBottom: ["0px", `${this.cookieNotice.offsetHeight}px`],
+      }, {
+        duration: 1000,
+        easing: "ease-in-out",
+        iterations: 1,
+        fill: "forwards",
+      });
+      window.addEventListener('resize', this.updateCookieNoticeMargins);
+    }
+  }
+
+  updateCookieNoticeMargins = () => {
+    if (this.cookieNoticeHeight !== this.cookieNotice.offsetHeight) {
+      this.root.animate({
+        marginBottom: [`${this.root.marginBottom}px`, `${this.cookieNotice.offsetHeight}px`],
+      }, {
+        duration: 1000,
+        easing: "ease-in-out",
+        iterations: 1,
+        fill: "forwards",
+      });
+      this.cookieNoticeHeight = this.cookieNotice.offsetHeight;
+    }
+  }
+
+  handleThemeChange = (newTheme, globalChange = false) => {
+    if (globalChange) firebase.firestore().collection("users")
+      .doc(this.state.user.uid)
+      .update({
+        theme: newTheme,
+      });
+    this.setState({
+      theme: newTheme,
+    });
+  }
+
+  handleSoundChange = (newSound, globalChange = false) => {
+    if (globalChange) firebase.firestore().collection("users")
+      .doc(this.state.user.uid)
+      .update({
+        sound: newSound,
+      });
+    this.setState({
+      sound: newSound,
+    });
+  }
+
+  acceptCookies = () => {
+    window.removeEventListener('resize', this.updateCookieNoticeMargins);
+    this.cookieNotice.animate({
+      bottom: ["0px", `-${this.cookieNotice.offsetHeight}px`],
+    }, {
+      duration: 1000,
+      easing: "ease-in-out",
+      iterations: 1,
+      fill: "forwards",
+    });
+    this.root.animate({
+      marginBottom: [`${this.cookieNotice.offsetHeight}px`, "0px"],
+    }, {
+      duration: 1000,
+      easing: "ease-in-out",
+      iterations: 1,
+      fill: "forwards",
+    });
+    setTimeout(() => this.cookieNotice.style.display = "none", 1000);
+    this.cookies.set("parandum-cookies-accepted", "true", {
+      maxAge: 31556952,
+      path: "/",
+    });
+  }
+
+  render() {
+    return (
+      <div className={this.state.theme}>
+        <Router>
+            {
+              this.state.user !== null
+              ?
+              <>
+                <Switch>
+                  <Route path="/" exact>
+                    <LoggedInHome db={db} functions={functions} user={this.state.user} />
+                  </Route>
+                  <Route path="/sets/:setId" exact>
+                    <SetPage db={db} functions={functions} user={this.state.user} />
+                  </Route>
+                  <Route path="/groups" exact>
+                    <UserGroups db={db} functions={functions} user={this.state.user} />
+                  </Route>
+                  <Route path="/groups/:groupId" exact>
+                    <GroupPage db={db} functions={functions} user={this.state.user} />
+                  </Route>
+                  <Route path="/settings">
+                    <Settings db={db} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} />
+                  </Route>
+                  <Route path="/progress/:progressId" exact>
+                    <Progress db={db} functions={functions} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} />
+                  </Route>
+                  <Route path="/create-set" exact>
+                    <CreateSet db={db} user={this.state.user} />
+                  </Route>
+                  <Route path="/my-sets" exact>
+                    <UserSets db={db} functions={functions} user={this.state.user} />
+                  </Route>
+                  <Route path="/sets/:setId/edit" exact>
+                    <EditSet db={db} user={this.state.user} />
+                  </Route>
+                  <Route path="/history" exact>
+                    <History db={db} user={this.state.user} />
+                  </Route>
+                  <Route path="/tos" exact>
+                    <TermsOfService />
+                  </Route>
+                  <Route path="/privacy" exact>
+                    <PrivacyPolicy />
+                  </Route>
+                  <Redirect from="/login" to="/" />
+                  <Route>
+                    <Error404 />
+                  </Route>
+                  </Switch>
+                </>
+                :
+                <>
+                  <Switch>
+                    <Route path="/" exact>
+                      <Home db={db} />
+                    </Route>
+                    <Route path="/login">
+                      <Login db={db} firebase={firebase} />
+                    </Route>
+                    <Route>
+                      <Error404 />
+                    </Route>
+                  </Switch>
+                </>
+          }
+          <div className="cookie-notice" id="cookie-notice">
+            <div>
+              <p>Just so you know, we use cookies. Read our privacy policy <Link to="/privacy">here</Link>.</p>
+              <p></p>
+            </div>
+            <Button
+              onClick={this.acceptCookies}
+              icon={<CheckCircleOutlineRoundedIcon/>}
+              className="button--round button--no-background"
+            ></Button>
+          </div>
+        </Router>
+      </div>
+    );
+  }
+}
+
+export default App;