diff --git a/src/components/Apps/AppsCategory.tsx b/src/components/Apps/AppsCategory.tsx
index 4871026..be10853 100644
--- a/src/components/Apps/AppsCategory.tsx
+++ b/src/components/Apps/AppsCategory.tsx
@@ -1,4 +1,11 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   AppCircle,
   AppCircleContainer,
@@ -16,84 +23,81 @@ import {
   PublishQAppCTAParent,
   PublishQAppCTARight,
   PublishQAppDotsBG,
-} from "./Apps-styles";
-import { Avatar, Box, ButtonBase, InputBase, styled } from "@mui/material";
-import { Add } from "@mui/icons-material";
-import { MyContext, getBaseApiReact } from "../../App";
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
-import IconSearch from "../../assets/svgs/Search.svg";
-import IconClearInput from "../../assets/svgs/ClearInput.svg";
-import qappDevelopText from "../../assets/svgs/qappDevelopText.svg";
-import qappDots from "../../assets/svgs/qappDots.svg";
+} from './Apps-styles';
+import { Avatar, Box, ButtonBase, InputBase, styled } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { MyContext, getBaseApiReact } from '../../App';
+import LogoSelected from '../../assets/svgs/LogoSelected.svg';
+import IconSearch from '../../assets/svgs/Search.svg';
+import IconClearInput from '../../assets/svgs/ClearInput.svg';
+import qappDevelopText from '../../assets/svgs/qappDevelopText.svg';
+import qappDots from '../../assets/svgs/qappDots.svg';
 
-import { Spacer } from "../../common/Spacer";
-import { AppInfoSnippet } from "./AppInfoSnippet";
-import { Virtuoso } from "react-virtuoso";
-import { executeEvent } from "../../utils/events";
+import { Spacer } from '../../common/Spacer';
+import { AppInfoSnippet } from './AppInfoSnippet';
+import { Virtuoso } from 'react-virtuoso';
+import { executeEvent } from '../../utils/events';
 const officialAppList = [
-  "q-tube",
-  "q-blog",
-  "q-share",
-  "q-support",
-  "q-mail",
-  "q-fund",
-  "q-shop",
-  "q-trade",
-  "q-support",
-  "q-manager",
-  "q-wallets",
-  "q-search",
-  "q-nodecontrol"
+  'q-tube',
+  'q-blog',
+  'q-share',
+  'q-support',
+  'q-mail',
+  'q-fund',
+  'q-shop',
+  'q-trade',
+  'q-support',
+  'q-manager',
+  'q-wallets',
+  'q-search',
+  'q-nodecontrol',
 ];
 
 const ScrollerStyled = styled('div')({
-    // Hide scrollbar for WebKit browsers (Chrome, Safari)
-    "::-webkit-scrollbar": {
-      width: "0px",
-      height: "0px",
-    },
-    
-    // Hide scrollbar for Firefox
-    scrollbarWidth: "none",
-  
-    // Hide scrollbar for IE and older Edge
-    "-msOverflowStyle": "none",
-  });
-  
-  const StyledVirtuosoContainer = styled('div')({
-    position: 'relative',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    
-    // Hide scrollbar for WebKit browsers (Chrome, Safari)
-    "::-webkit-scrollbar": {
-      width: "0px",
-      height: "0px",
-    },
-    
-    // Hide scrollbar for Firefox
-    scrollbarWidth: "none",
-  
-    // Hide scrollbar for IE and older Edge
-    "-msOverflowStyle": "none",
-  });
+  // Hide scrollbar for WebKit browsers (Chrome, Safari)
+  '::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
 
-export const AppsCategory = ({  availableQapps,  myName, category, isShow }) => {
-  const [searchValue, setSearchValue] = useState("");
+  // Hide scrollbar for Firefox
+  scrollbarWidth: 'none',
+
+  // Hide scrollbar for IE and older Edge
+  '-msOverflowStyle': 'none',
+});
+
+const StyledVirtuosoContainer = styled('div')({
+  position: 'relative',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+
+  // Hide scrollbar for WebKit browsers (Chrome, Safari)
+  '::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+
+  // Hide scrollbar for Firefox
+  scrollbarWidth: 'none',
+
+  // Hide scrollbar for IE and older Edge
+  '-msOverflowStyle': 'none',
+});
+
+export const AppsCategory = ({ availableQapps, myName, category, isShow }) => {
+  const [searchValue, setSearchValue] = useState('');
   const virtuosoRef = useRef();
   const { rootHeight } = useContext(MyContext);
 
-
-  
   const categoryList = useMemo(() => {
     return availableQapps.filter(
-      (app) =>
-        app?.metadata?.category === category?.id
+      (app) => app?.metadata?.category === category?.id
     );
   }, [availableQapps, category]);
 
-  const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value
+  const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value
 
   // Debounce logic
   useEffect(() => {
@@ -110,30 +114,36 @@ export const AppsCategory = ({  availableQapps,  myName, category, isShow }) =>
   // Example: Perform search or other actions based on debouncedValue
 
   const searchedList = useMemo(() => {
-    if (!debouncedValue) return categoryList
+    if (!debouncedValue) return categoryList;
     return categoryList.filter((app) =>
       app.name.toLowerCase().includes(debouncedValue.toLowerCase())
     );
   }, [debouncedValue, categoryList]);
 
   const rowRenderer = (index) => {
-   
     let app = searchedList[index];
-    return <AppInfoSnippet key={`${app?.service}-${app?.name}`} app={app} myName={myName} isFromCategory={true} />;
+    return (
+      <AppInfoSnippet
+        key={`${app?.service}-${app?.name}`}
+        app={app}
+        myName={myName}
+        isFromCategory={true}
+      />
+    );
   };
 
-
-
   return (
-      <AppsLibraryContainer sx={{
-        display: !isShow && 'none'
-      }}>
-        <AppsWidthLimiter>
+    <AppsLibraryContainer
+      sx={{
+        display: !isShow && 'none',
+      }}
+    >
+      <AppsWidthLimiter>
         <Box
           sx={{
-            display: "flex",
-            width: "100%",
-            justifyContent: "center",
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'center',
           }}
         >
           <AppsSearchContainer>
@@ -145,8 +155,8 @@ export const AppsCategory = ({  availableQapps,  myName, category, isShow }) =>
                 sx={{ ml: 1, flex: 1 }}
                 placeholder="Search for apps"
                 inputProps={{
-                  "aria-label": "Search for apps",
-                  fontSize: "16px",
+                  'aria-label': 'Search for apps',
+                  fontSize: '16px',
                   fontWeight: 400,
                 }}
               />
@@ -155,7 +165,7 @@ export const AppsCategory = ({  availableQapps,  myName, category, isShow }) =>
               {searchValue && (
                 <ButtonBase
                   onClick={() => {
-                    setSearchValue("");
+                    setSearchValue('');
                   }}
                 >
                   <img src={IconClearInput} />
@@ -164,30 +174,31 @@ export const AppsCategory = ({  availableQapps,  myName, category, isShow }) =>
             </AppsSearchRight>
           </AppsSearchContainer>
         </Box>
-        </AppsWidthLimiter>
+      </AppsWidthLimiter>
+      <Spacer height="25px" />
+      <AppsWidthLimiter>
+        <AppLibrarySubTitle>{`Category: ${category?.name}`}</AppLibrarySubTitle>
+
         <Spacer height="25px" />
-        <AppsWidthLimiter>
-            <AppLibrarySubTitle>{`Category: ${category?.name}`}</AppLibrarySubTitle>
-            
-            <Spacer height="25px" />
-            </AppsWidthLimiter>
-           <AppsWidthLimiter>
-          <StyledVirtuosoContainer sx={{
-            height: rootHeight
-          }}>
-            <Virtuoso
-              ref={virtuosoRef}
-              data={searchedList}
-              itemContent={rowRenderer}
-              atBottomThreshold={50}
-              followOutput="smooth"
-              components={{
-                Scroller: ScrollerStyled // Use the styled scroller component
-              }}
-            />
-          </StyledVirtuosoContainer>
-          </AppsWidthLimiter>
-        
-      </AppsLibraryContainer>
+      </AppsWidthLimiter>
+      <AppsWidthLimiter>
+        <StyledVirtuosoContainer
+          sx={{
+            height: rootHeight,
+          }}
+        >
+          <Virtuoso
+            ref={virtuosoRef}
+            data={searchedList}
+            itemContent={rowRenderer}
+            atBottomThreshold={50}
+            followOutput="smooth"
+            components={{
+              Scroller: ScrollerStyled, // Use the styled scroller component
+            }}
+          />
+        </StyledVirtuosoContainer>
+      </AppsWidthLimiter>
+    </AppsLibraryContainer>
   );
 };