diff --git a/digital-course-file/src/hooks/useFolder.js b/digital-course-file/src/hooks/useFolder.js
index ab56f941ee81f1ac37f20b79a2d008d514a592cd..b4c921b402a0b8860925e13712a497de1d53b8ba 100644
--- a/digital-course-file/src/hooks/useFolder.js
+++ b/digital-course-file/src/hooks/useFolder.js
@@ -1,6 +1,7 @@
 import { useState,useReducer, useEffect } from "react";
 import { database } from '../fire.js'
 import firebase from 'firebase'
+import Loader from "react-loader-spinner";
 
 export const ROOT_FOLDER = {name: 'Root', id : null , path : [] , parents : []};
 
@@ -12,7 +13,6 @@ export function useFolder( folderId = null, folder= null) {
         SELECT_FOLDER : 'select-folder',
         UPDATE_FOLDER : 'update-folder',
         SET_CHILD_FOLDERS : 'set_child_folders',
-        SET_CHILD_FILES: "set-child-files",
     }
 
     function reducer( state, { type,payload } ){
@@ -36,12 +36,7 @@ export function useFolder( folderId = null, folder= null) {
                 return{
                     ...state,
                     childFolders : payload.childFolders,
-                };
-            case ACTIONS.SET_CHILD_FILES:
-                return {
-                    ...state,
-                    childFiles: payload.childFiles,
-                }; 
+                };    
 
             default:
                 return state;
@@ -89,6 +84,15 @@ export function useFolder( folderId = null, folder= null) {
 
     
     useEffect( () => {
+        if (!firebase.auth().currentUser) {
+        return <><div className='centered'><Loader
+        type="Puff"
+        color="#00BFFF"
+        height={100}
+        width={100}
+        timeout={3000} //3 secs
+      /></div></>
+    }
         return database.folders
             .where("parentId", "==" ,folderId)
             .where("userId","==", firebase.auth().currentUser.uid)
@@ -100,18 +104,6 @@ export function useFolder( folderId = null, folder= null) {
                 })
             })
     },[folderId])
-    useEffect(() => {
-        return (
-          database.files
-            .where("folderId", "==", folderId)
-            .where("userId", "==", firebase.auth().currentUser.uid)
-            .onSnapshot(snapshot => {
-              dispatch({
-                type: ACTIONS.SET_CHILD_FILES,
-                payload: { childFiles: snapshot.docs.map(database.formatDoc) },
-              })
-            })
-        )
-      }, [folderId])
+
     return state;
-}
+}
\ No newline at end of file
diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js
index a8e9a37c96de0d8c9ae410785538f7bd2e054a4e..478c6746dc297d7b9f73e766713510e72acc7519 100644
--- a/digital-course-file/src/user/Hero.js
+++ b/digital-course-file/src/user/Hero.js
@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import AddFolder from './AddFolder'
-import AddFile from './AddFile'
 import { Container, Button, Navbar, Nav } from 'react-bootstrap'
 import { ROOT_FOLDER, useFolder } from '.././hooks/useFolder'
 import Folder from './Folder'
@@ -16,23 +15,27 @@ import firebase from "../fire";
 
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
-  const { state = {} } = useLocation()
-  const { folder, childFolders, childFiles } = useFolder(folderId, state.folder)
-  
-  return (
-    <>
-      <section className='hero'>
-        <nav>
-          <Navbar.Brand as={Link} to='/'>
-            <h2>Course File System</h2>
-          </Navbar.Brand>
+  const { folder, childFolders } = useFolder(folderId)
+  console.log(folder);
 
-          <button className='logoutbutton' onClick={handleLogout}>
-            Logout
-          </button>
-        </nav>
-      </section>
+  if (!folder) {
+    return (
+      <>
+        <div className='centered'>
+          <Loader
+            type='Puff'
+            color='#00BFFF'
+            height={100}
+            width={100}
+            timeout={3000} //3 secs
+          />
+        </div>
+      </>
+    )
+  }
 
+  return (
+    <>
       <Container fluid>
         <div className='d-flex align-items-center'>
           <FolderNav currentFolder={folder} />
@@ -56,29 +59,7 @@ const Hero = ({ handleLogout }) => {
             ))}
           </div>
         )}
-         {childFolders.length > 0 && childFiles.length > 0 && <hr />}
-        {childFiles.length > 0 && (
-          <div className="d-flex flex-wrap">
-            {childFiles.map(childFile => (
-              <div
-                key={childFile.id}
-                style={{ maxWidth: "250px" }}
-                className="p-2"
-              >
-                <File file={childFile} />
-                
-              </div>
-            ))}
-          </div>
-        )}
       </Container>
-      <Navbar fixed='bottom' variant='light' bg='light'>
-        <Container className='ml-sm-2'>
-          <Nav.Link eventKey={2} href='copyright'>
-            &copy; Digital Course File Group 2
-          </Nav.Link>
-        </Container>
-      </Navbar>
     </>
   )
 }