diff --git a/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap
index b11b041..2c7d51d 100644
--- a/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap
+++ b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap
@@ -2,21 +2,27 @@
 
 exports[`WIconRounded > renders properly 1`] = `
 <div
-  class="flex items-center justify-center border border-black-950 rounded-full w-full p-md bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors w-min"
+  class="border border-black-950 w-min rounded-full bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors icon-container flex justify-center items-center"
+  data-v-1216bb64=""
 >
   
-  <wiconrounded>
+  <wiconrounded
+    data-v-1216bb64-s=""
+  >
     <svg
+      data-v-1216bb64-s=""
       id="email"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g
         data-name="Layer 2"
+        data-v-1216bb64-s=""
       >
         <path
           d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm0 2-6.5 4.47a1 1 0 0 1-1 0L5 6z"
           data-name="email"
+          data-v-1216bb64-s=""
           fill="#ccc"
         />
       </g>
diff --git a/src/components/IconText/__snapshots__/WIconText.spec.ts.snap b/src/components/IconText/__snapshots__/WIconText.spec.ts.snap
index 762b178..cae1a6b 100644
--- a/src/components/IconText/__snapshots__/WIconText.spec.ts.snap
+++ b/src/components/IconText/__snapshots__/WIconText.spec.ts.snap
@@ -40,11 +40,13 @@ exports[`WIconText > renders properly ROUNDED RIGHT 1`] = `
   target="_blank"
 >
   <div
-    class="flex items-center justify-center border border-black-950 rounded-full w-full p-md bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors w-min rounded-icon mr-md"
+    class="border border-black-950 w-min rounded-full bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors icon-container flex justify-center items-center rounded-icon mr-md"
+    data-v-1216bb64=""
   >
     
     
     <svg
+      data-v-1216bb64-s=""
       fill="none"
       height="24"
       viewBox="0 0 21 24"
@@ -55,6 +57,7 @@ exports[`WIconText > renders properly ROUNDED RIGHT 1`] = `
         class="social-icon"
         clip-rule="evenodd"
         d="M18.54 0C19.896 0 21 1.104 21 2.472V24L18.42 21.72L16.968 20.376L15.432 18.948L16.068 21.168H2.46C1.104 21.168 0 20.064 0 18.696V2.472C0 1.104 1.104 0 2.46 0L18.54 0ZM13.908 15.672C16.56 15.588 17.58 13.848 17.58 13.848C17.58 9.984 15.852 6.852 15.852 6.852C14.124 5.556 12.48 5.592 12.48 5.592L12.312 5.784C14.352 6.408 15.3 7.308 15.3 7.308C14.052 6.624 12.828 6.288 11.688 6.156C10.824 6.06 9.996 6.084 9.264 6.18L9.06 6.204C8.64 6.24 7.62 6.396 6.336 6.96C5.892 7.164 5.628 7.308 5.628 7.308C5.628 7.308 6.624 6.36 8.784 5.736L8.664 5.592C8.664 5.592 7.02 5.556 5.292 6.852C5.292 6.852 3.564 9.984 3.564 13.848C3.564 13.848 4.572 15.588 7.224 15.672C7.224 15.672 7.668 15.132 8.028 14.676C6.504 14.22 5.928 13.26 5.928 13.26L6.264 13.464L6.312 13.5L6.359 13.527L6.373 13.533L6.42 13.56C6.72 13.728 7.02 13.86 7.296 13.968C7.788 14.16 8.376 14.352 9.06 14.484C9.96 14.652 11.016 14.712 12.168 14.496C12.732 14.4 13.308 14.232 13.908 13.98C14.328 13.824 14.796 13.596 15.288 13.272C15.288 13.272 14.688 14.256 13.116 14.7C13.476 15.156 13.908 15.672 13.908 15.672ZM8.328 10.068C7.644 10.068 7.104 10.668 7.104 11.4C7.104 12.132 7.656 12.732 8.328 12.732C9.012 12.732 9.552 12.132 9.552 11.4C9.564 10.668 9.012 10.068 8.328 10.068ZM12.708 10.068C12.024 10.068 11.484 10.668 11.484 11.4C11.484 12.132 12.036 12.732 12.708 12.732C13.392 12.732 13.932 12.132 13.932 11.4C13.932 10.668 13.392 10.068 12.708 10.068Z"
+        data-v-1216bb64-s=""
         fill="#ccc"
         fill-rule="evenodd"
       />
diff --git a/src/components/SocialsBar/__snapshots__/WSocialsBar.spec.ts.snap b/src/components/SocialsBar/__snapshots__/WSocialsBar.spec.ts.snap
index 44b4fa5..d9ecd51 100644
--- a/src/components/SocialsBar/__snapshots__/WSocialsBar.spec.ts.snap
+++ b/src/components/SocialsBar/__snapshots__/WSocialsBar.spec.ts.snap
@@ -3,7 +3,6 @@
 exports[`SocialsBar > renders properly 1`] = `
 <div
   class="opacity-60 hover:opacity-100 grid grid-rows-1 grid-flow-row content-center gap-y-md w-fit justify-items-center"
-  style="opacity: 0; transform: translate(0%, 100%) ;"
 >
   <a
     aria-label="https://twitter.com/witnet_io"
@@ -14,6 +13,7 @@ exports[`SocialsBar > renders properly 1`] = `
     
     <svg
       class="icon h-auto w-md"
+      data-v-c15836e8=""
       fill="none"
       height="396"
       viewBox="0 0 396 396"
@@ -37,6 +37,7 @@ exports[`SocialsBar > renders properly 1`] = `
     
     <svg
       class="icon h-auto w-md"
+      data-v-c15836e8=""
       fill="none"
       height="20"
       viewBox="0 0 24 20"
@@ -62,6 +63,7 @@ exports[`SocialsBar > renders properly 1`] = `
     
     <svg
       class="icon h-auto w-md"
+      data-v-c15836e8=""
       fill="none"
       height="24"
       viewBox="0 0 21 24"
@@ -87,6 +89,7 @@ exports[`SocialsBar > renders properly 1`] = `
     
     <svg
       class="icon h-auto w-md"
+      data-v-c15836e8=""
       fill="none"
       height="32"
       viewBox="0 0 32 32"
diff --git a/src/components/icon/__snapshots__/WIcon.spec.ts.snap b/src/components/icon/__snapshots__/WIcon.spec.ts.snap
index 4bac307..b8a744a 100644
--- a/src/components/icon/__snapshots__/WIcon.spec.ts.snap
+++ b/src/components/icon/__snapshots__/WIcon.spec.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`WIcon > renders the specified svg 1`] = `
 <svg
+  data-v-c15836e8=""
   fill="none"
   height="32"
   viewBox="0 0 32 32"
diff --git a/src/components/pagination/WPagination.spec.ts b/src/components/pagination/WPagination.spec.ts
new file mode 100644
index 0000000..71b324b
--- /dev/null
+++ b/src/components/pagination/WPagination.spec.ts
@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import WPagination from './WPagination.vue'
+
+describe('WPagination', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 1 } })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('click on page changes current page', async () => {
+    const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 1 } })
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons[2].element.textContent).toBe('2')
+
+    await buttons[2].trigger('click')
+
+    const selected = wrapper.find('.bg-wit-blue-500')
+
+    expect(selected.text()).toBe('2')
+  })
+
+  it('click on previous changes current page', async () => {
+    const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 2 } })
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons[0].element.textContent).toBe('Previous')
+
+    await buttons[0].trigger('click')
+
+    const selected = wrapper.find('.bg-wit-blue-500')
+
+    expect(selected.text()).toBe('1')
+  })
+
+  it('click on next changes current page', async () => {
+    const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 1 } })
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons[3].element.textContent).toBe('Next')
+
+    await buttons[3].trigger('click')
+
+    const selected = wrapper.find('.bg-wit-blue-500')
+
+    expect(selected.text()).toBe('2')
+  })
+})
diff --git a/src/components/pagination/WPagination.stories.ts b/src/components/pagination/WPagination.stories.ts
index bf60602..c431940 100644
--- a/src/components/pagination/WPagination.stories.ts
+++ b/src/components/pagination/WPagination.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import WPagination from './WPagination.vue'
 
 const meta = {
diff --git a/src/components/pagination/__snapshots__/WPagination.spec.ts.snap b/src/components/pagination/__snapshots__/WPagination.spec.ts.snap
new file mode 100644
index 0000000..3c4666b
--- /dev/null
+++ b/src/components/pagination/__snapshots__/WPagination.spec.ts.snap
@@ -0,0 +1,78 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WPagination > renders properly 1`] = `
+<nav
+  aria-label="Pagination"
+  class="flex items-center gap-xs"
+>
+  <button
+    aria-label="Previous"
+    class="opacity-50 pointer-events-none min-h-[38px] min-w-[38px] py-sm px-sm inline-flex justify-center items-center gap-sm text-sm rounded-lg hover:bg-wit-blue-400 focus:outline-none"
+    disabled=""
+    type="button"
+  >
+    <svg
+      class="shrink-0 size-3.5"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m15 18-6-6 6-6"
+      />
+    </svg>
+    <span>
+      Previous
+    </span>
+  </button>
+  <div
+    class="flex items-center gap-x-xs"
+  >
+    
+    <button
+      class="min-h-[38px] min-w-[38px] flex justify-center items-center hover:bg-wit-blue-400 py-sm px-sm text-sm rounded-lg outline-none bg-wit-blue-500 pointer-events-none"
+      type="button"
+    >
+      1
+    </button>
+    <button
+      class="min-h-[38px] min-w-[38px] flex justify-center items-center hover:bg-wit-blue-400 py-sm px-sm text-sm rounded-lg"
+      type="button"
+    >
+      2
+    </button>
+    
+  </div>
+  <button
+    aria-label="Next"
+    class="min-h-lg min-w-lg py-sm px-sm inline-flex justify-center items-center gap-xs text-sm rounded-lg hover:bg-wit-blue-400 focus:outline-none"
+    type="button"
+  >
+    <span>
+      Next
+    </span>
+    <svg
+      class="shrink-0 size-3.5"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m9 18 6-6-6-6"
+      />
+    </svg>
+  </button>
+</nav>
+`;