diff --git a/webapp/components/Paginate/Paginate.spec.js b/webapp/components/Paginate/Paginate.spec.js
index f542533fd..53847b726 100644
--- a/webapp/components/Paginate/Paginate.spec.js
+++ b/webapp/components/Paginate/Paginate.spec.js
@@ -23,13 +23,13 @@ describe('Paginate.vue', () => {
       beforeEach(() => {
         propsData.hasNext = true
         wrapper = Wrapper()
-        nextButton = wrapper.findAll('.ds-button').at(0)
+        nextButton = wrapper.findAll('.base-button').at(0)
       })
 
       it('is disabled by default', () => {
         propsData = {}
         wrapper = Wrapper()
-        nextButton = wrapper.findAll('.ds-button').at(0)
+        nextButton = wrapper.findAll('.base-button').at(0)
         expect(nextButton.attributes().disabled).toEqual('disabled')
       })
 
@@ -47,13 +47,13 @@ describe('Paginate.vue', () => {
       beforeEach(() => {
         propsData.hasPrevious = true
         wrapper = Wrapper()
-        backButton = wrapper.findAll('.ds-button').at(1)
+        backButton = wrapper.findAll('.base-button').at(1)
       })
 
       it('is disabled by default', () => {
         propsData = {}
         wrapper = Wrapper()
-        backButton = wrapper.findAll('.ds-button').at(1)
+        backButton = wrapper.findAll('.base-button').at(1)
         expect(backButton.attributes().disabled).toEqual('disabled')
       })
 
diff --git a/webapp/components/Paginate/Paginate.vue b/webapp/components/Paginate/Paginate.vue
index aa1455d19..721be6d40 100644
--- a/webapp/components/Paginate/Paginate.vue
+++ b/webapp/components/Paginate/Paginate.vue
@@ -1,13 +1,10 @@
 <template>
-  <ds-flex direction="row-reverse">
-    <ds-flex-item width="50px">
-      <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
-    </ds-flex-item>
-    <ds-flex-item width="50px">
-      <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
-    </ds-flex-item>
-  </ds-flex>
+  <div class="paginate">
+    <base-button @click="back" :disabled="!hasPrevious" icon="arrow-left" circle />
+    <base-button @click="next" :disabled="!hasNext" icon="arrow-right" circle />
+  </div>
 </template>
+
 <script>
 export default {
   props: {
@@ -24,3 +21,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.paginate {
+  display: flex;
+  justify-content: space-around;
+  width: 100px;
+  margin: $space-x-small auto;
+}
+</style>