diff --git a/types/custom.d.ts b/custom.d.ts
similarity index 53%
rename from types/custom.d.ts
rename to custom.d.ts
index 9b9471d..d2d16d8 100644
--- a/types/custom.d.ts
+++ b/custom.d.ts
@@ -2,3 +2,8 @@ declare module '*.svg' {
   const content: any
   export default content
 }
+
+declare module '*.png' {
+  const value: any
+  export = value
+}
diff --git a/src/components/DisplayMovieRow.tsx b/src/components/DisplayMovieRow.tsx
index f2e34aa..322e5df 100644
--- a/src/components/DisplayMovieRow.tsx
+++ b/src/components/DisplayMovieRow.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
 
diff --git a/src/components/DropdownContent.js b/src/components/DropdownContent.tsx
similarity index 100%
rename from src/components/DropdownContent.js
rename to src/components/DropdownContent.tsx
diff --git a/src/components/Footer.js b/src/components/Footer.tsx
similarity index 100%
rename from src/components/Footer.js
rename to src/components/Footer.tsx
diff --git a/src/components/Header.js b/src/components/Header.tsx
similarity index 93%
rename from src/components/Header.js
rename to src/components/Header.tsx
index d852ba8..c8d8fa0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.tsx
@@ -6,7 +6,12 @@ import MuteIcon from '../static/images/mute.svg'
 import UnmuteIcon from '../static/images/unmute.svg'
 import ReactPlayer from 'react-player'
 
-const Header = ({ movie: { name, overview } }) => {
+interface IHeader {
+  name: string
+  overview: string
+}
+
+const Header = ({ name, overview }: IHeader) => {
   const [isMuted, setIsMuted] = useState(true)
 
   return (
@@ -33,7 +38,6 @@ const Header = ({ movie: { name, overview } }) => {
         <AddLogo className='header__container-btnMyList-add' />
         My List
       </button>
-
       {isMuted ? (
         <MuteIcon
           onClick={() => setIsMuted(false)}
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
index 5fc76c4..8c697a7 100644
--- a/src/components/MainContent.tsx
+++ b/src/components/MainContent.tsx
@@ -3,6 +3,11 @@ import * as actionMoviesSlice from '../store/slices/actionMovieSlice'
 import * as movieDetailsSlice from '../store/slices/movieDetailsSlice'
 import * as netflixOriginalsSlice from '../store/slices/netflixOriginalsSlice'
 import * as trendingSlice from '../store/slices/trendingSlice'
+import * as topRatedSlice from '../store/slices/topRatedSlice'
+import * as comedySlice from '../store/slices/comedyMoviesSlice'
+import * as documentarySlice from '../store/slices/documentarySlice'
+import * as horrorMoviesSlice from '../store/slices/horrorMoviesSlice'
+import * as romanceMoviesSlice from '../store/slices/romanceMoviesSlice'
 import { useAppSelector, useAppDispatch } from '../store'
 
 import Header from './Header'
@@ -12,17 +17,16 @@ const MainContent = ({ selectMovieHandler }: { selectMovieHandler: any }) => {
   const { movieDetails } = useAppSelector((state) => state.movieDetails)
   const netflixOriginals = useAppSelector((state) => state.netflixOriginals)
   const trending = useAppSelector((state) => state.trending)
-  // const topRated = useSelector((state) => state.topRated)
+  const topRated = useAppSelector((state) => state.topRated)
   const actionMoviesState = useAppSelector((state) => state.action)
-  // const comedyMovies = useSelector((state) => state.comedy)
-  // const horrorMovies = useSelector((state) => state.horror)
-  // const romanceMovies = useSelector((state) => state.romance)
-  // const documentaries = useSelector((state) => state.documentary)
+  const comedyMovies = useAppSelector((state) => state.comedy)
+  const horrorMovies = useAppSelector((state) => state.horror)
+  const romanceMovies = useAppSelector((state) => state.romance)
+  const documentaries = useAppSelector((state) => state.documentary)
 
   const dispatch = useAppDispatch()
 
   useEffect(() => {
-    // dispatch(movieDetailsSlice.getMovieDetailsAsync('tv', '63351'))
     dispatch(
       movieDetailsSlice.getMovieDetailsAsync({
         mediaType: 'tv',
@@ -31,17 +35,17 @@ const MainContent = ({ selectMovieHandler }: { selectMovieHandler: any }) => {
     )
     dispatch(netflixOriginalsSlice.getNetflixOriginalsAsync())
     dispatch(trendingSlice.getTrendingAsync())
-    // dispatch(movieActions.fetchTopRated())
+    dispatch(topRatedSlice.getTopRatedAsync())
     dispatch(actionMoviesSlice.getActionMoviesAsync())
-    // dispatch(movieActions.fetchComedyMovies())
-    // dispatch(movieActions.fetchHorrorMovies())
-    // dispatch(movieActions.fetchRomanceMovies())
-    // dispatch(movieActions.fetchDocumentaries())
+    dispatch(comedySlice.getComedyMoviesAsync())
+    dispatch(horrorMoviesSlice.getHorrorMoviesAsync())
+    dispatch(romanceMoviesSlice.getRomanceMoviesAsync())
+    dispatch(documentarySlice.getDocumentariesAsync())
   }, [dispatch])
 
   return (
     <div className='container'>
-      <Header movie={movieDetails} />
+      <Header name={movieDetails.name} overview={movieDetails.overview} />
       <div className='movieShowcase'>
         <DisplayMovieRow
           isNetflixMovies={true}
@@ -54,17 +58,17 @@ const MainContent = ({ selectMovieHandler }: { selectMovieHandler: any }) => {
           selectMovieHandler={selectMovieHandler}
           movies={trending.data}
         />
-        {/* <DisplayMovieRow
+        <DisplayMovieRow
           title='Top Rated'
           selectMovieHandler={selectMovieHandler}
           movies={topRated.data}
-        /> */}
+        />
         <DisplayMovieRow
           title='Action Movies'
           selectMovieHandler={selectMovieHandler}
           movies={actionMoviesState.data}
         />
-        {/* <DisplayMovieRow
+        <DisplayMovieRow
           title='Comedy'
           selectMovieHandler={selectMovieHandler}
           movies={comedyMovies.data}
@@ -83,7 +87,7 @@ const MainContent = ({ selectMovieHandler }: { selectMovieHandler: any }) => {
           title='Documentaries'
           selectMovieHandler={selectMovieHandler}
           movies={documentaries.data}
-        /> */}
+        />
       </div>
     </div>
   )
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..5ef4c35
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+interface IBackdrop {
+  toggleBackdrop?: () => void
+  show: boolean
+}
+
+interface IModal extends IBackdrop {
+  backgroundImage: string
+  children: JSX.Element
+}
+
+const Backdrop = ({ toggleBackdrop, show }: IBackdrop) =>
+  show ? <div onClick={toggleBackdrop} className='backdrop'></div> : null
+
+const Modal = ({ show, toggleBackdrop, children, backgroundImage }: IModal) => {
+  const backgroundStyle = {
+    backgroundSize: 'cover',
+    backgroundImage: `url(https://image.tmdb.org/t/p/original/${backgroundImage})`,
+  }
+
+  return (
+    <div>
+      <Backdrop show={show} toggleBackdrop={toggleBackdrop} />
+      <div
+        style={backgroundStyle}
+        className={show ? 'modal show' : 'modal hide'}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Modal
diff --git a/src/components/ModalMovieDetails.js b/src/components/ModalMovieDetails.tsx
similarity index 89%
rename from src/components/ModalMovieDetails.js
rename to src/components/ModalMovieDetails.tsx
index c728345..b53ae6b 100644
--- a/src/components/ModalMovieDetails.js
+++ b/src/components/ModalMovieDetails.tsx
@@ -2,9 +2,10 @@ import React from 'react'
 
 import AddIcon from '../static/images/add.svg'
 import PlayIcon from '../static/images/play-button.svg'
+import { IMovieDetails } from '../store/slices/movieDetailsSlice'
 
-const MovieDetails = ({
-  movie: {
+const MovieDetails = (props: IMovieDetails) => {
+  const {
     title,
     name,
     vote_average,
@@ -15,8 +16,7 @@ const MovieDetails = ({
     number_of_episodes,
     number_of_seasons,
     overview,
-  },
-}) => {
+  } = props
   return (
     <div className='modal__container'>
       <h1 className='modal__title'>{title || name}</h1>
diff --git a/src/components/Navbar.js b/src/components/Navbar.tsx
similarity index 96%
rename from src/components/Navbar.js
rename to src/components/Navbar.tsx
index e8421cb..122d923 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.tsx
@@ -7,7 +7,7 @@ import SearchLogo from '../static/images/search-icon.svg'
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'
 import BellLogo from '../static/images/bell-logo.svg'
 import DropdownArrow from '../static/images/drop-down-arrow.svg'
-import DropdownContent from '../components/DropdownContent'
+import DropdownContent from './DropdownContent'
 
 const Navbar = () => {
   const navigate = useNavigate()
@@ -16,7 +16,7 @@ const Navbar = () => {
   const [scrollDimensions] = useScroll()
   const { scrollY } = scrollDimensions
 
-  const onChange = async (event) => {
+  const onChange = async (event: any) => {
     setUserInput(event.target.value)
   }
 
diff --git a/src/components/UI/Backdrop.js b/src/components/UI/Backdrop.js
deleted file mode 100644
index 23d8267..0000000
--- a/src/components/UI/Backdrop.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-
-const backdrop = ({ toggleBackdrop, show }) =>
-  show ? <div onClick={toggleBackdrop} className='backdrop'></div> : null
-
-export default backdrop
diff --git a/src/components/UI/Modal.js b/src/components/UI/Modal.js
deleted file mode 100644
index c282e2e..0000000
--- a/src/components/UI/Modal.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-
-import Backdrop from './Backdrop'
-
-const Modal = ({ show, modalClosed, children, backgroundImage }) => {
-  const backgroundStyle = {
-    backgroundSize: 'cover',
-    backgroundImage: `url(https://image.tmdb.org/t/p/original/${backgroundImage})`,
-  }
-
-  return (
-    <div>
-      <Backdrop show={show} toggleBackdrop={modalClosed} />
-      <div
-        style={backgroundStyle}
-        className={show ? 'modal show' : 'modal hide'}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default Modal
diff --git a/src/hooks/index.js b/src/hooks/index.ts
similarity index 53%
rename from src/hooks/index.js
rename to src/hooks/index.ts
index 98cec71..28b636c 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.ts
@@ -1,6 +1,5 @@
 import { useDebounce } from './useDebounce'
 import { useScroll } from './useScroll'
 import { useViewport } from './useViewport'
-import { useWithRouter } from './useWithRouter'
 
-export { useDebounce, useScroll, useViewport, useWithRouter }
+export { useDebounce, useScroll, useViewport }
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.ts
similarity index 91%
rename from src/hooks/useDebounce.js
rename to src/hooks/useDebounce.ts
index 23ad049..ad25d91 100644
--- a/src/hooks/useDebounce.js
+++ b/src/hooks/useDebounce.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-export const useDebounce = (value, delay) => {
+export const useDebounce = (value: string, delay: number) => {
   // State and setters for debounced value
   const [debouncedValue, setDebouncedValue] = useState(value)
 
diff --git a/src/hooks/useScroll.js b/src/hooks/useScroll.ts
similarity index 100%
rename from src/hooks/useScroll.js
rename to src/hooks/useScroll.ts
diff --git a/src/hooks/useViewport.js b/src/hooks/useViewport.ts
similarity index 100%
rename from src/hooks/useViewport.js
rename to src/hooks/useViewport.ts
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 21bbd9c..3ecfadc 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,13 +1,16 @@
 import React, { useState } from 'react'
 
 import MainContent from '../components/MainContent'
-import Modal from '../components/UI/Modal'
+import Modal from '../components/Modal'
 import ModalMovieDetails from '../components/ModalMovieDetails'
 import { IMovieDetails } from '../store/slices/movieDetailsSlice'
 
 const Home = () => {
   const [toggleModal, setToggleModal] = useState(false)
-  const [movieDetails, setMovieDetails] = useState<IMovieDetails>()
+  const [movieDetails, setMovieDetails] = useState<IMovieDetails>({
+    poster_path: '',
+    backdrop_path: '',
+  })
 
   const selectMovieHandler = async (movie: IMovieDetails) => {
     setToggleModal(true)
@@ -25,10 +28,10 @@ const Home = () => {
       </div>
       <Modal
         show={toggleModal}
-        modalClosed={closeModal}
+        toggleBackdrop={closeModal}
         backgroundImage={movieDetails.backdrop_path || movieDetails.poster_path}
       >
-        <ModalMovieDetails movie={movieDetails} />
+        <ModalMovieDetails {...movieDetails} />
       </Modal>
     </>
   )
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.tsx
similarity index 100%
rename from src/pages/NotFound.js
rename to src/pages/NotFound.tsx
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index 7e8d9b7..a586823 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -3,9 +3,10 @@ import { useLocation } from 'react-router-dom'
 
 import { useAppSelector, useAppDispatch } from '../store'
 import ModalMovieDetails from '../components/ModalMovieDetails'
-import Modal from '../components/UI/Modal'
+import Modal from '../components/Modal'
 import { useDebounce } from '../hooks/useDebounce'
-import * as movieActions from '../store/actions'
+import * as searchSlice from '../store/slices/searchSlice'
+import * as movieDetailsSlice from '../store/slices/movieDetailsSlice'
 
 interface IMovie {
   id: string
@@ -31,7 +32,7 @@ const Search = () => {
 
   useEffect(() => {
     if (debouncedSearchTerm) {
-      dispatch(movieActions.fetchSearchMovie(debouncedSearchTerm))
+      dispatch(searchSlice.searchItemsAsync(debouncedSearchTerm))
     }
   }, [debouncedSearchTerm])
 
@@ -40,7 +41,12 @@ const Search = () => {
   }
 
   const onSelectMovieHandler = (movie: IMovie) => {
-    dispatch(movieActions.fetchMovieDetails(movie.media_type, movie.id))
+    dispatch(
+      movieDetailsSlice.getMovieDetailsAsync({
+        mediaType: movie.media_type,
+        mediaId: movie.id,
+      })
+    )
     setIsToggleModal(true)
   }
 
@@ -67,12 +73,12 @@ const Search = () => {
         </div>
         <Modal
           show={isToggleModal}
-          modalClosed={onCloseModalHandler}
+          toggleBackdrop={onCloseModalHandler}
           backgroundImage={
             movieDetails.backdrop_path || movieDetails.poster_path
           }
         >
-          <ModalMovieDetails movie={movieDetails} />
+          <ModalMovieDetails {...movieDetails} />
         </Modal>
       </>
     ) : (
diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts
deleted file mode 100644
index 1afe835..0000000
--- a/src/store/actions/index.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import axios from '../../axios-movies'
-
-export const FETCH_TRENDING = 'FETCH_TRENDING'
-export const FETCH_NETFLIX_ORIGINALS = 'FETCH_NETFLIX_ORIGINALS'
-export const FETCH_TOP_RATED = 'FETCH_TOP_RATED'
-export const FETCH_ACTION_MOVIES = 'FETCH_ACTION_MOVIES'
-export const FETCH_COMEDY_MOVIES = 'FETCH_COMEDY_MOVIES'
-export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES'
-export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES'
-export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES'
-// movie details
-export const FETCH_MOVIE_DETAILS = 'FETCH_MOVIE_DETAILS'
-export const FETCH_MOVIE_DETAILS_SUCCESS = 'FETCH_MOVIE_DETAILS_SUCCESS'
-export const FETCH_MOVIE_DETAILS_FAIL = 'FETCH_MOVIE_DETAILS_FAIL'
-// search
-export const FETCH_SEARCH_MOVIE = 'FETCH_SEARCH_MOVIE'
-export const FETCH_SEARCH_MOVIE_FAIL = 'FETCH_SEARCH_MOVIE_FAIL'
-export const FETCH_SEARCH_MOVIE_SUCCESS = 'FETCH_SEARCH_MOVIE_SUCCESS'
-
-const media_type = {
-  tv: 'tv',
-  movie: 'movie',
-}
-
-export const fetchMovieDetails = (mediaType: string, mediaId: string) => {
-  return async (dispatch: any) => {
-    try {
-      dispatch({ type: FETCH_MOVIE_DETAILS })
-      let urlPath
-      if (mediaType === media_type.movie)
-        urlPath = `/movie/${mediaId}?api_key=${process.env.API_KEY}`
-      if (mediaType === media_type.tv)
-        urlPath = `/tv/${mediaId}?api_key=${process.env.API_KEY}`
-      const request = await axios.get(urlPath)
-      dispatch({ type: FETCH_MOVIE_DETAILS_SUCCESS, payload: request })
-    } catch (error) {
-      console.log('error', error)
-      dispatch({ type: FETCH_MOVIE_DETAILS_FAIL })
-    }
-  }
-}
-
-export const fetchSearchMovie = (searchTerm: string) => {
-  return async (dispatch: any) => {
-    try {
-      dispatch({ type: FETCH_SEARCH_MOVIE })
-      const request = await axios.get(
-        `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchTerm}`
-      )
-      dispatch({ type: FETCH_SEARCH_MOVIE_SUCCESS, payload: request })
-    } catch (error) {
-      dispatch({ type: FETCH_SEARCH_MOVIE_FAIL })
-      console.log('error', error)
-    }
-  }
-}
-
-export const fetchNetflixOriginals = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-      )
-
-      dispatch({ type: FETCH_NETFLIX_ORIGINALS, payload: request })
-    } catch (error) {
-      console.log('error', error)
-    }
-  }
-}
-
-export const fetchTrending = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
-      )
-      dispatch({ type: FETCH_TRENDING, payload: request })
-    } catch (error) {}
-  }
-}
-
-export const fetchTopRated = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
-      )
-      dispatch({ type: FETCH_TOP_RATED, payload: request })
-    } catch (error) {}
-  }
-}
-
-export const fetchActionMovies = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
-      )
-
-      dispatch({ type: FETCH_ACTION_MOVIES, payload: request })
-    } catch (error) {}
-  }
-}
-
-export const fetchComedyMovies = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=35`
-      )
-
-      dispatch({ type: FETCH_COMEDY_MOVIES, payload: request })
-    } catch (error) {}
-  }
-}
-
-export const fetchHorrorMovies = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
-      )
-      dispatch({ type: FETCH_HORROR_MOVIES, payload: request })
-    } catch (error) {}
-  }
-}
-
-export const fetchRomanceMovies = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=10749`
-      )
-      dispatch({ type: FETCH_ROMANCE_MOVIES, payload: request })
-    } catch (error) {}
-  }
-}
-
-export const fetchDocumentaries = () => {
-  return async (dispatch: any) => {
-    try {
-      const request = await axios.get(
-        `/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
-      )
-      dispatch({ type: FETCH_DOCUMENTARIES, payload: request })
-    } catch (error) {}
-  }
-}
diff --git a/src/store/index.ts b/src/store/index.ts
index c2a8461..c4ece98 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,12 +3,12 @@ import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
 
 import TrendingReducer from './slices/trendingSlice'
 import NetflixOriginalsReducer from './slices/netflixOriginalsSlice'
-import TopRatedReducer from './slices/reducerTopRated'
+import TopRatedReducer from './slices/topRatedSlice'
 import ActionMoviesReducer from './slices/actionMovieSlice'
-import ComedyMoviesReducer from './slices/reducerComedyMovies'
-import HorrorMoviesReducer from './slices/reducerHorrorMovies'
-import RomanceMoviesReducer from './slices/reducerRomanceMovies'
-import DocumentaryReducer from './slices/reducerDocumentary'
+import ComedyMoviesReducer from './slices/comedyMoviesSlice'
+import HorrorMoviesReducer from './slices/horrorMoviesSlice'
+import RomanceMoviesReducer from './slices/romanceMoviesSlice'
+import DocumentaryReducer from './slices/documentarySlice'
 import SearchMovieReducer from './slices/searchSlice'
 import MovieDetailsReducer from './slices/movieDetailsSlice'
 
@@ -16,13 +16,13 @@ export const store = configureStore({
   reducer: {
     trending: TrendingReducer,
     netflixOriginals: NetflixOriginalsReducer,
-    // topRated: TopRatedReducer,
+    topRated: TopRatedReducer,
     action: ActionMoviesReducer,
-    // comedy: ComedyMoviesReducer,
-    // horror: HorrorMoviesReducer,
-    // romance: RomanceMoviesReducer,
+    comedy: ComedyMoviesReducer,
+    horror: HorrorMoviesReducer,
+    romance: RomanceMoviesReducer,
     searchMovie: SearchMovieReducer,
-    // documentary: DocumentaryReducer,
+    documentary: DocumentaryReducer,
     movieDetails: MovieDetailsReducer,
   },
 })
diff --git a/src/store/slices/comedyMoviesSlice.ts b/src/store/slices/comedyMoviesSlice.ts
new file mode 100644
index 0000000..ee1e07f
--- /dev/null
+++ b/src/store/slices/comedyMoviesSlice.ts
@@ -0,0 +1,33 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import axios from '../../axios-movies'
+import { RootState } from '../index'
+import { IMovieDetails } from './movieDetailsSlice'
+
+const initialState: { data: IMovieDetails[] } = {
+  data: [],
+}
+
+export const getComedyMoviesAsync = createAsyncThunk<
+  any,
+  void,
+  { state: RootState }
+>('comedy/getComedyMovies', async () => {
+  const response = await axios.get(
+    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
+  )
+  return response.data.results
+})
+
+const comedyMovieSlice = createSlice({
+  name: 'comedyMovie',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(getComedyMoviesAsync.fulfilled, (state, { payload }) => {
+      state.data = payload
+    })
+  },
+})
+
+export default comedyMovieSlice.reducer
diff --git a/src/store/slices/documentarySlice.ts b/src/store/slices/documentarySlice.ts
new file mode 100644
index 0000000..e9cac7f
--- /dev/null
+++ b/src/store/slices/documentarySlice.ts
@@ -0,0 +1,33 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import axios from '../../axios-movies'
+import { RootState } from '../index'
+import { IMovieDetails } from './movieDetailsSlice'
+
+const initialState: { data: IMovieDetails[] } = {
+  data: [],
+}
+
+export const getDocumentariesAsync = createAsyncThunk<
+  any,
+  void,
+  { state: RootState }
+>('documentary/getDocumentaries', async () => {
+  const response = await axios.get(
+    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
+  )
+  return response.data.results
+})
+
+const documentarySlice = createSlice({
+  name: 'actionMovie',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(getDocumentariesAsync.fulfilled, (state, { payload }) => {
+      state.data = payload
+    })
+  },
+})
+
+export default documentarySlice.reducer
diff --git a/src/store/slices/horrorMoviesSlice.ts b/src/store/slices/horrorMoviesSlice.ts
new file mode 100644
index 0000000..9da50d9
--- /dev/null
+++ b/src/store/slices/horrorMoviesSlice.ts
@@ -0,0 +1,33 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import axios from '../../axios-movies'
+import { RootState } from '../index'
+import { IMovieDetails } from './movieDetailsSlice'
+
+const initialState: { data: IMovieDetails[] } = {
+  data: [],
+}
+
+export const getHorrorMoviesAsync = createAsyncThunk<
+  any,
+  void,
+  { state: RootState }
+>('horror/getHorrorMovies', async () => {
+  const response = await axios.get(
+    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
+  )
+  return response.data.results
+})
+
+const horrorMoviesSlice = createSlice({
+  name: 'horrorMovies',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(getHorrorMoviesAsync.fulfilled, (state, { payload }) => {
+      state.data = payload
+    })
+  },
+})
+
+export default horrorMoviesSlice.reducer
diff --git a/src/store/slices/movieDetailsSlice.ts b/src/store/slices/movieDetailsSlice.ts
index c3fa08b..4b74f94 100644
--- a/src/store/slices/movieDetailsSlice.ts
+++ b/src/store/slices/movieDetailsSlice.ts
@@ -6,16 +6,16 @@ import { RootState } from '../index'
 export interface IMovieDetails {
   backdrop_path?: string
   poster_path?: string
-  title: any
-  name: any
-  vote_average: any
-  release_date: any
-  first_air_date: any
-  runtime: any
-  episode_run_time: any
-  number_of_episodes: any
-  number_of_seasons: any
-  overview: any
+  title?: any
+  name?: any
+  vote_average?: any
+  release_date?: any
+  first_air_date?: any
+  runtime?: any
+  episode_run_time?: any
+  number_of_episodes?: any
+  number_of_seasons?: any
+  overview?: any
 }
 
 interface IInitialState {
@@ -29,7 +29,7 @@ const media_type = {
 }
 
 const initialState: IInitialState = {
-  isLoading: false,
+  isLoading: true,
   movieDetails: {
     backdrop_path: '',
     poster_path: '',
@@ -57,7 +57,7 @@ export const getMovieDetailsAsync = createAsyncThunk<
   if (mediaType === media_type.tv)
     urlPath = `/tv/${mediaId}?api_key=${process.env.API_KEY}`
   const response = await axios.get(urlPath)
-  return response.data.results
+  return response.data
 })
 
 const movieDetailsSlice = createSlice({
@@ -67,8 +67,13 @@ const movieDetailsSlice = createSlice({
   extraReducers: (builder) => {
     builder.addCase(getMovieDetailsAsync.fulfilled, (state, { payload }) => {
       state.isLoading = false
+      console.log('state ', state)
+      console.log('payload', payload)
       state.movieDetails = payload
     })
+    builder.addCase(getMovieDetailsAsync.pending, (state) => {
+      state.isLoading = true
+    })
   },
 })
 
diff --git a/src/store/slices/reducerComedyMovies.ts b/src/store/slices/reducerComedyMovies.ts
deleted file mode 100644
index 5ebfcdc..0000000
--- a/src/store/slices/reducerComedyMovies.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FETCH_COMEDY_MOVIES } from '../actions/index'
-
-export default function (state = {}, action: any) {
-  switch (action.type) {
-    case FETCH_COMEDY_MOVIES:
-      const data = action.payload.data.results
-      return { ...state, data }
-    default:
-      return state
-  }
-}
diff --git a/src/store/slices/reducerDocumentary.ts b/src/store/slices/reducerDocumentary.ts
deleted file mode 100644
index c646d04..0000000
--- a/src/store/slices/reducerDocumentary.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FETCH_DOCUMENTARIES } from '../actions/index'
-
-export default function (state = {}, action: any) {
-  switch (action.type) {
-    case FETCH_DOCUMENTARIES:
-      const data = action.payload.data.results
-      return { ...state, data }
-    default:
-      return state
-  }
-}
diff --git a/src/store/slices/reducerHorrorMovies.ts b/src/store/slices/reducerHorrorMovies.ts
deleted file mode 100644
index 598b8e9..0000000
--- a/src/store/slices/reducerHorrorMovies.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FETCH_HORROR_MOVIES } from '../actions/index'
-
-export default function (state = {}, action: any) {
-  switch (action.type) {
-    case FETCH_HORROR_MOVIES:
-      const data = action.payload.data.results
-      return { ...state, data }
-    default:
-      return state
-  }
-}
diff --git a/src/store/slices/reducerRomanceMovies.ts b/src/store/slices/reducerRomanceMovies.ts
deleted file mode 100644
index 798eb5b..0000000
--- a/src/store/slices/reducerRomanceMovies.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FETCH_ROMANCE_MOVIES } from '../actions/index'
-
-export default function (state = {}, action: any) {
-  switch (action.type) {
-    case FETCH_ROMANCE_MOVIES:
-      const data = action.payload.data.results
-      return { ...state, data }
-    default:
-      return state
-  }
-}
diff --git a/src/store/slices/reducerTopRated.ts b/src/store/slices/reducerTopRated.ts
deleted file mode 100644
index 37c3236..0000000
--- a/src/store/slices/reducerTopRated.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FETCH_TOP_RATED } from '../actions/index'
-
-export default function (state = {}, action: any) {
-  switch (action.type) {
-    case FETCH_TOP_RATED:
-      const data = action.payload.data.results
-      return { ...state, data }
-    default:
-      return state
-  }
-}
diff --git a/src/store/slices/romanceMoviesSlice.ts b/src/store/slices/romanceMoviesSlice.ts
new file mode 100644
index 0000000..def2a1a
--- /dev/null
+++ b/src/store/slices/romanceMoviesSlice.ts
@@ -0,0 +1,33 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import axios from '../../axios-movies'
+import { RootState } from '../index'
+import { IMovieDetails } from './movieDetailsSlice'
+
+const initialState: { data: IMovieDetails[] } = {
+  data: [],
+}
+
+export const getRomanceMoviesAsync = createAsyncThunk<
+  any,
+  void,
+  { state: RootState }
+>('romance/getRomanceMovies', async () => {
+  const response = await axios.get(
+    `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
+  )
+  return response.data.results
+})
+
+const romanceMovieSlice = createSlice({
+  name: 'romanceMovie',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(getRomanceMoviesAsync.fulfilled, (state, { payload }) => {
+      state.data = payload
+    })
+  },
+})
+
+export default romanceMovieSlice.reducer
diff --git a/src/store/slices/searchSlice.ts b/src/store/slices/searchSlice.ts
index 4ade615..478f2a8 100644
--- a/src/store/slices/searchSlice.ts
+++ b/src/store/slices/searchSlice.ts
@@ -2,35 +2,6 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 
 import axios from '../../axios-movies'
 import { RootState } from '../index'
-import {
-  FETCH_SEARCH_MOVIE,
-  FETCH_SEARCH_MOVIE_FAIL,
-  FETCH_SEARCH_MOVIE_SUCCESS,
-} from '../actions/index'
-
-// interface IInitialState {
-//   isLoading: boolean
-//   searchResults: []
-// }
-
-// const initialState: IInitialState = {
-//   isLoading: false,
-//   searchResults: [],
-// }
-
-// export default function (state = initialState, action: any) {
-//   switch (action.type) {
-//     case FETCH_SEARCH_MOVIE:
-//       return { ...state, isLoading: true }
-//     case FETCH_SEARCH_MOVIE_FAIL:
-//       return { ...state, isLoading: false }
-//     case FETCH_SEARCH_MOVIE_SUCCESS:
-//       const searchResults = action.payload.data.results
-//       return { ...state, searchResults, isLoading: false }
-//     default:
-//       return state
-//   }
-// }
 
 const initialState = {
   searchResults: [{}],
@@ -39,7 +10,7 @@ const initialState = {
 
 export const searchItemsAsync = createAsyncThunk<
   any,
-  void,
+  string,
   { state: RootState }
 >('search/getSearchItems', async (searchTerm) => {
   const response = await axios.get(
diff --git a/src/store/slices/topRatedSlice.ts b/src/store/slices/topRatedSlice.ts
new file mode 100644
index 0000000..73d49e3
--- /dev/null
+++ b/src/store/slices/topRatedSlice.ts
@@ -0,0 +1,33 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import axios from '../../axios-movies'
+import { RootState } from '../index'
+import { IMovieDetails } from './movieDetailsSlice'
+
+const initialState: { data: IMovieDetails[] } = {
+  data: [],
+}
+
+export const getTopRatedAsync = createAsyncThunk<
+  any,
+  void,
+  { state: RootState }
+>('topRated/getTopRated', async () => {
+  const response = await axios.get(
+    `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
+  )
+  return response.data.results
+})
+
+const trendingSlice = createSlice({
+  name: 'topRated',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(getTopRatedAsync.fulfilled, (state, { payload }) => {
+      state.data = payload
+    })
+  },
+})
+
+export default trendingSlice.reducer
diff --git a/tsconfig.json b/tsconfig.json
index 5066e17..01cfdc7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,9 @@
     "sourceMap": true,
     "allowJs": true,
     "moduleResolution": "node",
-    "typeRoots": ["types/", "node_modules/@types"],
+    "typeRoots": ["custom.d.ts", "node_modules/@types"],
     "allowSyntheticDefaultImports": true
-  }
+  },
+  "files": ["custom.d.ts"],
+  "include": ["src/", "custom.d.ts"]
 }