diff --git a/src/components/Apps/SortablePinnedApps.tsx b/src/components/Apps/SortablePinnedApps.tsx
index 30dcec7..f9a24a7 100644
--- a/src/components/Apps/SortablePinnedApps.tsx
+++ b/src/components/Apps/SortablePinnedApps.tsx
@@ -23,7 +23,7 @@ import {
   sortablePinnedAppsAtom,
 } from '../../atoms/global';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { saveToLocalStorage } from './AppsNavBar';
+import { saveToLocalStorage } from './AppsNavBarDesktop';
 import { ContextMenuPinnedApps } from '../ContextMenuPinnedApps';
 import LockIcon from '@mui/icons-material/Lock';
 import { useHandlePrivateApps } from './useHandlePrivateApps';
diff --git a/src/components/ContextMenuPinnedApps.tsx b/src/components/ContextMenuPinnedApps.tsx
index bb64a4c..7dad268 100644
--- a/src/components/ContextMenuPinnedApps.tsx
+++ b/src/components/ContextMenuPinnedApps.tsx
@@ -1,152 +1,182 @@
 import React, { useState, useRef } from 'react';
-import { ListItemIcon, Menu, MenuItem, Typography, styled } from '@mui/material';
+import {
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  Typography,
+  styled,
+} from '@mui/material';
 import PushPinIcon from '@mui/icons-material/PushPin';
-import { saveToLocalStorage } from './Apps/AppsNavBar';
+import { saveToLocalStorage } from './Apps/AppsNavBarDesktop';
 import { useRecoilState } from 'recoil';
 import { sortablePinnedAppsAtom } from '../atoms/global';
 
 const CustomStyledMenu = styled(Menu)(({ theme }) => ({
-    '& .MuiPaper-root': {
-        backgroundColor: '#f9f9f9',
-        borderRadius: '12px',
-        padding: theme.spacing(1),
-        boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
-    },
-    '& .MuiMenuItem-root': {
-        fontSize: '14px',
-        color: '#444',
-        transition: '0.3s background-color',
-        '&:hover': {
-            backgroundColor: '#f0f0f0',
-        },
+  '& .MuiPaper-root': {
+    backgroundColor: '#f9f9f9',
+    borderRadius: '12px',
+    padding: theme.spacing(1),
+    boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
+  },
+  '& .MuiMenuItem-root': {
+    fontSize: '14px',
+    color: '#444',
+    transition: '0.3s background-color',
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
     },
+  },
 }));
 
 export const ContextMenuPinnedApps = ({ children, app, isMine }) => {
-    const [menuPosition, setMenuPosition] = useState(null);
-    const longPressTimeout = useRef(null);
-    const maxHoldTimeout = useRef(null);
-    const preventClick = useRef(false);
-    const startTouchPosition = useRef({ x: 0, y: 0 }); // Track initial touch position
-    const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom);
+  const [menuPosition, setMenuPosition] = useState(null);
+  const longPressTimeout = useRef(null);
+  const maxHoldTimeout = useRef(null);
+  const preventClick = useRef(false);
+  const startTouchPosition = useRef({ x: 0, y: 0 }); // Track initial touch position
+  const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(
+    sortablePinnedAppsAtom
+  );
 
-    const handleContextMenu = (event) => {
-        if(isMine) return
-        event.preventDefault();
-        event.stopPropagation();
-        preventClick.current = true;
-        setMenuPosition({
-            mouseX: event.clientX,
-            mouseY: event.clientY,
-        });
-    };
+  const handleContextMenu = (event) => {
+    if (isMine) return;
+    event.preventDefault();
+    event.stopPropagation();
+    preventClick.current = true;
+    setMenuPosition({
+      mouseX: event.clientX,
+      mouseY: event.clientY,
+    });
+  };
 
-    const handleTouchStart = (event) => {
-        if(isMine) return
+  const handleTouchStart = (event) => {
+    if (isMine) return;
 
-        const { clientX, clientY } = event.touches[0];
-        startTouchPosition.current = { x: clientX, y: clientY };
+    const { clientX, clientY } = event.touches[0];
+    startTouchPosition.current = { x: clientX, y: clientY };
 
-        longPressTimeout.current = setTimeout(() => {
-            preventClick.current = true;
-          
-            event.stopPropagation();
-            setMenuPosition({
-                mouseX: clientX,
-                mouseY: clientY,
+    longPressTimeout.current = setTimeout(() => {
+      preventClick.current = true;
+
+      event.stopPropagation();
+      setMenuPosition({
+        mouseX: clientX,
+        mouseY: clientY,
+      });
+    }, 500);
+
+    // Set a maximum hold duration (e.g., 1.5 seconds)
+    maxHoldTimeout.current = setTimeout(() => {
+      clearTimeout(longPressTimeout.current);
+    }, 1500);
+  };
+
+  const handleTouchMove = (event) => {
+    if (isMine) return;
+
+    const { clientX, clientY } = event.touches[0];
+    const { x, y } = startTouchPosition.current;
+
+    // Determine if the touch has moved beyond a small threshold (e.g., 10px)
+    const movedEnough =
+      Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10;
+
+    if (movedEnough) {
+      clearTimeout(longPressTimeout.current);
+      clearTimeout(maxHoldTimeout.current);
+    }
+  };
+
+  const handleTouchEnd = (event) => {
+    if (isMine) return;
+
+    clearTimeout(longPressTimeout.current);
+    clearTimeout(maxHoldTimeout.current);
+    if (preventClick.current) {
+      event.preventDefault();
+      event.stopPropagation();
+      preventClick.current = false;
+    }
+  };
+
+  const handleClose = (e) => {
+    if (isMine) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    setMenuPosition(null);
+  };
+
+  return (
+    <div
+      onContextMenu={handleContextMenu}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      style={{ touchAction: 'none' }}
+    >
+      {children}
+      <CustomStyledMenu
+        disableAutoFocusItem
+        open={!!menuPosition}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          menuPosition
+            ? { top: menuPosition.mouseY, left: menuPosition.mouseX }
+            : undefined
+        }
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <MenuItem
+          onClick={(e) => {
+            handleClose(e);
+            setSortablePinnedApps((prev) => {
+              if (app?.isPrivate) {
+                const updatedApps = prev.filter(
+                  (item) =>
+                    !(
+                      item?.privateAppProperties?.name ===
+                        app?.privateAppProperties?.name &&
+                      item?.privateAppProperties?.service ===
+                        app?.privateAppProperties?.service &&
+                      item?.privateAppProperties?.identifier ===
+                        app?.privateAppProperties?.identifier
+                    )
+                );
+                saveToLocalStorage(
+                  'ext_saved_settings',
+                  'sortablePinnedApps',
+                  updatedApps
+                );
+                return updatedApps;
+              } else {
+                const updatedApps = prev.filter(
+                  (item) =>
+                    !(
+                      item?.name === app?.name && item?.service === app?.service
+                    )
+                );
+                saveToLocalStorage(
+                  'ext_saved_settings',
+                  'sortablePinnedApps',
+                  updatedApps
+                );
+                return updatedApps;
+              }
             });
-        }, 500);
-
-        // Set a maximum hold duration (e.g., 1.5 seconds)
-        maxHoldTimeout.current = setTimeout(() => {
-            clearTimeout(longPressTimeout.current);
-        }, 1500);
-    };
-
-    const handleTouchMove = (event) => {
-        if(isMine) return
-
-        const { clientX, clientY } = event.touches[0];
-        const { x, y } = startTouchPosition.current;
-
-        // Determine if the touch has moved beyond a small threshold (e.g., 10px)
-        const movedEnough = Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10;
-
-        if (movedEnough) {
-            clearTimeout(longPressTimeout.current);
-            clearTimeout(maxHoldTimeout.current);
-        }
-    };
-
-    const handleTouchEnd = (event) => {
-        if(isMine) return
-
-        clearTimeout(longPressTimeout.current);
-        clearTimeout(maxHoldTimeout.current);
-        if (preventClick.current) {
-            event.preventDefault();
-            event.stopPropagation();
-            preventClick.current = false;
-        }
-    };
-
-    const handleClose = (e) => {
-        if(isMine) return
-
-        e.preventDefault();
-        e.stopPropagation();
-        setMenuPosition(null);
-    };
-
-    return (
-        <div
-            onContextMenu={handleContextMenu}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-            style={{ touchAction: 'none' }}
+          }}
         >
-            {children}
-            <CustomStyledMenu
-                disableAutoFocusItem
-                open={!!menuPosition}
-                onClose={handleClose}
-                anchorReference="anchorPosition"
-                anchorPosition={
-                    menuPosition
-                        ? { top: menuPosition.mouseY, left: menuPosition.mouseX }
-                        : undefined
-                }
-                onClick={(e) => {
-                    e.stopPropagation();
-                }}
-            >
-                <MenuItem onClick={(e) => {
-                    handleClose(e);
-                    setSortablePinnedApps((prev) => {
-                        if(app?.isPrivate){
-                            const updatedApps = prev.filter(
-                                (item) => !(item?.privateAppProperties?.name === app?.privateAppProperties?.name && item?.privateAppProperties?.service === app?.privateAppProperties?.service && item?.privateAppProperties?.identifier === app?.privateAppProperties?.identifier)
-                            );
-                            saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', updatedApps);
-                            return updatedApps;
-                        } else {
-                            const updatedApps = prev.filter(
-                                (item) => !(item?.name === app?.name && item?.service === app?.service)
-                            );
-                            saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', updatedApps);
-                            return updatedApps;
-                        }
-                    });
-                }}>
-                    <ListItemIcon sx={{ minWidth: '32px' }}>
-                        <PushPinIcon fontSize="small" />
-                    </ListItemIcon>
-                    <Typography variant="inherit" sx={{ fontSize: '14px' }}>
-                        Unpin app
-                    </Typography>
-                </MenuItem>
-            </CustomStyledMenu>
-        </div>
-    );
+          <ListItemIcon sx={{ minWidth: '32px' }}>
+            <PushPinIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit" sx={{ fontSize: '14px' }}>
+            Unpin app
+          </Typography>
+        </MenuItem>
+      </CustomStyledMenu>
+    </div>
+  );
 };
diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx
index cf8dba6..c8196d8 100644
--- a/src/components/Save/Save.tsx
+++ b/src/components/Save/Save.tsx
@@ -19,7 +19,7 @@ import { SaveIcon } from '../../assets/Icons/SaveIcon';
 import { IconWrapper } from '../Desktop/DesktopFooter';
 import { Spacer } from '../../common/Spacer';
 import { LoadingButton } from '@mui/lab';
-import { saveToLocalStorage } from '../Apps/AppsNavBar';
+import { saveToLocalStorage } from '../Apps/AppsNavBarDesktop';
 import { decryptData, encryptData } from '../../qortalRequests/get';
 import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet';
 import {
diff --git a/src/components/Tutorials/useHandleTutorials.tsx b/src/components/Tutorials/useHandleTutorials.tsx
index 2fabfa0..1df8626 100644
--- a/src/components/Tutorials/useHandleTutorials.tsx
+++ b/src/components/Tutorials/useHandleTutorials.tsx
@@ -1,192 +1,194 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { saveToLocalStorage } from "../Apps/AppsNavBar";
-import creationImg from './img/creation.webp'
-import dashboardImg from './img/dashboard.webp'
-import groupsImg from './img/groups.webp'
-import importantImg from './img/important.webp'
-import navigationImg from './img/navigation.webp'
-import overviewImg from './img/overview.webp'
-import startedImg from './img/started.webp'
-import obtainingImg from './img/obtaining-qort.jpg'
+import { useCallback, useEffect, useState } from 'react';
+import { saveToLocalStorage } from '../Apps/AppsNavBarDesktop';
+import creationImg from './img/creation.webp';
+import dashboardImg from './img/dashboard.webp';
+import groupsImg from './img/groups.webp';
+import importantImg from './img/important.webp';
+import navigationImg from './img/navigation.webp';
+import overviewImg from './img/overview.webp';
+import startedImg from './img/started.webp';
+import obtainingImg from './img/obtaining-qort.jpg';
 
 const checkIfGatewayIsOnline = async () => {
-    try {
-      const url = `https://ext-node.qortal.link/admin/status`;
-      const response = await fetch(url, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      const data = await response.json();
-      if (data?.height) {
-        return true
-      }
-      return false
-      
-    } catch (error) {
-      return false
-      
-    } 
+  try {
+    const url = `https://ext-node.qortal.link/admin/status`;
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const data = await response.json();
+    if (data?.height) {
+      return true;
+    }
+    return false;
+  } catch (error) {
+    return false;
   }
+};
 export const useHandleTutorials = () => {
   const [openTutorialModal, setOpenTutorialModal] = useState<any>(null);
-const [shownTutorials, setShowTutorials] = useState(null)
+  const [shownTutorials, setShowTutorials] = useState(null);
 
-useEffect(()=> {
+  useEffect(() => {
     try {
-        const storedData = localStorage.getItem('shown-tutorials');
+      const storedData = localStorage.getItem('shown-tutorials');
 
-
-    if (storedData) {
-      setShowTutorials(JSON.parse(storedData));
-    } else {
-        setShowTutorials({})
-    }
+      if (storedData) {
+        setShowTutorials(JSON.parse(storedData));
+      } else {
+        setShowTutorials({});
+      }
     } catch (error) {
-        //error
+      //error
     }
-}, [])
+  }, []);
 
-  const saveShowTutorial = useCallback((type)=> {
+  const saveShowTutorial = useCallback((type) => {
     try {
-
-        setShowTutorials((prev)=> {
-            return {
-                ...(prev || {}),
-                [type]: true
-            }
-        })
-        saveToLocalStorage('shown-tutorials', type, true)
+      setShowTutorials((prev) => {
+        return {
+          ...(prev || {}),
+          [type]: true,
+        };
+      });
+      saveToLocalStorage('shown-tutorials', type, true);
     } catch (error) {
-        //error
+      //error
     }
-  }, [])
-  const showTutorial = useCallback(async (type, isForce) => {
-    try {
-        const isOnline = await checkIfGatewayIsOnline()
-        if(!isOnline) return
+  }, []);
+  const showTutorial = useCallback(
+    async (type, isForce) => {
+      try {
+        const isOnline = await checkIfGatewayIsOnline();
+        if (!isOnline) return;
         switch (type) {
-            case "create-account":
-              {
-                  if((shownTutorials || {})['create-account'] && !isForce) return
-                  saveShowTutorial('create-account')
-                setOpenTutorialModal({
-                  title: "Account Creation",
-                  resource: {
-                    name: "a-test",
-                    service: "VIDEO",
-                    identifier: "account-creation-hub",
-                    poster: creationImg
-                  },
-                });
-              }
-              break;
-            case "important-information":
-              {
-                  if((shownTutorials || {})['important-information'] && !isForce) return
-                  saveShowTutorial('important-information')
+          case 'create-account':
+            {
+              if ((shownTutorials || {})['create-account'] && !isForce) return;
+              saveShowTutorial('create-account');
+              setOpenTutorialModal({
+                title: 'Account Creation',
+                resource: {
+                  name: 'a-test',
+                  service: 'VIDEO',
+                  identifier: 'account-creation-hub',
+                  poster: creationImg,
+                },
+              });
+            }
+            break;
+          case 'important-information':
+            {
+              if ((shownTutorials || {})['important-information'] && !isForce)
+                return;
+              saveShowTutorial('important-information');
 
-                setOpenTutorialModal({
-                  title: "Important Information!",
-                  resource: {
-                    name: "a-test",
-                    service: "VIDEO",
-                    identifier: "important-information-hub",
-                    poster: importantImg
-                  },
-                });
-              }
-              break;
-            case "getting-started":
-              {
-                  if((shownTutorials || {})['getting-started'] && !isForce) return
-                  saveShowTutorial('getting-started')
+              setOpenTutorialModal({
+                title: 'Important Information!',
+                resource: {
+                  name: 'a-test',
+                  service: 'VIDEO',
+                  identifier: 'important-information-hub',
+                  poster: importantImg,
+                },
+              });
+            }
+            break;
+          case 'getting-started':
+            {
+              if ((shownTutorials || {})['getting-started'] && !isForce) return;
+              saveShowTutorial('getting-started');
 
-                setOpenTutorialModal({
-                  multi: [
-                   
-                    {
-                      title: "1. Getting Started",
-                      resource: {
-                        name: "a-test",
-                        service: "VIDEO",
-                        identifier: "getting-started-hub",
-                        poster: startedImg
-                      },
-                    },
-                    {
-                        title: "2. Overview",
-                        resource: {
-                          name: "a-test",
-                          service: "VIDEO",
-                          identifier: "overview-hub",
-                          poster: overviewImg
-                        },
-                      },
-                    {
-                      title: "3. Qortal Groups",
-                      resource: {
-                        name: "a-test",
-                        service: "VIDEO",
-                        identifier: "groups-hub",
-                        poster: groupsImg
-                      },
-                    },
-                    {
-                      title: "4. Obtaining Qort",
-                      resource: {
-                        name: "a-test",
-                        service: "VIDEO",
-                        identifier: "obtaining-qort",
-                        poster: obtainingImg
-                      },
-                    },
-                  ],
-                });
-              }
-              break;
-              case "qapps":
+              setOpenTutorialModal({
+                multi: [
                   {
-                      if((shownTutorials || {})['qapps'] && !isForce) return
-                      saveShowTutorial('qapps')
+                    title: '1. Getting Started',
+                    resource: {
+                      name: 'a-test',
+                      service: 'VIDEO',
+                      identifier: 'getting-started-hub',
+                      poster: startedImg,
+                    },
+                  },
+                  {
+                    title: '2. Overview',
+                    resource: {
+                      name: 'a-test',
+                      service: 'VIDEO',
+                      identifier: 'overview-hub',
+                      poster: overviewImg,
+                    },
+                  },
+                  {
+                    title: '3. Qortal Groups',
+                    resource: {
+                      name: 'a-test',
+                      service: 'VIDEO',
+                      identifier: 'groups-hub',
+                      poster: groupsImg,
+                    },
+                  },
+                  {
+                    title: '4. Obtaining Qort',
+                    resource: {
+                      name: 'a-test',
+                      service: 'VIDEO',
+                      identifier: 'obtaining-qort',
+                      poster: obtainingImg,
+                    },
+                  },
+                ],
+              });
+            }
+            break;
+          case 'qapps':
+            {
+              if ((shownTutorials || {})['qapps'] && !isForce) return;
+              saveShowTutorial('qapps');
 
-                    setOpenTutorialModal({
-                      multi: [
-                        {
-                          title: "1. Apps Dashboard",
-                          resource: {
-                            name: "a-test",
-                            service: "VIDEO",
-                            identifier: "apps-dashboard-hub",
-                            poster: dashboardImg
-                          },
-                        },
-                        {
-                          title: "2. Apps Navigation",
-                          resource: {
-                            name: "a-test",
-                            service: "VIDEO",
-                            identifier: "apps-navigation-hub",
-                            poster: navigationImg
-                          },
-                        }
-                      ],
-                    });
-                  }
-                  break;
-            default:
-              break;
-          }
-    } catch (error) {
+              setOpenTutorialModal({
+                multi: [
+                  {
+                    title: '1. Apps Dashboard',
+                    resource: {
+                      name: 'a-test',
+                      service: 'VIDEO',
+                      identifier: 'apps-dashboard-hub',
+                      poster: dashboardImg,
+                    },
+                  },
+                  {
+                    title: '2. Apps Navigation',
+                    resource: {
+                      name: 'a-test',
+                      service: 'VIDEO',
+                      identifier: 'apps-navigation-hub',
+                      poster: navigationImg,
+                    },
+                  },
+                ],
+              });
+            }
+            break;
+          default:
+            break;
+        }
+      } catch (error) {
         //error
-    }
-  }, [shownTutorials]);
+      }
+    },
+    [shownTutorials]
+  );
   return {
     showTutorial,
-    hasSeenGettingStarted: shownTutorials === null ? null : !!(shownTutorials || {})['getting-started'],
+    hasSeenGettingStarted:
+      shownTutorials === null
+        ? null
+        : !!(shownTutorials || {})['getting-started'],
     openTutorialModal,
     setOpenTutorialModal,
-    shownTutorialsInitiated: !!shownTutorials
+    shownTutorialsInitiated: !!shownTutorials,
   };
 };