diff --git a/src/resources/js/app.ts b/src/resources/js/app.ts
index 6ff6c587..c47efb6c 100644
--- a/src/resources/js/app.ts
+++ b/src/resources/js/app.ts
@@ -8,7 +8,7 @@ import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 // @ts-expect-error Declaration of ZiggyVue
 import { ZiggyVue } from 'ziggy-js/dist/vue.m';
-import { HasRolePlugin } from '@/plugins/user/authorize';
+import { HasRolePlugin } from '@/shared/plugins/user/authorize';
 import PrimeVue from 'primevue/config';
 import Tailwind from 'primevue/passthrough/tailwind';
 import ToastService from 'primevue/toastservice';
diff --git a/src/resources/js/entities/anime/model/index.ts b/src/resources/js/entities/anime/model/index.ts
index 1b54def6..0fdee505 100644
--- a/src/resources/js/entities/anime/model/index.ts
+++ b/src/resources/js/entities/anime/model/index.ts
@@ -1 +1,5 @@
-export { type AnimePagination, type AnimePerDomain } from './types';
+export {
+    type AnimePagination,
+    type AddedAnimePerDomain,
+    type AddedAnimePerMonth,
+} from './types';
diff --git a/src/resources/js/entities/anime/model/types.ts b/src/resources/js/entities/anime/model/types.ts
index 3dbea242..9b780805 100644
--- a/src/resources/js/entities/anime/model/types.ts
+++ b/src/resources/js/entities/anime/model/types.ts
@@ -2,6 +2,8 @@ import { Laravel, Models } from '@/types';
 
 type AnimePagination = Laravel.Pagination<Models.Anime>;
 
-type AnimePerDomain = Record<string, number>;
+type AddedAnimePerDomain = Record<string, number>;
 
-export { type AnimePagination, type AnimePerDomain };
+type AddedAnimePerMonth = number[];
+
+export { type AnimePagination, type AddedAnimePerDomain, type AddedAnimePerMonth };
diff --git a/src/resources/js/features/dashboard/charts/count-anime-per-domain/CountAnimePerDomain.vue b/src/resources/js/features/dashboard/charts/count-anime-per-domain/CountAnimePerDomain.vue
index 4eac89d8..2c8b79c6 100644
--- a/src/resources/js/features/dashboard/charts/count-anime-per-domain/CountAnimePerDomain.vue
+++ b/src/resources/js/features/dashboard/charts/count-anime-per-domain/CountAnimePerDomain.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { Chart } from '@/shared/ui/chart';
-import { computed, inject } from 'vue';
-import { type AnimePerDomain } from '@/entities/anime';
+import { computed } from 'vue';
+import { type AddedAnimePerDomain } from '@/entities/anime';
 
-const animePerDomain = inject<AnimePerDomain>('animePerDomain') as object;
+type Props = {
+    domainStatistic: AddedAnimePerDomain;
+};
+
+const { domainStatistic } = defineProps<Props>();
 
 const data = computed(() => ({
-    labels: Object.keys(animePerDomain),
+    labels: Object.keys(domainStatistic),
     datasets: [
         {
             label: 'Anime per domain',
-            data: Object.values(animePerDomain),
+            data: Object.values(domainStatistic),
             backgroundColor: [
                 'rgba(255, 159, 64, 0.2)',
                 'rgba(75, 192, 192, 0.2)',
diff --git a/src/resources/js/features/dashboard/charts/parsed-monthly-anime/ParsedMonthlyAnime.vue b/src/resources/js/features/dashboard/charts/parsed-monthly-anime/ParsedMonthlyAnime.vue
index 161ca2f4..a8120157 100644
--- a/src/resources/js/features/dashboard/charts/parsed-monthly-anime/ParsedMonthlyAnime.vue
+++ b/src/resources/js/features/dashboard/charts/parsed-monthly-anime/ParsedMonthlyAnime.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { Chart } from '@/shared/ui/chart';
-import { inject } from 'vue';
+import { type AddedAnimePerMonth } from '@/entities/anime';
 
-const animePerMonth = inject('animePerMonth');
+type Props = {
+    monthlyStatistic: AddedAnimePerMonth;
+};
+
+const { monthlyStatistic } = defineProps<Props>();
 
 const months: string[] = [
     'January',
@@ -26,7 +30,7 @@ const data = {
     datasets: [
         {
             label: 'Parsed anime per month',
-            data: animePerMonth,
+            data: monthlyStatistic,
             fill: false,
             borderColor: documentStyle.getPropertyValue('--red-500'),
             tension: 0.4,
diff --git a/src/resources/js/features/navigation/search-button/SearchButton.vue b/src/resources/js/features/navigation/search-button/SearchButton.vue
new file mode 100644
index 00000000..05b063b9
--- /dev/null
+++ b/src/resources/js/features/navigation/search-button/SearchButton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Button } from '@/shared/ui/button';
+</script>
+
+<template>
+    <Button
+        variant="secondary"
+        class="outline-none border-none bg-transparent focus:outline-none focus:ring-0 focus:border-none"
+    >
+        <i class="pi pi-search text-zinc-600 dark:text-white" />
+    </Button>
+</template>
+
+<style scoped></style>
diff --git a/src/resources/js/features/navigation/search-button/index.ts b/src/resources/js/features/navigation/search-button/index.ts
new file mode 100644
index 00000000..4c4d236e
--- /dev/null
+++ b/src/resources/js/features/navigation/search-button/index.ts
@@ -0,0 +1 @@
+export { default as SearchButton } from './SearchButton.vue';
diff --git a/src/resources/js/features/navigation/search-modal/SearchModal.test.ts b/src/resources/js/features/navigation/search-modal/SearchModal.test.ts
new file mode 100644
index 00000000..cdc071d2
--- /dev/null
+++ b/src/resources/js/features/navigation/search-modal/SearchModal.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { Modal } from '@/shared/ui/modal';
+import { TextInput } from '@/shared/ui/input/text';
+import SearchModal from './SearchModal.vue';
+
+describe('SearchModal test (SearchModal.vue)', () => {
+    it('Shows modal when visible is true', () => {
+        const wrapper = mount(SearchModal, {
+            props: { visible: true },
+        });
+
+        expect(wrapper.findComponent(Modal).props('visible')).toBeTruthy();
+    });
+
+    it('Modal emits closed event when it is closed', async () => {
+        const wrapper = mount(SearchModal, {
+            props: { visible: true },
+        });
+
+        await wrapper.findComponent(Modal).vm.$emit('close');
+        expect(wrapper.emitted()).toHaveProperty('closed');
+    });
+
+    it('Modal binds input value to ref', async () => {
+        const wrapper = mount(SearchModal, {
+            props: { visible: true },
+        });
+
+        const input = wrapper.findComponent(TextInput);
+        await input.setValue('test query');
+        expect(wrapper.vm.query).toBe('test query');
+    });
+});
diff --git a/src/resources/js/features/navigation/search-modal/SearchModal.vue b/src/resources/js/features/navigation/search-modal/SearchModal.vue
new file mode 100644
index 00000000..80ca33ee
--- /dev/null
+++ b/src/resources/js/features/navigation/search-modal/SearchModal.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Modal } from '@/shared/ui/modal';
+import { TextInput } from '@/shared/ui/input/text';
+import { ref } from 'vue';
+
+type Props = {
+    visible: boolean;
+};
+
+defineProps<Props>();
+defineEmits<{ closed: [] }>();
+
+const query = ref<string>('');
+</script>
+
+<template>
+    <Modal
+        :visible="visible"
+        :close-button="false"
+        close-on-escape
+        close-on-outside-click
+        @close="$emit('closed')"
+    >
+        <template #header>
+            <TextInput
+                ref="searchInput"
+                v-model="query"
+                name="search"
+                autofocus
+                class="w-full text-xs ring-1 bg-transparent ring-gray-200 dark:ring-zinc-600 focus:ring-red-300 px-5 text-gray-600 dark:text-white py-3 rounded-full w-full outline-none focus:ring-1"
+                placeholder="Search"
+            />
+        </template>
+    </Modal>
+</template>
+
+<style scoped></style>
diff --git a/src/resources/js/features/navigation/search-modal/index.ts b/src/resources/js/features/navigation/search-modal/index.ts
new file mode 100644
index 00000000..78f1cd75
--- /dev/null
+++ b/src/resources/js/features/navigation/search-modal/index.ts
@@ -0,0 +1 @@
+export { default as SearchModal } from './SearchModal.vue';
diff --git a/src/resources/js/features/navigation/search/SearchInput.test.ts b/src/resources/js/features/navigation/search/SearchInput.test.ts
deleted file mode 100644
index 046313c2..00000000
--- a/src/resources/js/features/navigation/search/SearchInput.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { mount } from '@vue/test-utils';
-import SearchInput from './SearchInput.vue';
-import { describe, expect, it } from 'vitest';
-
-describe('SearchInput test (SearchInput.vue)', () => {
-    it('renders input element', () => {
-        const wrapper = mount(SearchInput);
-        const input = wrapper.find('input');
-
-        expect(input.exists()).toBeTruthy();
-    });
-
-    it('focuses on input when CTRL + K is pressed', async () => {
-        const wrapper = mount(SearchInput, { attachTo: document.body });
-        const input = wrapper.find('input');
-
-        const ctrlKEvent = new KeyboardEvent('keydown', { ctrlKey: true, key: 'k' });
-        window.dispatchEvent(ctrlKEvent);
-
-        await wrapper.vm.$nextTick();
-
-        expect(input.element).toBe(document.activeElement);
-    });
-
-    it('updates query when input value changes', async () => {
-        const wrapper = mount(SearchInput);
-        const input = wrapper.find('input');
-
-        await input.setValue('test query');
-
-        expect(wrapper.vm.query).toBe('test query');
-    });
-});
diff --git a/src/resources/js/features/navigation/search/SearchInput.vue b/src/resources/js/features/navigation/search/SearchInput.vue
deleted file mode 100644
index a5c7240f..00000000
--- a/src/resources/js/features/navigation/search/SearchInput.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import InputText from 'primevue/inputtext';
-import { ComponentPublicInstance, onMounted, ref } from 'vue';
-
-const query = ref<string | null>(null);
-const searchInput = ref<InputText | null>(null);
-
-const focus = (event: KeyboardEvent) => {
-    if (event.ctrlKey && event.key === 'k') {
-        event.preventDefault();
-
-        const input = searchInput.value as ComponentPublicInstance<{
-            $el: HTMLInputElement;
-        }>;
-        input?.$el?.focus();
-    }
-};
-
-onMounted(() => window.addEventListener('keydown', focus));
-</script>
-
-<template>
-    <span class="p-input-icon-left">
-        <i class="pi pi-search text-zinc-600 dark:text-white" />
-
-        <InputText
-            ref="searchInput"
-            v-model="query"
-            name="search"
-            class="text-xs ring-1 bg-transparent ring-gray-200 dark:ring-zinc-600 focus:ring-red-300 pl-10 pr-5 text-gray-600 dark:text-white py-3 rounded-full w-full outline-none focus:ring-1"
-            placeholder="Search (CTRL + K)"
-        />
-    </span>
-</template>
-
-<style scoped></style>
diff --git a/src/resources/js/features/navigation/search/index.ts b/src/resources/js/features/navigation/search/index.ts
deleted file mode 100644
index 1a688d8f..00000000
--- a/src/resources/js/features/navigation/search/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SearchInput } from './SearchInput.vue';
diff --git a/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.test.ts b/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.test.ts
index 86a63b90..75be4735 100644
--- a/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.test.ts
+++ b/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.test.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it, vitest } from 'vitest';
 import TelegramLoginWidget from './TelegramLoginWidget.vue';
-import { RequestAccess, WidgetSize } from './types';
+import { RequestAccess, WidgetSize } from './model/types';
 
 describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {
     it('Renders correctly', async () => {
diff --git a/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.vue b/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.vue
index 229b2474..4b4b5eb3 100644
--- a/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.vue
+++ b/src/resources/js/features/telegram/login-widget/TelegramLoginWidget.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
-import { RequestAccess, WidgetSize } from '@/features/telegram/login-widget/types';
-import { TelegramUser } from '@/entities/telegram-user';
+import { RequestAccess, WidgetSize } from '@/features/telegram/login-widget/model/types';
+import { type TelegramUser } from '@/entities/telegram-user';
 
 type Props = {
     bot: string;
diff --git a/src/resources/js/features/telegram/login-widget/types.ts b/src/resources/js/features/telegram/login-widget/model/types.ts
similarity index 100%
rename from src/resources/js/features/telegram/login-widget/types.ts
rename to src/resources/js/features/telegram/login-widget/model/types.ts
diff --git a/src/resources/js/pages/Dashboard/Index.vue b/src/resources/js/pages/Dashboard/Index.vue
index fdf475b2..674488df 100644
--- a/src/resources/js/pages/Dashboard/Index.vue
+++ b/src/resources/js/pages/Dashboard/Index.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
 import { AuthenticatedLayout } from '@/widgets/layouts';
 import { Head } from '@inertiajs/vue3';
-import { AnimePerDomain } from '@/entities/anime';
+import { type AddedAnimePerDomain, type AddedAnimePerMonth } from '@/entities/anime';
 import { Charts, StatisticCards } from '@/widgets/dashboard';
 import { AnimeCarousel } from '@/features/dashboard/anime-carousel';
-import { provide } from 'vue';
 import { Models } from '@/types';
 
 type Props = {
     animeCount: number;
     usersCount: number;
-    animePerMonth: number[];
-    animePerDomain: AnimePerDomain;
+    animePerMonth: AddedAnimePerMonth;
+    animePerDomain: AddedAnimePerDomain;
     latestAnime: Models.Anime[];
 };
 
-const props = defineProps<Props>();
-
-provide('animePerMonth', props.animePerMonth);
-provide('animePerDomain', props.animePerDomain);
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/src/resources/js/plugins/user/authorize.test.ts b/src/resources/js/shared/plugins/user/authorize.test.ts
similarity index 100%
rename from src/resources/js/plugins/user/authorize.test.ts
rename to src/resources/js/shared/plugins/user/authorize.test.ts
diff --git a/src/resources/js/plugins/user/authorize.ts b/src/resources/js/shared/plugins/user/authorize.ts
similarity index 100%
rename from src/resources/js/plugins/user/authorize.ts
rename to src/resources/js/shared/plugins/user/authorize.ts
diff --git a/src/resources/js/shared/ui/input/index.ts b/src/resources/js/shared/ui/input/index.ts
deleted file mode 100644
index 5ecdd1f3..00000000
--- a/src/resources/js/shared/ui/input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui';
diff --git a/src/resources/js/shared/ui/input/ui/text/TextInput.vue b/src/resources/js/shared/ui/input/text/TextInput.vue
similarity index 100%
rename from src/resources/js/shared/ui/input/ui/text/TextInput.vue
rename to src/resources/js/shared/ui/input/text/TextInput.vue
diff --git a/src/resources/js/shared/ui/input/ui/text/index.ts b/src/resources/js/shared/ui/input/text/index.ts
similarity index 100%
rename from src/resources/js/shared/ui/input/ui/text/index.ts
rename to src/resources/js/shared/ui/input/text/index.ts
diff --git a/src/resources/js/shared/ui/input/ui/index.ts b/src/resources/js/shared/ui/input/ui/index.ts
deleted file mode 100644
index 1a9ac146..00000000
--- a/src/resources/js/shared/ui/input/ui/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './text';
diff --git a/src/resources/js/shared/ui/modal/Modal.test.ts b/src/resources/js/shared/ui/modal/Modal.test.ts
index 789768bc..ecad475a 100644
--- a/src/resources/js/shared/ui/modal/Modal.test.ts
+++ b/src/resources/js/shared/ui/modal/Modal.test.ts
@@ -35,7 +35,12 @@ describe('BaseModal test (Modal.vue)', () => {
             props: { visible: true, closeOnEscape: true },
         });
 
-        await wrapper.find('.modal-wrapper').trigger('keyup.esc');
+        const modal = wrapper.find('.modal-wrapper');
+        expect(modal.isVisible()).toBeTruthy();
+
+        const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+        window.dispatchEvent(escapeEvent);
+
         expect(wrapper.emitted()).toHaveProperty('close');
     });
 
@@ -48,4 +53,27 @@ describe('BaseModal test (Modal.vue)', () => {
         expect(wrapper.emitted()).toHaveProperty('click:outside');
         expect(wrapper.emitted()).toHaveProperty('close');
     });
+
+    it('Modal will render content in slots', async () => {
+        const wrapper = mount(BaseModal, {
+            props: { visible: true },
+            slots: {
+                header: '<div>Test Header</div>',
+                body: '<div>Test Body</div>',
+                footer: '<div>Test Footer</div>',
+            },
+        });
+
+        expect(wrapper.find('header').html()).toContain('<div>Test Header</div>');
+        expect(wrapper.find('main').html()).toContain('<div>Test Body</div>');
+        expect(wrapper.find('footer').html()).toContain('<div>Test Footer</div>');
+    });
+
+    it('Modal will not render close closeButton prop is false', () => {
+        const wrapper = mount(BaseModal, {
+            props: { visible: true, closeButton: false },
+        });
+
+        expect(wrapper.find('button[aria-label="close"]').exists()).toBeFalsy();
+    });
 });
diff --git a/src/resources/js/shared/ui/modal/Modal.vue b/src/resources/js/shared/ui/modal/Modal.vue
index 49896c66..0ec90362 100644
--- a/src/resources/js/shared/ui/modal/Modal.vue
+++ b/src/resources/js/shared/ui/modal/Modal.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { type ModalSize } from './types';
 
 type Props = {
     visible: boolean;
     closeOnEscape?: boolean;
     closeOnOutsideClick?: boolean;
+    closeButton?: boolean;
     size?: ModalSize;
 };
 
-const props = withDefaults(defineProps<Props>(), {
-    size: '2xl',
-});
+const props = withDefaults(defineProps<Props>(), { closeButton: true, size: '2xl' });
 const emit = defineEmits<{ close: []; 'click:outside': [] }>();
 const modalRef = ref<HTMLElement | null>(null);
 
@@ -32,10 +31,12 @@ const modalSize = computed(() => {
 });
 
 const close = () => {
-    emit('close');
+    if (props.visible) {
+        emit('close');
+    }
 };
-const closeOnEscape = () => {
-    if (props.closeOnEscape) {
+const closeOnEscape = (event: KeyboardEvent) => {
+    if (props.closeOnEscape && event.key === 'Escape') {
         close();
     }
 };
@@ -46,9 +47,15 @@ const closeOnOutsideClick = () => {
     }
 };
 
-watchEffect(() => {
-    if (modalRef.value) {
-        modalRef.value!.focus();
+onMounted(() => {
+    if (props.closeOnEscape) {
+        window.addEventListener('keydown', closeOnEscape);
+    }
+});
+
+onUnmounted(() => {
+    if (props.closeOnEscape) {
+        window.removeEventListener('keydown', closeOnEscape);
     }
 });
 </script>
@@ -69,11 +76,9 @@ watchEffect(() => {
             <div
                 ref="modalRef"
                 class="modal-wrapper overflow-y-auto overflow-x-hidden outline-none fixed top-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
-                tabindex="0"
-                @keyup.esc="closeOnEscape"
                 @click.self="closeOnOutsideClick"
             >
-                <div :class="modalSize" class="modal relative p-4 w-full h-full">
+                <div :class="modalSize" class="modal relative p-4 w-full">
                     <!-- Modal content -->
                     <div class="relative bg-white rounded-lg shadow dark:bg-gray-800">
                         <!-- Modal header -->
@@ -88,6 +93,7 @@ watchEffect(() => {
                             <slot name="header" />
 
                             <button
+                                v-if="closeButton"
                                 aria-label="close"
                                 class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                                 type="button"
diff --git a/src/resources/js/types/global.d.ts b/src/resources/js/types/global.d.ts
index d80f6097..cf46a7bc 100644
--- a/src/resources/js/types/global.d.ts
+++ b/src/resources/js/types/global.d.ts
@@ -2,7 +2,7 @@ import { PageProps as InertiaPageProps } from '@inertiajs/core';
 import { AxiosInstance } from 'axios';
 import ziggyRoute, { Config as ZiggyConfig } from 'ziggy-js';
 import { PageProps as AppPageProps } from './';
-import { useHasRole } from '@/plugins/user/authorize';
+import { useHasRole } from '@/shared/plugins/user/authorize';
 import { onTelegramAuth } from '@/entities/telegram-user';
 import Pusher from 'pusher-js';
 import Echo from 'laravel-echo';
diff --git a/src/resources/js/widgets/bottom-navigation/ui/BottomNavigation.vue b/src/resources/js/widgets/bottom-navigation/ui/BottomNavigation.vue
index 5b663b02..81de49c5 100644
--- a/src/resources/js/widgets/bottom-navigation/ui/BottomNavigation.vue
+++ b/src/resources/js/widgets/bottom-navigation/ui/BottomNavigation.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { NavigationLink } from '@/features/bottom-navigation/navigation-link';
+import { useHasRole } from '@/shared/plugins/user/authorize';
+import { computed } from 'vue';
+
+const isOwner = useHasRole('owner');
+const gridColumns = computed((): string => (isOwner ? 'grid-cols-4' : 'grid-cols-3'));
 </script>
 
 <template>
     <nav
         class="fixed sm:hidden bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-300 dark:bg-gray-800 dark:border-gray-600"
     >
-        <div class="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">
+        <div class="grid h-full max-w-lg mx-auto font-medium" :class="gridColumns">
             <NavigationLink text="Home" :url="route('dashboard')">
                 <svg
                     class="w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-red-500"
diff --git a/src/resources/js/widgets/dashboard/charts/Charts.vue b/src/resources/js/widgets/dashboard/charts/Charts.vue
index 6c864a62..5355df8f 100644
--- a/src/resources/js/widgets/dashboard/charts/Charts.vue
+++ b/src/resources/js/widgets/dashboard/charts/Charts.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { CountAnimePerDomain, ParsedMonthlyAnime } from '@/features/dashboard/charts';
 import { SectionTitle } from '@/shared/ui/section-title';
+import { type AddedAnimePerDomain, type AddedAnimePerMonth } from '@/entities/anime';
+
+type Props = {
+    animePerMonth: AddedAnimePerMonth;
+    animePerDomain: AddedAnimePerDomain;
+};
+
+defineProps<Props>();
 </script>
 
 <template>
@@ -8,9 +16,9 @@ import { SectionTitle } from '@/shared/ui/section-title';
         <SectionTitle title="Charts" />
 
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-5">
-            <ParsedMonthlyAnime />
+            <ParsedMonthlyAnime :monthly-statistic="animePerMonth" />
 
-            <CountAnimePerDomain />
+            <CountAnimePerDomain :domain-statistic="animePerDomain" />
         </div>
     </div>
 </template>
diff --git a/src/resources/js/widgets/layouts/authenticated/AuthenticatedLayout.test.ts b/src/resources/js/widgets/layouts/authenticated/AuthenticatedLayout.test.ts
index 0c7d591f..eea15eca 100644
--- a/src/resources/js/widgets/layouts/authenticated/AuthenticatedLayout.test.ts
+++ b/src/resources/js/widgets/layouts/authenticated/AuthenticatedLayout.test.ts
@@ -2,7 +2,7 @@ import { afterAll, afterEach, describe, expect, it, vi } from 'vitest';
 import { config, mount } from '@vue/test-utils';
 import AuthenticatedLayout from './AuthenticatedLayout.vue';
 import { ZiggyVue } from 'ziggy-js/dist/vue.m';
-import { HasRolePlugin } from '@/plugins/user/authorize';
+import { HasRolePlugin } from '@/shared/plugins/user/authorize';
 import { usePage } from '@inertiajs/vue3';
 import { NavigationLink } from '@/features/navigation/navigation-link';
 import { ZiggyMockConfig } from '@/mocks/ziggy-js';
diff --git a/src/resources/js/widgets/navigation/ui/Navigation.vue b/src/resources/js/widgets/navigation/ui/Navigation.vue
index c219ff9b..22a2d495 100644
--- a/src/resources/js/widgets/navigation/ui/Navigation.vue
+++ b/src/resources/js/widgets/navigation/ui/Navigation.vue
@@ -3,9 +3,29 @@ import { Link } from '@inertiajs/vue3';
 import { DropdownLink } from '@/features/navigation/dropdown-link';
 import { NavigationLink } from '@/features/navigation/navigation-link';
 import { ApplicationLogo } from '@/shared/ui/logo';
-import { SearchInput } from '@/features/navigation/search';
 import { Dropdown } from '@/shared/ui/dropdown';
 import { ThemeSwitcher } from '@/features/theme-switcher';
+import { SearchButton } from '@/features/navigation/search-button';
+import { SearchModal } from '@/features/navigation/search-modal';
+import { ComponentPublicInstance, onMounted, onUnmounted, ref } from 'vue';
+
+const showSearchModal = ref<boolean>(false);
+const buttonRef = ref<HTMLButtonElement | null>(null);
+
+const toggleSearchModalVisibility = () =>
+    (showSearchModal.value = !showSearchModal.value);
+
+const activateSearch = (event: KeyboardEvent) => {
+    if (event.ctrlKey && event.key === 'k') {
+        event.preventDefault();
+
+        (buttonRef.value as ComponentPublicInstance)?.$el.click();
+        (buttonRef.value as ComponentPublicInstance)?.$el.blur();
+    }
+};
+
+onMounted(() => window.addEventListener('keydown', activateSearch));
+onUnmounted(() => window.removeEventListener('keydown', activateSearch));
 </script>
 
 <template>
@@ -57,7 +77,11 @@ import { ThemeSwitcher } from '@/features/theme-switcher';
 
                 <div class="flex sm:items-center sm:ml-6">
                     <div class="flex items-center justify-between">
-                        <SearchInput class="mr-3" />
+                        <SearchButton
+                            ref="buttonRef"
+                            class="mr-3"
+                            @click="toggleSearchModalVisibility"
+                        />
 
                         <ThemeSwitcher />
                     </div>
@@ -107,6 +131,8 @@ import { ThemeSwitcher } from '@/features/theme-switcher';
             </div>
         </div>
     </nav>
+
+    <SearchModal :visible="showSearchModal" @closed="toggleSearchModalVisibility" />
 </template>
 
 <style scoped></style>