diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 3448db0c..348dd3d2 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable */
+/* eslint-disable */
 import React from 'react';
 
 interface Props {
diff --git a/src/components/CommunityQuestions.tsx b/src/components/CommunityQuestions.tsx
new file mode 100644
index 00000000..d555d88c
--- /dev/null
+++ b/src/components/CommunityQuestions.tsx
@@ -0,0 +1,340 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery, useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import {
+  GET_ALL_QUESTIONS,
+  CREATE_QUESTION,
+  CREATE_ANSWER,
+  DELETE_QUESTION,
+  DELETE_ANSWER,
+} from '../queries/questions.query';
+
+function CommunityQuestions() {
+  const { loading, error, data, refetch } = useQuery(GET_ALL_QUESTIONS);
+  const [createQuestion, { loading: isSubmitting }] =
+    useMutation(CREATE_QUESTION);
+  const { t } = useTranslation();
+  const [createAnswer] = useMutation(CREATE_ANSWER);
+  const [deleteQuestion] = useMutation(DELETE_QUESTION);
+  const [deleteAnswer] = useMutation(DELETE_ANSWER);
+  const [loggedUser, setLoggedUser] = useState<string | null>(null);
+  const [questionText, setQuestionText] = useState('');
+  const [answerText, setAnswerText] = useState('');
+  const [selectedQuestion, setSelectedQuestion] = useState<any>(null);
+  const [questionTitleText, setQuestionTitleText] = useState<any>(null);
+  const [questions, setQuestions] = useState<any[]>([]);
+
+  useEffect(() => {
+    const authData = localStorage.getItem('auth');
+    if (authData) {
+      const parsedAuthData = JSON.parse(authData);
+      setLoggedUser(parsedAuthData.userId);
+    }
+  }, []);
+  useEffect(() => {
+    if (data) setQuestions(data.getAllQuestions);
+
+    if (data && selectedQuestion) {
+      const updatedQuestion = data.getAllQuestions.find(
+        (question: any) => question.id === selectedQuestion.id,
+      );
+      setSelectedQuestion(updatedQuestion || null);
+    }
+  }, [data, selectedQuestion]);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error loading questions.</p>;
+
+  const handleCreateQuestion = async () => {
+    if (questionText.trim()) {
+      await createQuestion({
+        variables: {
+          title: questionTitleText,
+          content: questionText,
+        },
+        update: (cache, { data: { createQuestion } }) => {
+          const existingQuestions: any = cache.readQuery({
+            query: GET_ALL_QUESTIONS,
+          });
+          cache.writeQuery({
+            query: GET_ALL_QUESTIONS,
+            data: {
+              getAllQuestions: [
+                ...existingQuestions.getAllQuestions,
+                createQuestion,
+              ],
+            },
+          });
+        },
+        onError: (error) => {
+          toast.error('Unable to create question.');
+        },
+        onCompleted: () => {
+          toast.success('Question created successfully');
+          refetch();
+          setQuestionText('');
+          setQuestionTitleText('');
+        },
+      });
+    } else {
+      toast.error('Question text cannot be empty.');
+    }
+  };
+
+  const handleCreateAnswer = async (questionId: string) => {
+    if (answerText.trim()) {
+      await createAnswer({
+        variables: {
+          questionId,
+          content: answerText,
+        },
+        update: (cache, { data: { createAnswer } }) => {
+          const existingQuestions: any = cache.readQuery({
+            query: GET_ALL_QUESTIONS,
+          });
+          const updatedQuestions = existingQuestions.getAllQuestions.map(
+            (question: any) => {
+              if (question?.id === questionId) {
+                return {
+                  ...question,
+                  answers: [...(question?.answers || []), createAnswer],
+                };
+              }
+
+              return question;
+            },
+          );
+          setQuestions(updatedQuestions);
+          cache.writeQuery({
+            query: GET_ALL_QUESTIONS,
+            data: { getAllQuestions: updatedQuestions },
+          });
+        },
+        onError: (error) => {
+          toast.error('Unable to submit your answer.');
+        },
+        onCompleted: () => {
+          toast.success('Answer submitted successfully');
+          refetch();
+          setAnswerText('');
+        },
+      });
+    } else {
+      toast.error('Answer text cannot be empty.');
+    }
+  };
+
+  const handleDeleteQuestion = async (questionId: string) => {
+    await deleteQuestion({
+      variables: { id: questionId },
+      update: (cache) => {
+        const existingQuestions: any = cache.readQuery({
+          query: GET_ALL_QUESTIONS,
+        });
+        const updatedQuestions = existingQuestions.getAllQuestions.filter(
+          (question: any) => question?.id !== questionId,
+        );
+        cache.writeQuery({
+          query: GET_ALL_QUESTIONS,
+          data: { getAllQuestions: updatedQuestions },
+        });
+      },
+      onError: (error) => {
+        toast.error('Unable to delete the question.');
+      },
+      onCompleted: () => {
+        toast.success('Question deleted successfully');
+        setSelectedQuestion('');
+
+        refetch();
+      },
+    });
+  };
+
+  const handleDeleteAnswer = async (answerId: string) => {
+    await deleteAnswer({
+      variables: { id: answerId },
+      update: (cache) => {
+        const existingQuestions: any = cache.readQuery({
+          query: GET_ALL_QUESTIONS,
+        });
+        const updatedQuestions = existingQuestions.getAllQuestions.map(
+          (question: any) => ({
+            ...question,
+            answers: question?.answers.filter(
+              (answer: any) => answer.id !== answerId,
+            ),
+          }),
+        );
+        cache.writeQuery({
+          query: GET_ALL_QUESTIONS,
+          data: { getAllQuestions: updatedQuestions },
+        });
+      },
+      onError: (error) => {
+        toast.error('Unable to delete the answer.');
+      },
+      onCompleted: () => {
+        toast.success('Answer deleted successfully');
+        // setSelectedQuestion('');
+        refetch({ query: GET_ALL_QUESTIONS });
+      },
+    });
+  };
+
+  return (
+    <div className="flex  items-start   p-4 bg-indigo-100 dark:bg-transparent rounded-md shadow-lg h-full ">
+      <div className="w-1/3 pr-4 border-r border-divider-bg dark:border-border-dark ">
+        <h2 className="text-lg font-semibold text-center text-header-text dark:text-dark-text-fill">
+          Questions
+        </h2>
+        {loggedUser && (
+          <div className="mt-4 -4 bg-tertiary dark:bg-transparent rounded-md flex flex-col gap-2">
+            <input
+              type="text"
+              value={questionTitleText}
+              onChange={(e) => setQuestionTitleText(e.target.value)}
+              placeholder="Write question title..."
+              className="p-2 border dark:bg-dark-tertiary  border-gray-300 dark:border-gray-600 dark:text-black rounded w-full"
+            />
+            <textarea
+              value={questionText}
+              onChange={(e) => setQuestionText(e.target.value)}
+              rows={3}
+              className="w-full dark:bg-dark-tertiary  p-2 border rounded-md dark:text-black"
+              placeholder="Ask a question..."
+            />
+            <button
+              onClick={handleCreateQuestion}
+              disabled={isSubmitting}
+              type="button"
+              className="mt-2 w-fit p-2 px-6 bg-primary text-white rounded-md disabled:opacity-50"
+            >
+              {isSubmitting ? 'Submitting...' : 'Submit Question'}
+            </button>
+          </div>
+        )}
+        <ul className="mt-4 space-y-4">
+          {questions?.map((question: any) => (
+            <li
+              key={question?.id}
+              className={`cursor-pointer p-3 rounded-md shadow-sm ${
+                selectedQuestion?.id === question?.id
+                  ? 'bg-primary text-dark-text-fill'
+                  : 'bg-tertiary text-light-text dark:bg-dark-tertiary dark:text-dark-text-fill'
+              }`}
+              onClick={() => setSelectedQuestion(question)}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  setSelectedQuestion(question);
+                }
+              }}
+              role="presentation"
+            >
+              <p className="text-md font-semibold">{question?.title}</p>
+              <p className="text-sm text-secondary dark:text-dark-text-fill">
+                Asked by: {question?.author?.email}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="w-2/3 pl-4">
+        {selectedQuestion ? (
+          <div>
+            <h2 className="text-lg font-bold text-primary">
+              {selectedQuestion?.title}
+            </h2>
+            <span>{selectedQuestion?.content}</span>
+            <p className="text-sm text-secondary dark:text-dark-text-fill">
+              Asked by {selectedQuestion?.author?.email}
+            </p>
+            {loggedUser && loggedUser === selectedQuestion?.author?.id && (
+              <button
+                type="button"
+                onClick={() => handleDeleteQuestion(selectedQuestion?.id)}
+                className="text-red-500 text-sm"
+              >
+                {t('Delete')}
+              </button>
+            )}
+
+            <div className="mt-4 dark:p-4  dark:bg-dark-tertiary">
+              <h3 className="font-semibold text-secondary dark:text-dark-text-fill border-b border-black py-2">
+                Answers thread
+              </h3>
+
+              {selectedQuestion?.answers?.length > 0 ? (
+                selectedQuestion?.answers.map((answer: any) => (
+                  <div
+                    key={answer.id}
+                    className={`mt-2 p-4  rounded-md flex flex-col ${
+                      loggedUser && loggedUser === answer?.author?.id
+                        ? 'items-end'
+                        : 'items-start'
+                    }`}
+                  >
+                    <div
+                      className={` bg-gray-100 dark:bg-primary shadow dark:text-white text-black dark:bg-dark-secondary p-2 rounded-md ${
+                        loggedUser && loggedUser === answer?.author?.id
+                          ? 'text-right'
+                          : 'text-left'
+                      }`}
+                    >
+                      <p>{answer.content}</p>
+                      <p className="text-sm text-secondary  dark:text-white">
+                        Answered by {answer.author.email}
+                      </p>
+                    </div>
+
+                    {/* Delete button for the user's own answers */}
+                    {loggedUser && loggedUser === answer?.author?.id && (
+                      <button
+                        type="button"
+                        onClick={() => handleDeleteAnswer(answer.id)}
+                        className="mt-2 text-red-500 text-sm"
+                      >
+                        {t('Delete')}
+                      </button>
+                    )}
+                  </div>
+                ))
+              ) : (
+                <p className="text-sm text-gray-500 dark:text-dark-45">
+                  No answers yet. Be the first to answer!
+                </p>
+              )}
+
+              {/* Answer submission form for the logged-in user */}
+              {loggedUser && (
+                <div className="mt-4 flex items-start flex-col w-full">
+                  <textarea
+                    value={answerText}
+                    onChange={(e) => setAnswerText(e.target.value)}
+                    placeholder="Write an answer..."
+                    className="p-2 border outline-none bg-transparent dark:text-white dark:bg-dark-tertiary min-w-full min-h-24 border-gray-300 dark:border-gray-600 dark:text-black rounded"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => handleCreateAnswer(selectedQuestion?.id)}
+                    className="mt-2 bg-primary text-white rounded p-2 px-6"
+                  >
+                    Submit Answer
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <p className="text-lg text-gray-500 dark:text-dark-45">
+            Select a question to view details.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CommunityQuestions;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d69be92c..41fd7694 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -9,6 +9,7 @@ import {
   FaPlayCircle,
 } from 'react-icons/fa';
 import i18next from 'i18next';
+import { Link } from 'react-router-dom';
 import LogoFooter from '../assets/logo.svg';
 import getLanguage from '../utils/getLanguage';
 import LogoIcon from './logoIcon';
@@ -76,7 +77,9 @@ function Footer({ styles }: any) {
             <div className="w-full sm:w-1/2 md:w-1/4 p-4   text-center lg:text-left">
               <h3 className="font-bold mb-2">{t('Resources')}</h3>
               <ul>
-                <li className="mb-1">{t('Community')}</li>
+                <li className="mb-1">
+                  <Link to="/community">{t('Community')} </Link>
+                </li>
                 <li className="mb-1">{t('Help Center')}</li>
               </ul>
             </div>
diff --git a/src/components/ProgramUsersModal.tsx b/src/components/ProgramUsersModal.tsx
index 64c47b1f..dbdd1a78 100644
--- a/src/components/ProgramUsersModal.tsx
+++ b/src/components/ProgramUsersModal.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { gql, useQuery } from '@apollo/client';
-import DataTable from './DataTable';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { styled } from '@mui/material/styles';
+import DataTable from './DataTable';
 
 interface User {
   email: string;
@@ -70,7 +70,7 @@ export function ProgramUsersModal({
   isOpen,
   onClose,
   // defaultProgram = 'default',
-  programName
+  programName,
 }: ProgramUsersModalProps) {
   const { data, loading, error } = useQuery(GET_ALL_USERS, {
     variables: {
@@ -79,10 +79,11 @@ export function ProgramUsersModal({
     skip: !isOpen,
   });
 
-  const programUsers = data?.getAllUsers.filter(
-    (user: User) => user.team?.cohort?.program?.name === programName
+  const programUsers =
+    data?.getAllUsers.filter(
+      (user: User) => user.team?.cohort?.program?.name === programName,
       // || (user.team === null && programName === defaultProgram)
-  ) || [];
+    ) || [];
 
   const columns = [
     {
@@ -91,7 +92,11 @@ export function ProgramUsersModal({
       Cell: ({ value }: CellProps) => (
         <div className="flex items-center">
           <span className="hidden ml-2 md:inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700">
-            <svg className="h-full w-full text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24">
+            <svg
+              className="h-full w-full text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
               <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
             </svg>
           </span>
@@ -119,7 +124,7 @@ export function ProgramUsersModal({
     if (loading) {
       return (
         <div className="flex justify-center items-center h-48">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
         </div>
       );
     }
@@ -152,12 +157,7 @@ export function ProgramUsersModal({
   };
 
   return (
-    <StyledDialog 
-      open={isOpen} 
-      onClose={onClose} 
-      maxWidth="md" 
-      fullWidth
-    >
+    <StyledDialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
       <div className="bg-white dark:bg-gray-800 rounded-t-lg">
         <StyledDialogTitle className="text-gray-900 dark:text-white border-b dark:border-gray-700">
           {programName} - Users
@@ -168,4 +168,4 @@ export function ProgramUsersModal({
       </div>
     </StyledDialog>
   );
-}
\ No newline at end of file
+}
diff --git a/src/containers/Routes.tsx b/src/containers/Routes.tsx
index b1dcc71b..c7193430 100644
--- a/src/containers/Routes.tsx
+++ b/src/containers/Routes.tsx
@@ -22,6 +22,7 @@ const Adminlogin = React.lazy(() => import('../pages/Organization/AdminLogin'));
 const Pricing = React.lazy(() => import('../pages/Pricing'));
 /* istanbul ignore next */
 const About = React.lazy(() => import('../pages/Comingsoon'));
+const Community = React.lazy(() => import('../pages/Community'));
 /* istanbul ignore next */
 const Product = React.lazy(() => import('../pages/Comingsoon'));
 /* istanbul ignore next */
@@ -39,7 +40,7 @@ import Noredirect from '../pages/Noredirect';
 import RedirectHandler from '../pages/RedirectHandler';
 import ProtectedRoutes from '../ProtectedRoute';
 import RemoveTokenPage from '../utils/RemoveTokenPage';
-import PrivateRoute from '../utils/PrivateRoute'
+import PrivateRoute from '../utils/PrivateRoute';
 import CalendarConfirmation from '../components/CalendarConfirmation';
 import NotFound from '../components/NotFoundPage';
 
@@ -48,6 +49,7 @@ function MainRoutes() {
     <div className="min-h-screen page-layout">
       <Suspense>
         <Routes>
+          {/* <Route path="/community" element={<h1>Hello my son</h1>} /> */}
           <Route path="/*" element={<DashRoutes />} />
           <Route
             path="/"
@@ -144,6 +146,14 @@ function MainRoutes() {
                 </Suspense>
               }
             />
+            <Route
+              path="/community"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <Community />
+                </Suspense>
+              }
+            />
             <Route
               path="/product"
               element={
@@ -164,12 +174,14 @@ function MainRoutes() {
             />
             <Route path="/noredirect" element={<Noredirect />} />
             <Route path="/redirect" element={<RedirectHandler />} />
-            <Route path="/calendar/confirm" element={
-              <PrivateRoute>
-                <CalendarConfirmation/>
-              </PrivateRoute>
-            }>
-            </Route>
+            <Route
+              path="/calendar/confirm"
+              element={
+                <PrivateRoute>
+                  <CalendarConfirmation />
+                </PrivateRoute>
+              }
+            ></Route>
           </Route>
           <Route path="*" element={<NotFound />} />
         </Routes>
diff --git a/src/pages/Community.tsx b/src/pages/Community.tsx
new file mode 100644
index 00000000..e74254eb
--- /dev/null
+++ b/src/pages/Community.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import CommunityQuestions from '../components/CommunityQuestions';
+
+export default function Community() {
+  return <CommunityQuestions />;
+}
diff --git a/src/queries/questions.query.tsx b/src/queries/questions.query.tsx
new file mode 100644
index 00000000..b741f903
--- /dev/null
+++ b/src/queries/questions.query.tsx
@@ -0,0 +1,83 @@
+import { gql } from '@apollo/client';
+
+export const GET_ALL_QUESTIONS = gql`
+  query GetAllQuestions {
+    getAllQuestions {
+      id
+      title
+      content
+      author {
+        id
+        email
+        profile {
+          avatar
+          bio
+        }
+      }
+      createdAt
+      answers {
+        id
+        content
+        author {
+          id
+          email
+        }
+        createdAt
+      }
+    }
+  }
+`;
+// Mutation for creating a new question
+export const CREATE_QUESTION = gql`
+  mutation CreateQuestion($title: String!, $content: String!) {
+    createQuestion(title: $title, content: $content) {
+      id
+      title
+      content
+      createdAt
+      author {
+        id
+        email
+      }
+      answers {
+        id
+      }
+    }
+  }
+`;
+
+// Mutation for answering a question
+export const CREATE_ANSWER = gql`
+  mutation CreateAnswer($questionId: ID!, $content: String!) {
+    createAnswer(questionId: $questionId, content: $content) {
+      id
+      content
+      createdAt
+      author {
+        id
+        email
+      }
+      question {
+        id
+      }
+    }
+  }
+`;
+
+// Mutation for deleting a question
+export const DELETE_QUESTION = gql`
+  mutation DeleteQuestion($id: ID!) {
+    deleteQuestion(id: $id) {
+      id
+    }
+  }
+`;
+
+// Mutation for deleting an answer
+export const DELETE_ANSWER = gql`
+  mutation DeleteAnswer($id: ID!) {
+    deleteAnswer(id: $id) {
+      id
+    }
+  }
+`;