diff --git a/src/components/__tests__/create-form/BaseInput.spec.ts b/src/components/__tests__/create-form/BaseInput.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dbbe24e3b7ebe8171096c7ff9a721accd5ff8bdd
--- /dev/null
+++ b/src/components/__tests__/create-form/BaseInput.spec.ts
@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import BaseInput from '@/components/create-form/BaseInput.vue'
+import { describe, it, expect } from 'vitest'
+
+describe('BaseInput', () => {
+  it('renders correctly with props', async () => {
+    const label = 'Your Label'
+    const placeHolder = 'Your Placeholder'
+    const type = 'text'
+    const modelValue = 'Initial Value'
+
+    const wrapper = mount(BaseInput, {
+      props: {
+        label,
+        placeHolder,
+        type,
+        modelValue
+      }
+    })
+
+    expect(wrapper.find('label').text()).toBe(label)
+
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe(placeHolder)
+    expect(input.attributes('type')).toBe(type)
+    expect(input.element.value).toBe(modelValue)
+
+    // Simulate input
+    const newValue = 'New Value'
+    await input.setValue(newValue)
+
+    // Assert emitted event
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(newValue)
+  })
+})
diff --git a/src/components/__tests__/create-form/BaseTextArea.spec.ts b/src/components/__tests__/create-form/BaseTextArea.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbead7019eea9d0de1b23b330ea28366ae9a9836
--- /dev/null
+++ b/src/components/__tests__/create-form/BaseTextArea.spec.ts
@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import BaseTextArea from '@/components/create-form/BaseTextArea.vue'
+
+describe('BaseTextArea', () => {
+  it('renders correctly with props', async () => {
+    const label = 'Your Label'
+    const placeHolder = 'Your Placeholder'
+    const modelValue = 'Initial Value'
+
+    const wrapper = mount(BaseTextArea, {
+      props: {
+        label,
+        placeHolder,
+        modelValue
+      }
+    })
+
+    expect(wrapper.find('label').text()).toBe(label)
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.attributes('placeholder')).toBe(placeHolder)
+    expect(textarea.element.value).toBe(modelValue)
+
+    const newValue = 'New Value'
+    await textarea.setValue(newValue)
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(newValue)
+  })
+})
diff --git a/src/components/__tests__/economy/ToggleButton.spec.ts b/src/components/__tests__/economy/ToggleButton.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e2addb1dfa62e3494ca1ec9f0f73f7728d429f76
--- /dev/null
+++ b/src/components/__tests__/economy/ToggleButton.spec.ts
@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToggleButton from '@/components/economy/ToggleButton.vue'
+
+describe('ToggleButton', () => {
+  it('toggles chart visibility when clicked', async () => {
+    const wrapper = mount(ToggleButton)
+    expect(wrapper.vm.chartVisible).toBe(false)
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+    expect(wrapper.vm.chartVisible).toBe(true)
+
+  })
+
+  it('emits toggle-chart event when clicked', async () => {
+    const wrapper = mount(ToggleButton)
+
+    // Simulate clicking the toggle button
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+
+    expect(wrapper.emitted('toggle-chart')).toBeTruthy()
+    expect(wrapper.vm.chartVisible).toBe(true)
+
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+
+    expect(wrapper.emitted('toggle-chart')).toBeTruthy()
+    expect(wrapper.emitted('toggle-chart')[1][0]).toBe(false)
+  })
+})
diff --git a/src/components/__tests__/economy/TransactionComponent.spec.ts b/src/components/__tests__/economy/TransactionComponent.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e9b91b2b87cc857b328d5e3ab0fb8c791bc5df3
--- /dev/null
+++ b/src/components/__tests__/economy/TransactionComponent.spec.ts
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import TransactionComponent from '@/components/economy/TransactionComponent.vue'
+import { describe, it, expect } from 'vitest'
+describe('TransactionComponent', () => {
+  it('renders correctly with props', async () => {
+    // Define props for testing
+    const title = 'Test Title'
+    const date = '2024-04-29'
+    const amount = 100
+    const category = 'Test Category'
+
+    // Mount the component with props
+    const wrapper = mount(TransactionComponent, {
+      props: {
+        title,
+        date,
+        amount,
+        category
+      }
+    })
+
+    // title rendering
+    expect(wrapper.find('.component-title').text()).toContain(title)
+
+    // date rendering
+    expect(wrapper.findAll('.component-right-field').at(0).text()).toContain(date)
+
+    // amount rendering
+    expect(wrapper.findAll('.component-right-field').at(1).text()).toContain(`${amount}kr`)
+
+    // category rendering
+    expect(wrapper.findAll('.component-right-field').at(2).text()).toContain(category)
+  })
+
+})
diff --git a/src/components/__tests__/milestonePath/MilestoneButton.spec.ts b/src/components/__tests__/milestonePath/MilestoneButton.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a8b488b1410fbc9df70625c7a1955f5e6a35cd1e
--- /dev/null
+++ b/src/components/__tests__/milestonePath/MilestoneButton.spec.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MilestoneButton from '@/components/MilestonePath/MilestoneButton.vue'
+
+describe('MilestoneButton', () => {
+  it('renders correctly with props', async () => {
+    const label = 'Save'
+    const buttonColor = 'blue'
+
+    const wrapper = mount(MilestoneButton, {
+      props: {
+        label,
+        buttonColor
+      }
+    })
+    // label rendering
+    expect(wrapper.text()).toContain(label)
+    expect(wrapper.text()).toBe('Save')
+
+    // button color
+    const buttonElement = wrapper.find('.save-button').element
+    expect(buttonElement.style.backgroundColor).toBe(buttonColor)
+  })
+})