diff --git a/.env b/.env
index 39ce9ce..cae1000 100644
--- a/.env
+++ b/.env
@@ -1 +1,8 @@
-API_KEY = AIzaSyAOnYfYcGgrz5CBwlSj3NTW-Rzo6hQ85A8
\ No newline at end of file
+API_KEY = AIzaSyAOnYfYcGgrz5CBwlSj3NTW-Rzo6hQ85A8
+apiKey = "AIzaSyAOnYfYcGgrz5CBwlSj3NTW-Rzo6hQ85A8"
+AUTH_DOMAIN = "anime-match-a5f94.firebaseapp.com"
+projectId = "anime-match-a5f94"
+storageBucket = "anime-match-a5f94.appspot.com"
+messagingSenderId = "561233950151"
+appId = "1:561233950151:web:84b1c7e0e5684b410a95e2"
+measurementId = "G-WMRL0G5JYF"
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
index 430e2e2..e8794d1 100644
--- a/.firebase/hosting.YnVpbGQ.cache
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -3,12 +3,12 @@ logo192.png,1665354843807,3ee59515172ee198f3be375979df15ac5345183e656720a381b887
 logo512.png,1665354843808,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 manifest.json,1665354843808,5c997de1364b8be939319fa9209abd77f2caf7f8844999a9e2e9173f844e7840
 robots.txt,1665354843809,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
-asset-manifest.json,1696029337553,b0cfe3069cadc3edf749a6ca7544a7b2f0eeab7676ccfb3fb97ed18d075efb35
-index.html,1696029337553,c73241101b06e169aa2e86ea8e70abc34530db13e401dc4923d28d2165b6c476
-static/css/main.3440859c.css.map,1696029337567,6269843dfac2b300e3a220e67da18007fd3fb4dec8f4ae3c23163db053dda323
-static/js/787.1583e544.chunk.js,1696029337567,8af2baeb24f579297dedfea57ed17f2c85f6bd0a1fda19f030e80031c0bf3bb0
-static/css/main.3440859c.css,1696029337567,a62d0965c9a7034cf8e308c1ac189001a360b61afa7199c99e9c723c580ed06a
-static/js/787.1583e544.chunk.js.map,1696029337567,f81d2b4464179ec15df3380d732b71d987e624b5fc91e23e43c0be1fd21819a7
-static/js/main.17db98ae.js.LICENSE.txt,1696029337567,4f35a1289934fb45d3feae9333f9dbeaa8ec67f3f9f16633535ee89c6a60a3b9
-static/js/main.17db98ae.js,1696029337568,beb64fe8b47cf9de95bba0e2073c2bd7c8b0be06ca9c52a3f11c31ae4efd53c2
-static/js/main.17db98ae.js.map,1696029337569,85f698501509c8aac5483eee6282fb0f3fe4a8eee244883abed69522e39838ba
+asset-manifest.json,1696031328026,c70e515cad6fafd1160729c2384f6ba03e4e7b0cbbe0448af0caae105ba2bcd6
+index.html,1696031328026,500808d602638fb5bc6414d51e84d3e1f2667a2de1c827736be7a127145c6003
+static/css/main.3440859c.css,1696031328043,a62d0965c9a7034cf8e308c1ac189001a360b61afa7199c99e9c723c580ed06a
+static/css/main.3440859c.css.map,1696031328043,6269843dfac2b300e3a220e67da18007fd3fb4dec8f4ae3c23163db053dda323
+static/js/787.1583e544.chunk.js,1696031328043,8af2baeb24f579297dedfea57ed17f2c85f6bd0a1fda19f030e80031c0bf3bb0
+static/js/787.1583e544.chunk.js.map,1696031328043,f81d2b4464179ec15df3380d732b71d987e624b5fc91e23e43c0be1fd21819a7
+static/js/main.66354cb4.js.LICENSE.txt,1696031328043,4f35a1289934fb45d3feae9333f9dbeaa8ec67f3f9f16633535ee89c6a60a3b9
+static/js/main.66354cb4.js,1696031328044,2c6bef14d8c8a9c3695a4bf1b7eedb32346a1f6fb58d590ef16495a9b7247824
+static/js/main.66354cb4.js.map,1696031328046,9693a8eb82291388ee8f2ddb27a9edca47192d4f64878e02e0a1adcabedef8a8
diff --git a/src/Components/App.css b/src/Components/App.css
index a544f0a..af834ae 100644
--- a/src/Components/App.css
+++ b/src/Components/App.css
@@ -23,96 +23,3 @@ body {
     top: 50%;
     transform: translate(-50%, -50%);
 }
-
-
-/* html, body {
-    width: 100%;
-    height:100%;
-  }
-  
-  body {
-      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-      background-size: 400% 400%;
-      animation: gradient 15s ease infinite;
-  }
-  
-  @keyframes gradient {
-      0% {
-          background-position: 0% 50%;
-      }
-      50% {
-          background-position: 100% 50%;
-      }
-      100% {
-          background-position: 0% 50%;
-      }
-  }
-
-
-
-
-
-
-<div class="bg"></div>
-<div class="bg bg2"></div>
-<div class="bg bg3"></div>
-<div class="content">
-  <h1>Sliding Diagonals Background Effect</h1>
-</div>
-
-html {
-    height:100%;
-  }
-  
-  body {
-    margin:0;
-  }
-  
-  .bg {
-    animation:slide 3s ease-in-out infinite alternate;
-    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
-    bottom:0;
-    left:-50%;
-    opacity:.5;
-    position:fixed;
-    right:-50%;
-    top:0;
-    z-index:-1;
-  }
-  
-  .bg2 {
-    animation-direction:alternate-reverse;
-    animation-duration:4s;
-  }
-  
-  .bg3 {
-    animation-duration:5s;
-  }
-  
-  .content {
-    background-color:rgba(255,255,255,.8);
-    border-radius:.25em;
-    box-shadow:0 0 .25em rgba(0,0,0,.25);
-    box-sizing:border-box;
-    left:50%;
-    padding:10vmin;
-    position:fixed;
-    text-align:center;
-    top:50%;
-    transform:translate(-50%, -50%);
-  }
-  
-  h1 {
-    font-family:monospace;
-  }
-  
-  @keyframes slide {
-    0% {
-      transform:translateX(-25%);
-    }
-    100% {
-      transform:translateX(25%);
-    }
-  }
-
-*/
diff --git a/src/Components/App.js b/src/Components/App.js
index 375ea0d..b0b672c 100644
--- a/src/Components/App.js
+++ b/src/Components/App.js
@@ -2,28 +2,23 @@
 import Cards from "./Cards.js";
 import Chat from "./Chat.js";
 import Header from "./Header";
-import LoadingScreen from "./Loading";
 import History from "./History";
+import LoadingScreen from "./Loading";
 import { SignIn } from "./SignIn";
 
-import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
-import React, { useState, useEffect } from 'react';
-import "./App.css";
-import { onAuthStateChanged } from "firebase/auth";
-
+import React, { useEffect, useState } from 'react';
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import { auth } from "../firebase";
-import { useAuthState } from 'react-firebase-hooks/auth';
+import "./App.css";
 
 function App() {
-  // add lock to check for api response before showing data
   const [loading, setLoading] = useState(true)
+  const [user, setUser] = useState(null);
 
   useEffect(() => {
     setTimeout(() => setLoading(false), 1600)
   }, [])
 
-  const [user, setUser] = useState(null);
-
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((authUser) => {
       if (authUser) {
diff --git a/src/Components/Cards.js b/src/Components/Cards.js
index 0b9d08f..728622e 100644
--- a/src/Components/Cards.js
+++ b/src/Components/Cards.js
@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from "react";
-import { makeStyles } from "@material-ui/styles";
 import { Typography } from "@material-ui/core";
-import TinderCard from "react-tinder-card";
+import { makeStyles } from "@material-ui/styles";
+import 'firebase/compat/analytics';
 import firebase from 'firebase/compat/app';
-import { auth, firestore } from "../firebase";
 import 'firebase/compat/auth';
 import 'firebase/compat/firestore';
-import 'firebase/compat/analytics';
-import { getDoc, where, query, collection, getDocs, doc, setDoc, Timestamp, addDoc } from "firebase/firestore"; 
+import { addDoc, collection, getDocs } from "firebase/firestore";
+import React from "react";
+import TinderCard from "react-tinder-card";
 import { getTopAnime } from "../Api/animeapi";
+import { auth, firestore } from "../firebase";
 
 const useStyles = makeStyles({
   card: {
@@ -56,10 +56,6 @@ const anime_set = new Set()
 const anime_map = []
 async function getAllAnimeTitleFromDb() {
   try {
-    // Create a query to get documents where the age field is greater than the threshold
-    //const q = query(usersCollectionRef, where('animeTitle'));
-    
-
     const querySnapshot = await getDocs(collection(firestore, 'users'))
     querySnapshot.forEach(doc => {
       console.log(doc.data().animeTitle)
@@ -76,7 +72,6 @@ async function getAllAnimeTitleFromDb() {
 
 // if title in history/database, remove from the available list
 const anime_array = []
-const anime_titles = []
 getTopAnime()
   .then(responseData => {
     for (var i=0; i<responseData.data.length; i++) {
@@ -89,9 +84,6 @@ getTopAnime()
 
  getAllAnimeTitleFromDb()
 const myArray = Array.from(anime_set)
-console.log(myArray)
-// make sure to update the rules on firebase from false to true, based on timeframe to open
-// Need to find a way to add to firebase
 async function onSwipe(direction, anime) {
   if (direction == 'left') {
     direction = false
@@ -99,14 +91,9 @@ async function onSwipe(direction, anime) {
     direction = true
   }
   const { uid, photoURL } = auth.currentUser;
-  console.log("anime title", anime)
-  console.log("anime title", direction)
-  console.log("uid", uid)
-  console.log("PhotoURL", photoURL)
-// new way to add document to firestore database
-  await addDoc(collection(firestore, 'users'), { // Always needs even number of 'user', 'user' arguments, what you are extracting from firestore db
-      //text: direction,
-      //date: Timestamp,
+
+  await addDoc(collection(firestore, 'users'), {
+
       animeTitle: anime,
       like: direction,
       createdAt: firebase.firestore.FieldValue.serverTimestamp(),
diff --git a/src/Components/Chat.js b/src/Components/Chat.js
index 5cb63eb..f0ca646 100644
--- a/src/Components/Chat.js
+++ b/src/Components/Chat.js
@@ -1,11 +1,10 @@
-import React, { useRef, useState } from 'react';
-import './Chat.css';
 import firebase from 'firebase/compat/app';
-import 'firebase/compat/firestore'
+import 'firebase/compat/firestore';
+import { addDoc, collection, getDocs, limit, orderBy, query } from "firebase/firestore";
+import React, { useRef, useState } from 'react';
 import { useCollectionData } from 'react-firebase-hooks/firestore';
 import { auth, firestore } from "../firebase";
-import { useAuthState } from 'react-firebase-hooks/auth';
-import { collection, orderBy, query, limit, addDoc, getDocs } from "firebase/firestore"; 
+import './Chat.css';
 
 function Chat() {
   return (
diff --git a/src/Components/Header.js b/src/Components/Header.js
index b01ae21..14e4ff6 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import BlenderIcon from '@mui/icons-material/Blender';
+import MenuIcon from '@mui/icons-material/Menu';
 import AppBar from '@mui/material/AppBar';
+import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
 import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/icons-material/Menu';
-import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
-import BlenderIcon from '@mui/icons-material/Blender';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import React, { useState } from 'react';
 import { Link } from "react-router-dom";
 
 import { auth } from "../firebase";
@@ -58,14 +58,11 @@ function Header() {
   const [anchorElUser, setAnchorElUser] = useState(null);
 
   function handleOpenNavMenu(event) {
-    console.log(event.currentTarget)
-    console.log("This opens the menu")
     setAnchorElNav(event.currentTarget);
   };
 
   function handleOpenUserMenu(event) {
     setAnchorElUser(event.currentTarget);
-    console.log(anchorElUser)
   };
 
   const handleCloseNavMenu = () => {
@@ -86,12 +83,12 @@ function Header() {
         <Toolbar disableGutters>
           <BlenderIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
           <Typography
-            variant="h6"
+            variant="h8"
             noWrap
             component="a"
             href="/"
             sx={{
-              mr: 2,
+              mr: 0,
               display: { xs: 'none', md: 'flex' },
               fontFamily: 'monospace',
               fontWeight: 700,
@@ -143,7 +140,7 @@ function Header() {
           </Box>
           <BlenderIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
           <Typography
-            variant="h5"
+            variant="h8"
             noWrap
             component="a"
             href=""
@@ -204,7 +201,7 @@ function Header() {
                 </Link>
               ))}
                 <MenuItem key="SignOut" onClick={SignOut}>
-                    <Typography color="black" textAlign="center">Signout</Typography>
+                    <Typography color="black" textAlign="center">Sign Out</Typography>
                 </MenuItem>
             </Menu>
           </Box>
@@ -215,4 +212,3 @@ function Header() {
 };
 
 export default Header;
-
diff --git a/src/Components/History.css b/src/Components/History.css
index b75f7bf..598d843 100644
--- a/src/Components/History.css
+++ b/src/Components/History.css
@@ -60,7 +60,7 @@ div {
 .button-popup {
   float: center;
   border: 0;
-  background: #78f89f;
+  background: #05da44;
   border-radius: 5px;
   padding: 0.5rem 1rem;
   font-size: 0.8rem;
diff --git a/src/Components/History.js b/src/Components/History.js
index 9755b7e..b8dc637 100644
--- a/src/Components/History.js
+++ b/src/Components/History.js
@@ -1,48 +1,31 @@
 import 'firebase/compat/firestore';
+import { collection, deleteDoc, doc, getDocs } from "firebase/firestore";
 import { useEffect, useState } from 'react';
-import { firestore, querySnapshot, getuserdata } from "../firebase";
-import { doc, getDocs, deleteDoc, getDoc, collection, onSnapshot } from "firebase/firestore";
-import './History.css';
 import Popup from 'reactjs-popup';
-import { auth } from "../firebase";
-
-// import a map from userdata, and return the list
+import { firestore } from "../firebase";
+import './History.css';
 
 function History() {
-    // need to figure out exactly what firebase is returning,
-    // clear out the data we have next time we have access
-    // we want to be able to pull specifically the data into JSON so its easier to read
-    // console.log("fire is JSON", firestore.toJSON())
 
-    // Search USER, return the titles of the animes into list 
     
     const [anime, setAnime] = useState([])
-    const [popupIsOpen, setPopupIsOpen] = useState(false);
     const colRef = collection(firestore, "users")
-    //doc(collection(firestore, "users")).id
     useEffect(() => {
         getDocs(colRef)
             .then((snapshot) => {
                 let anime = []
                 snapshot.docs.forEach((doc) => {
                     anime.push({ id: doc.id, ...doc.data()})
-                    //console.log("This is the doc data", doc.data())
-                    //console.log(doc.data()["animeTitle"])  
+                    
                 })
-                // goes through each item in the array, and finds the "like" items. Filtering anime array
                 anime = anime.filter((item) => item["like"] == true);
                 setAnime(anime)
-            //console.log("This is snapshot of collection data \n", snapshot.docs) // returns an array of objects
             });
         }, []);
 
     function deleteCell(id) {
-        //console.log("delete cell, ${id}")
-        // Updates the local list of anime to remove the item.id, and rerenders the react component to reflect changes
         const newanime = anime.filter((item) => item.id !== id);
         setAnime(newanime);
-
-        // calls upon firestore and deletes from database
         deleteDoc(doc(firestore, "users", id));
     }
 
@@ -53,7 +36,7 @@ function History() {
     
     return (
         <>
-        <div>
+        <div className="toplist">
         <Popup trigger=
             {<button class="button">  Delete All </button>}
             modal nested>
@@ -73,13 +56,6 @@ function History() {
                 )
             }
         </Popup>
-        {/* <Popup trigger={
-            <button class="button" onClick={() => deleteAllCells()}>
-                            <span>Delete All</span>
-                            <img src="https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png" height="62" width="62"/>
-                        </button>} position ="left center">
-                        <div>Popup content here !!</div>
-        </Popup> */}
         </div>
         
         
@@ -99,8 +75,6 @@ function History() {
                     <h1> no data yet </h1>
                 )
             }
-            
-            
         </div>
         </>
         
diff --git a/src/Components/Loading.js b/src/Components/Loading.js
index a94aa11..5dfb9a1 100644
--- a/src/Components/Loading.js
+++ b/src/Components/Loading.js
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import * as React from 'react';
 import "./Loading.css";
 
 function Loading() {
diff --git a/src/Components/SignIn.js b/src/Components/SignIn.js
index 2509ad0..5e94ec2 100644
--- a/src/Components/SignIn.js
+++ b/src/Components/SignIn.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { signInWithGoogle } from "../firebase";
-import "./SignIn.css"
+import "./SignIn.css";
 
 function SignIn() {
 
@@ -13,3 +13,4 @@ function SignIn() {
   };
 
 export { SignIn };
+
diff --git a/src/firebase.js b/src/firebase.js
index 5714001..0225a30 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,20 +1,18 @@
-import firebase from 'firebase/compat/app';
+import { initializeApp } from 'firebase/app';
+import { GoogleAuthProvider, getAuth, signInWithPopup } from "firebase/auth";
+import 'firebase/compat/analytics';
 import 'firebase/compat/auth';
 import 'firebase/compat/firestore';
-import 'firebase/compat/analytics';
-import { initializeApp } from 'firebase/app';
-import { getDoc, getFirestore } from 'firebase/firestore';
-import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
-import { collection, doc, getDocs } from "firebase/firestore"; 
+import { collection, getFirestore } from 'firebase/firestore';
 
 const firebaseConfig = {
-    apiKey: "AIzaSyAOnYfYcGgrz5CBwlSj3NTW-Rzo6hQ85A8",
-    authDomain: "anime-match-a5f94.firebaseapp.com",
-    projectId: "anime-match-a5f94",
-    storageBucket: "anime-match-a5f94.appspot.com",
-    messagingSenderId: "561233950151",
-    appId: "1:561233950151:web:84b1c7e0e5684b410a95e2",
-    measurementId: "G-WMRL0G5JYF"
+    apiKey: process.env.apiKey,
+    authDomain: process.env.authDomain,
+    projectId: process.env.projectId,
+    storageBucket: process.env.storageBucket,
+    messagingSenderId: process.env.messagingSenderId,
+    appId: process.env.appId,
+    measurementId: process.envmeasurementId
 };
 
 const app = initializeApp(firebaseConfig); // initializes connection to firebase
@@ -22,40 +20,8 @@ const auth = getAuth(app); //get which user is authenticated
 const firestore = getFirestore(app); // returns firestore instance, Database Instance
 const querySnapshot = collection(firestore, "user") // grabs snapshot of collection, after updating from 'firebase/firestore/lite' to 'firebase/firestore'
 
-const colRef = collection(firestore, "users")
 
-
-const provider = new GoogleAuthProvider(); // used to help log in authentication
-
-//function getcollectiondata() {
-//    getDocs(querySnapshot)
-//        .then((snapshot) => {
-//        console.log("This is snapshot of collection data \n", snapshot.docs) // returns an array of objects
-//        let documents = [] // create new array to hold the data properties
-//        let animetitles = []
-//        snapshot.docs.forEach((doc) => {
-//            documents.push({ ...doc.data(), id: doc.id }) // create a new object to store into documents array
-//            if (doc.data().animetitle) {
-//                animetitles.push({ ...doc.data().animetitle, id: doc.id })
-//            }
-//        })
-//        console.log(documents)
-//        console.log(animetitles)
-//    })
-//    .catch(err => {
-//        console.log(err.message)
-//    })
-//    
-//}
-
-//function getuserdata() {
-//    const docRef = doc(firestore, 'user', 'rzcwz9Oc9LGBVGP4zFvr');
-//    
-//    getDoc(docRef)
-//        .then((doc) => {
-//            console.log("Doc Data \n", doc.data(), "This is the doc.id\n", doc.id)
-//        })
-//}
+const provider = new GoogleAuthProvider();
 
 function signInWithGoogle() {
     signInWithPopup(auth, provider)
@@ -77,4 +43,5 @@ function SignOut() {
       auth.signOut()
 };
 
-export { signInWithGoogle, auth, firestore, SignOut, querySnapshot };
+export { SignOut, auth, firestore, querySnapshot, signInWithGoogle };
+
diff --git a/src/index.js b/src/index.js
index d0e9590..882b74f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './Components/App';
+import './index.css';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));