added sidebar

src/App.tsx

@@ -1215,9 +1215,10 @@ function App() {
     return (
       <AuthenticatedContainer
         sx={{
-          width: isMobile ? "100vw" : "350px",
+          width: isMobile ? "100vw" : "auto",
           display: "flex",
           backgroundColor: "var(--bg-2)",
+          justifyContent: 'flex-end'
         }}
       >
         {isMobile && (
@@ -1239,162 +1240,166 @@ function App() {
             />
           </Box>
         )}
+  {desktopViewMode !== "apps" && desktopViewMode !== "dev" && desktopViewMode !== "chat" && (
+      <AuthenticatedContainerInnerLeft
+      sx={{
+        overflowY: isMobile && "auto",
+        padding: '0px 20px'
+      }}
+    >
+      <Spacer height="48px" />
 
-        <AuthenticatedContainerInnerLeft
+      {authenticatedMode === "ltc" ? (
-          sx={{
+        <>
-            overflowY: isMobile && "auto",
+          <img src={ltcLogo} />
-          }}
+          <Spacer height="32px" />
-        >
+          <CopyToClipboard text={rawWallet?.ltcAddress}>
-          <Spacer height="48px" />
+            <AddressBox>
-
+              {rawWallet?.ltcAddress?.slice(0, 6)}...
-          {authenticatedMode === "ltc" ? (
+              {rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
-            <>
+            </AddressBox>
-              <img src={ltcLogo} />
+          </CopyToClipboard>
-              <Spacer height="32px" />
+          <Spacer height="10px" />
-              <CopyToClipboard text={rawWallet?.ltcAddress}>
+          {ltcBalanceLoading && (
-                <AddressBox>
+            <CircularProgress color="success" size={16} />
-                  {rawWallet?.ltcAddress?.slice(0, 6)}...
+          )}
-                  {rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
+          {!isNaN(+ltcBalance) && !ltcBalanceLoading && (
-                </AddressBox>
+            <Box
-              </CopyToClipboard>
+              sx={{
-              <Spacer height="10px" />
+                gap: "10px",
-              {ltcBalanceLoading && (
+                display: "flex",
-                <CircularProgress color="success" size={16} />
+                alignItems: "center",
-              )}
+              }}
-              {!isNaN(+ltcBalance) && !ltcBalanceLoading && (
+            >
-                <Box
-                  sx={{
-                    gap: "10px",
-                    display: "flex",
-                    alignItems: "center",
-                  }}
-                >
-                  <TextP
-                    sx={{
-                      textAlign: "center",
-                      lineHeight: "24px",
-                      fontSize: "20px",
-                      fontWeight: 700,
-                    }}
-                  >
-                    {ltcBalance} LTC
-                  </TextP>
-                  <RefreshIcon
-                    onClick={getLtcBalanceFunc}
-                    sx={{
-                      fontSize: "16px",
-                      color: "white",
-                      cursor: "pointer",
-                    }}
-                  />
-                </Box>
-              )}
-              <AddressQRCode targetAddress={rawWallet?.ltcAddress} />
-            </>
-          ) : (
-            <>
-              <MainAvatar myName={userInfo?.name} />
-              <Spacer height="32px" />
               <TextP
                 sx={{
                   textAlign: "center",
                   lineHeight: "24px",
                   fontSize: "20px",
+                  fontWeight: 700,
                 }}
               >
-                {userInfo?.name}
+                {ltcBalance} LTC
               </TextP>
-              <Spacer height="10px" />
+              <RefreshIcon
-              <CopyToClipboard text={rawWallet?.address0}>
+                onClick={getLtcBalanceFunc}
-                <AddressBox>
+                sx={{
-                  {rawWallet?.address0?.slice(0, 6)}...
+                  fontSize: "16px",
-                  {rawWallet?.address0?.slice(-4)} <img src={Copy} />
+                  color: "white",
-                </AddressBox>
+                  cursor: "pointer",
-              </CopyToClipboard>
-              <Spacer height="10px" />
-              {qortBalanceLoading && (
-                <CircularProgress color="success" size={16} />
-              )}
-              {!qortBalanceLoading && balance >= 0 && (
-                <Box
-                  sx={{
-                    gap: "10px",
-                    display: "flex",
-                    alignItems: "center",
-                  }}
-                >
-                  <TextP
-                    sx={{
-                      textAlign: "center",
-                      lineHeight: "24px",
-                      fontSize: "20px",
-                      fontWeight: 700,
-                    }}
-                  >
-                    {balance?.toFixed(2)} QORT
-                  </TextP>
-                  <RefreshIcon
-                    onClick={getBalanceFunc}
-                    sx={{
-                      fontSize: "16px",
-                      color: "white",
-                      cursor: "pointer",
-                    }}
-                  />
-                </Box>
-              )}
-
-              <Spacer height="35px" />
-              {userInfo && !userInfo?.name && (
-                <TextP
-                  ref={registerNamePopoverRef}
-                  sx={{
-                    textAlign: "center",
-                    lineHeight: 1.2,
-                    fontSize: "16px",
-                    fontWeight: 500,
-                    cursor: "pointer",
-                    marginTop: "10px",
-                    color: "red",
-                    textDecoration: "underline",
-                  }}
-                  onClick={() => {
-                    setOpenRegisterName(true);
-                  }}
-                >
-                  REGISTER NAME
-                </TextP>
-              )}
-              <Spacer height="20px" />
-              <CustomButton
-                onClick={() => {
-                  setIsOpenSendQort(true);
-                  // setExtstate("send-qort");
-                  setIsOpenDrawerProfile(false);
                 }}
-              >
+              />
-                Transfer QORT
+            </Box>
-              </CustomButton>
-              <AddressQRCode targetAddress={rawWallet?.address0} />
-            </>
           )}
+          <AddressQRCode targetAddress={rawWallet?.ltcAddress} />
+        </>
+      ) : (
+        <>
+          <MainAvatar myName={userInfo?.name} />
+          <Spacer height="32px" />
           <TextP
             sx={{
               textAlign: "center",
               lineHeight: "24px",
-              fontSize: "12px",
+              fontSize: "20px",
-              fontWeight: 500,
-              cursor: "pointer",
-              marginTop: "10px",
-              textDecoration: "underline",
-            }}
-            onClick={async () => {
-              window.electronAPI.openExternal("https://www.qort.trade");
             }}
           >
-            Get QORT at qort.trade
+            {userInfo?.name}
           </TextP>
-        </AuthenticatedContainerInnerLeft>
+          <Spacer height="10px" />
+          <CopyToClipboard text={rawWallet?.address0}>
+            <AddressBox>
+              {rawWallet?.address0?.slice(0, 6)}...
+              {rawWallet?.address0?.slice(-4)} <img src={Copy} />
+            </AddressBox>
+          </CopyToClipboard>
+          <Spacer height="10px" />
+          {qortBalanceLoading && (
+            <CircularProgress color="success" size={16} />
+          )}
+          {!qortBalanceLoading && balance >= 0 && (
+            <Box
+              sx={{
+                gap: "10px",
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <TextP
+                sx={{
+                  textAlign: "center",
+                  lineHeight: "24px",
+                  fontSize: "20px",
+                  fontWeight: 700,
+                }}
+              >
+                {balance?.toFixed(2)} QORT
+              </TextP>
+              <RefreshIcon
+                onClick={getBalanceFunc}
+                sx={{
+                  fontSize: "16px",
+                  color: "white",
+                  cursor: "pointer",
+                }}
+              />
+            </Box>
+          )}
+
+          <Spacer height="35px" />
+          {userInfo && !userInfo?.name && (
+            <TextP
+              ref={registerNamePopoverRef}
+              sx={{
+                textAlign: "center",
+                lineHeight: 1.2,
+                fontSize: "16px",
+                fontWeight: 500,
+                cursor: "pointer",
+                marginTop: "10px",
+                color: "red",
+                textDecoration: "underline",
+              }}
+              onClick={() => {
+                setOpenRegisterName(true);
+              }}
+            >
+              REGISTER NAME
+            </TextP>
+          )}
+          <Spacer height="20px" />
+          <CustomButton
+            onClick={() => {
+              setIsOpenSendQort(true);
+              // setExtstate("send-qort");
+              setIsOpenDrawerProfile(false);
+            }}
+          >
+            Transfer QORT
+          </CustomButton>
+          <AddressQRCode targetAddress={rawWallet?.address0} />
+        </>
+      )}
+      <TextP
+        sx={{
+          textAlign: "center",
+          lineHeight: "24px",
+          fontSize: "12px",
+          fontWeight: 500,
+          cursor: "pointer",
+          marginTop: "10px",
+          textDecoration: "underline",
+        }}
+        onClick={async () => {
+          window.electronAPI.openExternal("https://www.qort.trade");
+        }}
+      >
+        Get QORT at qort.trade
+      </TextP>
+    </AuthenticatedContainerInnerLeft>
+  )}
+      
+        
         <AuthenticatedContainerInnerRight>
           <Spacer height="20px" />
           <img
@@ -1473,10 +1478,10 @@ function App() {
     <AppContainer
       sx={{
         height: isMobile ? "100%" : "100vh",
-        backgroundImage: desktopViewMode === "apps" && 'url("appsBg.svg")',
+        // backgroundImage: desktopViewMode === "apps" && 'url("appsBg.svg")',
-        backgroundSize: desktopViewMode === "apps" && "cover",
+        // backgroundSize: desktopViewMode === "apps" && "cover",
-        backgroundPosition: desktopViewMode === "apps" && "center",
+        // backgroundPosition: desktopViewMode === "apps" && "center",
-        backgroundRepeat: desktopViewMode === "apps" && "no-repeat",
+        // backgroundRepeat: desktopViewMode === "apps" && "no-repeat",
       }}
     >
       {extState === "not-authenticated" && (
@@ -1534,7 +1539,7 @@ function App() {
               desktopViewMode={desktopViewMode}
               setDesktopViewMode={setDesktopViewMode}
             />
-            {!isMobile && desktopViewMode !== "apps" && desktopViewMode !== "dev" && renderProfile()}
+            {!isMobile &&  renderProfile()}
           </Box>
 
           <Box

src/assets/Icons/AppsIcon.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+export const AppsIcon = ({ color, height = 31, width = 31 }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.76596 7.53192C5.84584 7.53192 7.53192 5.84584 7.53192 3.76596C7.53192 1.68608 5.84584 0 3.76596 0C1.68608 0 0 1.68608 0 3.76596C0 5.84584 1.68608 7.53192 3.76596 7.53192Z"
+        fill={color}
+      />
+      <path
+        d="M15 7.53192C17.0799 7.53192 18.766 5.84584 18.766 3.76596C18.766 1.68608 17.0799 0 15 0C12.9201 0 11.2341 1.68608 11.2341 3.76596C11.2341 5.84584 12.9201 7.53192 15 7.53192Z"
+        fill={color}
+      />
+      <path
+        d="M26.234 7.53192C28.3139 7.53192 30 5.84584 30 3.76596C30 1.68608 28.3139 0 26.234 0C24.1542 0 22.4681 1.68608 22.4681 3.76596C22.4681 5.84584 24.1542 7.53192 26.234 7.53192Z"
+        fill={color}
+      />
+      <path
+        d="M3.76596 30.0001C5.84584 30.0001 7.53192 28.314 7.53192 26.2341C7.53192 24.1542 5.84584 22.4681 3.76596 22.4681C1.68608 22.4681 0 24.1542 0 26.2341C0 28.314 1.68608 30.0001 3.76596 30.0001Z"
+        fill={color}
+      />
+      <path
+        d="M15 30.0002C17.0799 30.0002 18.766 28.3141 18.766 26.2342C18.766 24.1543 17.0799 22.4683 15 22.4683C12.9201 22.4683 11.2341 24.1543 11.2341 26.2342C11.2341 28.3141 12.9201 30.0002 15 30.0002Z"
+        fill={color}
+      />
+      <path
+        d="M26.234 30.0002C28.3139 30.0002 30 28.3141 30 26.2342C30 24.1543 28.3139 22.4683 26.234 22.4683C24.1542 22.4683 22.4681 24.1543 22.4681 26.2342C22.4681 28.3141 24.1542 30.0002 26.234 30.0002Z"
+        fill={color}
+      />
+      <path
+        d="M3.76596 18.766C5.84584 18.766 7.53192 17.08 7.53192 15.0001C7.53192 12.9202 5.84584 11.2341 3.76596 11.2341C1.68608 11.2341 0 12.9202 0 15.0001C0 17.08 1.68608 18.766 3.76596 18.766Z"
+        fill={color}
+      />
+      <path
+        d="M15 18.766C17.0799 18.766 18.766 17.08 18.766 15.0001C18.766 12.9202 17.0799 11.2341 15 11.2341C12.9201 11.2341 11.2341 12.9202 11.2341 15.0001C11.2341 17.08 12.9201 18.766 15 18.766Z"
+        fill={color}
+      />
+      <path
+        d="M26.234 18.766C28.3139 18.766 30 17.08 30 15.0001C30 12.9202 28.3139 11.2341 26.234 11.2341C24.1542 11.2341 22.4681 12.9202 22.4681 15.0001C22.4681 17.08 24.1542 18.766 26.234 18.766Z"
+        fill={color}
+      />
+    </svg>
+  );
+};

src/components/AddressQRCode.tsx

@@ -1,36 +1,72 @@
-
+import React, { useState } from "react";
-import React from 'react';
+import QRCode from "react-qr-code";
-import QRCode from 'react-qr-code';
+import { TextP } from "../App-styles";
-import { TextP } from '../App-styles';
+import { Box, Typography } from "@mui/material";
-import { Box } from '@mui/material';
 
 export const AddressQRCode = ({ targetAddress }) => {
+  const [open, setOpen] = useState(false);
   return (
-    <Box sx={{
+    <Box
-      display: 'flex',
+      sx={{
-      gap: '10px',
+        display: "flex",
-      width: '100%',
+        gap: "10px",
-      alignItems: 'center',
+        alignItems: "center",
-      flexDirection: 'column',
+        flexDirection: "column",
-      marginTop: '20px'
+        marginTop: '10px'
-    }}>
+      }}
-      <TextP
+    >
-                sx={{
+      <Typography
-                  textAlign: "center",
+        sx={{
-                  lineHeight: 1.2,
+          cursor: "pointer",
-                  fontSize: "16px",
+          fontSize: "14px",
-                  fontWeight: 500,
+        }}
-                }}
+        onClick={() => {
-              >
+          setOpen((prev)=> !prev);
-                Your address
+        }}
-              </TextP>
+      >
-      <QRCode 
+        {open ? 'Hide QR code' :'See QR code'}
-        value={targetAddress}  // Your address here
+      </Typography>
-        size={180}          // Adjust size as needed
+
-        level="M"           // Error correction level (L, M, Q, H)
+      {open && (
-        bgColor="#FFFFFF"   // Background color (white)
+        <Box
-        fgColor="#000000"   // Foreground color (black)
+          sx={{
-      />
+            display: "flex",
+            gap: "10px",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              gap: "10px",
+              width: "100%",
+              alignItems: "center",
+              flexDirection: "column",
+              marginTop: "20px",
+            }}
+          >
+            <TextP
+              sx={{
+                textAlign: "center",
+                lineHeight: 1.2,
+                fontSize: "16px",
+                fontWeight: 500,
+              }}
+            >
+              Your address
+            </TextP>
+            <QRCode
+              value={targetAddress} // Your address here
+              size={150} // Adjust size as needed
+              level="M" // Error correction level (L, M, Q, H)
+              bgColor="#FFFFFF" // Background color (white)
+              fgColor="#000000" // Foreground color (black)
+            />
+          </Box>
+        </Box>
+      )}
     </Box>
   );
 };

src/components/Apps/AppsDesktop.tsx

@@ -21,10 +21,15 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
 import { Save } from "../Save/Save";
 import { HubsIcon } from "../../assets/Icons/HubsIcon";
 import { CoreSyncStatus } from "../CoreSyncStatus";
+import { IconWrapper } from "../Desktop/DesktopFooter";
+import AppIcon from "../../assets/svgs/AppIcon.svg";
+import { useRecoilState } from "recoil";
+import { enabledDevModeAtom } from "../../atoms/global";
+import { AppsIcon } from "../../assets/Icons/AppsIcon";
 
 const uid = new ShortUniqueId({ length: 8 });
 
-export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
+export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, isApps, desktopViewMode}) => {
   const [availableQapps, setAvailableQapps] = useState([]);
   const [selectedAppInfo, setSelectedAppInfo] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState(null)
@@ -33,6 +38,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
   const [isNewTabWindow, setIsNewTabWindow] = useState(false);
   const [categories, setCategories] = useState([])
   const iframeRefs = useRef({});
+  const [isEnabledDevMode, setIsEnabledDevMode] =  useRecoilState(enabledDevModeAtom)
   const myApp = useMemo(()=> {
    
    return availableQapps.find((app)=> app.name === myName && app.service === 'APP')
@@ -317,11 +323,46 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
             
             <HomeIcon
               height={34}
-              color="rgba(250, 250, 250, 0.5)"
+              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
             />
         
         </ButtonBase>
         <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('apps')
+          }}
+        >
+          <IconWrapper
+            color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Apps"
+            disableWidth
+          >
+          <AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('chat')
+          }}
+        >
+        <IconWrapper
+            color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Chat"
+            disableWidth
+          >
+            <MessagingIcon
+              height={30}
+              color={
+                (hasUnreadDirects || hasUnreadGroups)
+                  ? "var(--unread)"
+                  : desktopViewMode === 'chat'
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+    </IconWrapper>
+        </ButtonBase>
+        {/* <ButtonBase
           onClick={() => {
             setDesktopSideView("directs");
             toggleSideViewDirects()
@@ -357,10 +398,23 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
               }
             />
      
-        </ButtonBase>
+        </ButtonBase> */}
         <Save isDesktop disableWidth />
-        <CoreSyncStatus imageSize="30px" position="left" />
+        {isEnabledDevMode && (
-
+           <ButtonBase
+           onClick={() => {
+             setDesktopViewMode('dev')
+           }}
+         >
+           <IconWrapper
+             color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
+             label="Dev"
+             disableWidth
+           >
+            <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+           </IconWrapper>
+         </ButtonBase>
+        )}
         {mode !== 'home' && (
                  <AppsNavBarDesktop  />
 

src/components/Apps/AppsDevMode.tsx

@@ -22,10 +22,12 @@ import { Save } from "../Save/Save";
 import { HubsIcon } from "../../assets/Icons/HubsIcon";
 import { AppsDevModeNavBar } from "./AppsDevModeNavBar";
 import { CoreSyncStatus } from "../CoreSyncStatus";
+import { AppsIcon } from "../../assets/Icons/AppsIcon";
+import { IconWrapper } from "../Desktop/DesktopFooter";
 
 const uid = new ShortUniqueId({ length: 8 });
 
-export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
+export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, desktopViewMode, isApps}) => {
   const [availableQapps, setAvailableQapps] = useState([]);
   const [selectedAppInfo, setSelectedAppInfo] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState(null)
@@ -208,49 +210,59 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
             
             <HomeIcon
               height={34}
-              color="rgba(250, 250, 250, 0.5)"
+              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
             />
         
         </ButtonBase>
         <ButtonBase
           onClick={() => {
-            setDesktopSideView("directs");
+            setDesktopViewMode('apps')
-            toggleSideViewDirects()
           }}
         >
-        
+          <IconWrapper
+            color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Apps"
+            disableWidth
+          >
+          <AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('chat')
+          }}
+        >
+        <IconWrapper
+            color={desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Chat"
+            disableWidth
+          >
             <MessagingIcon
               height={30}
               color={
                 hasUnreadDirects
                   ? "var(--unread)"
-                  : isDirects
+                  : desktopViewMode === 'chat'
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
               }
             />
-
+    </IconWrapper>
-        </ButtonBase>
-        <ButtonBase
-          onClick={() => {
-            setDesktopSideView("groups");
-            toggleSideViewGroups()
-          }}
-        >
-            <HubsIcon
-              height={30}
-              color={
-                hasUnreadGroups
-                  ? "var(--unread)"
-                  : isGroups
-                  ? "white"
-                  : "rgba(250, 250, 250, 0.5)"
-              }
-            />
-     
         </ButtonBase>
         <Save isDesktop disableWidth />
-        <CoreSyncStatus imageSize="30px" position="left" />
+        <ButtonBase
+           onClick={() => {
+             setDesktopViewMode('dev')
+           }}
+         >
+           <IconWrapper
+             color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
+             label="Dev"
+             disableWidth
+           >
+            <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+           </IconWrapper>
+         </ButtonBase>
         {mode !== 'home' && (
                  <AppsDevModeNavBar  />
 

src/components/Desktop/DesktopFooter.tsx

@@ -20,7 +20,7 @@ import { Save } from "../Save/Save";
 import { useRecoilState } from "recoil";
 import { enabledDevModeAtom } from "../../atoms/global";
 
-export const IconWrapper = ({ children, label, color, selected, disableWidth }) => {
+export const IconWrapper = ({ children, label, color, selected, disableWidth, customWidth }) => {
   return (
     <Box
       sx={{
@@ -29,8 +29,8 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth })
         alignItems: "center",
         gap:  "5px",
         flexDirection: "column",
-        height: disableWidth ? 'auto' :  "89px",
+        height: customWidth ? customWidth : disableWidth ? 'auto' :  "89px",
-        width: disableWidth ? 'auto' : "89px",
+        width: customWidth? customWidth : disableWidth ? 'auto' : "89px",
         borderRadius: "50%",
         backgroundColor: selected ? "rgba(28, 29, 32, 1)" : "transparent",
       }}

src/components/Desktop/DesktopHeader.tsx

@@ -19,7 +19,7 @@ import { ChatIcon } from "../../assets/Icons/ChatIcon";
 import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
 import { MembersIcon } from "../../assets/Icons/MembersIcon";
 
-const IconWrapper = ({ children, label, color, selected, selectColor }) => {
+const IconWrapper = ({ children, label, color, selected, selectColor, customHeight }) => {
   return (
     <Box
       sx={{
@@ -28,8 +28,8 @@ const IconWrapper = ({ children, label, color, selected, selectColor }) => {
         alignItems: "center",
         gap: "5px",
         flexDirection: "column",
-        height: "65px",
+        height: customHeight ? customHeight : "65px",
-        width: "65px",
+        width: customHeight ? customHeight :  "65px",
         borderRadius: "50%",
         backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent",
       }}
@@ -111,7 +111,7 @@ export const DesktopHeader = ({
           alignItems: "center",
         }}
       >
-        <ButtonBase
+        {/* <ButtonBase
           onClick={() => {
             goToHome();
           }}
@@ -170,15 +170,15 @@ export const DesktopHeader = ({
               }
             />
           </IconWrapper>
-        </ButtonBase>
+        </ButtonBase> */}
-        <Box
+        {/* <Box
           sx={{
             width: "1px",
             height: "50px",
             background: "white",
             borderRadius: "50px",
           }}
-        />
+        /> */}
         <ButtonBase
           onClick={() => {
             goToAnnouncements()
@@ -189,6 +189,7 @@ export const DesktopHeader = ({
             label="ANN"
             selected={isAnnouncement}
             selectColor="#09b6e8"
+            customHeight="55px"
           >
             <NotificationIcon2
               height={25}
@@ -214,6 +215,7 @@ export const DesktopHeader = ({
             label="Chat"
             selected={isChat}
             selectColor="#09b6e8"
+            customHeight="55px"
           >
             <ChatIcon
               height={25}
@@ -240,6 +242,7 @@ export const DesktopHeader = ({
             label="Threads"
             selected={isForum}
             selectColor="#09b6e8"
+            customHeight="55px"
           >
             <ThreadsIcon
               height={25}
@@ -262,6 +265,7 @@ export const DesktopHeader = ({
             color="rgba(250, 250, 250, 0.5)"
             label="Members"
             selected={false}
+            customHeight="55px"
           >
             <MembersIcon
               height={25}

src/components/DesktopSideBar.tsx

@@ -0,0 +1,120 @@
+import { Box, ButtonBase } from '@mui/material';
+import React from 'react'
+import { HomeIcon } from "../assets/Icons/HomeIcon";
+import { MessagingIcon } from "../assets/Icons/MessagingIcon";
+import { Save } from "./Save/Save";
+import { HubsIcon } from "../assets/Icons/HubsIcon";
+import { CoreSyncStatus } from "./CoreSyncStatus";
+import { IconWrapper } from './Desktop/DesktopFooter';
+import AppIcon from "./../assets/svgs/AppIcon.svg";
+import { useRecoilState } from 'recoil';
+import { enabledDevModeAtom } from '../atoms/global';
+import { AppsIcon } from '../assets/Icons/AppsIcon';
+
+export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode }) => {
+    const [isEnabledDevMode, setIsEnabledDevMode] =  useRecoilState(enabledDevModeAtom)
+
+  return (
+    <Box sx={{
+        width: '60px',
+        flexDirection: 'column',
+        height: '100vh',
+        alignItems: 'center',
+        display: 'flex',
+        gap: '25px'
+       }}>
+        <ButtonBase
+          sx={{
+            width: '60px',
+            height: '60px',
+            paddingTop: '23px'
+          }}
+          onClick={() => {
+            goToHome();
+
+          }}
+        >
+            
+            <HomeIcon
+              height={34}
+              color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
+
+            />
+        
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('apps')
+            // setIsOpenSideViewDirects(false)
+            // setIsOpenSideViewGroups(false)
+          }}
+        >
+          <IconWrapper
+            color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"}
+            label="Apps"
+            selected={isApps}
+            disableWidth
+          >
+            <AppsIcon color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('chat')
+          }}
+        >
+        <IconWrapper
+            color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+            label="Chat"
+            disableWidth
+          >
+            <MessagingIcon
+              height={30}
+              color={
+                (hasUnreadDirects || hasUnreadGroups)
+                  ? "var(--unread)"
+                  : desktopViewMode === 'chat'
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+    </IconWrapper>
+        </ButtonBase>
+        {/* <ButtonBase
+          onClick={() => {
+            setDesktopSideView("groups");
+            toggleSideViewGroups()
+          }}
+        >
+            <HubsIcon
+              height={30}
+              color={
+                hasUnreadGroups
+                  ? "var(--unread)"
+                  : isGroups
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+     
+        </ButtonBase> */}
+        <Save isDesktop disableWidth />
+        {/* <CoreSyncStatus imageSize="30px" position="left" /> */}
+        {isEnabledDevMode && (
+          <ButtonBase
+          onClick={() => {
+            setDesktopViewMode('dev')
+          }}
+        >
+          <IconWrapper
+            color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
+            label="Dev"
+            disableWidth
+          >
+           <AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
+          </IconWrapper>
+        </ButtonBase>
+        )}
+       </Box>
+  )
+}

src/components/Group/Group.tsx

@@ -86,12 +86,15 @@ import { getRootHeight } from "../../utils/mobile/mobileUtils";
 import { ReturnIcon } from "../../assets/Icons/ReturnIcon";
 import { ExitIcon } from "../../assets/Icons/ExitIcon";
 import { HomeDesktop } from "./HomeDesktop";
-import { DesktopFooter } from "../Desktop/DesktopFooter";
+import { DesktopFooter, IconWrapper } from "../Desktop/DesktopFooter";
 import { DesktopHeader } from "../Desktop/DesktopHeader";
 import { Apps } from "../Apps/Apps";
 import { AppsNavBar } from "../Apps/AppsNavBar";
 import { AppsDesktop } from "../Apps/AppsDesktop";
 import { AppsDevMode } from "../Apps/AppsDevMode";
+import { DesktopSideBar } from "../DesktopSideBar";
+import { HubsIcon } from "../../assets/Icons/HubsIcon";
+import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
 
 // let touchStartY = 0;
 // let disablePullToRefresh = false;
@@ -1282,6 +1285,9 @@ export const Group = ({
     setupGroupWebsocketInterval.current = null;
     settimeoutForRefetchSecretKey.current = null;
     initiatedGetMembers.current = false;
+    if(!isMobile){
+      setDesktopViewMode('home')
+    }
   };
 
   const logoutEventFunc = () => {
@@ -1368,6 +1374,9 @@ export const Group = ({
       setTriedToFetchSecretKey(false);
       setFirstSecretKeyInCreation(false);
       setGroupSection("chat");
+      if(!isMobile){
+        setDesktopViewMode('chat')
+      }
 
       window.sendMessage("addTimestampEnterChat", {
         timestamp: Date.now(),
@@ -1381,10 +1390,9 @@ export const Group = ({
         setSelectedGroup(findGroup);
         setMobileViewMode("group");
         setDesktopSideView('groups')
-        setDesktopViewMode('home')
         getTimestampEnterChat();
         isLoadingOpenSectionFromNotification.current = false;
-      }, 200);
+      }, 350);
     } else {
       isLoadingOpenSectionFromNotification.current = false;
     }
@@ -1419,6 +1427,9 @@ export const Group = ({
       setTriedToFetchSecretKey(false);
       setFirstSecretKeyInCreation(false);
       setGroupSection("announcement");
+      if(!isMobile){
+        setDesktopViewMode('chat')
+      }
       window.sendMessage("addGroupNotificationTimestamp", {
         timestamp: Date.now(),
         groupId: findGroup.groupId,
@@ -1430,9 +1441,8 @@ export const Group = ({
         setSelectedGroup(findGroup);
         setMobileViewMode("group");
         setDesktopSideView('groups')
-        setDesktopViewMode('home')
         getGroupAnnouncements();
-      }, 200);
+      }, 350);
     }
   };
 
@@ -1481,14 +1491,15 @@ export const Group = ({
       setFirstSecretKeyInCreation(false);
       setGroupSection("forum");
       setDefaultThread(data);
-
+      if(!isMobile){
+        setDesktopViewMode('chat')
+      }
       setTimeout(() => {
         setSelectedGroup(findGroup);
         setMobileViewMode("group");
         setDesktopSideView('groups')
-        setDesktopViewMode('home')
         getGroupAnnouncements();
-      }, 200);
+      }, 350);
     }
   };
 
@@ -1512,31 +1523,31 @@ export const Group = ({
     }
     setDesktopViewMode('home')
 
-    setGroupSection("default");
+    // setGroupSection("default");
-    clearAllQueues();
+    // clearAllQueues();
     await new Promise((res) => {
       setTimeout(() => {
         res(null);
       }, 200);
     });
-    setGroupSection("home");
+    // setGroupSection("home");
-    setSelectedGroup(null);
+    // setSelectedGroup(null);
-    setNewChat(false);
+    // setNewChat(false);
-    setSelectedDirect(null);
+    // setSelectedDirect(null);
-    setSecretKey(null);
+    // setSecretKey(null);
-    setGroupOwner(null)
+    // setGroupOwner(null)
-    lastFetchedSecretKey.current = null;
+    // lastFetchedSecretKey.current = null;
-    initiatedGetMembers.current = false;
+    // initiatedGetMembers.current = false;
-    setSecretKeyPublishDate(null);
+    // setSecretKeyPublishDate(null);
-    setAdmins([]);
+    // setAdmins([]);
-    setSecretKeyDetails(null);
+    // setSecretKeyDetails(null);
-    setAdminsWithNames([]);
+    // setAdminsWithNames([]);
-    setMembers([]);
+    // setMembers([]);
-    setMemberCountFromSecretKeyData(null);
+    // setMemberCountFromSecretKeyData(null);
-    setTriedToFetchSecretKey(false);
+    // setTriedToFetchSecretKey(false);
-    setFirstSecretKeyInCreation(false);
+    // setFirstSecretKeyInCreation(false);
-    setIsOpenSideViewDirects(false)
+    // setIsOpenSideViewDirects(false)
-    setIsOpenSideViewGroups(false)
+    // setIsOpenSideViewGroups(false)
   };
 
   const goToAnnouncements = async () => {
@@ -1612,6 +1623,67 @@ export const Group = ({
           borderRadius: !isMobile && '0px 15px 15px 0px'
         }}
       >
+        {!isMobile && (
+            <Box sx={{
+              width: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+              gap: '10px'
+            }}>
+               <ButtonBase
+              onClick={() => {
+                setDesktopSideView("groups");
+              }}
+            >
+              <IconWrapper
+                color={(groupChatHasUnread ||
+                  groupsAnnHasUnread)
+                         ? "var(--unread)"
+                         : desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+                label="Groups"
+                selected={desktopSideView === 'groups'}
+                customWidth="75px"
+              >
+                <HubsIcon
+                  height={24}
+                  color={
+                    (groupChatHasUnread ||
+               groupsAnnHasUnread)
+                      ? "var(--unread)"
+                      : desktopSideView === 'groups'
+                      ? "white"
+                      : "rgba(250, 250, 250, 0.5)"
+                  }
+                />
+              </IconWrapper>
+            </ButtonBase>
+            <ButtonBase
+              onClick={() => {
+                setDesktopSideView("directs");
+              }}
+            >
+              <IconWrapper
+              customWidth="75px"
+                color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+                label="Messaging"
+                selected={desktopSideView === 'directs'}
+              >
+                <MessagingIcon
+                  height={24}
+                  color={
+                    directChatHasUnread
+                      ? "var(--unread)"
+                      : desktopSideView === 'directs'
+                      ? "white"
+                      : "rgba(250, 250, 250, 0.5)"
+                  }
+                />
+              </IconWrapper>
+              </ButtonBase>
+            </Box>
+        )}
+       
         {isMobile && (
            <Box
            sx={{
@@ -1819,7 +1891,67 @@ export const Group = ({
           borderRadius: !isMobile && '0px 15px 15px 0px'
         }}
       >
-        
+        {!isMobile && (
+           <Box sx={{
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            gap: '10px'
+          }}>
+             <ButtonBase
+            onClick={() => {
+              setDesktopSideView("groups");
+            }}
+          >
+            <IconWrapper
+              color={(groupChatHasUnread ||
+                groupsAnnHasUnread)
+                       ? "var(--unread)"
+                       :  desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+              label="Groups"
+              selected={desktopSideView === 'groups'}
+              customWidth="75px"
+            >
+              <HubsIcon
+                height={24}
+                color={
+                  (groupChatHasUnread ||
+             groupsAnnHasUnread)
+                    ? "var(--unread)"
+                    : desktopSideView === 'groups' 
+                    ? "white"
+                    : "rgba(250, 250, 250, 0.5)"
+                }
+              />
+            </IconWrapper>
+          </ButtonBase>
+          <ButtonBase
+            onClick={() => {
+              setDesktopSideView("directs");
+            }}
+          >
+            <IconWrapper
+            customWidth="75px"
+              color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
+              label="Messaging"
+              selected={desktopSideView === 'directs' }
+            >
+              <MessagingIcon
+                height={24}
+                color={
+                  directChatHasUnread
+                    ? "var(--unread)"
+                    : desktopSideView === 'directs' 
+                    ? "white"
+                    : "rgba(250, 250, 250, 0.5)"
+                }
+              />
+            </IconWrapper>
+            </ButtonBase>
+          </Box>
+        )}
+       
         <div
           style={{
             display: "flex",
@@ -1850,7 +1982,6 @@ export const Group = ({
                 onClick={() => {
                   setMobileViewMode("group");
                   setDesktopSideView('groups')
-                  setDesktopViewMode('home')
                   initiatedGetMembers.current = false;
                   clearAllQueues();
                   setSelectedDirect(null);
@@ -2067,8 +2198,14 @@ export const Group = ({
           alignItems: "flex-start",
         }}
       >
-        {!isMobile && ((desktopSideView === 'groups' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && renderGroups()}
+        {!isMobile && ((desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && (
-        {!isMobile && ((desktopSideView === 'directs'  && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewDirects) && renderDirects()}
+             <DesktopSideBar desktopViewMode={desktopViewMode} toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} isApps={desktopViewMode === 'apps'} myName={userInfo?.name}  isGroups={isOpenSideViewGroups}
+             isDirects={isOpenSideViewDirects}    hasUnreadGroups={groupChatHasUnread ||
+               groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} />
+        )}
+
+        {!isMobile && desktopViewMode === 'chat' && desktopSideView !== 'directs' && renderGroups()}
+        {!isMobile && desktopViewMode === 'chat'  && desktopSideView === 'directs' && renderDirects()}
 
         <Box
           sx={{
@@ -2174,9 +2311,37 @@ export const Group = ({
               </Box>
             </>
           )}
-          {selectedGroup && mobileViewMode !== 'groups' && (
+          {desktopViewMode === 'chat' && !selectedGroup && (
-            <>
+            <Box
-            {!isMobile && selectedGroup && (
+            sx={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: 'center',
+              height: '100%',
+           
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "14px",
+                fontWeight: 400,
+                color: 'rgba(255, 255, 255, 0.2)'
+              }}
+            >
+              No group selected
+            </Typography>
+          </Box>
+          )}
+          {mobileViewMode !== 'groups' && (
+            <div style={{
+              width: '100%',
+              display: selectedGroup? 'block' : 'none',
+              opacity: !(desktopViewMode === 'chat' && selectedGroup) ? 0 : 1,
+      position: !(desktopViewMode === 'chat' && selectedGroup) ? 'absolute' : 'relative',
+    left: !(desktopViewMode === 'chat' && selectedGroup) ? '-100000px' : '0px',
+            }}>
+            {!isMobile &&  (
         
         <DesktopHeader
         selectedGroup={selectedGroup}
@@ -2457,7 +2622,7 @@ export const Group = ({
                   isOwner={groupOwner?.owner === myAddress}
                 />
               )}
-            </>
+            </div>
           )}
 
           {selectedDirect && !newChat && (
@@ -2501,7 +2666,7 @@ export const Group = ({
               </Box>
             </>
           )}
-           {!isMobile && groupSection === "home" && (
+           {/* {!isMobile && groupSection === "home" && (
         <DesktopFooter 
         selectedGroup={selectedGroup}
         groupSection={groupSection}
@@ -2536,7 +2701,7 @@ export const Group = ({
         setIsOpenSideViewDirects={setIsOpenSideViewDirects}
         setIsOpenSideViewGroups={setIsOpenSideViewGroups}
         />
-      )}
+      )} */}
           {isMobile && mobileViewMode === "home" && (
             <Home
               refreshHomeDataFunc={refreshHomeDataFunc}
@@ -2551,6 +2716,7 @@ export const Group = ({
               setOpenManageMembers={setOpenManageMembers}
               setOpenAddGroup={setOpenAddGroup}
               setMobileViewMode={setMobileViewMode}
+              setDesktopViewMode={setDesktopViewMode}
             />
           )}
           {isMobile  && (
@@ -2559,17 +2725,16 @@ export const Group = ({
             {!isMobile  && (
             <AppsDesktop toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "apps"} myName={userInfo?.name}  isGroups={isOpenSideViewGroups}
             isDirects={isOpenSideViewDirects}    hasUnreadGroups={groupChatHasUnread ||
-              groupsAnnHasUnread} />
+              groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} isApps={desktopViewMode === 'apps'} desktopViewMode={desktopViewMode} />
           )}
             {!isMobile  && (
             <AppsDevMode toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsModeDev} setMode={setAppsModeDev} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "dev"} myName={userInfo?.name}  isGroups={isOpenSideViewGroups}
             isDirects={isOpenSideViewDirects}    hasUnreadGroups={groupChatHasUnread ||
-              groupsAnnHasUnread} />
+              groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} desktopViewMode={desktopViewMode} isApps={desktopViewMode === 'apps'} />
           )}
       
      
-      {!isMobile && !selectedGroup &&
+      {!isMobile && desktopViewMode === 'home'  && (
-          groupSection === "home"  && desktopViewMode !== "apps" && desktopViewMode !== "dev" && (
         <HomeDesktop
   refreshHomeDataFunc={refreshHomeDataFunc}
   myAddress={myAddress}
@@ -2583,18 +2748,20 @@ export const Group = ({
   setOpenManageMembers={setOpenManageMembers}
   setOpenAddGroup={setOpenAddGroup}
   setMobileViewMode={setMobileViewMode}
+  setDesktopViewMode={setDesktopViewMode}
 />
       )}
 
     
         </Box>
+       
         <AuthenticatedContainerInnerRight
           sx={{
             marginLeft: "auto",
             width: "31px",
             // minWidth: "135px",
             padding: "5px",
-            display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev') ? "none" : "flex",
+            display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev' || desktopViewMode === 'chat') ? "none" : "flex",
           }}
         >
      

src/components/Group/GroupJoinRequests.tsx

@@ -18,7 +18,7 @@ import { getBaseApi } from "../../background";
 import { MyContext, getBaseApiReact, isMobile } from "../../App";
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
 
-export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
+export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode, setDesktopViewMode }) => {
   const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
   const [loading, setLoading] = React.useState(true)
   const {txList, setTxList} = React.useContext(MyContext)
@@ -179,6 +179,9 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
             getTimestampEnterChat()
             setGroupSection("announcement")
             setOpenManageMembers(true)
+            if(!isMobile){
+              setDesktopViewMode('chat')
+            }
             setTimeout(() => {
               executeEvent("openGroupJoinRequest", {});
 

src/components/Group/Home.tsx

@@ -20,6 +20,7 @@ export const Home = ({
   setOpenManageMembers,
   setOpenAddGroup,
   setMobileViewMode,
+  setDesktopViewMode
 }) => {
   return (
     <Box
@@ -95,6 +96,7 @@ export const Home = ({
             myAddress={myAddress}
             groups={groups}
             setMobileViewMode={setMobileViewMode}
+            setDesktopViewMode={setDesktopViewMode}
           />
           <GroupInvites
             setOpenAddGroup={setOpenAddGroup}

src/components/Group/HomeDesktop.tsx

@@ -20,6 +20,7 @@ export const HomeDesktop = ({
   setOpenManageMembers,
   setOpenAddGroup,
   setMobileViewMode,
+  setDesktopViewMode
 }) => {
   return (
     <Box
@@ -66,7 +67,7 @@ export const HomeDesktop = ({
             display: "flex",
             gap: "15px",
             flexWrap: "wrap",
-            justifyContent: "flex-start",
+            justifyContent: "center",
           }}
         >
           <Box sx={{
@@ -104,6 +105,7 @@ export const HomeDesktop = ({
             myAddress={myAddress}
             groups={groups}
             setMobileViewMode={setMobileViewMode}
+            setDesktopViewMode={setDesktopViewMode}
           />
           </Box>
           <Box sx={{

src/index.css

@@ -73,7 +73,7 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 16px;
+  width: 14px;
   height: 10px;
 }