diff --git a/src/app/components/item-actions/item-actions.component.ts b/src/app/components/item-actions/item-actions.component.ts
index 291660f..cd2f63b 100644
--- a/src/app/components/item-actions/item-actions.component.ts
+++ b/src/app/components/item-actions/item-actions.component.ts
@@ -6,9 +6,8 @@ import { Item } from 'src/app/models/item';
   selector: 'app-item-actions',
   template: `
     <div>
-      <small>Mark as </small>
       <button
-        *ngIf="item.dones[order] === false || item.dones[order] === null"
+        [class.disabled]="!(item.dones[order] === false || item.dones[order] === null)"
         (click)="markAsDone()"
         type="button"
         class="btn btn-sm btn-outline-success mr-2"
@@ -17,7 +16,7 @@ import { Item } from 'src/app/models/item';
       </button>
 
       <button
-        *ngIf="item.dones[order] === true || item.dones[order] === null"
+        [class.disabled]="!(item.dones[order] === true || item.dones[order] === null)"
         (click)="markAsTodo()"
         type="button"
         class="btn btn-sm btn-outline-secondary mr-2"
@@ -25,12 +24,12 @@ import { Item } from 'src/app/models/item';
         To do
       </button>
       <button
-        *ngIf="item.dones[order] !== null"
+        [class.disabled]="!(item.dones[order] !== null)"
         (click)="clear()"
         type="button"
         class="btn btn-sm btn-link-danger"
       >
-        Clear
+        Reset
       </button>
     </div>
   `,
diff --git a/src/app/components/item/item.component.ts b/src/app/components/item/item.component.ts
index 95c23dd..0f32696 100644
--- a/src/app/components/item/item.component.ts
+++ b/src/app/components/item/item.component.ts
@@ -22,14 +22,14 @@ import { MarkAsDone } from 'src/app/types/mark_as_done.type';
           </div>
         </h2>
       </div>
-      <div class="card-body">
+      <div class="card-body p-0">
         <ul class="list-group">
           <li class="list-group-item">
             <div
               class="d-flex justify-content-between align-items-center list-group-item-action"
             >
               <div>
-                <i class="icons bi-1-circle-fill gold"></i>
+                <!-- <i class="icons bi-1-circle-fill gold"></i> -->
                 {{ item.first }}
               </div>
               <app-item-actions
@@ -47,7 +47,7 @@ import { MarkAsDone } from 'src/app/types/mark_as_done.type';
             class="list-group-item d-flex justify-content-between align-items-center list-group-item-action"
           >
             <div>
-              <i class="icons bi-2-circle-fill platinium"></i>
+              <!-- <i class="icons bi-2-circle-fill platinium"></i> -->
               {{ item.second }}
             </div>
             <app-item-actions
@@ -64,7 +64,7 @@ import { MarkAsDone } from 'src/app/types/mark_as_done.type';
             class="list-group-item d-flex justify-content-between align-items-center list-group-item-action"
           >
             <div>
-              <i class="icons bi-3-circle-fill bronce"></i>
+              <!-- <i class="icons bi-3-circle-fill bronce"></i> -->
               {{ item.third }}
             </div>
             <app-item-actions