diff --git a/src/widget/.images/.nomedia b/src/widget/images/.nomedia
old mode 100755
new mode 100644
similarity index 100%
rename from src/widget/.images/.nomedia
rename to src/widget/images/.nomedia
diff --git a/src/widget/.images/README.md b/src/widget/images/README.md
old mode 100755
new mode 100644
similarity index 100%
rename from src/widget/.images/README.md
rename to src/widget/images/README.md
diff --git a/src/widget/.images/avatar.png b/src/widget/images/avatar.png
similarity index 100%
rename from src/widget/.images/avatar.png
rename to src/widget/images/avatar.png
diff --git a/src/widget/index.html b/src/widget/index.html
index 6c47161..38efac3 100755
--- a/src/widget/index.html
+++ b/src/widget/index.html
@@ -32,8 +32,10 @@
     </button>
   </form>
   <div role="separator" class="mdc-list-divider"></div>
-  <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list" id="inboxMessages">
-  </ul>
+  <div class="scrollDiv">
+    <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list" id="inboxMessages">
+    </ul>
+  </div>
   <div id="emptyState">
     <span class="primaryTextTheme">No results found</span>
     <icon class="material-icons icon icon-drawer2 empty-icon"></icon>
@@ -42,7 +44,7 @@
 
 <!-- Thread template -->
 <template id="thread-ui-template">
-  <li class="mdc-list-item slide-right">
+  <li class="mdc-list-item slide-right mdc-list--non-interactive">
     <img class="mdc-list-item__graphic profile-image" src="{{imageUrl}}" alt="Profile" />
     <div class="red-dot dangerBackgroundTheme" style="visibility:{{visibility}}"></div>
     <div class="mdc-list-item__text">
diff --git a/src/widget/style.css b/src/widget/style.css
index cd62b26..9bc419e 100644
--- a/src/widget/style.css
+++ b/src/widget/style.css
@@ -109,6 +109,11 @@ body {
     margin-left: 10px;
 }
 
+.mdc-list{
+    max-height: calc(100vh - 115px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
 .red-dot {
     width: 10px;
     height: 10px;
@@ -120,7 +125,7 @@ body {
 
 .slide-right {
 	-webkit-animation: slide-right 0.3s ease-in-out both;
-	        animation: slide-right 0.3s ease-in-out both;
+    animation: slide-right 0.3s ease-in-out both;
 }
 
  @-webkit-keyframes slide-right {
@@ -143,3 +148,10 @@ body {
               transform: translateX(0);
     }
   }
+  li:after {
+    content: none !important;
+    }
+
+    li:before {
+        content: none !important;
+    } 
\ No newline at end of file
diff --git a/src/widget/widget.js b/src/widget/widget.js
index 33e47d5..596cd6f 100644
--- a/src/widget/widget.js
+++ b/src/widget/widget.js
@@ -28,7 +28,7 @@ function reloadMessages(threads, clearOldThreads) {
           size: "xs",
           aspect: "1:1",
         });
-      else imageUrl = "./.images/avatar.png";
+      else imageUrl = "./images/avatar.png";
       let element = document.createElement("div");
   
       let time = new Date(thread.lastMessage.createdAt);
@@ -80,7 +80,21 @@ function initWidget(user) {
 
   let form = document.getElementById("searchForm");
   form.addEventListener("submit", onSearch);
-
+  let getMoreThreads = true;
+  let loading = false;
+  let inboxMessages = document.getElementById("inboxMessages");
+  inboxMessages.onscroll = () =>{
+    if(getMoreThreads && !loading){
+      if (inboxMessages.scrollHeight - inboxMessages.scrollTop - inboxMessages.clientHeight < 1){
+        loading = true;
+        Threads.getThreads(user, document.getElementById("inboxMessages").childNodes.length, 20, (err, threads) => {
+          if(threads.length < 20) getMoreThreads = false;
+          reloadMessages(threads, false);
+          loading = false;
+        });
+      }
+    }
+  }
   injectThemeStyle();
 }