diff --git a/src/blocks/Deployments/Deployments.astro b/src/blocks/Deployments/Deployments.astro
index 6c340a5..c4eaa7c 100644
--- a/src/blocks/Deployments/Deployments.astro
+++ b/src/blocks/Deployments/Deployments.astro
@@ -23,16 +23,21 @@ import styles from './deployments.module.scss'
 </Modal>
 
 <script>
-    import { closeModal, modal } from 'webcoreui'
+    import { closeModal, modal, on } from 'webcoreui'
 
-    const closeButton = document.querySelectorAll('.close-modal')
+    const addModal = () => {
+        const closeButton = document.querySelectorAll('.close-modal')
 
-    modal({
-        trigger: '#connect',
-        modal: '.modal'
-    })
+        modal({
+            trigger: '#connect',
+            modal: '.modal'
+        })
 
-    Array.from(closeButton).forEach(button => {
-        button?.addEventListener('click', () => closeModal('.modal'))
-    })
+        Array.from(closeButton).forEach(button => {
+            button?.addEventListener('click', () => closeModal('.modal'))
+        })
+    }
+
+    on(document, 'astro:after-swap', addModal)
+    addModal()
 </script>
diff --git a/src/blocks/Settings/Settings.astro b/src/blocks/Settings/Settings.astro
index efe43f2..80a9668 100644
--- a/src/blocks/Settings/Settings.astro
+++ b/src/blocks/Settings/Settings.astro
@@ -36,16 +36,21 @@ const radioItems = [
 </Toast>
 
 <script>
-    import { toast } from 'webcoreui'
+    import { on, toast } from 'webcoreui'
 
-    const marketing = document.querySelector('.marketing input')
+    const addToast = () => {
+        const marketing = document.querySelector('.marketing input')
 
-    marketing?.addEventListener('change', (e: any) => {
-        toast({
-            element: '.marketing-toast',
-            content: e.target.checked
-                ? 'Marketing emails enabled'
-                : 'Marketing emails disabled'
+        marketing?.addEventListener('change', (e: any) => {
+            toast({
+                element: '.marketing-toast',
+                content: e.target.checked
+                    ? 'Marketing emails enabled'
+                    : 'Marketing emails disabled'
+            })
         })
-    })
+    }
+
+    on(document, 'astro:after-swap', addToast)
+    addToast()
 </script>
diff --git a/src/blocks/SignUp/SignUp.astro b/src/blocks/SignUp/SignUp.astro
index c03c51e..f57e2dc 100644
--- a/src/blocks/SignUp/SignUp.astro
+++ b/src/blocks/SignUp/SignUp.astro
@@ -62,5 +62,10 @@ const {
 <script>
     import { on } from '@utils/DOMUtils'
 
-    on('.sign-up-form', 'submit', (event: Event) => event.preventDefault())
+    const addEventListener = () => {
+        on('.sign-up-form', 'submit', (event: Event) => event.preventDefault())
+    }
+
+    on(document, 'astro:after-swap', addEventListener)
+    addEventListener()
 </script>
diff --git a/src/components/Accordion/Accordion.astro b/src/components/Accordion/Accordion.astro
index 3294db4..0091d3c 100644
--- a/src/components/Accordion/Accordion.astro
+++ b/src/components/Accordion/Accordion.astro
@@ -45,13 +45,18 @@ const classes = [
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-accordion"]', 'click', (event: Event) => {
-        const target = event.target as HTMLDivElement
-
-        if (target.dataset.toggle) {
-            target.dataset.open = target.dataset.open === 'true'
-                ? 'false'
-                : 'true'
-        }
-    }, true)
+    const addEventListeners = () => {
+        on('[data-id="w-accordion"]', 'click', (event: Event) => {
+            const target = event.target as HTMLDivElement
+
+            if (target.dataset.toggle) {
+                target.dataset.open = target.dataset.open === 'true'
+                    ? 'false'
+                    : 'true'
+            }
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Banner/Banner.astro b/src/components/Banner/Banner.astro
index c16bb93..9e26398 100644
--- a/src/components/Banner/Banner.astro
+++ b/src/components/Banner/Banner.astro
@@ -48,9 +48,14 @@ const style = top
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-banner-close"]', 'click', (event: Event) => {
-        const target = event.currentTarget as HTMLDivElement
+    const addEventListeners = () => {
+        on('[data-id="w-banner-close"]', 'click', (event: Event) => {
+            const target = event.currentTarget as HTMLDivElement
 
-        target.parentElement?.remove()
-    }, true)
+            target.parentElement?.remove()
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Carousel/Carousel.astro b/src/components/Carousel/Carousel.astro
index 8500d08..6bef3fa 100644
--- a/src/components/Carousel/Carousel.astro
+++ b/src/components/Carousel/Carousel.astro
@@ -102,53 +102,55 @@ const style = itemsPerSlide > 1
     import { debounce } from '../../utils/debounce'
     import { listen } from '../../utils/event'
 
-    const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
-
-    const scroll = (event: Event) => {
-        const target = event.target as HTMLDivElement
-
-        if (!target.dataset.paginated) {
-            const scrollLeft = target.scrollLeft
-            const itemWidth = target.children[0].clientWidth
-            const page = Math.round(scrollLeft / itemWidth) + 1
-            const carouselElement = target.children[0]
-            const paginationElement = target.parentElement
-                ?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
-            const currentPage = Number(paginationElement.dataset.currentPage)
-            const diff = Math.abs(currentPage - page)
-
-            let triggerButton = currentPage > page
-                ? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
-                : paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
-
-            if (!triggerButton) {
-                triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
-            }
+    const addEventListeners = () => {
+        const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
+
+        const scroll = (event: Event) => {
+            const target = event.target as HTMLDivElement
+
+            if (!target.dataset.paginated) {
+                const scrollLeft = target.scrollLeft
+                const itemWidth = target.children[0].clientWidth
+                const page = Math.round(scrollLeft / itemWidth) + 1
+                const carouselElement = target.children[0]
+                const paginationElement = target.parentElement
+                    ?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
+                const currentPage = Number(paginationElement.dataset.currentPage)
+                const diff = Math.abs(currentPage - page)
+
+                let triggerButton = currentPage > page
+                    ? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
+                    : paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
+
+                if (!triggerButton) {
+                    triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
+                }
 
-            for (let i = 0; i < diff; i++) {
-                triggerButton.click()
-            }
+                for (let i = 0; i < diff; i++) {
+                    triggerButton.click()
+                }
 
-            Array.from(carouselElement.children).forEach(li => {
-                (li as HTMLLIElement).removeAttribute('data-active')
-            })
+                Array.from(carouselElement.children).forEach(li => {
+                    (li as HTMLLIElement).removeAttribute('data-active')
+                })
 
-            const activeElement = carouselElement.children[page - 1] as HTMLLIElement
+                const activeElement = carouselElement.children[page - 1] as HTMLLIElement
 
-            activeElement.dataset.active = 'true'
+                activeElement.dataset.active = 'true'
+            }
         }
-    }
 
-    carousels.forEach(carousel => {
-        const carouselElement = carousel as HTMLDivElement
-        const debounceAmount = carouselElement.dataset.debounce
-            ? Number(carouselElement.dataset.debounce)
-            : 20
+        carousels.forEach(carousel => {
+            const carouselElement = carousel as HTMLDivElement
+            const debounceAmount = carouselElement.dataset.debounce
+                ? Number(carouselElement.dataset.debounce)
+                : 20
 
-        carousel.addEventListener('scroll', debounce((event: Event) => {
-            scroll(event)
-        }, debounceAmount))
-    })
+            carousel.addEventListener('scroll', debounce((event: Event) => {
+                scroll(event)
+            }, debounceAmount))
+        })
+    }
 
     listen('paginate', event => {
         const target = event.target
@@ -172,7 +174,7 @@ const style = itemsPerSlide > 1
             : indexes[event.page - 1][indexes[event.page - 1].length - 1]
 
         const liElement = carousel.children[pageIndex]
-        const subText = event.target.nextElementSibling
+        const subText = event.target.parentElement.querySelector('span')
 
         Array.from(carousel.children).forEach(li => {
             (li as HTMLLIElement).removeAttribute('data-active')
@@ -204,4 +206,7 @@ const style = itemsPerSlide > 1
             }, 300)
         }
     })
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Collapsible/Collapsible.astro b/src/components/Collapsible/Collapsible.astro
index ae0801d..924eeb8 100644
--- a/src/components/Collapsible/Collapsible.astro
+++ b/src/components/Collapsible/Collapsible.astro
@@ -45,10 +45,10 @@ const styleVariables = classNames([
 </div>
 
 <script>
-    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+    import { on } from '../../utils/DOMUtils'
 
-    Array.from(collapsibles).forEach(element => {
-        element.addEventListener('click', event => {
+    const addEventListeners = () => {
+        on('[data-id="w-collapsible"]', 'click', (event: Event) => {
             const collapsible = event.currentTarget as HTMLDivElement
             const target = event.target as HTMLDivElement
 
@@ -59,6 +59,9 @@ const styleVariables = classNames([
             if (target.parentElement?.dataset.toggleOff) {
                 collapsible.dataset.toggled = 'false'
             }
-        })
-    })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Copy/Copy.astro b/src/components/Copy/Copy.astro
index be41269..8860af4 100644
--- a/src/components/Copy/Copy.astro
+++ b/src/components/Copy/Copy.astro
@@ -56,19 +56,24 @@ const classes = classNames([
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-copy"]', 'click', (event: Event) => {
-        const copy = event.currentTarget as HTMLButtonElement
-        const copied = copy.nextElementSibling as HTMLSpanElement
-        const badge = copy.parentElement?.parentElement as HTMLElement
+    const addEventListeners = () => {
+        on('[data-id="w-copy"]', 'click', (event: Event) => {
+            const copy = event.currentTarget as HTMLButtonElement
+            const copied = copy.nextElementSibling as HTMLSpanElement
+            const badge = copy.parentElement?.parentElement as HTMLElement
 
-        const text = copy.parentElement?.previousSibling?.textContent?.trim()
+            const text = copy.parentElement?.previousSibling?.textContent?.trim()
 
-        copy.style.opacity = '0'
-        copy.style.pointerEvents = 'none'
+            copy.style.opacity = '0'
+            copy.style.pointerEvents = 'none'
 
-        copied.style.opacity = '1'
-        badge.removeAttribute('data-tooltip')
+            copied.style.opacity = '1'
+            badge.removeAttribute('data-tooltip')
 
-        navigator.clipboard.writeText(text as string)
-    }, true)
+            navigator.clipboard.writeText(text as string)
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/DataTable/DataTable.astro b/src/components/DataTable/DataTable.astro
index d32b991..f8bd9fc 100644
--- a/src/components/DataTable/DataTable.astro
+++ b/src/components/DataTable/DataTable.astro
@@ -173,117 +173,120 @@ const hasPagination = data?.length && itemsPerPage
     import { debounce } from '../../utils/debounce'
     import { dispatch, listen } from '../../utils/event'
 
-    const filters = document.querySelectorAll('[data-id="w-data-table-filter"]')
-    const sorts = document.querySelectorAll('[data-id="w-data-table-sort"]')
-
-    Array.from(filters).forEach(filter => {
-        filter.addEventListener('input', debounce((event: Event) => {
-            const target = event.target as HTMLInputElement
-            const filterableColumns = target.dataset.filter
-            const table = target.closest('section')?.querySelector('table') as HTMLTableElement
-            const pagination = target.closest('section')?.querySelector('.w-data-table-pagination') as HTMLUListElement
-            const noResults = table.querySelector('tfoot') as HTMLElement
-            const tableRows = Array.from(table.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>)
-
-            tableRows.forEach(row => {
-                const rowValue = Array.from(row.querySelectorAll('td'))
-                    .filter(td => filterableColumns?.includes(td.dataset.name || ''))
-                    .map(td => td.innerText)
-                    .join('')
-                    .toLowerCase()
-
-                if (rowValue.includes(target.value.toLowerCase())) {
-                    row.removeAttribute('data-hidden')
-                } else {
-                    row.dataset.hidden = 'true'
-                }
-            })
+    const addEventListeners = () => {
+        const filters = document.querySelectorAll('[data-id="w-data-table-filter"]')
+        const sorts = document.querySelectorAll('[data-id="w-data-table-sort"]')
+
+        Array.from(filters).forEach(filter => {
+            filter.addEventListener('input', debounce((event: Event) => {
+                const target = event.target as HTMLInputElement
+                const filterableColumns = target.dataset.filter
+                const section = target.closest('section')
+                const table = section?.querySelector('table') as HTMLTableElement
+                const pagination = section?.querySelector('.w-data-table-pagination') as HTMLUListElement
+                const noResults = table.querySelector('tfoot') as HTMLElement
+                const tableRows = Array.from(table.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>)
 
-            const filteredRows = Array.from(
-                table?.querySelectorAll('tbody tr:not([data-hidden])') as NodeListOf<HTMLTableRowElement>
-            )
-
-            if (!filteredRows.length) {
-                noResults.removeAttribute('data-hidden')
-            } else {
-                noResults.dataset.hidden = 'true'
-            }
+                tableRows.forEach(row => {
+                    const rowValue = Array.from(row.querySelectorAll('td'))
+                        .filter(td => filterableColumns?.includes(td.dataset.name || ''))
+                        .map(td => td.innerText)
+                        .join('')
+                        .toLowerCase()
 
-            if (table.dataset.itemsPerPage && filteredRows.length >= Number(table.dataset.itemsPerPage)) {
-                filteredRows.forEach((row, index) => {
-                    if (index >= Number(table.dataset.itemsPerPage)) {
+                    if (rowValue.includes(target.value.toLowerCase())) {
+                        row.removeAttribute('data-hidden')
+                    } else {
                         row.dataset.hidden = 'true'
                     }
                 })
-            }
-
-            if (target.value) {
-                pagination.style.display = 'none'
-            } else {
-                pagination.style.display = 'flex'
 
-                tableRows.forEach(row => {
-                    if (row.dataset.page !== table.dataset.page) {
-                        row.dataset.hidden = 'true'
-                    } else {
-                        row.removeAttribute('data-hidden')
-                    }
-                })
-            }
+                const filteredRows = Array.from(
+                    table?.querySelectorAll('tbody tr:not([data-hidden])') as NodeListOf<HTMLTableRowElement>
+                )
 
-            dispatch('dataTableFilter', {
-                results: filteredRows,
-                numberOfResults: filteredRows.length
-            })
-        }, 400))
-    })
+                if (!filteredRows.length) {
+                    noResults.removeAttribute('data-hidden')
+                } else {
+                    noResults.dataset.hidden = 'true'
+                }
 
-    Array.from(sorts).forEach(sort => {
-        let sortOrder = 1
-
-        sort.addEventListener('click', event => {
-            const target = event.target as HTMLButtonElement
-            const sortBy = target.parentElement?.dataset.name
-            const table = target.closest('section')?.querySelector('table')
-            const tableBody = table?.querySelector('tbody')
-            const sortedTableRows = Array.from(
-                table?.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>
-            ).sort((a, b) => {
-                let aValue: string | number = (a.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
-                    ?.innerText.replace(/\s/g, '')
-                let bValue: string | number = (b.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
-                    ?.innerText.replace(/\s/g, '')
-
-                if (!isNaN(aValue as any)) {
-                    aValue = Number(aValue)
+                if (table.dataset.itemsPerPage && filteredRows.length >= Number(table.dataset.itemsPerPage)) {
+                    filteredRows.forEach((row, index) => {
+                        if (index >= Number(table.dataset.itemsPerPage)) {
+                            row.dataset.hidden = 'true'
+                        }
+                    })
                 }
 
-                if (!isNaN(bValue as any)) {
-                    bValue = Number(bValue)
+                if (target.value) {
+                    pagination.style.display = 'none'
+                } else {
+                    pagination.style.display = 'flex'
+
+                    tableRows.forEach(row => {
+                        if (row.dataset.page !== table.dataset.page) {
+                            row.dataset.hidden = 'true'
+                        } else {
+                            row.removeAttribute('data-hidden')
+                        }
+                    })
                 }
 
-                return aValue > bValue
-                    ? sortOrder * -1
-                    : sortOrder
-            }).map((row, index) => {
-                if (table?.dataset.page) {
-                    row.dataset.page = `${Math.ceil((index + 1) / Number(table.dataset.itemsPerPage))}`
+                dispatch('dataTableFilter', {
+                    results: filteredRows,
+                    numberOfResults: filteredRows.length
+                })
+            }, 400))
+        })
 
-                    if (row.dataset.page !== table.dataset.page) {
-                        row.dataset.hidden = 'true'
-                    } else {
-                        row.removeAttribute('data-hidden')
+        Array.from(sorts).forEach(sort => {
+            let sortOrder = 1
+
+            sort.addEventListener('click', event => {
+                const target = event.target as HTMLButtonElement
+                const sortBy = target.parentElement?.dataset.name
+                const table = target.closest('section')?.querySelector('table')
+                const tableBody = table?.querySelector('tbody')
+                const sortedTableRows = Array.from(
+                    table?.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>
+                ).sort((a, b) => {
+                    let aValue: string | number = (a.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                        ?.innerText.replace(/\s/g, '')
+                    let bValue: string | number = (b.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                        ?.innerText.replace(/\s/g, '')
+
+                    if (!isNaN(aValue as any)) {
+                        aValue = Number(aValue)
                     }
-                }
 
-                return row
-            })
+                    if (!isNaN(bValue as any)) {
+                        bValue = Number(bValue)
+                    }
+
+                    return aValue > bValue
+                        ? sortOrder * -1
+                        : sortOrder
+                }).map((row, index) => {
+                    if (table?.dataset.page) {
+                        row.dataset.page = `${Math.ceil((index + 1) / Number(table.dataset.itemsPerPage))}`
+
+                        if (row.dataset.page !== table.dataset.page) {
+                            row.dataset.hidden = 'true'
+                        } else {
+                            row.removeAttribute('data-hidden')
+                        }
+                    }
+
+                    return row
+                })
 
-            tableBody?.replaceChildren(...sortedTableRows)
+                tableBody?.replaceChildren(...sortedTableRows)
 
-            sortOrder = sortOrder === 1 ? -1 : 1
+                sortOrder = sortOrder === 1 ? -1 : 1
+            })
         })
-    })
+    }
 
     listen('selectOnChange', event => {
         const eventName = event.name.toLowerCase().replace(/\s/g, '')
@@ -291,6 +294,10 @@ const hasPagination = data?.length && itemsPerPage
             ?.closest('section') as HTMLElement)
             .querySelector('table') as HTMLTableElement
 
+        if (!table) {
+            return
+        }
+
         const affectedTableCells = Array.from(table.querySelectorAll(`[data-name=${eventName}]`)) as HTMLElement[]
 
         const columnToggleListElement = Array.from(event.list.children)
@@ -329,4 +336,7 @@ const hasPagination = data?.length && itemsPerPage
             }
         })
     })
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/List/List.astro b/src/components/List/List.astro
index 1d88d80..c8fcdbd 100644
--- a/src/components/List/List.astro
+++ b/src/components/List/List.astro
@@ -93,77 +93,82 @@ const wrapperClasses = [
 <script>
     import { dispatch } from '../../utils/event'
 
-    const lists = document.querySelectorAll('[data-id="w-list"]')
-    const searchInputs = document.querySelectorAll('[data-id="w-list-search"]')
-
-    const handleClick = (list: Element, items: Element[], event: Event) => {
-        const target = event.target as HTMLElement
-
-        if (target.dataset.value && !target.dataset.disabled) {
-            dispatch('listOnSelect', {
-                value: target.dataset.value,
-                name: target.dataset.name,
-                list
-            })
+    const addEventListeners = () => {
+        const lists = document.querySelectorAll('[data-id="w-list"]')
+        const searchInputs = document.querySelectorAll('[data-id="w-list-search"]')
+
+        const handleClick = (list: Element, items: Element[], event: Event) => {
+            const target = event.target as HTMLElement
+
+            if (target.dataset.value && !target.dataset.disabled) {
+                dispatch('listOnSelect', {
+                    value: target.dataset.value,
+                    name: target.dataset.name,
+                    list
+                })
 
-            items.forEach(item => item.removeAttribute('data-selected'))
-            target.dataset.selected = 'true'
+                items.forEach(item => item.removeAttribute('data-selected'))
+                target.dataset.selected = 'true'
+            }
         }
-    }
 
-    Array.from(lists).forEach(list => {
-        const items = Array.from(list.children)
+        Array.from(lists).forEach(list => {
+            const items = Array.from(list.children)
 
-        list.addEventListener('click', event => handleClick(list, items, event))
-        list.addEventListener('keyup', event => {
-            if ((event as KeyboardEvent).key === 'Enter') {
-                handleClick(list, items, event)
-            }
-        })
-    })
-
-    Array.from(searchInputs).forEach(element => {
-        element.addEventListener('input', event => {
-            const target = event.target as HTMLInputElement
-            const ul = target.closest('[data-id="w-list-wrapper"]')
-                ?.querySelector('ul') as HTMLUListElement
-
-            const noResults = ul.querySelector('[data-id="w-no-results"]')
-            const items = Array.from(ul.children)
-            const value = target.value.toLowerCase()
-
-            items.forEach(item => {
-                const li = item as HTMLLIElement
-                const hideItem = (!li.dataset.value?.toLowerCase().includes(value)
-                    && !li.innerText.toLowerCase().includes(value))
-                    || li.dataset.id === 'w-list-title'
-                    || li.dataset.id === 'w-no-results'
-
-                if (hideItem) {
-                    li.dataset.hidden = 'true'
-                } else if (li.dataset.id !== 'w-no-results') {
-                    li.removeAttribute('data-hidden')
+            list.addEventListener('click', event => handleClick(list, items, event))
+            list.addEventListener('keyup', event => {
+                if ((event as KeyboardEvent).key === 'Enter') {
+                    handleClick(list, items, event)
                 }
             })
+        })
 
-            const numberOfResults = items.filter(item => {
-                const li = item as HTMLLIElement
-                return li.dataset.name && !li.dataset.hidden
-            }).length
+        Array.from(searchInputs).forEach(element => {
+            element.addEventListener('input', event => {
+                const target = event.target as HTMLInputElement
+                const ul = target.closest('[data-id="w-list-wrapper"]')
+                    ?.querySelector('ul') as HTMLUListElement
 
-            if (!numberOfResults) {
-                noResults?.removeAttribute('data-hidden')
-            }
+                const noResults = ul.querySelector('[data-id="w-no-results"]')
+                const items = Array.from(ul.children)
+                const value = target.value.toLowerCase()
 
-            if (!value) {
                 items.forEach(item => {
                     const li = item as HTMLLIElement
-
-                    li.dataset.id === 'w-no-results'
-                        ? li.dataset.hidden = 'true'
-                        : li.removeAttribute('data-hidden')
+                    const hideItem = (!li.dataset.value?.toLowerCase().includes(value)
+                        && !li.innerText.toLowerCase().includes(value))
+                        || li.dataset.id === 'w-list-title'
+                        || li.dataset.id === 'w-no-results'
+
+                    if (hideItem) {
+                        li.dataset.hidden = 'true'
+                    } else if (li.dataset.id !== 'w-no-results') {
+                        li.removeAttribute('data-hidden')
+                    }
                 })
-            }
+
+                const numberOfResults = items.filter(item => {
+                    const li = item as HTMLLIElement
+                    return li.dataset.name && !li.dataset.hidden
+                }).length
+
+                if (!numberOfResults) {
+                    noResults?.removeAttribute('data-hidden')
+                }
+
+                if (!value) {
+                    items.forEach(item => {
+                        const li = item as HTMLLIElement
+
+                        li.dataset.id === 'w-no-results'
+                            ? li.dataset.hidden = 'true'
+                            : li.removeAttribute('data-hidden')
+                    })
+                }
+            })
         })
-    })
+    }
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Menu/Menu.astro b/src/components/Menu/Menu.astro
index bda4bfb..5c86cd1 100644
--- a/src/components/Menu/Menu.astro
+++ b/src/components/Menu/Menu.astro
@@ -99,9 +99,10 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
 </header>
 
 <script>
-    document
-        .querySelector('[data-id="hamburger"]')
-        ?.addEventListener('click', event => {
+    import { on } from '../../utils/DOMUtils'
+
+    const addToggle = () => {
+        on('[data-id="hamburger"]', 'click', (event: Event) => {
             const hamburger = event.currentTarget as HTMLDivElement
             const header = hamburger.parentElement?.parentElement as HTMLHeadElement
 
@@ -109,4 +110,8 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
                 ? 'false'
                 : 'true'
         })
+    }
+
+    on(document, 'astro:after-swap', addToggle)
+    addToggle()
 </script>
diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro
index da599b4..01c4c2d 100644
--- a/src/components/Pagination/Pagination.astro
+++ b/src/components/Pagination/Pagination.astro
@@ -117,75 +117,80 @@ const generatedPages = pages?.length
 <script>
     import { dispatch } from '../../utils/event'
 
-    const getCurrentPage = (pageElements: Element[], current: number, next: string) => {
-        if (next === 'prev') {
-            return current - 1
-        }
-
-        if (next === 'next') {
-            return current + 1
-        }
-
-        return pageElements?.findIndex(child => {
-            const button = child.children[0] as HTMLButtonElement
-
-            return button.dataset.page === next
-        }) + 1
-    }
-
-    const paginations = document.querySelectorAll('[data-id="w-pagination"]')
-
-    Array.from(paginations).forEach(element => {
-        const pagination = element as HTMLUListElement
-        const totalPages = Number(pagination.dataset.totalPages)
-        let currentPage = Number(pagination.dataset.currentPage)
+    const addEventListeners = () => {
+        const getCurrentPage = (pageElements: Element[], current: number, next: string) => {
+            if (next === 'prev') {
+                return current - 1
+            }
 
-        element.addEventListener('click', event => {
-            const target = event.target as HTMLButtonElement
-            const navigated = target.nodeName === 'BUTTON'
-                && !target.dataset.active
-                && !target.disabled
+            if (next === 'next') {
+                return current + 1
+            }
 
-            if (navigated) {
-                const prevPageButton = element.querySelector('[data-page="prev"]') as HTMLButtonElement
-                const nextPageButton = element.querySelector('[data-page="next"]') as HTMLButtonElement
-                const currentPageButton = element.querySelector('[data-active]') as HTMLButtonElement
-                const previousPage = currentPage
+            return pageElements?.findIndex(child => {
+                const button = child.children[0] as HTMLButtonElement
 
-                const pageElements = Array
-                    .from(pagination.children)
-                    .filter(child => {
-                        const button = child.children[0] as HTMLButtonElement
+                return button.dataset.page === next
+            }) + 1
+        }
 
-                        return button.dataset.page && !['prev', 'next'].includes(button.dataset.page)
+        const paginations = document.querySelectorAll('[data-id="w-pagination"]')
+
+        Array.from(paginations).forEach(element => {
+            const pagination = element as HTMLUListElement
+            const totalPages = Number(pagination.dataset.totalPages)
+            let currentPage = Number(pagination.dataset.currentPage)
+
+            element.addEventListener('click', event => {
+                const target = event.target as HTMLButtonElement
+                const navigated = target.nodeName === 'BUTTON'
+                    && !target.dataset.active
+                    && !target.disabled
+
+                if (navigated) {
+                    const prevPageButton = element.querySelector('[data-page="prev"]') as HTMLButtonElement
+                    const nextPageButton = element.querySelector('[data-page="next"]') as HTMLButtonElement
+                    const currentPageButton = element.querySelector('[data-active]') as HTMLButtonElement
+                    const previousPage = currentPage
+
+                    const pageElements = Array
+                        .from(pagination.children)
+                        .filter(child => {
+                            const button = child.children[0] as HTMLButtonElement
+
+                            return button.dataset.page && !['prev', 'next'].includes(button.dataset.page)
+                        })
+
+                    currentPage = getCurrentPage(pageElements, currentPage, target.dataset.page || '')
+                    currentPageButton?.removeAttribute('data-active')
+
+                    pagination.dataset.currentPage = String(currentPage)
+
+                    const activeButton = pageElements
+                        .find((_, index) => index + 1 === currentPage)
+                        ?.children[0] as HTMLButtonElement
+
+                    if (activeButton) {
+                        activeButton.dataset.active = 'true'
+                    }
+
+                    if (prevPageButton && nextPageButton) {
+                        prevPageButton.disabled = currentPage === 1
+                        nextPageButton.disabled = currentPage === totalPages
+                    }
+
+                    dispatch('paginate', {
+                        page: currentPage,
+                        direction: previousPage > currentPage ? 'prev' : 'next',
+                        ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
+                        target: element,
+                        trusted: event.isTrusted
                     })
-
-                currentPage = getCurrentPage(pageElements, currentPage, target.dataset.page || '')
-                currentPageButton?.removeAttribute('data-active')
-
-                pagination.dataset.currentPage = String(currentPage)
-
-                const activeButton = pageElements
-                    .find((_, index) => index + 1 === currentPage)
-                    ?.children[0] as HTMLButtonElement
-
-                if (activeButton) {
-                    activeButton.dataset.active = 'true'
-                }
-
-                if (prevPageButton && nextPageButton) {
-                    prevPageButton.disabled = currentPage === 1
-                    nextPageButton.disabled = currentPage === totalPages
                 }
-
-                dispatch('paginate', {
-                    page: currentPage,
-                    direction: previousPage > currentPage ? 'prev' : 'next',
-                    ...(activeButton?.dataset.page && { label: activeButton?.dataset.page }),
-                    target: element,
-                    trusted: event.isTrusted
-                })
-            }
+            })
         })
-    })
+    }
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Select/Select.astro b/src/components/Select/Select.astro
index ec17768..9a33d4c 100644
--- a/src/components/Select/Select.astro
+++ b/src/components/Select/Select.astro
@@ -81,78 +81,85 @@ const inputRestProps = Object.fromEntries(
     import { modal } from '../../utils/modal'
     import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
 
-    const selects = document.querySelectorAll('[data-id^="w-select"]')
-    let focusByTab = false
+    const addEventListeners = () => {
+        const selects = document.querySelectorAll('[data-id^="w-select"]')
+        let focusByTab = false
 
-    on(document, 'keydown', (event: KeyboardEvent) => {
-        if (event.key === 'Tab') {
-            focusByTab = true
-        }
-    })
-
-    on(document, 'mousedown', () => focusByTab = false)
-
-    Array.from(selects).forEach(select => {
-        const selectElement = select as HTMLElement
-        const name = selectElement.dataset.id!.split('w-select-')[1]
-        const position = selectElement.dataset.position
-
-        if (position === 'modal') {
-            modal({
-                trigger: `[data-id="${selectElement.dataset.id}"]`,
-                modal: `[data-id="w-options-${name}"]`,
-                onOpen: ({ modal }) => {
-                    const search = modal.querySelector('input')
+        on(document, 'keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Tab') {
+                focusByTab = true
+            }
+        })
 
-                    if (search) {
-                        search.focus()
+        on(document, 'mousedown', () => focusByTab = false)
+
+        Array.from(selects).forEach(select => {
+            const selectElement = select as HTMLElement
+            const name = selectElement.dataset.id!.split('w-select-')[1]
+            const position = selectElement.dataset.position
+
+            if (position === 'modal') {
+                modal({
+                    trigger: `[data-id="${selectElement.dataset.id}"]`,
+                    modal: `[data-id="w-options-${name}"]`,
+                    onOpen: ({ modal }) => {
+                        const search = modal.querySelector('input')
+
+                        if (search) {
+                            search.focus()
+                        }
+                    },
+                    onClose(event) {
+                        dispatch('selectOnClose', event)
                     }
-                },
-                onClose(event) {
-                    dispatch('selectOnClose', event)
-                }
-            })
-        } else {
-            const resize = debounce(() => {
-                const { width } = selectElement.getBoundingClientRect()
-                const dialogElement = document.querySelector(`[data-id="w-options-${name}"]`) as HTMLDialogElement
-
-                if (dialogElement) {
-                    dialogElement.style.width = `${width}px`
-                }
-            })
-
-            new ResizeObserver(() => resize()).observe(document.body)
-
-            popover({
-                trigger: `[data-id="${selectElement.dataset.id}"]`,
-                popover: `[data-id="w-options-${name}"]`,
-                position: position as PopoverPosition || 'bottom',
-                onOpen({ popover }) {
-                    const search = popover.querySelector('input')
-
-                    if (search) {
-                        search.focus()
-                    } else {
-                        popover.focus()
+                })
+            } else {
+                const resize = debounce(() => {
+                    const { width } = selectElement.getBoundingClientRect()
+                    const dialogElement = document.querySelector(`[data-id="w-options-${name}"]`) as HTMLDialogElement
+
+                    if (dialogElement) {
+                        dialogElement.style.width = `${width}px`
                     }
-                },
-                onClose(event) {
-                    dispatch('selectOnClose', event)
+                })
+
+                new ResizeObserver(() => resize()).observe(document.body)
+
+                popover({
+                    trigger: `[data-id="${selectElement.dataset.id}"]`,
+                    popover: `[data-id="w-options-${name}"]`,
+                    position: position as PopoverPosition || 'bottom',
+                    onOpen({ popover }) {
+                        const search = popover.querySelector('input')
+
+                        if (search) {
+                            search.focus()
+                        } else {
+                            popover.focus()
+                        }
+                    },
+                    onClose(event) {
+                        dispatch('selectOnClose', event)
+                    }
+                })
+            }
+
+            on(selectElement, 'focus', (event: Event) => {
+                if (focusByTab) {
+                    (event.currentTarget as HTMLInputElement).click()
                 }
             })
-        }
-
-        on(selectElement, 'focus', (event: Event) => {
-            if (focusByTab) {
-                (event.currentTarget as HTMLInputElement).click()
-            }
         })
-    })
+    }
 
     listen('listOnSelect', payload => {
         const { name, list } = payload
         const dialog = list.closest('dialog')
+
+        if (!dialog) {
+            return
+        }
+
         const popoverId = dialog.dataset.id
         const selectName = popoverId.split('w-options-')[1]
         const selectId = `[data-id="w-select-${selectName}"]`
@@ -169,4 +176,7 @@ const inputRestProps = Object.fromEntries(
             select: selectName
         })
     })
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Select/Select.svelte b/src/components/Select/Select.svelte
index 5e1ca06..539b5d2 100644
--- a/src/components/Select/Select.svelte
+++ b/src/components/Select/Select.svelte
@@ -103,10 +103,12 @@
             const resize = debounce(() => {
                 const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
 
-                const { width } = selectElement.getBoundingClientRect()
-                const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+                if (selectElement) {
+                    const { width } = selectElement.getBoundingClientRect()
+                    const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
 
-                dialogElement.style.width = `${width}px`
+                    dialogElement.style.width = `${width}px`
+                }
             })
 
             observer = new ResizeObserver(() => resize())
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index be7ab88..a10eaaf 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -99,10 +99,12 @@ const Select = ({
                 const resize = debounce(() => {
                     const selectElement = document.querySelector(`.w-select-${name}`) as HTMLInputElement
 
-                    const { width } = selectElement.getBoundingClientRect()
-                    const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
+                    if (selectElement) {
+                        const { width } = selectElement.getBoundingClientRect()
+                        const dialogElement = document.querySelector(`.w-options-${name}`) as HTMLDialogElement
 
-                    dialogElement.style.width = `${width}px`
+                        dialogElement.style.width = `${width}px`
+                    }
                 })
 
                 observer = new ResizeObserver(() => resize())
diff --git a/src/components/Spoiler/Spoiler.astro b/src/components/Spoiler/Spoiler.astro
index ebf32c4..e299538 100644
--- a/src/components/Spoiler/Spoiler.astro
+++ b/src/components/Spoiler/Spoiler.astro
@@ -39,12 +39,17 @@ const style = color
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-spoiler"]', 'click', (event: Event) => {
-        const target = event.currentTarget as HTMLDivElement
-
-        target.dataset.visible = 'true'
-        target.removeAttribute('data-tooltip')
-        target.removeAttribute('role')
-        target.removeAttribute('tabindex')
-    }, true)
+    const addEventListeners = () => {
+        on('[data-id="w-spoiler"]', 'click', (event: Event) => {
+            const target = event.currentTarget as HTMLDivElement
+
+            target.dataset.visible = 'true'
+            target.removeAttribute('data-tooltip')
+            target.removeAttribute('role')
+            target.removeAttribute('tabindex')
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Tabs/Tabs.astro b/src/components/Tabs/Tabs.astro
index cf8db9a..16d75b0 100644
--- a/src/components/Tabs/Tabs.astro
+++ b/src/components/Tabs/Tabs.astro
@@ -42,10 +42,10 @@ const classes = [
 </section>
 
 <script>
-    const tabs = document.querySelectorAll('[data-id="w-tabs"]')
+    import { on } from '../../utils/DOMUtils'
 
-    Array.from(tabs).forEach(element => {
-        element.addEventListener('click', event => {
+    const addEventListeners = () => {
+        on('[data-id="w-tabs"]', 'click', (event: Event) => {
             const target = event.target as HTMLDivElement
 
             if (target.dataset.value) {
@@ -72,6 +72,9 @@ const classes = [
                     }
                 })
             }
-        })
-    })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.astro b/src/components/ThemeSwitcher/ThemeSwitcher.astro
index 319a748..0621627 100644
--- a/src/components/ThemeSwitcher/ThemeSwitcher.astro
+++ b/src/components/ThemeSwitcher/ThemeSwitcher.astro
@@ -50,59 +50,65 @@ const buttonClasses = [
 
 <script>
     import { getCookie, setCookie } from '../../utils/cookies'
+    import { on } from '../../utils/DOMUtils'
     import { dispatch, listen } from '../../utils/event'
 
-    const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
+    const addEventListeners = () => {
+        const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
 
-    let currentTheme = localStorage.getItem('w-theme')
-        || getCookie('w-theme')
-        || (switchers[0] as HTMLDivElement).dataset.primaryTheme
-        || ''
+        let currentTheme = localStorage.getItem('w-theme')
+                || getCookie('w-theme')
+                || (switchers[0] as HTMLDivElement).dataset.primaryTheme
+                || ''
 
-    const setActiveButton = (buttons: HTMLButtonElement[]) => {
-        buttons.forEach(button => button.dataset.active = 'false')
+        const setActiveButton = (buttons: HTMLButtonElement[]) => {
+            buttons.forEach(button => button.dataset.active = 'false')
 
-        buttons.forEach(button => {
-            if (button.dataset.theme === currentTheme) {
-                button.dataset.active = 'true'
-            }
-        })
-    }
+            buttons.forEach(button => {
+                if (button.dataset.theme === currentTheme) {
+                    button.dataset.active = 'true'
+                }
+            })
+        }
 
-    Array.from(switchers).forEach(switcher => {
-        const buttons = Array.from(switcher.querySelectorAll('button'))
+        Array.from(switchers).forEach(switcher => {
+            const buttons = Array.from(switcher.querySelectorAll('button'))
 
-        setActiveButton(buttons)
+            setActiveButton(buttons)
 
-        listen('theme-switched', theme => {
-            currentTheme = theme
+            listen('theme-switched', theme => {
+                currentTheme = theme
 
-            setActiveButton(buttons)
-        })
+                setActiveButton(buttons)
+            })
 
-        switcher.addEventListener('click', event => {
-            const target = event.target as HTMLButtonElement
+            switcher.addEventListener('click', event => {
+                const target = event.target as HTMLButtonElement
 
-            if (target.nodeName === 'BUTTON') {
-                const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
+                if (target.nodeName === 'BUTTON') {
+                    const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
 
-                const theme = toggleTheme
-                    ? toggleTheme === target.dataset.theme
-                        ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
-                        : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
-                    : target.dataset.theme as string
+                    const theme = toggleTheme
+                        ? toggleTheme === target.dataset.theme
+                            ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
+                            : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
+                        : target.dataset.theme as string
 
-                document.body.classList.replace(currentTheme, theme)
+                    document.body.classList.replace(currentTheme, theme)
 
-                currentTheme = theme
+                    currentTheme = theme
 
-                setActiveButton(buttons)
-                setCookie('w-theme', currentTheme, 30)
-                localStorage.setItem('w-theme', currentTheme)
+                    setActiveButton(buttons)
+                    setCookie('w-theme', currentTheme, 30)
+                    localStorage.setItem('w-theme', currentTheme)
 
-                dispatch('theme-switched', currentTheme)
-            }
+                    dispatch('theme-switched', currentTheme)
+                }
+            })
         })
-    })
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
 
diff --git a/src/pages/blocks/sign-up.astro b/src/pages/blocks/sign-up.astro
index 69c73eb..c33a7a3 100644
--- a/src/pages/blocks/sign-up.astro
+++ b/src/pages/blocks/sign-up.astro
@@ -38,9 +38,11 @@ import ReactSignUp from '@blocks/SignUp/SignUp.tsx'
 <script>
     import { on } from '@utils/DOMUtils'
 
-    // eslint-disable-next-line no-console
-    on('.create-account', 'click', () => console.log('Creating account'))
+    on(document, 'astro:page-load', () => {
+        // eslint-disable-next-line no-console
+        on('.create-account', 'click', () => console.log('Creating account'))
 
-    // eslint-disable-next-line no-console
-    on('.sign-in', 'click', () => console.log('Signing in'))
+        // eslint-disable-next-line no-console
+        on('.sign-in', 'click', () => console.log('Signing in'))
+    })
 </script>
diff --git a/src/pages/components/badge.astro b/src/pages/components/badge.astro
index 4ced539..a132a06 100644
--- a/src/pages/components/badge.astro
+++ b/src/pages/components/badge.astro
@@ -151,5 +151,7 @@ const sections = getSections({
 <script>
     import { on } from '@utils/DOMUtils'
 
-    on('.remove', 'click', (event: any) => event.currentTarget.remove())
+    on(document, 'astro:page-load', () => {
+        on('.remove', 'click', (event: any) => event.currentTarget.remove())
+    })
 </script>
diff --git a/src/pages/components/banner.astro b/src/pages/components/banner.astro
index 3f9df37..1234d23 100644
--- a/src/pages/components/banner.astro
+++ b/src/pages/components/banner.astro
@@ -104,13 +104,15 @@ const text = 'We just released a new version! ✨'
 </style>
 
 <script>
-    import { get,on } from '@utils/DOMUtils'
+    import { get, on } from '@utils/DOMUtils'
 
-    on('.bottom-trigger', 'click', () => {
-        (get('.bottom') as HTMLDivElement).classList.remove('bottom')
-    })
+    on(document, 'astro:page-load', () => {
+        on('.bottom-trigger', 'click', () => {
+            (get('.bottom') as HTMLDivElement).classList.remove('bottom')
+        })
 
-    on('.bottom-padded-trigger', 'click', () => {
-        (get('.bottom-padded') as HTMLDivElement).classList.remove('bottom-padded')
+        on('.bottom-padded-trigger', 'click', () => {
+            (get('.bottom-padded') as HTMLDivElement).classList.remove('bottom-padded')
+        })
     })
 </script>
diff --git a/src/pages/components/carousel.astro b/src/pages/components/carousel.astro
index 5d56959..2f296c5 100644
--- a/src/pages/components/carousel.astro
+++ b/src/pages/components/carousel.astro
@@ -267,13 +267,15 @@ const sections = getSections({
 </style>
 
 <script>
-    const button = document.querySelector('.go-back')
+    import { on } from '@utils/DOMUtils'
 
-    button?.addEventListener('click', () => {
-        const firstSlide = button
-            ?.closest('[data-id="w-carousel"]')
-            ?.children[0].children[0]
+    on(document, 'astro:page-load', () => {
+        on('.go-back', 'click', (event: Event) => {
+            const firstSlide = (event.currentTarget as HTMLButtonElement)
+                ?.closest('[data-id="w-carousel"]')
+                ?.children[0].children[0]
 
-        firstSlide?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+            firstSlide?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+        })
     })
 </script>
diff --git a/src/pages/components/modal.astro b/src/pages/components/modal.astro
index 495dce0..1039125 100644
--- a/src/pages/components/modal.astro
+++ b/src/pages/components/modal.astro
@@ -240,35 +240,37 @@ const sections = getSections({
     import { on } from '@utils/DOMUtils'
     import { closeModal, modal } from '@utils/modal'
 
-    const selectors = [
-        'astro',
-        'svelte',
-        'react'
-    ]
+    on(document, 'astro:page-load', () => {
+        const selectors = [
+            'astro',
+            'svelte',
+            'react'
+        ]
 
-    const ids = Array(10).fill(10).map((x, index) => x * (index + 1))
-    const variants = [
-        '00',
-        '01',
-        '02',
-        ...ids,
-        ...ids.map(x => x + 1),
-        ...ids.map(x => x + 2)
-    ]
+        const ids = Array(10).fill(10).map((x, index) => x * (index + 1))
+        const variants = [
+            '00',
+            '01',
+            '02',
+            ...ids,
+            ...ids.map(x => x + 1),
+            ...ids.map(x => x + 2)
+        ]
 
-    selectors.forEach(selector => {
-        modal({
-            trigger: `#modal-btn-${selector}`,
-            modal: `#modal-${selector}`
-        })
+        selectors.forEach(selector => {
+            modal({
+                trigger: `#modal-btn-${selector}`,
+                modal: `#modal-${selector}`
+            })
 
-        on(`#modal-close-btn-${selector}`, 'click', () => closeModal(`#modal-${selector}`))
-    })
+            on(`#modal-close-btn-${selector}`, 'click', () => closeModal(`#modal-${selector}`))
+        })
 
-    variants.forEach(variant => {
-        modal({
-            trigger: `#modal-btn-${variant}`,
-            modal: `#modal-${variant}`
+        variants.forEach(variant => {
+            modal({
+                trigger: `#modal-btn-${variant}`,
+                modal: `#modal-${variant}`
+            })
         })
     })
 </script>
diff --git a/src/pages/components/popover.astro b/src/pages/components/popover.astro
index 9d1f3a2..1497586 100644
--- a/src/pages/components/popover.astro
+++ b/src/pages/components/popover.astro
@@ -207,57 +207,60 @@ const sections = getSections({
 </Layout>
 
 <script>
+    import { on } from '@utils/DOMUtils'
     import { closePopover, popover } from '@utils/popover'
 
-    const selectors = [
-        'astro',
-        'svelte',
-        'react'
-    ]
+    on(document, 'astro:page-load', () => {
+        const selectors = [
+            'astro',
+            'svelte',
+            'react'
+        ]
 
-    const ids = Array(14).fill(10).map((x, index) => x * (index + 1))
-    const variants = [
-        '00',
-        '01',
-        '02',
-        ...ids,
-        ...ids.map(x => x + 1),
-        ...ids.map(x => x + 2)
-    ]
+        const ids = Array(14).fill(10).map((x, index) => x * (index + 1))
+        const variants = [
+            '00',
+            '01',
+            '02',
+            ...ids,
+            ...ids.map(x => x + 1),
+            ...ids.map(x => x + 2)
+        ]
 
-    selectors.forEach(selector => {
-        const event = popover({
-            trigger: `#popover-btn-${selector}`,
-            popover: `#popover-${selector}`
-        })
+        selectors.forEach(selector => {
+            const event = popover({
+                trigger: `#popover-btn-${selector}`,
+                popover: `#popover-${selector}`
+            })
 
-        document.querySelector('#popover-remove')?.addEventListener('click', () => {
-            closePopover(`#popover-${selector}`)
-            event?.remove()
+            document.querySelector('#popover-remove')?.addEventListener('click', () => {
+                closePopover(`#popover-${selector}`)
+                event?.remove()
+            })
         })
-    })
 
-    variants.forEach(variant => {
-        const button = document.querySelector(`#popover-btn-${variant}`) as HTMLButtonElement
-        const removeButton = document.querySelector(`#popover-${variant} button`)
+        variants.forEach(variant => {
+            const button = document.querySelector(`#popover-btn-${variant}`) as HTMLButtonElement
+            const removeButton = document.querySelector(`#popover-${variant} button`)
 
-        const popoverInstance = popover({
-            trigger: `#popover-btn-${variant}`,
-            popover: `#popover-${variant}`,
-            position: button?.dataset.pos as any || 'bottom',
-            closeOnBlur: !button?.dataset.noClose,
-            closeOnEsc: !button?.dataset.noClose
-        })
+            const popoverInstance = popover({
+                trigger: `#popover-btn-${variant}`,
+                popover: `#popover-${variant}`,
+                position: button?.dataset.pos as any || 'bottom',
+                closeOnBlur: !button?.dataset.noClose,
+                closeOnEsc: !button?.dataset.noClose
+            })
 
-        if (removeButton) {
-            removeButton.addEventListener('click', () => {
-                closePopover(`#popover-${variant}`)
-                popoverInstance?.remove()
+            if (removeButton) {
+                removeButton.addEventListener('click', () => {
+                    closePopover(`#popover-${variant}`)
+                    popoverInstance?.remove()
 
-                button.disabled = true
-                button.classList.remove(button.classList.item(1) as string)
-                button.innerText = 'Popover disabled'
-            })
-        }
+                    button.disabled = true
+                    button.classList.remove(button.classList.item(1) as string)
+                    button.innerText = 'Popover disabled'
+                })
+            }
+        })
     })
 </script>
diff --git a/src/pages/components/progress.astro b/src/pages/components/progress.astro
index d92b900..b5705cc 100644
--- a/src/pages/components/progress.astro
+++ b/src/pages/components/progress.astro
@@ -19,15 +19,15 @@ const sections = getSections({
     <h1>Progress</h1>
     <div class="grid md-2 lg-3">
         <ComponentWrapper type="Astro">
-            <AstroProgress value={25} />
+            <AstroProgress value={25} className="progress" />
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteProgress value={50} color="#ee5253" />
+            <SvelteProgress value={50} color="#ee5253" className="progress" />
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
-            <ReactProgress value={75} color="#48dbfb" />
+            <ReactProgress value={75} color="#48dbfb" className="progress" />
         </ComponentWrapper>
     </div>
 
@@ -163,7 +163,7 @@ const sections = getSections({
 </style>
 
 <script>
-    const animate = false
+    const animate = true
 
     const simulateProgress = (progress: number): any => {
         return new Promise(resolve => {
@@ -173,24 +173,26 @@ const sections = getSections({
         }).then(res => res)
     }
 
-    if (animate) {
-        Array.from(document.querySelectorAll('.progress'))
-            .forEach(async progress => {
-                let percent = Number((progress as HTMLElement).style
-                    .getPropertyValue('--w-progress-width')
-                    .split('%')[0])
+    document.addEventListener('astro:page-load', () => {
+        if (animate) {
+            Array.from(document.querySelectorAll('.progress div'))
+                .forEach(async progress => {
+                    let percent = Number((progress as HTMLElement).style
+                        .getPropertyValue('--w-progress-width')
+                        .split('%')[0])
 
-                while (true) {
-                    percent = await simulateProgress(percent);
+                    while (true) {
+                        percent = await simulateProgress(percent);
 
-                    (progress as HTMLElement)
-                        .style
-                        .setProperty('--w-progress-width', `${percent}%`)
+                        (progress as HTMLElement)
+                            .style
+                            .setProperty('--w-progress-width', `${percent}%`)
 
-                    if (percent === 100) {
-                        percent = 0
+                        if (percent === 100) {
+                            percent = 0
+                        }
                     }
-                }
-            })
-    }
+                })
+        }
+    })
 </script>
diff --git a/src/pages/components/sheet.astro b/src/pages/components/sheet.astro
index 8b75f87..b60d97c 100644
--- a/src/pages/components/sheet.astro
+++ b/src/pages/components/sheet.astro
@@ -207,35 +207,37 @@ const sections = getSections({
     import { on } from '@utils/DOMUtils'
     import { closeModal, modal } from '@utils/modal'
 
-    const selectors = [
-        'astro',
-        'svelte',
-        'react'
-    ]
-
-    const ids = Array(9).fill(10).map((x, index) => x * (index + 1))
-    const variants = [
-        '00',
-        '01',
-        '02',
-        ...ids,
-        ...ids.map(x => x + 1),
-        ...ids.map(x => x + 2)
-    ]
-
-    selectors.forEach(selector => {
-        modal({
-            trigger: `#sheet-btn-${selector}`,
-            modal: `#sheet-${selector}`
+    on(document, 'astro:page-load', () => {
+        const selectors = [
+            'astro',
+            'svelte',
+            'react'
+        ]
+
+        const ids = Array(9).fill(10).map((x, index) => x * (index + 1))
+        const variants = [
+            '00',
+            '01',
+            '02',
+            ...ids,
+            ...ids.map(x => x + 1),
+            ...ids.map(x => x + 2)
+        ]
+
+        selectors.forEach(selector => {
+            modal({
+                trigger: `#sheet-btn-${selector}`,
+                modal: `#sheet-${selector}`
+            })
+
+            on(`#sheet-close-btn-${selector}`, 'click', () => closeModal(`#sheet-${selector}`))
         })
 
-        on(`#sheet-close-btn-${selector}`, 'click', () => closeModal(`#sheet-${selector}`))
-    })
-
-    variants.forEach(variant => {
-        modal({
-            trigger: `#sheet-btn-${variant}`,
-            modal: `#sheet-${variant}`
+        variants.forEach(variant => {
+            modal({
+                trigger: `#sheet-btn-${variant}`,
+                modal: `#sheet-${variant}`
+            })
         })
     })
 </script>
diff --git a/src/pages/components/sidebar.astro b/src/pages/components/sidebar.astro
index 5062ef6..a67caec 100644
--- a/src/pages/components/sidebar.astro
+++ b/src/pages/components/sidebar.astro
@@ -96,10 +96,13 @@ const sections = getSections({
 </style>
 
 <script>
+    import { on } from '@utils/DOMUtils'
     import { modal } from '@utils/modal'
 
-    modal({
-        trigger: '#open-sidebar',
-        modal: '#sidebar'
+    on(document, 'astro:page-load', () => {
+        modal({
+            trigger: '#open-sidebar',
+            modal: '#sidebar'
+        })
     })
 </script>
diff --git a/src/pages/components/slider.astro b/src/pages/components/slider.astro
index 3935c7c..ec19d0e 100644
--- a/src/pages/components/slider.astro
+++ b/src/pages/components/slider.astro
@@ -100,14 +100,18 @@ const sections = getSections({
 </Layout>
 
 <script>
-    const slider1 = document.querySelector('.labelled')
-    const slider2 = document.querySelector('.labelled1')
+    import { on } from '@utils/DOMUtils'
 
-    slider1?.addEventListener('change', (e: any) => {
-        e.target.nextElementSibling.innerText = e.target.value
-    })
+    on(document, 'astro:page-load', () => {
+        const slider1 = document.querySelector('.labelled')
+        const slider2 = document.querySelector('.labelled1')
+
+        slider1?.addEventListener('change', (e: any) => {
+            e.target.nextElementSibling.innerText = e.target.value
+        })
 
-    slider2?.addEventListener('change', (e: any) => {
-        e.target.previousElementSibling.innerText = e.target.value
+        slider2?.addEventListener('change', (e: any) => {
+            e.target.previousElementSibling.innerText = e.target.value
+        })
     })
 </script>
diff --git a/src/pages/components/toast.astro b/src/pages/components/toast.astro
index 1918006..63e3e33 100644
--- a/src/pages/components/toast.astro
+++ b/src/pages/components/toast.astro
@@ -158,58 +158,60 @@ const sections = getSections({
         toast
     } from '@utils/toast'
 
-    setDefaultTimeout(3000)
-
-    const ids = Array(13).fill(10).map((x, index) => x * (index + 1))
-    const buttons = [
-        'astro',
-        'svelte',
-        'react',
-        '00',
-        '01',
-        '02',
-        ...ids,
-        ...ids.map(x => x + 1),
-        ...ids.map(x => x + 2)
-    ]
-
-    // Show toast functionaly
-    buttons.forEach(id => {
-        on(`#toast-btn-${id}`, 'click', () => toast(`#toast-${id}`))
-    });
-
-    // Dismissable functionality with long timeout
-    [0, 1, 2].forEach(x => {
-        on(`#dismissable-show-${x}`, 'click', () => {
-            toast({
-                element: `#dismissable-toast-${x}`,
-                timeout: 10_000
+    on(document, 'astro:page-load', () => {
+        setDefaultTimeout(3000)
+
+        const ids = Array(13).fill(10).map((x, index) => x * (index + 1))
+        const buttons = [
+            'astro',
+            'svelte',
+            'react',
+            '00',
+            '01',
+            '02',
+            ...ids,
+            ...ids.map(x => x + 1),
+            ...ids.map(x => x + 2)
+        ]
+
+        // Show toast functionaly
+        buttons.forEach(id => {
+            on(`#toast-btn-${id}`, 'click', () => toast(`#toast-${id}`))
+        });
+
+        // Dismissable functionality with long timeout
+        [0, 1, 2].forEach(x => {
+            on(`#dismissable-show-${x}`, 'click', () => {
+                toast({
+                    element: `#dismissable-toast-${x}`,
+                    timeout: 10_000
+                })
             })
-        })
 
-        on(`#dismissable-hide-${x}`, 'click', () => {
-            hideToast(`#dismissable-toast-${x}`)
-        })
-    });
-
-    // Programmatically setting title & content
-    [0, 1, 2].forEach(x => {
-        on(`#programmatic-btn-${x}`, 'click', () => {
-            toast({
-                element: `#programmatic-toast-${x}`,
-                title: 'Title set through JS',
-                content: 'Content created in JS with <strong>HTML</strong>'
+            on(`#dismissable-hide-${x}`, 'click', () => {
+                hideToast(`#dismissable-toast-${x}`)
             })
-        })
-    });
-
-    // Programmatically setting position
-    [0, 1, 2].forEach(x => {
-        on(`#pos-btn-${x}`, 'click', () => {
-            toast({
-                element: `#pos-toast-${x}`,
-                title: 'Title set through JS',
-                position: 'top-left'
+        });
+
+        // Programmatically setting title & content
+        [0, 1, 2].forEach(x => {
+            on(`#programmatic-btn-${x}`, 'click', () => {
+                toast({
+                    element: `#programmatic-toast-${x}`,
+                    title: 'Title set through JS',
+                    content: 'Content created in JS with <strong>HTML</strong>'
+                })
+            })
+        });
+
+        // Programmatically setting position
+        [0, 1, 2].forEach(x => {
+            on(`#pos-btn-${x}`, 'click', () => {
+                toast({
+                    element: `#pos-toast-${x}`,
+                    title: 'Title set through JS',
+                    position: 'top-left'
+                })
             })
         })
     })
diff --git a/src/pages/css/themes.astro b/src/pages/css/themes.astro
index 5c69949..b58775e 100644
--- a/src/pages/css/themes.astro
+++ b/src/pages/css/themes.astro
@@ -37,51 +37,54 @@ import { themes } from '@data'
 </Layout>
 
 <script>
+    import { on } from '@utils/DOMUtils'
     import { interpolate } from '@utils/interpolate'
     import { toast } from '@utils/toast'
 
-    const input = document.querySelector('#radius') as HTMLElement
-    const copy = document.querySelector('#copy') as HTMLElement
-
-    input.addEventListener('change', (e: any) => {
-        const value = Number(e.target.value)
-
-        const sm = interpolate(value, [0, 100], [0, 8])
-        const md = interpolate(value, [0, 100], [0, 20])
-        const lg = interpolate(value, [0, 100], [0, 40])
-        const xl = interpolate(value, [0, 100], [0, 60])
-
-        document.body.style.setProperty('--w-sm-radius', `${sm}px`)
-        document.body.style.setProperty('--w-md-radius', `${md}px`)
-        document.body.style.setProperty('--w-lg-radius', `${lg}px`)
-        document.body.style.setProperty('--w-xl-radius', `${xl}px`)
-    })
-
-    copy.addEventListener('click', () => {
-        const bodyStyles = document.body.style
-
-        const sm = bodyStyles.getPropertyValue('--w-sm-radius') || '2px'
-        const md = bodyStyles.getPropertyValue('--w-md-radius') || '5px'
-        const lg = bodyStyles.getPropertyValue('--w-lg-radius') || '10px'
-        const xl = bodyStyles.getPropertyValue('--w-xl-radius') || '15px'
-
-        const code = `
-            @use 'webcoreui/styles' as *;
-            @include setup((
-                theme: '${document.body.className}'
-            ));
-
-            html body {
-                --w-sm-radius: ${sm};
-                --w-md-radius: ${md};
-                --w-lg-radius: ${lg};
-                --w-xl-radius: ${xl};
-            }
-        `.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '')
-
-        navigator.clipboard.writeText(code)
-
-        toast('#toast')
+    on(document, 'astro:page-load', () => {
+        const input = document.querySelector('#radius') as HTMLElement
+        const copy = document.querySelector('#copy') as HTMLElement
+
+        input?.addEventListener('change', (e: any) => {
+            const value = Number(e.target.value)
+
+            const sm = interpolate(value, [0, 100], [0, 8])
+            const md = interpolate(value, [0, 100], [0, 20])
+            const lg = interpolate(value, [0, 100], [0, 40])
+            const xl = interpolate(value, [0, 100], [0, 60])
+
+            document.body.style.setProperty('--w-sm-radius', `${sm}px`)
+            document.body.style.setProperty('--w-md-radius', `${md}px`)
+            document.body.style.setProperty('--w-lg-radius', `${lg}px`)
+            document.body.style.setProperty('--w-xl-radius', `${xl}px`)
+        })
+
+        copy?.addEventListener('click', () => {
+            const bodyStyles = document.body.style
+
+            const sm = bodyStyles.getPropertyValue('--w-sm-radius') || '2px'
+            const md = bodyStyles.getPropertyValue('--w-md-radius') || '5px'
+            const lg = bodyStyles.getPropertyValue('--w-lg-radius') || '10px'
+            const xl = bodyStyles.getPropertyValue('--w-xl-radius') || '15px'
+
+            const code = `
+                @use 'webcoreui/styles' as *;
+                @include setup((
+                    theme: '${document.body.className}'
+                ));
+
+                html body {
+                    --w-sm-radius: ${sm};
+                    --w-md-radius: ${md};
+                    --w-lg-radius: ${lg};
+                    --w-xl-radius: ${xl};
+                }
+            `.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '')
+
+            navigator.clipboard.writeText(code)
+
+            toast('#toast')
+        })
     })
 </script>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dfb4331..a0188bb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -417,9 +417,11 @@ import {
 <script>
     import { get, on } from '@utils/DOMUtils'
 
-    on('.scroll-to-components', 'click', () => {
-        (get('.components-heading') as HTMLDivElement).scrollIntoView({
-            behavior: 'smooth'
+    on(document, 'astro:page-load', () => {
+        on('.scroll-to-components', 'click', () => {
+            (get('.components-heading') as HTMLDivElement).scrollIntoView({
+                behavior: 'smooth'
+            })
         })
     })
 </script>
diff --git a/src/static/Layout.astro b/src/static/Layout.astro
index 09c29fb..f7bc7a6 100644
--- a/src/static/Layout.astro
+++ b/src/static/Layout.astro
@@ -7,6 +7,7 @@ import Menu from '@components/Menu/Menu.astro'
 import logo from '../../public/img/logo.svg?raw'
 
 import { classNames } from '@utils/classNames'
+import { ClientRouter } from 'astro:transitions'
 
 const {
     nonStickyMenu,
@@ -95,6 +96,7 @@ const externalLinks = [
         <link rel="icon" href="/img/logo.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <title>Webcore</title>
+        <ClientRouter />
     </head>
     <body class={theme}>
         <Menu