diff --git a/components/StartPage/Download.js b/components/StartPage/Download.js
index 9654def3..d693eb8e 100644
--- a/components/StartPage/Download.js
+++ b/components/StartPage/Download.js
@@ -86,7 +86,7 @@ function Download({ t, onClose }) {
     <div className="relative flex w-full flex-col text-left">
       <p className="mb-9 hidden md:block">{t('common:Download')}</p>
       <Close
-        className="absolute -top-7 right-0 h-6 w-6 cursor-pointer stroke-black md:hidden"
+        className="absolute -top-16 right-0 h-6 w-6 cursor-pointer stroke-black md:hidden"
         onClick={onClose}
       />
       <div className="flex flex-col gap-6 overflow-y-auto text-base font-medium">
diff --git a/components/StartPage/Feedback.js b/components/StartPage/Feedback.js
index 25aba873..d4a47273 100644
--- a/components/StartPage/Feedback.js
+++ b/components/StartPage/Feedback.js
@@ -9,7 +9,9 @@ import { toast, Toaster } from 'react-hot-toast'
 import ButtonLoading from 'components/ButtonLoading'
 import InputField from 'components/Panel/UI/InputField'
 
-function Feedback({ onClose }) {
+import Close from 'public/icons/close.svg'
+
+function Feedback({ isStartPage, onClose }) {
   const { t } = useTranslation(['start-page', 'projects', 'users', 'common'])
   const [feedback, setFeedback] = useState({ name: '', email: '', message: '' })
   const [isError, setIsError] = useState(false)
@@ -38,6 +40,10 @@ function Feedback({ onClose }) {
         toast.success(t('YourMessageHasBeenSent'))
         setIsError(false)
         setIsSent(true)
+
+        if (isStartPage) {
+          onClose()
+        }
       })
       .catch((err) => {
         console.log({ err })
@@ -49,74 +55,83 @@ function Feedback({ onClose }) {
   }
 
   return (
-    <div className="flex w-full flex-col gap-6 md:gap-0">
-      {isConnectWithUsPage && (
-        <p className="font-semibold md:font-bold">{t('start-page:WriteToUs')}</p>
+    <div className="flex flex-grow items-center" onClick={(e) => e.stopPropagation()}>
+      <Toaster />
+      {isStartPage && (
+        <div
+          className="absolute right-5 top-5 cursor-pointer"
+          onClick={() => {
+            onClose()
+          }}
+        >
+          <Close className="h-6 w-6 text-black" />
+        </div>
       )}
 
-      <div className="flex flex-grow items-center" onClick={(e) => e.stopPropagation()}>
-        <Toaster />
-        {!isSent ? (
-          <form className="flex w-full flex-col space-y-4" onSubmit={handleSubmit}>
-            <InputField
-              name="name"
-              type="text"
-              id="floating_name"
-              label={t('users:YourName')}
-              value={feedback.name}
-              isError={isError && !feedback.name}
-              onChange={handleChange}
-            />
-
-            <InputField
-              name="email"
-              type="email"
-              id="floating_email"
-              label={t('users:Email')}
-              value={feedback.email}
-              isError={isError && !feedback.email}
-              onChange={handleChange}
-            />
-
-            <InputField
-              rows="3"
-              name="message"
-              type="textarea"
-              id="floating_message"
-              label={t('users:Message')}
-              value={feedback.message}
-              isError={isError && !feedback.message}
-              onChange={handleChange}
-              className="mb-3 max-h-40 overflow-auto"
-            />
-
-            <ButtonLoading
-              type="submit"
-              isLoading={isSaving}
-              className={`relative rounded-lg px-5 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
-                isConnectWithUsPage ? 'bg-slate-550' : 'bg-th-primary-100'
-              }`}
-            >
-              {t('users:Send')}
-            </ButtonLoading>
-            <p className="text-center text-sm font-light">
-              {t('users:ConditionOfConsent')}
-            </p>
-          </form>
-        ) : (
-          <div className="w-full text-center">
-            <p>{t('users:YourMessageSentThankYou')}</p>
-            <button
-              className={`mt-14 rounded-lg px-10 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
-                isStartPage ? 'bg-slate-550' : 'bg-th-primary-100'
-              }`}
-              onClick={() => onClose()}
-            >
-              {t('common:Close')}
-            </button>
-          </div>
-        )}
-      </div>
+      {!isSent ? (
+        <form className="flex w-full flex-col space-y-4" onSubmit={handleSubmit}>
+          <InputField
+            name="name"
+            type="text"
+            id="floating_name"
+            label={t('users:YourName')}
+            value={feedback.name}
+            isError={isError && !feedback.name}
+            onChange={handleChange}
+          />
+
+          <InputField
+            name="email"
+            type="email"
+            id="floating_email"
+            label={t('users:Email')}
+            value={feedback.email}
+            isError={isError && !feedback.email}
+            onChange={handleChange}
+          />
+
+          <InputField
+            rows="3"
+            name="message"
+            type="textarea"
+            id="floating_message"
+            label={t('users:Message')}
+            value={feedback.message}
+            isError={isError && !feedback.message}
+            onChange={handleChange}
+            className="mb-3 max-h-40 overflow-auto"
+          />
+
+          <ButtonLoading
+            type="submit"
+            isLoading={isSaving}
+            className={`relative rounded-lg px-5 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
+              isConnectWithUsPage ? 'bg-slate-550' : 'bg-th-primary-100'
+            }`}
+          >
+            {t('users:Send')}
+          </ButtonLoading>
+          <p className="text-center text-sm font-light">
+            {t('users:ConditionOfConsent')}
+          </p>
+        </form>
+      ) : (
+        <div className="w-full text-center">
+          <p>{t('users:YourMessageSentThankYou')}</p>
+          <button
+            className={`mt-14 rounded-lg px-10 py-4 text-center text-sm font-medium text-th-text-secondary-100 md:text-base ${
+              isStartPage ? 'bg-slate-550' : 'bg-th-primary-100'
+            }`}
+            onClick={() => {
+              if (!isStartPage) {
+                onClose()
+              }
+            }}
+          >
+            {t('common:Close')}
+          </button>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/StartPage/Logo.js b/components/StartPage/Logo.js
index 7288d6aa..7140179d 100644
--- a/components/StartPage/Logo.js
+++ b/components/StartPage/Logo.js
@@ -1,14 +1,34 @@
+import { useState } from 'react'
+
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
+import Close from 'public/icons/close.svg'
 import GlokasLogo from 'public/icons/glokas-logo.svg'
 
-function Logo({ t }) {
+function Logo({ isMobilePage, t }) {
   const { locale } = useRouter()
   const isRuLocale = locale === 'ru'
+
+  const [isOpen, setIsOpen] = useState(true)
+
+  const handleClose = () => {
+    setIsOpen(false)
+  }
+
+  if (!isOpen) return null
+
   return (
     <div className="flex w-full flex-col gap-6">
-      <p className="mr-10 font-semibold md:font-bold">{t('LogoHeader')}</p>
+      <div className="relative">
+        <p className="mr-10 font-semibold md:font-bold">{t('LogoHeader')}</p>
+        {isMobilePage && (
+          <Close
+            onClick={handleClose}
+            className="absolute right-0 top-0 h-6 w-6 cursor-pointer"
+          />
+        )}
+      </div>
       <div
         className={`flex w-full flex-col gap-6 overflow-auto pr-5 text-sm md:${
           isRuLocale ? 'text-sm' : 'text-base'
diff --git a/components/StartPage/OneSection.js b/components/StartPage/OneSection.js
new file mode 100644
index 00000000..f1680aa9
--- /dev/null
+++ b/components/StartPage/OneSection.js
@@ -0,0 +1,86 @@
+import { useRouter } from 'next/router'
+
+import Feedback from './Feedback'
+import Logo from './Logo'
+import Partners from './Partners'
+
+import Close from 'public/icons/close.svg'
+
+function OneSection({ showSections, toggleSection, label, logo, t }) {
+  const router = useRouter()
+  const onClose = () => {
+    router.replace('/', undefined, { shallow: true, scroll: false })
+    toggleSection({ partners: false, connect: false })
+  }
+
+  const handleSectionClick = async (section) => {
+    const sectionKey =
+      section === 'connect-with-us' ? 'connect' : section === 'about' ? 'logo' : section
+
+    if (showSections[sectionKey]) {
+      toggleSection({ [sectionKey]: false })
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+    } else {
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+      toggleSection({ [sectionKey]: true })
+      await router.replace(`/${section}`, undefined, { shallow: true, scroll: false })
+    }
+  }
+
+  const renderSectionContent = () => {
+    if (label === t('Partners')) {
+      return (
+        <div
+          onClick={() => handleSectionClick('partners')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 text-center ${
+            showSections.partners ? 'col-span-2' : ''
+          }`}
+        >
+          {!showSections.partners && (
+            <p className={`${showSections.partners ? 'font-semibold' : ''}`}>{label}</p>
+          )}
+          {showSections.partners && <Partners t={t} onClose={onClose} />}
+        </div>
+      )
+    }
+
+    if (label === t('WriteToUs')) {
+      return (
+        <div
+          onClick={() => handleSectionClick('connect-with-us')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 text-center ${
+            showSections.connect ? 'col-span-2' : ''
+          }`}
+        >
+          <p className={`${showSections.connect ? 'pb-10 font-semibold' : ''}`}>
+            {label}
+          </p>
+
+          {showSections.connect && <Feedback isStartPage={true} onClose={onClose} />}
+        </div>
+      )
+    }
+
+    if (label === 'logo') {
+      return (
+        <div
+          onClick={() => handleSectionClick('about')}
+          className={`flex cursor-pointer justify-center rounded-xl bg-th-secondary-10 p-5`}
+        >
+          {!showSections.logo && <p>{logo}</p>}
+          {showSections.logo && <Logo t={t} isMobilePage={true} onClose={onClose} />}
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  return (
+    <div className="relative rounded-xl bg-th-secondary-10 p-0">
+      {renderSectionContent()}
+    </div>
+  )
+}
+
+export default OneSection
diff --git a/components/StartPage/Partners.js b/components/StartPage/Partners.js
index f1d11851..cf2e660b 100644
--- a/components/StartPage/Partners.js
+++ b/components/StartPage/Partners.js
@@ -1,6 +1,8 @@
 import Image from 'next/image'
 import Link from 'next/link'
 
+import Close from 'public/icons/close.svg'
+
 const partners = [
   {
     name: 'Unfolding Word',
@@ -32,9 +34,14 @@ const partners = [
   },
 ]
 
-function Partners({ t }) {
+function Partners({ t, onClose }) {
   return (
-    <div className="flex w-full flex-col gap-6 md:gap-14">
+    <div className="relative flex w-full flex-col gap-6 md:gap-14">
+      <Close
+        className="absolute right-0 top-0 h-6 w-6 cursor-pointer stroke-black md:hidden"
+        onClick={onClose}
+      />
+
       <p className="font-semibold md:font-bold">{t('Partners')}</p>
       <div className="grid grid-cols-2 gap-3">
         {partners.map((partner) => (
diff --git a/components/StartPage/SectionBlock.js b/components/StartPage/SectionBlock.js
deleted file mode 100644
index 602e7711..00000000
--- a/components/StartPage/SectionBlock.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useRouter } from 'next/router'
-
-import Close from 'public/icons/close.svg'
-
-function SectionBlock({
-  sectionKey,
-  label,
-  content,
-  showSection,
-  toggleSection,
-  isLogo = false,
-}) {
-  const router = useRouter()
-
-  const updateRoute = async () => {
-    await router.replace('/', undefined, { shallow: true, scroll: false })
-  }
-
-  const handleSectionToggle = async () => {
-    await updateRoute()
-    toggleSection(sectionKey)
-  }
-
-  const handleCloseClick = async (e) => {
-    e.stopPropagation()
-    await updateRoute()
-  }
-
-  return (
-    <div
-      className={`relative rounded-xl bg-th-secondary-10 p-5 ${
-        isLogo ? 'flex justify-center' : 'text-center'
-      }`}
-      // onClick={handleSectionToggle}
-    >
-      {showSection ? content : isLogo ? label : <p>{label}</p>}
-      <Close
-        onClick={handleCloseClick}
-        className={`absolute right-5 top-5 h-6 w-6 cursor-pointer stroke-black ${
-          showSection ? '' : 'hidden'
-        }`}
-      />
-    </div>
-  )
-}
-
-export default SectionBlock
diff --git a/components/StartPage/SectionContainer.js b/components/StartPage/SectionContainer.js
index 3b335a92..c600b16b 100644
--- a/components/StartPage/SectionContainer.js
+++ b/components/StartPage/SectionContainer.js
@@ -1,4 +1,3 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import AboutVersion from 'components/AboutVersion'
@@ -12,14 +11,23 @@ function SectionContainer({ showSections, toggleSection, t }) {
     router.replace('/', undefined, { shallow: true, scroll: false })
     toggleSection({ download: false, updates: false })
   }
+
+  const handleSectionClick = async (section) => {
+    if (!showSections[section]) {
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+    }
+
+    toggleSection({ [section]: !showSections[section] })
+
+    await router.replace(`/${section}`, undefined, { shallow: true, scroll: false })
+  }
+
   return (
     <div className="grid grid-cols-2 gap-5 text-center">
       {!showSections.updates && (
-        <Link
-          href="/download"
-          shallow
-          scroll={false}
-          className={`rounded-xl bg-th-secondary-10 p-5 ${
+        <div
+          onClick={() => handleSectionClick('download')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 ${
             showSections.download ? 'col-span-2' : ''
           }`}
         >
@@ -27,15 +35,13 @@ function SectionContainer({ showSections, toggleSection, t }) {
             {t('common:Download')}
           </p>
           {showSections.download && <Download t={t} onClose={onClose} />}
-        </Link>
+        </div>
       )}
 
       {!showSections.download && (
-        <Link
-          href="/updates"
-          shallow
-          scroll={false}
-          className={`rounded-xl bg-th-secondary-10 p-5 ${
+        <div
+          onClick={() => handleSectionClick('updates')}
+          className={`cursor-pointer rounded-xl bg-th-secondary-10 p-5 ${
             showSections.updates ? 'col-span-2' : ''
           }`}
         >
@@ -44,7 +50,7 @@ function SectionContainer({ showSections, toggleSection, t }) {
           ) : (
             <AboutVersion isStartPage={true} onClose={onClose} />
           )}
-        </Link>
+        </div>
       )}
     </div>
   )
diff --git a/components/StartPage/StartPage.js b/components/StartPage/StartPage.js
index 425bbb34..ea08ee0f 100644
--- a/components/StartPage/StartPage.js
+++ b/components/StartPage/StartPage.js
@@ -19,8 +19,6 @@ import Logo from './Logo'
 import Partners from './Partners'
 import PasswordRecovery from './PasswordRecovery'
 import Reviews from './Reviews'
-import SectionBlock from './SectionBlock'
-import SectionContainer from './SectionContainer'
 
 import Close from 'public/icons/close.svg'
 import LevelLogo from 'public/icons/level-logo-color.svg'
@@ -43,66 +41,12 @@ function StartPage({ defaultContentKey = null }) {
   const router = useRouter()
   const [contentKey, setContentKey] = useState(defaultContentKey)
 
-  const [showSections, setShowSections] = useState({
-    logo: false,
-    updates: false,
-    partners: false,
-    connect: false,
-    signIn: false,
-    download: false,
-    passwordRecovery: false,
-  })
-
-  const [blocks, setBlocks] = useState({
-    intro: { clicked: false, opacity: 'opacity-0' },
-    howItWork: { clicked: false, opacity: 'opacity-0' },
-    reviews: { clicked: false, opacity: 'opacity-0' },
-    faq: { clicked: false, opacity: 'opacity-0' },
-  })
-
-  useEffect(() => {
-    if (defaultContentKey) {
-      setShowSections((prev) => ({
-        ...prev,
-        [defaultContentKey]: true,
-      }))
-    }
-  }, [defaultContentKey])
-
-  const toggleSection = (section) => {
-    setShowSections((prev) => {
-      const isCurrentlyVisible = prev[section]
-      return {
-        logo: false,
-        updates: false,
-        partners: false,
-        connect: false,
-        signIn: false,
-        download: false,
-        passwordRecovery: false,
-        [section]: !isCurrentlyVisible,
-      }
-    })
-  }
-
   useEffect(() => {
     if (defaultContentKey) {
       setContentKey(defaultContentKey)
     }
   }, [defaultContentKey])
 
-  useEffect(() => {
-    if (defaultContentKey) {
-      setBlocks((prev) => ({
-        ...prev,
-        [defaultContentKey]: {
-          clicked: true,
-          opacity: 'opacity-100',
-        },
-      }))
-    }
-  }, [defaultContentKey])
-
   const handleContentClick = async (newContentKey) => {
     if (defaultContentKey) {
       await router.replace('/', undefined, { shallow: true, scroll: false })
@@ -117,7 +61,12 @@ function StartPage({ defaultContentKey = null }) {
 
   const contentObjects = {
     signIn: <Login handleClick={() => handleContentClick('connect')} />,
-    connect: <Feedback t={t} onClose={() => setContentKey(null)} />,
+    connect: (
+      <div className="flex w-full flex-col gap-6 md:gap-0">
+        <p className="mb-4 font-semibold md:font-bold">{t('start-page:WriteToUs')}</p>
+        <Feedback t={t} onClose={() => setContentKey(null)} />
+      </div>
+    ),
     updates: <AboutVersion isStartPage={true} />,
     partners: <Partners t={t} />,
     intro: <LevelIntro t={t} />,
@@ -256,158 +205,6 @@ function StartPage({ defaultContentKey = null }) {
           <CookiesAproove />
         </div>
       </main>
-      <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
-        <div onClick={() => router.replace(mainLink)}>
-          <SectionBlock
-            sectionKey="logo"
-            content={<Logo t={t} />}
-            showSection={showSections.logo}
-            toggleSection={toggleSection}
-            isLogo={true}
-            label={<LevelLogo className="h-7" />}
-          />
-        </div>
-        <div className="grid grid-cols-2 gap-5 text-center">
-          {!showSections.signIn && (
-            <div className="z-20 flex items-center justify-center rounded-xl bg-th-secondary-10 p-4">
-              <SwitchLocalization />
-            </div>
-          )}
-          <div
-            scroll={false}
-            onClick={async (e) => {
-              e.preventDefault()
-              router.push(`/${contentRoutes['signIn']}`)
-            }}
-            className={`cursor-pointer rounded-xl p-5 ${
-              showSections.signIn
-                ? 'col-span-2 bg-th-secondary-10'
-                : 'bg-slate-550 text-th-text-secondary-100'
-            }`}
-          >
-            <p className={`${showSections.signIn ? 'mb-5 font-semibold' : ''}`}>
-              {showSections.signIn ? t('users:LoginToAccount') : t('users:SignIn')}
-            </p>
-            {showSections.signIn && (
-              <Login
-                handleClick={(e) => {
-                  toggleSection(
-                    showSections.signIn && showSections.connect ? 'signIn' : 'connect'
-                  )
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.intro.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('intro')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/about-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.intro.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.intro.clicked ? (
-              <LevelIntro t={t} opacity={blocks.intro.opacity} />
-            ) : (
-              <p
-                className="text-white"
-                dangerouslySetInnerHTML={{ __html: t('MainBlocks.WhatIsLevel') }}
-              ></p>
-            )}
-          </div>
-        </div>
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.howItWork.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('howItWork')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/inside-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.howItWork.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.howItWork.clicked ? (
-              <HowItWorks t={t} opacity={blocks.howItWork.opacity} />
-            ) : (
-              <p className="text-white">{t('MainBlocks.HowItWorks')}</p>
-            )}
-          </div>
-        </div>
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.reviews.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('reviews')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/reviews-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.reviews.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.reviews.clicked ? (
-              <Reviews t={t} opacity={blocks.reviews.opacity} />
-            ) : (
-              <p className="text-white">{t('MainBlocks.Reviews')}</p>
-            )}
-          </div>
-        </div>
-        <div
-          className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
-            blocks.faq.clicked ? '' : 'h-36'
-          }`}
-          onClick={() => handleContentClick('faq')}
-        >
-          <div
-            className={`absolute inset-0 bg-[url("../public/main/faq-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
-              blocks.faq.clicked ? 'opacity-0' : 'opacity-100'
-            }`}
-          ></div>
-          <div className="relative z-10">
-            {blocks.faq.clicked ? (
-              <FrequentlyAskedQuestions t={t} opacity={blocks.faq.opacity} />
-            ) : (
-              <p className="text-white">{t('FAQ')}</p>
-            )}
-          </div>
-        </div>
-        <Link scroll={false} href={`/${contentRoutes['partners']}`}>
-          <SectionBlock
-            sectionKey="partners"
-            label={t('Partners')}
-            content={<Partners t={t} />}
-            showSection={showSections.partners}
-            toggleSection={toggleSection}
-          />
-        </Link>
-        <Link scroll={false} href={`/${contentRoutes['connect']}`}>
-          <SectionBlock
-            sectionKey="connect"
-            label={t('WriteToUs')}
-            content={<Feedback t={t} onClose={() => toggleSection('feedback')} />}
-            showSection={showSections.connect}
-            toggleSection={toggleSection}
-          />
-        </Link>
-        <SectionContainer
-          showSections={showSections}
-          toggleSection={toggleSection}
-          setContentKey={setContentKey}
-          t={t}
-        />
-
-        <div className="absolute bottom-0 left-1/2 z-10 block -translate-x-1/2 md:hidden">
-          <CookiesAproove />
-        </div>
-      </main>
     </>
   )
 }
diff --git a/components/StartPage/StartPageMobile.js b/components/StartPage/StartPageMobile.js
new file mode 100644
index 00000000..f4499581
--- /dev/null
+++ b/components/StartPage/StartPageMobile.js
@@ -0,0 +1,264 @@
+import { useEffect, useState } from 'react'
+
+import { useRouter } from 'next/router'
+
+import { useTranslation } from 'next-i18next'
+
+import SwitchLocalization from 'components/SwitchLocalization'
+
+import CookiesAproove from './CookiesAproove'
+import FrequentlyAskedQuestions from './FrequentlyAskedQuestions'
+import HowItWorks from './HowItWorks'
+import LevelIntro from './LevelIntro'
+import Login from './Login'
+import OneSection from './OneSection'
+import Reviews from './Reviews'
+import SectionContainer from './SectionContainer'
+
+import LevelLogo from 'public/icons/level-logo-color.svg'
+
+const contentRoutes = {
+  signIn: 'sign-in',
+  connect: 'connect-with-us',
+  updates: 'updates',
+  partners: 'partners',
+  intro: 'what-is-level',
+  reviews: 'reviews',
+  howItWork: 'how-it-works',
+  faq: 'faq',
+  download: 'download',
+  logo: 'about',
+}
+
+function StartPageMobile({ defaultContentKey = null }) {
+  const { t } = useTranslation(['start-page', 'projects', 'users', 'common'])
+  const router = useRouter()
+  const [contentKey, setContentKey] = useState(defaultContentKey)
+
+  const [showSections, setShowSections] = useState({
+    logo: false,
+    updates: false,
+    partners: false,
+    connect: false,
+    signIn: false,
+    download: false,
+    passwordRecovery: false,
+  })
+
+  const [blocks, setBlocks] = useState({
+    intro: { clicked: false, opacity: 'opacity-0' },
+    howItWork: { clicked: false, opacity: 'opacity-0' },
+    reviews: { clicked: false, opacity: 'opacity-0' },
+    faq: { clicked: false, opacity: 'opacity-0' },
+  })
+
+  useEffect(() => {
+    if (defaultContentKey) {
+      setShowSections((prev) => ({
+        ...prev,
+        [defaultContentKey]: true,
+      }))
+    }
+  }, [defaultContentKey])
+
+  const toggleSection = (section) => {
+    setShowSections((prev) => {
+      const isCurrentlyVisible = prev[section]
+      return {
+        logo: false,
+        updates: false,
+        partners: false,
+        connect: false,
+        signIn: false,
+        download: false,
+        passwordRecovery: false,
+        [section]: !isCurrentlyVisible,
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (defaultContentKey) {
+      setContentKey(defaultContentKey)
+    }
+  }, [defaultContentKey])
+
+  useEffect(() => {
+    if (defaultContentKey) {
+      setBlocks((prev) => ({
+        ...prev,
+        [defaultContentKey]: {
+          clicked: true,
+          opacity: 'opacity-100',
+        },
+      }))
+    }
+  }, [defaultContentKey])
+
+  const handleContentClick = async (newContentKey) => {
+    if (defaultContentKey) {
+      await router.replace('/', undefined, { shallow: true, scroll: false })
+    }
+    if (contentKey === newContentKey) {
+      setContentKey(null)
+    } else {
+      setContentKey(newContentKey)
+      handleClick(newContentKey)
+    }
+  }
+
+  const handleClick = (contentKey) => {
+    if (contentKey && contentRoutes[contentKey]) {
+      router.replace(`/${contentRoutes[contentKey]}`, undefined, {
+        shallow: true,
+        scroll: false,
+      })
+    }
+  }
+  return (
+    <main className="relative flex flex-col gap-5 p-5 text-lg font-medium md:hidden">
+      <OneSection
+        showSections={showSections}
+        label={t('logo')}
+        logo={<LevelLogo className="h-7" />}
+        toggleSection={toggleSection}
+        t={t}
+      />
+      <div className="grid grid-cols-2 gap-5 text-center">
+        {!showSections.signIn && (
+          <div className="z-20 flex items-center justify-center rounded-xl bg-th-secondary-10 p-4">
+            <SwitchLocalization />
+          </div>
+        )}
+        <div
+          scroll={false}
+          onClick={async (e) => {
+            e.preventDefault()
+            router.push(`/${contentRoutes['signIn']}`)
+          }}
+          className={`cursor-pointer rounded-xl p-5 ${
+            showSections.signIn
+              ? 'col-span-2 bg-th-secondary-10'
+              : 'bg-slate-550 text-th-text-secondary-100'
+          }`}
+        >
+          <p className={`${showSections.signIn ? 'mb-5 font-semibold' : ''}`}>
+            {showSections.signIn ? t('users:LoginToAccount') : t('users:SignIn')}
+          </p>
+          {showSections.signIn && (
+            <Login
+              handleClick={(e) => {
+                toggleSection(
+                  showSections.signIn && showSections.connect ? 'signIn' : 'connect'
+                )
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.intro.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('intro')}
+      >
+        <div
+          className={`absolute inset-0 bg-[url("../public/main/about-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.intro.clicked ? 'opacity-0' : 'opacity-100'
+          }`}
+        ></div>
+        <div className="relative z-10">
+          {blocks.intro.clicked ? (
+            <LevelIntro t={t} opacity={blocks.intro.opacity} />
+          ) : (
+            <p
+              className="text-white"
+              dangerouslySetInnerHTML={{ __html: t('MainBlocks.WhatIsLevel') }}
+            ></p>
+          )}
+        </div>
+      </div>
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.howItWork.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('howItWork')}
+      >
+        <div
+          className={`absolute inset-0 bg-[url("../public/main/inside-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.howItWork.clicked ? 'opacity-0' : 'opacity-100'
+          }`}
+        ></div>
+        <div className="relative z-10">
+          {blocks.howItWork.clicked ? (
+            <HowItWorks t={t} opacity={blocks.howItWork.opacity} />
+          ) : (
+            <p className="text-white">{t('MainBlocks.HowItWorks')}</p>
+          )}
+        </div>
+      </div>
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.reviews.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('reviews')}
+      >
+        <div
+          className={`absolute inset-0 bg-[url("../public/main/reviews-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.reviews.clicked ? 'opacity-0' : 'opacity-100'
+          }`}
+        ></div>
+        <div className="relative z-10">
+          {blocks.reviews.clicked ? (
+            <Reviews t={t} opacity={blocks.reviews.opacity} />
+          ) : (
+            <p className="text-white">{t('MainBlocks.Reviews')}</p>
+          )}
+        </div>
+      </div>
+      <div
+        className={`relative cursor-pointer overflow-hidden rounded-2xl bg-th-secondary-10 p-5 transition-all duration-500 ${
+          blocks.faq.clicked ? '' : 'h-36'
+        }`}
+        onClick={() => handleContentClick('faq')}
+      >
+        <div
+          className={`absolute inset-0 bg-[url("../public/main/faq-mobile.webp")] bg-cover bg-no-repeat transition-opacity duration-500 ${
+            blocks.faq.clicked ? 'opacity-0' : 'opacity-100'
+          }`}
+        ></div>
+        <div className="relative z-10">
+          {blocks.faq.clicked ? (
+            <FrequentlyAskedQuestions t={t} opacity={blocks.faq.opacity} />
+          ) : (
+            <p className="text-white">{t('FAQ')}</p>
+          )}
+        </div>
+      </div>
+      <OneSection
+        showSections={showSections}
+        label={t('Partners')}
+        toggleSection={toggleSection}
+        t={t}
+      />
+      <OneSection
+        showSections={showSections}
+        label={t('WriteToUs')}
+        toggleSection={toggleSection}
+        t={t}
+      />
+      <SectionContainer
+        showSections={showSections}
+        toggleSection={toggleSection}
+        setContentKey={setContentKey}
+        t={t}
+      />
+      <div className="absolute bottom-0 left-1/2 z-10 block -translate-x-1/2 md:hidden">
+        <CookiesAproove />
+      </div>
+    </main>
+  )
+}
+
+export default StartPageMobile
diff --git a/pages/[slug].js b/pages/[slug].js
index b2cbfa70..c0345b35 100644
--- a/pages/[slug].js
+++ b/pages/[slug].js
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 
 import HiscoderLink from 'components/StartPage/HiscoderLink'
 import StartPage from 'components/StartPage/StartPage'
+import StartPageMobile from 'components/StartPage/StartPageMobile'
 
 import { urlGlobal } from 'utils/openGraph'
 
@@ -115,8 +116,14 @@ const SlugPage = () => {
 
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="flex flex-1 flex-col justify-center">
-        <StartPage defaultContentKey={pageContent.contentKey || null} />
+      <div className="flex flex-1 flex-col items-center justify-center">
+        <div className="hidden md:block">
+          <StartPage defaultContentKey={pageContent.contentKey || null} />
+        </div>
+
+        <div className="block w-full md:hidden">
+          <StartPageMobile defaultContentKey={pageContent.contentKey || null} />
+        </div>
       </div>
       <HiscoderLink />
     </main>
diff --git a/pages/index.js b/pages/index.js
index e2d1fb38..a7a3b4da 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,6 +5,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import HiscoderLink from 'components/StartPage/HiscoderLink'
 import StartPage from 'components/StartPage/StartPage'
+import StartPageMobile from 'components/StartPage/StartPageMobile'
 
 import { openGraph, urlGlobal } from '../utils/openGraph'
 
@@ -46,8 +47,14 @@ export default function Home() {
 
         <link rel="icon" href={metadata.icons.icon} sizes="any" />
       </Head>
-      <div className="flex flex-1 flex-col justify-center">
-        <StartPage defaultContentKey={query?.contentKey || null} />
+      <div className="flex flex-1 flex-col items-center justify-center">
+        <div className="hidden md:block">
+          <StartPage defaultContentKey={query?.contentKey || null} />
+        </div>
+
+        <div className="block w-full md:hidden">
+          <StartPageMobile defaultContentKey={query?.contentKey || null} />
+        </div>
       </div>
       <HiscoderLink />
     </main>