diff --git a/frontend/package.json b/frontend/package.json
index 03d9bf632..eb189ecab 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,7 +47,7 @@
     "workbox-streams": "^6.5.3"
   },
   "scripts": {
-    "dev": "NODE_ENV=development vite",
+    "dev": "NODE_ENV=development vite --host",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint src",
diff --git a/frontend/src/components/atoms/button.ts b/frontend/src/components/atoms/button.ts
index c008548b4..4f07d5845 100644
--- a/frontend/src/components/atoms/button.ts
+++ b/frontend/src/components/atoms/button.ts
@@ -9,6 +9,7 @@ interface ButtonProps {
   borderColor?: string;
   visible?: boolean;
   disabled?: boolean;
+  mobileWidth?: string;
 }
 
 export const KeplerIconWrapper = styled.div``;
@@ -88,6 +89,7 @@ export const PrimaryButton = styled.button<ButtonProps>`
 
   @media (max-width: ${breakpoints.mobile}) {
     font-size: 12px;
+    max-width: ${(props): string => props.mobileWidth || "none"};
   }
 `;
 
diff --git a/frontend/src/components/base-route-mobile/base-route-mobile.tsx b/frontend/src/components/base-route-mobile/base-route-mobile.tsx
index 8e9cd6fb6..d0cdb67ac 100644
--- a/frontend/src/components/base-route-mobile/base-route-mobile.tsx
+++ b/frontend/src/components/base-route-mobile/base-route-mobile.tsx
@@ -1,21 +1,12 @@
-import React, { FC, useMemo } from "react";
-
-import { text } from "../../assets";
+import React, { FC } from "react";
 import { routes } from "../../navigation";
 import { Footer } from "../footer";
-import { NavigationSection, NavigationTab } from "../navigation-tab";
-import { Box, ChildrenContainer, FooterContainer, RightBox, TopbarContainer } from "./styles";
+import { ChildrenContainer, FooterContainer, TopbarContainer } from "./styles";
 import { useCharacterBuilder } from "../../context/character-builder-context";
-import { MAIN_MODE, Section } from "../../constants";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { SwitchSelector } from "../switch-selector";
-import { KreadContainer } from "../../pages/shop/styles";
+import { MAIN_MODE } from "../../constants";
+import { useNavigate } from "react-router-dom";
+import { KreadContainerMobile } from "../../pages/shop/styles";
 import { KreadIcon } from "../logo/styles";
-import { ButtonText, PrimaryButton } from "../atoms";
-import { color } from "../../design";
-import { useKadoWidget } from "../../context/filter-context";
-import styled from "@emotion/styled";
-import { BuyCryptoButton } from "../base-route/base-route";
 
 interface BaseRouteProps {
   sideNavigation: React.ReactNode;
@@ -25,46 +16,20 @@ interface BaseRouteProps {
   isShop?: boolean;
 }
 
-export const BaseRouteMobile: FC<BaseRouteProps> = ({ children, sideNavigation, onboarding = false, isLanding = false, isShop = false }) => {
-  const isOnboarding = onboarding ? routes.onboarding : routes.character;
+export const BaseRouteMobile: FC<BaseRouteProps> = ({ children, isLanding = false}) => {
   const { interactionMode } = useCharacterBuilder();
-
-  const { pathname } = useLocation();
-  const { section } = useParams<{ section: Section }>();
   const navigate = useNavigate();
   const home = () => {
     navigate(routes.character);
   };
 
-  const pageSelector = useMemo(
-    () => (
-      <SwitchSelector
-        buttonOneText={text.character.items}
-        buttonTwoText={text.character.characters}
-        selectedSection={section || "items"}
-        path={pathname}
-      />
-    ),
-    [section, pathname],
-  );
-
   return (
     <>
       {interactionMode === MAIN_MODE && (
         <TopbarContainer isLanding={isLanding}>
-          <Box>
-            <NavigationSection route={isOnboarding}>
-              <NavigationTab title={text.navigation.character} route={isOnboarding} />
-            </NavigationSection>
-          </Box>
-          <KreadContainer onClick={home}>
+          <KreadContainerMobile onClick={home}>
             <KreadIcon />
-          </KreadContainer>
-          <RightBox>
-            {isShop && <BuyCryptoButton />}
-            {!isLanding && <>{pageSelector}</>}
-            {sideNavigation}
-          </RightBox>
+          </KreadContainerMobile>
         </TopbarContainer>
       )}
       <ChildrenContainer isLanding={isLanding}>{children}</ChildrenContainer>
diff --git a/frontend/src/components/base-route-mobile/styles.ts b/frontend/src/components/base-route-mobile/styles.ts
index 2068af28e..92ef682e8 100644
--- a/frontend/src/components/base-route-mobile/styles.ts
+++ b/frontend/src/components/base-route-mobile/styles.ts
@@ -13,20 +13,19 @@ export const NavBarDivider = styled.div`
 `;
 
 export const TopbarContainer = styled.header<AnimationProps>`
+  width: 100vw;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-start;
+  margin-top: 12px;
   align-items: flex-end;
   z-index: 100;
   top: 0;
-  margin-left: ${margins.medium};
-  margin-right: ${margins.medium};
-  padding-top: ${margins.medium};
-  padding-bottom: ${margins.medium};
+  padding: ${margins.medium};
   background: transparent;
 
   @media screen and (max-width: ${breakpoints.tablet}) {
-    padding: ${margins.mini};
+    padding: ${margins.medium};
   }
 `;
 
diff --git a/frontend/src/components/content-loader/content-loader.tsx b/frontend/src/components/content-loader/content-loader.tsx
index 5a2dfcb96..014244569 100644
--- a/frontend/src/components/content-loader/content-loader.tsx
+++ b/frontend/src/components/content-loader/content-loader.tsx
@@ -1,6 +1,8 @@
 import React, { FC } from "react";
 import { AnimatedLoading } from "./animated-loading";
-import { LoadingPageContainer, Spinner } from "./styles";
+import { LoadingPageContainer, LoadingPageContainerMobile, Spinner } from "./styles";
+import { useIsMobile } from "../../hooks";
+import { breakpoints } from "../../design";
 
 interface ContentLoaderProps {
   loading: boolean;
@@ -12,6 +14,14 @@ interface LoadingPageProps {
 }
 
 export const LoadingPage: FC<LoadingPageProps> = ({ spinner = true }) => {
+  const isMobile = useIsMobile(breakpoints.tablet);
+  if(isMobile) {
+    return (
+      <>
+        <LoadingPageContainerMobile isSpinner={spinner}>{spinner ? <Spinner /> : <AnimatedLoading />}</LoadingPageContainerMobile>
+      </>
+    );
+  }
   return (
     <>
       <LoadingPageContainer isSpinner={spinner}>{spinner ? <Spinner /> : <AnimatedLoading />}</LoadingPageContainer>
diff --git a/frontend/src/components/content-loader/styles.ts b/frontend/src/components/content-loader/styles.ts
index 5cbd05bbf..fd5d2fbf6 100644
--- a/frontend/src/components/content-loader/styles.ts
+++ b/frontend/src/components/content-loader/styles.ts
@@ -65,6 +65,33 @@ export const LoadingPageContainer = styled.div<SpinnerProps>`
       `;
   }};
 `;
+
+export const LoadingPageContainerMobile = styled.div<SpinnerProps>`
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 30vw;
+  ${({ isSpinner }): string => {
+    return isSpinner
+      ? `
+      width: fit-content;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 46vh 46vw;
+      `
+      : `
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      `;
+  }};
+`;
+
 interface AnimationProps {
   iteration?: number;
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index c3120655e..c2aa4ca7c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,5 +2,7 @@
 
 body {
   font-family: 'aktiv-grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
diff --git a/frontend/src/pages/content-mobile/styles.ts b/frontend/src/pages/content-mobile/styles.ts
index c226c2d87..2e1abf890 100644
--- a/frontend/src/pages/content-mobile/styles.ts
+++ b/frontend/src/pages/content-mobile/styles.ts
@@ -12,6 +12,7 @@ export const Title = styled(FormText)``;
 
 export const InfoContainer = styled.div`
   padding-left: 20px;
+  padding-right: 20px;
   padding-top: 4%;
   ${TitleText} {
     margin-top: ${margins.mini};
@@ -34,7 +35,8 @@ export const GeneralInfo = styled.div`
 export const KreadContainer = styled.div`
 display: flex;
 flex: 1;
-justify-content: center;
+justify-content: start;
+padding-left: 30px;
 margin-top: 30px;
 ${KreadIcon} {
   width: 100px;
diff --git a/frontend/src/pages/create-character-mobile/confirmation.tsx b/frontend/src/pages/create-character-mobile/confirmation.tsx
index a84e37c72..cc6c00011 100644
--- a/frontend/src/pages/create-character-mobile/confirmation.tsx
+++ b/frontend/src/pages/create-character-mobile/confirmation.tsx
@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { text } from "../../assets";
-import { ButtonText, ErrorView, MenuItemName, PrimaryButton, TitleText } from "../../components";
+import { ButtonText, ErrorView, MenuItemName, TitleText } from "../../components";
 import { color } from "../../design";
 import { Character } from "../../interfaces";
 import { getDatefromEpoch } from "../../util";
-import { ArrowUp, ButtonContainer, ContentWrapper, InfoContainer, Tick, TickContainer } from "./styles";
+import { ArrowUp, ButtonContainer, ContentWrapper, InfoContainer, PrimaryButtonMobile, Tick, TickContainer } from "./styles";
 import { useUserStateDispatch } from "../../context/user";
 import { useNavigate } from "react-router-dom";
 import { routes } from "../../navigation";
@@ -42,10 +42,10 @@ export const Confirmation: FC<ConfirmationProps> = ({ character }) => {
         <MenuItemName>{getDatefromEpoch(Date.now())}</MenuItemName>
       </InfoContainer>
       <ButtonContainer>
-        <PrimaryButton onClick={handleConfirm}>
+        <PrimaryButtonMobile onClick={handleConfirm} mobileWidth="100px">
           <ButtonText customColor={color.white}>{text.mint.goToCharacter}</ButtonText>
           <ArrowUp />
-        </PrimaryButton>
+        </PrimaryButtonMobile>
       </ButtonContainer>
     </ContentWrapper>
   );
diff --git a/frontend/src/pages/create-character-mobile/create-character-mobile.tsx b/frontend/src/pages/create-character-mobile/create-character-mobile.tsx
index 10eaf10b6..21586f369 100644
--- a/frontend/src/pages/create-character-mobile/create-character-mobile.tsx
+++ b/frontend/src/pages/create-character-mobile/create-character-mobile.tsx
@@ -1,24 +1,21 @@
 import React, { FC, useEffect, useMemo, useState } from "react";
-import { ElephiaCitizen, text } from "../../assets";
+import { text } from "../../assets";
 import { ErrorView, FadeInOut, FormHeader, LoadingPage, NotificationDetail, Overlay } from "../../components";
 import { PageContainer } from "../../components/page-container";
 import { MINTING_COST, MINT_CHARACTER_FLOW_STEPS, WALLET_INTERACTION_STEP } from "../../constants";
-import { useIsMobile, useViewport } from "../../hooks";
 import { Character, CharacterCreation, MakeOfferCallback } from "../../interfaces";
 import { routes } from "../../navigation";
 import { useCreateCharacter } from "../../service";
 import { Confirmation } from "./confirmation";
 import { Information } from "./information";
 import { Payment } from "./payment";
-import { DefaultImage, FormCard } from "./styles";
-import { breakpoints } from "../../design";
+import { FormCard } from "./styles";
 import { useUserState } from "../../context/user";
 import { useWalletState } from "../../context/wallet";
 import { NotificationWrapper } from "../../components/notification-detail/styles";
 
 export const CreateCharacterMobile: FC = () => {
   const createCharacter = useCreateCharacter();
-  const { width, height } = useViewport();
   const [currentStep, setCurrentStep] = useState<number>(0);
   const [mintedCharacter, setMintedCharacter] = useState<Character>();
   const [error, setError] = useState<string>();
@@ -30,7 +27,6 @@ export const CreateCharacterMobile: FC = () => {
   const isLoadingCharacters = !fetched;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isOfferAccepted, setIsOfferAccepted] = useState<boolean>(false);
-  const mobile = useIsMobile(breakpoints.desktop);
   const { ist } = useWalletState();
 
   const notEnoughIST = useMemo(() => {
@@ -47,6 +43,8 @@ export const CreateCharacterMobile: FC = () => {
       setMintedCharacter(newCharacter.nft);
       setIsLoading(false);
     }
+    if(error) console.error(`Error in create-character-mobile: ${error}`);
+
   }, [characters, characterData, notEnoughIST]);
 
   const changeStep = async (step: number): Promise<void> => {
@@ -119,7 +117,6 @@ export const CreateCharacterMobile: FC = () => {
           />
         </NotificationWrapper>
       </FadeInOut>
-      {!mobile && <DefaultImage src={ElephiaCitizen} alt={text.character.defaultCharacter} height={height} width={width} />}
     </PageContainer>
   );
 };
diff --git a/frontend/src/pages/create-character-mobile/information.tsx b/frontend/src/pages/create-character-mobile/information.tsx
index ba6181290..62ad0d929 100644
--- a/frontend/src/pages/create-character-mobile/information.tsx
+++ b/frontend/src/pages/create-character-mobile/information.tsx
@@ -1,5 +1,5 @@
 import { CharacterCreation } from "../../interfaces";
-import { FC, useEffect, useMemo } from "react";
+import { FC, useMemo } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import {
   ArrowUp,
@@ -10,10 +10,11 @@ import {
   FormContainer,
   FormFields,
   InputWrapper,
+  PrimaryButtonMobile,
   Tick,
   Warning,
 } from "./styles";
-import { ButtonText, FormText, Input, Label, PrimaryButton } from "../../components";
+import { ButtonText, FormText, Input, Label } from "../../components";
 import { text } from "../../assets";
 import { MAX_CHARACTER_LENGTH, MINTING_COST } from "../../constants";
 import { ButtonInfo } from "../../components/button-info";
@@ -103,10 +104,10 @@ export const Information: FC<InformationProps> = ({ setData, disabled }) => {
         <FormText>{text.mint.theCostsOfMinting}</FormText>
         <ButtonWrapper>
           <ButtonContainer>
-            <PrimaryButton type="submit" disabled={!isValid || disabled || notEnoughIST || nameTaken}>
+            <PrimaryButtonMobile mobileWidth="100px" type="submit" disabled={!isValid || disabled || notEnoughIST || nameTaken}>
               <ButtonText customColor={color.white}>{text.mint.next}</ButtonText>
               <ArrowUp />
-            </PrimaryButton>
+            </PrimaryButtonMobile>
           </ButtonContainer>
         </ButtonWrapper>
       </FormContainer>
diff --git a/frontend/src/pages/create-character-mobile/payment.tsx b/frontend/src/pages/create-character-mobile/payment.tsx
index 2b8a2686c..72934a50b 100644
--- a/frontend/src/pages/create-character-mobile/payment.tsx
+++ b/frontend/src/pages/create-character-mobile/payment.tsx
@@ -8,13 +8,14 @@ import {
   NumberContainer,
   PreviousButtonContainer,
   PricingContainer,
+  PrimaryButtonMobile,
   Step,
   StepContainer,
   StepText,
   StepWrapper,
   Tick,
 } from "./styles";
-import { Badge, ButtonText, FormText, LoadingPage, PriceInIst, PrimaryButton, SecondaryButton } from "../../components";
+import { Badge, ButtonText, FormText, LoadingPage, PriceInIst, SecondaryButton } from "../../components";
 import { text } from "../../assets";
 import { CONFIRMATION_STEP, INFORMATION_STEP, MINTING_COST } from "../../constants";
 import { color } from "../../design";
@@ -31,7 +32,6 @@ export const Payment: FC<PaymentProps> = ({ submit, sendOfferHandler, isOfferAcc
   const [disable, setDisable] = useState(false);
   const sendOfferToWallet = async () => {
     setDisable(true);
-    console.info("SENDING OFFER TO WALLET");
     await sendOfferHandler();
     setSendOffer(true);
   };
@@ -49,9 +49,9 @@ export const Payment: FC<PaymentProps> = ({ submit, sendOfferHandler, isOfferAcc
             {!sendOffer && (
               <>
                 <PriceInIst price={MINTING_COST} />
-                <PrimaryButton onClick={sendOfferToWallet} disabled={disable}>
+                <PrimaryButtonMobile mobileWidth="100px" onClick={sendOfferToWallet} disabled={disable}>
                   <ButtonText customColor={color.white}>{text.mint.sendOffer}</ButtonText>
-                </PrimaryButton>
+                </PrimaryButtonMobile>
               </>
             )}
           </PricingContainer>
@@ -80,10 +80,10 @@ export const Payment: FC<PaymentProps> = ({ submit, sendOfferHandler, isOfferAcc
           </PreviousButtonContainer>
         )}
         <ButtonContainer>
-          <PrimaryButton onClick={() => submit(CONFIRMATION_STEP)} disabled={!isOfferAccepted}>
+          <PrimaryButtonMobile mobileWidth="100px" onClick={() => submit(CONFIRMATION_STEP)} disabled={!isOfferAccepted}>
             <ButtonText customColor={color.white}>{text.mint.confirm}</ButtonText>
             {isLoading ? <LoadingPage /> : <ArrowUp />}
-          </PrimaryButton>
+          </PrimaryButtonMobile>
         </ButtonContainer>
       </ButtonWrapper>
     </ContentWrapper>
diff --git a/frontend/src/pages/create-character-mobile/styles.ts b/frontend/src/pages/create-character-mobile/styles.ts
index 6eaf68135..a50095ef0 100644
--- a/frontend/src/pages/create-character-mobile/styles.ts
+++ b/frontend/src/pages/create-character-mobile/styles.ts
@@ -43,6 +43,7 @@ export const FormCard = styled.div`
     margin: auto;
     height: 100%;
     border-radius: 0;
+    max-width: 100vw;
   }
 
   animation: ${fadeUp} 1.2s ease-out 0s forwards;
@@ -290,6 +291,7 @@ export const ButtonWrapper = styled.div`
   flex-direction: row;
   justify-content: space-between;
   height: 100%;
+  max-width: 100vw;
   align-items: flex-end;
   align-content: flex-end;
 `;
@@ -302,4 +304,8 @@ export const Step = styled.div`
 
 export const RedButtonText = styled(ButtonText)`
   color: red;
-`
\ No newline at end of file
+`;
+
+export const PrimaryButtonMobile = styled(PrimaryButton)`
+  max-width: 100px;
+`;
diff --git a/frontend/src/pages/landing-mobile/landing-mobile.tsx b/frontend/src/pages/landing-mobile/landing-mobile.tsx
index 1ac3dc015..111543093 100644
--- a/frontend/src/pages/landing-mobile/landing-mobile.tsx
+++ b/frontend/src/pages/landing-mobile/landing-mobile.tsx
@@ -1,12 +1,10 @@
 import React, { FC, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import { text } from "../../assets";
 import { CharacterTitle } from './styles'
 import {
   BaseRouteMobile,
   BoldLabel,
   ButtonText,
-  ErrorView,
   FadeInOut,
   LevelBoldLabel,
   LoadingPage,
@@ -16,9 +14,8 @@ import {
   PageSubTitle,
   SecondaryButton,
 } from "../../components";
-import { ButtonContainer, CharacterCardWrapper, DetailContainer, ItemCardWrapper } from "./styles";
-import { CharacterDetailSection, ItemDetailSection } from "../../containers/detail-section";
-import { useEquipItem, useGetItemInInventoryByNameAndCategory, useSelectedCharacter, useUnequipItem } from "../../service";
+import { ButtonContainer, DetailContainer, MarginTop } from "./styles";
+import { useSelectedCharacter } from "../../service";
 import { routes } from "../../navigation";
 import { NotificationWrapper } from "../../components/notification-detail/styles";
 import { Layout } from "../../containers/canvas/character-canvas/styles";
@@ -33,71 +30,15 @@ import { MainMode } from "../../containers/canvas/main-mode/main-mode";
 import { calculateCharacterLevels } from "../../util";
 import { AssetTag } from "../../components/asset-card/styles";
 import { color } from "../../design";
-import { ButtonInfoWrap } from "../../components/button-info/styles";
 
 export const LandingMobile: FC = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
   const [selectedCharacter, isLoading] = useSelectedCharacter();
-  const [closeDetail, setCloseDetail] = useState(false);
   const [showToast, setShowToast] = useState(false);
   const { width, height } = useViewport();
   const {
-    selectedAsset,
-    selectedAssetCategory,
-    showDetails,
-    setShowDetails,
-    characterName,
-    showItemDetails,
-    setShowItemDetails,
     interactionMode,
     setInteractionMode,
-  } = useCharacterBuilder();
-
-  const [item] = useGetItemInInventoryByNameAndCategory(selectedAsset, selectedAssetCategory, characterName);
-
-  const equipItem = useEquipItem();
-  const unequipItem = useUnequipItem();
-
-  if (equipItem.isError || unequipItem.isError) return <ErrorView />;
-  const equipAsset = () => {
-    setShowToast(!showToast);
-    if (item) {
-      equipItem.mutate({ item, callback: {} });
-    }
-  };
-
-  const unequipAsset = () => {
-    setShowToast(!showToast);
-    if (item) {
-      unequipItem.mutate({ item, callback: {} });
-    }
-  };
-
-  const sell = (characterId: number) => {
-    navigate(`${routes.sellCharacter}/${characterId}`, { state: location });
-  };
-
-  const sellAsset = () => {
-    navigate(`${routes.sellItem}/${item?.category}/${item?.name}`, {
-      state: location,
-    });
-  };
-
-  const assetDetailActions = () => {
-    if (item?.equippedTo !== "") {
-      return { primary: { text: text.item.unequip, onClick: unequipAsset } };
-    } else {
-      return {
-        primary: { text: text.item.equip, onClick: equipAsset },
-        secondary: { text: text.item.sell, onClick: sellAsset },
-      };
-    }
-  };
-
-  const displayToast = () => {
-    setShowToast(true);
-  };
+  } = useCharacterBuilder();  
 
   let level = 0;
   if (selectedCharacter) {
@@ -123,80 +64,27 @@ export const LandingMobile: FC = () => {
       {isLoading ? (
         <LoadingPage spinner={false} />
       ) : !selectedCharacter ? (
-        <OverviewEmpty
-          headingText={text.character.youDoNotHave}
-          descriptionText={text.character.youDoNotOwnACharacter}
-          buttonText={text.character.createANewCharacter}
-          redirectRoute={routes.createCharacter}
-        />
+        <MarginTop >
+          <OverviewEmpty
+            headingText={text.character.youDoNotHave}
+            descriptionText={text.character.youDoNotOwnACharacter}
+            buttonText={text.character.createANewCharacter}
+            redirectRoute={routes.createCharacter}
+          />
+        </MarginTop>
       ) : (
         <>
           {/* character info */}
-          {interactionMode === MAIN_MODE ? (
-            <DetailContainer>
-              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
-              <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
-              <ButtonContainer>
-                <ButtonInfoWrap onClick={() => setShowDetails(true)}>
-                  <SecondaryButton>{text.general.info}</SecondaryButton>
-                </ButtonInfoWrap>
-                <AssetTag>
-                  <BoldLabel customColor={color.black}>lvl. </BoldLabel>
-                  <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
-                </AssetTag>
-              </ButtonContainer>
-            </DetailContainer>
-          ) : (
-            <DetailContainer>
-              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
-              <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
-              <ButtonContainer>
-                <AssetTag>
-                  <BoldLabel customColor={color.black}>lvl. </BoldLabel>
-                  <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
-                </AssetTag>
-              </ButtonContainer>
-            </DetailContainer>
-          )}
-
-          <ItemCardWrapper>
-            {showItemDetails && (
-              <ItemDetailSection
-                item={item}
-                actions={{
-                  onClose: () => {
-                    setShowItemDetails(false);
-                  },
-                  primary: assetDetailActions()?.primary,
-                  secondary: assetDetailActions()?.secondary,
-                }}
-              />
-            )}
-          </ItemCardWrapper>
-          <CharacterCardWrapper>
-            {interactionMode !== ITEM_MODE && (
-              <FadeInOut show={showDetails} exiting={closeDetail}>
-                <CharacterDetailSection
-                  character={selectedCharacter}
-                  actions={{
-                    secondary: {
-                      text: text.character.sell,
-                      onClick: () => sell(Number(selectedCharacter.nft.id)),
-                    },
-                    onClose: () => {
-                      setShowDetails(false);
-                      setCloseDetail(true);
-                    },
-                  }}
-                  showToast={displayToast}
-                />
-              </FadeInOut>
-            )}
-          </CharacterCardWrapper>
-
-          <FadeInOut show={showDetails} exiting={closeDetail}>
-            <Overlay />
-          </FadeInOut>
+          <DetailContainer>
+            <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
+            <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
+            <ButtonContainer>
+              <AssetTag>
+                <BoldLabel customColor={color.black}>lvl. </BoldLabel>
+                <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
+              </AssetTag>
+            </ButtonContainer>
+          </DetailContainer>
           <FadeInOut show={showToast} exiting={!showToast}>
             {showToast && <Overlay isOnTop={true} />}
             <NotificationWrapper showNotification={showToast}>
@@ -208,8 +96,9 @@ export const LandingMobile: FC = () => {
               />
             </NotificationWrapper>
           </FadeInOut>
+          {/* canvas */}
           <Layout width={width} height={height}>
-            <CharacterCanvas width={width} height={height} />
+            <CharacterCanvas width={Math.floor(width*1.6)} height={Math.floor(height*1.6)} />
             {interactionMode === CATEGORY_MODE && <CategoryMode />}
             {interactionMode === ITEM_MODE && <ItemsMode />}
             {interactionMode === CHARACTER_SELECT_MODE && <CharactersMode />}
diff --git a/frontend/src/pages/landing-mobile/styles.ts b/frontend/src/pages/landing-mobile/styles.ts
index 7accb2bc6..75f5790b9 100644
--- a/frontend/src/pages/landing-mobile/styles.ts
+++ b/frontend/src/pages/landing-mobile/styles.ts
@@ -41,8 +41,10 @@ export const DetailContainer = styled.div`
   animation-duration: 0.8s, 1s;
   animation-delay: 0s, 0.8s;
   height: fit-content;
-
   background: transparent;
+  max-width: 380px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   ${SecondaryButton} {
     background: ${color.white};
@@ -102,3 +104,7 @@ export const CharacterTitle = styled.h1`
   font-size: 32px;
   line-height: 52px;
 `;
+
+export const MarginTop = styled.div`
+  margin-top: 100px;
+`;
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 6b2f83a6b..b1a1051c6 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -64,7 +64,7 @@ export const OnboardingMobile: FC = () => {
     localStorage.setItem(FIRST_TIME, "false");
     setShowAnimation(false);
   };
-  console.log(showSlider)
+
   return (
     <OnboardingWrapper>
       {showAnimation ? (
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index 0d36a95da..3878c2acc 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { ArrowUpRightIcon } from "../../assets";
 import {  changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
 import { KreadIcon } from "../../components/logo/styles";
-import { color, fontWeight } from "../../design";
+import { color, fontWeight, margins } from "../../design";
 
 interface HeightProps {
   height: number;
@@ -141,7 +141,8 @@ export const KreadLogo = styled(KreadIcon)`
 export const LogoContainer = styled.div`
   display: flex;
   flex: 1;
-  justify-content: center;
+  justify-content: start;
+  padding-left: 30px;
   margin-top: 30px;
   ${KreadLogo} {
     width: 100px;
diff --git a/frontend/src/pages/shop/styles.ts b/frontend/src/pages/shop/styles.ts
index e0312e440..f9a962f5e 100644
--- a/frontend/src/pages/shop/styles.ts
+++ b/frontend/src/pages/shop/styles.ts
@@ -90,6 +90,13 @@ export const KreadContainer = styled.div`
   }
 `;
 
+export const KreadContainerMobile = styled.div`
+  ${KreadIcon} {
+    width: 100px;
+    height: 24px;
+  }
+`;
+
 export const OverviewContainer = styled.div`
   position: relative;
   z-index: 0;
diff --git a/frontend/src/reset.css b/frontend/src/reset.css
index 04035288b..fb49627c5 100644
--- a/frontend/src/reset.css
+++ b/frontend/src/reset.css
@@ -15,23 +15,24 @@ a {
 
 body,
 html {
-  min-width: 800px !important;
+  min-width: 800px;
   padding: 0;
   margin: 0;
   height: 100%;
   overflow: hidden;
   @media (max-width: 768px) {
     max-width: 100vw;
-    min-width: auto !important;
+    min-width: auto;
   }
 }
 
+
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   @media (max-width: 768px) {
     max-width: 100vw;
-    min-width: auto;
+    min-width: none;
   }
 }
 
@@ -49,6 +50,10 @@ p, h1, h2, h3, h4, h5, h6 {
 
 #root, #__next {
   isolation: isolate;
+  @media (max-width: 768px) {
+    max-width: 100vw;
+    min-width: none;
+  }
 }
 
 /* Styles for the scrollbar */