diff --git a/package-lock.json b/package-lock.json
index fed2fc6..4aa60b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -370,24 +370,16 @@
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
-      }
-    },
-    "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.7.4.tgz",
-      "integrity": "sha512-CG605v7lLpVgVldSY6kxsN9ui1DxFOyepBfuX2AzU2TNriMAYApoU55mrGw9Jr4TlrTzPCG10CL8YXyi+E/iPw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-numeric-separator": "^7.7.4"
-      }
-    },
-    "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.7.4.tgz",
-      "integrity": "sha512-TbYHmr1Gl1UC7Vo2HVuj/Naci5BEGNZ0AJhzqD2Vpr6QPFWpUmBRLrIDjedzx7/CShq0bRDS2gI4FIs77VHLVQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.7.4"
+      },
+      "dependencies": {
+        "@babel/plugin-syntax-nullish-coalescing-operator": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+          "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        }
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
@@ -424,15 +416,16 @@
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0"
-      }
-    },
-    "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.7.4.tgz",
-      "integrity": "sha512-JmgaS+ygAWDR/STPe3/7y0lNlHgS+19qZ9aC06nYLwQ/XB7c0q5Xs+ksFU3EDnp9EiEsO0dnRAOKeyLHTZuW3A==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.7.4"
+      },
+      "dependencies": {
+        "@babel/plugin-syntax-optional-chaining": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+          "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        }
       }
     },
     "@babel/plugin-proposal-unicode-property-regex": {
@@ -492,22 +485,6 @@
         "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
-    "@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-numeric-separator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz",
-      "integrity": "sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
-      }
-    },
     "@babel/plugin-syntax-nullish-coalescing-operator": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.7.4.tgz",
@@ -540,14 +517,6 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
-    "@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
     "@babel/plugin-syntax-optional-chaining": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.7.4.tgz",
@@ -994,6 +963,22 @@
         "semver": "^5.5.0"
       },
       "dependencies": {
+        "@babel/plugin-syntax-nullish-coalescing-operator": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+          "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-optional-chaining": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+          "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -1174,6 +1159,16 @@
         "@firebase/util": "0.2.40",
         "faye-websocket": "0.11.3",
         "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "faye-websocket": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+          "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+          "requires": {
+            "websocket-driver": ">=0.5.1"
+          }
+        }
       }
     },
     "@firebase/database-types": {
@@ -1368,9 +1363,9 @@
       "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="
     },
     "@hapi/hoek": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
-      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
+      "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow=="
     },
     "@hapi/joi": {
       "version": "15.1.1",
@@ -1960,20 +1955,10 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
       "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA=="
     },
-    "@types/minimatch": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
-    },
-    "@types/node": {
-      "version": "13.1.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.8.tgz",
-      "integrity": "sha512-6XzyyNM9EKQW4HKuzbo/CkOIjn/evtCmsU+MUM1xDfJ+3/rNjBttM1NgN7AOQvN6tP1Sl1D1PIKMreTArnxM9A=="
-    },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    "@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
     },
     "@types/minimatch": {
       "version": "3.0.3",
@@ -1981,25 +1966,15 @@
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "@types/node": {
-      "version": "12.12.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.17.tgz",
-      "integrity": "sha512-Is+l3mcHvs47sKy+afn2O1rV4ldZFU7W8101cNlOd+MRbjM4Onida8jSZnJdTe/0Pcf25g9BNIUsuugmE6puHA=="
+      "version": "10.17.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.15.tgz",
+      "integrity": "sha512-daFGV9GSs6USfPgxceDA8nlSe48XrVCJfDeYm7eokxq/ye7iuOH87hKXgMtEAVLFapkczbZsx868PMDT1Y0a6A=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
-    "@types/long": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
-      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
-    },
-    "@types/node": {
-      "version": "10.17.15",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.15.tgz",
-      "integrity": "sha512-daFGV9GSs6USfPgxceDA8nlSe48XrVCJfDeYm7eokxq/ye7iuOH87hKXgMtEAVLFapkczbZsx868PMDT1Y0a6A=="
-    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -14403,6 +14378,11 @@
         }
       }
     },
+    "uid": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/uid/-/uid-0.0.2.tgz",
+      "integrity": "sha1-XkpdS3gTi09w+J/Tx2/FmqnS8QM="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -15420,11 +15400,6 @@
       "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
       "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
     },
-    "xregexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
-      "integrity": "sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg=="
-    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 0b00af1..707b58e 100644
--- a/package.json
+++ b/package.json
@@ -3,16 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "firebase": "^7.8.1",
     "@material-ui/core": "^4.7.2",
     "@material-ui/icons": "^4.5.1",
+    "firebase": "^7.8.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-minimal-pie-chart": "^6.0.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
-    "semantic-ui-react": "^0.88.1"
+    "semantic-ui-react": "^0.88.1",
+    "uid": "0.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..c6df21f
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/index.html b/public/index.html
index 670fe5f..a21a35b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
   <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="logo192.png" />
+  <link rel="apple-touch-icon" href="favicon.png" />
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -30,7 +30,7 @@
   name="viewport"
   content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
 />
-    <title>React App</title>
+    <title>PackMeApp</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.css b/src/App.css
index e69de29..14dcf38 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,36 @@
+body {
+    background-image: url("./images/background.jpg");
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.containerWrapper {
+    background: rgb(255, 255, 255);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8897934173669468) 0%, rgba(255, 255, 255, 0.7805497198879552) 100%);
+    padding: 78px 20px 10px;
+}
+
+.fileContainer {
+    overflow: hidden;
+    position: relative;
+}
+
+.fileContainer [type=file] {
+    cursor: inherit;
+    display: block;
+    font-size: 999px;
+    filter: alpha(opacity=0);
+    min-height: 100%;
+    min-width: 100%;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 0;
+}
+
+.item-done {
+    text-decoration: line-through;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index dfcacda..e2ef6f8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,49 +7,56 @@ import MainList from './main-list/Main-list';
 import Dashboard from './dashboard/Dashboard';
 import ItemDetails from './item-details/Item-details';
 import UserList from './user-list/User-list';
-import { AuthContext }   from './auth/Auth';
+import { AuthContext } from './auth/Auth';
 import UserProfile from './user-profile/User-profile';
 import { ItemForm } from './item-form/Item-form';
+import AuthProtected from './auth/AuthProtected';
 
 
 
 function App() {
   return (
-    <AuthContext>
-    <BrowserRouter>
-      <Navigation />
-      <Container text style={{marginTop: '78px'}} >
-        <Switch>
-          <Route
-            path="/user-list"
-            component={UserList}
-          />
-          <Route
-            path="/item-form"
-            component={ItemForm}
-          />
-          <Route
-              path='/userProfile'
-              component={UserProfile}
-            />
-          <Route
-            path="/dashboard"
-            component={Dashboard}
-          />
-          <Route
-            path="/items/:id"
-            component={ItemDetails}
-            exact
-          />
-          <Route
-            path="/"
-            component={MainList}
-          />
-          <Redirect to="/" />
-        </Switch>
+  
+      <BrowserRouter>
+        <Navigation />
+        <Container className="containerWrapper" >
+          <AuthProtected>
+            <Switch>
+              <Route
+                path="/user-list"
+                component={UserList}
+              />
+              <Route
+                path="/item-form"
+                component={ItemForm}
+              />
+              <Route
+                path='/userProfile'
+                component={UserProfile}
+              />
+              <Route
+                path="/dashboard"
+                component={Dashboard}
+              />
+              <Route
+                path="/item-add"
+                component={ItemForm}
+              />
+              <Route
+                path="/items/:id"
+                component={ItemDetails}
+                exact
+              />
+              <Route
+                path="/"
+                component={MainList}
+              />
+              <Redirect to="/" />
+            </Switch>
+          </AuthProtected>
         </Container>
       </BrowserRouter>
-    </AuthContext>
+
   );
 }
 
diff --git a/src/add-button/AddButton.js b/src/add-button/AddButton.js
deleted file mode 100644
index e057505..0000000
--- a/src/add-button/AddButton.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-
-
diff --git a/src/auth/Auth.js b/src/auth/Auth.js
index ae759b6..2606aea 100644
--- a/src/auth/Auth.js
+++ b/src/auth/Auth.js
@@ -1,25 +1,25 @@
 import React from 'react'
 import firebase from "firebase";
-import { Login } from './LogIn';
 export const MyContext = React.createContext(null);
 
 
 export class AuthContext extends React.Component {
     state = {
-        user: null,
+        user: '',
         userList: [],
+        refresh: false
     }
 
     componentDidMount() {
         const authRef = firebase.auth().onAuthStateChanged(user => {
             this.setState({
                 user
-            })
+            }, () => this.fetchList())
         })
-
         this.setState({
             ref: authRef
         })
+
     }
 
     componentWillUnmount() {
@@ -28,19 +28,29 @@ export class AuthContext extends React.Component {
         }
     }
 
-    addToList = (e) => {
+    fetchList = () => {
+        if (this.state.user) {
+            firebase.database().ref('user-items/' + this.state.user.uid + '/list')
+                .on('value', (snapshot) => {
+                    let list = snapshot.val()
+                    list ? this.setState({ userList: list }) : this.setState({ userList: [] })
+                })
+        }
+    }
 
+    addToList = (e) => {
+        const addedItem = e
+        addedItem.done = false
         this.setState({
-            userList: [...this.state.userList, e]
+            userList: [...this.state.userList, addedItem]
         }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
             list: [...this.state.userList]
         }))
-
     }
 
     removeFromList = (e) => {
         const userlist = [...this.state.userList]
-        const index = this.state.userList.indexOf(e);
+        const index = this.state.userList.map(item => item.id).indexOf(e);
         if (index > -1) {
             userlist.splice(index, 1);
         }
@@ -51,18 +61,37 @@ export class AuthContext extends React.Component {
             list: [...this.state.userList]
         }))
     }
-    render() {
-        return this.state.user
-            ? <MyContext.Provider value={{
-                state: this.state,
-                addToList: this.addToList,
-                removeFromList: this.removeFromList,
-            }}>
-                {this.props.children}
-            </MyContext.Provider>
-            : <>
-                <Login />
+    markAsDone = (e) => {
+        const userlist = [...this.state.userList]
+        const index = this.state.userList.map(item => item.id).indexOf(e);
+        if (index > -1) {
+            console.log("done", userlist);
+            
+            userlist[index].done = !userlist[index].done;
+        }
+        this.setState({
+            userList: userlist
 
-            </>
+        }, () => firebase.database().ref('user-items/' + this.state.user.uid).set({
+            list: [...this.state.userList]
+        }))
+    }
+
+    refresh = () => {
+        this.setState((prevState) => ({
+            refresh: !prevState.refresh
+        }))
+    }
+
+    render() {
+        return <MyContext.Provider value={{
+            state: this.state,
+            addToList: this.addToList,
+            markAsDone: this.markAsDone,
+            removeFromList: this.removeFromList,
+            refresh: this.refresh
+        }}>
+            {this.props.children}
+        </MyContext.Provider>
     }
 }
\ No newline at end of file
diff --git a/src/auth/AuthProtected.jsx b/src/auth/AuthProtected.jsx
new file mode 100644
index 0000000..e7bf62b
--- /dev/null
+++ b/src/auth/AuthProtected.jsx
@@ -0,0 +1,12 @@
+import React, { useContext } from 'react'
+import { MyContext } from './Auth'
+import { Login } from './LogIn'
+
+ const AuthProtected = (props) => {
+
+    const context = useContext(MyContext)
+
+    return context.state.user ? { ...props.children } : <Login />
+}
+
+export default AuthProtected
\ No newline at end of file
diff --git a/src/auth/LogIn.js b/src/auth/LogIn.js
index f2de7c0..9ddaa4b 100644
--- a/src/auth/LogIn.js
+++ b/src/auth/LogIn.js
@@ -1,214 +1,20 @@
-
 import React from 'react';
-import { Button, Divider, Grid, Segment, Form, Message } from 'semantic-ui-react'
-import firebase from "firebase";
-
-export function Login() {
-    return <Segment >
-        <Grid columns={2} relaxed='very' stackable>
-            <Grid.Column verticalAlign='middle'>
-                <SignIn />
-            </Grid.Column>
-            <Grid.Column verticalAlign='middle'>
-                <SignUp />
-            </Grid.Column>
-        </Grid>
-        <Divider vertical>Lub</Divider>
-    </Segment>
-}
-
-
-
-export class SignIn extends React.Component {
-    state = {
-        email: '',
-        password: '',
-        error: null
-    };
-
-    handleOnChange = ({ target: { name, value } }) => {
-        this.setState({
-            [name]: value
-        })
-    };
+import {Tab} from 'semantic-ui-react'
 
-    handleOnClick = (event) => {
-        event.preventDefault();
-        this.signIn();
-    };
 
+import {SignIn} from './SignIn'
+import {SignUp} from './SignUp'
 
-    signIn = () => {
-        const { email, password } = this.state;
-        firebase.auth().signInWithEmailAndPassword(email, password)
-            .catch(error => {
-                const errorCode = error.code;
-                if (errorCode == 'auth/user-disabled') {
-                    this.setState({ error: 'Twoje konto zostało zablokowane.' });
-                }
-                else if (errorCode == 'auth/invalid-email') {
-                    this.setState({ error: 'Nieprawidłowy adres e-mail.' });
-                }
-                else if (errorCode == 'auth/user-not-found') {
-                    this.setState({ error: 'Dla tego adresu e-mail konto nie istnieje.' });
-                }
-                else if (errorCode == 'auth/wrong-password') {
-                    this.setState({ error: 'Błędne hasło.' });
-                }
-                else {
-                    this.setState({ error: 'nieznany błąd' });
-                }
-            });
-    };
-
-    render() {
-        const { email, password, error } = this.state;
-
-        return (<Form>
-            <Message
-                icon='key'
-                header='Zaloguj się'
-                content='by używać aplikacji'
-            />
-            <Message
-                icon='x'
-                negative
-                hidden={!error && true}
-                content={error}
-            />
-            <Form.Input
-                required
-                type="email"
-                fluid icon='user'
-                iconPosition='left'
-                placeholder='E-mail'
-                value={email}
-                name='email'
-                onChange={this.handleOnChange}
-            />
-            <Form.Input
-                required
-                fluid
-                icon='lock'
-                iconPosition='left'
-                placeholder='Hasło'
-                type='password'
-                value={password}
-                name='password'
-                onChange={this.handleOnChange}
-            />
-            <Button content='Zaloguj' primary fluid onClick={this.handleOnClick} />
-        </Form>)
-    }
+export function Login() {
+    const panes = [
+        { menuItem: 'Login',
+        render: () => <Tab.Pane content={<SignIn/>} /> },
+        { menuItem: 'Register',
+        render: () => <Tab.Pane content={<SignUp/>} /> }
+      ]
+      
+    return <Tab panes={panes} />
 }
 
-export default class SignUp extends React.Component {
-    state = {
-        name: '',
-        email: '',
-        password: '',
-        error: null
-    };
-
-    handleOnChange = ({ target: { name, value } }) => {
-        this.setState({
-            [name]: value
-        })
-    };
-
-    handleOnClick = (event) => {
-        event.preventDefault();
-        this.signUp();
-    };
-
-    signUp = () => {
-        const { email, password, name } = this.state;
-        firebase.auth().createUserWithEmailAndPassword(email, password)
-            .then(() => {
-                const user = firebase.auth().currentUser
-                
-                
-                if (user) {
-                    console.log(user);
-                    user.updateProfile({
-                        displayName: name,
-                    })
-                        .then(s => console.log(s))
-                        .catch(err => console.log(err))
-                }
-            })
-            .catch(error => {
-                const errorCode = error.code;
-                if (errorCode == 'auth/weak-password') {
-                    this.setState({ error: 'Zbyt słabe hasło. Hasło musi mieć co najmniej 6 znaków.' });
-                }
-                else if (errorCode == 'auth/invalid-email') {
-                    this.setState({ error: 'Nieprawidłowy adres e-mail.' });
-                }
-                else if (errorCode == 'auth/email-already-in-use') {
-                    this.setState({ error: 'Dla tego adresu e-mail konto już istnieje.' });
-                }
-                else if (errorCode == 'auth/operation-not-allowed') {
-                    this.setState({ error: 'Błąd rejestracji po stronie serwera. Przepraszamy.' });
-                }
-                else {
-                    this.setState({ error: 'nieznany błąd' });
-                }
-            });
-    };
-
-    render() {
-        const { email, password, error, name } = this.state;
-        return (
-            <Form>
-                <Message
-                    icon='user plus'
-                    header='Rejestracja'
-                    content='jeśli jeszcze nie masz konta, zarejestruj się.'
-                />
-                <Message
-                    icon='x'
-                    negative
-                    hidden={!error && true}
-                    content={error}
-                />
-                <Form.Input
-                    required
-                    fluid
-                    icon='user'
-                    iconPosition='left'
-                    placeholder='Name'
-                    type="text"
-                    value={name}
-                    name='name'
-                    onChange={this.handleOnChange}
-                />
-                <Form.Input
-                    required
-                    fluid
-                    icon='mail'
-                    iconPosition='left'
-                    placeholder='E-mail'
-                    type="email"
-                    value={email}
-                    name='email'
-                    onChange={this.handleOnChange}
-                />
-                <Form.Input
-                    required
-                    fluid
-                    icon='lock'
-                    iconPosition='left'
-                    placeholder='Hasło'
-                    type='password'
-                    value={password}
-                    name='password'
-                    onChange={this.handleOnChange}
-                />
-                <Button positive content={'Utwórz konto'} fluid onClick={this.handleOnClick} />
-            </Form>
 
 
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/auth/SignIn.js b/src/auth/SignIn.js
new file mode 100644
index 0000000..2279e0a
--- /dev/null
+++ b/src/auth/SignIn.js
@@ -0,0 +1,141 @@
+import React from 'react'
+import { Button,Form, Message} from 'semantic-ui-react'
+import firebase from "firebase";
+
+
+export class SignIn extends React.Component {
+    state = {
+        email: '',
+        password: '',
+        error: null,
+        forgotPassword: false,
+        emailSent: null,
+        resetError: null
+    };
+
+    handleOnChange = ({ target: { name, value } }) => {
+        this.setState({
+            [name]: value
+        })
+    };
+
+    handleOnClick = (event) => {
+        event.preventDefault();
+        this.signIn();
+    };
+
+    handleOnClickForgot = (event) => {
+        event.preventDefault()
+        this.setState((prevState) => ({
+            forgotPassword: !prevState.forgotPassword
+        }))
+    }
+
+    handleOnClickResetPassword = (event) => {
+        event.preventDefault();
+        const auth = firebase.auth();
+        const emailAddress = this.state.email;
+        this.setState({ eror: null })
+        auth.sendPasswordResetEmail(emailAddress).then(() => {
+            this.setState({
+                emailSent: true,
+                resetError: false
+            })
+        }).catch(({ message }) => {
+
+            this.setState({
+                emailSent: false,
+                resetError: message
+            })
+        });
+    }
+
+
+    signIn = () => {
+        const { email, password } = this.state;
+        firebase.auth().signInWithEmailAndPassword(email, password)
+            .catch(({ message }) => {
+
+                this.setState({ error: message });
+            }
+            );
+    };
+
+    render() {
+        const { email, password, error, forgotPassword, emailSent, resetError } = this.state;
+
+        return forgotPassword
+            ? (<Form>
+                <Message
+                    icon='key'
+                    header='Forgot password'
+                    content='enter your e-mail to reset password'
+                />
+                <Message
+                    icon='key'
+                    positive
+                    hidden={emailSent ? false : true}
+                    content='E-mail sent. Check your e-mail inbox to reset the password'
+                />
+                <Message
+                    icon='x'
+                    negative
+                    hidden={!resetError && true}
+                    content={resetError}
+                />
+                <Form.Input
+                    required
+                    type="email"
+                    fluid icon='user'
+                    iconPosition='left'
+                    placeholder='E-mail'
+                    value={email}
+                    name='email'
+                    onChange={this.handleOnChange}
+                />
+                <Button.Group vertical fluid>
+                    <Button content='Reset password' color="orange" fluid onClick={this.handleOnClickResetPassword} />
+                    <Button content='back to login' fluid onClick={this.handleOnClickForgot} />
+                </Button.Group>
+
+            </Form>)
+            : (<Form>
+                <Message
+                    icon='key'
+                    header='Login'
+                    content='to use all features'
+                />
+                <Message
+                    icon='x'
+                    negative
+                    hidden={!error && true}
+                    content={error}
+                />
+                <Form.Input
+                    required
+                    type="email"
+                    fluid icon='user'
+                    iconPosition='left'
+                    placeholder='E-mail'
+                    value={email}
+                    name='email'
+                    onChange={this.handleOnChange}
+                />
+                <Form.Input
+                    required
+                    fluid
+                    icon='lock'
+                    iconPosition='left'
+                    placeholder='Password'
+                    type='password'
+                    value={password}
+                    name='password'
+                    onChange={this.handleOnChange}
+                />
+                <Button.Group vertical fluid>
+                    <Button disabled={(email.trim().length < 1 || password.trim().length < 1)} content='Login' color='orange' onClick={this.handleOnClick} />
+                    <Button content='Forgot password' onClick={this.handleOnClickForgot} />
+                </Button.Group>
+            </Form>)
+    }
+}
diff --git a/src/auth/SignUp.js b/src/auth/SignUp.js
new file mode 100644
index 0000000..2194f7a
--- /dev/null
+++ b/src/auth/SignUp.js
@@ -0,0 +1,100 @@
+import React from 'react'
+import { Button, Form, Message} from 'semantic-ui-react'
+import firebase from "firebase";
+
+
+export class SignUp extends React.Component {
+    state = {
+        name: '',
+        email: '',
+        password: '',
+        error: null
+    };
+
+    handleOnChange = ({ target: { name, value } }) => {
+        this.setState({
+            [name]: value
+        })
+    };
+
+    handleOnClick = (event) => {
+        event.preventDefault();
+        this.signUp();
+    };
+
+    signUp = () => {
+        const { email, password, name } = this.state;
+        firebase.auth().createUserWithEmailAndPassword(email, password)
+            .then(() => {
+                const user = firebase.auth().currentUser
+
+                if (user) {
+                    user.updateProfile({
+                        displayName: name,
+                    })
+                        .then(s => console.log(s))
+                        .catch(err => console.log(err))
+                }
+            })
+            .catch(({ message }) => {
+
+                this.setState({ error: message });
+            }
+            );
+    };
+
+    render() {
+        const { email, password, error, name } = this.state;
+        return (
+            <Form>
+                <Message
+                    icon='user plus'
+                    header='Create an account'
+                    content='register new account'
+                />
+                <Message
+                    icon='x'
+                    negative
+                    hidden={!error && true}
+                    content={error}
+                />
+                <Form.Input
+                    required
+                    fluid
+                    icon='user'
+                    iconPosition='left'
+                    placeholder='Name'
+                    type="text"
+                    value={name}
+                    name='name'
+                    onChange={this.handleOnChange}
+                />
+                <Form.Input
+                    required
+                    fluid
+                    icon='mail'
+                    iconPosition='left'
+                    placeholder='E-mail'
+                    type="email"
+                    value={email}
+                    name='email'
+                    onChange={this.handleOnChange}
+                />
+                <Form.Input
+                    required
+                    fluid
+                    icon='lock'
+                    iconPosition='left'
+                    placeholder='Hasło'
+                    type='password'
+                    value={password}
+                    name='password'
+                    onChange={this.handleOnChange}
+                />
+                <Button disabled={(email.trim().length < 1 || password.trim().length < 1)} positive content={'Create an account'} fluid onClick={this.handleOnClick} />
+            </Form>
+
+
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/images/background.jpg b/src/images/background.jpg
new file mode 100644
index 0000000..a620aa1
Binary files /dev/null and b/src/images/background.jpg differ
diff --git a/src/index.js b/src/index.js
index 50712e6..3fc8c61 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import firebase from "firebase";
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { AuthContext } from './auth/Auth';
 
 const firebaseConfig = {
     apiKey: "AIzaSyCZXhm3zcG9vYBUhqKicIHKrcf1teHS4uM",
@@ -19,7 +20,10 @@ const firebaseConfig = {
   };
   firebase.initializeApp(firebaseConfig);
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+<AuthContext>
+<App />
+</AuthContext>, document.getElementById('root'));
 
 
 
diff --git a/src/input/Input.js b/src/input/Input.js
index db9d5e9..043c198 100644
--- a/src/input/Input.js
+++ b/src/input/Input.js
@@ -4,6 +4,7 @@ import { Input } from 'semantic-ui-react'
 export function ItemSearchInput(props) {
     return (
         <Input
+            icon="search"
             placeholder='Search...'
             value={props.value}
             onChange={props.onChange} />
diff --git a/src/item-details/Item-details.js b/src/item-details/Item-details.js
index 89a8071..c1f1585 100644
--- a/src/item-details/Item-details.js
+++ b/src/item-details/Item-details.js
@@ -1,27 +1,45 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
+import React, { useState, useEffect } from 'react'
+import { Item, Loader, Dimmer } from 'semantic-ui-react'
 import { AddToList } from '../user-list/AddToList'
 
 export default function ItemDetails(props) {
-    const { item } = props.location.state
-    return (
-         <Item.Group relaxed>
+    const [item, setItem] = useState('')
+    const [error, setError] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        fetch(`https://okularnicy-app.firebaseio.com/items/${props.match.params.id}.json`)
+            .then(response => response.json())
+            .then(data => {
+                const currentitem = data
+                currentitem.id = props.match.params.id
+                setItem(currentitem)
+                setLoading(false)
+            })
+            .catch(err => setError(err))
+    }, [])
+
+    return loading
+        ? <Dimmer active inverted>
+            <Loader size='large'>Loading</Loader>
+        </Dimmer>
+        : <Item.Group relaxed>
             <Item>
                 <Item.Image src={item.image ? item.image : null} />
                 <Item.Content>
-                    <Item.Header as='a'>{item.img ? item.img : null} {item.name}</Item.Header>
+                    <Item.Header>{item.img ? item.img : null} {item.name}</Item.Header>
                     <Item.Meta>
                         <span>{item.description}</span>
                     </Item.Meta>
                     <Item.Description>Tip: {item.proTip}</Item.Description>
                     <Item.Extra>
-                        <AddToList itemId={item.id} />
+                        <AddToList item={item} list desc/>
+                        
                     </Item.Extra>
                 </Item.Content>
             </Item>
 
         </Item.Group>
-    
-       
-    )
+
+
 }
\ No newline at end of file
diff --git a/src/item-form/Item-form.js b/src/item-form/Item-form.js
index 48a95cf..ba02745 100644
--- a/src/item-form/Item-form.js
+++ b/src/item-form/Item-form.js
@@ -1,21 +1,33 @@
 import React from 'react';
-import { Form } from 'semantic-ui-react';
+import { Form, Icon } from 'semantic-ui-react';
+import uid from "uid"
+import firebase from 'firebase'
 import "./item-form.css"
 
+const initialState = {
+  name: '',
+  type: "10",
+  weather: ['9'],
+  proTip: '',
+  description: '',
+  img: ''
+}
+
 export class ItemForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       name: '',
-      type: '',
-      weather: '',
+      type: "10",
+      weather: ['9'],
       description: '',
       img: '',
+      proTip: '',
       itemTypes: [],
       weathers: [],
     };
-    
-          
+
+
     this.handleClick = this.handleClick.bind(this);
     this.handleNameChange = this.handleNameChange.bind(this);
     this.handleTypeChange = this.handleTypeChange.bind(this);
@@ -25,76 +37,135 @@ export class ItemForm extends React.Component {
     fetch('./item-types.json')
       .then(data => data.json())
       .then(items => {
-        console.log(items)
-        this.setState({itemTypes: items})
-      }); 
-//       .then((data) => {
-//         return data.json()
-//       }
-// )
-//       .then(items => {console.log(items)})
-      fetch('./weather.json')
-        .then(data => data.json())
-        .then(weather => {
-          console.log(weather)
-          this.setState({weathers: weather})
+        this.setState({ itemTypes: items })
+      });
+    //       .then((data) => {
+    //         return data.json()
+    //       }
+    // )
+    //       .then(items => {console.log(items)})
+    fetch('./weather.json')
+      .then(data => data.json())
+      .then(weather => {
+        this.setState({ weathers: weather })
       });
-        
 
-}
+
+  }
 
 
 
   handleNameChange(event) {
-    this.setState({name: event.target.value});
+    this.setState({ name: event.target.value });
   }
-  handleTypeChange(event){
-    this.setState({type: event.target.value});
+  handleTypeChange(event) {
+    this.setState({ type: event.target.value });
   }
   handleWeatherChange(event) {
-    this.setState({weather: event.target.value});
+    this.setState({ weather: [event.target.value] });
   }
   handleClick(e) {
     this.refs.fileUploader.click();
-}
+  }
+
+  handleInputsChange = ({ target }) => {
+    this.setState({
+      [target.name]: target.value
+    })
+  }
+  handleOnImgChange = ({ target }) => {
+    this.setState({
+      img: target.files[0]
+    })
+  }
+
+  createTask = (newItem) => {
+    fetch(`https://okularnicy-app.firebaseio.com/items.json`, {
+      method: 'POST',
+      body: JSON.stringify(newItem)
+    })
+      .then(() => {
+        // this.props.onAction();
+        this.setState(initialState);
+      })
+      .catch((err) => {
+        alert(err.message)
+      });
+  }
 
+  handleAddClick = (event) => {
+    event.preventDefault()
+    const id = uid()
 
-  
-render() 
+    const newItem = {
+      name: this.state.name,
+      typeId: this.state.type,
+      weather: this.state.weather,
+      description: this.state.description,
+      proTip: this.state.proTip,
+      quantity: 'default',
+      image: null
+    }
+    if (this.state.img) {
+      firebase.storage().ref('img/' + id)
+        .put(this.state.img)
+        .then((res) => {
+          res.ref.getDownloadURL().then(url => {
+            newItem.image = url;
 
-    {
-    const optionsType = this.state.itemTypes.map(item => {
-        return item
+          })
+            .then(() => {
+              this.createTask(newItem)
+            })
         })
-  return (
 
-    <Form className="formGroup">
+    }
+    else {
+      this.createTask(newItem)
+    }
+  }
+
+
+
+  render() {
+    const optionsType = this.state.itemTypes.map(item => {
+      return item
+    })
+    return (
+
+      <Form className="formGroup">
         <Form.Group>
-            <Form.Input label='Name of new item' placeholder='Name' value=''/>
-      
-            <Form.Field label='Weather' control='select'>
-                {this.state.weathers.map(weather => {
-                return <option value={weather.type}>{weather.type}</option>
-                })}
-            </Form.Field>
-
-            <Form.Field label='Type' control='select'>
-                {this.state.itemTypes.map(item => {
-                return <option placeholder='Weather' value={item.value}>{item.value}</option>
-                })}
-            </Form.Field>
+          <Form.Input label='Name of new item' placeholder='Name' value={this.state.name} onChange={this.handleNameChange} />
+
+          <Form.Field label='Weather' control='select' onChange={this.handleWeatherChange}>
+            {this.state.weathers.map(weather => {
+              return <option value={weather.id}>{weather.type}</option>
+            })}
+          </Form.Field>
+
+          <Form.Field label='Type' control='select' onChange={this.handleTypeChange}>
+            {this.state.itemTypes.map(item => {
+              return <option placeholder='Weather' value={item.key}>{item.value}</option>
+            })}
+          </Form.Field>
+
         </Form.Group>
-          <div className="formButtons">   
-            <Form.Button onClick={this.handleClick}>
-              Add picture
+        <Form.Group fluid>
+          <Form.Input name='description' label='Description' placeholder='Description' value={this.state.description} onChange={this.handleInputsChange} />
+          <Form.Input name='proTip' label='Pro tip' placeholder='Pro tip' value={this.state.proTip} onChange={this.handleInputsChange} />
+        </Form.Group>
+        <div className="formButtons">
+          {this.state.img && <Icon color="green" name='check circle outline' />}
+          <Form.Button onClick={this.handleClick}>
+            Add picture
            </Form.Button>
-           <input type="file" id="file" ref="fileUploader" style={{display: "none"}}/>
-            <Form.Button>
-              Add item
+          <input onChange={this.handleOnImgChange} type="file" id="file" ref="fileUploader" style={{ display: "none" }} />
+          <Form.Button disabled={this.state.name.trim().length === 0} onClick={this.handleAddClick}>
+            Add item
             </Form.Button>
-          </div> 
-    </Form>
-  )
-}
+        </div>
+      </Form>
+    )
+  }
 
 }
diff --git a/src/main-list/Main-list.js b/src/main-list/Main-list.js
index bbb2426..fc87035 100644
--- a/src/main-list/Main-list.js
+++ b/src/main-list/Main-list.js
@@ -1,147 +1,131 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Image, List, Segment, Loader, Dimmer } from 'semantic-ui-react';
-
 import SelectType from '../select/Select';
 import { ItemSearchInput } from '../input/Input'
 import { RadioSelect } from '../radio/Radio';
-import { getItems } from '../api/items';
 import { AddToList } from '../user-list/AddToList';
-
 import "./Main-list.css"
 
 
-export default class MainList extends React.Component {
-    state = {
-        typeFilter: 11,
-        search: '',
-        sortBy: '',
-        items: [],
-        loading: true,
-        error: null
-    }
-
-    componentDidMount() {
-        this.fetchItems()
-    }
+function MainList() {
+    const [items, setItems] = useState([]);
+    const [type, setType] = useState("");
+    const [search, setSearch] = useState("");
+    const [sortBy, setSortBy] = useState("");
+    const [weather, setWeather] = useState("all");
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        const filtersChanged = prevState.typeFilter !== this.state.typeFilter;
-        const searchChanged = prevState.search !== this.state.search;
-        const sortByChanged = prevState.sortBy !== this.state.sortBy;
-        if (
-            (
-                filtersChanged || searchChanged || sortByChanged
-            ) && !this.state.isLoading
-        ) {
-            this.fetchItems();
-        }
-    }
 
-    handleSearchChange = (e) => {
-        this.setState({
-            search: e.target.value.toLowerCase(),
-        });
+    const handleChange = ({ target }) => {
+        setSearch(target.value);
+    };
+    const handleTypeChange = (type) => {
+        setType(type);
+    };
+    const handleRadioChange = (weather) => {
+        setWeather(weather)
     }
 
-    handleTypeChange = (e, data) => {
-        this.setState({
-            typeFilter: data.value,
-        })
-    }
-
-    handleRadioChange = (e, data) => {
-        this.setState({
-            sortBy: data.value,
-        })
-    }
-
-    fetchItems() {
-        this.setState({
-            loading: true,
-            error: '',
-        }, () => {
-            getItems({
-                search: this.state.search,
-                typeFilter: this.state.typeFilter,
-                sortBy: this.state.sortBy,
-            })
-                .then(data => {
-                    this.setState({
-                        items: data,
-                        loading: false,
+    useEffect(() => {
+        fetch('https://okularnicy-app.firebaseio.com/items.json')
+            .then(response => response.json())
+            .then(data => {
+                if (data) {
+                    const keys = Object.keys(data);
+                    const formattedData = keys.map(key => {
+                        return {
+                            id: key,
+                            ...data[key]
+                        }
                     });
-                })
-                .catch((error) => {
-                    this.setState({
-                        error: error.toString(),
-                    });
-                });
-        });
-    }
+                    setItems(formattedData)
+                    setLoading(false)
 
+                }
+            })
 
-    render() {
-        if (this.state.loading) {
-            return (
-                <Segment>
-                    <Dimmer active inverted>
-                        <Loader size='large'>Loading</Loader>
-                    </Dimmer>
-                    <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />
-                </Segment>)
-        }
-        if (this.state.error) {
-            return <h1>"An error occured"</h1>
-        }
-        return <>
-            <h1> What you need ? ;)</h1>
+            .catch(err => setError(err))
+    }, [])
 
-            <Segment.Group horizontal className="filters">
-                <Segment className="filter">
-                    <ItemSearchInput
-                        value={this.state.search}
-                        onChange={this.handleSearchChange} />
-                </Segment>
-                <Segment className="filter">
-                    <RadioSelect
-                        value={this.state.sortBy}
-                        onChange={this.handleRadioChange}
-                    />
-                </Segment>
-                <Segment className="filter">
-                    <SelectType
-                        value={this.state.typeFilter}
-                        onChange={this.handleTypeChange} />
-                </Segment>
-            </Segment.Group>
-            <List divided>
-                {
-                    this.state.items.map(item => (
-                        <List.Item key={item.id}>
-                            <List.Content floated='right'>
-                                <AddToList itemId={item.id} iconic={true} />
-                            </List.Content>
-                            <List.Content>
-                                <Link to={{
-                                    pathname: `/items/${item.id}`,
-                                    state: {
-                                        item
-                                    }
-                                }}>
-                                    <List.Header>{item.img}{item.name}</List.Header>
-                                    <List.Description>{item.description}</List.Description>
-                                </Link>
-                            </List.Content>
-                        </List.Item>
-                    ))
-                }
-                <List.Item>
-                    <Link to="/item-add">
-                        <Button fluid>Missed?</Button>
-                    </Link>
+    const list = (
+        items
+            .filter(item => {
+                return weather==='all' ? item : item.weather.includes(weather)
+            })
+            .filter(function (item) {
+                // return type.length > 0 ? type.includes(item.typeId) : item //for multiselect
+                return type ? item.typeId === type : item //for single select 
+            })
+            .filter(item => {
+                const itemName = item.name.toLowerCase();
+                return (
+                    itemName.includes(search)
+                );
+            })
+            .map(item => (
+                <List.Item key={item.id}>
+                    <List.Content floated='right'>
+                        <AddToList item={item} iconic={true} desc/>
+                    </List.Content>
+                    <List.Content>
+                        <Link to={{
+                            pathname: `/items/${item.id}`,
+                            state: {
+                                item
+                            }
+                        }}>
+                            <List.Header>{item.img}{item.name}</List.Header>
+                            <List.Description>{item.description}</List.Description>
+                        </Link>
+                    </List.Content>
                 </List.Item>
-            </List>
-        </>
+            ))
+    )
+
+    if (loading) {
+        return (
+            <Segment>
+                <Dimmer active inverted>
+                    <Loader size='large'>Loading</Loader>
+                </Dimmer>
+                <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />
+            </Segment>)
     }
-}
\ No newline at end of file
+    if (error) {
+        return <h1>"An error occured"</h1>
+    }
+    return <>
+        <h1> What you need ? ;)</h1>
+        <Segment.Group horizontal className="filters">
+            <Segment className="filter">
+                <ItemSearchInput
+                    value={search}
+                    onChange={handleChange} />
+            </Segment>
+            <Segment className="filter">
+                <RadioSelect
+                    value={weather}
+                    onChangeRadio={handleRadioChange}
+                />
+            </Segment>
+            <Segment className="filter">
+                <SelectType
+                    value={type}
+                    handleChangeType={handleTypeChange}
+                />
+            </Segment>
+        </Segment.Group>
+        <List divided>
+            {list}
+            <List.Item>
+                <Link to="/item-add">
+                    <Button fluid>Missing something? Add new item</Button>
+                </Link>
+            </List.Item>
+        </List>
+    </>
+}
+export default MainList;
+
diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js
index 8301df7..6f36d53 100644
--- a/src/navigation/Navigation.js
+++ b/src/navigation/Navigation.js
@@ -1,56 +1,64 @@
-import React, { Component } from 'react'
-import { Icon, Menu, Button } from 'semantic-ui-react'
+import React, { useContext, useState } from 'react'
+import { Icon, Menu, Button, Image, Label } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 import firebase from 'firebase'
+import { MyContext } from '../auth/Auth';
 
-export default class Navigation extends Component {
-  state = {
-    activeItem: '',
-  }
+const Navigation = () => {
 
-  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
-  handleLogout = () => firebase.auth().signOut()
+  const [activeItem, setActiveItem] = useState("")
+  const context = useContext(MyContext)
 
-  render() {
-    const { activeItem } = this.state
+  const handleItemClick = (e, { name }) => setActiveItem(name)
+  const handleLogout = () => firebase.auth().signOut()
 
-    return (
-      <Menu icon='labeled' size='mini' fixed='top'>
-        <Link to="/user-list">
-          <Menu.Item
-            name='list'
-            active={activeItem === 'list'}
-            onClick={this.handleItemClick}
-          >
-            <Icon name='list ul' />
-            My list
+  return (
+    <Menu icon='labeled' size='mini' fixed='top'>
+      <Link to="/user-list">
+        <Menu.Item
+          name='list'
+          active={activeItem === 'list'}
+          onClick={handleItemClick}
+        >
+          <Icon name='list ul' />
+          {context.state.userList.length > 0 && <Label color='teal' corner size="mini">
+            {context.state.userList.length}
+          </Label>}
+          My list
         </Menu.Item>
-        </Link> 
-        <Link to="/">
+      </Link>
+      <Link to="/">
+        <Menu.Item
+          name='home'
+          active={activeItem === 'home'}
+          onClick={handleItemClick}
+        >
+          <Icon name='home' />
+          Home
+        </Menu.Item>
+      </Link>
+
+      {context.state.user && <Menu.Menu position='right'>
+        <Link to={'/userProfile'}>
           <Menu.Item
-            name='home'
-            active={activeItem === 'home'}
-            onClick={this.handleItemClick}
+            name='user'
+            active={activeItem === 'user'}
+            onClick={handleItemClick}
           >
-            <Icon name='home' />
-            Home
-        </Menu.Item>
+            <Image
+              size="mini"
+              avatar
+              src={context.state.user.photoURL || '/assets/userPlaceholder.jpg'} />
+          </Menu.Item>
+
         </Link>
+        <Menu.Item>
+          <Button onClick={handleLogout} content="Logout" />
+        </Menu.Item>
+      </Menu.Menu>}
+    </Menu>
 
-        <Menu.Menu position='right'>
-          <Link to={'/userProfile'}>
-            <Menu.Item
-              name='user'
-              onClick={this.handleclick}
-            >
-              <Icon name='user circle' />
-              Your profile
-            </Menu.Item>
-          </Link>
-          <Button onClick={this.handleLogout} content="Logout"/>
-        </Menu.Menu>
-      </Menu>
-
-    )
-  }
+  )
 }
+
+export default Navigation
\ No newline at end of file
diff --git a/src/radio/Radio.js b/src/radio/Radio.js
index 17e8443..4490b5e 100644
--- a/src/radio/Radio.js
+++ b/src/radio/Radio.js
@@ -3,36 +3,49 @@ import { Form, Radio } from 'semantic-ui-react'
 import './Radio.css'
 
 export function RadioSelect(props) {
+
+    const onChangeRadio = (e, { value }) => {
+        props.onChangeRadio(value)
+    }
+
     return (
         <Form.Field className="radio">
+            <Radio className="radioItem"
+                label='All'
+                name='radioGroup'
+                value={"all"}
+                checked={props.value === "all"}
+                onChange={onChangeRadio}
+            />
             <Radio className="radioItem"
                 label='Sunny'
                 name='radioGroup'
                 value={1}
                 checked={props.value === 1}
-                onChange={props.onChange}
+                onChange={onChangeRadio}
             />
             <Radio className="radioItem"
                 label='Cold'
                 name='radioGroup'
                 value={2}
                 checked={props.value === 2}
-                onChange={props.onChange}
+                onChange={onChangeRadio}
             />
             <Radio className="radioItem"
                 label='Windy'
                 name='radioGroup'
                 value={3}
                 checked={props.value === 3}
-                onChange={props.onChange}
+                onChange={onChangeRadio}
             />
             <Radio className="radioItem"
                 label='Stormy'
                 name='radioGroup'
                 value={4}
                 checked={props.value === 4}
-                onChange={props.onChange}
+                onChange={onChangeRadio}
             />
+
         </Form.Field>
     )
 }
diff --git a/src/select/Select.js b/src/select/Select.js
index 471a293..d5a4329 100644
--- a/src/select/Select.js
+++ b/src/select/Select.js
@@ -1,13 +1,9 @@
 import React from 'react'
-import { Select } from 'semantic-ui-react'
+import { Select, Dropdown } from 'semantic-ui-react'
 
 const typeOptions =
     [
-        {
-            "key": "11",
-            "value": 11,
-            "text": "all"
-        },
+
         {
             "key": "1",
             "value": 1,
@@ -61,7 +57,11 @@ const typeOptions =
     ]
 
 function SelectType(props) {
-    return (<Select placeholder='Type' onChange={props.onChange} options={typeOptions} />)
+    const handleChange = (e, { value }) => {
+        props.handleChangeType(value)
+    }
+
+    return <Dropdown fluid selection placeholder='Type' clearable value={props.value} onChange={handleChange} options={typeOptions} selection />
 }
 
 export default SelectType
diff --git a/src/user-list/AddToList.js b/src/user-list/AddToList.js
index ea61418..1369fea 100644
--- a/src/user-list/AddToList.js
+++ b/src/user-list/AddToList.js
@@ -1,41 +1,40 @@
 import React, { useContext } from 'react';
-import { Button, Icon } from 'semantic-ui-react'
+import { Button, Icon, Label } from 'semantic-ui-react'
 import { MyContext } from '../auth/Auth'
 
 export function AddToList(props) {
     const userList = useContext(MyContext)
-    function findItem(itemId) { return (userList.state.userList.indexOf(itemId)) }
-    if (props.iconic) {
-        return (
-            <>
-                {(findItem(props.itemId) > -1) ? (<Button itemId={props.itemId}  size="large" color='red' icon floated='right' onClick={(e) => userList.removeFromList(props.itemId)}>
-                    <Icon name='minus' />
-                </Button>
-                )
-                    : (
-                        <Button itemId={props.itemId} color='green' floated='right' size={"large"} icon onClick={(e) => userList.addToList(props.itemId)}>
-                            <Icon name='plus' />
-                        </Button>)
-                }
-            </>
-        )
-    }
+    function findItem(item) { return (userList.state.userList.map(item => item.id).indexOf(item.id)) }
+    const isPacked = () => userList.state.userList[findItem(props.item)].done
 
-    return (
-        <>
-            {(findItem(props.itemId) > -1) ? (<Button itemId={props.itemId} coSr='red' floated='right' onClick={(e) => userList.removeFromList(props.itemId)}>
-                Remove<Icon name='right minus' />
+    return <> {(findItem(props.item) > -1)
+        ? <>
+            <Button size="large" color='red' icon floated='right' onClick={() => userList.removeFromList(props.item.id)}>
+                <Icon name='minus' />
             </Button>
-            )
-                : (
-                    <Button itemId={props.itemId} color='green' floated='right' onClick={(e) => userList.addToList(props.itemId)}>
-                        Add<Icon name='right plus' />
-                    </Button>)
-            }
 
+            {props.desc &&
+                (isPacked()
+                    ? <Label color='green' horizontal>
+                        Packed
+              </Label>
+                    
+                    : <Label color='gray' horizontal>
+                    To pack
+          </Label>
+                )
+            }
+            {props.list &&
+                <Button size="large" color={isPacked() && "orange"} icon floated='right' onClick={() => userList.markAsDone(props.item.id)}>
+                    <Icon color={isPacked() && "green"} name='check' />
+                </Button>}
+        </>
+        : <Button color='green' floated='right' size={"large"} icon onClick={() => userList.addToList(props.item)}>
+            <Icon name='plus' />
+        </Button>
+    }
+    </>
 
 
-        </>
-    )
 }
 
diff --git a/src/user-list/User-list.js b/src/user-list/User-list.js
index 4d6130c..c123ac1 100644
--- a/src/user-list/User-list.js
+++ b/src/user-list/User-list.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, List, Segment, Loader, Dimmer } from 'semantic-ui-react';
+import { Image, List, Segment, Loader, Dimmer, Button } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { AddToList } from '../user-list/AddToList';
 import { MyContext } from '../auth/Auth'
@@ -65,28 +65,32 @@ export default class UserList extends React.Component {
 
         return <>
             <h1> Things to pack</h1>
-            <List divided>
+            {this.context.state.userList.length < 1
+            ? <> <h3>Nothing to pack</h3> <Link to='/' ><Button color="orange" fluid content="See list of items"/></Link></>
+            :<List divided>
                 {
-                    this.filterItems().map(item =>
+                    this.context.state.userList.map(item =>
                         <List.Item key={item.id}>
+                            < List.Content floated='right'>
+                                <AddToList item={item} iconic={true} list desc />
+                            </List.Content>
                             <Link to={{
                                 pathname: `/items/${item.id}`,
                                 state: {
                                     item
                                 }
                             }}>
-                                <List.Content>
-                                    <List.Header>{item.img} {item.name}</List.Header>
+
+                                <List.Content className={item.done && 'item-done'}>
+                                    <List.Header >{item.img} {item.name}</List.Header>
                                     <List.Description>{item.description}</List.Description>
                                 </List.Content>
                             </Link>
-                            <List.Content floated='right'>
-                                <AddToList itemId={item.id} iconic={true} />
-                            </List.Content>
+
                         </List.Item>
                     )
                 }
-            </List>
+            </List>}
         </>
     }
 }
\ No newline at end of file
diff --git a/src/user-profile/User-profile.js b/src/user-profile/User-profile.js
index 5441eb4..3ed9f53 100644
--- a/src/user-profile/User-profile.js
+++ b/src/user-profile/User-profile.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import { Icon, Button, Header, Image, Grid, Container, Form } from 'semantic-ui-react'
+import { Card, Segment, Icon, Button, Header, Image, Grid, Container, Form, Progress, Label, Message } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 import firebase from 'firebase'
+import 'firebase/storage';
 
 import { MyContext } from '../auth/Auth'
 
@@ -12,9 +13,16 @@ export default class UserProfile extends React.Component {
         isLoaded: false,
         editPhoto: false,
         img: null,
-        refresh: false
+        uploadProgress: null,
+        uploadError: null,
+        uploadSuccess: null,
+        uploadMessage: "",
+        visible: false
     };
 
+    handleDismiss = () => {
+        this.setState({ visible: false })
+    }
 
     handleclick = () => this.setState(prevState => ({ editPhoto: !prevState.editPhoto }))
 
@@ -26,34 +34,75 @@ export default class UserProfile extends React.Component {
 
     handleSave = () => {
         const userId = firebase.auth().currentUser.uid;
-        firebase.storage().ref('users/' + userId)
-            .put(this.state.img)
-            .then((res) => {
-                res.ref.getDownloadURL().then(url => {
-                    this.context.state.user.updateProfile({
-                        photoURL: url
-                    }).then(() => this.setState((prevState) => ({
-                        refresh: !prevState.refresh
-                    }))).catch(error => console.log(error))
-                })
+        const uploadTask = firebase.storage().ref('users/' + userId).put(this.state.img, {
+            contentType: 'image/jpeg'
+        });
+        uploadTask.on('state_changed', (snapshot) => {
+            // Observe state change events such as progress, pause, and resume
+            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+            let uploadProgress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+            this.setState({
+                uploadProgress,
+                uploadSuccess: false,
+                uploadMessage: "Uploading photo...",
+                visible: true,
+            })
+        }, (uploadError) => {
+            this.setState({
+                uploadError,
+                uploadMessage: "An error occured, please try again.",
+                uploadProgress: null
 
             })
+        }, () => {
+            uploadTask.snapshot.ref.getDownloadURL().then(url => {
+                this.context.state.user.updateProfile({
+                    photoURL: url
+                }).then(() => {
+                    this.setState((prevState) => ({
+                        // refresh: !prevState.refresh,
+                        uploadSuccess: true,
+                        uploadMessage: "Photo updated successfully",
+                        uploadProgress: !prevState.uploadProgress,
+                        editPhoto: false
+                    }))
+                    this.context.refresh()
+                })
+            });
+        });
+
     }
 
     render() {
-        const { editPhoto } = this.state;
+        const { editPhoto, img, uploadError, uploadProgress, uploadSuccess, visible, uploadMessage } = this.state;
         return < Container>
             <Header>User Panel </Header>
             <Grid columns={2} relaxed='very' stackable>
                 <Grid.Column>
-                    <Image wrapped size='medium' src={this.context.state.user.photoURL || '/assets/userPlaceholder.jpg'} />
-
-                    {editPhoto
-                        ? <Button negative onClick={this.handleclick} compact floated='right'>Change photo</Button>
-                        : (<Form>
-                            <input type='file' onChange={this.handleOnImgChange} />
-                            <Button compact icon='save' content='Zapisz' positive type='submit' onClick={this.handleSave} />
-                        </Form>)}
+                    <Card>
+                        <Message
+                            positive={uploadSuccess}
+                            hidden={!visible}
+                            attached="top"
+                            content={<>{uploadMessage}
+                                {uploadProgress && <Progress size="tiny" color='blue' percent={uploadProgress} success={uploadSuccess} error={uploadError} />}
+                            </>
+                            }
+                            onDismiss={this.handleDismiss} />
+                        <Image centered wrapped size='medium' src={this.context.state.user.photoURL || '/assets/userPlaceholder.jpg'} />
+                        {!editPhoto
+                            ? <Button color='orange' onClick={this.handleclick}>Change photo</Button>
+                            : <Form>
+                                <Button.Group fluid>
+                                    <label className='fileContainer'>
+                                        <Button disabled={uploadProgress} content="Browse" icon="image" />
+                                        <input type='file' onChange={this.handleOnImgChange} />
+                                    </label>
+                                    <Button disabled={!img || uploadProgress} icon='save' content='Save' positive type='submit' onClick={this.handleSave} />
+                                    <Button icon='cancel' type='submit' onClick={this.handleclick} />
+                                </Button.Group>
+                            </Form>}
+                    </Card>
                 </Grid.Column>
                 <Grid.Column>
                     <Header>Hello {this.context.state.user.displayName || 'stranger'}!</Header>