diff --git a/app/components/ContentGradientBox.vue b/app/components/ContentGradientBox.vue
new file mode 100644
index 0000000..2c14f4d
--- /dev/null
+++ b/app/components/ContentGradientBox.vue
@@ -0,0 +1,8 @@
+<template>
+  <p class="p-4 shadow shadow-gray-400 rounded-lg bg-linear-to-r from-orange-200 to-amber-200">
+    <slot />
+  </p>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/app/components/NavigationBar.vue b/app/components/NavigationBar.vue
index 178e03b..6aeb9c6 100644
--- a/app/components/NavigationBar.vue
+++ b/app/components/NavigationBar.vue
@@ -2,12 +2,12 @@
   <div class="flex gap-2">
     <NuxtLink
       to="/"
-      class="inline-flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      class="inline-flex items-center justify-center w-10 h-10 rounded-full transition-colors"
       aria-label="Calculator"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="w-6 h-6"
+        class="w-6 h-6 opacity-60 hover:opacity-100 transition-opacity"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -84,14 +84,32 @@
         />
       </svg>
     </NuxtLink>
+    <NuxtLink
+      to="/como-calcular-juros-da-poupanca"
+      class="inline-flex items-center justify-center w-10 h-10 rounded-full transition-colors"
+      aria-label="Savings Account Calculator Guide"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="w-6 h-6 opacity-60 hover:opacity-100 transition-opacity"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15h4v-6h-4v6m0-8h4V7h-4v2" />
+      </svg>
+    </NuxtLink>
     <NuxtLink
       to="/sobre"
-      class="inline-flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      class="inline-flex items-center justify-center w-10 h-10 rounded-full transition-colors"
       aria-label="Information"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="w-6 h-6"
+        class="w-6 h-6 opacity-60 hover:opacity-100 transition-opacity"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
diff --git a/app/pages/como-calcular-juros-da-poupanca.vue b/app/pages/como-calcular-juros-da-poupanca.vue
index a3892e1..2a1a80e 100644
--- a/app/pages/como-calcular-juros-da-poupanca.vue
+++ b/app/pages/como-calcular-juros-da-poupanca.vue
@@ -26,10 +26,10 @@
         rendimento</strong>.
     </p>
     <h3>Período de Rendimento</h3>
-    <p class="p-4 shadow shadow-gray-300 rounded-lg bg-gradient-to-r from-slate-100 to-amber-50">
+    <ContentGradientBox>
       A <strong>data de aniversário</strong> da conta de depósito de poupança é o dia do mês de sua abertura. Para
       contas abertas nos dias 29, 30 e 31, considera-se como data de aniversário o dia 1º do mês seguinte.
-    </p>
+    </ContentGradientBox>
     <h3>Crédito dos Rendimentos</h3>
     <ul>
       <li>
diff --git a/test/nuxt/ContentGradientBox.test.ts b/test/nuxt/ContentGradientBox.test.ts
new file mode 100644
index 0000000..a6503c0
--- /dev/null
+++ b/test/nuxt/ContentGradientBox.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import ContentGradientBox from '~/components/ContentGradientBox.vue'
+
+describe('ContentGradientBox Component', () => {
+  describe('Rendering', () => {
+    it('should render as a paragraph element with all required styling classes', async () => {
+      const wrapper = await mountSuspended(ContentGradientBox)
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.element.tagName).toBe('P')
+
+      const element = wrapper.element as HTMLElement
+      const classList = element.className
+
+      // Verify all styling classes
+      expect(classList).toContain('p-4')
+      expect(classList).toContain('shadow')
+      expect(classList).toContain('rounded-lg')
+      expect(classList).toContain('bg-linear-to-r')
+      expect(classList).toContain('from-orange-')
+      expect(classList).toContain('to-amber-')
+    })
+  })
+
+  describe('Slot Content', () => {
+    it('should render text content in slot', async () => {
+      const wrapper = await mountSuspended(ContentGradientBox, {
+        slots: {
+          default: 'Test content',
+        },
+      })
+      expect(wrapper.text()).toContain('Test content')
+    })
+
+    it('should render HTML elements in slot', async () => {
+      const wrapper = await mountSuspended(ContentGradientBox, {
+        slots: {
+          default: '<strong>Bold text</strong>',
+        },
+      })
+      expect(wrapper.find('strong').exists()).toBe(true)
+      expect(wrapper.find('strong').text()).toBe('Bold text')
+    })
+
+    it('should render multiple elements in slot', async () => {
+      const wrapper = await mountSuspended(ContentGradientBox, {
+        slots: {
+          default: '<span>First</span> <span>Second</span>',
+        },
+      })
+      const spans = wrapper.findAll('span')
+      expect(spans).toHaveLength(2)
+      expect(spans[0].text()).toBe('First')
+      expect(spans[1].text()).toBe('Second')
+    })
+
+    it('should handle empty slot', async () => {
+      const wrapper = await mountSuspended(ContentGradientBox)
+      expect(wrapper.text()).toBe('')
+    })
+  })
+})