diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts
index 465c2d9..ddc0e3a 100644
--- a/frontend/src/views/apps/CryptoApp.contract.test.ts
+++ b/frontend/src/views/apps/CryptoApp.contract.test.ts
@@ -213,9 +213,9 @@ describe('VaultX crypto app contracts', () => {
     expect(source).toContain('class="activity-filter-panel"')
     expect(source).toContain('class="activity-filters"')
     expect(source).toContain('class="activity-status__icon"')
+    expect(source.match(/class="activity-filter-content"/g)).toHaveLength(3)
     expect(source).toContain('<WalletCards :size="15" />')
-    expect(source).toContain('top: 50%;')
-    expect(source).toContain('transform: translateY(calc(-50% - 1px));')
+    expect(source).not.toContain('inset-inline-start: 10px;')
     expect(source).toContain('transform: translateY(-1px);')
   })
 
diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue
index 1eda554..d9e83c0 100644
--- a/frontend/src/views/apps/CryptoApp.vue
+++ b/frontend/src/views/apps/CryptoApp.vue
@@ -1365,21 +1365,27 @@ onUnmounted(() => {
               ><SkySegmentedButton
                 :active="activityFilter === 'all'"
                 @click="activityFilter = 'all'"
-                ><History :size="15" /><span>{{
-                  t('activity.filters.all')
-                }}</span></SkySegmentedButton
+                ><span class="activity-filter-content"
+                  ><History :size="15" /><span>{{
+                    t('activity.filters.all')
+                  }}</span></span
+                ></SkySegmentedButton
               ><SkySegmentedButton
                 :active="activityFilter === 'trades'"
                 @click="activityFilter = 'trades'"
-                ><ChartNoAxesCombined :size="15" /><span>{{
-                  t('activity.filters.trades')
-                }}</span></SkySegmentedButton
+                ><span class="activity-filter-content"
+                  ><ChartNoAxesCombined :size="15" /><span>{{
+                    t('activity.filters.trades')
+                  }}</span></span
+                ></SkySegmentedButton
               ><SkySegmentedButton
                 :active="activityFilter === 'wallet'"
                 @click="activityFilter = 'wallet'"
-                ><WalletCards :size="15" /><span>{{
-                  t('activity.filters.wallet')
-                }}</span></SkySegmentedButton
+                ><span class="activity-filter-content"
+                  ><WalletCards :size="15" /><span>{{
+                    t('activity.filters.wallet')
+                  }}</span></span
+                ></SkySegmentedButton
               ></SkySegmented
             >
           </div>
@@ -3575,25 +3581,21 @@ onUnmounted(() => {
     color var(--sky-transition-normal) ease,
     transform var(--sky-transition-fast) ease;
 }
-.activity-filters :deep(.sky-segmented-button svg) {
-  position: absolute;
-  top: 50%;
-  inset-inline-start: 10px;
-  display: block;
-  flex: 0 0 auto;
-  transform: translateY(calc(-50% - 1px));
-}
-.activity-filters :deep(.sky-segmented-button > span) {
-  display: flex;
+.activity-filters :deep(.activity-filter-content) {
+  display: inline-flex;
+  max-width: 100%;
+  gap: 6px;
   align-items: center;
   justify-content: center;
-  width: 100%;
   min-height: 15px;
   line-height: 1;
-  text-align: center;
   white-space: nowrap;
   transform: translateY(-1px);
 }
+.activity-filters :deep(.activity-filter-content svg) {
+  display: block;
+  flex: 0 0 auto;
+}
 :deep(.activity-filters.sky-segmented--strong .sky-segmented-button--active) {
   color: #fff;
 }