From c36a49a1ee9b0ac7dfb25681008c0c5b5d5ca07c Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 20 May 2023 23:53:28 +0000
Subject: [PATCH] CLASSROOMIO-T-46: Forum CRUD MVP

Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-13
Merged-by: Digdippa Team <digdippa@gmail.com>
---
 src/components/Chip/index.svelte              |   1 -
 .../Course/components/Navigation/index.svelte |   4 +-
 .../components/Editor/index.svelte            |   8 +-
 src/components/HashTags/index.svelte          |   5 +-
 src/components/Org/Audience/index.svelte      |  12 +-
 .../Org/Community/DeleteCommentModal.svelte   |  37 ++
 src/components/Org/Community/index.svelte     | 110 +++++
 .../Org/Settings/OrgSettings.svelte           |   4 +-
 src/components/Org/SideBar.svelte             | 102 ++---
 src/components/PageNav/index.svelte           |   2 +-
 src/components/PrimaryButton/constants.js     |   6 +-
 src/components/PrimaryButton/index.svelte     |   7 +-
 src/components/TextEditor/index.svelte        |  20 +
 src/components/Vote/index.svelte              |  11 +-
 src/routes/_error.svelte                      |   4 -
 src/routes/_layout.svelte                     |   3 +
 src/routes/admin.svelte                       | 153 -------
 src/routes/api/_db.js                         | 399 ----------------
 src/routes/api/auth.js                        |   7 -
 src/routes/api/course.js                      |  27 --
 src/routes/api/lesson.js                      |  19 -
 src/routes/api/waitinglist.js                 |  15 -
 src/routes/ask.svelte                         | 100 ----
 src/routes/courses.svelte                     |  96 ----
 src/routes/discussions.svelte                 | 229 ----------
 src/routes/discussions/[id].json.js           |  30 --
 src/routes/discussions/[id].svelte            | 108 -----
 src/routes/discussions/_discussions.js        | 181 --------
 src/routes/mail/invite.js                     |  15 -
 src/routes/onboarding.svelte                  |   7 +-
 src/routes/org/[slug]/community/[slug].svelte | 431 ++++++++++++++++++
 src/routes/org/[slug]/community/ask.svelte    |  96 ++++
 src/routes/org/[slug]/community/index.svelte  |  25 +
 src/routes/org/[slug]/courses.svelte          |   2 +-
 src/routes/org/[slug]/settings/domains.svelte |   4 +-
 src/routes/org/[slug]/settings/teams.svelte   |   4 +-
 src/routes/people.svelte                      |  92 ----
 src/routes/profile/[id].svelte                |   6 +-
 src/utils/functions/generateSlug.js           |   9 +
 src/utils/functions/validator.js              |  29 ++
 src/utils/services/org/index.js               |  18 +-
 src/utils/store/org.js                        |   6 +-
 42 files changed, 871 insertions(+), 1573 deletions(-)
 create mode 100644 src/components/Org/Community/DeleteCommentModal.svelte
 create mode 100644 src/components/Org/Community/index.svelte
 delete mode 100644 src/routes/admin.svelte
 delete mode 100644 src/routes/api/_db.js
 delete mode 100644 src/routes/api/auth.js
 delete mode 100644 src/routes/api/course.js
 delete mode 100644 src/routes/api/lesson.js
 delete mode 100644 src/routes/api/waitinglist.js
 delete mode 100644 src/routes/ask.svelte
 delete mode 100644 src/routes/courses.svelte
 delete mode 100644 src/routes/discussions.svelte
 delete mode 100644 src/routes/discussions/[id].json.js
 delete mode 100644 src/routes/discussions/[id].svelte
 delete mode 100644 src/routes/discussions/_discussions.js
 delete mode 100644 src/routes/mail/invite.js
 create mode 100644 src/routes/org/[slug]/community/[slug].svelte
 create mode 100644 src/routes/org/[slug]/community/ask.svelte
 create mode 100644 src/routes/org/[slug]/community/index.svelte
 delete mode 100644 src/routes/people.svelte
 create mode 100644 src/utils/functions/generateSlug.js

diff --git a/src/components/Chip/index.svelte b/src/components/Chip/index.svelte
index c5da627a..c702694e 100644
--- a/src/components/Chip/index.svelte
+++ b/src/components/Chip/index.svelte
@@ -22,7 +22,6 @@
   }
 
   .bg-set {
-    color: #586069;
     background-color: #d1d5da80;
   }
 </style>
diff --git a/src/components/Course/components/Navigation/index.svelte b/src/components/Course/components/Navigation/index.svelte
index 43dc3fac..63f62e96 100644
--- a/src/components/Course/components/Navigation/index.svelte
+++ b/src/components/Course/components/Navigation/index.svelte
@@ -24,7 +24,7 @@
   import { course } from '../../store';
   import { updateCourse } from '../../../../utils/services/courses';
   import { profile } from '../../../../utils/store/user';
-  import { currentOrg } from '../../../../utils/store/org';
+  import { currentOrg, currentOrgPath } from '../../../../utils/store/org';
   import { isMobile } from '../../../../utils/store/useMobile';
 
   // export let lessonId;
@@ -209,7 +209,7 @@
       >
         <IconButton
           value="toggle"
-          onClick={() => goto(`/org/${$currentOrg.siteName}/courses`)}
+          onClick={() => goto(`${$currentOrgPath}/courses`)}
           buttonClassName="mx-3"
         >
           <Home32 class="carbon-icon" />
diff --git a/src/components/CourseLandingPage/components/Editor/index.svelte b/src/components/CourseLandingPage/components/Editor/index.svelte
index b63df473..05a836c9 100644
--- a/src/components/CourseLandingPage/components/Editor/index.svelte
+++ b/src/components/CourseLandingPage/components/Editor/index.svelte
@@ -16,6 +16,7 @@
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
   import { VARIANTS } from '../../../PrimaryButton/constants';
   import { updateCourse } from '../../../../utils/services/courses';
+  import generateSlug from '../../../../utils/functions/generateSlug';
 
   export let course;
   export let courseId;
@@ -66,13 +67,6 @@
     };
   }
 
-  function generateSlug(title) {
-    return title
-      .replaceAll(' ', '-')
-      .toLowerCase()
-      .concat(`-${new Date().getTime()}`);
-  }
-
   async function handleSave() {
     loading = true;
     course.slug = course.slug || generateSlug(course.title);
diff --git a/src/components/HashTags/index.svelte b/src/components/HashTags/index.svelte
index f733c298..ef3451fd 100644
--- a/src/components/HashTags/index.svelte
+++ b/src/components/HashTags/index.svelte
@@ -4,6 +4,9 @@
 
 <div class="break-all">
   {#each tags as tag}
-    <a class="text-blue-700 mr-5 text-sm" href="?filter={tag}">#{tag.toLowerCase()}</a>
+    <a
+      class="text-blue-700 dark:text-blue-500 mr-5 text-sm"
+      href="?filter={tag}">#{tag.toLowerCase()}</a
+    >
   {/each}
 </div>
diff --git a/src/components/Org/Audience/index.svelte b/src/components/Org/Audience/index.svelte
index ae561833..909cd3b1 100644
--- a/src/components/Org/Audience/index.svelte
+++ b/src/components/Org/Audience/index.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount } from 'svelte';
   import Box from '../../Box/index.svelte';
   import AudienceList from './AudienceList.svelte';
   import AudienceEmptyIcon from '../../Icons/AudienceEmptyIcon.svelte';
@@ -7,11 +6,16 @@
   import { orgAudience, currentOrg } from '../../../utils/store/org';
 
   let isLoading = false;
-  onMount(async () => {
+
+  async function fetchInitData(orgId) {
+    if (!orgId) return;
+
     isLoading = true;
-    await getOrgAudience($currentOrg.id);
+    await getOrgAudience(orgId);
     isLoading = false;
-  });
+  }
+
+  $: fetchInitData($currentOrg.id);
 </script>
 
 <div
diff --git a/src/components/Org/Community/DeleteCommentModal.svelte b/src/components/Org/Community/DeleteCommentModal.svelte
new file mode 100644
index 00000000..206cf44b
--- /dev/null
+++ b/src/components/Org/Community/DeleteCommentModal.svelte
@@ -0,0 +1,37 @@
+<script>
+  import Modal from '../../Modal/index.svelte';
+  import PrimaryButton from '../../PrimaryButton/index.svelte';
+  import { VARIANTS } from '../../PrimaryButton/constants';
+
+  export let onDelete = () => {};
+  export let onCancel = () => {};
+  export let open = false;
+</script>
+
+<Modal
+  onClose={() => (open = false)}
+  bind:open
+  width="w-96"
+  modalHeading="Delete comment"
+>
+  <div>
+    <h1 class="dark:text-white text-lg">
+      Are you sure you want to delete this comment?
+    </h1>
+
+    <div class="mt-5 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="No, keep it"
+        onClick={onCancel}
+      />
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.CONTAINED_DANGER}
+        label="Yes, delete"
+        onClick={onDelete}
+      />
+    </div>
+  </div>
+</Modal>
diff --git a/src/components/Org/Community/index.svelte b/src/components/Org/Community/index.svelte
new file mode 100644
index 00000000..9bfe9626
--- /dev/null
+++ b/src/components/Org/Community/index.svelte
@@ -0,0 +1,110 @@
+<script>
+  import { goto } from '@sapper/app';
+  import dayjs from 'dayjs';
+  import relativeTime from 'dayjs/plugin/relativeTime';
+  import AddComment20 from 'carbon-icons-svelte/lib/AddComment20';
+  import Vote from '../../Vote/index.svelte';
+  import Box from '../../Box/index.svelte';
+  import CoursesEmptyIcon from '../../Icons/CoursesEmptyIcon.svelte';
+  import Space from '../../Space/index.svelte';
+  import { currentOrgPath, currentOrg } from '../../../utils/store/org';
+  import { supabase } from '../../../utils/functions/supabase';
+
+  let discussions = [];
+
+  dayjs.extend(relativeTime);
+
+  async function fetchCommunityQuestions(orgId) {
+    if (!orgId) return;
+
+    const { data, error } = await supabase
+      .from('community_question')
+      .select(
+        `
+        organization_id,
+        title,
+        votes,
+        created_at,
+        slug,
+        comments:community_answer(count),
+        author:organizationmember!community_question_author_id_fkey!inner(
+          profile!inner(fullname)
+        )
+      `
+      )
+      .eq('organization_id', orgId);
+    console.log('data', data);
+    console.log('error', error);
+
+    if (error) {
+      console.error('Error loading community', error);
+      return goto(`${currentOrgPath}`);
+    }
+
+    discussions =
+      data?.map((discussion) => ({
+        title: discussion.title,
+        slug: discussion.slug,
+        author: discussion?.author?.profile?.fullname,
+        comments: discussion.comments?.[0]?.count || 0,
+        votes: discussion.votes,
+        createdAt: dayjs(discussion.created_at).fromNow(true),
+      })) || [];
+  }
+
+  $: fetchCommunityQuestions($currentOrg.id);
+</script>
+
+<div
+  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-gray-700"
+>
+  {#each discussions as discussion}
+    <div class="w-full flex border-bottom-c p-5">
+      <Vote value={discussion.votes} />
+      <div class="discussion-topic-author">
+        <h4>
+          <a
+            class="text-black dark:text-white"
+            rel="prefetch"
+            href="{$currentOrgPath}/community/{discussion.slug}"
+          >
+            {discussion.title}
+          </a>
+        </h4>
+        <span class="text-gray-600 dark:text-gray-100">
+          {discussion.author} asked {discussion.createdAt}
+        </span>
+      </div>
+      <Space />
+      <div class="flex items-center">
+        <AddComment20 />
+        <span class="ml-1">{discussion.comments}</span>
+      </div>
+    </div>
+  {:else}
+    <Box>
+      <CoursesEmptyIcon />
+      <h3 class="dark:text-white text-2xl my-5">No Questions asked</h3>
+      <p class="dark:text-white w-1/3 text-center">
+        Ask a question to the community
+      </p>
+    </Box>
+  {/each}
+</div>
+
+<style>
+  h4 {
+    font-size: 16px;
+    font-weight: 900;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    margin: 0;
+  }
+
+  .discussion-topic-author {
+    margin-right: 20px;
+  }
+  .discussion-topic-author span {
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/Org/Settings/OrgSettings.svelte b/src/components/Org/Settings/OrgSettings.svelte
index 7d17e5bd..89661d40 100644
--- a/src/components/Org/Settings/OrgSettings.svelte
+++ b/src/components/Org/Settings/OrgSettings.svelte
@@ -8,7 +8,7 @@
   import { supabase } from '../../../utils/functions/supabase';
   import { snackbarStore } from '../../Snackbar/store';
   import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
-  import { currentOrg } from '../../../utils/store/org';
+  import { currentOrg, currentOrgPath } from '../../../utils/store/org';
   import SectionTitle from '../SectionTitle.svelte';
 
   let avatar;
@@ -74,7 +74,7 @@
   }
 
   function gotoSetting(pathname) {
-    goto(`/org/${$currentOrg.siteName}/settings${pathname}`);
+    goto(`${$currentOrgPath}/settings${pathname}`);
   }
 </script>
 
diff --git a/src/components/Org/SideBar.svelte b/src/components/Org/SideBar.svelte
index 16d4ebc2..a6340018 100644
--- a/src/components/Org/SideBar.svelte
+++ b/src/components/Org/SideBar.svelte
@@ -1,6 +1,7 @@
 <script>
   import { stores } from '@sapper/app';
   import Help from 'carbon-icons-svelte/lib/Help20';
+  import UserMultipleIcon from 'carbon-icons-svelte/lib/UserMultiple20';
 
   import TextChip from '../../components/Chip/Text.svelte';
   import OrgSelector from '../../components/OrgSelector/OrgSelector.svelte';
@@ -9,13 +10,35 @@
   import SiteSettingsIcon from '../../components/Icons/SiteSettingsIcon.svelte';
   import AudienceIcon from '../../components/Icons/AudienceIcon.svelte';
   import Avatar from '../../components/Avatar/index.svelte';
-  import { currentOrg } from '../../utils/store/org';
+  import { currentOrg, currentOrgPath } from '../../utils/store/org';
   import { profile } from '../../utils/store/user';
 
-  let orgSiteName = '';
   let activeClass = 'bg-gray-200 dark:bg-gray-500';
   let { page } = stores();
 
+  const menuItems = [
+    {
+      path: '',
+      label: 'Home',
+    },
+    {
+      path: '/courses',
+      label: 'Courses',
+    },
+    {
+      path: '/community',
+      label: 'Community',
+    },
+    {
+      path: '/site',
+      label: 'Site settings',
+    },
+    {
+      path: '/audience',
+      label: 'Audience',
+    },
+  ];
+
   function isActive(pagePath, itemPath) {
     const pageLinkItems = pagePath.split('/');
     const itemLinkItems = itemPath.split('/');
@@ -26,8 +49,6 @@
 
     return pagePath.includes(itemPath);
   }
-
-  $: orgSiteName = $currentOrg.siteName;
 </script>
 
 <aside class="root bg-gray-100 dark:bg-gray-700 h-full">
@@ -51,55 +72,34 @@
       <OrgSelector />
 
       <ul class="my-5">
-        <a href="/org/{orgSiteName}" class="text-black">
-          <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
-              $page.path,
-              `/org/${orgSiteName}`
-            ) && activeClass}"
-          >
-            <HomeIcon />
-            <p class="dark:text-white ml-2">Home</p>
-          </li>
-        </a>
-        <a href="/org/{orgSiteName}/courses" class="text-black">
-          <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
-              $page.path,
-              `/org/${orgSiteName}/courses`
-            ) && activeClass}"
-          >
-            <CourseIcon />
-            <p class="dark:text-white ml-2">Courses</p>
-          </li>
-        </a>
-        <a href="/org/{orgSiteName}/site" class="text-black">
-          <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
-              $page.path,
-              `/org/${orgSiteName}/site`
-            ) && activeClass}"
-          >
-            <SiteSettingsIcon />
-            <p class="dark:text-white ml-2">Site settings</p>
-          </li>
-        </a>
-        <a href="/org/{orgSiteName}/audience" class="text-black">
-          <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
-              $page.path,
-              `/org/${orgSiteName}/audience`
-            ) && activeClass}"
-          >
-            <AudienceIcon />
-            <p class="dark:text-white ml-2">Audience</p>
-          </li>
-        </a>
+        {#each menuItems as menuItem}
+          <a href="{$currentOrgPath}{menuItem.path}" class="text-black">
+            <li
+              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+                $page.path,
+                `${$currentOrgPath}${menuItem.path}`
+              ) && activeClass}"
+            >
+              {#if menuItem.path === ''}
+                <HomeIcon />
+              {:else if menuItem.path === '/courses'}
+                <CourseIcon />
+              {:else if menuItem.path === '/site'}
+                <SiteSettingsIcon />
+              {:else if menuItem.path === '/community'}
+                <UserMultipleIcon class="carbon-icon" />
+              {:else if menuItem.path === '/audience'}
+                <AudienceIcon />
+              {/if}
+              <p class="dark:text-white ml-2">{menuItem.label}</p>
+            </li>
+          </a>
+        {/each}
       </ul>
     </div>
     <span class="flex-grow" />
     <ul class="my-5 pb-5 px-4">
-      <a href="/org" class="text-black">
+      <a href={$currentOrgPath} class="text-black">
         <li
           class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
         >
@@ -107,11 +107,11 @@
           <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
-      <a href="/org/{orgSiteName}/settings" class="text-black">
+      <a href="{$currentOrgPath}/settings" class="text-black">
         <li
           class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
             $page.path,
-            `/org/${orgSiteName}/settings`
+            `${$currentOrgPath}/settings`
           ) && activeClass}"
         >
           <Avatar
diff --git a/src/components/PageNav/index.svelte b/src/components/PageNav/index.svelte
index 6876c90c..98f254ba 100644
--- a/src/components/PageNav/index.svelte
+++ b/src/components/PageNav/index.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <div
-  class="header dark:bg-gray-700 flex items-center justify-between {!disableSticky &&
+  class="header dark:bg-gray-700 bg-white flex items-center justify-between {!disableSticky &&
     'sticky'} {paddingClass} {dynamicRootClass}"
   style={overidableStyle}
 >
diff --git a/src/components/PrimaryButton/constants.js b/src/components/PrimaryButton/constants.js
index 07c970c7..82b31dce 100644
--- a/src/components/PrimaryButton/constants.js
+++ b/src/components/PrimaryButton/constants.js
@@ -1,5 +1,6 @@
 export const VARIANTS = {
   CONTAINED: 'CONTAINED',
+  CONTAINED_INFO: 'CONTAINED_INFO',
   CONTAINED_DANGER: 'CONTAINED_DANGER',
   CONTAINED_SUCCESS: 'CONTAINED_SUCCESS',
   OUTLINED: 'OUTLINED',
@@ -10,14 +11,15 @@ export const VARIANTS = {
 
 export const VARIANTS_CLASS = {
   [VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white',
+  [VARIANTS.CONTAINED_INFO]:
+    'border-none bg-gray-400 hover:bg-gray-600 text-white',
   [VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
   [VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
   [VARIANTS.OUTLINED]:
     'border border-blue-700 hover:border-black-300 hover:bg-blue-200 text-black',
   [VARIANTS.NONE]:
     'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
-  [VARIANTS.TEXT]:
-    'text-black hover:border border-t-0 border-l-0 border-r-0 border-black-300',
+  [VARIANTS.TEXT]: 'text-black hover:underline',
   [VARIANTS.TEXT_DANGER]:
     'text-red-500 hover:border border-t-0 border-l-0 border-r-0 border-red-300',
 };
diff --git a/src/components/PrimaryButton/index.svelte b/src/components/PrimaryButton/index.svelte
index 7a5cb55d..2a59c23f 100644
--- a/src/components/PrimaryButton/index.svelte
+++ b/src/components/PrimaryButton/index.svelte
@@ -16,11 +16,12 @@
 </script>
 
 <button
-  class="{isDisabled &&
-    'bg-opacity-25 hover:bg-opacity-25 cursor-not-allowed'} flex items-center h-auto {VARIANTS_CLASS[
+  class="{isDisabled
+    ? 'bg-opacity-25 hover:bg-opacity-25 cursor-not-allowed'
+    : 'cursor-pointer'} flex items-center h-auto {VARIANTS_CLASS[
     isLoading ? VARIANTS.OUTLINED : variant
   ]} {!disablePadding &&
-    'py-1 px-5'} rounded-none {className} py-3 w-fit justify-center sm:w-auto {isLoading &&
+    'py-3 px-5'} rounded-none {className} w-fit justify-center sm:w-auto {isLoading &&
     'py-3 border-blue-700'} hover:shadow-xl transition delay-150 duration-300 ease-in-out"
   on:click={onClick}
   {name}
diff --git a/src/components/TextEditor/index.svelte b/src/components/TextEditor/index.svelte
index 120ee3c1..6879e041 100644
--- a/src/components/TextEditor/index.svelte
+++ b/src/components/TextEditor/index.svelte
@@ -6,6 +6,7 @@
   export let disable;
   export let docId;
   export let placeholder = 'Type something...';
+  export let errorMessage;
 
   const settings = {
     modules: {
@@ -74,4 +75,23 @@
 
 <div class="p-2 w-full h-full">
   <div bind:this={container} />
+  {#if errorMessage}
+    <p class="dark:text-white text-red-500 text-sm">
+      {errorMessage}
+    </p>
+  {/if}
 </div>
+
+<style>
+  :global(.dark .ql-stroke) {
+    stroke: #fff;
+  }
+
+  :global(.dark .ql-snow .ql-picker) {
+    color: #fff;
+  }
+
+  :global(.dark .ql-editor.ql-blank::before) {
+    color: #fff;
+  }
+</style>
diff --git a/src/components/Vote/index.svelte b/src/components/Vote/index.svelte
index 76b57fce..3f011be3 100644
--- a/src/components/Vote/index.svelte
+++ b/src/components/Vote/index.svelte
@@ -3,13 +3,14 @@
   import Chip from '../Chip/index.svelte';
 
   export let value = 0;
-
-  function upVote() {
-    value = value + 1;
-  }
+  export let upVote = () => {};
+  export let disabled = false;
 </script>
 
-<div class="vote border-none cursor-pointer" on:click={upVote}>
+<div
+  class="vote border-none {disabled ? 'cursor-not-allowed' : 'cursor-pointer'}"
+  on:click={disabled ? undefined : upVote}
+>
   <ArrowUp16 />
   <Chip {value} />
 </div>
diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
index 9a836cd4..e71025a0 100644
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -16,10 +16,6 @@
 
 <svelte:head>
   <title>{status}</title>
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/carbon-components-svelte/css/g90.css"
-  />
 </svelte:head>
 
 <div class="w-3/5 h-3/5 m-auto flex flex-col items-center justify-center">
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 2aab466f..49a8a8d2 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -102,6 +102,9 @@
             console.error('Error adding user to organisation', error);
           } else {
             console.log('Success adding user to organisation', data);
+            const memberId = data?.[0]?.id || '';
+
+            $currentOrg.memberId = memberId;
           }
 
           if (params.has('redirect')) {
diff --git a/src/routes/admin.svelte b/src/routes/admin.svelte
deleted file mode 100644
index 89cb0744..00000000
--- a/src/routes/admin.svelte
+++ /dev/null
@@ -1,153 +0,0 @@
-<!-- <script context="module">
-  export async function preload(page, { user, config }) {
-    return { user, config };
-  }
-</script> -->
-<script>
-  import GroupPresentation32 from 'carbon-icons-svelte/lib/GroupPresentation32';
-  import UserSpeaker32 from 'carbon-icons-svelte/lib/UserSpeaker32';
-  import Book32 from 'carbon-icons-svelte/lib/Book32';
-
-  let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
-  let animate = 'transition delay-75 duration-300 ease-in-out';
-  let boxes = [
-    {
-      label: 'Students',
-      value: 50,
-      icon: 'students',
-    },
-    {
-      label: 'Tutors',
-      value: 10,
-      icon: 'tutor',
-    },
-    {
-      label: 'Courses',
-      value: 20,
-      icon: 'courses',
-    },
-  ];
-
-  let topStudents = [
-    {
-      id: 1,
-      name: 'Brad Traversy',
-      score: 97.8,
-    },
-    {
-      id: 2,
-      name: 'Ebuka Jacobs',
-      score: 96,
-    },
-    {
-      id: 3,
-      name: 'Ngozi Okonjo Iwuala',
-      score: 95,
-    },
-    {
-      id: 4,
-      name: 'Nathaniel Bassey',
-      score: 80,
-    },
-    {
-      id: 5,
-      name: 'Barack Obama',
-      score: 79,
-    },
-  ];
-
-  let topCourses = [
-    {
-      title: 'CityBIM Basic Module',
-      rating: 5,
-    },
-    {
-      title: 'CityBIM Advanced Module',
-      rating: 4.5,
-    },
-    {
-      title: 'Introduction to ClasroomIO',
-      rating: 4.2,
-    },
-    {
-      title: 'Advanced Builders Module',
-      rating: 4.1,
-    },
-    {
-      title: 'Artificial Intelligence - Basics',
-      rating: 4,
-    },
-  ];
-</script>
-
-<svelte:head>
-  <title>Admin Dashboard - ClassroomIO</title>
-</svelte:head>
-
-<div class="root w-full py-10 bg-gray-100 dark:bg-gray-700">
-  <div class="flex items-center justify-evenly max-w-6xl m-auto">
-    {#each boxes as box}
-      <div
-        class="bg-white dark:bg-gray-800 rounded-md py-3 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
-      >
-        {#if box.icon === 'students'}
-          <UserSpeaker32 class="carbon-icon" />
-        {:else if box.icon === 'tutor'}
-          <GroupPresentation32 class="carbon-icon" />
-        {:else if box.icon === 'courses'}
-          <Book32 class="carbon-icon" />
-        {/if}
-        <p class="dark:text-white text-xl">{box.label}</p>
-        <h3 class="dark:text-white text-3xl m-0 my-2">{box.value}</h3>
-      </div>
-    {/each}
-  </div>
-
-  <div class="flex items-center justify-evenly mt-16">
-    <div class="table rounded-md bg-white dark:bg-gray-800 shadow-md">
-      <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="dark:text-white m-0 py-3 pl-2 text-lg">
-          Outstanding students
-        </h3>
-      </div>
-
-      {#each topStudents as topStudent, index}
-        <div
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100 dark:bg-gray-700"
-        >
-          <span class="mr-2">{index + 1}</span>
-          <p class="dark:text-white text-lg">{topStudent.name}</p>
-          <span class="flex-grow" />
-          <p class="dark:text-white text-lg">{topStudent.score}</p>
-        </div>
-      {/each}
-    </div>
-
-    <div class="table rounded-md bg-white dark:bg-gray-800 shadow-md">
-      <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="dark:text-white m-0 py-3 pl-2 text-lg">Top rated courses</h3>
-      </div>
-
-      {#each topCourses as topCourse, index}
-        <div
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100 dark:bg-gray-700"
-        >
-          <span class="mr-2">{index + 1}</span>
-          <p class="dark:text-white text-lg">{topCourse.title}</p>
-          <span class="flex-grow" />
-          <p class="dark:text-white text-lg">{topCourse.rating}</p>
-        </div>
-      {/each}
-    </div>
-  </div>
-</div>
-
-<style>
-  .root {
-    min-height: 93vh;
-  }
-
-  .table {
-    width: 564px;
-  }
-</style>
diff --git a/src/routes/api/_db.js b/src/routes/api/_db.js
deleted file mode 100644
index a52705a1..00000000
--- a/src/routes/api/_db.js
+++ /dev/null
@@ -1,399 +0,0 @@
-import { QUESTION_TYPE } from '../../components/Question/constants';
-
-const ROLE = {
-  ADMIN: 0,
-  TUTOR: 1,
-  STUDENT: 2,
-};
-
-const tutors = [
-  {
-    id: 1,
-    text: 'Sergey Semko',
-  },
-  {
-    id: 3,
-    text: 'Jonathan Nelson',
-  },
-  {
-    id: 4,
-    text: 'Sasha Pokidin',
-  },
-  {
-    id: 5,
-    text: 'Natasha Rudenko',
-  },
-  {
-    id: 6,
-    text: 'Yulia Marushko',
-  },
-];
-
-const people = [
-  {
-    name: 'Alexander Pokidin',
-    title: 'Senior Software Engineer',
-    avatar: 'https://i.pravatar.cc/150?img=1',
-    role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
-  },
-  {
-    name: 'Andrey Filatov',
-    title: 'Fullstack Software Engineer',
-    avatar: 'https://i.pravatar.cc/150?img=2',
-    role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
-  },
-  {
-    name: 'Sergey Semko',
-    title: 'Senior Software Engineer',
-    avatar: 'https://i.pravatar.cc/150?img=3',
-    role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
-  },
-  {
-    name: 'Natalia Fedii',
-    title: 'Project Manager',
-    avatar: 'https://i.pravatar.cc/150?img=4',
-    role: ROLE.TUTOR,
-    telegramLink: 'https://t.me/seed_of_abraham',
-    mailLink: 'mailto:irb.ossystem@gmail.com',
-  },
-];
-
-const courses = [
-  {
-    id: 1,
-    title: 'React.js Fundamentals',
-    status: '',
-  },
-];
-
-// many to many: id, tutor_id, course_id
-const course_tutors = [
-  {
-    id: 1,
-    tutor_id: 1,
-    course_id: 1,
-  },
-];
-
-// id, course_id
-const lessons = [
-  {
-    id: 1,
-    course_id: 1,
-    title: 'Soft skills - Team work',
-    to: '/courses/1/lessons/1',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: true,
-  },
-  {
-    id: 2,
-    course_id: 1,
-    title: 'Introduction to ReactJS',
-    to: '/courses/1/lessons/2',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    id: 3,
-    course_id: 1,
-    title: 'Components - Functional and Class',
-    to: '/courses/1/lessons/3',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    id: 4,
-    course_id: 1,
-    title: 'State and Props in components',
-    to: '/courses/1/lessons/4',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-  {
-    id: 5,
-    course_id: 1,
-    title: 'Life cycle methods',
-    to: '/courses/1/lessons/5',
-    tutor: {
-      userId: 1,
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-    },
-    resources: [
-      {
-        label: 'lesson',
-        value: 1,
-      },
-      {
-        label: 'quiz',
-        value: 1,
-      },
-      {
-        label: 'home task',
-        value: 2,
-      },
-    ],
-    date: new Date(),
-    isComplete: false,
-  },
-];
-
-const lessonData = [
-  {
-    lesson_id: 1,
-    materials: {
-      note: `# Introduction\n\nWelcome to this course, we are glad you made it here\n\n## What you'l learn\n\n1. Build powerful, fast, user-friendly and reactive web apps.\n2. Provide amazing user experiences by leveraging the power of JavaScript with ease.\n3. Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now.\n4. Learn all about React Hooks and React Components.`,
-      slide:
-        'https://docs.google.com/presentation/d/e/2PACX-1vS7mulzY5v1X_D0Gz68M2sggq2zjHCuoyY5JI07hcsOA4svDV5rxhLD9V3ckO_Rz7TK1YniQJtu0CXM/embed?start=false&loop=false&delayms=3000',
-      video: 'https://www.youtube.com/embed/luM5uobewhA',
-    },
-    exercises: [
-      {
-        id: 1,
-        title: 'Practice Exercise',
-      },
-      {
-        id: 2,
-        title: 'Home task',
-      },
-    ],
-  },
-];
-
-// id, lesson_id
-const lesson_exercise = [
-  {
-    id: 1,
-    lesson_id: 1,
-    title: 'Home task 1',
-    description:
-      "You will be to answer 10 questions, it isn't timed so you can take your time to answer. You can also continue from where you left off, you don't need to worry cause everything is automatically syncronized in the cloud.",
-    questions: [
-      {
-        id: 'react-founder',
-        type: QUESTION_TYPE.CHECKBOX,
-        title: 'Who is the creator of React.js',
-        options: [
-          {
-            id: '1',
-            value: 'Dan Abrahmov',
-          },
-          {
-            id: '2',
-            value: 'Google',
-          },
-          {
-            id: '3',
-            value: 'Facebook',
-          },
-          {
-            id: '4',
-            value: 'Traversy Media',
-          },
-        ],
-        answers: ['3'],
-      },
-      {
-        id: 'vue-founder',
-        type: QUESTION_TYPE.CHECKBOX,
-        title: 'Who is the creator of Vue.js',
-        code: `const name = 'Josh Perez';\nconst element = <h1>Hello, {name}</h1>;\n\nReactDOM.render(\n 
-      element,\,
-      document.getElementById('root')
-    )
-        `,
-        options: [
-          {
-            id: '1',
-            value: 'Evan Vue',
-          },
-          {
-            id: '2',
-            value: 'Mark Zukerberg',
-          },
-          {
-            id: '3',
-            value: 'Prince Charles',
-          },
-          {
-            id: '4',
-            value: 'Bill Gates',
-          },
-        ],
-        answers: ['3'],
-      },
-      {
-        id: 'svelte-founder',
-        type: QUESTION_TYPE.RADIO,
-        title: 'Who is the creator of Svelte.js',
-        options: [
-          {
-            id: '1',
-            value: 'Hillary Svelte',
-          },
-          {
-            id: '2',
-            value: 'Mircosoft',
-          },
-          {
-            id: '3',
-            value: 'Elevate',
-          },
-          {
-            id: '4',
-            value: 'Coding Train',
-          },
-        ],
-        answers: ['2'],
-      },
-      {
-        id: 'angular-founder',
-        type: QUESTION_TYPE.TEXTAREA,
-        title: 'Who is the creator of Angular.js',
-        value: '',
-      },
-    ],
-  },
-];
-
-const exercise_answers = [
-  {
-    lesson_id: 1,
-    exercise_id: 1,
-    taken_by: {},
-    answers: {},
-    scores: {},
-    currentQuestionIndex: 0,
-    isFinished: false,
-    progressValue: 100,
-    status: 'STATUS.PENDING',
-  },
-];
-
-// const lessonLookup = new Map();
-// lessons.forEach((lesson) => {
-//   lessonLookup.set(`${lesson.id}`, JSON.stringify(lesson));
-// });
-
-export function getCourse(id) {
-  return {
-    id,
-    name: 'React.js',
-    people,
-    roles: ROLE,
-    lessons: getLessons(id),
-  };
-}
-
-export function getLessons(courseId) {
-  return lessons.filter((lesson) => lesson.course_id === courseId);
-}
-
-export function getLesson(id) {
-  return (
-    lessonData.find((lesson) => lesson.lesson_id === id) || {
-      lesson_id: null,
-      materials: {
-        note: '',
-        slide_url: '',
-        video_url: '',
-      },
-      exercises: getExercises(id),
-    }
-  );
-}
-
-export function getExercises(lessonId) {
-  return lesson_exercise.filter((exercise) => exercise.lesson_id === lessonId);
-}
-
-export function getExercise(exerciseId) {
-  return {
-    data: lesson_exercise.find((exercise) => exercise.id === exerciseId),
-    answers: exercise_answers.find(
-      (answer) => answer.exercise_id === exerciseId
-    ),
-  };
-}
diff --git a/src/routes/api/auth.js b/src/routes/api/auth.js
deleted file mode 100644
index c46f0638..00000000
--- a/src/routes/api/auth.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { getSupabase } from '../../utils/functions/supabase';
-
-export function post(req, res) {
-  const supabase = getSupabase();
-
-  supabase.auth.api.setAuthCookie(req, res);
-}
diff --git a/src/routes/api/course.js b/src/routes/api/course.js
deleted file mode 100644
index 029144ea..00000000
--- a/src/routes/api/course.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { getCourse, getExercise, getLesson } from './_db';
-
-function writeJsonHead(res, statusCode) {
-  res.writeHead(statusCode, {
-    'Content-Type': 'application/json',
-  });
-}
-
-export function get(req, res, next) {
-  const { id, lessonId, exerciseId } = req.query;
-
-  const result = {
-    ...getCourse(parseInt(id, 2)),
-  };
-
-  if (lessonId) {
-    result.lesson = getLesson(parseInt(lessonId, 2));
-  }
-
-  if (exerciseId) {
-    result.exercise = getExercise(parseInt(exerciseId, 2));
-  }
-
-  writeJsonHead(res, 200);
-
-  return res.end(JSON.stringify(result));
-}
diff --git a/src/routes/api/lesson.js b/src/routes/api/lesson.js
deleted file mode 100644
index e5282556..00000000
--- a/src/routes/api/lesson.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getLessons } from './_db';
-
-function writeJsonHead(res, statusCode) {
-  res.writeHead(statusCode, {
-    'Content-Type': 'application/json',
-  });
-}
-
-export function get(req, res, next) {
-  const { id } = req.query;
-
-  writeJsonHead(res, 200);
-
-  if (id) {
-    return res.end(JSON.stringify(getLesson(id)));
-  }
-
-  return res.end(JSON.stringify(getLessons()));
-}
diff --git a/src/routes/api/waitinglist.js b/src/routes/api/waitinglist.js
deleted file mode 100644
index 31643501..00000000
--- a/src/routes/api/waitinglist.js
+++ /dev/null
@@ -1,15 +0,0 @@
-function writeJsonHead(res, statusCode) {
-  res.writeHead(statusCode, {
-    'Content-Type': 'application/json',
-  });
-}
-
-export function post(req, res) {
-  const { email } = req.body;
-
-  console.log(`req.session`, req.session);
-
-  writeJsonHead(res, 200);
-
-  return res.end(JSON.stringify({ success: true }));
-}
diff --git a/src/routes/ask.svelte b/src/routes/ask.svelte
deleted file mode 100644
index 962b190c..00000000
--- a/src/routes/ask.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script>
-  import ChevronDown24 from 'carbon-icons-svelte/lib/ChevronDown24';
-  import TextEditor from '../components/TextEditor/index.svelte';
-
-  let questionTitle = '';
-  let questionDescription = '';
-  let facultyFilterOpened = false;
-
-  const faculties = [
-    'ИЭКСУ',
-    'ИМБТ',
-    'ИМИ',
-    'ИПТДМ',
-    'ИИИР',
-    'ГФ',
-    'ХТФ',
-    'ИДЗО',
-    'УИИ',
-    'УНИ',
-  ];
-  let checkbox = faculties.reduce((acc, cur) => {
-    acc[cur] = false;
-    return acc;
-  }, {});
-  $: clickedTotal = Object.values(checkbox).filter((box) => !!box).length;
-
-  function handleFacultyFilters() {
-    facultyFilterOpened = facultyFilterOpened ? false : true;
-  }
-</script>
-
-<svelte:head>
-  <title>Спросить собшество вопрос</title>
-</svelte:head>
-
-<div class="root lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
-  <h2 class="pb-2">Спросить собшество вопрос</h2>
-  <div class="main-title my-1 flex">
-    <div class="faculty-filter mr-1">
-      <button
-        class="flex border rounded-lg border-grey py-3 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative"
-        on:click={handleFacultyFilters}
-      >
-        <span class="flex flex-row"
-          >Факултеты <span>&nbsp;({clickedTotal})</span></span
-        >
-        <ChevronDown24 class="ml-2" />
-      </button>
-
-      {#if facultyFilterOpened}
-        <div
-          class="w-48 bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
-        >
-          {#each faculties as faculty}
-            <div class="block px-4 py-3 border-b">
-              <input
-                type="checkbox"
-                class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"
-                bind:checked={checkbox[faculty]}
-              />
-              <span>{faculty}</span>
-            </div>
-          {/each}
-        </div>
-      {/if}
-    </div>
-    <input
-      class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
-      error="false"
-      autocomplete="off"
-      placeholder="Title"
-      aria-label="Title"
-      aria-describedby="title-input-validation"
-      type="text"
-      name="discussion[title]"
-      id="discussion_title"
-      value={questionTitle}
-    />
-  </div>
-
-  <TextEditor
-    value={questionDescription}
-    placeholder="Задайте вопрос или начните разговор"
-  />
-</div>
-
-<style>
-  .root {
-    max-width: 600px;
-    margin: 10px auto 0;
-  }
-  @media only screen and (max-width: 1002px) {
-    .faculty-filter {
-      margin-bottom: 10px;
-    }
-    .main-title {
-      flex-direction: column;
-    }
-  }
-</style>
diff --git a/src/routes/courses.svelte b/src/routes/courses.svelte
deleted file mode 100644
index 8f995e5c..00000000
--- a/src/routes/courses.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script context="module">
-  import { profile } from '../utils/store/user';
-  import { fetchCourses } from '../components/Courses/api';
-
-  export async function preload(page, params) {
-    const parsedUser = JSON.parse(params.user);
-
-    // if (parsedUser && parsedUser.id) {
-    //   return fetchCourses(parsedUser.id);
-    // }
-
-    return {
-      allCourses: [],
-      organizationId: null,
-      cantFetch: true,
-    };
-  }
-</script>
-
-<script>
-  import { onMount } from 'svelte';
-  import PageNav from '../components/PageNav/index.svelte';
-  import Courses from '../components/Courses/index.svelte';
-  import NewCourseModal from '../components/Courses/components/NewCourseModal/index.svelte';
-  import PrimaryButton from '../components/PrimaryButton/index.svelte';
-  import {
-    courses,
-    createCourseModal,
-    courseMetaDeta,
-  } from '../components/Courses/store';
-  import { setProfileIdOfGroupMember } from '../utils/services/courses';
-
-  export let allCourses = [];
-  export let cantFetch;
-
-  async function getCourses(userId) {
-    if (process.browser) {
-      if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
-        $courseMetaDeta.isLoading = true;
-
-        const updatedProfile = await setProfileIdOfGroupMember(
-          $profile.email,
-          userId
-        );
-        console.log(`updatedProfile`, updatedProfile);
-        const coursesResult = await fetchCourses(userId);
-        console.log(`coursesResult`, coursesResult);
-
-        $courseMetaDeta.isLoading = false;
-        if (!coursesResult) return;
-
-        // organizationId = coursesResult.organizationId;
-        courses.set(coursesResult.allCourses);
-      }
-    }
-  }
-
-  onMount(() => {
-    courses.set(allCourses);
-  });
-
-  $: getCourses($profile.id);
-</script>
-
-<svelte:head>
-  <title>Courses - ClassroomIO</title>
-</svelte:head>
-
-<section class="root">
-  <PageNav title="All courses">
-    <div slot="widget">
-      {#if $profile.role === 'educator'}
-        <PrimaryButton
-          label="New"
-          onClick={() => ($createCourseModal.open = true)}
-        />
-      {/if}
-    </div>
-  </PageNav>
-
-  <NewCourseModal />
-
-  <Courses />
-</section>
-
-<style>
-  .root {
-    width: 100%;
-    padding: 0 10px;
-    min-height: 90vh;
-    /* min-width: 600px;
-    margin: 0 auto;
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color); */
-  }
-</style>
diff --git a/src/routes/discussions.svelte b/src/routes/discussions.svelte
deleted file mode 100644
index 7c24702d..00000000
--- a/src/routes/discussions.svelte
+++ /dev/null
@@ -1,229 +0,0 @@
-<script>
-  import { stores } from '@sapper/app';
-  import AddComment20 from 'carbon-icons-svelte/lib/AddComment20';
-  import Vote from '../components/Vote/index.svelte';
-  import Space from '../components/Space/index.svelte';
-  import HashTags from '../components/HashTags/index.svelte';
-  import PageNav from '../components/PageNav/index.svelte';
-
-  function getDiscussion(filterBy, allDiscussions) {
-    switch (filterBy) {
-      // case 'popular':
-      //   return allDiscussions.filter((a, i) => i >= 0 && i < 2);
-      case 'recent':
-        return allDiscussions.filter((a, i) => i >= 2 && i < 5);
-      case 'upvoted':
-        return allDiscussions.filter((a, i) => i > 4 && i < 8);
-      default:
-        return allDiscussions;
-    }
-  }
-
-  const { page } = stores();
-  let filterBy = '';
-  let discussions = [];
-
-  $: filterBy = $page.query.filter || 'popular';
-
-  const _allDiscussions = [
-    {
-      id: 1,
-      title: 'How do I pass Anicimov?',
-      author: {
-        name: 'rotimibest',
-      },
-      tags: ['ибэит', 'икс'],
-      answered: false,
-      comments: 10,
-      votes: 10,
-    },
-    {
-      id: 2,
-      title:
-        'Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?',
-      author: {
-        name: 'attronaldo',
-      },
-      tags: ['иибрт', 'иее'],
-      answered: false,
-      comments: 2,
-      votes: 2,
-    },
-    {
-      id: 3,
-      title: 'Who is Nikolenko?',
-      author: {
-        name: 'donald',
-      },
-      tags: ['ибэит', 'иее', 'иибрт', 'ИПИГ'],
-      answered: false,
-      comments: 10,
-      votes: 10,
-    },
-    {
-      id: 4,
-      title: 'Archive discussion button',
-      author: {
-        name: 'acharlesvv',
-      },
-      tags: [
-        'ИЭКСУ',
-        'ИМБТ',
-        'ИМИ',
-        'ИПТДМ',
-        'ИИИР',
-        'ГФ',
-        'ХТФ',
-        'ИДЗО',
-        'УИИ',
-        'УНИ',
-      ],
-      answered: false,
-      comments: 15,
-      votes: 15,
-    },
-    {
-      id: 1,
-      title: 'How do I pass Anicimov?',
-      author: {
-        name: 'rotimibest',
-      },
-      tags: ['ибэит', 'икс'],
-      answered: false,
-      comments: 7,
-      votes: 7,
-    },
-    {
-      id: 2,
-      title: 'Where do I find the nearest restaurant?',
-      author: {
-        name: 'attronaldo',
-      },
-      tags: ['иибрт', 'иее'],
-      answered: false,
-      comments: 4,
-      votes: 4,
-    },
-    {
-      id: 3,
-      title: 'Who is Nikolenko?',
-      author: {
-        name: 'donald',
-      },
-      tags: ['ибэит', 'иее', 'иибрт', 'ИПИГ'],
-      answered: false,
-      comments: 100,
-      votes: 100,
-    },
-    {
-      id: 4,
-      title: 'Archive discussion button',
-      author: {
-        name: 'acharlesvv',
-      },
-      tags: [
-        'ИЭКСУ',
-        'ИМБТ',
-        'ИМИ',
-        'ИПТДМ',
-        'ИИИР',
-        'ГФ',
-        'ХТФ',
-        'ИДЗО',
-        'УИИ',
-        'УНИ',
-      ],
-      answered: false,
-      comments: 5,
-      votes: 5,
-    },
-  ];
-  const allDiscussions = [];
-
-  _allDiscussions.forEach((d, i) => {
-    allDiscussions.push(d, _allDiscussions[_allDiscussions.length - (i + 1)]);
-  });
-
-  $: discussions = getDiscussion(filterBy, allDiscussions);
-</script>
-
-<svelte:head>
-  <title>ClassroomIO - Help students in your university</title>
-</svelte:head>
-<div class="root md:w-3/4 mx-auto md:mb-20">
-  <PageNav
-    title="Talks"
-    addButtonHref="/ask"
-    addButtonLabel="Ask"
-    navItems={[
-      {
-        label: 'Popular',
-        isActive: filterBy === 'popular',
-        href: '/discussions?filter=popular',
-      },
-      {
-        label: 'Recent',
-        isActive: filterBy === 'recent',
-        href: '/discussions?filter=recent',
-      },
-      {
-        label: 'Upvoted',
-        isActive: filterBy === 'upvoted',
-        href: '/discussions?filter=upvoted',
-      },
-    ]}
-  />
-  {#each discussions as discussion}
-    <div class="discussion-box">
-      <Vote value={discussion.votes} />
-      <div class="discussion-topic-author">
-        <h4 class="dark:text-white">
-          <a rel="prefetch" href="discussions/{discussion.id}"
-            >{discussion.title}</a
-          >
-        </h4>
-        <span>{discussion.author.name} asked 1 day ago</span>
-        <HashTags tags={discussion.tags} />
-      </div>
-      <Space />
-      <div class="flex items-center">
-        <AddComment20 />
-        <span>{discussion.comments}</span>
-      </div>
-    </div>
-  {/each}
-</div>
-
-<style>
-  .root {
-    max-width: 600px;
-    margin: 0 auto;
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-  }
-  .discussion-box {
-    /* border: 1px solid var(--border-color); */
-    display: flex;
-    align-items: flex-start;
-    padding: 10px 15px;
-    /* border-radius: 10px; */
-    margin: 0px auto;
-    border-bottom: 1px solid #e2e8f0;
-  }
-
-  h4 {
-    font-size: 16px;
-    font-weight: 900;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    margin: 0;
-  }
-
-  .discussion-topic-author {
-    margin-right: 20px;
-  }
-  .discussion-topic-author span {
-    color: #586069;
-    font-size: 12px;
-  }
-</style>
diff --git a/src/routes/discussions/[id].json.js b/src/routes/discussions/[id].json.js
deleted file mode 100644
index a8673d5e..00000000
--- a/src/routes/discussions/[id].json.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import _discussions from './_discussions.js';
-
-const lookup = new Map();
-_discussions.forEach((discussion) => {
-  lookup.set(`${discussion.id}`, JSON.stringify(discussion));
-});
-
-export function get(req, res, next) {
-  // the `id` parameter is available because
-  // this file is called [id].json.js
-  const { id } = req.params;
-
-  if (lookup.has(id)) {
-    res.writeHead(200, {
-      'Content-Type': 'application/json',
-    });
-
-    res.end(lookup.get(id));
-  } else {
-    res.writeHead(404, {
-      'Content-Type': 'application/json',
-    });
-
-    res.end(
-      JSON.stringify({
-        message: `Not found`,
-      })
-    );
-  }
-}
diff --git a/src/routes/discussions/[id].svelte b/src/routes/discussions/[id].svelte
deleted file mode 100644
index 2bfc81a5..00000000
--- a/src/routes/discussions/[id].svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    // the `id` parameter is available because
-    // this file is called [id].svelte
-    const res = await this.fetch(`discussions/${params.id}.json`);
-    const data = await res.json();
-
-    if (res.status === 200) {
-      return { discussion: data };
-    } else {
-      this.error(res.status, data.message);
-    }
-  }
-</script>
-
-<script>
-  import marked from 'marked';
-  import Vote from '../../components/Vote/index.svelte';
-  import HashTags from '../../components/HashTags/index.svelte';
-  import TextEditor from '../../components/TextEditor/index.svelte';
-  import CheckmarkOutline20 from 'carbon-icons-svelte/lib/CheckmarkOutline20';
-
-  export let discussion;
-
-  let userComment = '';
-</script>
-
-<svelte:head>
-  <title>{discussion.title}</title>
-</svelte:head>
-
-<div class="root lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
-  <div class="flex items-start">
-    <Vote value={discussion.votes} />
-    <h2 class="text-3xl mb-8">{discussion.title}</h2>
-  </div>
-  <div class="my-1 px-1 rounded-lg border border-1 border-gray">
-    <header class="flex items-center justify-between leading-none p-2">
-      <a
-        class="flex items-center no-underline hover:underline text-black"
-        href="/"
-      >
-        <img
-          alt="Placeholder"
-          class="block rounded-full"
-          src="https://picsum.photos/32/32/?random"
-        />
-        <p class="dark:text-white ml-2 text-sm">{discussion.author.name}</p>
-        <p
-          class="dark:text-white ml-2 text-sm text-gray-500 dark:text-gray-200"
-        >
-          12h ago
-        </p>
-      </a>
-    </header>
-    <section class="prose prose-sm sm:prose p-2">
-      {@html marked(discussion.question)}
-    </section>
-    <section class="p-2">
-      <HashTags tags={discussion.tags} />
-    </section>
-  </div>
-
-  <div class="my-8"><strong>{discussion.comments.length} ответы</strong></div>
-
-  {#each discussion.comments as comment}
-    <div class="my-5 px-1 flex items-start">
-      <Vote value={comment.votes} />
-      <div class="w-full rounded-lg border border-1 border-gray">
-        <header class="flex items-center justify-between leading-none p-2">
-          <a
-            class="flex items-center no-underline hover:underline text-black"
-            href="/"
-          >
-            <img
-              alt="Placeholder"
-              class="block rounded-full"
-              width="24"
-              height="20"
-              src={comment.avatar}
-            />
-            <p class="dark:text-white ml-2 text-sm">{comment.name}</p>
-            <p
-              class="dark:text-white ml-2 text-sm text-gray-500 dark:text-gray-200"
-            >
-              12h ago
-            </p>
-          </a>
-
-          <CheckmarkOutline20 />
-        </header>
-        <article class="prose prose-sm sm:prose p-2">
-          {@html marked(comment.comment)}
-        </article>
-      </div>
-    </div>
-  {/each}
-
-  <hr />
-  <TextEditor value={userComment} placeholder="Предлогайте ваш ответ" />
-</div>
-
-<style>
-  .root {
-    margin: 15px auto 5px;
-    max-width: 800px;
-  }
-</style>
diff --git a/src/routes/discussions/_discussions.js b/src/routes/discussions/_discussions.js
deleted file mode 100644
index dc0aa430..00000000
--- a/src/routes/discussions/_discussions.js
+++ /dev/null
@@ -1,181 +0,0 @@
-// Ordinarily, you'd generate this data from markdown files in your
-// repo, or fetch them from a database of some kind. But in order to
-// avoid unnecessary dependencies in the starter template, and in the
-// service of obviousness, we're just going to leave it here.
-
-// This file is called `_discussions.js` rather than `posts.js`, because
-// we don't want to create an `/blog/posts` route — the leading
-// underscore tells Sapper not to do that.
-const question = "\ Hey!\n>\n> I'm working on a dashboard app that's where most things are login only and I like using ### Outlined a draft of the flows\n>\n> ### API Proposals\n> #### Through `getServerSideProps`\n> * Add new return property to `getServerSideProps` called i.e. `fetchPolicy` that can default to `always` being current behaviour and add new option `cache-and-network`/`stale-while-revalidate` as outlined above\n> * Add new router API event, called i.e. `routePropsChanged`, that can be triggered when page props change\n> * Maybe it could also send the `stale-while-revalidate` http header to the browser for instant page reloads?\n> * Problem: needs a way to clear cache when mutating to prevent a flash of unchanged content\n>\n> #### Through router\n> * Add new prop to Link/Router called `fetchPolicy: 'cache-and-network'` which could use a cache of the page's data if it exists and warm it up on load (similar to [`shallow`](https://nextjs.org/docs/routing/shallow-routing).)\n> * If `fetchPolicy: 'cache-and-network` is combined with `prefetch` it could actually preload the data on each page as well and make every route navigation change snappy, even when using getServerSideProps`\n> * This removes the \"flash of unchanged content\" on mutations as you can trigger a route change after a mutation w/o using the cache.\n>\n> Later on, this could be extended to allow for polling as well maybe, which could enable some real-time views without the need of any actual client-side query wiring.\n"
-export default [
-  {
-    title: "What is Sapper?",
-    id: 1,
-    votes: 100,
-    author: {
-      name: "babdraa",
-      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
-    },
-    tags: [
-      'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
-    ],
-    question: '# Problem\n\nThere is a problem with my code please help me check it out.\n\n```js\nconst name = "dfdf";\n```',
-      createdAt: Date.now(),
-    comments: [
-      {
-        name: "babdraa",
-        avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
-        votes: 5,
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      },
-      {
-        name: "crana",
-        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
-        votes: 0,
-        comment:
-          " Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
-      },
-      {
-        name: "loris",
-        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
-        votes: 100,
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      }
-    ]
-  },
-
-  {
-    title: "How to use Sapper",
-    id: 2,
-    votes: 100,
-
-    author: {
-      name: "babdraa",
-      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
-    },
-    tags: [
-      'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
-    ],
-      question:
-        question,
-      createdAt: Date.now(),
-    comments: [
-      {
-        name: "rawe",
-        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
-        votes: 10,
-        comment:
-          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
-      },
-      {
-        name: "hlaow",
-        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
-        votes: 5,
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      }
-    ]
-  },
-
-  {
-    title: "Why the name?",
-    votes: 100,
-    id: 3,
-    author: {
-      name: "babdraa",
-      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
-    },
-    tags: [
-      'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
-    ],
-    question:
-        question,
-      createdAt: Date.now(),
-    comments: [
-      {
-        name: "babdraa",
-        avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
-        votes: 50,
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      },
-      {
-        name: "crana",
-        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
-        votes: 9,
-        comment:
-          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
-      },
-      {
-        name: "loris",
-        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
-        votes: 5,
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      }
-    ]
-  },
-
-  {
-    title: "How is Sapper different from Next.js?",
-    id: 4,
-    votes: 10,
-    author: {
-      name: "babdraa",
-      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
-    },
-    tags: [
-      'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
-    ],
-    question: question,
-      createdAt: Date.now(),
-    comments: [
-      {
-        name: "babdraa",
-        avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
-        votes: 0,
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      },
-      {
-        name: "crana",
-        avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
-        votes: 1,
-        comment:
-          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
-      },
-      {
-        name: "loris",
-        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      }
-    ]
-  },
-
-  {
-    title: "How can I get involved?",
-    id: 5,
-    votes: 7,
-    tags: [
-      'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
-    ],
-    author: {
-      name: "living",
-      avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
-    },
-    question: question,
-      createdAt: Date.now(),
-    comments: [
-      {
-        name: "gbenga",
-        avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
-        votes: 1000,
-        comment:
-          "getStaticProps must always be called from a page located in pages/*"
-      }
-    ]
-  }
-];
diff --git a/src/routes/mail/invite.js b/src/routes/mail/invite.js
deleted file mode 100644
index 31643501..00000000
--- a/src/routes/mail/invite.js
+++ /dev/null
@@ -1,15 +0,0 @@
-function writeJsonHead(res, statusCode) {
-  res.writeHead(statusCode, {
-    'Content-Type': 'application/json',
-  });
-}
-
-export function post(req, res) {
-  const { email } = req.body;
-
-  console.log(`req.session`, req.session);
-
-  writeJsonHead(res, 200);
-
-  return res.end(JSON.stringify({ success: true }));
-}
diff --git a/src/routes/onboarding.svelte b/src/routes/onboarding.svelte
index 48afc5c4..fb059eef 100644
--- a/src/routes/onboarding.svelte
+++ b/src/routes/onboarding.svelte
@@ -141,8 +141,13 @@
           });
         console.log('Create organisation member', data);
 
+        const memberId = Array.isArray(data) && data.length ? data[0].id : '';
+
         orgs.set([orgData as never]);
-        currentOrg.set(orgData);
+        currentOrg.set({
+          ...orgData,
+          memberId: memberId,
+        });
 
         if (error) {
           console.log('Error: create organisation member', error);
diff --git a/src/routes/org/[slug]/community/[slug].svelte b/src/routes/org/[slug]/community/[slug].svelte
new file mode 100644
index 00000000..c3e4fe27
--- /dev/null
+++ b/src/routes/org/[slug]/community/[slug].svelte
@@ -0,0 +1,431 @@
+<script context="module">
+  export async function preload({ params }) {
+    return { slug: params.slug };
+  }
+</script>
+
+<script>
+  import marked from 'marked';
+  import dayjs from 'dayjs';
+  import pluralize from 'pluralize';
+  import relativeTime from 'dayjs/plugin/relativeTime';
+  import Delete16 from 'carbon-icons-svelte/lib/Delete16';
+  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
+  import ArrowLeft24 from 'carbon-icons-svelte/lib/ArrowLeft24';
+  import Vote from '../../../../components/Vote/index.svelte';
+  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '../../../../components/PrimaryButton/constants';
+  import TextEditor from '../../../../components/TextEditor/index.svelte';
+  import Avatar from '../../../../components/Avatar/index.svelte';
+  import IconButton from '../../../../components/IconButton/index.svelte';
+  import CheckmarkOutline20 from 'carbon-icons-svelte/lib/CheckmarkOutline20';
+  import { currentOrgPath, currentOrg } from '../../../../utils/store/org';
+  import { profile } from '../../../../utils/store/user';
+  import { supabase } from '../../../../utils/functions/supabase';
+  import {
+    askCommunityValidation,
+    commentInCommunityValidation,
+  } from '../../../../utils/functions/validator';
+  import { SNACKBAR_SEVERITY } from '../../../../components/Snackbar/constants';
+  import { snackbarStore } from '../../../../components/Snackbar/store';
+  import TextField from '../../../../components/Form/TextField.svelte';
+  import DeleteCommentModal from '../../../../components/Org/Community/DeleteCommentModal.svelte';
+
+  dayjs.extend(relativeTime);
+
+  export let slug;
+
+  let question;
+  let comment = '';
+  let errors = {};
+  let isValidAnswer = false; // V2 allow admin mark an answer as accepted
+  let resetInput = 1;
+  let voted = { question: false, comment: {} };
+  let isEditMode = false;
+  let deleteComment = {
+    shouldDelete: false,
+    commentId: null,
+  };
+  let editContent = {
+    title: '',
+    body: '',
+  };
+
+  function mapResToQuestion(data) {
+    return {
+      id: data.id,
+      title: data.title,
+      votes: data.votes,
+      author: {
+        id: data?.author?.profile?.id || '',
+        name: data?.author?.profile?.fullname || '',
+        avatar: data?.author?.profile?.avatar_url || '',
+      },
+      body: data.body,
+      createdAt: dayjs(data.created_at).fromNow(true),
+      comments: data.comments.map((c) => ({
+        id: c.id,
+        authorId: c.author?.profile?.id || '',
+        name: c.author?.profile?.fullname || '',
+        avatar: c.author?.profile?.avatar_url || '',
+        votes: c.votes,
+        comment: c.body,
+        createdAt: dayjs(c.created_at).fromNow(true),
+      })),
+      totalComments: 0,
+    };
+  }
+
+  async function fetchCommunityQuestion(slug) {
+    if (!slug) return;
+
+    const { data, error } = await supabase
+      .from('community_question')
+      .select(
+        `
+        id,
+        title,
+        body,
+        votes,
+        created_at,
+        comments:community_answer(
+          id,
+          body,
+          votes,
+          created_at,
+          author:organizationmember!community_answer_author_id_fkey!inner(
+            profile!inner(id, fullname, avatar_url)
+          )
+        ),
+        author:organizationmember!community_question_author_id_fkey!inner(
+          profile!inner(id, fullname, avatar_url)
+        )
+      `
+      )
+      .eq('slug', slug)
+      .single();
+
+    if (error) {
+      console.error('Error loading community', error);
+      return goto(`${currentOrgPath}`);
+    }
+
+    question = mapResToQuestion(data);
+    question.totalComments = question.comments.length;
+  }
+
+  async function submitComment() {
+    errors = commentInCommunityValidation({ comment });
+    console.log('submitComment errors', errors);
+
+    if (Object.keys(errors).length) {
+      return;
+    }
+
+    const { data, error } = await supabase.from('community_answer').insert({
+      id: undefined,
+      body: comment,
+      question_id: question.id,
+      author_id: $currentOrg.memberId,
+      votes: 0,
+    });
+
+    if (error) {
+      console.error('Error: commenting', error);
+      $snackbarStore.open = true;
+      $snackbarStore.message = 'Error - Please try again later';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+    } else {
+      console.log('Success: commenting', data);
+
+      // Notification
+      $snackbarStore.open = true;
+      $snackbarStore.message = 'Success';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+
+      // Add to comment
+      const _c = data?.[0];
+      question.comments = [
+        ...question.comments,
+        {
+          id: _c.id,
+          name: $profile?.fullname || '',
+          avatar: $profile?.avatar_url || '',
+          votes: 0,
+          comment: _c.body,
+          createdAt: dayjs(_c.created_at).fromNow(true),
+        },
+      ];
+
+      // Reset input
+      comment = '';
+      resetInput = new Date().getTime();
+    }
+  }
+
+  async function upvoteQuestion(type, commentId) {
+    const isQuestion = type === 'question';
+
+    if (isQuestion && voted.question) return;
+    if (!isQuestion && voted.comment[commentId]) return;
+
+    const table = isQuestion ? 'community_question' : 'community_answer';
+    const matchId = isQuestion ? question.id : commentId;
+    let votes = 0;
+
+    if (isQuestion) {
+      question.votes = question.votes + 1;
+      votes = question.votes;
+    } else {
+      question.comments = question.comments.map((c) => {
+        if (c.id === commentId) {
+          c.votes = c.votes + 1;
+          votes = c.votes;
+        }
+        return c;
+      });
+    }
+    const { error } = await supabase
+      .from(table)
+      .update({ votes })
+      .match({ id: matchId });
+    if (error) {
+      console.error('Error: upvoteQuestion', error);
+      $snackbarStore.open = true;
+      $snackbarStore.message = 'Error - Please try again later';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+    } else {
+      if (isQuestion) {
+        voted.question = true;
+      } else {
+        voted.comment[commentId] = true;
+      }
+    }
+  }
+
+  async function handleQuestionEdit() {
+    if (isEditMode) {
+      const fields = { title: editContent.title, body: editContent.body };
+      errors = askCommunityValidation(fields);
+      console.log('handleQuestionEdit errors', errors);
+
+      if (Object.keys(errors).length) {
+        return;
+      }
+    }
+
+    isEditMode = !isEditMode;
+
+    if (!isEditMode) {
+      const fields = { title: editContent.title, body: editContent.body };
+      errors = askCommunityValidation(fields);
+      console.log('handleQuestionEdit errors', errors);
+
+      if (Object.keys(errors).length) {
+        return;
+      }
+      const { error } = await supabase
+        .from('community_question')
+        .update(fields)
+        .match({ id: question.id });
+      if (error) {
+        console.error('Error: handleQuestionEdit', error);
+        $snackbarStore.open = true;
+        $snackbarStore.message = 'Error - Please try again later';
+        $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+      } else {
+        question.title = fields.title;
+        question.body = fields.body;
+
+        editContent.title = '';
+        editContent.body = '';
+      }
+    } else {
+      editContent.title = question.title;
+      editContent.body = question.body;
+    }
+  }
+
+  async function handleCommentDelete() {
+    const { error } = await supabase
+      .from('community_answer')
+      .delete()
+      .match({ id: deleteComment.commentId });
+
+    if (!error) {
+      question.comments = question.comments.filter(
+        (c) => c.id !== deleteComment.commentId
+      );
+
+      deleteComment.shouldDelete = false;
+      deleteComment.commentId = null;
+    }
+  }
+
+  $: fetchCommunityQuestion(slug);
+</script>
+
+<svelte:head>
+  <title>{question?.title || 'Question'}</title>
+</svelte:head>
+
+<DeleteCommentModal
+  bind:open={deleteComment.shouldDelete}
+  onCancel={() => {
+    deleteComment.shouldDelete = false;
+    deleteComment.commentId = null;
+  }}
+  onDelete={handleCommentDelete}
+/>
+<section class="max-w-3xl mx-auto md:mx-10 lg:mb-20">
+  {#if !question}
+    <div class="py-10 px-5 mb-3">
+      <SkeletonText style="width: 25%;" />
+      <SkeletonText style="width: 100%; margin-bottom: 2rem" />
+      <SkeletonPlaceholder style="width: 100%; height: 20rem;" />
+    </div>
+  {:else}
+    <div class="py-10 px-5">
+      <a
+        class="text-gray-500 dark:text-gray-200 text-md flex items-center"
+        href={`${$currentOrgPath}/community`}
+      >
+        <ArrowLeft24 class="carbon-icon" /> Go Back
+      </a>
+      <div class="my-5 flex justify-between items-center">
+        {#if isEditMode}
+          <TextField
+            bind:value={editContent.title}
+            className="w-full mr-2"
+            errorMessage={errors.title}
+          />
+        {:else}
+          <div class="flex items-center">
+            <Vote
+              value={question.votes}
+              upVote={() => upvoteQuestion('question')}
+              disabled={voted.question}
+            />
+            <h2 class="text-3xl">{question.title}</h2>
+          </div>
+        {/if}
+
+        {#if question.author.id === $profile.id}
+          <PrimaryButton
+            label={isEditMode ? 'Save' : 'Edit'}
+            variant={VARIANTS.CONTAINED_INFO}
+            onClick={handleQuestionEdit}
+            className="py-3 px-6 rounded-sm h-fit"
+            disablePadding={true}
+          />
+          {#if isEditMode}
+            <PrimaryButton
+              label="Cancel"
+              variant={VARIANTS.TEXT}
+              onClick={() => (isEditMode = !isEditMode)}
+              className="py-3 px-6 rounded-sm h-fit"
+              disablePadding={true}
+            />
+          {/if}
+        {/if}
+      </div>
+      <div class="my-1 px-1 rounded-lg border border-1 border-gray">
+        <header class="flex items-center justify-between leading-none p-2">
+          <div
+            class="flex items-center no-underline hover:underline text-black"
+          >
+            <Avatar
+              src={question.author.avatar}
+              name={question.author.name}
+              width="w-7"
+              height="h-7"
+            />
+            <p class="dark:text-white ml-2 text-sm">{question.author.name}</p>
+            <p class="dark:text-white ml-2 text-sm text-gray-500">
+              {question.createdAt}
+            </p>
+          </div>
+        </header>
+        {#if isEditMode}
+          <div class="my-2">
+            <TextEditor
+              content={question.body}
+              onChange={(c) => (editContent.body = c)}
+              placeholder="Update question"
+              errorMessage={errors.body}
+              docId={resetInput}
+            />
+          </div>
+        {:else}
+          <section class="prose prose-sm sm:prose p-2">
+            {@html marked(question.body)}
+          </section>
+        {/if}
+      </div>
+
+      <div class="my-8 font-bold">
+        {pluralize('answers', question.totalComments, true)}
+      </div>
+
+      {#each question.comments as comment}
+        <div class="my-5 px-1 flex items-start">
+          <Vote
+            value={comment.votes}
+            upVote={() => upvoteQuestion('comment', comment.id)}
+            disabled={voted.comment[comment.id]}
+          />
+          <div class="w-full rounded-lg border border-1 border-gray">
+            <header class="flex items-center justify-between leading-none p-2">
+              <div class="flex items-center text-black">
+                <Avatar
+                  src={comment.avatar}
+                  name={comment.name}
+                  width="w-7"
+                  height="h-7"
+                />
+                <p class="dark:text-white ml-2 text-sm">{comment.name}</p>
+                <p class="dark:text-white ml-2 text-sm text-gray-500">
+                  {comment.createdAt}
+                </p>
+              </div>
+
+              {#if isValidAnswer}
+                <CheckmarkOutline20 />
+              {/if}
+
+              {#if comment.authorId === $profile.id}
+                <IconButton
+                  value="delete-comment"
+                  onClick={() => {
+                    deleteComment.shouldDelete = true;
+                    deleteComment.commentId = comment.id;
+                  }}
+                >
+                  <Delete16 class="carbon-icon" />
+                </IconButton>
+              {/if}
+            </header>
+            <article class="prose prose-sm sm:prose p-2">
+              {@html marked(comment.comment)}
+            </article>
+          </div>
+        </div>
+      {/each}
+
+      <hr />
+
+      <div>
+        <TextEditor
+          onChange={(c) => (comment = c)}
+          placeholder="Give an answer"
+          errorMessage={errors.comment}
+          docId={resetInput}
+        />
+
+        <div class="flex justify-end mr-2">
+          <PrimaryButton label="Comment" onClick={submitComment} />
+        </div>
+      </div>
+    </div>
+  {/if}
+</section>
diff --git a/src/routes/org/[slug]/community/ask.svelte b/src/routes/org/[slug]/community/ask.svelte
new file mode 100644
index 00000000..9741e7aa
--- /dev/null
+++ b/src/routes/org/[slug]/community/ask.svelte
@@ -0,0 +1,96 @@
+<script>
+  import { goto } from '@sapper/app';
+  import ArrowLeft24 from 'carbon-icons-svelte/lib/ArrowLeft24';
+  import TextEditor from '../../../../components/TextEditor/index.svelte';
+  import { currentOrgPath, currentOrg } from '../../../../utils/store/org';
+  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
+  import { askCommunityValidation } from '../../../../utils/functions/validator';
+  import { supabase } from '../../../../utils/functions/supabase';
+  import { SNACKBAR_SEVERITY } from '../../../../components/Snackbar/constants';
+  import { snackbarStore } from '../../../../components/Snackbar/store';
+  import generateSlug from '../../../../utils/functions/generateSlug';
+
+  let errors = {};
+  let fields = {
+    title: '',
+    body: '',
+  };
+
+  async function handleSave() {
+    errors = askCommunityValidation(fields);
+    console.log('handleSave errors', errors);
+
+    if (Object.keys(errors).length) {
+      return;
+    }
+
+    const { data: question, error } = await supabase
+      .from('community_question')
+      .insert({
+        ...fields,
+        organization_id: $currentOrg.id,
+        author_id: $currentOrg.memberId,
+        votes: 0,
+        slug: generateSlug(fields.title),
+      });
+
+    if (error) {
+      console.error('Error: asking question', error);
+      $snackbarStore.open = true;
+      $snackbarStore.message = 'Error - Please try again later';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+    } else {
+      console.log('Success: asking question', question);
+      $snackbarStore.open = true;
+      $snackbarStore.message = 'Success';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+
+      goto(`${$currentOrgPath}/community/${question[0].slug}`);
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Ask the Community - ClassroomIO</title>
+</svelte:head>
+
+<section class="w-full max-w-3xl mx-auto">
+  <div class="p-5">
+    <a
+      class="text-gray-500 dark:text-gray-200 text-md flex items-center"
+      href={`${$currentOrgPath}/community`}
+    >
+      <ArrowLeft24 class="carbon-icon" /> Go Back
+    </a>
+    <div class="flex items-center justify-between">
+      <h1 class="dark:text-white text-3xl font-bold">Ask the community</h1>
+      <PrimaryButton label="Publish" onClick={handleSave} />
+    </div>
+  </div>
+
+  <div class="mb-3 p-2">
+    <input
+      class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
+      error="false"
+      autocomplete="off"
+      placeholder="Title"
+      aria-label="Title"
+      aria-describedby="title-input-validation"
+      type="text"
+      name="discussion_title"
+      id="discussion_title"
+      bind:value={fields.title}
+    />
+    {#if errors.title}
+      <p class="dark:text-white text-red-500 text-sm">
+        {errors.title}
+      </p>
+    {/if}
+  </div>
+
+  <TextEditor
+    onChange={(v) => (fields.body = v)}
+    placeholder="Ask the community any question you might have"
+    errorMessage={errors.body}
+  />
+</section>
diff --git a/src/routes/org/[slug]/community/index.svelte b/src/routes/org/[slug]/community/index.svelte
new file mode 100644
index 00000000..2035acb8
--- /dev/null
+++ b/src/routes/org/[slug]/community/index.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { goto } from '@sapper/app';
+  import Community from '../../../../components/Org/Community/index.svelte';
+  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
+  import { currentOrgPath } from '../../../../utils/store/org';
+
+  function askCommunity() {
+    goto(`${$currentOrgPath}/community/ask`);
+  }
+</script>
+
+<svelte:head>
+  <title>Community - ClassroomIO</title>
+</svelte:head>
+
+<section class="w-full max-w-4xl mx-auto">
+  <div class="py-10 px-5">
+    <div class="flex items-center justify-between mb-10">
+      <h1 class="dark:text-white text-3xl font-bold">Community</h1>
+      <PrimaryButton label="Ask Community" onClick={askCommunity} />
+    </div>
+
+    <Community />
+  </div>
+</section>
diff --git a/src/routes/org/[slug]/courses.svelte b/src/routes/org/[slug]/courses.svelte
index 19d665d7..444beb6a 100644
--- a/src/routes/org/[slug]/courses.svelte
+++ b/src/routes/org/[slug]/courses.svelte
@@ -65,7 +65,7 @@
   <title>Courses - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-7xl mx-auto">
+<section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Courses</h1>
diff --git a/src/routes/org/[slug]/settings/domains.svelte b/src/routes/org/[slug]/settings/domains.svelte
index 04d5959d..7b47f927 100644
--- a/src/routes/org/[slug]/settings/domains.svelte
+++ b/src/routes/org/[slug]/settings/domains.svelte
@@ -1,6 +1,6 @@
 <script>
   import Domains from '../../../../components/Org/Settings/Domains.svelte';
-  import { currentOrg } from '../../../../utils/store/org';
+  import { currentOrgPath } from '../../../../utils/store/org';
 </script>
 
 <svelte:head>
@@ -11,7 +11,7 @@
   <div class="py-10 px-5">
     <a
       class="text-gray-500 dark:text-gray-200 text-md"
-      href={`/org/${$currentOrg.siteName}/settings`}>Back to Settings</a
+      href={`${$currentOrgPath}/settings`}>Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
diff --git a/src/routes/org/[slug]/settings/teams.svelte b/src/routes/org/[slug]/settings/teams.svelte
index 78027f65..1ec9111d 100644
--- a/src/routes/org/[slug]/settings/teams.svelte
+++ b/src/routes/org/[slug]/settings/teams.svelte
@@ -1,6 +1,6 @@
 <script>
   import TeamMembers from '../../../../components/Org/Settings/TeamMembers.svelte';
-  import { currentOrg } from '../../../../utils/store/org';
+  import { currentOrgPath } from '../../../../utils/store/org';
 </script>
 
 <svelte:head>
@@ -11,7 +11,7 @@
   <div class="py-10 px-5">
     <a
       class="text-gray-500 dark:text-gray-200 text-md"
-      href={`/org/${$currentOrg.siteName}/settings`}>Back to Settings</a
+      href={`${$currentOrgPath}/settings`}>Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Team members</h1>
diff --git a/src/routes/people.svelte b/src/routes/people.svelte
deleted file mode 100644
index fda49f07..00000000
--- a/src/routes/people.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<script>
-  import AddAlt32 from 'carbon-icons-svelte/lib/AddAlt32';
-  import IconButton from '../components/IconButton/index.svelte';
-  import Avatar from '../components/Avatar/index.svelte';
-  let teachers = [
-    {
-      avatar: 'https://avatars.githubusercontent.com/u/43971542?s=96&v=4',
-      name: 'Imed Jaberi',
-    },
-    {
-      avatar: 'https://avatars.githubusercontent.com/u/3624098?s=96&v=4',
-      name: 'Andrew Clark',
-    },
-    {
-      avatar: 'https://avatars.githubusercontent.com/u/857709?s=96&v=4',
-      name: 'Daniel Lytkin',
-    },
-  ];
-
-  let students = [
-    {
-      avatar: 'https://avatars.githubusercontent.com/u/20658625?s=96&v=4',
-      name: 'Aissaoui Ahmed',
-    },
-    {
-      avatar: 'https://avatars.githubusercontent.com/u/26669835?s=96&v=4',
-      name: 'Mahfoudh Arous',
-    },
-  ];
-
-  let borderBottom = 'border-r-0 border-b border-l-0';
-  function addTeacher() {}
-  function addStudent() {}
-</script>
-
-<div class="root w-full py-5">
-  <div class="max-w-2xl mx-auto my-5">
-    <div
-      class="flex items-center justify-between {borderBottom} border-blue-700"
-    >
-      <h3 class="dark:text-white text-3xl text-blue-700">Teachers</h3>
-      <IconButton
-        toolTipProps={{ title: 'Add', direction: 'right' }}
-        onClick={addTeacher}
-        selected={true}
-      >
-        <AddAlt32 class="carbon-icon" />
-      </IconButton>
-    </div>
-
-    {#each teachers as teacher, index}
-      <div
-        class="flex items-center px-2 py-3 {teachers[index + 1] &&
-          borderBottom} border-gray-300"
-      >
-        <Avatar src={teacher.avatar} name={teacher.name} />
-        <p class="dark:text-white ml-2">{teacher.name}</p>
-      </div>
-    {/each}
-  </div>
-
-  <div class="max-w-2xl mx-auto my-5">
-    <div
-      class="flex items-center justify-between {borderBottom} border-blue-700"
-    >
-      <h3 class="dark:text-white text-3xl text-blue-700">Students</h3>
-      <IconButton
-        toolTipProps={{ title: 'Add', direction: 'right' }}
-        onClick={addStudent}
-        selected={true}
-      >
-        <AddAlt32 class="carbon-icon" />
-      </IconButton>
-    </div>
-
-    {#each students as student, index}
-      <div
-        class="flex items-center px-2 py-3 {students[index + 1] &&
-          borderBottom} border-gray-300"
-      >
-        <Avatar src={student.avatar} name={student.name} />
-        <p class="dark:text-white ml-2">{student.name}</p>
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .root {
-    min-height: 93vh;
-  }
-</style>
diff --git a/src/routes/profile/[id].svelte b/src/routes/profile/[id].svelte
index 278809ed..35387dbd 100644
--- a/src/routes/profile/[id].svelte
+++ b/src/routes/profile/[id].svelte
@@ -179,7 +179,7 @@
     <div class="flex-grow flex flex-wrap mx-3 w-3/5">
       <div class="mb-3 w-full">
         <h3 class="dark:text-white font-bold text-md m-0">Organizations</h3>
-        <p class="dark:text-white text-gray-500 dark:text-gray-200 text-sm">
+        <p class="dark:text-white text-gray-500 text-sm">
           This are the organizations you work at
         </p>
 
@@ -187,7 +187,7 @@
           <h4 class="dark:text-white m-0 font-normal">
             <a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
           </h4>
-          <p class="dark:text-white text-gray-500 dark:text-gray-200">
+          <p class="dark:text-white text-gray-500">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam
             tenetur magnam. Alias cumque quaerat expedita dolores placeat
             laboriosam culpa, suscipit veritatis adipisci eius magni obcaecati.
@@ -210,7 +210,7 @@
               Climate Change Group
             </a>
           </h4>
-          <p class="dark:text-white text-gray-500 dark:text-gray-200">
+          <p class="dark:text-white text-gray-500">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi
             autem quo possimus illum consequuntur repudiandae nobis error, porro
           </p>
diff --git a/src/utils/functions/generateSlug.js b/src/utils/functions/generateSlug.js
new file mode 100644
index 00000000..631aa239
--- /dev/null
+++ b/src/utils/functions/generateSlug.js
@@ -0,0 +1,9 @@
+function generateSlug(title) {
+  return title
+    .match(/[^\W\s\d]*/g, '')
+    .join('')
+    .toLowerCase()
+    .concat(`-${new Date().getTime()}`);
+}
+
+export default generateSlug;
diff --git a/src/utils/functions/validator.js b/src/utils/functions/validator.js
index 6ca5e55b..5c566cc3 100644
--- a/src/utils/functions/validator.js
+++ b/src/utils/functions/validator.js
@@ -1,6 +1,23 @@
 import z from 'zod';
 import { validateEmail } from './validateEmail';
 
+const askCommunityValidationSchema = z.object({
+  title: z.string().min(6, {
+    message: 'Must be 6 or more characters long',
+    invalid_type_error: 'Must not be empty',
+  }),
+  body: z.string().min(20, {
+    message: 'Must be 10 or more characters long',
+    invalid_type_error: 'Must not be empty',
+  }),
+});
+const commentInCommunityValidationSchema = z.object({
+  comment: z.string().min(6, {
+    message: 'Must be 6 or more characters long',
+    invalid_type_error: 'Must not be empty',
+  }),
+});
+
 const forgotValidationSchema = z.object({
   email: z.string().email({
     message: 'Invalid email address',
@@ -98,6 +115,18 @@ export const onboardingValidation = (fields = {}, step) => {
   return processErrors(error);
 };
 
+export const askCommunityValidation = (fields = {}) => {
+  const { error } = askCommunityValidationSchema.safeParse(fields);
+
+  return processErrors(error);
+};
+
+export const commentInCommunityValidation = (fields = {}) => {
+  const { error } = commentInCommunityValidationSchema.safeParse(fields);
+
+  return processErrors(error);
+};
+
 export const getDisableSubmit = ({ password, confirmPassword }) => {
   return !!(password && confirmPassword && password !== confirmPassword);
 };
diff --git a/src/utils/services/org/index.js b/src/utils/services/org/index.js
index 8132da46..4d30332b 100644
--- a/src/utils/services/org/index.js
+++ b/src/utils/services/org/index.js
@@ -52,8 +52,9 @@ export async function getOrganizations(userId) {
     .from('organizationmember')
     .select(
       `
+      id,
       profile_id,
-      organization (
+      organization!organizationmember_organization_id_fkey (
         id,
         name,
         siteName,
@@ -64,7 +65,7 @@ export async function getOrganizations(userId) {
     .eq('profile_id', userId);
 
   const orgsArray = [];
-  if (data.length) {
+  if (Array.isArray(data) && data.length) {
     data.forEach((orgMember) => {
       orgsArray.push({
         id: orgMember?.organization?.id,
@@ -73,6 +74,7 @@ export async function getOrganizations(userId) {
           orgMember?.organization?.name?.substring(0, 2)?.toUpperCase() || '',
         siteName: orgMember?.organization?.siteName,
         avatar_url: orgMember?.organization?.avatar_url,
+        memberId: orgMember?.id,
       });
     });
 
@@ -98,16 +100,14 @@ export async function getOrgAudience(orgId) {
       email,
       avatar_url,
       created_at,
-      groupmember!inner(
+      organizationmember!inner(
         role_id,
-        group!inner(
-          organization!inner(id)
-        )
+        organization_id
       )
     `
     )
-    .eq('groupmember.group.organization.id', orgId)
-    .eq('groupmember.role_id', 3); // is a student, tutor is 2 and admin is 1
+    .eq('organizationmember.organization_id', orgId)
+    .eq('organizationmember.role_id', 3); // is a student, tutor is 2 and admin is 1
 
   console.log('data', data);
 
@@ -173,5 +173,5 @@ export async function getCurrentOrg(siteName) {
     return goto('/404');
   }
 
-  currentOrg.set(data);
+  currentOrg.set(data[0]);
 }
diff --git a/src/utils/store/org.js b/src/utils/store/org.js
index df18fe2a..0de3bad2 100644
--- a/src/utils/store/org.js
+++ b/src/utils/store/org.js
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 
 export const orgs = writable([]);
 export const currentOrg = writable({
@@ -10,3 +10,7 @@ export const currentOrg = writable({
 });
 export const orgAudience = writable([]);
 export const orgTeam = writable([]);
+export const currentOrgPath = derived(
+  currentOrg,
+  ($currentOrg) => `/org/${$currentOrg.siteName}`
+);