diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx
index 48f0b61..60ed119 100644
--- a/src/components/Apps/AppInfo.tsx
+++ b/src/components/Apps/AppInfo.tsx
@@ -1,3 +1,4 @@
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   AppCircle,
   AppCircleContainer,
@@ -17,9 +18,11 @@ import {
   AppsLibraryContainer,
   AppsWidthLimiter,
 } from './Apps-styles';
-import { Avatar, Box } from '@mui/material';
-import { getBaseApiReact } from '../../App';
+import { Avatar, Box, ButtonBase, InputBase } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { getBaseApiReact, isMobile } from '../../App';
 import LogoSelected from '../../assets/svgs/LogoSelected.svg';
+
 import { Spacer } from '../../common/Spacer';
 import { executeEvent } from '../../utils/events';
 import { AppRating } from './AppRating';
@@ -27,7 +30,7 @@ import {
   settingsLocalLastUpdatedAtom,
   sortablePinnedAppsAtom,
 } from '../../atoms/global';
-import { saveToLocalStorage } from './AppsNavBar';
+import { saveToLocalStorage } from './AppsNavBarDesktop';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 export const AppInfo = ({ app, myName }) => {
@@ -46,8 +49,9 @@ export const AppInfo = ({ app, myName }) => {
   return (
     <AppsLibraryContainer
       sx={{
-        height: '100%',
-        justifyContent: 'flex-start',
+        height: !isMobile && '100%',
+        justifyContent: !isMobile && 'flex-start',
+        alignItems: isMobile && 'center',
       }}
     >
       <Box
@@ -58,8 +62,7 @@ export const AppInfo = ({ app, myName }) => {
           width: '90%',
         }}
       >
-        <Spacer height="30px" />
-
+        {!isMobile && <Spacer height="30px" />}
         <AppsWidthLimiter>
           <AppInfoSnippetContainer>
             <AppInfoSnippetLeft
@@ -167,9 +170,15 @@ export const AppInfo = ({ app, myName }) => {
               }}
             >
               <AppDownloadButtonText>
-                {isSelectedAppPinned
-                  ? 'Unpin from dashboard'
-                  : 'Pin to dashboard'}
+                {!isMobile ? (
+                  <>
+                    {isSelectedAppPinned
+                      ? 'Unpin from dashboard'
+                      : 'Pin to dashboard'}
+                  </>
+                ) : (
+                  <>{isSelectedAppPinned ? 'Unpin' : 'Pin'}</>
+                )}
               </AppDownloadButtonText>
             </AppDownloadButton>
             <AppDownloadButton
diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx
index 9e98963..4cef858 100644
--- a/src/components/Apps/AppInfoSnippet.tsx
+++ b/src/components/Apps/AppInfoSnippet.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   AppCircle,
   AppCircleContainer,
@@ -11,8 +12,9 @@ import {
   AppInfoUserName,
 } from './Apps-styles';
 import { Avatar, ButtonBase } from '@mui/material';
-import { getBaseApiReact } from '../../App';
+import { getBaseApiReact, isMobile } from '../../App';
 import LogoSelected from '../../assets/svgs/LogoSelected.svg';
+
 import { Spacer } from '../../common/Spacer';
 import { executeEvent } from '../../utils/events';
 import { AppRating } from './AppRating';
@@ -21,7 +23,7 @@ import {
   settingsLocalLastUpdatedAtom,
   sortablePinnedAppsAtom,
 } from '../../atoms/global';
-import { saveToLocalStorage } from './AppsNavBar';
+import { saveToLocalStorage } from './AppsNavBarDesktop';
 
 export const AppInfoSnippet = ({
   app,
@@ -122,49 +124,52 @@ export const AppInfoSnippet = ({
           gap: '10px',
         }}
       >
-        <AppDownloadButton
-          onClick={() => {
-            setSortablePinnedApps((prev) => {
-              let updatedApps;
+        {!isMobile && (
+          <AppDownloadButton
+            onClick={() => {
+              setSortablePinnedApps((prev) => {
+                let updatedApps;
 
-              if (isSelectedAppPinned) {
-                // Remove the selected app if it is pinned
-                updatedApps = prev.filter(
-                  (item) =>
-                    !(
-                      item?.name === app?.name && item?.service === app?.service
-                    )
+                if (isSelectedAppPinned) {
+                  // Remove the selected app if it is pinned
+                  updatedApps = prev.filter(
+                    (item) =>
+                      !(
+                        item?.name === app?.name &&
+                        item?.service === app?.service
+                      )
+                  );
+                } else {
+                  // Add the selected app if it is not pinned
+                  updatedApps = [
+                    ...prev,
+                    {
+                      name: app?.name,
+                      service: app?.service,
+                    },
+                  ];
+                }
+
+                saveToLocalStorage(
+                  'ext_saved_settings',
+                  'sortablePinnedApps',
+                  updatedApps
                 );
-              } else {
-                // Add the selected app if it is not pinned
-                updatedApps = [
-                  ...prev,
-                  {
-                    name: app?.name,
-                    service: app?.service,
-                  },
-                ];
-              }
-
-              saveToLocalStorage(
-                'ext_saved_settings',
-                'sortablePinnedApps',
-                updatedApps
-              );
-              return updatedApps;
-            });
-            setSettingsLocalLastUpdated(Date.now());
-          }}
-          sx={{
-            backgroundColor: '#359ff7ff',
-            opacity: isSelectedAppPinned ? 0.6 : 1,
-          }}
-        >
-          <AppDownloadButtonText>
-            {' '}
-            {isSelectedAppPinned ? 'Unpin' : 'Pin'}
-          </AppDownloadButtonText>
-        </AppDownloadButton>
+                return updatedApps;
+              });
+              setSettingsLocalLastUpdated(Date.now());
+            }}
+            sx={{
+              backgroundColor: '#359ff7ff',
+              opacity: isSelectedAppPinned ? 0.6 : 1,
+            }}
+          >
+            <AppDownloadButtonText>
+              {' '}
+              {isSelectedAppPinned ? 'Unpin' : 'Pin'}
+            </AppDownloadButtonText>
+          </AppDownloadButton>
+        )}
 
         <AppDownloadButton
           onClick={() => {