diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js
index 4920b3c867681fa10dab3300ae812f8242120670..8904374fc248ab5e945c3a7c4505e95d9dac133e 100644
--- a/digital-course-file/src/user/Hero.js
+++ b/digital-course-file/src/user/Hero.js
@@ -1,44 +1,43 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import AddFolder from './AddFolder'
+import AddFile from './AddFile'
 import { Container, Button, Navbar, Nav } from 'react-bootstrap'
 import { useFolder } from '.././hooks/useFolder'
 import Folder from './Folder'
 import FolderNav from './FolderNav'
 import Deffolders from './Deffolders'
-import { useParams } from 'react-router-dom'
-import copyright from './copyright'
+import { useParams,useLocation } from 'react-router-dom'
+import copyright from './copyright' 
 import { Link } from 'react-router-dom'
-import Loader from 'react-loader-spinner'
+import File from 'C:/Users/Dell/Desktop/try/digital-course-file/digital-course-file/src/user/File'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import firebase from "../fire";
 
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
-  const { folder, childFolders } = useFolder(folderId)
-
-  if (!folder) {
-    return (
-      <>
-        <div className='centered'>
-          <Loader
-            type='Puff'
-            color='#00BFFF'
-            height={100}
-            width={100}
-            timeout={3000} //3 secs
-          />
-        </div>
-      </>
-    )
-  }
-
+  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>
+
+          <button className='logoutbutton' onClick={handleLogout}>
+            Logout
+          </button>
+        </nav>
+      </section>
+
       <Container fluid>
         <div className='d-flex align-items-center'>
           <FolderNav currentFolder={folder} />
           <AddFolder currentFolder={folder} />
-          {childFolders.length == 0 && folder.parentId == null && folder.id!=null && (
-            <Deffolders currentFolder={folder} />
-          )}
+          <AddFile currentFolder={folder}/>
+          {childFolders.length == 0 && <Deffolders currentFolder={folder} />}
         </div>
 
         {childFolders.length > 0 && (
@@ -54,7 +53,29 @@ 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>
     </>
   )
 }