diff --git a/.editorconfig b/.editorconfig
index 134bc64..a1f0040 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -13,7 +13,7 @@ block_comment_start = /*
 block_comment = *
 block_comment_end = */
 
-[*.{scss,css,js,json,yml,md}]
+[*.{scss,css,js,json,yml}]
 indent_size = 2
 
 [acf-json/*.json]
diff --git a/dist/account/index.html b/dist/account/index.html
index e768b75..df480d6 100644
--- a/dist/account/index.html
+++ b/dist/account/index.html
@@ -535,7 +535,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -701,8 +701,8 @@ <h3 class="app-card__title">Notifications</h3>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/account/notifications/index.html b/dist/account/notifications/index.html
index 6249b4b..91b7737 100644
--- a/dist/account/notifications/index.html
+++ b/dist/account/notifications/index.html
@@ -538,7 +538,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -697,8 +697,8 @@ <h3>Notifications</h3>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/account/password/index.html b/dist/account/password/index.html
index c4d0623..a11e8c5 100644
--- a/dist/account/password/index.html
+++ b/dist/account/password/index.html
@@ -538,7 +538,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -651,8 +651,8 @@ <h3>Set up a new password</h3>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/account/profile/index.html b/dist/account/profile/index.html
index 2db9a9c..9af9ffc 100644
--- a/dist/account/profile/index.html
+++ b/dist/account/profile/index.html
@@ -538,7 +538,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -674,8 +674,8 @@ <h3>Address</h3>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/categories/index.html b/dist/categories/index.html
index f8999bf..065d9fd 100644
--- a/dist/categories/index.html
+++ b/dist/categories/index.html
@@ -535,7 +535,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -575,7 +575,7 @@ <h3 class="notification-card__title">
                             <h1 class="app-heading__title">Categories</h1>
                         </div>
                         <div class="app-heading__actions">
-                            <a href="" class="btn btn--primary btn--icon">
+                            <a href="/item/edit/" class="btn btn--primary btn--icon">
                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <line class='vertical-line' x1='12' y1='5' x2='12' y2='19'></line>
                                     <line x1='5' y1='12' x2='19' y2='12'></line>
@@ -651,7 +651,7 @@ <h1 class="app-heading__title">Categories</h1>
                                                     <td x-text="item.description"></td>
                                                     <td>
                                                         <div class="data-table__actions">
-                                                            <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                                            <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                                                     <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'></path>
                                                                     <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'></path>
@@ -730,8 +730,8 @@ <h1 class="app-heading__title">Categories</h1>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/customers/index.html b/dist/customers/index.html
index 9efad34..0b1acfc 100644
--- a/dist/customers/index.html
+++ b/dist/customers/index.html
@@ -535,7 +535,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -575,7 +575,7 @@ <h3 class="notification-card__title">
                             <h1 class="app-heading__title">Customers</h1>
                         </div>
                         <div class="app-heading__actions">
-                            <a href="" class="btn btn--primary btn--icon">
+                            <a href="/item/edit/" class="btn btn--primary btn--icon">
                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <line class='vertical-line' x1='12' y1='5' x2='12' y2='19'></line>
                                     <line x1='5' y1='12' x2='19' y2='12'></line>
@@ -592,11 +592,9 @@ <h1 class="app-heading__title">Customers</h1>
                         <div class="app-card__header">
                             <div class="app-card__actions">
                                 <form class="search-form" @submit.prevent>
-                                    <span class="search-form__icon">
-                                        <svg aria-hidden='true' focusable='false' height='24' role='img' style='fill: currentColor' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
-                                            <path d='M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z'></path>
-                                        </svg>
-                                    </span>
+                                    <svg aria-hidden='true' focusable='false' height='24' role='img' style='fill: currentColor' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='search-form__icon'>
+                                        <path d='M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z'></path>
+                                    </svg>
                                     <input x-model="search" class="search-form__control" type="text" placeholder="Search..." title="Search" />
                                 </form>
                             </div>
@@ -677,7 +675,7 @@ <h1 class="app-heading__title">Customers</h1>
                                                     <td x-text="item.email"></td>
                                                     <td>
                                                         <div class="data-table__actions">
-                                                            <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                                            <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                                                     <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'></path>
                                                                     <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'></path>
@@ -756,8 +754,8 @@ <h1 class="app-heading__title">Customers</h1>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/index.html b/dist/index.html
index e76075c..785aea6 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -527,7 +527,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -570,13 +570,13 @@ <h1 class="app-heading__title">Home</h1>
                             </div>
                         </div>
                         <div class="app-heading__actions">
-                            <a href="" class="btn btn--outline-primary btn--icon">
-                                <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
-                                    <line x1='12' y1='20' x2='12' y2='10'></line>
-                                    <line x1='18' y1='20' x2='18' y2='4'></line>
-                                    <line x1='6' y1='20' x2='6' y2='16'></line>
+                            <a href="/orders/" class="btn btn--outline-primary btn--icon">
+                                <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
+                                    <circle cx='9' cy='21' r='1'></circle>
+                                    <circle cx='20' cy='21' r='1'></circle>
+                                    <path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'></path>
                                 </svg>
-                                Statistics
+                                Orders
                             </a>
                         </div>
                     </div>
@@ -683,8 +683,8 @@ <h2 class="app-card__title">Active Users</h2>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/product/edit/index.html b/dist/item/edit/index.html
similarity index 99%
rename from dist/product/edit/index.html
rename to dist/item/edit/index.html
index 1706902..bfda794 100644
--- a/dist/product/edit/index.html
+++ b/dist/item/edit/index.html
@@ -13,12 +13,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Add/Edit Item - Spruce CSS Root Admin Template</title>
-    <link rel="canonical" href="https://root-admin.sprucecss.com/product/edit/" />
+    <link rel="canonical" href="https://root-admin.sprucecss.com/item/edit/" />
     <meta name="generator" content="Eleventy v2.0.1" />
     <meta property="og:site_name" content="Spruce CSS Root Admin Template" />
     <meta property="og:title" content="Add/Edit Item - Spruce CSS Root Admin Template" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://root-admin.sprucecss.com/product/edit/" />
+    <meta property="og:url" content="https://root-admin.sprucecss.com/item/edit/" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta property="og:image" content="https://root-admin.sprucecss.com/img/social-share.png" />
     <meta name="twitter:image" content="https://root-admin.sprucecss.com/img/social-share.png" />
@@ -538,7 +538,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -578,7 +578,7 @@ <h3 class="notification-card__title">
                             <h1 class="app-heading__title">Add/Edit Item</h1>
                         </div>
                         <div class="app-heading__actions">
-                            <a href="/product/view/" class="btn btn--primary btn--icon">
+                            <a href="/item/view/" class="btn btn--primary btn--icon">
                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'></path>
                                     <circle cx='12' cy='12' r='3'></circle>
@@ -1045,7 +1045,7 @@ <h2 class="app-card__title">General</h2>
                                                     </li>
                                                 </ul>
                                                 <template x-teleport="body">
-                                                    <div class="modal-backdrop" x-show="open" @keydown.escape="close">
+                                                    <div class="modal-backdrop" x-show="open" x-transition @keydown.escape="close">
                                                         <div @click.away="close" aria-modal="true" class="modal modal--media" data-dropzone="Drag & drop your images and files here" role="dialog" tabindex="0" x-trap.noscroll="open">
                                                             <div class="modal__header">
                                                                 <div class="modal__header-caption">
@@ -1322,7 +1322,7 @@ <h2 class="modal__title">Media</h2>
                                                     Open modal
                                                 </button>
                                                 <template x-teleport="body">
-                                                    <div class="modal-backdrop" x-show="open" @keydown.escape="close">
+                                                    <div class="modal-backdrop" x-show="open" x-transition @keydown.escape="close">
                                                         <div role="dialog" aria-modal="true" tabindex="0" class="modal" @click.away="close" x-trap.noscroll="open">
                                                             <div class="modal__header">
                                                                 <div class="modal__header-caption">
@@ -1608,8 +1608,8 @@ <h2 class="app-card__title">Settings</h2>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/product/view/index.html b/dist/item/view/index.html
similarity index 99%
rename from dist/product/view/index.html
rename to dist/item/view/index.html
index b8a20c9..28695d9 100644
--- a/dist/product/view/index.html
+++ b/dist/item/view/index.html
@@ -13,12 +13,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>View Item - Spruce CSS Root Admin Template</title>
-    <link rel="canonical" href="https://root-admin.sprucecss.com/product/view/" />
+    <link rel="canonical" href="https://root-admin.sprucecss.com/item/view/" />
     <meta name="generator" content="Eleventy v2.0.1" />
     <meta property="og:site_name" content="Spruce CSS Root Admin Template" />
     <meta property="og:title" content="View Item - Spruce CSS Root Admin Template" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://root-admin.sprucecss.com/product/view/" />
+    <meta property="og:url" content="https://root-admin.sprucecss.com/item/view/" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta property="og:image" content="https://root-admin.sprucecss.com/img/social-share.png" />
     <meta name="twitter:image" content="https://root-admin.sprucecss.com/img/social-share.png" />
@@ -538,7 +538,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -578,7 +578,7 @@ <h3 class="notification-card__title">
                             <h1 class="app-heading__title">View Item</h1>
                         </div>
                         <div class="app-heading__actions">
-                            <a href="/product/edit/" class="btn btn--primary btn--icon">
+                            <a href="/item/edit/" class="btn btn--primary btn--icon">
                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'></path>
                                     <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'></path>
@@ -697,8 +697,8 @@ <h1 class="app-heading__title">View Item</h1>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/orders/index.html b/dist/orders/index.html
index 70898dc..35f6155 100644
--- a/dist/orders/index.html
+++ b/dist/orders/index.html
@@ -535,7 +535,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -575,7 +575,7 @@ <h3 class="notification-card__title">
                             <h1 class="app-heading__title">Orders</h1>
                         </div>
                         <div class="app-heading__actions">
-                            <a href="" class="btn btn--primary btn--icon">
+                            <a href="/item/edit/" class="btn btn--primary btn--icon">
                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <line class='vertical-line' x1='12' y1='5' x2='12' y2='19'></line>
                                     <line x1='5' y1='12' x2='19' y2='12'></line>
@@ -592,11 +592,9 @@ <h1 class="app-heading__title">Orders</h1>
                         <div class="app-card__header">
                             <div class="app-card__actions">
                                 <form class="search-form" @submit.prevent>
-                                    <span class="search-form__icon">
-                                        <svg aria-hidden='true' focusable='false' height='24' role='img' style='fill: currentColor' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
-                                            <path d='M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z'></path>
-                                        </svg>
-                                    </span>
+                                    <svg aria-hidden='true' focusable='false' height='24' role='img' style='fill: currentColor' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='search-form__icon'>
+                                        <path d='M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z'></path>
+                                    </svg>
                                     <input x-model="search" class="search-form__control" type="text" placeholder="Search..." title="Search" />
                                 </form>
                                 <div class="data-table-filter" x-data="{ open: false }" @click.outside="open = false">
@@ -715,7 +713,7 @@ <h1 class="app-heading__title">Orders</h1>
                                                     <td x-text="item.customer"></td>
                                                     <td>
                                                         <div class="data-table__actions">
-                                                            <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                                            <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                                                     <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'></path>
                                                                     <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'></path>
@@ -794,8 +792,8 @@ <h1 class="app-heading__title">Orders</h1>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/password-reset/index.html b/dist/password-reset/index.html
index f7e1a2e..81e724d 100644
--- a/dist/password-reset/index.html
+++ b/dist/password-reset/index.html
@@ -164,8 +164,8 @@ <h1 class="auth-form__title">Password
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/products/index.html b/dist/products/index.html
index a1dd2d7..eab1452 100644
--- a/dist/products/index.html
+++ b/dist/products/index.html
@@ -535,7 +535,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -575,7 +575,7 @@ <h3 class="notification-card__title">
                             <h1 class="app-heading__title">Products</h1>
                         </div>
                         <div class="app-heading__actions">
-                            <a href="" class="btn btn--primary btn--icon">
+                            <a href="/item/edit/" class="btn btn--primary btn--icon">
                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <line class='vertical-line' x1='12' y1='5' x2='12' y2='19'></line>
                                     <line x1='5' y1='12' x2='19' y2='12'></line>
@@ -644,11 +644,9 @@ <h2 class="app-widget__title">Best Selling</h2>
                         <div class="app-card__header">
                             <div class="app-card__actions">
                                 <form class="search-form" @submit.prevent>
-                                    <span class="search-form__icon">
-                                        <svg aria-hidden='true' focusable='false' height='24' role='img' style='fill: currentColor' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='icon'>
-                                            <path d='M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z'></path>
-                                        </svg>
-                                    </span>
+                                    <svg aria-hidden='true' focusable='false' height='24' role='img' style='fill: currentColor' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='search-form__icon'>
+                                        <path d='M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z'></path>
+                                    </svg>
                                     <input x-model="search" class="search-form__control" type="text" placeholder="Search..." title="Search" />
                                 </form>
                                 <div class="data-table-filter" x-data="{ open: false }" @click.outside="open = false">
@@ -764,13 +762,13 @@ <h2 class="app-widget__title">Best Selling</h2>
                                                     </td>
                                                     <td>
                                                         <div class="data-table__actions">
-                                                            <a href="/product/view/" class="btn btn--light btn--sm btn--icon" aria-label="View">
+                                                            <a href="/item/view/" class="btn btn--light btn--sm btn--icon" aria-label="View">
                                                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                                                     <path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'></path>
                                                                     <circle cx='12' cy='12' r='3'></circle>
                                                                 </svg>
                                                             </a>
-                                                            <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                                            <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                                                 <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                                                     <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'></path>
                                                                     <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'></path>
@@ -849,8 +847,8 @@ <h2 class="app-widget__title">Best Selling</h2>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/settings/index.html b/dist/settings/index.html
index a7fb71b..114904f 100644
--- a/dist/settings/index.html
+++ b/dist/settings/index.html
@@ -535,7 +535,7 @@ <h3 class="notification-card__title">
                         </div>
                     </div>
                     <template x-teleport="body">
-                        <div class="modal-backdrop" x-show="search.open" @keydown.escape="search.close">
+                        <div class="modal-backdrop" x-show="search.open" x-transition @keydown.escape="search.close">
                             <div role="dialog" aria-modal="true" tabindex="0" class="modal modal--search" @click.away="search.close" x-trap.noscroll="search.open">
                                 <div class="modal__body">
                                     <div class="search-modal">
@@ -670,8 +670,8 @@ <h2 class="app-card__title">Integrations</h2>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/sign-in/index.html b/dist/sign-in/index.html
index 8238f4c..ce56a0d 100644
--- a/dist/sign-in/index.html
+++ b/dist/sign-in/index.html
@@ -193,8 +193,8 @@ <h1 class="auth-form__title">Sign In</h1>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/dist/sign-up/index.html b/dist/sign-up/index.html
index e1d3788..7a50e4f 100644
--- a/dist/sign-up/index.html
+++ b/dist/sign-up/index.html
@@ -204,8 +204,8 @@ <h1 class="auth-form__title">Sign Up</h1>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script defer src="/js/charts.js" type="module"></script>
-    <script defer src="/js/repeater.js" type="module"></script>
+    <script src="/js/charts.js" type="module"></script>
+    <script src="/js/repeater.js" type="module"></script>
 </body>
 
 </html>
diff --git a/src/_data/navigation.json b/src/_data/navigation.json
index 56994c4..46e3551 100644
--- a/src/_data/navigation.json
+++ b/src/_data/navigation.json
@@ -21,14 +21,14 @@
         "visible": true
       },
       {
-        "caption": "Product Edit",
-        "url": "/product/edit/",
+        "caption": "Item Edit",
+        "url": "/item/edit/",
         "icon": null,
         "visible": false
       },
       {
-        "caption": "Product View",
-        "url": "/product/view/",
+        "caption": "Item View",
+        "url": "/item/view/",
         "icon": null,
         "visible": false
       },
diff --git a/src/_includes/layout/categories.html b/src/_includes/layout/categories.html
index 1ac6655..9c6feee 100644
--- a/src/_includes/layout/categories.html
+++ b/src/_includes/layout/categories.html
@@ -11,6 +11,7 @@
                 'title': title,
                 'actions': [{
                     'label': 'Add new category',
+                    'link': '/item/edit/',
                     'icon': './src/img/icon/plus.svg',
                     'class': 'btn btn--primary btn--icon'
                 }]
diff --git a/src/_includes/layout/customers.html b/src/_includes/layout/customers.html
index a91a640..970a090 100644
--- a/src/_includes/layout/customers.html
+++ b/src/_includes/layout/customers.html
@@ -11,6 +11,7 @@
                 'title': title,
                 'actions': [{
                     'label': 'Add new customer',
+                    'link': '/item/edit/',
                     'icon': './src/img/icon/plus.svg',
                     'class': 'btn btn--primary btn--icon'
                 }]
diff --git a/src/_includes/layout/dashboard.html b/src/_includes/layout/dashboard.html
index a5f1559..2248409 100644
--- a/src/_includes/layout/dashboard.html
+++ b/src/_includes/layout/dashboard.html
@@ -11,8 +11,9 @@
                 'title': title,
                 'description': 'Hey Adam, welcome back! Here is your personal dashboard.',
                 'actions': [{
-                    'label': 'Statistics',
-                    'icon': './src/img/icon/bar-chart.svg',
+                    'label': 'Orders',
+                    'link': '/orders/',
+                    'icon': './src/img/icon/shopping-cart.svg',
                     'class': 'btn btn--outline-primary btn--icon'
                 }]
             } %}
diff --git a/src/_includes/layout/product-edit.html b/src/_includes/layout/item-edit.html
similarity index 99%
rename from src/_includes/layout/product-edit.html
rename to src/_includes/layout/item-edit.html
index fd0ac4f..747bd75 100644
--- a/src/_includes/layout/product-edit.html
+++ b/src/_includes/layout/item-edit.html
@@ -11,7 +11,7 @@
                 'title': title,
                 'actions': [{
                     'label': 'View item',
-                    'link': '/product/view/',
+                    'link': '/item/view/',
                     'icon': './src/img/icon/eye.svg',
                     'class': 'btn btn--primary btn--icon'
                 }]
diff --git a/src/_includes/layout/product-view.html b/src/_includes/layout/item-view.html
similarity index 99%
rename from src/_includes/layout/product-view.html
rename to src/_includes/layout/item-view.html
index 7c0fdb2..91defac 100644
--- a/src/_includes/layout/product-view.html
+++ b/src/_includes/layout/item-view.html
@@ -11,7 +11,7 @@
                 'title': title,
                 'actions': [{
                     'label': 'Edit item',
-                    'link': '/product/edit/',
+                    'link': '/item/edit/',
                     'icon': './src/img/icon/edit.svg',
                     'class': 'btn btn--primary btn--icon'
                 }, {
diff --git a/src/_includes/layout/orders.html b/src/_includes/layout/orders.html
index 2897c08..6e2f687 100644
--- a/src/_includes/layout/orders.html
+++ b/src/_includes/layout/orders.html
@@ -11,6 +11,7 @@
                 'title': title,
                 'actions': [{
                     'label': 'Add new order',
+                    'link': '/item/edit/',
                     'icon': './src/img/icon/plus.svg',
                     'class': 'btn btn--primary btn--icon'
                 }]
diff --git a/src/_includes/layout/products.html b/src/_includes/layout/products.html
index 7cbfcf7..67a1999 100644
--- a/src/_includes/layout/products.html
+++ b/src/_includes/layout/products.html
@@ -11,6 +11,7 @@
                 'title': title,
                 'actions': [{
                     'label': 'Add new product',
+                    'link': '/item/edit/',
                     'icon': './src/img/icon/plus.svg',
                     'class': 'btn btn--primary btn--icon'
                 }]
diff --git a/src/_includes/partial/data-table/categories.html b/src/_includes/partial/data-table/categories.html
index dad4d89..39f572c 100644
--- a/src/_includes/partial/data-table/categories.html
+++ b/src/_includes/partial/data-table/categories.html
@@ -92,7 +92,7 @@
                                 <td x-text="item.description"></td>
                                 <td>
                                     <div class="data-table__actions">
-                                        <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                        <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                             {% svgIcon './src/img/icon/edit.svg', 'btn__icon' %}
                                         </a>
                                         <a href="#" class="btn btn--delete btn--sm btn--icon" aria-label="Delete">
diff --git a/src/_includes/partial/data-table/customers.html b/src/_includes/partial/data-table/customers.html
index 44f4a00..fee4d23 100644
--- a/src/_includes/partial/data-table/customers.html
+++ b/src/_includes/partial/data-table/customers.html
@@ -6,9 +6,7 @@
     <div class="app-card__header">
         <div class="app-card__actions">
             <form class="search-form" @submit.prevent>
-                <span class="search-form__icon">
-                    {% svgIcon "./src/img/icon/search.svg" %}
-                </span>
+                {% svgIcon "./src/img/icon/search.svg", "search-form__icon" %}
                 <input
                     x-model="search"
                     class="search-form__control"
@@ -123,7 +121,7 @@
                                 <td x-text="item.email"></td>
                                 <td>
                                     <div class="data-table__actions">
-                                        <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                        <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                             {% svgIcon './src/img/icon/edit.svg', 'btn__icon' %}
                                         </a>
                                         <a href="#" class="btn btn--delete btn--sm btn--icon" aria-label="Delete">
diff --git a/src/_includes/partial/data-table/orders.html b/src/_includes/partial/data-table/orders.html
index 7b0ad8d..79aafa3 100644
--- a/src/_includes/partial/data-table/orders.html
+++ b/src/_includes/partial/data-table/orders.html
@@ -6,9 +6,7 @@
     <div class="app-card__header">
         <div class="app-card__actions">
             <form class="search-form" @submit.prevent>
-                <span class="search-form__icon">
-                    {% svgIcon "./src/img/icon/search.svg" %}
-                </span>
+                {% svgIcon "./src/img/icon/search.svg", "search-form__icon" %}
                 <input
                     x-model="search"
                     class="search-form__control"
@@ -178,7 +176,7 @@
                                 <td x-text="item.customer"></td>
                                 <td>
                                     <div class="data-table__actions">
-                                        <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                        <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                             {% svgIcon './src/img/icon/edit.svg', 'btn__icon' %}
                                         </a>
                                         <a href="#" class="btn btn--delete btn--sm btn--icon" aria-label="Delete">
diff --git a/src/_includes/partial/data-table/products.html b/src/_includes/partial/data-table/products.html
index 44fb169..40b2e40 100644
--- a/src/_includes/partial/data-table/products.html
+++ b/src/_includes/partial/data-table/products.html
@@ -6,9 +6,7 @@
     <div class="app-card__header">
         <div class="app-card__actions">
             <form class="search-form" @submit.prevent>
-                <span class="search-form__icon">
-                    {% svgIcon "./src/img/icon/search.svg" %}
-                </span>
+                {% svgIcon "./src/img/icon/search.svg", "search-form__icon" %}
                 <input
                     x-model="search"
                     class="search-form__control"
@@ -171,10 +169,10 @@
                                 </td>
                                 <td>
                                     <div class="data-table__actions">
-                                        <a href="/product/view/" class="btn btn--light btn--sm btn--icon" aria-label="View">
+                                        <a href="/item/view/" class="btn btn--light btn--sm btn--icon" aria-label="View">
                                             {% svgIcon './src/img/icon/eye.svg', 'btn__icon' %}
                                         </a>
-                                        <a href="/product/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
+                                        <a href="/item/edit/" class="btn btn--light btn--sm btn--icon" aria-label="Edit">
                                             {% svgIcon './src/img/icon/edit.svg', 'btn__icon' %}
                                         </a>
                                         <a href="#" class="btn btn--delete btn--sm btn--icon" aria-label="Delete">
diff --git a/src/_includes/partial/media-uploader.html b/src/_includes/partial/media-uploader.html
index 6a661c3..0a02822 100644
--- a/src/_includes/partial/media-uploader.html
+++ b/src/_includes/partial/media-uploader.html
@@ -2,6 +2,7 @@
     <div
         class="modal-backdrop"
         x-show="open"
+        x-transition
         @keydown.escape="close"
     >
         <div
diff --git a/src/_includes/partial/modal.html b/src/_includes/partial/modal.html
index 310150e..c4d179e 100644
--- a/src/_includes/partial/modal.html
+++ b/src/_includes/partial/modal.html
@@ -18,6 +18,7 @@
         <div
             class="modal-backdrop"
             x-show="open"
+            x-transition
             @keydown.escape="close"
         >
             <div
diff --git a/src/_includes/partial/search-modal.html b/src/_includes/partial/search-modal.html
index 246d822..dd1f83a 100644
--- a/src/_includes/partial/search-modal.html
+++ b/src/_includes/partial/search-modal.html
@@ -2,6 +2,7 @@
     <div
         class="modal-backdrop"
         x-show="search.open"
+        x-transition
         @keydown.escape="search.close"
     >
         <div
diff --git a/src/product-edit.md b/src/item-edit.md
similarity index 73%
rename from src/product-edit.md
rename to src/item-edit.md
index 065cb1a..fb7ef75 100644
--- a/src/product-edit.md
+++ b/src/item-edit.md
@@ -1,7 +1,7 @@
 ---
 title: "Add/Edit Item"
-layout: "layout/product-edit.html"
-permalink: "product/edit/"
+layout: "layout/item-edit.html"
+permalink: "item/edit/"
 breadcrumbs:
 -
     caption: "Dashboard"
diff --git a/src/item-view.md b/src/item-view.md
new file mode 100644
index 0000000..a8b104b
--- /dev/null
+++ b/src/item-view.md
@@ -0,0 +1,15 @@
+---
+title: "View Item"
+layout: "layout/Item-view.html"
+permalink: "item/view/"
+breadcrumbs:
+-
+    caption: "Dashboard"
+    url: "/"
+-
+    caption: "Products"
+    url: "/products/"
+-
+    caption: "View"
+    url: null
+---
diff --git a/src/product-view.md b/src/product-view.md
deleted file mode 100644
index f39f142..0000000
--- a/src/product-view.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: "View Item"
-layout: "layout/product-view.html"
-permalink: "product/view/"
-breadcrumbs:
--
-  caption: "Dashboard"
-  url: "/"
--
-  caption: "Products"
-  url: "/products/"
--
-  caption: "View"
-  url: null
----