diff --git a/app/Models/Common/Item.php b/app/Models/Common/Item.php
index 2599e5e33..77091aac6 100644
--- a/app/Models/Common/Item.php
+++ b/app/Models/Common/Item.php
@@ -4,6 +4,7 @@ namespace App\Models\Common;
 
 use App\Abstracts\Model;
 use App\Models\Document\Document;
+use App\Utilities\Str;
 use App\Traits\Currencies;
 use App\Traits\Media;
 use Bkwld\Cloner\Cloneable;
@@ -138,6 +139,11 @@ class Item extends Model
             ->select('items.*');
     }
 
+    public function getInitialsAttribute($value)
+    {
+        return Str::getInitials($this->name);
+    }
+
     /**
      * Get the current balance.
      *
diff --git a/resources/assets/js/components/AkauntingSearch.vue b/resources/assets/js/components/AkauntingSearch.vue
index 14d509fd9..ebf00d8bd 100644
--- a/resources/assets/js/components/AkauntingSearch.vue
+++ b/resources/assets/js/components/AkauntingSearch.vue
@@ -31,9 +31,9 @@
             <input
             v-if="!show_date"
             type="text"
-            class="w-full bg-transparent text-black text-sm border-0 px-10 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100"
-            :class="[{'px-4' : !show_icon}]"
-            :placeholder="placeholder"
+            class="w-full bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100"
+            :class="!show_icon ? 'px-4' : 'px-10'"
+            :placeholder="dynamicPlaceholder"
             :ref="'input-search-field-' + _uid"
             v-model="search"
             @focus="onInputFocus"
@@ -47,8 +47,9 @@
                 @on-open="onInputFocus"
                 @blur="onBlur"
                 :config="dateConfig"
-                class="w-full bg-transparent text-black text-sm border-0 px-10 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100 datepicker"
-                :placeholder="placeholder"
+                class="w-full bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100 datepicker"
+                :class="!show_icon ? 'px-4' : 'px-10'"
+                :placeholder="dynamicPlaceholder"
                 :ref="'input-search-date-field-' + _uid"
                 value=""
                 @focus="onInputFocus"
@@ -56,7 +57,13 @@
                 @keyup.enter="onInputConfirm"
             >
             </flat-picker>
-                <span class="material-icons absolute bottom-1 ltr:left-3 rtl:right-3 text-lg text-black" style="z-index:-1;">search</span>
+                <span
+                    v-if="show_icon"
+                    class="material-icons absolute bottom-1 ltr:left-3 rtl:right-3 text-lg text-black"
+                    style="z-index:-1;"
+                >
+                    search
+                </span>
 
             <button type="button" class="absolute ltr:right-0 rtl:left-0 top-2 clear" v-if="show_close_icon" @click="onSearchAndFilterClear">
                 <span class="material-icons text-sm">close</span>
@@ -126,6 +133,12 @@ export default {
             default: 'Search or filter results...',
             description: 'Input placeholder'
         },
+        selectPlaceholder: {
+            type: String,
+        },
+        enterPlaceholder: {
+            type: String,
+        },
         searchText: {
             type: String,
             default: 'Search for this text',
@@ -200,7 +213,9 @@ export default {
             show_close_icon: false,
             show_icon: true,
             equal_image: app_url +  "/public/img/tailwind_icons/not-equal.svg",
-            input_focus: false
+            input_focus: false,
+            defaultPlaceholder: this.placeholder,
+            dynamicPlaceholder: this.placeholder,
         };
     },
 
@@ -370,10 +385,11 @@ export default {
         },
 
         onOptionSelected(value) {
-            this.show_icon = false;
             this.current_value = value;
             this.range = false;
 
+            this.onChangeSearchAndFilterText(this.selectPlaceholder, false);
+            
             let option = false;
             let option_url = false;
 
@@ -505,6 +521,8 @@ export default {
             this.show_close_icon = true;
             let select_value = false;
 
+            this.onChangeSearchAndFilterText(this.enterPlaceholder, false);
+
             for (let i = 0; i < this.values.length; i++) {
                 if (this.values[i].key == value) {
                     select_value = this.values[i].value;
@@ -561,6 +579,10 @@ export default {
             this.selected_values.splice(index, 1);
 
             this.show_date = false;
+            
+            if (this.filter_index == 0) {
+                this.onChangeSearchAndFilterText(this.defaultPlaceholder, true);
+            }
 
             this.filter_last_step = 'options';
         },
@@ -574,6 +596,11 @@ export default {
             this.onInputConfirm();
         },
 
+        onChangeSearchAndFilterText(arg, param) {
+            this.dynamicPlaceholder = arg;
+            this.show_icon = param;
+        },
+
         convertOption(options) {
             let values = [];
 
@@ -742,6 +769,9 @@ export default {
     },
 
     mounted() {
+        if (this.filter_index > 0) {
+            this.onChangeSearchAndFilterText(this.enterPlaceholder, false);
+        }
     },
 
     computed: {
diff --git a/resources/lang/en-GB/general.php b/resources/lang/en-GB/general.php
index e71adf063..5c54baa21 100644
--- a/resources/lang/en-GB/general.php
+++ b/resources/lang/en-GB/general.php
@@ -270,6 +270,8 @@ return [
     'placeholder' => [
         'search'            => 'Type to search..',
         'search_and_filter' => 'Search or filter results..',
+        'select_and_filter' => 'Select one of the available options below',
+        'enter_and_filter'  => 'Hit enter to filter the results, or set a new filter',
         'contact_search'    => 'Type a :type name',
         'item_search'       => 'Type an item name',
     ],
diff --git a/resources/views/components/documents/form/items.blade.php b/resources/views/components/documents/form/items.blade.php
index 9df614518..00f6497a1 100644
--- a/resources/views/components/documents/form/items.blade.php
+++ b/resources/views/components/documents/form/items.blade.php
@@ -77,7 +77,7 @@
 
                         @stack('remove_th_start')
 
-                        <th class="border-t-0 border-r-0 border-b-0" style="vertical-align:bottom;">
+                        <th class="border-t-0 border-r-0 border-b-0 align-bottom" style="width:24px; display:block;">
                             <div></div>
                         </th>
 
diff --git a/resources/views/components/layouts/admin/scripts.blade.php b/resources/views/components/layouts/admin/scripts.blade.php
index 3afad24b9..84f19c3c7 100644
--- a/resources/views/components/layouts/admin/scripts.blade.php
+++ b/resources/views/components/layouts/admin/scripts.blade.php
@@ -31,12 +31,14 @@
         const menuBackground = document.querySelector(".js-menu-background");
         const menuClose = document.querySelector("[data-menu-close]");
 
+        //animation for notification icon
         if (document.querySelector('[data-menu="notifications-menu"]')) {
             setTimeout(function() {
                 document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate");
             }, 6000);
         }
 
+        //chevron active class action
         Array.from(detailsEL).forEach((el) => {
                 el.addEventListener("toggle", function(e) {
                     if (e.target.querySelector(".material-icons-outlined")) {
@@ -52,18 +54,21 @@
             }
         );
 
+        //container animation when left menu shrinking
         function contentTransitionLeft() {
             sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0");
             sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64");
             toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90");
         }
 
+        //container animation when left menu unshrinking
         function contentTransitionRight() {
             sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
             sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
             toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
         }
 
+        //if there are notifications, remove count badge
         function notificationCount(action) {
             let notification_count = document.querySelector('[data-notification-count]');
 
@@ -72,6 +77,7 @@
             }
         }
 
+        //slide menu actions together responsive version
         function slideMenu() {
             if (document.body.clientWidth <= 1280) {
                 mobileMenuHidden();
@@ -99,10 +105,12 @@
             slideMenu();
         });
 
+        //general left menu actions (show settings menu etc..)
         function toggleMenu(iconButton, event) {
             const menuRef = iconButton.getAttribute("data-menu");
             const icon = iconButton.children[0].getAttribute("name");
 
+            //if event target, profile
             if (iconButton.getAttribute("data-menu") === "profile-menu") {
                 if (iconButton.children[0].textContent != "cancel") {
                     iconButton.children[0].classList.remove("hidden");
@@ -113,6 +121,7 @@
                 }
             }
 
+            //remove active (cancel text) class form target icon
             menuButtons.forEach((button) => {
                 if (icon) {
                     if (button.getAttribute("data-menu") !== menuRef && iconButton.children[0].textContent != "cancel") {
@@ -123,6 +132,7 @@
             });
 
             menus.forEach((menu) => {
+                //add active (cancel text) class form target icon
                 if (menu.classList.contains(menuRef) && iconButton.children[0].textContent != "cancel") {
                     iconButton.children[0].textContent = "cancel";
                     iconButton.children[0].classList.add("active");
@@ -135,6 +145,7 @@
 
                     notificationCount("none");
 
+                //remove active (cancel text) class form target icon
                 } else if (menu.classList.contains(menuRef) && iconButton.children[0].textContent == "cancel") {
                     iconButton.children[0].textContent = icon;
                     iconButton.children[0].classList.remove("active");
@@ -146,12 +157,13 @@
                     menuClose.classList.add("hidden");
 
                     notificationCount("flex");
-
+                //left menu slide to left
                 } else {
                     menu.classList.add("ltr:-left-80", "rtl:-right-80");
                     menu.classList.remove("ltr:left-14", "rtl:right-14");
                 }
 
+                //close icon click event
                 menuClose.addEventListener("click", function() {
                     menu.classList.add("ltr:-left-80", "rtl:-right-80");
                     menu.classList.remove("ltr:left-14", "rtl:right-14");
@@ -165,6 +177,7 @@
         }
 
         if (document.body.clientWidth >= 1280) {
+            //if url have profile menu, profile menu show
             if (is_profile_menu == 1) {
                 let profile_menu_html = document.querySelector(".profile-menu");
                 let profile_icon_html = document.querySelector("[data-menu='profile-menu']");
@@ -180,6 +193,7 @@
                 toggleButton.classList.add("invisible");
             }
 
+            //if url have settings menu, settings menu show
             if (is_settings_menu == 1) {
                 let settings_menu_html = document.querySelector(".settings-menu");
                 let settings_icon_html = document.querySelector("[data-menu='settings-menu']");
@@ -193,6 +207,7 @@
             }
         }
 
+        //if mobile menu, menu is active
         function mobileMenuActive() {
             navbarMenu.classList.add("ltr:left-0", "rtl:right-0");
             navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80");
@@ -201,6 +216,7 @@
             menuBackground.classList.remove("invisible");
         }
 
+        //if mobile menu, menu is hidden
         function mobileMenuHidden() {
             navbarMenu.classList.remove("ltr:left-0", "rtl:right-0");
             navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80");
diff --git a/resources/views/components/layouts/portal/scripts.blade.php b/resources/views/components/layouts/portal/scripts.blade.php
index 71c9a68a5..33a36c78f 100644
--- a/resources/views/components/layouts/portal/scripts.blade.php
+++ b/resources/views/components/layouts/portal/scripts.blade.php
@@ -31,12 +31,14 @@
         const menuBackground = document.querySelector(".js-menu-background");
         const menuClose = document.querySelector("[data-menu-close]");
 
+        //animation for notification icon
         if (document.querySelector('[data-menu="notifications-menu"]')) {
             setTimeout(function() {
                 document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate");
             }, 6000);
         }
 
+        //chevron active class action
         Array.from(detailsEL).forEach((el) => {
                 el.addEventListener("toggle", function(e) {
                     if(e.target.querySelector(".material-icons-outlined")) {
@@ -48,18 +50,21 @@
             }
         );
 
+        //container animation when left menu shrinking
         function contentTransitionLeft() {
             sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0");
             sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64");
             toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90");
         }
 
+        //container animation when left menu unshrinking
         function contentTransitionRight() {
             sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
             sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
             toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
         }
 
+        //slide menu actions together responsive version
         function slideMenu() {
             if (document.body.clientWidth <= 1280) {
                 mobileMenuHidden();
@@ -87,10 +92,12 @@
             slideMenu();
         });
 
+        //general left menu actions (show settings menu etc..)
         function toggleMenu(iconButton, event) {
             const menuRef = iconButton.getAttribute("data-menu");
             const icon = iconButton.children[0].getAttribute("name");
 
+            //if event target, profile
             if (iconButton.getAttribute("data-menu") === "profile-menu") {
                 if (iconButton.children[0].textContent != "cancel") {
                     iconButton.children[0].classList.remove("hidden");
@@ -101,6 +108,7 @@
                 }
             }
 
+            //remove active (cancel text) class form target icon
             menuButtons.forEach((button) => {
                 if (icon) {
                     if (button.getAttribute("data-menu") !== menuRef && iconButton.children[0].textContent != "cancel") {
@@ -111,6 +119,7 @@
             });
 
             menus.forEach((menu) => {
+                //add active (cancel text) class form target icon
                 if (menu.classList.contains(menuRef) && iconButton.children[0].textContent != "cancel") {
                     iconButton.children[0].textContent = "cancel";
                     iconButton.children[0].classList.add("active");
@@ -121,6 +130,7 @@
                     toggleButton.classList.add("invisible");
                     menuClose.classList.remove("hidden");
 
+                //remove active (cancel text) class form target icon
                 } else if (menu.classList.contains(menuRef) && iconButton.children[0].textContent == "cancel") {
                     iconButton.children[0].textContent = icon;
                     iconButton.children[0].classList.remove("active");
@@ -130,11 +140,13 @@
                     mainContent.classList.remove("hidden");
                     toggleButton.classList.remove("invisible");
                     menuClose.classList.add("hidden");
+                //left menu slide to left
                 } else {
                     menu.classList.add("ltr:-left-80", "rtl:-right-80");
                     menu.classList.remove("ltr:left-14", "rtl:right-14");
                 }
 
+                //close icon click event
                 menuClose.addEventListener("click", function() {
                     menu.classList.add("ltr:-left-80", "rtl:-right-80");
                     iconButton.children[0].textContent = icon;
@@ -147,6 +159,7 @@
         }
 
         if (document.body.clientWidth >= 1280) {
+            //if url have profile menu, profile menu show
             if (is_profile_menu == 1) {
                 let profile_menu_html = document.querySelector(".profile-menu");
                 let profile_icon_html = document.querySelector("[data-menu='profile-menu']");
@@ -164,6 +177,7 @@
             }
         }
 
+        //if mobile menu, menu is active
         function mobileMenuActive() {
             navbarMenu.classList.add("ltr:left-0", "rtl:right-0");
             navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80");
@@ -172,6 +186,7 @@
             menuBackground.classList.remove("invisible");
         }
 
+        //if mobile menu, menu is hidden
         function mobileMenuHidden() {
             navbarMenu.classList.remove("ltr:left-0", "rtl:right-0");
             navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80");
diff --git a/resources/views/components/search-string.blade.php b/resources/views/components/search-string.blade.php
index c7b3f7330..66c4d73e2 100644
--- a/resources/views/components/search-string.blade.php
+++ b/resources/views/components/search-string.blade.php
@@ -1,5 +1,7 @@
 <akaunting-search
     placeholder="{{ (!empty($filters)) ? trans('general.placeholder.search_and_filter') : trans('general.search_placeholder')}}"
+    select-placeholder="{{ trans('general.placeholder.select_and_filter') }}"
+    enter-placeholder="{{ trans('general.placeholder.enter_and_filter') }}"
     search-text="{{ trans('general.search_text') }}"
     operator-is-text="{{ trans('general.is') }}"
     operator-is-not-text="{{ trans('general.isnot') }}"