diff --git a/src/App.css b/src/App.css
index 2ae7589..7d4132b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -64,12 +64,15 @@
 }
 
 .content-container {
-  padding: 2vh 2vw;
+  padding: 10px 10px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
   flex-grow: 1;
+  height: calc(100vh - 64px);
+  box-sizing: border-box;
+  overflow-y: scroll;
 }
 
 .ant-modal-body {
@@ -81,11 +84,10 @@
 
 .content-wrap {
   display: flex;
+  width: 1520px;
   gap: 20px;
   flex-wrap: wrap;
   justify-content: start;
-  width: 100%;
-  min-height: 80vh;
 }
 
 .anime-card {
@@ -169,11 +171,10 @@
 .anime-big-card {
   position: relative;
   display: flex;
-  gap: 10px;
+  gap: 30px;
   justify-content: space-between;
   align-items: start;
   padding: 3vw;
-  /* border: 2px solid #d29ada; */
   border-radius: 10px;
   min-width: 60vw;
   max-width: 70vw;
@@ -205,10 +206,6 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.descriptions {
-  max-width: 60%;
-}
-
 .random-container {
   display: flex;
   align-items: center;
@@ -249,6 +246,69 @@
   position: static;
 }
 
+.nav-menu i {
+  display: none;
+}
+
+.ant-menu-submenu-title {
+  padding-inline-end: 0px !important;
+}
+
+.search-page {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: start;
+  display: flex;
+}
+
+.showhide-button {
+  display: none;
+}
+
+.lists-sider {
+  min-height: calc(100vh - 64px);
+  padding-top: 15px;
+}
+
+.home-sider {
+  height: calc(100vh - 64px);
+  overflow-y: scroll;
+}
+
+.lists-page {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: start;
+  display: flex;
+  width: 100%;
+}
+
+@media (max-width: 1840px) {
+  .content-wrap {
+    width: 1300px;
+  }
+}
+@media (max-width: 1580px) {
+  .content-wrap {
+    width: 1080px;
+  }
+}
+@media (max-width: 1400px) {
+  .content-wrap {
+    width: 860px;
+  }
+}
+@media (max-width: 1130px) {
+  .content-wrap {
+    width: 640px;
+  }
+}
+@media (max-width: 910px) {
+  .content-wrap {
+    width: 420px;
+  }
+}
+
 @media (max-width: 1400px) {
   .anime-big-card {
     align-items: center;
@@ -277,4 +337,101 @@
   .descriptions {
     max-width: unset;
   }
+
+  .header-container {
+    width: calc(100vw - 30px);
+    gap: unset;
+  }
+}
+
+@media (max-width: 720px) {
+  .lists-page {
+    flex-direction: column;
+  }
+  .content-container {
+    min-height: calc(100vh - 91px);
+    height: fit-content;
+    width: 100%;
+  }
+  .lists-sider {
+    min-height: calc(100vh - 91px);
+    flex: 0 0 150px !important;
+    min-width: unset !important;
+  }
+  .search-sider {
+    position: relative;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: unset;
+    min-height: unset;
+    width: 100vw;
+    height: fit-content;
+    border-right: none;
+    padding-bottom: 10px;
+    background-color: #f9f9f9;
+  }
+  .search-sider-closed {
+    height: 20px;
+  }
+
+  .search-sider-closed .ant-form {
+    display: none;
+  }
+
+  .search-sider-dark {
+    background-color: #001529;
+    color: #e4dee4a8;
+  }
+
+  .ant-form {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 20px;
+    align-items: center;
+  }
+
+  .ant-form-item:has(.ant-select) {
+    min-width: 100px;
+  }
+
+  .search-page {
+    flex-direction: column;
+  }
+
+  .showhide-button {
+    display: block;
+    position: absolute;
+    width: 90px;
+    bottom: -25px;
+    left: calc(50vw - 45px);
+    border-radius: 0 0 10px 10px;
+    color: inherit;
+    background-color: inherit;
+    appearance: none;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  .showhide-button:hover {
+    color: #d29ada;
+  }
+
+  .content-wrap {
+    width: 640px;
+  }
+}
+
+@media (max-width: 670px) {
+  .content-wrap {
+    width: 420px;
+  }
+}
+
+@media (max-width: 442px) {
+  .content-wrap {
+    width: 220px;
+  }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 4b248ca..f761f72 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,15 @@
 import { Header } from 'antd/es/layout/layout'
-import { SunOutlined, MoonOutlined } from '@ant-design/icons'
-import { ConfigProvider, Layout, Input, Space, Menu, Switch } from 'antd'
-import { useCallback, useEffect, useState } from 'react'
+import { SunOutlined, MoonOutlined, HomeOutlined } from '@ant-design/icons'
+import {
+  ConfigProvider,
+  Layout,
+  Input,
+  Space,
+  Menu,
+  Switch,
+  Breadcrumb,
+} from 'antd'
+import { useEffect, useState } from 'react'
 import { Routes, Route, useLocation } from 'react-router'
 import { Link, useNavigate } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
@@ -17,9 +25,10 @@ import {
   AnimeByIdPage,
   ListsPage,
 } from './pages'
-import { requestLists, requestGenres, clearHomeFilters } from './redux/slices'
-import { createNavItems } from './utils'
+import { requestLists, requestGenres } from './redux/slices'
 import { SharedPage } from './pages/SharedPage'
+import { burgerNavItems, navItems } from './utils/createNavItems'
+import { SizeContext } from './shared/SizeContext'
 const isSystemThemeLight = window.matchMedia(
   '(prefers-color-scheme: light)',
 ).matches
@@ -31,6 +40,32 @@ function App() {
   const navigate = useNavigate()
   const location = useLocation()
 
+  const breadItems = location.pathname
+    .split('/')
+    .slice(1)
+    .map((i) => ({
+      key: i,
+      title: (
+        <Link to={'/' + i}>
+          {i ? i[0].toUpperCase() + i.substring(1) : null}
+        </Link>
+      ),
+    }))
+
+  const [isNarrowScreen, setIsNarrowScreen] = useState(
+    window.matchMedia('(max-width: 720px)').matches,
+  )
+  useEffect(() => {
+    function handleResize() {
+      setIsNarrowScreen(window.matchMedia('(max-width: 720px)').matches)
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
   useEffect(() => {
     dispatch(requestGenres())
     dispatch(requestLists())
@@ -41,59 +76,105 @@ function App() {
     setSearchValue('')
   }
 
-  const onHomePageClick = useCallback(() => {
-    dispatch(clearHomeFilters)
-  }, [dispatch])
-
   return (
-    <ThemeContext.Provider value={isLightTheme}>
-      <ConfigProvider theme={getAppStyleUpgrades(isLightTheme)}>
-        <Layout style={{ minHeight: '100vh' }}>
-          <Header className="header">
-            <div className="header-container">
-              <Link to="/">
-                <h1 className="app-title">Anime Universe</h1>
-              </Link>
-              <div className="nav">
-                <Space.Compact size="middle" className="search-container">
-                  <Input.Search
-                    placeholder="input anime title"
-                    value={searchValue}
-                    onChange={(e) => setSearchValue(e.target.value)}
-                    onSearch={onSearch}
+    <SizeContext.Provider value={isNarrowScreen}>
+      <ThemeContext.Provider value={isLightTheme}>
+        <ConfigProvider theme={getAppStyleUpgrades(isLightTheme)}>
+          <Layout style={{ minHeight: '100vh' }}>
+            <Header className="header">
+              <div className="header-container">
+                <Link to="/">
+                  <h1 className="app-title">Anime Universe</h1>
+                </Link>
+                <div className="nav">
+                  <Space.Compact size="middle" className="search-container">
+                    <Input.Search
+                      placeholder="input anime title"
+                      value={searchValue}
+                      onChange={(e) => setSearchValue(e.target.value)}
+                      onSearch={onSearch}
+                    />
+                  </Space.Compact>
+                  {!isNarrowScreen && (
+                    <Menu
+                      className="nav-menu"
+                      mode="horizontal"
+                      theme="dark"
+                      items={navItems}
+                      selectedKeys={['/' + location.pathname.split('/')[1]]}
+                    />
+                  )}
+                </div>
+                {isNarrowScreen && (
+                  <Menu
+                    className="nav-menu"
+                    mode="vertical"
+                    theme="dark"
+                    items={burgerNavItems}
+                    selectedKeys={['/' + location.pathname.split('/')[1]]}
                   />
-                </Space.Compact>
-                <Menu
-                  mode="horizontal"
-                  theme="dark"
-                  items={createNavItems(onHomePageClick)}
-                  selectedKeys={['/' + location.pathname.split('/')[1]]}
+                )}
+                <Switch
+                  style={{ marginLeft: '20px' }}
+                  checkedChildren={<SunOutlined />}
+                  unCheckedChildren={<MoonOutlined />}
+                  defaultChecked={isLightTheme}
+                  onChange={() => setIsLightTheme(!isLightTheme)}
                 />
               </div>
-              <Switch
-                style={{ marginLeft: '20px' }}
-                checkedChildren={<SunOutlined />}
-                unCheckedChildren={<MoonOutlined />}
-                defaultChecked={isLightTheme}
-                onChange={() => setIsLightTheme(!isLightTheme)}
-              />
-            </div>
-          </Header>
-          <Layout style={{ width: '100vw' }}>
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/search" element={<SearchPage />} />
-              <Route path="/search" element={<SearchPage />} />
-              <Route path="/random" element={<RandomAnimePage />} />
-              <Route path="/:id" element={<AnimeByIdPage />} />
-              <Route path="/lists" element={<ListsPage />} />
-              <Route path="/lists/:listname" element={<ListsPage />} />
-              <Route path="/shared" element={<SharedPage />} />
-            </Routes>
+            </Header>
+            {isNarrowScreen && (
+              <Header
+                style={{
+                  height: 'fit-content',
+                  paddingLeft: '15px',
+                  paddingTop: '5px',
+                  backgroundColor: isLightTheme ? '#f9f9f9' : '#001529',
+                }}
+              >
+                <Breadcrumb
+                  items={
+                    breadItems
+                      ? [
+                          {
+                            key: '/',
+                            title: (
+                              <Link to="/">
+                                <HomeOutlined />
+                              </Link>
+                            ),
+                          },
+                        ].concat(breadItems)
+                      : [
+                          {
+                            key: '/',
+                            title: (
+                              <Link to="/">
+                                <HomeOutlined />
+                              </Link>
+                            ),
+                          },
+                        ]
+                  }
+                />
+              </Header>
+            )}
+            <Layout style={{ width: '100vw' }}>
+              <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/search" element={<SearchPage />} />
+                <Route path="/search" element={<SearchPage />} />
+                <Route path="/random" element={<RandomAnimePage />} />
+                <Route path="/:id" element={<AnimeByIdPage />} />
+                <Route path="/lists" element={<ListsPage />} />
+                <Route path="/lists/:listname" element={<ListsPage />} />
+                <Route path="/shared" element={<SharedPage />} />
+              </Routes>
+            </Layout>
           </Layout>
-        </Layout>
-      </ConfigProvider>
-    </ThemeContext.Provider>
+        </ConfigProvider>
+      </ThemeContext.Provider>
+    </SizeContext.Provider>
   )
 }
 
diff --git a/src/Pages/HomePage/HomeContent.tsx b/src/Pages/HomePage/HomeContent.tsx
index 1c89505..37dfe6b 100644
--- a/src/Pages/HomePage/HomeContent.tsx
+++ b/src/Pages/HomePage/HomeContent.tsx
@@ -1,4 +1,3 @@
-import { Flex } from 'antd'
 import { Content } from 'antd/es/layout/layout'
 import { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
@@ -14,6 +13,7 @@ import { AnimeCardType, DispatchType } from '../../types'
 import { determineCardsAmountByViewport } from '../../utils'
 import { requestHomeCardsData } from '../../redux/slices/homeCards/thunk'
 import { usePageResize, useTypedSelector } from '../../hooks'
+import { clearHomeFilters } from '../../redux/slices'
 
 const initialCardsAmount = determineCardsAmountByViewport()
 
@@ -37,9 +37,13 @@ function HomeContent() {
     dispatch(requestHomeCardsData(filters, 1, cardsAmount))
   }, [cardsAmount, dispatch, filters])
 
+  useEffect(() => {
+    dispatch(clearHomeFilters())
+  }, [dispatch])
+
   return (
     <Content className="content-container">
-      <Flex wrap="wrap" justify="center" align="center" gap="middle">
+      <div className="content-wrap">
         <CaseComponent
           isError={isError}
           isSpinnerActive={isSpinnerActive}
@@ -59,7 +63,7 @@ function HomeContent() {
               )
             })}
         </CaseComponent>
-      </Flex>
+      </div>
     </Content>
   )
 }
diff --git a/src/Pages/HomePage/HomeMenu.tsx b/src/Pages/HomePage/HomeMenu.tsx
index 4e68f1a..65b8e65 100644
--- a/src/Pages/HomePage/HomeMenu.tsx
+++ b/src/Pages/HomePage/HomeMenu.tsx
@@ -2,13 +2,14 @@ import { useContext, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { Menu } from 'antd'
 import Sider from 'antd/es/layout/Sider'
+import { Header } from 'antd/es/layout/layout'
 
 import {
   clearHomeFilters,
   setGenreToHomeFilters,
   setRatingToHomeFilters,
 } from '../../redux/slices'
-import { ThemeContext, ratings } from '../../shared'
+import { ThemeContext, SizeContext, ratings } from '../../shared'
 import { GenresError, GenresLoading } from '../../components'
 import { useTypedSelector } from '../../hooks'
 
@@ -19,9 +20,10 @@ function HomeMenu() {
   const isError = useTypedSelector((state) => state.genres.isError)
   const genres = useTypedSelector((state) => state.genres.genres)
   const isLightTheme = useContext(ThemeContext)
-  const [openKeys, setOpenKeys] = useState(['rating'])
-  const dispatch = useDispatch()
+  const isNarrowScreen = useContext(SizeContext)
 
+  const [openKeys, setOpenKeys] = useState(isNarrowScreen ? [] : ['rating'])
+  const dispatch = useDispatch()
   const onOpenChange = (keys: string[]) => {
     const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1)
     if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
@@ -60,27 +62,54 @@ function HomeMenu() {
   }
 
   return (
-    <Sider theme={isLightTheme ? 'light' : 'dark'}>
-      <Menu
-        mode="inline"
-        theme={isLightTheme ? 'light' : 'dark'}
-        onOpenChange={onOpenChange}
-        onClick={handleMenuClick}
-        openKeys={openKeys}
-        defaultOpenKeys={openKeys}
-        defaultSelectedKeys={['clear']}
-      >
-        <Menu.Item key="clear">No filters</Menu.Item>
-        <Menu.SubMenu key="rating" title="Rating">
-          {ratings.map((item) => (
-            <Menu.Item key={item.key}>{item.label}</Menu.Item>
-          ))}
-        </Menu.SubMenu>
-        <Menu.SubMenu key="genres" title="Genres">
-          {content}
-        </Menu.SubMenu>
-      </Menu>
-    </Sider>
+    <>
+      {!isNarrowScreen && (
+        <Sider className="home-sider" theme={isLightTheme ? 'light' : 'dark'}>
+          <Menu
+            mode="inline"
+            theme={isLightTheme ? 'light' : 'dark'}
+            onOpenChange={onOpenChange}
+            onClick={handleMenuClick}
+            openKeys={openKeys}
+            defaultOpenKeys={openKeys}
+            defaultSelectedKeys={['clear']}
+          >
+            <Menu.Item key="clear">No filters</Menu.Item>
+            <Menu.SubMenu key="rating" title="Rating">
+              {ratings.map((item) => (
+                <Menu.Item key={item.key}>{item.label}</Menu.Item>
+              ))}
+            </Menu.SubMenu>
+            <Menu.SubMenu key="genres" title="Genres">
+              {content}
+            </Menu.SubMenu>
+          </Menu>
+        </Sider>
+      )}
+      {isNarrowScreen && (
+        <Header style={{ padding: 0 }}>
+          <Menu
+            mode="horizontal"
+            theme={isLightTheme ? 'light' : 'dark'}
+            onOpenChange={onOpenChange}
+            onClick={handleMenuClick}
+            openKeys={openKeys}
+            defaultOpenKeys={openKeys}
+            defaultSelectedKeys={['clear']}
+          >
+            <Menu.Item key="clear">No filters</Menu.Item>
+            <Menu.SubMenu key="rating" title="Rating">
+              {ratings.map((item) => (
+                <Menu.Item key={item.key}>{item.label}</Menu.Item>
+              ))}
+            </Menu.SubMenu>
+            <Menu.SubMenu key="genres" title="Genres">
+              {content}
+            </Menu.SubMenu>
+          </Menu>
+        </Header>
+      )}
+    </>
   )
 }
 
diff --git a/src/Pages/ListsPage/ListsContent.tsx b/src/Pages/ListsPage/ListsContent.tsx
index 869fde5..91ab7be 100644
--- a/src/Pages/ListsPage/ListsContent.tsx
+++ b/src/Pages/ListsPage/ListsContent.tsx
@@ -1,6 +1,8 @@
 import { Content } from 'antd/es/layout/layout'
 import { Button, Flex, Input, Modal, Pagination, QRCode } from 'antd'
 import { useState, useCallback, useMemo, useLayoutEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { useParams } from 'react-router'
 
 import {
   CaseComponent,
@@ -12,9 +14,7 @@ import {
 import { useTypedSelector, usePageResize } from '../../hooks'
 import { createListShareUrl, determineCardsAmountByViewport } from '../../utils'
 import { requestListAnimeData } from '../../redux/slices'
-import { useDispatch } from 'react-redux'
 import { DispatchType } from '../../types'
-import { useParams } from 'react-router'
 import { copyLinkToClipboard } from '../../utils/copyLinkToClipboard'
 const initialCardsAmount = determineCardsAmountByViewport()
 
@@ -67,13 +67,7 @@ export function ListsContent() {
   usePageResize(onResize)
   return (
     <Content className="content-container">
-      <Flex
-        className="content-wrap"
-        vertical={true}
-        justify="center"
-        align="center"
-        gap="middle"
-      >
+      <Flex vertical={true} justify="center" align="center" gap="middle">
         <CaseComponent
           isError={isError}
           isSpinnerActive={isSpinnerActive}
@@ -82,16 +76,11 @@ export function ListsContent() {
           loadingElement={<ContentLoading />}
           emptyElement={<ContentEmpty type={listname ? 'byList' : 'noList'} />}
         >
-          <Flex
-            wrap="wrap"
-            justify="start"
-            gap="middle"
-            style={{ width: '100%' }}
-          >
+          <div className="content-wrap">
             {listAnimes.map((anime) => (
               <AnimeCard key={anime.id} cardData={anime} isDeletable={true} />
             ))}
-          </Flex>
+          </div>
 
           <Pagination
             showSizeChanger={false}
diff --git a/src/Pages/ListsPage/ListsMenu.tsx b/src/Pages/ListsPage/ListsMenu.tsx
index 1fb014a..8fa87f6 100644
--- a/src/Pages/ListsPage/ListsMenu.tsx
+++ b/src/Pages/ListsPage/ListsMenu.tsx
@@ -1,15 +1,16 @@
-import { Menu, Input, Tooltip, Modal } from 'antd'
+import { Menu, Input, Tooltip, Modal, Select, Button } from 'antd'
+import { Header } from 'antd/es/layout/layout'
 import Sider from 'antd/es/layout/Sider'
-import { useContext, useEffect, useLayoutEffect, useState } from 'react'
+import { DeleteOutlined } from '@ant-design/icons'
+import { useContext, useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router'
+import { useDispatch } from 'react-redux'
 
-import { ThemeContext } from '../../shared'
+import { ThemeContext, SizeContext } from '../../shared'
 import { verifyNewListName } from '../../utils'
 import { useTypedSelector } from '../../hooks'
-import { useDispatch } from 'react-redux'
 import { deleteList, postNewList } from '../../redux/slices'
-import { DeleteOutlined } from '@ant-design/icons'
 import { DispatchType } from '../../types'
-import { useNavigate, useParams } from 'react-router'
 
 const blankMenuItem = {
   key: 'blank',
@@ -25,6 +26,7 @@ function ListsMenu() {
     null as null | string,
   )
   const isLightTheme = useContext(ThemeContext)
+  const isNarrowScreen = useContext(SizeContext)
   const storedLists = useTypedSelector((state) => state.lists.lists)
   const [newListName, setNewListName] = useState('')
   const [listNames, setListNames] = useState(['add'])
@@ -38,7 +40,7 @@ function ListsMenu() {
     setListNames(['add', ...Object.keys(storedLists)])
   }, [storedLists])
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const items: { key: string; label: JSX.Element }[] = listNames.map(
       (item) => {
         const obj = { key: item, label: <div></div> }
@@ -152,16 +154,91 @@ function ListsMenu() {
           setClickedDeleteList(null)
         }}
       />
-      <Sider
-        theme={isLightTheme ? 'light' : 'dark'}
-        style={{ paddingTop: '15px', minHeight: 'calc(100vh - 64px)' }}
-      >
-        <Menu
-          theme={isLightTheme ? 'light' : 'dark'}
-          items={menuItems}
-          selectedKeys={listname ? [listname] : []}
-        ></Menu>
-      </Sider>
+      {!isNarrowScreen && (
+        <Sider theme={isLightTheme ? 'light' : 'dark'} className="lists-sider">
+          <Menu
+            theme={isLightTheme ? 'light' : 'dark'}
+            items={menuItems}
+            selectedKeys={listname ? [listname] : []}
+          ></Menu>
+        </Sider>
+      )}
+      {isNarrowScreen && (
+        <Header
+          style={{
+            width: '100vw',
+            display: 'flex',
+            flexWrap: 'wrap',
+            columnGap: '20px',
+            alignItems: 'center',
+            height: 'fit-content',
+            padding: '15px',
+            backgroundColor: isLightTheme
+              ? 'rgba(255, 255, 255, 0.65)'
+              : '#001529',
+          }}
+        >
+          <label>
+            Choose the list:
+            <Select
+              style={{ marginLeft: '10px', minWidth: '100px' }}
+              value={listname}
+              onChange={(value) => {
+                navigate('/lists/' + value)
+              }}
+              options={Object.keys(storedLists).map((list) => ({
+                value: list,
+                key: list,
+                label: list,
+              }))}
+            />
+          </label>
+          <Tooltip open={isNewNameInvalid} title={warningMessage}>
+            <Input.Search
+              style={{ maxWidth: '170px' }}
+              placeholder="Create new list"
+              title="create new list"
+              enterButton="+"
+              value={newListName}
+              onChange={(e) => {
+                const { value } = e.target
+                const isValid = /^[a-zA-Z0-9 ]*$/.test(value)
+                if (isValid) {
+                  setNewListName(value)
+                  setIsNewNameInvalid(false)
+                } else {
+                  setIsNewNameInvalid(true)
+                  setWarningMessage('a-z A-Z 0-9 symbols only')
+                  setTimeout(() => setIsNewNameInvalid(false), 2000)
+                }
+              }}
+              onSearch={() => {
+                const trimmedName = newListName.trim()
+                const verification = verifyNewListName(trimmedName, listNames)
+                if (verification.isValid) {
+                  setIsNewNameInvalid(false)
+                  setListNames([...listNames].splice(0, 1, 'add', trimmedName))
+                  dispatch(postNewList(trimmedName))
+                  navigate('/lists/' + trimmedName)
+                } else {
+                  setIsNewNameInvalid(true)
+                  setWarningMessage(verification.message)
+                }
+              }}
+            />
+          </Tooltip>
+          {listname && (
+            <Button
+              onClick={() => {
+                setClickedDeleteList(listname)
+                setIsModalOpen(true)
+              }}
+            >
+              Delete list
+            </Button>
+          )}
+        </Header>
+      )}
     </>
   )
 }
diff --git a/src/Pages/ListsPage/ListsPage.tsx b/src/Pages/ListsPage/ListsPage.tsx
index 51a9cbb..e29149d 100644
--- a/src/Pages/ListsPage/ListsPage.tsx
+++ b/src/Pages/ListsPage/ListsPage.tsx
@@ -3,15 +3,7 @@ import ListsMenu from './ListsMenu'
 
 export function ListsPage() {
   return (
-    <div
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'start',
-        display: 'flex',
-        width: '100%',
-      }}
-    >
+    <div className="lists-page">
       <ListsMenu />
       <ListsContent />
     </div>
diff --git a/src/Pages/RandomAnimePage/RandomAnimePage.tsx b/src/Pages/RandomAnimePage/RandomAnimePage.tsx
index 3cc7bb2..0a427fc 100644
--- a/src/Pages/RandomAnimePage/RandomAnimePage.tsx
+++ b/src/Pages/RandomAnimePage/RandomAnimePage.tsx
@@ -11,7 +11,6 @@ import {
 } from '../../components'
 import { DispatchType } from '../../types'
 import { requestRandomPageData } from '../../redux/slices/animePage/thunk'
-//import { fetchAnimePageRequest } from '../../redux/slices'
 import { useTypedSelector } from '../../hooks'
 
 export function RandomAnimePage() {
@@ -24,10 +23,6 @@ export function RandomAnimePage() {
 
   useEffect(() => {
     dispatch(requestRandomPageData())
-
-    // return () => {
-    //   dispatch(fetchAnimePageRequest())
-    // }
   }, [dispatch])
 
   return (
diff --git a/src/Pages/SearchPage/SearchContent.tsx b/src/Pages/SearchPage/SearchContent.tsx
index 79f6ada..8cf1dc5 100644
--- a/src/Pages/SearchPage/SearchContent.tsx
+++ b/src/Pages/SearchPage/SearchContent.tsx
@@ -75,7 +75,13 @@ function SearchContent() {
 
   return (
     <Content className="content-container">
-      <Flex vertical={true} justify="center" align="center" gap="middle">
+      <Flex
+        vertical={true}
+        justify="center"
+        align="center"
+        gap="middle"
+        style={{ width: 'fit-content' }}
+      >
         <CaseComponent
           isError={isError}
           isSpinnerActive={isSpinnerActive}
@@ -85,7 +91,7 @@ function SearchContent() {
           emptyElement={<ContentEmpty type="byFilters" />}
         >
           {searchedAnimes && (
-            <Flex wrap="wrap" justify="center" align="center" gap="middle">
+            <div className="content-wrap">
               {searchedAnimes.map((anime) => (
                 <AnimeCard
                   key={anime.id}
@@ -93,7 +99,7 @@ function SearchContent() {
                   isDeletable={false}
                 />
               ))}
-            </Flex>
+            </div>
           )}
           <Pagination
             showSizeChanger={false}
diff --git a/src/Pages/SearchPage/SearchForm.tsx b/src/Pages/SearchPage/SearchForm.tsx
index e936d61..6530e6f 100644
--- a/src/Pages/SearchPage/SearchForm.tsx
+++ b/src/Pages/SearchPage/SearchForm.tsx
@@ -1,13 +1,13 @@
 import Form from 'antd/es/form/Form'
 import FormItem from 'antd/es/form/FormItem'
-import { useContext, useMemo, useState, useEffect } from 'react'
-import { useLocation, useNavigate } from 'react-router'
 import { Button, Switch, Input, Select } from 'antd'
 import {
   ArrowDownOutlined,
   ArrowUpOutlined,
   SearchOutlined,
 } from '@ant-design/icons'
+import { useContext, useMemo, useState, useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router'
 
 import { ThemeContext, initialSearchFormData, ratings } from '../../shared'
 import { FiltersType } from '../../types'
@@ -32,15 +32,23 @@ function SearchForm() {
   const isLightTheme = useContext(ThemeContext)
   const genres = useTypedSelector((state) => state.genres.genres)
   const navigate = useNavigate()
+  const [buttonText, setButtonText] = useState('Hide filters')
+  const [isFormOpen, setIsFormOpen] = useState(true)
 
   useEffect(() => {
     setFormObj(urlFormData)
   }, [urlFormData])
 
   return (
-    <aside
+    <div
       className={
-        isLightTheme ? 'search-sider' : 'search-sider search-sider-dark'
+        isLightTheme
+          ? isFormOpen
+            ? 'search-sider'
+            : 'search-sider search-sider-closed'
+          : isFormOpen
+            ? 'search-sider search-sider-dark'
+            : 'search-sider search-sider-closed search-sider-dark'
       }
     >
       <Form
@@ -140,7 +148,18 @@ function SearchForm() {
           Clear filters
         </Button>
       </Form>
-    </aside>
+      <button
+        className="showhide-button"
+        onClick={() => {
+          setButtonText(
+            buttonText === 'Hide filters' ? 'Show filters' : 'Hide filters',
+          )
+          setIsFormOpen(isFormOpen ? false : true)
+        }}
+      >
+        {buttonText}
+      </button>
+    </div>
   )
 }
 
diff --git a/src/Pages/SearchPage/SearchPage.tsx b/src/Pages/SearchPage/SearchPage.tsx
index 9cd0d4a..6c2d0c8 100644
--- a/src/Pages/SearchPage/SearchPage.tsx
+++ b/src/Pages/SearchPage/SearchPage.tsx
@@ -3,14 +3,7 @@ import SearchContent from './SearchContent'
 
 export function SearchPage() {
   return (
-    <div
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'start',
-        display: 'flex',
-      }}
-    >
+    <div className="search-page">
       <SearchForm />
       <SearchContent />
     </div>
diff --git a/src/api/parsers/parseAnimeResponseItem.ts b/src/api/parsers/parseAnimeResponseItem.ts
index e82b98a..8e8822e 100644
--- a/src/api/parsers/parseAnimeResponseItem.ts
+++ b/src/api/parsers/parseAnimeResponseItem.ts
@@ -9,6 +9,6 @@ export const parseAnimeResponseItem = (
   genres: item.genres.map((genre: { name: string; mal_id: number }) => {
     return { name: genre.name, id: genre.mal_id }
   }),
-  img: item.images.jpg.image_url,
+  img: item.images.jpg.large_image_url,
   rating: item.rating,
 })
diff --git a/src/api/requests/getDupesReplacement.ts b/src/api/requests/getDupesReplacement.ts
index 4fe54cd..6161f90 100644
--- a/src/api/requests/getDupesReplacement.ts
+++ b/src/api/requests/getDupesReplacement.ts
@@ -1,6 +1,5 @@
 import { AnimeBaseResponseType } from '../../types'
-import { filterAnimeDupes } from '../../utils'
-import { setPageNumToUrl } from '../../utils/urlCreators/setPageNumToUrl'
+import { filterAnimeDupes, setPageNumToUrl } from '../../utils'
 import { getAnimeData } from './getAnimeData'
 
 export async function getDupesReplacement(
diff --git a/src/components/AddToListSelect.tsx b/src/components/AddToListSelect.tsx
index 37176f9..d8637a8 100644
--- a/src/components/AddToListSelect.tsx
+++ b/src/components/AddToListSelect.tsx
@@ -1,9 +1,10 @@
 import { PlusOutlined } from '@ant-design/icons'
 import { Button, Divider, Input, Select, Space, Tooltip } from 'antd'
 import { ChangeEvent, useRef, useState, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
 import { verifyNewListName } from '../utils'
 import { useTypedSelector } from '../hooks'
-import { useDispatch } from 'react-redux'
 import { DispatchType } from '../types'
 import {
   deleteItemFromList,
diff --git a/src/components/AnimeCard.tsx b/src/components/AnimeCard.tsx
index bb41f20..d6c2ae2 100644
--- a/src/components/AnimeCard.tsx
+++ b/src/components/AnimeCard.tsx
@@ -64,7 +64,7 @@ function AnimeCard({ cardData, isDeletable }: Props) {
             className="poster"
             alt={cardData.titleEnglish}
             src={cardData.img}
-            style={{ objectFit: 'cover' }}
+            style={{ width: 'inherit' }}
           />
         </div>
       }
diff --git a/src/components/ContentEmpty.tsx b/src/components/ContentEmpty.tsx
index 611be0a..9f1154c 100644
--- a/src/components/ContentEmpty.tsx
+++ b/src/components/ContentEmpty.tsx
@@ -11,7 +11,7 @@ function ContentEmpty({
       message = "Sorry, there're no animes with these parametres"
       break
     case 'byId':
-      message = "Sorry, anime with this ID doesn't exist"
+      message = "This page doesn't exist"
       break
     case 'byList':
       message = 'This list is empty'
diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts
index 7299c5b..9a32f11 100644
--- a/src/redux/reducer.ts
+++ b/src/redux/reducer.ts
@@ -1,4 +1,5 @@
 import { combineReducers } from 'redux'
+
 import {
   genresReducer,
   listsReducer,
diff --git a/src/redux/slices/lists/thunk/requestListAnimeData.ts b/src/redux/slices/lists/thunk/requestListAnimeData.ts
index f4fc27a..f52caca 100644
--- a/src/redux/slices/lists/thunk/requestListAnimeData.ts
+++ b/src/redux/slices/lists/thunk/requestListAnimeData.ts
@@ -1,4 +1,6 @@
 import { Dispatch } from 'redux'
+import { ThunkAction } from 'redux-thunk'
+
 import {
   fetchListAnimesEmpty,
   fetchListAnimesFailure,
@@ -12,7 +14,6 @@ import {
 } from '../../../../types'
 import { createGetIdAnimeUrl } from '../../../../utils'
 import { getAnimePageData, parseAnimeResponseItem } from '../../../../api'
-import { ThunkAction } from 'redux-thunk'
 import { ListsActionType } from '../actions/actions'
 
 function requestListAnimeData(
diff --git a/src/redux/slices/searchCards/thunk/requestSearchCardsData.ts b/src/redux/slices/searchCards/thunk/requestSearchCardsData.ts
index a4f70a2..94f027b 100644
--- a/src/redux/slices/searchCards/thunk/requestSearchCardsData.ts
+++ b/src/redux/slices/searchCards/thunk/requestSearchCardsData.ts
@@ -1,4 +1,5 @@
 import { ThunkAction } from 'redux-thunk'
+
 import { SearchCardsStateType } from '../../../../types'
 import { createAdvancedSearchAnimeUrl } from '../../../../utils'
 import requestCardsData from '../../../thunk/requestCardsData'
diff --git a/src/shared/SizeContext.ts b/src/shared/SizeContext.ts
new file mode 100644
index 0000000..df9a9aa
--- /dev/null
+++ b/src/shared/SizeContext.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const SizeContext = createContext<boolean>(false)
diff --git a/src/shared/index.ts b/src/shared/index.ts
index 0180ae3..98f7f06 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -1,3 +1,4 @@
 export * from './ratings'
 export { ThemeContext } from './ThemeContext'
+export { SizeContext } from './SizeContext'
 export { initialSearchFormData } from './initialSearchFormData'
diff --git a/src/utils/createNavItems.tsx b/src/utils/createNavItems.tsx
index c627e0d..70407ec 100644
--- a/src/utils/createNavItems.tsx
+++ b/src/utils/createNavItems.tsx
@@ -1,26 +1,46 @@
+import { MenuOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom'
 
-export function createNavItems(onHomePageClick: () => void) {
-  return [
-    {
-      key: '/',
-      label: (
-        <Link to="/" onClick={onHomePageClick}>
-          Home
-        </Link>
-      ),
-    },
-    {
-      key: '/search',
-      label: <Link to="/search">Search</Link>,
-    },
-    {
-      key: '/lists',
-      label: <Link to="/lists">My Lists</Link>,
-    },
-    {
-      key: '/random',
-      label: <Link to="/random">Random</Link>,
-    },
-  ]
-}
+export const navItems = [
+  {
+    key: '/',
+    label: <Link to="/">Home</Link>,
+  },
+  {
+    key: '/search',
+    label: <Link to="/search">Search</Link>,
+  },
+  {
+    key: '/lists',
+    label: <Link to="/lists">My Lists</Link>,
+  },
+  {
+    key: '/random',
+    label: <Link to="/random">Random</Link>,
+  },
+]
+
+export const burgerNavItems = [
+  {
+    key: 'nav',
+    label: <MenuOutlined className="burger-menu" />,
+    children: [
+      {
+        key: '/',
+        label: <Link to="/">Home</Link>,
+      },
+      {
+        key: '/search',
+        label: <Link to="/search">Search</Link>,
+      },
+      {
+        key: '/lists',
+        label: <Link to="/lists">My Lists</Link>,
+      },
+      {
+        key: '/random',
+        label: <Link to="/random">Random</Link>,
+      },
+    ],
+  },
+]
diff --git a/src/utils/determineCardsAmountByViewport.ts b/src/utils/determineCardsAmountByViewport.ts
index fe74017..1b83218 100644
--- a/src/utils/determineCardsAmountByViewport.ts
+++ b/src/utils/determineCardsAmountByViewport.ts
@@ -1,15 +1,13 @@
 export function determineCardsAmountByViewport() {
-  if (window.matchMedia('(min-width: 1767px)').matches) {
+  if (window.matchMedia('(min-width: 1841px)').matches) {
     return 14
-  } else if (window.matchMedia('(min-width: 1542px)').matches) {
+  } else if (window.matchMedia('(min-width: 1581px)').matches) {
     return 12
-  } else if (window.matchMedia('(min-width: 1317px)').matches) {
+  } else if (window.matchMedia('(min-width: 1401px)').matches) {
     return 10
-  } else if (window.matchMedia('(min-width: 1092px)').matches) {
+  } else if (window.matchMedia('(min-width: 1131px)').matches) {
     return 8
-  } else if (window.matchMedia('(min-width: 867px)').matches) {
-    return 6
   } else {
-    return 4
+    return 6
   }
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 20883fe..2308b29 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,7 +1,6 @@
 export * from './urlCreators'
 
 export { createItemsObjForAnimePage } from './createItemsObjForAnimePage'
-export { createNavItems } from './createNavItems'
 export { determineCardsAmountByViewport } from './determineCardsAmountByViewport'
 export { filterAnimeDupes } from './filterAnimeDupes'
 export { getStatusForBadge } from './getStatusForBadge'
diff --git a/src/utils/urlCreators/index.ts b/src/utils/urlCreators/index.ts
index 9eac625..9d58074 100644
--- a/src/utils/urlCreators/index.ts
+++ b/src/utils/urlCreators/index.ts
@@ -2,3 +2,4 @@ export { createListShareUrl } from './createListShareUrl'
 export { createAdvancedSearchAnimeUrl } from './createAdvancedSearchAnimeUrl'
 export { createGetIdAnimeUrl } from './createGetIdAnimeUrl'
 export { createGetTopAnimeUrl } from './createGetTopAnimeUrl'
+export { setPageNumToUrl } from './setPageNumToUrl'