diff --git a/src/components/List/__tests__/List.test.cy.tsx b/src/components/List/__tests__/List.test.cy.tsx
index d9bd54e..7aa56b1 100644
--- a/src/components/List/__tests__/List.test.cy.tsx
+++ b/src/components/List/__tests__/List.test.cy.tsx
@@ -4,21 +4,23 @@ import { List, Status } from '@components';
 describe('Testing List Component', () => {
   beforeEach(() => {
     cy.mount(<List list={[
-      {
-        name: 'First Item',
-        status: Status.DONE
-      },
-      {
-        name: 'Second Item',
-        status: Status.TODO
-      },
-      {
-        name: 'Third Item',
-        status: Status.DONE
-      }
-    ]} />);
+        {
+          name: 'First Item',
+          status: Status.DONE
+        },
+        {
+          name: 'Second Item',
+          status: Status.TODO
+        },
+        {
+          name: 'Third Item',
+          status: Status.DONE
+        }
+      ]}
+      handleChangeState={() => {}}
+    />);
   })
   it('Show All Items in a list', () => {
-    cy.get('input').should('have.length', 3);
+    cy.get('[role="textbox"]').should('have.length', 3);
   })
 })
diff --git a/src/components/List/__tests__/List.test.tsx b/src/components/List/__tests__/List.test.tsx
index 6da62e6..01336b6 100644
--- a/src/components/List/__tests__/List.test.tsx
+++ b/src/components/List/__tests__/List.test.tsx
@@ -6,19 +6,21 @@ describe('Testing List Component', () => {
     beforeEach(() => {
         // fetchMock.resetMocks();
         render(<List list={[
-            {
-              name: 'First Item',
-              status: Status.DONE
-            },
-            {
-              name: 'Second Item',
-              status: Status.TODO
-            },
-            {
-              name: 'Third Item',
-              status: Status.DONE
-            }
-        ]} />)
+              {
+                name: 'First Item',
+                status: Status.DONE
+              },
+              {
+                name: 'Second Item',
+                status: Status.TODO
+              },
+              {
+                name: 'Third Item',
+                status: Status.DONE
+              }
+          ]}
+          handleChangeState={() => {}}
+        />)
     });
     it('Show All Items in a list', async () => {
         /* fetchMock.mockResponseOnce(JSON.stringify({
diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx
index f4d479f..34b163a 100644
--- a/src/components/List/index.tsx
+++ b/src/components/List/index.tsx
@@ -24,6 +24,10 @@ type TListProps = {
    * Is this the onClick Event of the button.
    */
   onClickRemoveItem?: MouseEventHandler<HTMLButtonElement> |undefined
+  /**
+   * Is this the on Event triggered by the checkbox.
+   */
+  handleChangeState?: ChangeEventHandler<HTMLInputElement>
 };
 
 const List: FC<TListProps> = ({
@@ -31,7 +35,8 @@ const List: FC<TListProps> = ({
   placeholderInput,
   onChangeInput,
   onClickAddItem,
-  onClickRemoveItem
+  onClickRemoveItem,
+  handleChangeState
 }) => {
   return (
     <div className="List">
@@ -39,7 +44,7 @@ const List: FC<TListProps> = ({
         <tbody>
           { list !== undefined && list.map((item, index) => (
             <tr key={index}>
-              <td><Item name={item.name} status={item.status} /></td>
+              <td><Item name={item.name} status={item.status} handleChange={handleChangeState} /></td>
               <td>
                 <div className="delete-button-container">
                   <Button