diff --git a/apps/web-admin/package.json b/apps/web-admin/package.json
index d0cddaff..afa0f194 100644
--- a/apps/web-admin/package.json
+++ b/apps/web-admin/package.json
@@ -11,11 +11,13 @@
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@auth0/nextjs-auth0": "^3.5.0",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.15.7",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.9",
     "@mui/x-data-grid": "^6.19.3",
     "autoprefixer": "10.4.16",
     "axios": "^1.5.1",
@@ -31,6 +33,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.0",
+    "react-icons": "^5.0.1",
     "react-qr-reader": "3.0.0-beta-1",
     "sass": "^1.69.1"
   }
diff --git a/apps/web-admin/public/ThisIsAnORG.png b/apps/web-admin/public/ThisIsAnORG.png
new file mode 100644
index 00000000..8251de21
Binary files /dev/null and b/apps/web-admin/public/ThisIsAnORG.png differ
diff --git a/apps/web-admin/src/components/ItemCard.jsx b/apps/web-admin/src/components/ItemCard.jsx
new file mode 100644
index 00000000..2d07dfed
--- /dev/null
+++ b/apps/web-admin/src/components/ItemCard.jsx
@@ -0,0 +1,39 @@
+import { Card, CardBody, Image, Text, Box } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+const ItemCard = (props) => {
+  const router = useRouter();
+
+  if (props.logo == '') {
+    var logo = '/ThisIsAnORG.png';
+  } else {
+    var logo = props.logo;
+  }
+  return (
+    <Box
+      boxShadow="base"
+      backgroundColor="D9D9D9"
+      borderRadius="30px"
+      borderColor="gray"
+      height="180px"
+      width="180px"
+      display="flex"
+      flexDir="column"
+      alignItems="center"
+    >
+      <Image
+        src={logo}
+        alt="logo of org"
+        maxH="100px"
+        maxW="150px"
+        borderRadius="30px"
+        p="10px"
+        textAlign="center"
+      />
+      <Text as="b" fontSize="xl" maxW="150px" textAlign="center">
+        {props.name}
+      </Text>
+    </Box>
+  );
+};
+
+export default ItemCard;
diff --git a/apps/web-admin/src/components/Sidebar.jsx b/apps/web-admin/src/components/Sidebar.jsx
index 424adbfa..31a45ef0 100644
--- a/apps/web-admin/src/components/Sidebar.jsx
+++ b/apps/web-admin/src/components/Sidebar.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+
 import {
   Box,
   Text,
@@ -12,13 +13,24 @@ import {
   DrawerContent,
   DrawerCloseButton,
   useMediaQuery,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
 } from '@chakra-ui/react';
 import Link from 'next/link';
 import { Router, useRouter } from 'next/router';
+
+import LogoutIcon from '@mui/icons-material/Logout';
+import PermIdentityIcon from '@mui/icons-material/PermIdentity';
+import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';
+import { ManageAccountsTwoTone } from '@mui/icons-material';
+
 const Sidebar = ({ isOpen, onClose }) => {
   const [loading, setLoading] = useState(false);
   const { logout } = useAuth0();
   const [isMobile] = useMediaQuery('(max-width: 768px)');
+  const router = useRouter();
 
   const handleLogout = (e) => {
     e.preventDefault();
@@ -34,22 +46,43 @@ const Sidebar = ({ isOpen, onClose }) => {
     <>
       {/* Desktop Sidebar */}
       {!isMobile ? (
-        <Box display={{ base: 'none', md: 'block' }} padding={4} height="100%" width={80}>
+        <Box
+          display={{ base: 'flex', md: 'block' }}
+          padding={4}
+          height="100%"
+          width={80}
+          backgroundColor="#F4F4F4"
+          justifyContent="space-between"
+          flexDirection="row"
+        >
           <Box paddingY={4}>
             <Text fontSize="4xl" fontWeight="bold">
               techno
             </Text>
           </Box>
-          <SidebarContents />
+          <SideBarTree />
+          <Box paddingY={4} width="100%" display="flex" justifyContent="space-evenly">
+            <AccountLoggedIn />
 
-          <Box paddingY={4}>
             <Button
               onClick={handleLogout}
               isLoading={loading}
               loadingText="Please Wait"
-              width="100%"
+              colorScheme="gray"
+              variant="solid"
+            >
+              <LogoutIcon />
+            </Button>
+
+            <Button
+              onClick={() => {
+                router.push('/settings');
+              }}
+              isLoading={loading}
+              loadingText="Please Wait"
+              colorScheme="gray"
             >
-              Logout
+              <ManageAccountsOutlinedIcon />
             </Button>
           </Box>
         </Box>
@@ -72,9 +105,9 @@ const Sidebar = ({ isOpen, onClose }) => {
                       onClick={handleLogout}
                       isLoading={loading}
                       loadingText="Please Wait"
-                      width="100%"
+                      //width="100%"
                     >
-                      Logout
+                      <LogoutIcon />
                     </Button>
                   </Box>
                 </DrawerBody>
@@ -119,4 +152,42 @@ const SidebarContents = () => {
   );
 };
 
+const SideBarTree = () => {
+  const router = useRouter();
+
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          router.push('/organizations');
+        }}
+      >
+        Organizations
+      </Button>
+    </div>
+  );
+};
+
+const AccountLoggedIn = () => {
+  // const [open,setOpen] = useState(false);
+
+  //const handleClick = () =>{
+  //setOpen(!open);
+  //}
+  return (
+    <div>
+      <Popover>
+        <PopoverTrigger>
+          <Button colorScheme="gray">
+            <PermIdentityIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent maxWidth="50%" marginLeft="8px">
+          <PopoverBody> You are logged in as: </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
 export default Sidebar;
diff --git a/apps/web-admin/src/pages/organizations/[orgId]/index.jsx b/apps/web-admin/src/pages/organizations/[orgId]/index.jsx
index 36164a06..17587e6b 100644
--- a/apps/web-admin/src/pages/organizations/[orgId]/index.jsx
+++ b/apps/web-admin/src/pages/organizations/[orgId]/index.jsx
@@ -4,11 +4,17 @@ import { Box, Button, Flex, Text } from '@chakra-ui/react';
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 
+import { FiArrowLeftCircle } from 'react-icons/fi';
+import ItemCard from '@/components/ItemCard';
 export default function Organization() {
   const router = useRouter();
 
   const { orgId } = router.query;
 
+  const children = [
+    { id: 0, section: 'events', path: '/events', thumb: '' },
+    { id: 1, section: 'members', path: '/members', thumb: '' },
+  ];
   return (
     <DashboardLayout>
       <Flex
@@ -20,11 +26,51 @@ export default function Organization() {
         gap={8}
       >
         <Box width="100%" p={8} display="flex" justifyContent="space-between">
-          <Text fontSize="4xl" fontWeight="bold">
-            {orgId}
-          </Text>
+          <Box width="100%" p={8} paddingTop="100px" display="flex" alignItems="center" gap="10px">
+            <Box
+              borderRadius="2000px"
+              borderColor="black"
+              colorScheme="gray"
+              variant="ghost"
+              height="60px"
+              display="inline"
+              cursor="pointer"
+              onClick={() => {
+                router.back();
+              }}
+            >
+              <FiArrowLeftCircle size={60} />
+            </Box>
+            <Text fontSize="6xl" fontWeight="bold">
+              {orgId}
+            </Text>
+          </Box>
         </Box>
-        <Flex width="100%" height="100%" gap={4}>
+
+        <Box
+          width="100%"
+          height="100%"
+          borderRadius="30px"
+          gap="50px"
+          backgroundColor="#F4F4F4"
+          p="30px"
+          marginLeft="30px"
+        >
+          {children.map((child) => {
+            return (
+              <Box
+                key={child.id}
+                as="button"
+                onClick={() => {
+                  router.push(`/organizations/${orgId}/${child.path}`);
+                }}
+              >
+                <ItemCard name={child.section} logo={child.thumb} />
+              </Box>
+            );
+          })}
+
+          {/* <Box width="100%" height="100%">
           <Button
             onClick={() => {
               router.push(`/organizations/${orgId}/events`);
@@ -39,7 +85,8 @@ export default function Organization() {
           >
             Members
           </Button>
-        </Flex>
+        </Box> */}
+        </Box>
       </Flex>
     </DashboardLayout>
   );
diff --git a/apps/web-admin/src/pages/organizations/index.jsx b/apps/web-admin/src/pages/organizations/index.jsx
index 5c3e491b..3df40fc8 100644
--- a/apps/web-admin/src/pages/organizations/index.jsx
+++ b/apps/web-admin/src/pages/organizations/index.jsx
@@ -26,11 +26,12 @@ const MuiTheme = createTheme({});
 
 import DashboardLayout from '@/layouts/DashboardLayout';
 import { useEffect, useState } from 'react';
-import { purple } from '@mui/material/colors';
+import { FiArrowLeftCircle } from 'react-icons/fi';
+
+import ItemCard from '@/components/ItemCard';
 
 export default function Organizations() {
   const router = useRouter();
-
   const { orgId } = router.query;
 
   const { loading, get } = useFetch();
@@ -74,24 +75,91 @@ export default function Organizations() {
         justifyContent="center"
         gap={8}
       >
-        <Box width="100%" p={8} display="flex" justifyContent="space-between">
-          <Text fontSize="4xl" fontWeight="bold">
+        <Box width="100%" p={8} paddingTop="100px" display="flex" alignItems="center" gap="10px">
+          <Box
+            borderRadius="2000px"
+            borderColor="black"
+            colorScheme="gray"
+            variant="ghost"
+            height="60px"
+            display="inline"
+            cursor="pointer"
+            onClick={() => {
+              router.back();
+            }}
+          >
+            <FiArrowLeftCircle size={60} />
+          </Box>
+          <Text fontSize="6xl" fontWeight="bold">
             Organizations
           </Text>
+        </Box>
+
+        <Box
+          display="block"
+          borderRadius="30px"
+          gap="30px"
+          backgroundColor="#F4F4F4"
+          p="30px"
+          marginLeft="30px"
+        >
           <Button
             padding="4"
             minWidth="-moz-initial"
             bgColor="rgb(128, 90, 213)"
             color="white"
             _hover={{ bgColor: 'rgb(100, 70, 183)' }}
-            onClick={() => {
-              router.push('organizations/new');
-            }}
+            onClick={handleClick}
+            marginBottom="30px"
           >
             Add Organization
           </Button>
-        </Box>
-        <Box width="100%" height="100%">
+          <Box width="100%" height="100%" borderRadius="30px" display="flex" gap="30px">
+            {/* <ThemeProvider theme={MuiTheme}> */}
+            {organizations.map((organization) => {
+              return (
+                <Box
+                  key={organization.id}
+                  as="button"
+                  width="180px"
+                  height=" 180px"
+                  onClick={() => {
+                    router.push(`/organizations/${organization.id}`);
+                  }}
+                >
+                  <ItemCard name={organization.name} logo="" />
+                </Box>
+              );
+            })}
+          </Box>
+
+          {/*<DataGrid
+              rows={organizations}
+              columns={columns}
+              slotProps={{
+                toolbar: {
+                  showQuickFilter: true,
+                  quickFilterProps: { debounceMs: 500 },
+                },
+              }}
+              slots={{
+                toolbar: GridToolbar,
+              }}
+              autoHeight
+              sx={{
+                // disable cell selection style
+                '.MuiDataGrid-cell:focus': {
+                  outline: 'none',
+                },
+                // pointer cursor on ALL rows
+                '& .MuiDataGrid-row:hover': {
+                  cursor: 'pointer',
+                },
+              }}
+              onRowClick={handleRowClick}
+            />*/}
+
+          {/* </ThemeProvider> */}
           {organizations.length === 0 && (
             <Flex height="100%" width="100%" justifyContent="center" alignItems="center">
               <Text fontSize="2xl" fontWeight="semibold">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23da1b7d..032be440 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -320,6 +320,9 @@ importers:
       '@auth0/nextjs-auth0':
         specifier: ^3.5.0
         version: 3.5.0(next@14.0.4)
+      '@chakra-ui/icons':
+        specifier: ^2.1.1
+        version: 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
       '@chakra-ui/react':
         specifier: ^2.8.2
         version: 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0)
@@ -332,8 +335,11 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.3.1
         version: 3.3.4(react-hook-form@7.50.1)
+      '@mui/icons-material':
+        specifier: ^5.15.10
+        version: 5.15.10(@mui/material@5.15.9)(react@18.2.0)
       '@mui/material':
-        specifier: ^5.15.7
+        specifier: ^5.15.9
         version: 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-data-grid':
         specifier: ^6.19.3
@@ -380,6 +386,9 @@ importers:
       react-hook-form:
         specifier: ^7.49.0
         version: 7.50.1(react@18.2.0)
+      react-icons:
+        specifier: ^5.0.1
+        version: 5.0.1(react@18.2.0)
       react-qr-reader:
         specifier: 3.0.0-beta-1
         version: 3.0.0-beta-1(react-dom@18.2.0)(react@18.2.0)
@@ -786,6 +795,17 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@chakra-ui/icons@2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0):
+    resolution: {integrity: sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==}
+    peerDependencies:
+      '@chakra-ui/system': '>=2.0.0'
+      react: '>=18'
+    dependencies:
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@chakra-ui/image@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
     resolution: {integrity: sha512-bskumBYKLiLMySIWDGcz0+D9Th0jPvmX6xnRMs4o92tT3Od/bW26lahmV2a2Op2ItXeCmRMY+XxJH5Gy1i46VA==}
     peerDependencies:
@@ -1927,6 +1947,22 @@ packages:
     resolution: {integrity: sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig==}
     dev: false
 
+  /@mui/icons-material@5.15.10(@mui/material@5.15.9)(react@18.2.0):
+    resolution: {integrity: sha512-9cF8oUHZKo9oQ7EQ3pxPELaZuZVmphskU4OI6NiJNDVN7zcuvrEsuWjYo1Zh4fLiC39Nrvm30h/B51rcUjvSGA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@mui/material': 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@mui/material@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-kbHTZDcFmN8GHKzRpImUEl9AJfFWI/0Kl+DsYVT3kHzQWUuHiKm3uHXR1RCOqr7H8IgHFPdbxItmCSQ/mj7zgg==}
     engines: {node: '>=12.0.0'}
@@ -6850,6 +6886,14 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-icons@5.0.1(react@18.2.0):
+    resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false