diff --git a/src/components/Authors/Authors.tsx b/src/components/Authors/Authors.tsx
index 85bc251..286eb7d 100644
--- a/src/components/Authors/Authors.tsx
+++ b/src/components/Authors/Authors.tsx
@@ -8,11 +8,11 @@ export enum AuthorsDirection {
   ROW = 'row',
 }
 
-export type AuthorsProps = React.ComponentProps<typeof AuthorsContainer> & {
+export type AuthorsProps = Partial<
+  React.ComponentProps<typeof AuthorsContainer>
+> & {
   authors: LPE.Author.Document[]
   email: boolean
-  gap?: number
-  flexDirection?: AuthorsDirection
 }
 
 const Authors: React.FC<AuthorsProps> = ({
@@ -39,8 +39,8 @@ const Authors: React.FC<AuthorsProps> = ({
 }
 
 const AuthorsContainer = styled.div<{
-  gap: number
-  flexDirection: AuthorsDirection
+  gap?: number
+  flexDirection?: AuthorsDirection
 }>`
   display: flex;
   flex-direction: ${({ flexDirection }) => flexDirection};
diff --git a/src/layouts/ArticleLayout/Article.layout.tsx b/src/layouts/ArticleLayout/Article.layout.tsx
index c4dff93..6f3a69e 100644
--- a/src/layouts/ArticleLayout/Article.layout.tsx
+++ b/src/layouts/ArticleLayout/Article.layout.tsx
@@ -1,27 +1,17 @@
-import { AppBar } from '../../components/NavBar'
 import { Footer } from '@/components/Footer'
 import { Main } from '@/components/Main'
-import { useArticleContext } from '@/context/article.context'
 import { PropsWithChildren } from 'react'
-import { useThemeState } from '../../states/themeState'
+import { AppBar } from '../../components/NavBar'
 import styles from './Article.layout.module.css'
 
 type Props = PropsWithChildren<{
   // onSearch: (query: string, filters: string[]) => void
 }>
 export default function ArticleLayout({ children }: Props) {
-  const themeState = useThemeState()
-  const { onSearch, onReset } = useArticleContext()
-
   return (
     <>
       <header className={styles.header}>
-        <AppBar
-          isDark={themeState.mode.get() === 'dark'}
-          toggle={themeState.toggleMode}
-          onSearch={onSearch}
-          onReset={onReset}
-        />
+        <AppBar />
       </header>
       <Main>{children}</Main>
       <Footer />
diff --git a/src/layouts/EpisodeLayout/Episode.layout.tsx b/src/layouts/EpisodeLayout/Episode.layout.tsx
index 49bfeb9..2e9eda1 100644
--- a/src/layouts/EpisodeLayout/Episode.layout.tsx
+++ b/src/layouts/EpisodeLayout/Episode.layout.tsx
@@ -1,27 +1,20 @@
-import { AppBar } from '../../components/NavBar'
 import { Footer } from '@/components/Footer'
 import { Main } from '@/components/Main'
 import { useEpisodeContext } from '@/context/episode.context'
 import { PropsWithChildren } from 'react'
-import { useThemeState } from '../../states/themeState'
+import { AppBar } from '../../components/NavBar'
 import styles from './Episode.layout.module.css'
 
 type Props = PropsWithChildren<{
   // onSearch: (query: string, filters: string[]) => void
 }>
 export default function EpisodeLayout({ children }: Props) {
-  const themeState = useThemeState()
   const { onSearch, onReset } = useEpisodeContext()
 
   return (
     <>
       <header className={styles.header}>
-        <AppBar
-          isDark={themeState.mode.get() === 'dark'}
-          toggle={themeState.toggleMode}
-          onSearch={onSearch}
-          onReset={onReset}
-        />
+        <AppBar />
       </header>
       <Main>{children}</Main>
       <Footer />
diff --git a/src/layouts/PodcastsLayout/Podcasts.layout.tsx b/src/layouts/PodcastsLayout/Podcasts.layout.tsx
index 248c621..48d4487 100644
--- a/src/layouts/PodcastsLayout/Podcasts.layout.tsx
+++ b/src/layouts/PodcastsLayout/Podcasts.layout.tsx
@@ -1,22 +1,16 @@
-import { AppBar } from '../../components/NavBar'
 import { Footer } from '@/components/Footer'
 import { Main } from '@/components/Main'
 import { PropsWithChildren } from 'react'
-import { useThemeState } from '../../states/themeState'
+import { AppBar } from '../../components/NavBar'
 import styles from './Podcasts.layout.module.css'
 
 type Props = PropsWithChildren
 
 export default function PodcastsLayout({ children }: Props) {
-  const themeState = useThemeState()
-
   return (
     <>
       <header className={styles.header}>
-        <AppBar
-          isDark={themeState.mode.get() === 'dark'}
-          toggle={themeState.toggleMode}
-        />
+        <AppBar />
       </header>
       <Main>{children}</Main>
       <Footer />
diff --git a/src/layouts/SearchLayout/Search.layout.tsx b/src/layouts/SearchLayout/Search.layout.tsx
index fc20c56..a2567df 100644
--- a/src/layouts/SearchLayout/Search.layout.tsx
+++ b/src/layouts/SearchLayout/Search.layout.tsx
@@ -1,22 +1,16 @@
-import { AppBar } from '../../components/NavBar'
 import { Footer } from '@/components/Footer'
 import { Main } from '@/components/Main'
 import { uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import { PropsWithChildren } from 'react'
-import { useThemeState } from '../../states/themeState'
+import { AppBar } from '../../components/NavBar'
 import styles from './Search.layout.module.css'
 
 export default function SearchLayout(props: PropsWithChildren<any>) {
-  const themeState = useThemeState()
-
   return (
     <>
       <header className={styles.header}>
-        <AppBar
-          isDark={themeState.mode.get() === 'dark'}
-          toggle={themeState.toggleMode}
-        />
+        <AppBar />
       </header>
       <MainContainer className={'search_page'}>{props.children}</MainContainer>
       <Footer />