diff --git a/.gitignore b/.gitignore
index cbd3e69..4888e2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@
 /public/*.json
 /public/*.ico
 ecosystem.config.js
+/src/pages/extra-pages/pages/*/
 
 # testing
 /coverage
diff --git a/src/App.js b/src/App.js
index 358973f..c857592 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,6 +11,7 @@ import InitialLoading from './components/app/pre-screens'
 import SSSPage from './pages/sss/index'
 import FourOhFourPage from './components/404/404'
 import EkipAlimlariPage from './pages/ekip-alimlari/index'
+import ExtraPagesList from './pages/extra-pages/index'
 
 const IndexPage = lazy(() => import('./pages/index/index'))
 const SearchPage = lazy(() => import('./pages/ara/index'))
@@ -48,6 +49,9 @@ export default function App() {
                   <Route path="/sss" exact component={SSSPage} />
                   <Route path="/ekip-alimlari" exact component={EkipAlimlariPage} />
                   <Route path="/kullanici/kayit-tamamla/:hash" exact component={CompleteRegistrationPage} />
+                  {ExtraPagesList.length ? ExtraPagesList.map(({ PageUrl, PageComponent }) => (
+                    <Route path={PageUrl} exact component={PageComponent} />
+                  )) : ""}
                   <Route component={FourOhFourPage} />
                 </Switch>
               </Suspense>
diff --git a/src/components/ceviriler/components.js b/src/components/ceviriler/components.js
index 6d8a026..55de73c 100644
--- a/src/components/ceviriler/components.js
+++ b/src/components/ceviriler/components.js
@@ -67,7 +67,6 @@ const useStyles = makeStyles((theme) => ({
         },
     },
     BackgroundImageOverlay: {
-        background: theme.palette.background.default,
         //eslint-disable-next-line
         background: `linear-gradient(90deg, ${theme.palette.background.default} 0%, ${theme.palette.background.default} 35%, ${fade(theme.palette.background.default, 0)} 50%)`,
         position: "absolute",
diff --git a/src/components/header/header.js b/src/components/header/header.js
index ada93cc..7a06e3f 100644
--- a/src/components/header/header.js
+++ b/src/components/header/header.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Link, NavLink } from 'react-router-dom'
-import { useGlobal, useDispatch } from 'reactn'
+import { useGlobal, useDispatch, useEffect } from 'reactn'
 import Footer from '../footer/footer'
 
 import clsx from 'clsx'
@@ -19,6 +19,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 
 import { indexPage, searchPage, faqPage, recPage, adminPage } from '../../config/front-routes'
 import { fullLogo, fullLogoGif, fullLogoDark, fullLogoDarkGif } from '../../config/theming/images'
+import ExtraPagesList from '../../pages/extra-pages/index'
 import SecondMenuItems from '../../config/drawer_items'
 
 const drawerWidth = 260;
@@ -37,7 +38,7 @@ const useStyles = makeStyles(theme => ({
         marginLeft: drawerWidth,
         width: 0,
         [theme.breakpoints.up('sm')]: {
-            width: `calc(100% - ${drawerWidth}px)`,
+            width: `100%`,
         }
     },
     menuButton: {
@@ -70,7 +71,7 @@ const useStyles = makeStyles(theme => ({
         flexGrow: 1
     },
     logo: {
-        height: "40px"
+        height: "46px"
     },
     ListItem: {
         width: "100vw",
@@ -198,7 +199,7 @@ export default function MiniDrawer() {
     const profileMenu = Boolean(anchorEl);
 
     const [open, setOpen] = React.useState(false);
-    const [menuItems] = React.useState([
+    const [menuItems, setMenuItems] = React.useState([
         {
             text: "Ana sayfa",
             shortText: "Ana Sayfa",
@@ -217,7 +218,7 @@ export default function MiniDrawer() {
             text: "Sıkça Sorulan Sorular",
             shortText: "SSS",
             link: faqPage,
-            show: process.env.REACT_APP_SSS_PAGE === true ? true : false,
+            show: process.env.REACT_APP_SSS_PAGE === "true" ? true : false,
             icon: <InfoIcon />
         },
         {
@@ -227,6 +228,29 @@ export default function MiniDrawer() {
             icon: <h2>EA</h2>
         }
     ])
+
+    useEffect(() => {
+        if (ExtraPagesList.length) {
+            const newMenus = []
+
+            ExtraPagesList.map(({ PageUrl, PageTitle, PageShortTitle, PageIcon }) => {
+                newMenus.push({
+                    text: PageTitle,
+                    shortText: PageShortTitle ? PageShortTitle : "",
+                    link: PageUrl,
+                    icon: PageIcon ? PageIcon : "",
+                    show: true
+                })
+            })
+
+            setMenuItems(state => [
+                ...state, ...newMenus
+            ])
+        }
+    }, [])
+
+    console.log(menuItems)
+
     const [menuItems2] = React.useState(SecondMenuItems)
 
     function handleMenu(event) {
@@ -247,8 +271,8 @@ export default function MiniDrawer() {
         setShowModal(type)
     }
 
-    const handleDrawerOpen = () => {
-        setOpen(true);
+    const handleDrawerState = () => {
+        setOpen(state => !state);
     };
 
     const handleDrawerClose = () => {
@@ -265,7 +289,7 @@ export default function MiniDrawer() {
                 </div>
                 <Divider />
                 <List>
-                    {menuItems.map((item, index) => item.show ?
+                    {menuItems.map(item => item.show ?
                         (
                             <NavLink exact to={item.link} onClick={handleDrawerClose} activeClassName={classes.Active} key={item.text}>
                                 <ListItem className={classes.ListItem} button>
@@ -285,7 +309,7 @@ export default function MiniDrawer() {
                     menuItems2.length ?
                         <>
                             <List>
-                                {menuItems2.map((item, index) => (
+                                {menuItems2.map(item => (
                                     <a href={item.link} target="_blank" rel="noopener noreferrer" className={classes.secondary} key={item.title}>
                                         <ListItem className={classes.ListItem} button style={{ backgroundColor: "inherit" }}>
                                             <Box className={classes.iconContainer}>
@@ -324,17 +348,15 @@ export default function MiniDrawer() {
                 <Toolbar>
                     <IconButton
                         color="inherit"
-                        aria-label="Open drawer"
-                        onClick={handleDrawerOpen}
+                        aria-label="Open/close drawer"
+                        onClick={handleDrawerState}
                         edge="start"
-                        className={clsx(classes.menuButton, {
-                            [classes.hide]: open,
-                        })}
+                        className={classes.menuButton}
                     >
                         <MenuIcon />
                     </IconButton>
                     <div className={classes.logoContainer}>
-                        <Link to={indexPage}>
+                        <Link to={indexPage} style={{ display: "flex" }}>
                             {
                                 process.env.REACT_APP_HEADER_LOGO_TYPE === "gif" && fullLogoGif !== null && fullLogoDarkGif !== null ?
                                     <img title="Site logo" loading="lazy" className={classes.logo} src={usertheme === "dark" ? fullLogoGif : fullLogoDarkGif} alt="Site Logo" />
diff --git a/src/components/index/featured/featured.js b/src/components/index/featured/featured.js
index 0c5f8eb..9e7c0b7 100644
--- a/src/components/index/featured/featured.js
+++ b/src/components/index/featured/featured.js
@@ -63,7 +63,6 @@ const useStyles = makeStyles(theme => ({
     },
     LogoContainer: {
         maxWidth: 400,
-        maxHeight: 200,
         width: "100%"
     },
     GenresContainer: {
diff --git a/src/components/index/latest/latestanimanga.js b/src/components/index/latest/latestanimanga.js
index 79f27e5..da6978e 100644
--- a/src/components/index/latest/latestanimanga.js
+++ b/src/components/index/latest/latestanimanga.js
@@ -121,7 +121,7 @@ const useStyles = makeStyles(theme => ({
 
 export const LoadingDivAniManga = (key) => {
     return (
-        <Grid key={key} item xs={6} sm={3} md={2} lg={2} xl={1}>
+        <Grid key={key} item xs={4} sm={3} md={2} lg={2} xl={1}>
             <Skeleton width="100%" style={{ paddingBottom: "140%" }} variant="rect" />
         </Grid>
     )
diff --git a/src/components/index/latest/latestmangaepisode.js b/src/components/index/latest/latestmangaepisode.js
index 9317631..0bfcd36 100644
--- a/src/components/index/latest/latestmangaepisode.js
+++ b/src/components/index/latest/latestmangaepisode.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import propTypes from 'prop-types'
 import { Link } from 'react-router-dom'
-import { episodePage, mangaEpisodePage } from '../../../config/front-routes'
+import { mangaEpisodePage } from '../../../config/front-routes'
 
 import { Grid, Typography, makeStyles } from '@material-ui/core'
 import { grey } from '@material-ui/core/colors'
diff --git a/src/config/episode-link-overrides.js b/src/config/episode-link-overrides.js
index b2aab8c..601d873 100644
--- a/src/config/episode-link-overrides.js
+++ b/src/config/episode-link-overrides.js
@@ -1,7 +1,7 @@
 function getParameterByName(name, url) {
     if (!url) url = window.location.href;
     //eslint-disable-next-line
-    name = name.replace(/[\[\]]/g, '\\$&');
+    name = name.replace(/[\[\]]/g, '\\$&'); // lgtm [js/incomplete-sanitization]
     var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
         results = regex.exec(url);
     if (!results) return null;
diff --git a/src/config/theming/borders.js b/src/config/theming/borders.js
deleted file mode 100644
index 9f0c51f..0000000
--- a/src/config/theming/borders.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const borders = [
-    ".10rem", //Index general
-    ".75rem"
-]
-
-export default borders
\ No newline at end of file
diff --git a/src/config/theming/index.js b/src/config/theming/index.js
index 7874554..b811bd7 100644
--- a/src/config/theming/index.js
+++ b/src/config/theming/index.js
@@ -1,4 +1,4 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
 import merge from 'lodash-es/merge'
 
 import darkTheme from './dark/index'
@@ -80,7 +80,15 @@ const general = {
         defaultMarginMobile: "80px 12px 24px",
         defaultMarginOverride: "-32px -56px -24px",
         defaultMarginMobileOverride: "-24px -12px -24px",
-        defaultBorderRadius: 4
+        defaultBorderRadius: 4,
+        MuiToolbar: {
+            gutters: {
+                ['@media (min-width:600px)']: {
+                    paddingLeft: 29
+                }
+            }
+        }
+
     },
     transitions: {
         duration: {
@@ -97,7 +105,7 @@ export default function getTheme(type) {
     switch (type) {
         case type: {
             const theme = merge(general, type === "dark" ? darkTheme : lightTheme)
-            return createMuiTheme(theme)
+            return responsiveFontSizes(createMuiTheme(theme))
         }
         default:
             return false
diff --git a/src/config/theming/shadows.js b/src/config/theming/shadows.js
deleted file mode 100644
index ad831f0..0000000
--- a/src/config/theming/shadows.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const text_shadows = [
-    "0px 0px 6px rgba(0, 0, 0, 1)"
-]
-
-export default { text_shadows }
\ No newline at end of file
diff --git a/src/pages/ara/index.js b/src/pages/ara/index.js
index a4910dd..15cc57e 100644
--- a/src/pages/ara/index.js
+++ b/src/pages/ara/index.js
@@ -5,13 +5,10 @@ import Metatags from '../../components/helmet/index'
 import TextField from '@material-ui/core/TextField'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import LazyLoad from 'react-lazyload';
 
 import axios from '../../config/axios/axios'
 import { getGenresList, getFullSearchList } from '../../config/api-routes'
 
-import { useTheme } from '@material-ui/styles';
-
 import filter from 'lodash-es/filter'
 import find from 'lodash-es/find'
 import slice from 'lodash-es/slice'
@@ -57,7 +54,6 @@ const searchGenresAPI = async (data, genres) => {
 const searchGenresAPIDebounced = AwesomeDebouncePromise(searchGenresAPI, 500);
 
 export default function SearchPage(props) {
-    const theme = useTheme()
     const classes = useStyles()
 
     const [offset, setOffset] = useState(1)
@@ -316,7 +312,7 @@ export default function SearchPage(props) {
                                 {genreMappedData}
                             </Grid>
                             :
-                            loadingGenre
+                            loadingGenre // lgtm [js/trivial-conditional]
                                 ?
                                 <Box
                                     mt={1}
diff --git a/src/pages/extra-pages/index.js b/src/pages/extra-pages/index.js
new file mode 100644
index 0000000..7293f35
--- /dev/null
+++ b/src/pages/extra-pages/index.js
@@ -0,0 +1,5 @@
+const pages = [
+
+]
+
+export default pages
\ No newline at end of file
diff --git a/src/pages/extra-pages/pages/.gitkeep b/src/pages/extra-pages/pages/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/manga-episode/index.js b/src/pages/manga-episode/index.js
index 67ab593..2b41867 100644
--- a/src/pages/manga-episode/index.js
+++ b/src/pages/manga-episode/index.js
@@ -210,8 +210,8 @@ export default function MangaEpisodePage(props) {
                                             className={classes.MainPageImage}
                                             src={mangaPageImage(mangaData.manga_slug, activeEpisodeData.episode_number, activeEpisodeData.pages[(activePageNumber - 1)].filename)}
                                             alt={`${mangaData.manga_name} ${activeEpisodeData.episode_number}. Bölüm ${activePageNumber}. Sayfa`}
-                                            onLoad={image => {
-                                                handleCenteringPage(image)
+                                            onLoad={_ => {
+                                                handleCenteringPage()
                                             }} />
                                         <div className={classes.ImageOverlayContainer}>
                                             <div
diff --git a/src/pages/sss/index.js b/src/pages/sss/index.js
index 34bc546..e2d2734 100644
--- a/src/pages/sss/index.js
+++ b/src/pages/sss/index.js
@@ -16,7 +16,7 @@ export default function SSSPage() {
     return (
         <>
             {/*Eğer SSS sayfası kapatılmışsa, gelen istekleri ana sayfaya yönlendir*/}
-            {process.env.REACT_APP_SSS_PAGE === true ? "" : <Redirect to="/" />}
+            {process.env.REACT_APP_SSS_PAGE === "true" ? "" : <Redirect to="/" />}
             <Grid container spacing={2}>
                 <Grid item xs={12}>
                     <Box bgcolor="background.paper" boxShadow={2} p={1} textAlign="center">