diff --git a/ui/app/components/page-size-select.js b/ui/app/components/page-size-select.js
new file mode 100644
index 000000000..0bde78aec
--- /dev/null
+++ b/ui/app/components/page-size-select.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+  tagName: '',
+
+  userSettings: service(),
+
+  pageSizeOptions: Object.freeze([10, 25, 50]),
+});
diff --git a/ui/app/templates/components/page-size-select.hbs b/ui/app/templates/components/page-size-select.hbs
new file mode 100644
index 000000000..c2e87cf3c
--- /dev/null
+++ b/ui/app/templates/components/page-size-select.hbs
@@ -0,0 +1,11 @@
+<div class="field is-horizontal">
+  <span class="field-label is-small">Per page</span>
+  <PowerSelect
+    @tagName="div"
+    class="field-body"
+    @options={{pageSizeOptions}}
+    @selected={{userSettings.pageSize}}
+    @onChange={{action (mut userSettings.pageSize)}} as |option|>
+    {{option}}
+  </PowerSelect>
+</div>