diff --git a/django_project/frontend/package.json b/django_project/frontend/package.json
index 92b2b991..4bd644a0 100644
--- a/django_project/frontend/package.json
+++ b/django_project/frontend/package.json
@@ -20,6 +20,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
+    "react-icons": "^5.3.0",
     "react-pro-sidebar": "^1.1.0",
     "react-redux": "^8.0.5",
     "react-refresh": "^0.14.2",
diff --git a/django_project/frontend/src/Routes.tsx b/django_project/frontend/src/Routes.tsx
index 243f1206..ca4ea64e 100644
--- a/django_project/frontend/src/Routes.tsx
+++ b/django_project/frontend/src/Routes.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 import { useRoutes } from "react-router-dom";
-import Home from "./pages/Home";
 import NotFound from "./pages/NotFound";
 import HomePage from "./pages/Home/index";
+import OrganisationInformation from "./pages/OrganisationInformation";
 import ProfileInformationPage from "./pages/Profile";
 
 const ProjectRoutes = () => {
   const element = useRoutes([
-    { path: "", element: <HomePage /> },
-    { path: "/routes", element: <Home /> },
-    { path: "/home", element: <HomePage />},
+    { path: "*", element: <NotFound /> },
+    { path: "/", element: <HomePage />},
+    { path: "/organisation", element: <OrganisationInformation /> },
     { path: "/profile", element: <ProfileInformationPage />}
   ]);
 
diff --git a/django_project/frontend/src/components/SideBar/index.tsx b/django_project/frontend/src/components/SideBar/index.tsx
index 93ea853a..d73174a7 100644
--- a/django_project/frontend/src/components/SideBar/index.tsx
+++ b/django_project/frontend/src/components/SideBar/index.tsx
@@ -11,15 +11,16 @@ import {
 import React from "react";
 import { MenuItem, Menu } from "react-pro-sidebar";
 import { HamburgerIcon } from "@chakra-ui/icons";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 interface Props extends ChakraProps {
   className?: string;
 }
 
-export default function Sidebar1(props: Props) {
+export default function Sidebar(props: Props) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const location = useLocation();
+  const navigate = useNavigate();
   const isActive = (path: string) => location.pathname === path;
 
   return (
@@ -32,7 +33,7 @@ export default function Sidebar1(props: Props) {
         flexDirection="column"
         display={{ md: "flex", base: "none" }}
         bg="dark_green.800"
-        h="100vh"
+        h={{base:"auto" ,md:"100vh"}}
         top="0px"
         overflow="auto"
         sx={{ position: "sticky !important" }}
@@ -56,16 +57,24 @@ export default function Sidebar1(props: Props) {
           w="100%"
           justifyContent="space-between"
         >
-          <MenuItem style={{ backgroundColor: isActive('/profile') ? '#a8d159' : 'transparent' }}>
+          <MenuItem
+            style={{ backgroundColor: isActive('/profile') ? '#a8d159' : 'transparent' }}
+            onClick={() => navigate('/profile')}
+          >
             Profile
           </MenuItem>
-          <MenuItem>Organisation Information</MenuItem>
-          <MenuItem>My Dashboard</MenuItem>
-          <MenuItem>Analysis Results</MenuItem>
-          <MenuItem>Uploaded Resources</MenuItem>
-          <MenuItem>Support</MenuItem>
-          <MenuItem>Notifications</MenuItem>
-          <MenuItem>Sign Out</MenuItem>
+          <MenuItem
+            style={{ backgroundColor: isActive('/organisation') ? '#a8d159' : 'transparent' }}
+            onClick={() => navigate('/organisation')}
+          >
+            Organisation Information
+          </MenuItem>
+          <MenuItem onClick={() => navigate('/dashboard')}>My Dashboard</MenuItem>
+          <MenuItem onClick={() => navigate('/analysis-results')}>Analysis Results</MenuItem>
+          <MenuItem onClick={() => navigate('/uploaded-resources')}>Uploaded Resources</MenuItem>
+          <MenuItem onClick={() => navigate('/support')}>Support</MenuItem>
+          <MenuItem onClick={() => navigate('/notifications')}>Notifications</MenuItem>
+          <MenuItem onClick={() => navigate('/sign-out')}>Sign Out</MenuItem>
         </Box>
       </Box>
 
@@ -125,17 +134,28 @@ export default function Sidebar1(props: Props) {
               >
                 <MenuItem
                   style={{ backgroundColor: isActive('/profile') ? '#a8d159' : 'transparent' }}
-                  onClick={onClose}
+                  onClick={() => {
+                    navigate('/profile');
+                    onClose();
+                  }}
                 >
                   Profile
                 </MenuItem>
-                <MenuItem onClick={onClose}>Organisation Information</MenuItem>
-                <MenuItem onClick={onClose}>My Dashboard</MenuItem>
-                <MenuItem onClick={onClose}>Analysis Results</MenuItem>
-                <MenuItem onClick={onClose}>Uploaded Resources</MenuItem>
-                <MenuItem onClick={onClose}>Support</MenuItem>
-                <MenuItem onClick={onClose}>Notifications</MenuItem>
-                <MenuItem onClick={onClose}>Sign Out</MenuItem>
+                <MenuItem
+                  style={{ backgroundColor: isActive('/organisation') ? '#a8d159' : 'transparent' }}
+                  onClick={() => {
+                    navigate('/organisation');
+                    onClose();
+                  }}
+                >
+                  Organisation Information
+                </MenuItem>
+                <MenuItem onClick={() => { navigate('/dashboard'); onClose(); }}>My Dashboard</MenuItem>
+                <MenuItem onClick={() => { navigate('/analysis-results'); onClose(); }}>Analysis Results</MenuItem>
+                <MenuItem onClick={() => { navigate('/uploaded-resources'); onClose(); }}>Uploaded Resources</MenuItem>
+                <MenuItem onClick={() => { navigate('/support'); onClose(); }}>Support</MenuItem>
+                <MenuItem onClick={() => { navigate('/notifications'); onClose(); }}>Notifications</MenuItem>
+                <MenuItem onClick={() => { navigate('/sign-out'); onClose(); }}>Sign Out</MenuItem>
               </Box>
             </Box>
           </DrawerContent>
@@ -143,4 +163,4 @@ export default function Sidebar1(props: Props) {
       </Drawer>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/django_project/frontend/src/pages/Home.tsx b/django_project/frontend/src/pages/Home.tsx
deleted file mode 100644
index cf39f45c..00000000
--- a/django_project/frontend/src/pages/Home.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Link } from "react-router-dom";
-import React from "react";
-
-export default function Home() {
-  return (
-    <div style={{ height: "100vh", padding: "20px", backgroundColor: "#232323", color: "white" }}>
-      <h1 style={{ fontSize: "48px", marginBottom: "20px" }}>Homepage</h1>
-      <p style={{ fontSize: "18px", marginBottom: "30px" }}>
-        Quickly use the links below to navigate through all pages
-      </p>
-      <ul style={{ listStyle: "none", padding: "0" }}>
-        <li style={{ marginBottom: "10px" }}>
-          <Link to="/home" style={{ color: "lightblue" }}>
-            HomePage
-          </Link>
-        </li>
-        <li style={{ marginBottom: "10px" }}>
-          <Link to="/another-page" style={{ color: "lightblue" }}>
-            Another Page
-          </Link>
-        </li>
-      </ul>
-      <p>src/pages/Home.tsx</p>
-      <p>This project was generated by Dhiwise</p>
-    </div>
-  );
-}
diff --git a/django_project/frontend/src/pages/OrganisationInformation/index.tsx b/django_project/frontend/src/pages/OrganisationInformation/index.tsx
new file mode 100644
index 00000000..d821db27
--- /dev/null
+++ b/django_project/frontend/src/pages/OrganisationInformation/index.tsx
@@ -0,0 +1,265 @@
+import React, { useState, useEffect } from "react";
+import Helmet from "react-helmet";
+import {
+  Box,
+  Heading,
+  Flex,
+  Input,
+  Table,
+  Tbody,
+  Tr,
+  Td,
+  Thead,
+  Button,
+  Badge,
+  IconButton,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Divider,
+} from "@chakra-ui/react";
+import { FaPlus, FaTrash } from "react-icons/fa";
+import Header from "../../components/Header";
+import Sidebar from "../../components/SideBar";
+import "../../styles/index.css";
+
+// Define types for the data
+interface Member {
+  user: string;
+  role: string;
+}
+
+interface Invitation {
+  user: string;
+  role: string;
+  status: string;
+}
+
+interface Organization {
+  members: Member[];
+  invitations: Invitation[];
+}
+
+export default function OrganisationInformation() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [organizations, setOrganizations] = useState<{ [key: string]: Organization }>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchOrganizations = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const response = await fetch("/api/organizations"); // Example API endpoint will replace with real one TODO
+        if (!response.ok) {
+          throw new Error("Failed to fetch organizations.");
+        }
+        
+        const data = await response.json();
+        setOrganizations(data);
+      } catch (err: any) {
+        setError("No data available.");
+        setOrganizations({
+            default: {
+              members: [],
+              invitations: [],
+            }
+          })
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchOrganizations();
+  }, []);
+
+  return (
+    <>
+      <Helmet>
+        <title>Organisation Information - Manage Organisation Details</title>
+        <meta
+          name="description"
+          content="Manage your organisation's information, members, and invitations."
+        />
+      </Helmet>
+      <Header />
+
+      <Box bg="white" w="100%">
+        <Flex direction={{ base: "column", md: "row" }} gap="30px" alignItems="start">
+          {/* Sidebar */}
+          <Sidebar display={{ base: "none", md: "flex" }} />
+
+          {/* Main Content */}
+          <Box
+            flex="1"
+            ml={{ base: "55px", md: "0px" }}
+            mt={{ base: "0px", md: "20px" }}
+            width={{ base: "80%", md: "auto" }}
+            overflow={"auto"}
+          >
+            <Heading size="lg" mb={6} color="black">
+              My Organisations
+            </Heading>
+
+            {loading && <p>Loading...</p>}
+            {error && <p>{error}</p>}
+
+            {/* Organisation Tabs */}
+            <Tabs variant="unstyled">
+              <Box
+                width="fit-content"
+                border="1px solid"
+                borderColor="gray.300"
+                borderBottom="none"
+                borderRadius="5px"
+                overflow="hidden"
+              >
+                <TabList>
+                  {Object.keys(organizations).map((orgKey, idx) => (
+                    <Tab
+                      key={idx}
+                      _selected={{ color: "white", bg: "dark_green.800" }}
+                      _hover={{ bg: "light_green.400" }}
+                      px={6}
+                      py={2}
+                    >
+                      {orgKey}
+                    </Tab>
+                  ))}
+                </TabList>
+              </Box>
+
+              <Divider mb={6} borderColor="black" borderWidth="1px" width={{ base: "auto", md: "99%" }} />
+
+              <TabPanels>
+                {Object.values(organizations).map((organization, index) => (
+                  <TabPanel key={index}>
+                    {/* Organisation Members Section */}
+                    <Heading size="md" mb={4} color="black">
+                      Organisation Members
+                    </Heading>
+                    <Flex align="center" mb={4} justify="space-between">
+                      <Flex align="center" w="auto" position="relative">
+                        <Input
+                          placeholder="Search organisation members"
+                          value={searchTerm}
+                          onChange={(e) => setSearchTerm(e.target.value)}
+                          borderColor="gray.400"
+                          mr={2}
+                          w={{ base: "full", md: 80 }}
+                        />
+                      </Flex>
+
+                      <Button
+                        leftIcon={<FaPlus />}
+                        colorScheme="green"
+                        variant="solid"
+                        backgroundColor="dark_green.800"
+                        _hover={{ backgroundColor: "light_green.400" }}
+                        fontWeight={700}
+                        w="auto"
+                        h={10}
+                        color="white.a700"
+                        borderRadius="0px"
+                      >
+                        Add People
+                      </Button>
+                    </Flex>
+
+                    <Divider mb={6} borderColor="black" borderWidth="1px" />
+
+                    <Box overflowX="auto">
+                      <Table variant="unstyled" size="sm">
+                        <Thead borderBottom="1px solid" borderColor="gray.400">
+                          <Tr>
+                            <Td fontWeight="bold">User</Td>
+                            <Td fontWeight="bold">Role</Td>
+                            <Td fontWeight="bold" textAlign="center">Actions</Td>
+                          </Tr>
+                        </Thead>
+                        <Tbody>
+                          {organization.members.slice(0, 5).map((member, idx) => (
+                            <Tr key={idx}>
+                              <Td>{member.user}</Td>
+                              <Td>{member.role}</Td>
+                              <Td textAlign="center" display="flex" justifyContent="center">
+                                <IconButton
+                                  aria-label="Delete member"
+                                  icon={<FaTrash />}
+                                  colorScheme="red"
+                                  variant="ghost"
+                                />
+                              </Td>
+                            </Tr>
+                          ))}
+                        </Tbody>
+                      </Table>
+                    </Box>
+
+                    {organization.members.length > 4 && (
+                      <Flex justify="flex-end" mt={2}>
+                        <Button variant="link" color="black">
+                          View All
+                        </Button>
+                      </Flex>
+                    )}
+
+                    <Heading size="md" mt={8} mb={4} color="black">
+                      Invitations
+                    </Heading>
+
+                    <Divider mb={6} borderColor="black" borderWidth="1px" />
+
+                    <Box overflowX="auto">
+                      <Table variant="unstyled" size="sm">
+                        <Thead borderBottom="1px solid" borderColor="gray.400">
+                          <Tr>
+                            <Td fontWeight="bold">User</Td>
+                            <Td fontWeight="bold">Role</Td>
+                            <Td fontWeight="bold">Status</Td>
+                          </Tr>
+                        </Thead>
+                        <Tbody>
+                          {organization.invitations.slice(0, 5).map((invite, idx) => (
+                            <Tr key={idx}>
+                              <Td>{invite.user}</Td>
+                              <Td>{invite.role}</Td>
+                              <Td>
+                                <Badge
+                                  backgroundColor={invite.status === "Joined" ? "light_green.400" : invite.status === "Pending" ? "#3e3e3e" : "yellow"}
+                                  color="white"
+                                  variant="solid"
+                                  px={4}
+                                  py={2}
+                                  borderRadius="full"
+                                >
+                                  {invite.status}
+                                </Badge>
+                              </Td>
+                            </Tr>
+                          ))}
+                        </Tbody>
+                      </Table>
+                    </Box>
+
+                    {organization.invitations.length > 5 && (
+                      <Flex justify="flex-end" mt={2}>
+                        <Button variant="link" color="black">
+                          View All
+                        </Button>
+                      </Flex>
+                    )}
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </Tabs>
+          </Box>
+        </Flex>
+      </Box>
+    </>
+  );
+}