diff --git a/projects/my-wallet-ds/src/lib/molecules/abstract-expense-income-detail/abstract-expense-income-detail.component.spec.ts b/projects/my-wallet-ds/src/lib/molecules/abstract-expense-income-detail/abstract-expense-income-detail.component.spec.ts
new file mode 100644
index 0000000..45e9848
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/molecules/abstract-expense-income-detail/abstract-expense-income-detail.component.spec.ts
@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AbstractExpenseIncomeDetailComponent } from './abstract-expense-income-detail.component';
+
+describe('AbstractExpenseIncomeDetailComponent', () => {
+  const RED_VAR_TEXT = 'var(--mw-red)';
+  const GREEN_VAR_TEXT = 'var(--mw-green)'
+  let component: AbstractExpenseIncomeDetailComponent;
+  let fixture: ComponentFixture<AbstractExpenseIncomeDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AbstractExpenseIncomeDetailComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AbstractExpenseIncomeDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('amount text color ', () => {
+    it('should be green for income variant', () => {
+      fixture.componentRef.setInput('variant', 'income');
+      expect(component.amountProps().color).toBe(GREEN_VAR_TEXT);
+    });
+
+    it('should be red for expense variant', () => {
+      fixture.componentRef.setInput('variant', 'expense');
+      expect(component.amountProps().color).toBe(RED_VAR_TEXT);
+    })
+  })
+});
diff --git a/projects/my-wallet-ds/src/lib/molecules/abstract-expense-income-detail/abstract-expense-income-detail.component.ts b/projects/my-wallet-ds/src/lib/molecules/abstract-expense-income-detail/abstract-expense-income-detail.component.ts
new file mode 100644
index 0000000..e81e680
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/molecules/abstract-expense-income-detail/abstract-expense-income-detail.component.ts
@@ -0,0 +1,25 @@
+import { Component, computed, input } from '@angular/core';
+import { ExpenseIncomeVariant } from '../../types/ExpenseIncomeVariants';
+
+@Component({
+  selector: 'mw-abstract-expense-income-detail',
+  standalone: true,
+  imports: [],
+  template: '',
+  styles: ''
+})
+export class AbstractExpenseIncomeDetailComponent {
+  variant = input<ExpenseIncomeVariant>('income');
+  amount = input(0);
+  amountProps = computed(() => ({
+    amount: this.amount(),
+    color: this.variant() === 'income' ? 'var(--mw-green)' : 'var(--mw-red)'
+  }));
+  description = input('')
+  iconProps = input({
+    symbol:"",
+    backgroundColor:"var(--mw-white)",
+    color:"var(--mw-white)"
+  });
+  whom = input('');
+}
diff --git a/projects/my-wallet-ds/src/lib/types/ExpenseIncomeVariants.ts b/projects/my-wallet-ds/src/lib/types/ExpenseIncomeVariants.ts
new file mode 100644
index 0000000..40fa5fb
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/types/ExpenseIncomeVariants.ts
@@ -0,0 +1 @@
+export type ExpenseIncomeVariant = 'expense'|'income';
\ No newline at end of file