diff --git a/client/src/ui/components/bd/SettingsWrapper.vue b/client/src/ui/components/bd/SettingsWrapper.vue
index 423cf134..4236e853 100644
--- a/client/src/ui/components/bd/SettingsWrapper.vue
+++ b/client/src/ui/components/bd/SettingsWrapper.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settingswrap">
-        <ScrollerWrap>
+        <ScrollerWrap :scrollend="scrollend">
             <div class="bd-settingswrapHeader">
                 <span class="bd-settingswrapHeaderText">{{ headertext }}</span>
                 <slot name="header" />
@@ -27,7 +27,7 @@
     import { ScrollerWrap } from '../common';
 
     export default {
-        props: ['headertext'],
+        props: ['headertext', 'scrollend'],
         components: {
             ScrollerWrap
         }
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 79532dc7..2649125e 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <SettingsWrapper headertext="Themes">
+    <SettingsWrapper headertext="Themes" :scrollend="scrollend">
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
@@ -26,13 +26,17 @@
                 <ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
             </div>
             <div v-if="!local" class="bd-onlinePh">
-                <div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
-                    <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop/>
+                <div class="bd-onlinePhHeader">
+                    <div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
+                        <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop />
+                    </div>
+                    <div v-if="loadingOnline" class="bd-spinnerContainer">
+                        <div class="bd-spinner7"></div>
+                    </div>
                 </div>
-                <div v-if="loadingOnline" class="bd-spinnerContainer">
-                    <div class="bd-spinner7"></div>
+                <div class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes">
+                    <RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" />
                 </div>
-                <RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
             </div>
         </div>
     </SettingsWrapper>
@@ -117,6 +121,9 @@
             searchInput(e) {
                 if (this.loadingOnline) return;
                 this.refreshOnline();
+            },
+            scrollend(e) {
+                console.log('scrollend');
             }
         }
     }
diff --git a/client/src/ui/components/common/ScrollerWrap.vue b/client/src/ui/components/common/ScrollerWrap.vue
index dc61f1dc..a031e635 100644
--- a/client/src/ui/components/common/ScrollerWrap.vue
+++ b/client/src/ui/components/common/ScrollerWrap.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-scrollerWrap" :class="{'bd-dark': dark}">
-        <div class="bd-scroller">
+        <div class="bd-scroller" @scroll="onscroll">
             <slot/>
         </div>
     </div>
@@ -18,6 +18,13 @@
 
 <script>
     export default {
-        props: ['dark']
+        props: ['dark', 'scrollend'],
+        methods: {
+            onscroll(e) {
+                if (!this.scrollend) return;
+                const { offsetHeight, scrollTop, scrollHeight } = e.target;
+                if (offsetHeight + scrollTop >= scrollHeight) this.scrollend(e);
+            }
+        }
     }
 </script>