diff --git a/src/components/__tests__/BadgeInfo.spec.ts b/src/components/__tests__/BadgeInfo.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e6eae8228ed1f16c19f8c9fe3f20542b0f354eb3
--- /dev/null
+++ b/src/components/__tests__/BadgeInfo.spec.ts
@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import BadgeInfo from '@/components/profile/BadgeInfo.vue';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+
+describe('Component', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('renders badges with correct data', async () => {
+    const wrapper = mount(BadgeInfo, {
+      props: { title: 'Test Title' }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const badges = wrapper.findAll('.badge');
+
+    badges.forEach((badge, index) => {
+      const achievement = wrapper.vm.achievements[index];
+      const img = badge.find('.badge-img');
+      const title = badge.find('.badge-title');
+
+      expect(img.attributes('src')).toBe(achievement.img);
+      expect(img.attributes('alt')).toBe(achievement.title);
+      expect(title.text()).toBe(achievement.title);
+    });
+  });
+});
diff --git a/src/components/__tests__/UserInfo.spec.ts b/src/components/__tests__/UserInfo.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..80fd87ba23ee583a93606382c3fd8dfee2c5d7cb
--- /dev/null
+++ b/src/components/__tests__/UserInfo.spec.ts
@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import UserInfo from '@/components/profile/UserInfo.vue'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { updateUserInfo } from '../../utils/profileutils'
+
+// Mocking getUserInfo and updateUserInfo functions
+vi.mock('@/utils/profileutils', () => ({
+  getUserInfo: vi.fn(),
+  updateUserInfo: vi.fn()
+}))
+
+// Mocking useTokenStore
+vi.mock('@/stores/token', () => ({
+  useTokenStore: vi.fn(() => ({ jwtToken: 'mockedToken' }))
+}))
+
+describe('UserInfo', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(UserInfo)
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('fetches user info on mount', async () => {
+    expect.assertions(3)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.username).toBe('mockedUsername')
+    expect(wrapper.vm.email).toBe('mockedEmail')
+    expect(wrapper.vm.profilePictureBase64).toBe('mockedProfilePictureBase64')
+  })
+
+  it('saves user info when save button is clicked', async () => {
+    wrapper.vm.email = 'newemail@example.com'
+    wrapper.vm.profilePictureBase64 = 'newBase64String'
+
+    await wrapper.find('.save-button').trigger('click')
+
+    expect(updateUserInfo).toHaveBeenCalledWith(
+      'mockedToken',
+      'newemail@example.com',
+      'newBase64String'
+    )
+  })
+
+  it('validates email correctly', async () => {
+    wrapper.vm.email = 'invalidemail'
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.error-message').text()).toBe('Ikke gyldig e-post adresse!')
+    expect(wrapper.find('.input').classes()).toContain('error')
+  })
+
+  // Add more tests as needed
+})