diff --git a/src/App.tsx b/src/App.tsx
index 4cb416a..ba2329b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -606,6 +606,7 @@ function App() {
             });
         });
     } catch (error) {
+      console.log(error);
     } finally {
       setIsLoading(false);
     }
diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx
index 631186b..15cdb9d 100644
--- a/src/components/Apps/Apps-styles.tsx
+++ b/src/components/Apps/Apps-styles.tsx
@@ -1,78 +1,78 @@
-import { Typography, Box, ButtonBase } from "@mui/material";
-import { styled } from "@mui/system";
+import { Typography, Box, ButtonBase } from '@mui/material';
+import { styled } from '@mui/system';
 
 export const AppsParent = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column",
-  height: "100%",
-  alignItems: "center",
-  overflow: "auto",
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+  height: '100%',
+  alignItems: 'center',
+  overflow: 'auto',
   // For WebKit-based browsers (Chrome, Safari, etc.)
-  "::-webkit-scrollbar": {
-    width: "0px", // Set the width to 0 to hide the scrollbar
-    height: "0px", // Set the height to 0 for horizontal scrollbar
+  '::-webkit-scrollbar': {
+    width: '0px', // Set the width to 0 to hide the scrollbar
+    height: '0px', // Set the height to 0 for horizontal scrollbar
   },
 
   // For Firefox
-  scrollbarWidth: "none", // Hides the scrollbar in Firefox
+  scrollbarWidth: 'none', // Hides the scrollbar in Firefox
 
   // Optional for better cross-browser consistency
-  "-msOverflowStyle": "none", // Hides scrollbar in IE and Edge
+  '-msOverflowStyle': 'none', // Hides scrollbar in IE and Edge
 
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "90%",
-  justifyContent: "space-evenly",
-  gap: "24px",
-  flexWrap: "wrap",
-  alignItems: "flex-start",
-  alignSelf: "center",
+  display: 'flex',
+  width: '90%',
+  justifyContent: 'space-evenly',
+  gap: '24px',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  alignSelf: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsLibraryContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column",
-  justifyContent: "flex-start",
-  alignItems: "center",
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
   backgroundColor: theme.palette.background.paper,
 }));
 
 export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "90%",
-  flexDirection: "column",
-  justifyContent: "flex-start",
-  alignItems: "flex-start",
+  display: 'flex',
+  width: '90%',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  alignItems: 'flex-start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsSearchContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "90%",
-  justifyContent: "space-between",
-  alignItems: "center",
-  borderRadius: "8px",
-  padding: "0px 10px",
-  height: "36px",
+  display: 'flex',
+  width: '90%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  borderRadius: '8px',
+  padding: '0px 10px',
+  height: '36px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsSearchLeft = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "90%",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: "10px",
+  display: 'flex',
+  width: '90%',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  gap: '10px',
   flexGrow: 1,
   flexShrink: 0,
   backgroundColor: theme.palette.background.default,
@@ -80,51 +80,50 @@ export const AppsSearchLeft = styled(Box)(({ theme }) => ({
 }));
 
 export const AppsSearchRight = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "90%",
-  justifyContent: "flex-end",
-  alignItems: "center",
+  display: 'flex',
+  width: '90%',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
   flexShrink: 1,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppCircleContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: "5px",
-  alignItems: "center",
-  width: "100%",
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '5px',
+  alignItems: 'center',
+  width: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const Add = styled(Typography)(({ theme }) => ({
-  fontSize: "36px",
+  fontSize: '36px',
   fontWeight: 500,
-  lineHeight: "43.57px",
-  textAlign: "left",
+  lineHeight: '43.57px',
+  textAlign: 'left',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppCircleLabel = styled(Typography)(({ theme }) => ({
-  fontSize: "14px",
-  fontWeight: 500,
-  lineHeight: 1.2,
-  // whiteSpace: 'nowrap',
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  width: "120%",
-  "-webkit-line-clamp": "2",
-  "-webkit-box-orient": "vertical",
-  display: "-webkit-box",
+  '-webkit-box-orient': 'vertical',
+  '-webkit-line-clamp': '2',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: '-webkit-box',
+  fontSize: '14px',
+  fontWeight: 500,
+  lineHeight: 1.2,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  width: '120%',
 }));
 
 export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
-  fontSize: "16px",
+  fontSize: '16px',
   fontWeight: 500,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -132,58 +131,63 @@ export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppCircle = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "75px",
-  flexDirection: "column",
-  height: "75px",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "50%",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
+  borderColor:
+    theme.palette.mode === 'dark'
+      ? 'rgb(209, 209, 209)'
+      : 'rgba(41, 41, 43, 1)',
+  borderWidth: '1px',
+  borderRadius: '50%',
+  borderStyle: 'solid',
   color: theme.palette.text.primary,
-  border: "1px solid #FFFFFF",
+  display: 'flex',
+  flexDirection: 'column',
+  height: '75px',
+  justifyContent: 'center',
+  width: '75px',
 }));
 
 export const AppInfoSnippetContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  width: "100%",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
 }));
 
 export const AppInfoSnippetLeft = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: "12px",
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  gap: '12px',
+  justifyContent: 'flex-start',
 }));
 
 export const AppInfoSnippetRight = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center",
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppDownloadButton = styled(ButtonBase)(({ theme }) => ({
-  backgroundColor: "#247C0E",
+  backgroundColor: '#247C0E',
   color: theme.palette.text.primary,
-  width: "101px",
-  height: "29px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  borderRadius: "25px",
-  alignSelf: "center",
+  width: '101px',
+  height: '29px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '25px',
+  alignSelf: 'center',
 }));
 
 export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
-  fontSize: "14px",
+  fontSize: '14px',
   fontWeight: 500,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -191,50 +195,50 @@ export const AppDownloadButtonText = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppPublishTagsContainer = styled(Box)(({ theme }) => ({
-  gap: "10px",
-  flexWrap: "wrap",
-  justifyContent: "flex-start",
-  width: "100%",
-  display: "flex",
+  gap: '10px',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-start',
+  width: '100%',
+  display: 'flex',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppInfoSnippetMiddle = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "flex-start",
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppInfoAppName = styled(Typography)(({ theme }) => ({
-  fontSize: "16px",
+  fontSize: '16px',
   fontWeight: 500,
   lineHeight: 1.2,
-  textAlign: "start",
+  textAlign: 'start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppInfoUserName = styled(Typography)(({ theme }) => ({
-  fontSize: "13px",
+  fontSize: '13px',
   fontWeight: 400,
   lineHeight: 1.2,
-  textAlign: "start",
+  textAlign: 'start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsNavBarParent = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  width: "100%",
-  height: "60px",
-  padding: "0px 10px",
-  position: "fixed",
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  height: '60px',
+  padding: '0px 10px',
+  position: 'fixed',
   bottom: 0,
   zIndex: 1,
   backgroundColor: theme.palette.background.default,
@@ -242,120 +246,120 @@ export const AppsNavBarParent = styled(Box)(({ theme }) => ({
 }));
 
 export const AppsNavBarLeft = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
   flexGrow: 1,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsNavBarRight = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center",
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const TabParent = styled(Box)(({ theme }) => ({
-  height: "36px",
-  width: "36px",
-  position: "relative",
-  borderRadius: "50%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
+  height: '36px',
+  width: '36px',
+  position: 'relative',
+  borderRadius: '50%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  width: "100%",
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center",
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
-  width: "101px",
-  height: "29px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  borderRadius: "25px",
-  border: "1px solid #FFFFFF",
+  width: '101px',
+  height: '29px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '25px',
+  border: '1px solid #FFFFFF',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "60px",
-  height: "60px",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '60px',
+  height: '60px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
-  fontSize: "10px",
+  fontSize: '10px',
   fontWeight: 400,
   lineHeight: 1.2,
-  fontStyle: "italic",
+  fontStyle: 'italic',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
-  width: "101px",
-  height: "30px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  borderRadius: "5px",
+  width: '101px',
+  height: '30px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '5px',
   fontWeight: 600,
-  fontSize: "10px",
+  fontSize: '10px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsCategoryInfo = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  width: "100%",
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsCategoryInfoSub = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
+  display: 'flex',
+  flexDirection: 'column',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({
-  fontSize: "12px",
+  fontSize: '12px',
   fontWeight: 700,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -363,7 +367,7 @@ export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
-  fontSize: "12px",
+  fontSize: '12px',
   fontWeight: 500,
   lineHeight: 1.2,
   backgroundColor: theme.palette.background.default,
@@ -371,11 +375,11 @@ export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
 }));
 
 export const AppsInfoDescription = styled(Typography)(({ theme }) => ({
-  fontSize: "13px",
+  fontSize: '13px',
   fontWeight: 300,
   lineHeight: 1.2,
-  width: "90%",
-  textAlign: "start",
+  width: '90%',
+  textAlign: 'start',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
diff --git a/src/components/Apps/AppsDevModeTabComponent.tsx b/src/components/Apps/AppsDevModeTabComponent.tsx
index 46372a5..e25bf11 100644
--- a/src/components/Apps/AppsDevModeTabComponent.tsx
+++ b/src/components/Apps/AppsDevModeTabComponent.tsx
@@ -1,22 +1,21 @@
-import React from "react";
-import { TabParent } from "./Apps-styles";
-import NavCloseTab from "../../assets/svgs/NavCloseTab.svg";
-import { getBaseApiReact } from "../../App";
-import { Avatar, ButtonBase } from "@mui/material";
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
-import { executeEvent } from "../../utils/events";
+import { TabParent } from './Apps-styles';
+import NavCloseTab from '../../assets/svgs/NavCloseTab.svg';
+import { getBaseApiReact } from '../../App';
+import { Avatar, ButtonBase } from '@mui/material';
+import LogoSelected from '../../assets/svgs/LogoSelected.svg';
+import { executeEvent } from '../../utils/events';
 
 export const AppsDevModeTabComponent = ({ isSelected, app }) => {
   return (
     <ButtonBase
       onClick={() => {
         if (isSelected) {
-          executeEvent("removeTabDevMode", {
+          executeEvent('removeTabDevMode', {
             data: app,
           });
           return;
         }
-        executeEvent("setSelectedTabDevMode", {
+        executeEvent('setSelectedTabDevMode', {
           data: app,
           isDevMode: true,
         });
@@ -24,15 +23,15 @@ export const AppsDevModeTabComponent = ({ isSelected, app }) => {
     >
       <TabParent
         sx={{
-          border: isSelected && "1px solid #FFFFFF",
+          border: isSelected && '1px solid #FFFFFF',
         }}
       >
         {isSelected && (
           <img
             style={{
-              position: "absolute",
-              top: "-5px",
-              right: "-5px",
+              position: 'absolute',
+              top: '-5px',
+              right: '-5px',
               zIndex: 1,
             }}
             src={NavCloseTab}
@@ -40,23 +39,25 @@ export const AppsDevModeTabComponent = ({ isSelected, app }) => {
         )}
         <Avatar
           sx={{
-            height: "28px",
-            width: "28px",
+            height: '28px',
+            width: '28px',
           }}
           alt=""
           src={``}
         >
           <img
             style={{
-              width: "28px",
-              height: "auto",
+              width: '28px',
+              height: 'auto',
             }}
-            src={ app?.customIcon ? app?.customIcon :
-              app?.service
-                ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
-                    app?.name
-                  }/qortal_avatar?async=true`
-                : LogoSelected
+            src={
+              app?.customIcon
+                ? app?.customIcon
+                : app?.service
+                  ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                      app?.name
+                    }/qortal_avatar?async=true`
+                  : LogoSelected
             }
             alt="center-icon"
           />
diff --git a/src/components/Apps/AppsHome.tsx b/src/components/Apps/AppsHome.tsx
index 81fc9b8..4b5b030 100644
--- a/src/components/Apps/AppsHome.tsx
+++ b/src/components/Apps/AppsHome.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState } from 'react';
 import {
   AppCircle,
   AppCircleContainer,
@@ -6,52 +6,51 @@ import {
   AppLibrarySubTitle,
   AppsContainer,
   AppsParent,
-} from "./Apps-styles";
-import { Avatar, ButtonBase } from "@mui/material";
-import { Add } from "@mui/icons-material";
-import { getBaseApiReact, isMobile } from "../../App";
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
-import { executeEvent } from "../../utils/events";
-import { SortablePinnedApps } from "./SortablePinnedApps";
-import { Spacer } from "../../common/Spacer";
+} from './Apps-styles';
+import { Avatar, ButtonBase } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { getBaseApiReact, isMobile } from '../../App';
+import LogoSelected from '../../assets/svgs/LogoSelected.svg';
+import { executeEvent } from '../../utils/events';
+import { SortablePinnedApps } from './SortablePinnedApps';
+import { Spacer } from '../../common/Spacer';
 
-export const AppsHome = ({  setMode, myApp, myWebsite, availableQapps  }) => {
+export const AppsHome = ({ setMode, myApp, myWebsite, availableQapps }) => {
   return (
     <>
-    <AppsContainer
+      <AppsContainer
         sx={{
-        
-          justifyContent: "flex-start",
+          justifyContent: 'flex-start',
         }}
       >
-    <AppLibrarySubTitle
-   
-  >
-    Apps Dashboard
-
-  </AppLibrarySubTitle>
-  </AppsContainer>
-  <Spacer height="20px" />
+        <AppLibrarySubTitle>Apps Dashboard</AppLibrarySubTitle>
+      </AppsContainer>
+      <Spacer height="20px" />
 
       <AppsContainer>
         <ButtonBase
           onClick={() => {
-            setMode("library");
+            setMode('library');
           }}
         >
-          <AppCircleContainer sx={{
-              gap: !isMobile ? "10px" : "5px",
-            }}>
+          <AppCircleContainer
+            sx={{
+              gap: !isMobile ? '10px' : '5px',
+            }}
+          >
             <AppCircle>
               <Add>+</Add>
             </AppCircle>
             <AppCircleLabel>Library</AppCircleLabel>
           </AppCircleContainer>
         </ButtonBase>
-       
-        <SortablePinnedApps availableQapps={availableQapps} myWebsite={myWebsite} myApp={myApp}  />
-    
+
+        <SortablePinnedApps
+          availableQapps={availableQapps}
+          myWebsite={myWebsite}
+          myApp={myApp}
+        />
       </AppsContainer>
-      </>
+    </>
   );
 };
diff --git a/src/components/Apps/AppsLibrary.tsx b/src/components/Apps/AppsLibrary.tsx
index 3eee1c2..c79e1af 100644
--- a/src/components/Apps/AppsLibrary.tsx
+++ b/src/components/Apps/AppsLibrary.tsx
@@ -58,6 +58,8 @@ const officialAppList = [
   'q-search',
 ];
 
+// TODO: apply dark/light style
+
 const ScrollerStyled = styled('div')({
   // Hide scrollbar for WebKit browsers (Chrome, Safari)
   '::-webkit-scrollbar': {