diff --git a/Services/client/src/components/FileItemAction.vue b/Services/client/src/components/FileItemAction.vue
index 93c80ca..14cabe5 100644
--- a/Services/client/src/components/FileItemAction.vue
+++ b/Services/client/src/components/FileItemAction.vue
@@ -17,8 +17,8 @@ const props =
         <q-item clickable @click="() => $emit('edit')" id="FileltemActionEdit">
           <q-item-section>
             <div class="row items-center white">
-              <q-icon name="edit" color="positive" />
-              <span class="q-ml-sm">แก้ไข</span>
+              <q-icon name="o_edit" color="positive" />
+              <span class="q-ml-sm ">แก้ไข</span>
             </div>
           </q-item-section>
         </q-item>
@@ -29,7 +29,7 @@ const props =
         >
           <q-item-section>
             <div class="row items-center white">
-              <q-icon name="delete" color="negative" />
+              <q-icon  name="mdi-trash-can-outline" color="negative" />
               <span class="q-ml-sm">ลบ</span>
             </div>
           </q-item-section>
diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue
index 4fb2121..8a4409a 100644
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@@ -320,7 +320,7 @@ onMounted(() => {
       <template v-slot:body-cell-actions="actionData">
         <q-td class="justify-center">
           <div>
-            <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
+            <q-icon class="q-ma-sm" name="o_info" size="2em" color="primary" />
             <q-tooltip
               anchor="center left"
               self="center right"
@@ -334,7 +334,7 @@ onMounted(() => {
               flat
               color="positive"
               dense
-              icon="edit"
+              icon="o_edit"
               @click="
                 () => triggerFileEdit(actionData.row, actionData.row.pathname)
               "
@@ -344,7 +344,7 @@ onMounted(() => {
               flat
               color="negative"
               dense
-              icon="delete"
+              icon="mdi-trash-can-outline"
               @click="() => triggerFileDelete(actionData.row.pathname)"
               id="listViewFileDelete"
             />
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index b7be34a..cec5af3 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -311,7 +311,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         <template v-slot:body-cell-actions="actionsRow">
           <q-td class="justify-center">
             <div>
-              <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
+              <q-icon class="q-ma-sm" name="o_info" size="2em" color="primary" />
               <q-tooltip
                 anchor="center left"
                 self="center right"
@@ -325,7 +325,8 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 flat
                 color="positive"
                 dense
-                icon="edit"
+                
+                icon="o_edit"
                 @click.stop="
                   triggerFolderEdit(
                     actionsRow.row.name,
@@ -334,11 +335,12 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 "
                 id="listViewFolderEdit"
               />
+              
               <q-btn
                 flat
                 color="negative"
                 dense
-                icon="delete"
+                icon="mdi-trash-can-outline"
                 @click.stop="triggerFolderDelete(actionsRow.row.pathname)"
                 id="listViewFolderDelete"
               />
@@ -409,7 +411,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
         <template v-slot:body-cell-actions="actionsRow">
           <q-td class="justify-center">
             <div>
-              <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
+              <q-icon class="q-ma-sm" name="o_info" size="2em" color="primary" />
               <q-tooltip
                 anchor="center left"
                 self="center right"
@@ -423,7 +425,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 flat
                 color="positive"
                 dense
-                icon="edit"
+                icon="o_edit"
                 @click="
                   () => triggerFileEdit(actionsRow.row, actionsRow.row.pathname)
                 "
@@ -433,7 +435,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 flat
                 color="negative"
                 dense
-                icon="delete"
+                icon="mdi-trash-can-outline"
                 @click="() => triggerFileDelete(actionsRow.row.pathname)"
                 id="listViewFileDelete"
               />