diff --git a/src/App.js b/src/App.js
index 455940f1..aca6da06 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,39 +1,30 @@
-import Expenses from "./components/Expenses/Expenses";
-import NewExpense from "./components/NewExpense/NewExpense";
+import Expenses from './components/Expenses/Expenses';
+import NewExpense from './components/NewExpense/NewExpense';
+import { initialExpenses } from './data';
+import { useState } from 'react';
 
 const App = () => {
-  const expense = [
-    {
-      id: 'e1',
-      title: 'Toilet Paper',
-      amount: 94.12,
-      date: new Date(2020, 7, 14),
-    },
-    { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
-    {
-      id: 'e3',
-      title: 'Car Insurance',
-      amount: 294.67,
-      date: new Date(2021, 2, 28),
-    },
-    {
-      id: 'e4',
-      title: 'New Desk (Wooden)',
-      amount: 450,
-      date: new Date(2021, 5, 12),
-    },
-  ];
+  const [expenses, setExpenses] = useState(initialExpenses);
 
   const addExpenseHandler = expense => {
-    console.log('In App.js');
-    console.log(expense);
-  }
+    setExpenses(expenses.concat(expense));
+  };
+
+  const deleteExpenseHandler = id => {
+    setExpenses(expenses.filter(expense => expense.id !== id));
+  };
+
   return (
     <div>
-      <NewExpense onAddExpense={addExpenseHandler} />
-      <Expenses items={expense}/>
+      <NewExpense
+        onAddExpense={addExpenseHandler}
+      />
+      <Expenses
+        onDeleteExpense={deleteExpenseHandler}
+        items={expenses}
+      />
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/components/Expenses/ExpenseDate.js b/src/components/Expenses/ExpenseDate.js
index cd3d2576..b4fc6171 100644
--- a/src/components/Expenses/ExpenseDate.js
+++ b/src/components/Expenses/ExpenseDate.js
@@ -1,10 +1,11 @@
-import './ExpenseDate.css';
-
-const ExpenseDate = (props) => {
-  const day = props.date.toLocaleString('en-GB', {day: '2-digit'});
-  const month = props.date.toLocaleString('en-GB', {month: 'long'});
-  const year =props.date.getFullYear();
+import './ExpenseDate.scss';
 
+const ExpenseDate = ({
+  date
+}) => {
+  const day = date.toLocaleDateString('en-GB', { day: '2-digit' });
+  const month = date.toLocaleDateString('en-GB', { month: 'long' });
+  const year = date.getFullYear();
   return (
     <div className="expense-date">
       <div className="expense-date__day">{day}</div>
@@ -12,6 +13,6 @@ const ExpenseDate = (props) => {
       <div className="expense-date__year">{year}</div>
     </div>
   );
-}
+};
 
 export default ExpenseDate;
\ No newline at end of file
diff --git a/src/components/Expenses/ExpenseDate.scss b/src/components/Expenses/ExpenseDate.scss
index c3aa67d8..ebb61d6c 100644
--- a/src/components/Expenses/ExpenseDate.scss
+++ b/src/components/Expenses/ExpenseDate.scss
@@ -9,18 +9,18 @@
   border-radius: 12px;
   align-items: center;
   justify-content: center;
-}
 
-.expense-date__month {
-  font-size: 0.75rem;
-  font-weight: bold;
-}
+  &__month {
+    font-size: 0.75rem;
+    font-weight: bold;
+  }
 
-.expense-date__year {
-  font-size: 0.75rem;
-}
+  &__year {
+    font-size: 0.75rem;
+  }
 
-.expense-date__day {
-  font-size: 1.5rem;
-  font-weight: bold;
+  &__day {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Expenses/ExpenseItem.css b/src/components/Expenses/ExpenseItem.css
index aba29132..b4112406 100644
--- a/src/components/Expenses/ExpenseItem.css
+++ b/src/components/Expenses/ExpenseItem.css
@@ -17,7 +17,7 @@
   flex: 1;
 }
 
-.expense-item h2 {
+.expense-item__info {
   color: #3a3a3a;
   font-size: 1rem;
   flex: 1;
@@ -25,6 +25,10 @@
   color: white;
 }
 
+.expense-item__info p {
+  color: #111;
+}
+
 .expense-item__price {
   font-size: 1rem;
   font-weight: bold;
@@ -35,6 +39,15 @@
   border-radius: 12px;
 }
 
+.expense-item__delete button {
+  border-radius: 50%;
+  border: none;
+  width: 3em;
+  height: 3em;
+  background-color: #2a2a2a;
+  color: #fff;
+}
+
 @media (min-width: 580px) {
   .expense-item__description {
     flex-direction: row;
diff --git a/src/components/Expenses/ExpenseItem.js b/src/components/Expenses/ExpenseItem.js
index 6810549e..d7f9bbc2 100644
--- a/src/components/Expenses/ExpenseItem.js
+++ b/src/components/Expenses/ExpenseItem.js
@@ -1,19 +1,33 @@
 import React from 'react';
+import Card from '../UI/Card';
 
 import ExpenseDate from './ExpenseDate';
 import './ExpenseItem.css';
-import Card from '../UI/Card';
 
-const ExpenseItem = (props) => {
-
-  return (
-  <Card className="expense-item"> 
-    <ExpenseDate date={props.date}/>
+const ExpenseItem = ({
+  id,
+  title,
+  amount,
+  location,
+  date,
+  onDelete
+}) => (
+  <Card className="expense-item">
+    <ExpenseDate date={date}/>
     <div className="expense-item__description">
-      <h2>{props.title}</h2>
-      <div className="expense-item__price">£{props.amount}</div>
+      <div className="expense-item__info">
+        <h2>{title}</h2>
+        <p>{location}</p>
+      </div>
+      <div className="expense-item__price">
+        £{parseFloat(amount).toFixed(2)}
+      </div>
+      <div className="expense-item__delete">
+        <button onClick={() => onDelete(id)}>X</button>
+      </div>
     </div>
-  </Card>); 
-}
+  </Card>
+);
+
 
 export default ExpenseItem;
\ No newline at end of file
diff --git a/src/components/Expenses/Expenses.js b/src/components/Expenses/Expenses.js
index 4366f226..f079c5f0 100644
--- a/src/components/Expenses/Expenses.js
+++ b/src/components/Expenses/Expenses.js
@@ -1,41 +1,29 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
 import Card from '../UI/Card';
 import ExpenseItem from './ExpenseItem';
 import ExpensesFilter from './ExpensesFilter';
 import './Expenses.css';
 
-const Expenses = (props) => {
+const Expenses = ({
+  items,
+  onDeleteExpense
+}) => {
   const [filteredYear, setFilteredYear] = useState('2021');
 
-  const filterChangeHandler = selectedYear => {
-    setFilteredYear(selectedYear);
+  const expenseDeleteHandler = (id) => {
+    onDeleteExpense(id)
   }
+
   return (
     <Card className="expenses">
-      <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
-      <ExpenseItem 
-        title={props.items[0].title} 
-        amount={props.items[0].amount} 
-        date={props.items[0].date}
-      />
-      <ExpenseItem 
-        title={props.items[1].title} 
-        amount={props.items[1].amount} 
-        date={props.items[1].date}
-      />
-      <ExpenseItem 
-        title={props.items[2].title} 
-        amount={props.items[2].amount} 
-        date={props.items[2].date}
-      />
-      <ExpenseItem 
-        title={props.items[3].title} 
-        amount={props.items[3].amount} 
-        date={props.items[3].date}
-      />
+      <ExpensesFilter selected={filteredYear} onChangeFilter={setFilteredYear}/>
+      {items
+        .filter(item => item.date.getFullYear() === parseInt(filteredYear))
+        .map(({ id, title, amount, date, location }, key) => <ExpenseItem {...{ key, id, title, amount, date, location }} onDelete={expenseDeleteHandler} />)
+      }
     </Card>
   );
-}
+};
 
 export default Expenses;
\ No newline at end of file
diff --git a/src/components/Expenses/ExpensesFilter.js b/src/components/Expenses/ExpensesFilter.js
index 809b6322..8c492963 100644
--- a/src/components/Expenses/ExpensesFilter.js
+++ b/src/components/Expenses/ExpensesFilter.js
@@ -2,23 +2,22 @@ import React from 'react';
 
 import './ExpensesFilter.css';
 
-const ExpensesFilter = (props) => {
-  const dropdownChangeHandler = (event) => {
-    props.onChangeFilter(event.target.value);
-  };
+const ExpensesFilter = ({
+  selected,
+  onChangeFilter
+}) => {
+  const currentYear = new Date().getFullYear();
+  const years = [1, 0, -1, -2, -3].map(offset => currentYear + offset)
 
   return (
-      <div className='expenses-filter'>
-        <div className='expenses-filter__control'>
-          <label>Filter by year</label>
-          <select value={props.selected} onChange={dropdownChangeHandler}>
-            <option value='2022'>2022</option>
-            <option value='2021'>2021</option>
-            <option value='2020'>2020</option>
-            <option value='2019'>2019</option>
-          </select>
-        </div>
+    <div className="expenses-filter">
+      <div className="expenses-filter__control">
+        <label>Filter by year</label>
+        <select value={selected} onChange={(event) => onChangeFilter(event.target.value)}>
+          {years.map((year, i) => <option key={i} value={year}>{year}</option>)}
+        </select>
       </div>
+    </div>
   );
 };
 
diff --git a/src/components/NewExpense/ExpenseForm.js b/src/components/NewExpense/ExpenseForm.js
index d4b7eb86..3d564a28 100644
--- a/src/components/NewExpense/ExpenseForm.js
+++ b/src/components/NewExpense/ExpenseForm.js
@@ -1,9 +1,10 @@
-import React, { useState } from "react";
-import "./ExpenseForm.css"
+import React, { useState } from 'react';
+import './ExpenseForm.css';
 
 const ExpenseForm = (props) => {
   const [enteredTitle, setEnteredTitle] = useState('');
   const [enteredAmount, setEnteredAmount] = useState('');
+  const [enteredLocation, setEnteredLocation] = useState('');
   const [enteredDate, setEnteredDate] = useState('');
 
   // const [userInput, setUserInput] = useState({
@@ -11,7 +12,7 @@ const ExpenseForm = (props) => {
   //   enteredAmount: '',
   //   enteredDate: ''
   // });
-  
+
 
   const titleChangeHandler = (event) => {
     setEnteredTitle(event.target.value);
@@ -32,6 +33,10 @@ const ExpenseForm = (props) => {
     // });
   };
 
+  const locationChangeHandler = (event) => {
+    setEnteredLocation(event.target.value);
+  };
+
   const dateChangeHandler = (event) => {
     setEnteredDate(event.target.value);
     // setUserInput({
@@ -46,7 +51,8 @@ const ExpenseForm = (props) => {
     const expenseData = {
       title: enteredTitle,
       amount: enteredAmount,
-      date: new Date(enteredDate)
+      date: new Date(enteredDate),
+      location: enteredLocation
     };
 
     // console.log(expenseData);
@@ -54,45 +60,54 @@ const ExpenseForm = (props) => {
     setEnteredTitle('');
     setEnteredAmount('');
     setEnteredDate('');
+    setEnteredLocation('');
   };
 
   return (
-  <form onSubmit={submitHandler}>
-    <div className="new-expense__controls">
-      <div className="new-expense__control">
-        <label>Title</label>
-        <input 
-          type="text" 
-          value={enteredTitle} 
-          onChange={titleChangeHandler} 
-        />
-      </div>
-      <div className ="new-expense__control">
-        <label>Amount</label>
-        <input 
-          type="number"  
-          min="0.01" 
-          step="0.01" 
-          value={enteredAmount}
-          onChange={amountChangeHandler} 
-        />
+    <form onSubmit={submitHandler}>
+      <div className="new-expense__controls">
+        <div className="new-expense__control">
+          <label>Title</label>
+          <input
+            type="text"
+            value={enteredTitle}
+            onChange={titleChangeHandler}
+          />
+        </div>
+        <div className="new-expense__control">
+          <label>Amount</label>
+          <input
+            type="number"
+            min="0.01"
+            step="0.01"
+            value={enteredAmount}
+            onChange={amountChangeHandler}
+          />
+        </div>
+        <div className="new-expense__control">
+          <label>Location</label>
+          <input
+            type="text"
+            value={enteredLocation}
+            onChange={locationChangeHandler}
+          />
+        </div>
+        <div className="new-expense__control">
+          <label>Date</label>
+          <input
+            type="date"
+            min="2019-01-01"
+            max="2022-12-31"
+            value={enteredDate}
+            onChange={dateChangeHandler}
+          />
+        </div>
       </div>
-      <div className="new-expense__control">
-        <label>Date</label>
-        <input 
-          type="date" 
-          min="2019-01-01" 
-          max="2022-12-31" 
-          value={enteredDate}
-          onChange={dateChangeHandler} 
-        />
+      <div className="new-expense__actions">
+        <button type="submit">Add Expense</button>
       </div>
-    </div>
-    <div className="new-expense__actions">
-      <button type="submit">Add Expense</button>
-    </div>
-  </form>
+    </form>
   );
-}; 
+};
 
 export default ExpenseForm;
\ No newline at end of file
diff --git a/src/components/NewExpense/NewExpense.js b/src/components/NewExpense/NewExpense.js
index d7cae7b8..affda665 100644
--- a/src/components/NewExpense/NewExpense.js
+++ b/src/components/NewExpense/NewExpense.js
@@ -2,17 +2,18 @@ import ExpenseForm from './ExpenseForm';
 import './NewExpense.css';
 
 const NewExpense = (props) => {
+
   const saveExpenseDataHandler = (enteredExpenseData) => {
     const expenseData = {
-      ...enteredExpenseData, 
-      id : Math.random().toString()
+      ...enteredExpenseData,
+      id: Math.random().toString()
     };
     props.onAddExpense(expenseData);
   };
 
   return (
     <div className="new-expense">
-      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />
+      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler}/>
     </div>
   );
 };
diff --git a/src/data.js b/src/data.js
new file mode 100644
index 00000000..610d0ecd
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,30 @@
+export const initialExpenses = [
+  {
+    id: 'e1',
+    title: 'Toilet Paper',
+    amount: 94.12,
+    date: new Date(2020, 7, 14),
+    location: 'London'
+  },
+  {
+    id: 'e2',
+    title: 'New TV',
+    amount: 799.49,
+    date: new Date(2021, 2, 12),
+    location: 'London'
+  },
+  {
+    id: 'e3',
+    title: 'Car Insurance',
+    amount: 294.67,
+    date: new Date(2021, 2, 28),
+    location: 'Paris'
+  },
+  {
+    id: 'e4',
+    title: 'New Desk (Wooden)',
+    amount: 450,
+    date: new Date(2021, 5, 12),
+    location: 'New York'
+  },
+];
\ No newline at end of file