diff --git a/.netlify/state.json b/.netlify/state.json
new file mode 100644
index 0000000..d2e973e
--- /dev/null
+++ b/.netlify/state.json
@@ -0,0 +1,3 @@
+{
+	"siteId": "5ce664ae-3760-4b39-aee5-4af8fdea2e85"
+}
\ No newline at end of file
diff --git a/netlify.toml b/netlify.toml
index 106cf69..59575fe 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,7 +1,6 @@
 # example netlify.toml
 [build]
   command = "yarn build"
-  functions = "functions"
   publish = "build"
 
   ## Uncomment to use this redirect for Single Page Applications like create-react-app. 
diff --git a/src/pages/AccountRoot.jsx b/src/pages/AccountRoot.jsx
index ab870c0..b483372 100644
--- a/src/pages/AccountRoot.jsx
+++ b/src/pages/AccountRoot.jsx
@@ -8,7 +8,7 @@ class Account extends React.Component {
         return (
             <div className={styles.container}>
                 <div className={styles.topbar}>
-                    <div className={styles.breadcrumb}>FairDrive / </div>
+                    <div className={styles.breadcrumb}>SwarmDrive / </div>
                     {/* <div className={styles.breadcrumbpath}>
         by Fair Data Society
         </div> */}
@@ -16,17 +16,21 @@ class Account extends React.Component {
                 </div>
                 <div className={styles.innercontainer}>
                     <div className={styles.register}>
-                        <div className={styles.breadcrumbpath}>Unlock</div>
-                        <input type="text" placeholder="Email"></input>
+                        <div className={styles.breadcrumbpath}>Login</div>
+                        <input type="text" placeholder="Handle"></input>
                         <input type="password" placeholder="Password"></input>
-                        <div className={styles.button}>Unlock</div>
+                        <NavLink to="/f">
+                            <div className={styles.button}>Unlock</div>
+                        </NavLink>
                     </div>
                     <div className={styles.register}>
-                        <div className={styles.breadcrumbpath}>Register</div>
-                        <input type="text" placeholder="Email"></input>
+                        <NavLink to="/register" className={styles.createnew}>
+                            <div>Register New SwarmDrive</div>
+                            {/* <input type="text" placeholder="Email"></input>
                         <input type="password" placeholder="Password"></input>
                         <input type="password" placeholder="Password again"></input>
-                        <div className={styles.button}>Register</div>
+                        <div className={styles.button}>Register</div> */}
+                        </NavLink>
                     </div>
                 </div>
             </div>
diff --git a/src/pages/Directory.jsx b/src/pages/Directory.jsx
index c6a7876..a1b79c6 100644
--- a/src/pages/Directory.jsx
+++ b/src/pages/Directory.jsx
@@ -16,10 +16,10 @@ class Directory extends React.Component {
         <div className={styles.topbar}>
           <div className={styles.breadcrumb}> {this.props.directory}</div>
 
-          <NavLink to="/">
+          <NavLink to="/f">
             <div className={styles.breadcrumbpath}>
               Back to
-              FairDrive /
+              SwarmDrive /
         </div>
           </NavLink>
 
diff --git a/src/pages/Files.jsx b/src/pages/Files.jsx
index 9e4f4b2..1bf5434 100644
--- a/src/pages/Files.jsx
+++ b/src/pages/Files.jsx
@@ -12,25 +12,29 @@ import {
 class Files extends React.Component {
   render() {
     return (
-  <div className={styles.container}>
-    <div className={styles.topbar}>
-      <div className={styles.breadcrumb}>FairDrive / </div>
-    </div>
-    <div className={styles.innercontainer}>
-     
-            {this.props.directories.map(item => (
-               <NavLink to={"d/" + item}>
-                 <div className={styles.directoryrow}>
-                 <div className={styles.icons8folder}></div>
-                 <RowFile name={item} />
-                 </div>
-               </NavLink>
-              
-            ))}
-    </div> 
-    </div>
+      <div className={styles.container}>
+        <div className={styles.topbar}>
+          <div className={styles.breadcrumb}>SwarmDrive / </div>
+          <div className={styles.breadcrumbpath}>
+            ~122GB - 11.23 SWT
+        </div>
+        </div>
+        <div className={styles.innercontainer}>
+
+          {this.props.directories.map(item => (
+            <NavLink to={"d/" + item}>
+              <div className={styles.directoryrow}>
+                <div className={styles.icons8folder}></div>
+                <RowFile name={item} />
+              </div>
+            </NavLink>
+
+          ))}
+        </div>
+      </div>
     );
-  }}
+  }
+}
 
 
 const mapStateToProps = createStructuredSelector({
diff --git a/src/pages/index.js b/src/pages/index.js
index 234b011..432d6f8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,7 +3,7 @@ import Directory from "./Directory";
 import Account from "./AccountRoot";
 
 export default [
-  { path: "/", exact: true, component: Files },
-  { path: "/account", exact: true, component: Account },
+  { path: "/", exact: true, component: Account },
+  { path: "/f", exact: true, component: Files },
   { path: "/d/:directory", component: Directory }
 ];
diff --git a/src/services/filebrowser/reducer.js b/src/services/filebrowser/reducer.js
index c783481..0be2c4d 100644
--- a/src/services/filebrowser/reducer.js
+++ b/src/services/filebrowser/reducer.js
@@ -4,13 +4,16 @@ import { assertAction } from "../utilities";
 // Service > user
 const initialState = {
   directories: [
+    "DappData", 
+
   "Documents", 
   "Images", 
+    "KeyData", 
+      "Magnet", 
+
+    "Movies", 
+
   "Music", 
-  "Movies", 
-  "DappData", 
-  "KeyData", 
-  "Magnet", 
   "Photos"
 ]
 };
diff --git a/src/styles.module.css b/src/styles.module.css
index 59e09d6..86eceec 100644
--- a/src/styles.module.css
+++ b/src/styles.module.css
@@ -13,10 +13,10 @@
 }
 
 .baseShadow {
-  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
-  -o-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.8);
+  -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.8);
+  -moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.8);
+  -o-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.8);
 }
 
 a {
@@ -111,6 +111,7 @@ a {
   .breadcrumbpath {
     composes: bodyBold;
     color: #cecece !important;
+    line-height: 36px;
   }
 
   .innercontainer {
@@ -119,6 +120,12 @@ a {
     background-color: var(--bg-dark);
   }
 
+  .logincontainer {
+    margin-top: 140px;
+    overflow: scroll;
+    background-color: var(--bg-dark);
+  }
+
   .register {
     display: flex;
     flex-direction: column;
@@ -127,6 +134,15 @@ a {
     width: 100vw;
   }
 
+  .createnew {
+    composes: bodyBold;
+    color: var(--fds-dark) !important;
+  }
+
+  .createnew :hover {
+    color: var(--fds-blue) !important;
+  }
+
   .innercontainer input {
     font-family: Montserrat;
     font-size: 14px;
@@ -141,6 +157,12 @@ a {
     border-top: transparent !important;
     border-left: transparent !important;
     border-right: transparent !important;
+    line-height: 26px;
+  }
+
+  .innercontainer input:focus {
+    outline: none;
+    border-bottom: 1px solid var(--fds-blue);
   }
 
   .button {
@@ -158,10 +180,13 @@ a {
     max-height: 62px;
     margin-top: 20px;
     border: 1px solid var(--fds-blue);
+    margin-top: 50px;
   }
 
-  .innercontainer input:focus {
-    outline: none;
+  .button :hover {
+    border: 1px solid var(--fds-yellow);
+    color: var(--fds-yellow);
+
   }
 
   .rowfile {
@@ -186,8 +211,8 @@ a {
     align-items: center;
     justify-items: flex-start;
     padding: 20px 40px 20px 40px;
-    background-color: var(--bg-shade);
-    border-bottom: 1px solid var(--border-line);
+    background-color: var(--bg-dark);
+    border-bottom: 1px solid var(--bg-shade);
   }
 
   .flaticon::before {