diff --git a/resources/js/components/app-content.tsx b/resources/js/components/app-content.tsx
index ae43d9e6b..ea1c49784 100644
--- a/resources/js/components/app-content.tsx
+++ b/resources/js/components/app-content.tsx
@@ -1,11 +1,11 @@
 import { SidebarInset } from '@/components/ui/sidebar';
 import * as React from 'react';
 
-interface AppContentProps extends React.ComponentProps<'div'> {
+interface IAppContentProps extends React.ComponentProps<'div'> {
     variant?: 'header' | 'sidebar';
 }
 
-export function AppContent({ variant = 'header', children, ...props }: AppContentProps) {
+export function AppContent({ variant = 'header', children, ...props }: IAppContentProps) {
     if (variant === 'sidebar') {
         return <SidebarInset {...props}>{children}</SidebarInset>;
     }
diff --git a/resources/js/components/app-header.tsx b/resources/js/components/app-header.tsx
index d151697c4..afa306ded 100644
--- a/resources/js/components/app-header.tsx
+++ b/resources/js/components/app-header.tsx
@@ -9,13 +9,13 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { UserMenuContent } from '@/components/user-menu-content';
 import { useInitials } from '@/hooks/use-initials';
 import { cn } from '@/lib/utils';
-import { type BreadcrumbItem, type NavItem, type SharedData } from '@/types';
+import { type IBreadcrumbItem, type INavItem, type ISharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-react';
 import AppLogo from './app-logo';
 import AppLogoIcon from './app-logo-icon';
 
-const mainNavItems: NavItem[] = [
+const mainNavItems: INavItem[] = [
     {
         title: 'Dashboard',
         url: '/dashboard',
@@ -23,7 +23,7 @@ const mainNavItems: NavItem[] = [
     },
 ];
 
-const rightNavItems: NavItem[] = [
+const rightNavItems: INavItem[] = [
     {
         title: 'Repository',
         url: 'https://github.com/laravel/react-starter-kit',
@@ -38,12 +38,12 @@ const rightNavItems: NavItem[] = [
 
 const activeItemStyles = 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
 
-interface AppHeaderProps {
-    breadcrumbs?: BreadcrumbItem[];
+interface IAppHeaderProps {
+    breadcrumbs?: IBreadcrumbItem[];
 }
 
-export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
-    const page = usePage<SharedData>();
+export function AppHeader({ breadcrumbs = [] }: IAppHeaderProps) {
+    const page = usePage<ISharedData>();
     const { auth } = page.props;
     const getInitials = useInitials();
     return (
diff --git a/resources/js/components/app-shell.tsx b/resources/js/components/app-shell.tsx
index 1e576119d..264713615 100644
--- a/resources/js/components/app-shell.tsx
+++ b/resources/js/components/app-shell.tsx
@@ -1,12 +1,12 @@
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { useState } from 'react';
 
-interface AppShellProps {
+interface IAppShellProps {
     children: React.ReactNode;
     variant?: 'header' | 'sidebar';
 }
 
-export function AppShell({ children, variant = 'header' }: AppShellProps) {
+export function AppShell({ children, variant = 'header' }: IAppShellProps) {
     const [isOpen, setIsOpen] = useState(() => (typeof window !== 'undefined' ? localStorage.getItem('sidebar') !== 'false' : true));
 
     const handleSidebarChange = (open: boolean) => {
diff --git a/resources/js/components/app-sidebar-header.tsx b/resources/js/components/app-sidebar-header.tsx
index e31381e0d..97a96a5e2 100644
--- a/resources/js/components/app-sidebar-header.tsx
+++ b/resources/js/components/app-sidebar-header.tsx
@@ -1,8 +1,12 @@
 import { Breadcrumbs } from '@/components/breadcrumbs';
 import { SidebarTrigger } from '@/components/ui/sidebar';
-import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 
-export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
+interface IAppSidebarHeaderProps {
+    breadcrumbs?: IBreadcrumbItem[];
+}
+
+export function AppSidebarHeader({ breadcrumbs = [] }: IAppSidebarHeaderProps) {
     return (
         <header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
             <div className="flex items-center gap-2">
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index cd00fbdcc..fd662bb5f 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -2,12 +2,12 @@ import { NavFooter } from '@/components/nav-footer';
 import { NavMain } from '@/components/nav-main';
 import { NavUser } from '@/components/nav-user';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
+import { type INavItem } from '@/types';
 import { Link } from '@inertiajs/react';
 import { BookOpen, Folder, LayoutGrid } from 'lucide-react';
 import AppLogo from './app-logo';
 
-const mainNavItems: NavItem[] = [
+const mainNavItems: INavItem[] = [
     {
         title: 'Dashboard',
         url: '/dashboard',
@@ -15,7 +15,7 @@ const mainNavItems: NavItem[] = [
     },
 ];
 
-const footerNavItems: NavItem[] = [
+const footerNavItems: INavItem[] = [
     {
         title: 'Repository',
         url: 'https://github.com/laravel/react-starter-kit',
diff --git a/resources/js/components/breadcrumbs.tsx b/resources/js/components/breadcrumbs.tsx
index d92b4c165..e237b7549 100644
--- a/resources/js/components/breadcrumbs.tsx
+++ b/resources/js/components/breadcrumbs.tsx
@@ -1,8 +1,12 @@
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
-import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { type IBreadcrumbItem  } from '@/types';
 import { Fragment } from 'react';
 
-export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: BreadcrumbItemType[] }) {
+interface IBreadcrumbsProps {
+    breadcrumbs: IBreadcrumbItem[];
+}
+
+export function Breadcrumbs({ breadcrumbs }: IBreadcrumbsProps) {
     return (
         <>
             {breadcrumbs.length > 0 && (
diff --git a/resources/js/components/heading-small.tsx b/resources/js/components/heading-small.tsx
index b71a16eb3..4d21ba23b 100644
--- a/resources/js/components/heading-small.tsx
+++ b/resources/js/components/heading-small.tsx
@@ -1,4 +1,9 @@
-export default function HeadingSmall({ title, description }: { title: string; description?: string }) {
+interface IHeadingSmallProps {
+    title: string;
+    description?: string;
+}
+
+export default function HeadingSmall({ title, description }: IHeadingSmallProps) {
     return (
         <header>
             <h3 className="mb-0.5 text-base font-medium">{title}</h3>
diff --git a/resources/js/components/heading.tsx b/resources/js/components/heading.tsx
index 40b398250..ede942ece 100644
--- a/resources/js/components/heading.tsx
+++ b/resources/js/components/heading.tsx
@@ -1,4 +1,9 @@
-export default function Heading({ title, description }: { title: string; description?: string }) {
+interface IHeadingProps {
+    title: string;
+    description?: string;
+}
+
+export default function Heading({ title, description }: IHeadingProps) {
     return (
         <>
             <div className="mb-8 space-y-0.5">
diff --git a/resources/js/components/icon.tsx b/resources/js/components/icon.tsx
index fe958b46e..078d6fb6a 100644
--- a/resources/js/components/icon.tsx
+++ b/resources/js/components/icon.tsx
@@ -1,10 +1,10 @@
 import { cn } from '@/lib/utils';
 import { type LucideProps } from 'lucide-react';
 
-interface IconProps extends Omit<LucideProps, 'ref'> {
+interface IIconProps extends Omit<LucideProps, 'ref'> {
     iconNode: React.ComponentType<LucideProps>;
 }
 
-export function Icon({ iconNode: IconComponent, className, ...props }: IconProps) {
+export function Icon({ iconNode: IconComponent, className, ...props }: IIconProps) {
     return <IconComponent className={cn('h-4 w-4', className)} {...props} />;
 }
diff --git a/resources/js/components/input-error.tsx b/resources/js/components/input-error.tsx
index be62fef9e..110334591 100644
--- a/resources/js/components/input-error.tsx
+++ b/resources/js/components/input-error.tsx
@@ -1,7 +1,11 @@
 import { cn } from '@/lib/utils';
 import { HTMLAttributes } from 'react';
 
-export default function InputError({ message, className = '', ...props }: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {
+interface IInputErrorProps extends HTMLAttributes<HTMLParagraphElement> {
+    message?: string;
+}
+
+export default function InputError({ message, className = '', ...props }: IInputErrorProps) {
     return message ? (
         <p {...props} className={cn('text-sm text-red-600 dark:text-red-400', className)}>
             {message}
diff --git a/resources/js/components/nav-footer.tsx b/resources/js/components/nav-footer.tsx
index e27a2ba1b..f5af7a2e7 100644
--- a/resources/js/components/nav-footer.tsx
+++ b/resources/js/components/nav-footer.tsx
@@ -1,16 +1,19 @@
 import { Icon } from '@/components/icon';
 import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
+import { type INavItem } from '@/types';
+import { cn } from '../lib/utils';
+
+interface INavFooter extends React.ComponentPropsWithoutRef<typeof SidebarGroup>  {
+    items: INavItem[];
+}
 
 export function NavFooter({
     items,
     className,
     ...props
-}: React.ComponentPropsWithoutRef<typeof SidebarGroup> & {
-    items: NavItem[];
-}) {
+}: INavFooter) {
     return (
-        <SidebarGroup {...props} className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}>
+        <SidebarGroup {...props} className={cn(`group-data-[collapsible=icon]:p-0`, className)}>
             <SidebarGroupContent>
                 <SidebarMenu>
                     {items.map((item) => (
diff --git a/resources/js/components/nav-main.tsx b/resources/js/components/nav-main.tsx
index 08a1ed5f8..eb6bfc32a 100644
--- a/resources/js/components/nav-main.tsx
+++ b/resources/js/components/nav-main.tsx
@@ -1,8 +1,12 @@
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem } from '@/types';
+import { type INavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 
-export function NavMain({ items = [] }: { items: NavItem[] }) {
+interface INavMainProps {
+    items: INavItem[];
+}
+
+export function NavMain({ items = [] }: INavMainProps) {
     const page = usePage();
     return (
         <SidebarGroup className="px-2 py-0">
diff --git a/resources/js/components/nav-user.tsx b/resources/js/components/nav-user.tsx
index 12102500b..25b6e69d6 100644
--- a/resources/js/components/nav-user.tsx
+++ b/resources/js/components/nav-user.tsx
@@ -3,12 +3,12 @@ import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/c
 import { UserInfo } from '@/components/user-info';
 import { UserMenuContent } from '@/components/user-menu-content';
 import { useIsMobile } from '@/hooks/use-mobile';
-import { type SharedData } from '@/types';
+import { type ISharedData } from '@/types';
 import { usePage } from '@inertiajs/react';
 import { ChevronsUpDown } from 'lucide-react';
 
 export function NavUser() {
-    const { auth } = usePage<SharedData>().props;
+    const { auth } = usePage<ISharedData>().props;
     const { state } = useSidebar();
     const isMobile = useIsMobile();
 
diff --git a/resources/js/components/ui/placeholder-pattern.tsx b/resources/js/components/ui/placeholder-pattern.tsx
index b4c4fb803..b6e0d024d 100644
--- a/resources/js/components/ui/placeholder-pattern.tsx
+++ b/resources/js/components/ui/placeholder-pattern.tsx
@@ -11,7 +11,7 @@ export function PlaceholderPattern({ className }: PlaceholderPatternProps) {
         <svg className={className} fill="none">
             <defs>
                 <pattern id={patternId} x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
-                    <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
+                    <path d="M-1 5L5 -1M3 9L8.5 3.5" strokeWidth={0.5}></path>
                 </pattern>
             </defs>
             <rect stroke="none" fill={`url(#${patternId})`} width="100%" height="100%"></rect>
diff --git a/resources/js/components/user-info.tsx b/resources/js/components/user-info.tsx
index 4626dc5fb..7e654d86d 100644
--- a/resources/js/components/user-info.tsx
+++ b/resources/js/components/user-info.tsx
@@ -1,8 +1,13 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useInitials } from '@/hooks/use-initials';
-import { type User } from '@/types';
+import { type IUser } from '@/types';
 
-export function UserInfo({ user, showEmail = false }: { user: User; showEmail?: boolean }) {
+interface IUserInfoProps {
+    user: IUser;
+    showEmail?: boolean;
+}
+
+export function UserInfo({ user, showEmail = false }: IUserInfoProps) {
     const getInitials = useInitials();
 
     return (
diff --git a/resources/js/components/user-menu-content.tsx b/resources/js/components/user-menu-content.tsx
index a3d294784..313d0951e 100644
--- a/resources/js/components/user-menu-content.tsx
+++ b/resources/js/components/user-menu-content.tsx
@@ -1,15 +1,15 @@
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
 import { UserInfo } from '@/components/user-info';
 import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
-import { type User } from '@/types';
+import { type IUser } from '@/types';
 import { Link } from '@inertiajs/react';
 import { LogOut, Settings } from 'lucide-react';
 
-interface UserMenuContentProps {
-    user: User;
+interface IUserMenuContentProps {
+    user: IUser;
 }
 
-export function UserMenuContent({ user }: UserMenuContentProps) {
+export function UserMenuContent({ user }: IUserMenuContentProps) {
     const cleanup = useMobileNavigation();
 
     return (
diff --git a/resources/js/layouts/app-layout.tsx b/resources/js/layouts/app-layout.tsx
index 29b27ae2c..b954f675b 100644
--- a/resources/js/layouts/app-layout.tsx
+++ b/resources/js/layouts/app-layout.tsx
@@ -1,12 +1,12 @@
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
-import { type BreadcrumbItem } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 
-interface AppLayoutProps {
+interface IAppLayoutProps {
     children: React.ReactNode;
-    breadcrumbs?: BreadcrumbItem[];
+    breadcrumbs?: IBreadcrumbItem[];
 }
 
-export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
+export default ({ children, breadcrumbs, ...props }: IAppLayoutProps) => (
     <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
         {children}
     </AppLayoutTemplate>
diff --git a/resources/js/layouts/app/app-header-layout.tsx b/resources/js/layouts/app/app-header-layout.tsx
index d3616aff2..cc520f0e3 100644
--- a/resources/js/layouts/app/app-header-layout.tsx
+++ b/resources/js/layouts/app/app-header-layout.tsx
@@ -1,14 +1,14 @@
 import { AppContent } from '@/components/app-content';
 import { AppHeader } from '@/components/app-header';
 import { AppShell } from '@/components/app-shell';
-import { type BreadcrumbItem } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 
-interface AppHeaderLayoutProps {
+interface IAppHeaderLayoutProps {
     children: React.ReactNode;
-    breadcrumbs?: BreadcrumbItem[];
+    breadcrumbs?: IBreadcrumbItem[];
 }
 
-export default function AppHeaderLayout({ children, breadcrumbs }: AppHeaderLayoutProps) {
+export default function AppHeaderLayout({ children, breadcrumbs }: IAppHeaderLayoutProps) {
     return (
         <AppShell>
             <AppHeader breadcrumbs={breadcrumbs} />
diff --git a/resources/js/layouts/app/app-sidebar-layout.tsx b/resources/js/layouts/app/app-sidebar-layout.tsx
index 2ef677700..43a7784b1 100644
--- a/resources/js/layouts/app/app-sidebar-layout.tsx
+++ b/resources/js/layouts/app/app-sidebar-layout.tsx
@@ -2,9 +2,14 @@ import { AppContent } from '@/components/app-content';
 import { AppShell } from '@/components/app-shell';
 import { AppSidebar } from '@/components/app-sidebar';
 import { AppSidebarHeader } from '@/components/app-sidebar-header';
-import { type BreadcrumbItem } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 
-export default function AppSidebarLayout({ children, breadcrumbs = [] }: { children: React.ReactNode; breadcrumbs?: BreadcrumbItem[] }) {
+interface IAppSidebarLayoutProps {
+    children: React.ReactNode;
+    breadcrumbs?: IBreadcrumbItem[];
+}
+
+export default function AppSidebarLayout({ children, breadcrumbs = [] }: IAppSidebarLayoutProps) {
     return (
         <AppShell variant="sidebar">
             <AppSidebar />
diff --git a/resources/js/layouts/auth-layout.tsx b/resources/js/layouts/auth-layout.tsx
index da141cc2b..ad9d5b47c 100644
--- a/resources/js/layouts/auth-layout.tsx
+++ b/resources/js/layouts/auth-layout.tsx
@@ -1,6 +1,12 @@
 import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
 
-export default function AuthLayout({ children, title, description, ...props }: { children: React.ReactNode; title: string; description: string }) {
+interface IAuthLayoutProps {
+    children: React.ReactNode;
+    title: string;
+    description: string;
+}
+
+export default function AuthLayout({ children, title, description, ...props }: IAuthLayoutProps) {
     return (
         <AuthLayoutTemplate title={title} description={description} {...props}>
             {children}
diff --git a/resources/js/layouts/auth/auth-card-layout.tsx b/resources/js/layouts/auth/auth-card-layout.tsx
index 83da435c7..79001bfb3 100644
--- a/resources/js/layouts/auth/auth-card-layout.tsx
+++ b/resources/js/layouts/auth/auth-card-layout.tsx
@@ -2,16 +2,14 @@ import AppLogoIcon from '@/components/app-logo-icon';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Link } from '@inertiajs/react';
 
-export default function AuthCardLayout({
-    children,
-    title,
-    description,
-}: {
+interface IAuthCardLayoutProps {
     children: React.ReactNode;
     name?: string;
     title?: string;
     description?: string;
-}) {
+}
+
+export default function AuthCardLayout({ children, title, description }: IAuthCardLayoutProps) {
     return (
         <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div className="flex w-full max-w-md flex-col gap-6">
diff --git a/resources/js/layouts/auth/auth-simple-layout.tsx b/resources/js/layouts/auth/auth-simple-layout.tsx
index 015e333c1..0100915ff 100644
--- a/resources/js/layouts/auth/auth-simple-layout.tsx
+++ b/resources/js/layouts/auth/auth-simple-layout.tsx
@@ -1,14 +1,14 @@
 import AppLogoIcon from '@/components/app-logo-icon';
 import { Link } from '@inertiajs/react';
 
-interface AuthLayoutProps {
+interface IAuthLayoutProps {
     children: React.ReactNode;
     name?: string;
     title?: string;
     description?: string;
 }
 
-export default function AuthSimpleLayout({ children, title, description }: AuthLayoutProps) {
+export default function AuthSimpleLayout({ children, title, description }: IAuthLayoutProps) {
     return (
         <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div className="w-full max-w-sm">
diff --git a/resources/js/layouts/auth/auth-split-layout.tsx b/resources/js/layouts/auth/auth-split-layout.tsx
index 2544f4ffc..9c0bb828e 100644
--- a/resources/js/layouts/auth/auth-split-layout.tsx
+++ b/resources/js/layouts/auth/auth-split-layout.tsx
@@ -1,5 +1,5 @@
 import AppLogoIcon from '@/components/app-logo-icon';
-import { type SharedData } from '@/types';
+import { type ISharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 
 interface AuthLayoutProps {
@@ -9,7 +9,7 @@ interface AuthLayoutProps {
 }
 
 export default function AuthSplitLayout({ children, title, description }: AuthLayoutProps) {
-    const { name, quote } = usePage<SharedData>().props;
+    const { name, quote } = usePage<ISharedData>().props;
 
     return (
         <div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
index 2a50de967..39b37ad97 100644
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@@ -2,10 +2,14 @@ import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
-import { type NavItem } from '@/types';
+import { type INavItem } from '@/types';
 import { Link } from '@inertiajs/react';
 
-const sidebarNavItems: NavItem[] = [
+interface ISettingsLayoutProps {
+    children: React.ReactNode;
+}
+
+const sidebarNavItems: INavItem[] = [
     {
         title: 'Profile',
         url: '/settings/profile',
@@ -23,7 +27,7 @@ const sidebarNavItems: NavItem[] = [
     },
 ];
 
-export default function SettingsLayout({ children }: { children: React.ReactNode }) {
+export default function SettingsLayout({ children }: ISettingsLayoutProps) {
     const currentPath = window.location.pathname;
 
     return (
diff --git a/resources/js/pages/auth/forgot-password.tsx b/resources/js/pages/auth/forgot-password.tsx
index 82e171691..16c0bdbdc 100644
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@@ -10,7 +10,11 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-export default function ForgotPassword({ status }: { status?: string }) {
+interface IForgotPasswordProps {
+    status?: string;
+}
+
+export default function ForgotPassword({ status }: IForgotPasswordProps) {
     const { data, setData, post, processing, errors } = useForm({
         email: '',
     });
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index 0c329cd7b..ea30f3d2b 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -10,18 +10,18 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface LoginForm {
+type LoginForm = {
     email: string;
     password: string;
     remember: boolean;
 }
 
-interface LoginProps {
+interface ILoginProps {
     status?: string;
     canResetPassword: boolean;
 }
 
-export default function Login({ status, canResetPassword }: LoginProps) {
+export default function Login({ status, canResetPassword }: ILoginProps) {
     const { data, setData, post, processing, errors, reset } = useForm<LoginForm>({
         email: '',
         password: '',
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
index 39fd41178..a69400c13 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -9,7 +9,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface RegisterForm {
+type RegisterForm = {
     name: string;
     email: string;
     password: string;
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
index 220d2ff9f..54b8c7a91 100644
--- a/resources/js/pages/auth/reset-password.tsx
+++ b/resources/js/pages/auth/reset-password.tsx
@@ -8,19 +8,18 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/auth-layout';
 
-interface ResetPasswordProps {
+type ResetPasswordForm = {
     token: string;
     email: string;
+    password: string;
+    password_confirmation: string;
 }
-
-interface ResetPasswordForm {
+interface IResetPasswordProps {
     token: string;
     email: string;
-    password: string;
-    password_confirmation: string;
 }
 
-export default function ResetPassword({ token, email }: ResetPasswordProps) {
+export default function ResetPassword({ token, email }: IResetPasswordProps) {
     const { data, setData, post, processing, errors, reset } = useForm<ResetPasswordForm>({
         token: token,
         email: email,
diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx
index b4f7846b7..ff2bb40a9 100644
--- a/resources/js/pages/auth/verify-email.tsx
+++ b/resources/js/pages/auth/verify-email.tsx
@@ -7,7 +7,11 @@ import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
 import AuthLayout from '@/layouts/auth-layout';
 
-export default function VerifyEmail({ status }: { status?: string }) {
+interface IVerifyEmailProps {
+    status?: string;
+}
+
+export default function VerifyEmail({ status }: IVerifyEmailProps) {
     const { post, processing } = useForm({});
 
     const submit: FormEventHandler = (e) => {
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index 53baa94e8..0f2c5b825 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -1,9 +1,9 @@
 import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
 import AppLayout from '@/layouts/app-layout';
-import { type BreadcrumbItem } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/react';
 
-const breadcrumbs: BreadcrumbItem[] = [
+const breadcrumbs: IBreadcrumbItem[] = [
     {
         title: 'Dashboard',
         href: '/dashboard',
diff --git a/resources/js/pages/settings/appearance.tsx b/resources/js/pages/settings/appearance.tsx
index 5099b2524..7f4b9eeaa 100644
--- a/resources/js/pages/settings/appearance.tsx
+++ b/resources/js/pages/settings/appearance.tsx
@@ -2,12 +2,12 @@ import { Head } from '@inertiajs/react';
 
 import AppearanceTabs from '@/components/appearance-tabs';
 import HeadingSmall from '@/components/heading-small';
-import { type BreadcrumbItem } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 
-const breadcrumbs: BreadcrumbItem[] = [
+const breadcrumbs: IBreadcrumbItem[] = [
     {
         title: 'Appearance settings',
         href: '/settings/appearance',
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings/password.tsx
index 04b710d14..1a359e59c 100644
--- a/resources/js/pages/settings/password.tsx
+++ b/resources/js/pages/settings/password.tsx
@@ -1,7 +1,7 @@
 import InputError from '@/components/input-error';
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
-import { type BreadcrumbItem } from '@/types';
+import { type IBreadcrumbItem } from '@/types';
 import { Transition } from '@headlessui/react';
 import { Head, useForm } from '@inertiajs/react';
 import { FormEventHandler, useRef } from 'react';
@@ -11,7 +11,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-const breadcrumbs: BreadcrumbItem[] = [
+const breadcrumbs: IBreadcrumbItem[] = [
     {
         title: 'Password settings',
         href: '/settings/password',
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
index 83e3b1bc2..9eddbe26c 100644
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@@ -1,4 +1,4 @@
-import { type BreadcrumbItem, type SharedData } from '@/types';
+import { type IBreadcrumbItem, type ISharedData } from '@/types';
 import { Transition } from '@headlessui/react';
 import { Head, Link, useForm, usePage } from '@inertiajs/react';
 import { FormEventHandler } from 'react';
@@ -12,15 +12,20 @@ import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 
-const breadcrumbs: BreadcrumbItem[] = [
+interface IProfileProps {
+    mustVerifyEmail: boolean;
+    status?: string;
+}
+
+const breadcrumbs: IBreadcrumbItem[] = [
     {
         title: 'Profile settings',
         href: '/settings/profile',
     },
 ];
 
-export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
-    const { auth } = usePage<SharedData>().props;
+export default function Profile({ mustVerifyEmail, status }: IProfileProps) {
+    const { auth } = usePage<ISharedData>().props;
 
     const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({
         name: auth.user.name,
diff --git a/resources/js/pages/welcome.tsx b/resources/js/pages/welcome.tsx
index 35bebdaae..d8cd64eae 100644
--- a/resources/js/pages/welcome.tsx
+++ b/resources/js/pages/welcome.tsx
@@ -1,8 +1,8 @@
-import { type SharedData } from '@/types';
+import { type ISharedData } from '@/types';
 import { Head, Link, usePage } from '@inertiajs/react';
 
 export default function Welcome() {
-    const { auth } = usePage<SharedData>().props;
+    const { auth } = usePage<ISharedData>().props;
 
     return (
         <>
diff --git a/resources/js/types/index.ts b/resources/js/types/index.ts
index 9929c24d1..6e1c1bdda 100644
--- a/resources/js/types/index.ts
+++ b/resources/js/types/index.ts
@@ -1,34 +1,34 @@
 import { LucideIcon } from 'lucide-react';
 
-export interface Auth {
-    user: User;
+export interface IAuth {
+    user: IUser;
 }
 
-export interface BreadcrumbItem {
+export interface IBreadcrumbItem {
     title: string;
     href: string;
 }
 
-export interface NavGroup {
+export interface INavGroup {
     title: string;
-    items: NavItem[];
+    items: INavItem[];
 }
 
-export interface NavItem {
+export interface INavItem {
     title: string;
     url: string;
     icon?: LucideIcon | null;
     isActive?: boolean;
 }
 
-export interface SharedData {
+export interface ISharedData {
     name: string;
     quote: { message: string; author: string };
-    auth: Auth;
+    auth: IAuth;
     [key: string]: unknown;
 }
 
-export interface User {
+export interface IUser {
     id: number;
     name: string;
     email: string;