diff --git a/client/pages/filespage.js b/client/pages/filespage.js
index f47a565e..5cd042d4 100644
--- a/client/pages/filespage.js
+++ b/client/pages/filespage.js
@@ -40,7 +40,7 @@ export class FilesPage extends React.Component {
             files: [],
             search_loading: false,
             metadata: null,
-            frequents: [],
+            frequents: null,
             page_number: PAGE_NUMBER_INIT,
             loading: true
         };
diff --git a/client/pages/filespage/frequently_access.js b/client/pages/filespage/frequently_access.js
index d1467d1c..fc4dd23f 100644
--- a/client/pages/filespage/frequently_access.js
+++ b/client/pages/filespage/frequently_access.js
@@ -14,31 +14,33 @@ export class FrequentlyAccess extends React.Component {
 
     render(){
         return (
-            <ReactCSSTransitionGroup transitionName="frequent-access" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={300}>
-              <div className="component_frequently-access">
-                <Container>
-                  <span className="caption">Quick Access</span>
-                  <div className="frequent_wrapper">
-                    {
-                        this.props.files.map(function(path, index){
-                            return (
-                                <Link key={path} to={"/files"+path+window.location.search}>
-                                  <Icon name={'directory'} />
-                                  <div>{Path.basename(path)}</div>
-                                </Link>
-                            );
-                        })
-                    }
-                  </div>
-                <NgIf cond={this.props.files.length === 0} className="nothing_placeholder">
-                  <svg aria-hidden="true" focusable="false" data-icon="layer-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                     <path fill="currentColor" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path>
-                   </svg>
-                   Frequently access folders will be shown here
-                </NgIf>
+            <div className="component_frequently-access">
+              <ReactCSSTransitionGroup transitionName="frequent-access" transitionLeave={false} transitionEnter={true} transitionAppear={true} transitionEnterTimeout={500} transitionAppearTimeout={300}>
+			    <Container key={this.props.files === null ? 'nothing' : 'something'}>
+			      <NgIf cond={!!this.props.files && this.props.files.length > 0}>
+                    <span className="caption">Quick Access</span>
+                    <div className="frequent_wrapper">
+                      {
+                          this.props.files && this.props.files.map(function(path, index){
+                              return (
+                                  <Link key={path} to={"/files"+path+window.location.search}>
+                                    <Icon name={'directory'} />
+                                    <div>{Path.basename(path)}</div>
+                                  </Link>
+                              );
+                          })
+                      }
+                    </div>
+                  </NgIf>
+                  <NgIf cond={!!this.props.files && this.props.files.length === 0} className="nothing_placeholder">
+                    <svg aria-hidden="true" focusable="false" data-icon="layer-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                      <path fill="currentColor" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path>
+                    </svg>
+                    Frequently access folders will be shown here
+                  </NgIf>
                 </Container>
-              </div>
-            </ReactCSSTransitionGroup>
+              </ReactCSSTransitionGroup>
+            </div>
         );
     }
 }
diff --git a/client/pages/filespage/frequently_access.scss b/client/pages/filespage/frequently_access.scss
index 1677ab83..5ac8be4d 100644
--- a/client/pages/filespage/frequently_access.scss
+++ b/client/pages/filespage/frequently_access.scss
@@ -1,4 +1,12 @@
 .component_frequently-access{
+    min-height: 110px;
+    margin-top: 5px;
+    .component_container{
+        padding: 0;
+    }
+    .component_icon{
+        height: 25px;
+    }
     .caption{
         letter-spacing: 0.06em;
         display: inline-block;
@@ -38,7 +46,7 @@
         @media (max-width: 450px){ a:nth-child(3){display: none;} }
     }
     .nothing_placeholder{
-        padding: 20px;
+        padding: 15px;
         text-align: center;
         background: var(--super-light);
         border: 1px dashed rgba(0,0,0,0.1);
@@ -47,9 +55,9 @@
         font-weight: 100;
         svg{
             display: block;
-            width: 50px;
+            width: 45px;
             margin: 0 auto;
-            padding-bottom: 10px;
+            padding-bottom: 5px;
         }
     }
 }
@@ -62,10 +70,35 @@
 
  .frequent-access-appear{
      opacity: 0;
-     transform: translateX(5px);
+     transition: opacity 0.3s ease-out;
+     .frequent_wrapper a{
+         transition: all 0.3s ease-out;
+         opacity: 0;
+         transform: translateX(5px);
+     }
  }
  .frequent-access-appear.frequent-access-appear-active{
      opacity: 1;
-     transform: translateX(0px);
-     transition: all 0.3s ease-out;
+     .frequent_wrapper a{
+         transform: translateX(0px);
+         opacity: 1;
+     }
+ }
+ .frequent-access-enter{
+     opacity: 0;
+     transition: opacity 0.5s ease-out;
+     .frequent_wrapper a{
+         transition: all 0.3s ease-out;
+         transition-delay: 0.2s;
+         opacity: 0;
+         transform: translateY(-5px);
+     }
+ }
+ .frequent-access-enter.frequent-access-enter-active{
+     opacity: 1;
+     transition: opacity 0.5s ease-out;
+     .frequent_wrapper a{
+         transform: translateY(0px);
+         opacity: 1;
+     }
  }