From 23c8d5be1c6e52d4390b8c4108fe103ede6a3882 Mon Sep 17 00:00:00 2001
From: Subina <subina@togglecorp.com>
Date: Thu, 7 Sep 2023 16:38:51 +0545
Subject: [PATCH] Add table of content selection and sorting

---
 backend                                       |   2 +-
 src/components/PillarSelectInput/index.tsx    |  15 +-
 src/components/TocList/index.module.css       |  21 +-
 src/components/TocList/index.tsx              | 161 +++--
 src/utils/common.ts                           |  47 +-
 .../DateQuestionForm/index.tsx                |   6 +-
 .../FileQuestionForm/index.tsx                |   6 +-
 .../ImageQuestionForm/index.tsx               |   6 +-
 .../IntegerQuestionForm/index.tsx             |   6 +-
 .../NoteQuestionForm/index.tsx                |   6 +-
 .../QuestionList/index.module.css             |  61 ++
 .../QuestionnaireEdit/QuestionList/index.tsx  | 344 ++++++++++
 .../QuestionPreview/index.module.css          |  29 +-
 .../QuestionPreview/index.tsx                 | 244 ++++---
 .../RankQuestionForm/index.tsx                |   6 +-
 .../SelectMultipleQuestionForm/index.tsx      |   6 +-
 .../SelectOneQuestionForm/index.tsx           |   6 +-
 .../TextQuestionForm/index.tsx                |   6 +-
 .../TimeQuestionForm/index.tsx                |   6 +-
 src/views/QuestionnaireEdit/index.module.css  |   1 +
 src/views/QuestionnaireEdit/index.tsx         | 616 +++++++++++-------
 src/views/QuestionnaireEdit/queries.ts        |  19 +
 22 files changed, 1136 insertions(+), 484 deletions(-)
 create mode 100644 src/views/QuestionnaireEdit/QuestionList/index.module.css
 create mode 100644 src/views/QuestionnaireEdit/QuestionList/index.tsx

diff --git a/backend b/backend
index fb96451..5c0f1d9 160000
--- a/backend
+++ b/backend
@@ -1 +1 @@
-Subproject commit fb96451fe4548ce2d40f93fa2782fcac22c00a71
+Subproject commit 5c0f1d997ffe5f6cb5d34e651f8a529e2a0439c6
diff --git a/src/components/PillarSelectInput/index.tsx b/src/components/PillarSelectInput/index.tsx
index 9f9649a..e887068 100644
--- a/src/components/PillarSelectInput/index.tsx
+++ b/src/components/PillarSelectInput/index.tsx
@@ -18,9 +18,13 @@ const PILLARS = gql`
                         name
                         type
                         category1
+                        category1Display
                         category2
+                        category2Display
                         category3
+                        category3Display
                         category4
+                        category4Display
                         order
                     }
                 }
@@ -32,7 +36,12 @@ const PILLARS = gql`
 type Pillar = NonNullable<NonNullable<NonNullable<PillarsQuery['private']>['projectScope']>['questionnaire']>['leafGroups'][number];
 
 const pillarKeySelector = (data: Pillar) => data.id;
-const pillarLabelSelector = (data: Pillar) => data.name;
+const pillarLabelSelector = (data: Pillar) => {
+    if (data.type === 'MATRIX_1D') {
+        return data.category2Display;
+    }
+    return data.category4Display ?? '??';
+};
 
 interface PillarProps<T>{
     projectId: string;
@@ -41,6 +50,7 @@ interface PillarProps<T>{
     value: string | null | undefined;
     error: string | undefined;
     onChange: (value: string | undefined, name: T) => void;
+    disabled?: boolean;
 }
 
 function PillarSelectInput<T extends string>(props: PillarProps<T>) {
@@ -51,6 +61,7 @@ function PillarSelectInput<T extends string>(props: PillarProps<T>) {
         error,
         onChange,
         name,
+        disabled,
     } = props;
 
     const pillarsVariables = useMemo(() => {
@@ -89,7 +100,7 @@ function PillarSelectInput<T extends string>(props: PillarProps<T>) {
             keySelector={pillarKeySelector}
             labelSelector={pillarLabelSelector}
             options={pillarsOptions}
-            disabled={pillarsLoading}
+            disabled={pillarsLoading || disabled}
         />
     );
 }
diff --git a/src/components/TocList/index.module.css b/src/components/TocList/index.module.css
index 35158c2..82b5ef8 100644
--- a/src/components/TocList/index.module.css
+++ b/src/components/TocList/index.module.css
@@ -4,18 +4,29 @@
 
     .group-item {
         display: flex;
-        padding: var(--dui-spacing-small);
+        background-color: transparent;
+        padding: var(--dui-spacing-medium) var(--dui-spacing-small);
+        padding-right: 0;
 
+        .group-item {
+            border-left: var(--dui-width-separator-medium) solid var(--dui-color-separator);
+        }
+        .heading {
+            font-weight: var(--dui-font-weight-regular);
+        }
+
+        .header {
+            background-color: transparent;
+            .heading {
+                color: var(--text-color-dark);
+            }
+        }
         .header-icons {
             display: flex;
             align-items: center;
             padding-right: var(--dui-spacing-extra-small);
         }
 
-        .heading {
-            font-weight: var(--dui-font-weight-regular);
-        }
-
         .content {
             display: flex;
             flex-direction: column;
diff --git a/src/components/TocList/index.tsx b/src/components/TocList/index.tsx
index 558e38a..a4a5f7c 100644
--- a/src/components/TocList/index.tsx
+++ b/src/components/TocList/index.tsx
@@ -1,94 +1,133 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import {
     GrDrag,
 } from 'react-icons/gr';
 import {
-    isNotDefined,
     _cs,
     isDefined,
 } from '@togglecorp/fujs';
 import {
+    ExpandableContainer,
     Container,
     Checkbox,
     QuickActionButton,
 } from '@the-deep/deep-ui';
 import SortableList, { Attributes, Listeners } from '#components/SortableList';
+import {
+    TocItem,
+    getChildren,
+} from '#utils/common';
 
 import styles from './index.module.css';
 
-type QuestionGroup = {
-    key: string;
-    parentKeys: string[];
-    label: string;
-    nodes: QuestionGroup[];
-};
-
 interface TocProps {
-    key: string;
+    itemKey: string;
     mainIndex: number;
-    item: QuestionGroup;
+    item: TocItem;
     attributes?: Attributes;
     listeners?: Listeners;
+    onOrderedOptionsChange: (newVal: TocItem[] | undefined, index: number) => void;
+
     selectedGroups: string[];
-    onOrderedOptionsChange: (newVal: QuestionGroup[] | undefined, index: number) => void;
-    onSelectedGroupsChange: React.Dispatch<React.SetStateAction<string[]>>;
-    onActiveTabChange: React.Dispatch<React.SetStateAction<string | undefined>>;
+    onSelectedGroupsChange: (newValue: boolean, id: string[]) => void;
 }
 
 function TocRenderer(props: TocProps) {
     const {
-        key,
+        itemKey,
         mainIndex,
         item,
         selectedGroups,
         onOrderedOptionsChange,
         onSelectedGroupsChange,
-        onActiveTabChange,
         attributes,
         listeners,
     } = props;
 
     const handleGroupSelect = useCallback((val: boolean) => {
-        onSelectedGroupsChange((oldVal) => {
-            if (val) {
-                return ([...oldVal, key]);
-            }
-            const newVal = [...oldVal];
-            newVal.splice(oldVal.indexOf(key), 1);
-
-            return newVal;
-        });
-        onActiveTabChange((oldActiveTab) => {
-            if (isNotDefined(oldActiveTab) && val) {
-                return key;
-            }
-            if (!val && oldActiveTab === key) {
-                return undefined;
-            }
-            return oldActiveTab;
-        });
+        if (!item.leafNode) {
+            const childIds = getChildren(item);
+            onSelectedGroupsChange(val, childIds);
+            return;
+        }
+
+        onSelectedGroupsChange(val, [item.id]);
     }, [
-        onActiveTabChange,
+        item,
         onSelectedGroupsChange,
-        key,
     ]);
 
-    const nodeList = item.nodes;
+    const nodeList = item.leafNode ? [] : item.nodes;
 
-    const handleListChange = useCallback((newVal: QuestionGroup[] | undefined) => {
+    const handleListChange = useCallback((newVal: TocItem[] | undefined) => {
         onOrderedOptionsChange(newVal, mainIndex);
     }, [
         mainIndex,
         onOrderedOptionsChange,
     ]);
 
+    const childIds = getChildren(item);
+    const inputValue = item.leafNode
+        ? selectedGroups.includes(item.id)
+        : childIds.every((g) => selectedGroups.includes(g));
+
+    const indeterminate = item.leafNode
+        ? false
+        : childIds.some((g) => selectedGroups.includes(g));
+
+    if (item.leafNode) {
+        return (
+            <Container
+                className={styles.groupItem}
+                headerIcons={(
+                    <div className={styles.headerIcons}>
+                        <QuickActionButton
+                            name={itemKey}
+                            // FIXME: use translation
+                            title="Drag"
+                            variant="transparent"
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...attributes}
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...listeners}
+                        >
+                            <GrDrag />
+                        </QuickActionButton>
+                        <Checkbox
+                            name={item.key}
+                            // FIXME: We are only handling childre for now
+                            value={inputValue}
+                            indeterminate={inputValue ? false : indeterminate}
+                            onChange={handleGroupSelect}
+                        />
+                    </div>
+                )}
+                contentClassName={styles.content}
+                heading={item.label}
+                headingClassName={styles.heading}
+                headingSize="extraSmall"
+                spacing="none"
+            >
+                {isDefined(nodeList) && nodeList.length > 0 && (
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    <TocList
+                        className={styles.nestedList}
+                        orderedOptions={nodeList}
+                        onOrderedOptionsChange={handleListChange}
+                        selectedGroups={selectedGroups}
+                        onSelectedGroupsChange={onSelectedGroupsChange}
+                    />
+                )}
+            </Container>
+        );
+    }
     return (
-        <Container
+        <ExpandableContainer
             className={styles.groupItem}
             headerIcons={(
                 <div className={styles.headerIcons}>
                     <QuickActionButton
-                        name={key}
+                        name={itemKey}
                         // FIXME: use translation
                         title="Drag"
                         variant="transparent"
@@ -101,7 +140,9 @@ function TocRenderer(props: TocProps) {
                     </QuickActionButton>
                     <Checkbox
                         name={item.key}
-                        value={selectedGroups.includes(key)}
+                        // FIXME: We are only handling childre for now
+                        value={inputValue}
+                        indeterminate={inputValue ? false : indeterminate}
                         onChange={handleGroupSelect}
                     />
                 </div>
@@ -110,7 +151,9 @@ function TocRenderer(props: TocProps) {
             heading={item.label}
             headingClassName={styles.heading}
             headingSize="extraSmall"
+            headerClassName={styles.header}
             spacing="none"
+            withoutBorder
         >
             {isDefined(nodeList) && nodeList.length > 0 && (
                 // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -120,22 +163,20 @@ function TocRenderer(props: TocProps) {
                     onOrderedOptionsChange={handleListChange}
                     selectedGroups={selectedGroups}
                     onSelectedGroupsChange={onSelectedGroupsChange}
-                    onActiveTabChange={onActiveTabChange}
                 />
             )}
-        </Container>
+        </ExpandableContainer>
     );
 }
 
-const keySelector = (g: QuestionGroup) => g.key;
+const keySelector = (g: TocItem) => g.key;
 
 interface Props {
     className?: string;
-    orderedOptions: QuestionGroup[] | undefined;
-    onOrderedOptionsChange: (newVal: QuestionGroup[] | undefined) => void;
+    orderedOptions: TocItem[] | undefined;
+    onOrderedOptionsChange: (newVal: TocItem[] | undefined) => void;
     selectedGroups: string[];
-    onSelectedGroupsChange: React.Dispatch<React.SetStateAction<string[]>>;
-    onActiveTabChange: React.Dispatch<React.SetStateAction<string | undefined>>;
+    onSelectedGroupsChange: (newValue: boolean, id: string[]) => void;
 }
 
 function TocList(props: Props) {
@@ -145,22 +186,24 @@ function TocList(props: Props) {
         onOrderedOptionsChange,
         selectedGroups,
         onSelectedGroupsChange,
-        onActiveTabChange,
     } = props;
 
     const handleChildrenOrderChange = useCallback((
-        newValue: QuestionGroup[] | undefined,
+        newValue: TocItem[] | undefined,
         parentIndex: number,
     ) => {
         if (!newValue) {
             return;
         }
-        const newList = [...orderedOptions ?? []];
-        newList[parentIndex] = {
-            ...newList[parentIndex],
-            nodes: newValue,
-        };
-        onOrderedOptionsChange(newList);
+        const node = orderedOptions?.[parentIndex];
+        if (node && !node.leafNode) {
+            const newList = [...orderedOptions];
+            newList[parentIndex] = {
+                ...node,
+                nodes: newValue,
+            };
+            onOrderedOptionsChange(newList);
+        }
     }, [
         orderedOptions,
         onOrderedOptionsChange,
@@ -168,21 +211,19 @@ function TocList(props: Props) {
 
     const tocRendererParams = useCallback((
         key: string,
-        datum: QuestionGroup,
+        datum: TocItem,
         mainIndex: number,
     ): TocProps => ({
         onOrderedOptionsChange: handleChildrenOrderChange,
         onSelectedGroupsChange,
-        onActiveTabChange,
         selectedGroups,
-        key,
+        itemKey: key,
         mainIndex,
         item: datum,
     }), [
         handleChildrenOrderChange,
         selectedGroups,
         onSelectedGroupsChange,
-        onActiveTabChange,
     ]);
 
     return (
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 4c56941..9055504 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,20 +1,43 @@
-import { isDefined } from '@togglecorp/fujs';
-
 // eslint-disable-next-line import/prefer-default-export
 export function flatten<A, K>(
-    lst: A[],
+    list: A[],
     valueSelector: (item: A) => K,
-    childSelector: (item: A) => A[] | undefined,
+    childSelector: (item: A) => A[],
 ): K[] {
-    if (lst.length <= 0) {
-        return [];
+    const items = list.map((item) => {
+        const a = flatten(childSelector(item), valueSelector, childSelector);
+        if (childSelector(item).length > 0) {
+            return a;
+        }
+        return [valueSelector(item)];
+    });
+
+    return items.flat();
+}
+
+export type LeafTocItem = {
+    key: string;
+    parentKeys: string[];
+    label: string;
+    leafNode: true;
+    id: string;
+    isHidden: boolean;
+};
+export type NonLeafTocItem = {
+    key: string;
+    parentKeys: string[];
+    label: string;
+    leafNode?: false;
+    nodes: TocItem[];
+}
+
+export type TocItem = LeafTocItem | NonLeafTocItem;
+
+export function getChildren(item: TocItem): string[] {
+    if (item.leafNode) {
+        return [item.id];
     }
-    const itemsByParent = lst.map(valueSelector);
-    const itemsByChildren = lst.map(childSelector).filter(isDefined).flat();
-    return [
-        ...itemsByParent,
-        ...flatten(itemsByChildren, valueSelector, childSelector),
-    ];
+    return item.nodes.flatMap(getChildren);
 }
 
 type DeepNonNullable<T> = T extends object ? (
diff --git a/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx b/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx
index cfb6596..1b19088 100644
--- a/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx
@@ -123,6 +123,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function DateQuestionForm(props: Props) {
@@ -131,6 +132,7 @@ function DateQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -138,6 +140,7 @@ function DateQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'DATE' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -317,9 +320,10 @@ function DateQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx b/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx
index d8469e2..a57aab7 100644
--- a/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx
@@ -123,6 +123,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function FileQuestionForm(props: Props) {
@@ -131,6 +132,7 @@ function FileQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -138,6 +140,7 @@ function FileQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'FILE' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -316,9 +319,10 @@ function FileQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx b/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx
index dc16fa2..b69c12e 100644
--- a/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx
@@ -122,6 +122,7 @@ interface Props {
     projectId: string;
     questionnaireId: string;
     questionId?: string;
+    selectedLeafGroupId: string;
     onSuccess: (questionId: string | undefined) => void;
 }
 
@@ -130,6 +131,7 @@ function ImageQuestionForm(props: Props) {
         projectId,
         questionnaireId,
         questionId,
+        selectedLeafGroupId,
         onSuccess,
     } = props;
 
@@ -138,6 +140,7 @@ function ImageQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'IMAGE' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -315,9 +318,10 @@ function ImageQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx b/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx
index 14e4647..3546c42 100644
--- a/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx
@@ -119,6 +119,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function IntegerQuestionForm(props: Props) {
@@ -127,6 +128,7 @@ function IntegerQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -134,6 +136,7 @@ function IntegerQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'INTEGER' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -313,9 +316,10 @@ function IntegerQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx b/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx
index a0583d4..2535f3c 100644
--- a/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx
@@ -123,6 +123,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function NoteQuestionForm(props: Props) {
@@ -131,6 +132,7 @@ function NoteQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -138,6 +140,7 @@ function NoteQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'NOTE' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -308,9 +311,10 @@ function NoteQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/QuestionList/index.module.css b/src/views/QuestionnaireEdit/QuestionList/index.module.css
new file mode 100644
index 0000000..8579d7f
--- /dev/null
+++ b/src/views/QuestionnaireEdit/QuestionList/index.module.css
@@ -0,0 +1,61 @@
+.list {
+    display: flex;
+    flex-direction: column;
+
+    --heading-font-size-large: 1.2rem;
+    --heading-font-size-medium: 1rem;
+    --heading-font-size-small: 0.875rem;
+    --background-color-child: #EFEDF7;
+
+    .item {
+        border: none;
+        .header {
+            position: sticky;
+            top: 0;
+            background-color: transparent;
+            padding: var(--dui-spacing-medium);
+
+            .heading {
+                color: var(--dui-color-dark);
+                font-weight: var(--dui-font-weight-bold);
+            }
+            .header-actions {
+                display: none;
+            }
+        }
+        .content {
+            background-color: var(--dui-color-white);
+        }
+
+        &.first {
+            margin: var(--dui-spacing-large) 0;
+            .heading {
+                font-size: var(--heading-font-size-large);
+            }
+        }
+
+        &.second {
+            .heading {
+                font-size: var(--heading-font-size-medium);
+            }
+        }
+
+        &.child {
+            background-color: var(--dui-color-white);
+            .header {
+                border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-secondary);
+                .heading {
+                    font-size: var(--heading-font-size-small);
+                    font-weight: var(--dui-font-weight-regular);
+                }
+                .header-actions {
+                    display: flex;
+                    gap: var(--dui-spacing-small);
+                }
+            }
+        }
+        &.third {
+            padding-left: var(--dui-spacing-medium);
+        }
+    }
+}
diff --git a/src/views/QuestionnaireEdit/QuestionList/index.tsx b/src/views/QuestionnaireEdit/QuestionList/index.tsx
new file mode 100644
index 0000000..bf5deac
--- /dev/null
+++ b/src/views/QuestionnaireEdit/QuestionList/index.tsx
@@ -0,0 +1,344 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+    IoAdd,
+} from 'react-icons/io5';
+import {
+    isNotDefined,
+    _cs,
+} from '@togglecorp/fujs';
+import {
+    ListView,
+    ExpandableContainer,
+    QuickActionButton,
+} from '@the-deep/deep-ui';
+import {
+    useQuery,
+    gql,
+} from '@apollo/client';
+
+import SortableList from '#components/SortableList';
+import {
+    QuestionsByGroupQuery,
+    QuestionsByGroupQueryVariables,
+} from '#generated/types';
+import {
+    TocItem,
+    getChildren,
+} from '#utils/common';
+
+import QuestionPreview from '../QuestionPreview';
+import {
+    QUESTION_FRAGMENT,
+} from '../queries';
+
+import styles from './index.module.css';
+
+const QUESTIONS_BY_GROUP = gql`
+    ${QUESTION_FRAGMENT}
+    query QuestionsByGroup(
+        $projectId: ID!,
+        $questionnaireId: ID!,
+        $leafGroupId: ID!,
+    ) {
+        private {
+            projectScope(pk: $projectId) {
+                id
+                questions(
+                    filters: {
+                        questionnaire: {
+                            pk: $questionnaireId,
+                        },
+                        leafGroup: {
+                            pk: $leafGroupId,
+                        },
+                    }
+                    order: {
+                        createdAt: ASC
+                    }
+                ) {
+                    count
+                    limit
+                    offset
+                    items {
+                        ...QuestionResponse
+                    }
+                }
+            }
+        }
+    }
+`;
+
+type Question = NonNullable<NonNullable<NonNullable<NonNullable<QuestionsByGroupQuery['private']>['projectScope']>['questions']>['items']>[number];
+
+const questionKeySelector = (q: Question) => q.id;
+
+interface QuestionRendererProps {
+    item: TocItem,
+    onEditQuestionClick: (val?: string | undefined) => void;
+    projectId: string;
+    questionnaireId: string;
+    setActiveQuestionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setSelectedQuestionType: React.Dispatch<React.SetStateAction<string | undefined>>;
+    level: number;
+    handleQuestionAdd: (groupId: string) => void;
+    addQuestionPaneShown: boolean;
+    selectedGroups: string[];
+}
+
+function QuestionListRenderer(props: QuestionRendererProps) {
+    const {
+        item,
+        onEditQuestionClick,
+        projectId,
+        selectedGroups,
+        questionnaireId,
+        setActiveQuestionId,
+        setSelectedQuestionType,
+        level,
+        handleQuestionAdd,
+        addQuestionPaneShown,
+    } = props;
+
+    const questionsVariables = useMemo(() => {
+        if (isNotDefined(projectId)
+            || isNotDefined(questionnaireId)
+            || !item.leafNode) {
+            return undefined;
+        }
+
+        return ({
+            projectId,
+            questionnaireId,
+            leafGroupId: item.id,
+        });
+    }, [
+        projectId,
+        questionnaireId,
+        item,
+    ]);
+
+    const [
+        orderedQuestions,
+        setOrderedQuestions,
+    ] = useState<Question[] | undefined>();
+
+    const {
+        loading: questionsPending,
+    } = useQuery<QuestionsByGroupQuery, QuestionsByGroupQueryVariables>(
+        QUESTIONS_BY_GROUP,
+        {
+            skip: isNotDefined(questionsVariables),
+            variables: questionsVariables,
+            onCompleted: (response) => {
+                const questions = response?.private?.projectScope?.questions?.items;
+                setOrderedQuestions(questions);
+            },
+        },
+    );
+
+    const [
+        selectedQuestions,
+        setSelectedQuestions,
+    ] = useState<string[]>([]);
+
+    const handleSelectedQuestionsChange = useCallback((val: boolean, id: string) => {
+        setSelectedQuestions((prevVal: string[]) => {
+            if (val) {
+                return [...prevVal, id];
+            }
+            return prevVal.filter((question) => id !== question);
+        });
+    }, []);
+
+    const questionRendererParams = useCallback((_: string, datum: Question) => ({
+        question: datum,
+        showAddQuestionPane: onEditQuestionClick,
+        setSelectedQuestionType,
+        projectId,
+        setActiveQuestionId,
+        selectedQuestions,
+        onSelectedQuestionsChange: handleSelectedQuestionsChange,
+    }), [
+        onEditQuestionClick,
+        projectId,
+        setActiveQuestionId,
+        setSelectedQuestionType,
+        selectedQuestions,
+        handleSelectedQuestionsChange,
+    ]);
+
+    return (
+        <ExpandableContainer
+            className={_cs(
+                styles.item,
+                item.leafNode && styles.child,
+                (level === 2 && !item.leafNode) && styles.first,
+                (level === 3 && !item.leafNode) && styles.second,
+                (level === 4) && styles.third,
+            )}
+            heading={item.label}
+            headingSize="extraSmall"
+            headingClassName={styles.heading}
+            headerClassName={styles.header}
+            contentClassName={styles.content}
+            headerActionsContainerClassName={styles.headerActions}
+            headerActions={item.leafNode && (
+                <QuickActionButton
+                    name={item.id}
+                    title="Add questions"
+                    onClick={handleQuestionAdd}
+                    disabled={addQuestionPaneShown}
+                >
+                    <IoAdd />
+                </QuickActionButton>
+            )}
+            expansionTriggerArea="header"
+            withoutBorder
+            spacing="none"
+            defaultVisibility={!item.leafNode}
+            disabled={!item.leafNode}
+        >
+            {item.leafNode
+                ? (
+                    <SortableList
+                        name="questions"
+                        className={styles.questionList}
+                        data={orderedQuestions}
+                        direction="vertical"
+                        keySelector={questionKeySelector}
+                        renderer={QuestionPreview}
+                        rendererParams={questionRendererParams}
+                        onChange={setOrderedQuestions}
+                        borderBetweenItem
+                        emptyMessage="There are no questions in this questionnaire yet."
+                        pending={questionsPending}
+                        messageShown
+                        filtered={false}
+                        errored={false}
+                    />
+                )
+                : (
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    <QuestionList
+                        data={item}
+                        projectId={projectId}
+                        selectedGroups={selectedGroups}
+                        questionnaireId={questionnaireId}
+                        onEditQuestionClick={onEditQuestionClick}
+                        setActiveQuestionId={setActiveQuestionId}
+                        setSelectedQuestionType={setSelectedQuestionType}
+                        level={level + 1}
+                        handleQuestionAdd={handleQuestionAdd}
+                        addQuestionPaneShown={addQuestionPaneShown}
+                    />
+                )}
+        </ExpandableContainer>
+    );
+}
+
+const questionListKeySelector = (q: TocItem) => q.key;
+
+interface Props{
+    data: TocItem | undefined;
+    onEditQuestionClick: (val?: string | undefined) => void;
+    projectId: string;
+    questionnaireId: string;
+    setActiveQuestionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setSelectedQuestionType: React.Dispatch<React.SetStateAction<string | undefined>>;
+    level: number;
+    handleQuestionAdd: (groupId: string) => void;
+    addQuestionPaneShown: boolean;
+    selectedGroups: string[];
+}
+
+function QuestionList(props: Props) {
+    const {
+        data,
+        selectedGroups,
+        onEditQuestionClick,
+        projectId,
+        questionnaireId,
+        setActiveQuestionId,
+        setSelectedQuestionType,
+        level,
+        handleQuestionAdd,
+        addQuestionPaneShown,
+    } = props;
+
+    const questionListRendererParams = useCallback((_: string, datum: TocItem) => ({
+        item: datum,
+        projectId,
+        questionnaireId,
+        onEditQuestionClick,
+        setActiveQuestionId,
+        selectedGroups,
+        setSelectedQuestionType,
+        level,
+        handleQuestionAdd,
+        addQuestionPaneShown,
+    }), [
+        projectId,
+        questionnaireId,
+        selectedGroups,
+        onEditQuestionClick,
+        setActiveQuestionId,
+        setSelectedQuestionType,
+        level,
+        addQuestionPaneShown,
+        handleQuestionAdd,
+    ]);
+
+    const finalNodes = useMemo(() => (
+        !data?.leafNode ? (
+            data?.nodes?.map((item) => {
+                const childIds = getChildren(item);
+                const inputValue = item.leafNode
+                    ? selectedGroups.includes(item.id)
+                    : childIds.every((g) => selectedGroups.includes(g));
+
+                const indeterminate = item.leafNode
+                    ? false
+                    : childIds.some((g) => selectedGroups.includes(g));
+
+                return ({
+                    ...item,
+                    isSelected: inputValue || indeterminate,
+                });
+            }).filter((item) => item.isSelected)
+        ) : undefined
+    ), [
+        data,
+        selectedGroups,
+    ]);
+
+    if (data?.leafNode) {
+        return (
+            <QuestionListRenderer
+                item={data}
+                projectId={projectId}
+                questionnaireId={questionnaireId}
+                onEditQuestionClick={onEditQuestionClick}
+                setActiveQuestionId={setActiveQuestionId}
+                setSelectedQuestionType={setSelectedQuestionType}
+                level={level}
+                handleQuestionAdd={handleQuestionAdd}
+                addQuestionPaneShown={addQuestionPaneShown}
+                selectedGroups={selectedGroups}
+            />
+        );
+    }
+
+    return (
+        <ListView
+            className={styles.list}
+            data={finalNodes}
+            keySelector={questionListKeySelector}
+            rendererParams={questionListRendererParams}
+            renderer={QuestionListRenderer}
+            filtered={false}
+            errored={false}
+            pending={false}
+        />
+    );
+}
+export default QuestionList;
diff --git a/src/views/QuestionnaireEdit/QuestionPreview/index.module.css b/src/views/QuestionnaireEdit/QuestionPreview/index.module.css
index f190fa8..bab77dd 100644
--- a/src/views/QuestionnaireEdit/QuestionPreview/index.module.css
+++ b/src/views/QuestionnaireEdit/QuestionPreview/index.module.css
@@ -1,25 +1,18 @@
-.preview {
+.question-wrapper {
     --input-width: 35rem;
-    border: none !important;
-    background-color: var(--dui-color-background);
-    overflow-y: auto;
+    align-items: flex-start;
+    padding: var(--dui-spacing-extra-large);
+    padding-left: var(--dui-spacing-medium);
     gap: var(--dui-spacing-large);
 
-    .question-wrapper {
-        align-items: flex-start;
-        padding: var(--dui-spacing-extra-large);
-        padding-left: var(--dui-spacing-medium);
-        gap: var(--dui-spacing-large);
-
-        .drag-icon {
-            > path {
-                stroke: var(--dui-color-label);
-            }
+    .drag-icon {
+        > path {
+            stroke: var(--dui-color-label);
         }
     }
+}
 
-    .question-item {
-        flex-grow: 1;
-        max-width: var(--input-width);
-    }
+.question-item {
+    flex-grow: 1;
+    max-width: var(--input-width);
 }
diff --git a/src/views/QuestionnaireEdit/QuestionPreview/index.tsx b/src/views/QuestionnaireEdit/QuestionPreview/index.tsx
index ea9539f..3c95851 100644
--- a/src/views/QuestionnaireEdit/QuestionPreview/index.tsx
+++ b/src/views/QuestionnaireEdit/QuestionPreview/index.tsx
@@ -6,12 +6,9 @@ import {
     GrDrag,
 } from 'react-icons/gr';
 import {
-    isNotDefined,
     isDefined,
-    noOp,
 } from '@togglecorp/fujs';
 import {
-    TabPanel,
     Element,
     Checkbox,
     QuickActionDropdownMenu,
@@ -44,6 +41,8 @@ interface QuestionProps {
     setSelectedQuestionType: React.Dispatch<React.SetStateAction<string | undefined>>;
     projectId: string | undefined;
     setActiveQuestionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedQuestions: string[] | undefined;
+    onSelectedQuestionsChange: (val: boolean, id: string) => void;
     attributes?: Attributes;
     listeners?: Listeners;
 }
@@ -54,6 +53,8 @@ function QuestionPreview(props: QuestionProps) {
         showAddQuestionPane,
         setSelectedQuestionType,
         setActiveQuestionId,
+        selectedQuestions,
+        onSelectedQuestionsChange,
         projectId,
         attributes,
         listeners,
@@ -70,134 +71,121 @@ function QuestionPreview(props: QuestionProps) {
         setActiveQuestionId,
     ]);
 
-    if (isNotDefined(question.leafGroupId)) {
-        return (
-            <div>
-                Could not find leaf group id.
-            </div>
-        );
-    }
-
     return (
-        <TabPanel
-            name={question.leafGroupId}
-            className={styles.preview}
-        >
-            <Element
-                className={styles.questionWrapper}
-                icons={(
-                    <>
-                        <QuickActionButton
-                            name={question.id}
-                            className={styles.dragIcon}
-                            title="Drag"
-                            variant="transparent"
-                            // eslint-disable-next-line react/jsx-props-no-spreading
-                            {...attributes}
-                            // eslint-disable-next-line react/jsx-props-no-spreading
-                            {...listeners}
-                        >
-                            <GrDrag />
-                        </QuickActionButton>
-                        { /* TODO: Fix the selection behavior */ }
-                        <Checkbox
-                            name={undefined}
-                            value={false}
-                            onChange={noOp}
-                        />
-                    </>
-                )}
-                actions={(
-                    <QuickActionDropdownMenu
-                        label={<IoEllipsisVertical />}
-                        variant="secondary"
+        <Element
+            className={styles.questionWrapper}
+            icons={(
+                <>
+                    <QuickActionButton
+                        name={question.id}
+                        className={styles.dragIcon}
+                        title="Drag"
+                        variant="transparent"
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...attributes}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...listeners}
                     >
-                        <DropdownMenuItem
-                            name={question.id}
-                            onClick={handleEditQuestionClick}
-                        >
-                            Edit question
-                        </DropdownMenuItem>
-                    </QuickActionDropdownMenu>
-                )}
-            >
-                {(question.type === 'TEXT') && (
-                    <TextQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                    />
-                )}
-                {(question.type === 'INTEGER') && (
-                    <IntegerQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                    />
-                )}
-                {(question.type === 'RANK') && isDefined(projectId) && (
-                    <RankQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                        projectId={projectId}
-                        choiceCollectionId={question.choiceCollection?.id}
-                    />
-                )}
-                {(question.type === 'DATE') && (
-                    <DateQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                    />
-                )}
-                {(question.type === 'TIME') && (
-                    <TimeQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                    />
-                )}
-                {(question.type === 'NOTE') && (
-                    <NoteQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
+                        <GrDrag />
+                    </QuickActionButton>
+                    { /* TODO: Fix the selection behavior */ }
+                    <Checkbox
+                        name={question.id}
+                        value={selectedQuestions?.includes(question.id)}
+                        onChange={onSelectedQuestionsChange}
                     />
-                )}
-                {(question.type === 'FILE') && (
-                    <FileQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                    />
-                )}
-                {(question.type === 'IMAGE') && (
-                    <ImageQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                    />
-                )}
-                {(question.type === 'SELECT_ONE') && isDefined(projectId) && (
-                    <SelectOneQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                        projectId={projectId}
-                        choiceCollectionId={question.choiceCollection?.id}
-                    />
-                )}
-                {(question.type === 'SELECT_MULTIPLE') && isDefined(projectId) && (
-                    <SelectMultipleQuestionPreview
-                        className={styles.questionItem}
-                        label={question.label}
-                        hint={question.hint}
-                        projectId={projectId}
-                        choiceCollectionId={question.choiceCollection?.id}
-                    />
-                )}
-            </Element>
-        </TabPanel>
+                </>
+            )}
+            actions={(
+                <QuickActionDropdownMenu
+                    label={<IoEllipsisVertical />}
+                    variant="secondary"
+                >
+                    <DropdownMenuItem
+                        name={question.id}
+                        onClick={handleEditQuestionClick}
+                    >
+                        Edit question
+                    </DropdownMenuItem>
+                </QuickActionDropdownMenu>
+            )}
+        >
+            {(question.type === 'TEXT') && (
+                <TextQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                />
+            )}
+            {(question.type === 'INTEGER') && (
+                <IntegerQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                />
+            )}
+            {(question.type === 'RANK') && isDefined(projectId) && (
+                <RankQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                    projectId={projectId}
+                    choiceCollectionId={question.choiceCollection?.id}
+                />
+            )}
+            {(question.type === 'DATE') && (
+                <DateQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                />
+            )}
+            {(question.type === 'TIME') && (
+                <TimeQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                />
+            )}
+            {(question.type === 'NOTE') && (
+                <NoteQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                />
+            )}
+            {(question.type === 'FILE') && (
+                <FileQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                />
+            )}
+            {(question.type === 'IMAGE') && (
+                <ImageQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                />
+            )}
+            {(question.type === 'SELECT_ONE') && isDefined(projectId) && (
+                <SelectOneQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                    projectId={projectId}
+                    choiceCollectionId={question.choiceCollection?.id}
+                />
+            )}
+            {(question.type === 'SELECT_MULTIPLE') && isDefined(projectId) && (
+                <SelectMultipleQuestionPreview
+                    className={styles.questionItem}
+                    label={question.label}
+                    hint={question.hint}
+                    projectId={projectId}
+                    choiceCollectionId={question.choiceCollection?.id}
+                />
+            )}
+        </Element>
     );
 }
 
diff --git a/src/views/QuestionnaireEdit/RankQuestionForm/index.tsx b/src/views/QuestionnaireEdit/RankQuestionForm/index.tsx
index 2f957b6..40968e6 100644
--- a/src/views/QuestionnaireEdit/RankQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/RankQuestionForm/index.tsx
@@ -131,6 +131,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function RankQuestionForm(props: Props) {
@@ -139,6 +140,7 @@ function RankQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -146,6 +148,7 @@ function RankQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'RANK' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -347,9 +350,10 @@ function RankQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx b/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx
index 4875dd0..e84b8b1 100644
--- a/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx
@@ -130,6 +130,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function SelectMultipleQuestionForm(props: Props) {
@@ -138,6 +139,7 @@ function SelectMultipleQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -145,6 +147,7 @@ function SelectMultipleQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'SELECT_MULTIPLE' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -353,9 +356,10 @@ function SelectMultipleQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx b/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx
index c509940..9b87f03 100644
--- a/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx
@@ -131,6 +131,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function SelectOneQuestionForm(props: Props) {
@@ -139,6 +140,7 @@ function SelectOneQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -146,6 +148,7 @@ function SelectOneQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'SELECT_ONE' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -354,9 +357,10 @@ function SelectOneQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx b/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx
index 98112a8..ce29fab 100644
--- a/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx
@@ -120,6 +120,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function TextQuestionForm(props: Props) {
@@ -128,6 +129,7 @@ function TextQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -135,6 +137,7 @@ function TextQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'TEXT' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -313,9 +316,10 @@ function TextQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx b/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx
index 8c6dbb2..9a0d412 100644
--- a/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx
@@ -124,6 +124,7 @@ interface Props {
     questionnaireId: string;
     questionId?: string;
     onSuccess: (questionId: string | undefined) => void;
+    selectedLeafGroupId: string;
 }
 
 function TimeQuestionForm(props: Props) {
@@ -132,6 +133,7 @@ function TimeQuestionForm(props: Props) {
         questionnaireId,
         questionId,
         onSuccess,
+        selectedLeafGroupId,
     } = props;
 
     const alert = useAlert();
@@ -139,6 +141,7 @@ function TimeQuestionForm(props: Props) {
     const initialFormValue: FormType = {
         type: 'TIME' as QuestionTypeEnum,
         questionnaire: questionnaireId,
+        leafGroup: selectedLeafGroupId,
     };
 
     const {
@@ -318,9 +321,10 @@ function TimeQuestionForm(props: Props) {
                     name="leafGroup"
                     projectId={projectId}
                     questionnaireId={questionnaireId}
-                    value={formValue.leafGroup}
+                    value={selectedLeafGroupId}
                     error={fieldError?.leafGroup}
                     onChange={setFieldValue}
+                    disabled
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/index.module.css b/src/views/QuestionnaireEdit/index.module.css
index 24090a9..ff58d42 100644
--- a/src/views/QuestionnaireEdit/index.module.css
+++ b/src/views/QuestionnaireEdit/index.module.css
@@ -70,6 +70,7 @@
                 border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-separator);
 
                 .tab {
+                    font-size: var(--dui-font-size-large);
                     &.active {
                         background-color: var(--dui-color-secondary);
                         border-bottom: var(--dui-width-separator-medium) solid var(--dui-color-accent);
diff --git a/src/views/QuestionnaireEdit/index.tsx b/src/views/QuestionnaireEdit/index.tsx
index d05c26c..e93cbf6 100644
--- a/src/views/QuestionnaireEdit/index.tsx
+++ b/src/views/QuestionnaireEdit/index.tsx
@@ -3,7 +3,6 @@ import {
     useParams,
 } from 'react-router-dom';
 import {
-    IoAdd,
     IoCameraOutline,
     IoCloseOutline,
     IoDocumentTextOutline,
@@ -19,6 +18,7 @@ import {
     MdOutlineSchedule,
 } from 'react-icons/md';
 import {
+    compareNumber,
     isNotDefined,
     isDefined,
     listToGroupList,
@@ -27,9 +27,9 @@ import {
 import {
     gql,
     useQuery,
+    useMutation,
 } from '@apollo/client';
 import {
-    Button,
     Container,
     Header,
     ListView,
@@ -39,21 +39,22 @@ import {
     TextOutput,
     useModalState,
 } from '@the-deep/deep-ui';
+import { removeNull } from '@togglecorp/toggle-form';
 
 import SubNavbar from '#components/SubNavbar';
-import SortableList from '#components/SortableList';
 import TocList from '#components/TocList';
-import { flatten } from '#utils/common';
+import {
+    NonLeafTocItem,
+    LeafTocItem,
+    TocItem,
+    getChildren,
+    flatten,
+} from '#utils/common';
 import {
     QuestionnaireQuery,
     QuestionnaireQueryVariables,
     QuestionsByGroupQuery,
     QuestionsByGroupQueryVariables,
-    QuestionLeafGroupCategory1TypeEnum,
-    QuestionLeafGroupCategory2TypeEnum,
-    QuestionLeafGroupCategory3TypeEnum,
-    QuestionLeafGroupCategory4TypeEnum,
-    QuestionLeafGroupTypeEnum,
 } from '#generated/types';
 
 import TextQuestionForm from './TextQuestionForm';
@@ -67,15 +68,17 @@ import ImageQuestionForm from './ImageQuestionForm';
 import SelectOneQuestionForm from './SelectOneQuestionForm';
 import SelectMultipleQuestionForm from './SelectMultipleQuestionForm';
 
+import QuestionList from './QuestionList';
 import {
     QUESTION_FRAGMENT,
-} from './queries.ts';
+    LEAF_GROUPS_FRAGMENT,
+} from './queries';
 import QuestionTypeItem, { QuestionType } from './QuestionTypeItem';
-import QuestionPreview from './QuestionPreview';
 
 import styles from './index.module.css';
 
 const QUESTIONNAIRE = gql`
+    ${LEAF_GROUPS_FRAGMENT}
     query Questionnaire(
         $projectId: ID!,
         $questionnaireId: ID!,
@@ -91,19 +94,7 @@ const QUESTIONNAIRE = gql`
                     id
                     title
                     leafGroups {
-                        id
-                        name
-                        order
-                        category1
-                        category1Display
-                        category2
-                        category2Display
-                        category3
-                        category3Display
-                        category4
-                        category4Display
-                        type
-                        typeDisplay
+                        ...LeafGroups
                     }
                 }
             }
@@ -146,10 +137,55 @@ const QUESTIONS_BY_GROUP = gql`
     }
 `;
 
-type Question = NonNullable<NonNullable<NonNullable<NonNullable<QuestionsByGroupQuery['private']>['projectScope']>['questions']>['items']>[number];
+const ORDER_QUESTION_GROUP = gql`
+    ${LEAF_GROUPS_FRAGMENT}
+    mutation OrderQuestionGroup(
+        $projectId: ID!,
+        $groupList: [QuestionLeafGroupOrderInputType!]!,
+        $questionnaireId: ID!,
+    ){
+        private {
+            projectScope(pk: $projectId){
+                bulkUpdateQuestionnairQuestionGroupsLeafOrder(
+                data: $groupList
+                questionnaireId: $questionnaireId
+                ) {
+                    errors
+                    results {
+                        ...LeafGroups
+                    }
+                }
+            }
+        }
+    }
+`;
+
+const QUESTION_GROUP_VISIBILITY = gql`
+    ${LEAF_GROUPS_FRAGMENT}
+    mutation MyMutation(
+        $projectId: ID!,
+        $questionnaireId: ID!,
+        $groupIds: [ID!]!,
+        $visibility: VisibilityActionEnum!,
+    ) {
+        private {
+            projectScope(pk: $projectId) {
+                updateQuestionGroupsLeafVisibility(
+                    questionnaireId: $questionnaireId,
+                    ids: $groupIds,
+                    visibility: $visibility,
+                ) {
+                    results {
+                        ...LeafGroups
+                    }
+                }
+            }
+        }
+    }
+`;
+
 type QuestionGroup = NonNullable<NonNullable<NonNullable<NonNullable<QuestionnaireQuery['private']>['projectScope']>['questionnaire']>['leafGroups']>[number];
-const questionKeySelector = (q: Question) => q.id;
-const groupTabKeySelector = (g: QuestionGroup) => g.id;
+const groupTabKeySelector = (g: TocItem) => g.key;
 
 const questionTypes: QuestionType[] = [
     {
@@ -210,55 +246,89 @@ interface Node {
         label: string;
     }[];
     type?: string;
+    id: string;
+    isHidden: boolean;
 }
 
-type TocItem = {
-    key: string;
-    parentKeys: string[];
-    label: string;
-    nodes: TocItem[];
-};
-
-function getNodes(input: Node[], parentKeys: string[]): TocItem[] {
-    if (input.length <= 1) {
-        return [];
-    }
-    const grouped = listToGroupList(
-        input,
+function getNodes(
+    input: Node[],
+    parentKeys: string[],
+): TocItem[] {
+    const nonLeafNodes = input.filter((item) => item.category.length > 1);
+    const groupedNonLeafNodes = listToGroupList(
+        nonLeafNodes,
         (groupItem) => groupItem.category[0].key,
         (groupItem) => ({
             category: groupItem.category.slice(1),
             parentLabel: groupItem.category[0].label,
             parentKey: groupItem.category[0].key,
             type: groupItem.type,
+            id: groupItem.id,
+            isHidden: groupItem.isHidden,
         }),
     );
-
-    return mapToList(
-        grouped,
-        (item, key) => ({
+    const nonLeafNodesResponse = mapToList(
+        groupedNonLeafNodes,
+        (item, key): NonLeafTocItem => ({
             key,
+            // type: item[0].type,
             label: item[0].parentLabel,
             parentKeys: [...parentKeys, item[0].parentKey],
-            nodes: getNodes(item, [...parentKeys, item[0].parentKey]),
+            nodes: getNodes(
+                item,
+                [...parentKeys, item[0].parentKey],
+            ),
         }),
     );
-}
 
-interface TransformedGroupType {
-    category: {
-        key: QuestionLeafGroupCategory1TypeEnum
-        | QuestionLeafGroupCategory2TypeEnum
-        | QuestionLeafGroupCategory3TypeEnum
-        | QuestionLeafGroupCategory4TypeEnum;
-        label: string;
-    }[];
-    type: QuestionLeafGroupTypeEnum;
+    const leafNodes = input.filter((item) => item.category.length <= 1);
+    const leafNodesResponse = leafNodes.map((item): LeafTocItem => ({
+        key: item.category[0].key,
+        // type: item.type,
+        label: item.category[0].label,
+        parentKeys: [...parentKeys, item.category[0].key],
+        leafNode: true,
+        isHidden: item.isHidden,
+        id: item.id,
+    }));
+
+    return [
+        ...leafNodesResponse,
+        ...nonLeafNodesResponse,
+    ];
 }
 
 const questionTypeKeySelector = (q: QuestionType) => q.key;
 const PAGE_SIZE = 15;
 
+function transformOptionsByCategory(options: QuestionGroup[]): Node[] {
+    const result = options
+        .map((g) => ({
+            category: [
+                isDefined(g.category1) && isDefined(g.category1Display) ? {
+                    key: g.category1,
+                    label: g.category1Display,
+                } : undefined,
+                isDefined(g.category2) && isDefined(g.category2Display) ? {
+                    key: g.category2,
+                    label: g.category2Display,
+                } : undefined,
+                isDefined(g.category3) && isDefined(g.category3Display) ? {
+                    key: g.category3,
+                    label: g.category3Display,
+                } : undefined,
+                isDefined(g.category4) && isDefined(g.category4Display) ? {
+                    key: g.category4,
+                    label: g.category4Display,
+                } : undefined,
+            ].filter(isDefined),
+            type: g.type,
+            id: g.id,
+            isHidden: g.isHidden,
+        }));
+    return result;
+}
+
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const {
@@ -313,7 +383,7 @@ export function Component() {
     const [
         orderedOptions,
         setOrderedOptions,
-    ] = useState<QuestionGroup[]>([]);
+    ] = useState<TocItem[] | undefined>([]);
 
     const {
         data: questionnaireResponse,
@@ -323,86 +393,126 @@ export function Component() {
             skip: isNotDefined(questionnaireVariables),
             variables: questionnaireVariables,
             onCompleted: (response) => {
-                const questionGroups = response?.private.projectScope?.questionnaire?.leafGroups;
-                setOrderedOptions(questionGroups ?? []);
+                const questionGroups = removeNull(
+                    response?.private.projectScope?.questionnaire?.leafGroups,
+                );
+                if (!questionGroups) {
+                    return;
+                }
+                const items = [...questionGroups];
+                items.sort((a, b) => compareNumber(a.order, b.order));
+                const transformedQuestionGroups = transformOptionsByCategory(items);
+                const groupOptionsSafe = getNodes(transformedQuestionGroups, []);
+                setOrderedOptions(groupOptionsSafe ?? []);
             },
         },
     );
 
-    const questionnaireTitle = questionnaireResponse?.private.projectScope?.questionnaire?.title;
-    const projectTitle = questionnaireResponse?.private.projectScope?.project.title;
-
-    const selectedParentQuestionGroups = orderedOptions?.filter(
-        (group) => selectedGroups.includes(group.id),
-    );
-
-    const transformedGroups: TransformedGroupType[] = useMemo(() => (
-        orderedOptions.map((g) => {
+    const referenceList = useMemo(() => (
+        questionnaireResponse?.private?.projectScope?.questionnaire?.leafGroups.map((g) => {
             if (isDefined(g.category3) && isDefined(g.category4)) {
                 return ({
-                    category: [
-                        {
-                            key: g.category1,
-                            label: String(g.category1Display),
-                        },
-                        {
-                            key: g.category2,
-                            label: String(g.category2Display),
-                        },
-                        {
-                            key: g.category3,
-                            label: String(g.category3Display),
-                        },
-                        {
-                            key: g.category4,
-                            label: String(g.category4Display),
-                        },
-                    ],
-                    type: g.type,
+                    key: `${g.category1}-${g.category2}-${g.category3}-${g.category4}`,
+                    id: g.id,
                 });
             }
             return ({
-                category: [
-                    {
-                        key: g.category1,
-                        label: String(g.category1Display),
-                    },
-                    {
-                        key: g.category2,
-                        label: String(g.category2Display),
-                    },
-                ],
-                type: g.type,
+                key: `${g.category1}-${g.category2}`,
+                id: g.id,
             });
         })
     ), [
-        orderedOptions,
+        questionnaireResponse,
     ]);
 
-    const groupOptionsSafe = getNodes(transformedGroups, []);
+    const questionnaireTitle = questionnaireResponse?.private.projectScope?.questionnaire?.title;
+    const projectTitle = questionnaireResponse?.private.projectScope?.project.title;
+
+    const [
+        triggerGroupOrderChange,
+    ] = useMutation(
+        ORDER_QUESTION_GROUP,
+        {
+            onCompleted: (response) => {
+                const leafGroupsResponse = response.results;
+                if (!leafGroupsResponse) {
+                    return;
+                }
+                const items = [...leafGroupsResponse];
+                items.sort((a, b) => compareNumber(a.order, b.order));
+
+                const transformedGroups = transformOptionsByCategory(items);
+                const groupOptionsSafe = getNodes(transformedGroups, []);
+                setOrderedOptions(groupOptionsSafe);
+            },
+        },
+    );
+
+    const handleGroupOptionsChange = useCallback((newVal: TocItem[] | undefined) => {
+        setOrderedOptions(newVal);
+
+        function getIdFromGroups(key: string) {
+            const foundGroup = referenceList?.find((g) => g.key === key);
+            if (isNotDefined(foundGroup)) {
+                return null;
+            }
+            return foundGroup.id;
+        }
 
-    const flatList = useMemo(() => {
-        const a = flatten(
-            groupOptionsSafe,
+        const flattenedNewList = flatten(
+            newVal ?? [],
             (item) => ({
                 key: item.parentKeys.join('-'),
             }),
-            (item) => item.nodes,
+            (item) => (item.leafNode ? [] : item.nodes),
         );
-        return a;
-    }, [groupOptionsSafe]);
-
-    const handleGroupOptionsChange = useCallback((newVal: TocItem[] | undefined) => {
-        // FIXME: Add handler
-        console.log('aditya', newVal, flatList);
+        const listToSend = flattenedNewList.map((g, index) => ({
+            id: getIdFromGroups(g.key),
+            order: index + 1,
+        }));
+        triggerGroupOrderChange({
+            variables: {
+                projectId,
+                questionnaireId,
+                groupList: listToSend,
+            },
+        });
     }, [
-        flatList,
+        referenceList,
+        projectId,
+        questionnaireId,
+        triggerGroupOrderChange,
     ]);
 
-    const [activeGroupTab, setActiveGroupTab] = useState<string | undefined>(
-        selectedParentQuestionGroups?.[0]?.name,
+    const [
+        triggerQuestionGroupsVisibility,
+    ] = useMutation(
+        QUESTION_GROUP_VISIBILITY,
     );
 
+    const handleQuestionGroupSelect = useCallback((val: boolean, ids: string[]) => {
+        setSelectedGroups((prevValue) => {
+            if (val) {
+                return [...prevValue, ...ids];
+            }
+            return prevValue.filter((item) => !ids.includes(item));
+        });
+        triggerQuestionGroupsVisibility({
+            variables: {
+                projectId,
+                questionnaireId,
+                groupIds: ids,
+                visibility: val ? 'SHOW' : 'HIDE',
+            },
+        });
+    }, [
+        triggerQuestionGroupsVisibility,
+        projectId,
+        questionnaireId,
+    ]);
+
+    const [activeGroupTab, setActiveGroupTab] = useState<string | undefined>();
+
     // NOTE: If none of the tabs are selected, 1st group should be selected
     const finalSelectedTab = activeGroupTab ?? selectedGroups[0];
 
@@ -424,11 +534,6 @@ export function Component() {
         finalSelectedTab,
     ]);
 
-    const [
-        orderedQuestions,
-        setOrderedQuestions,
-    ] = useState<Question[] | undefined>();
-
     const {
         refetch: retriggerQuestions,
     } = useQuery<QuestionsByGroupQuery, QuestionsByGroupQueryVariables>(
@@ -436,10 +541,6 @@ export function Component() {
         {
             skip: isNotDefined(questionsVariables),
             variables: questionsVariables,
-            onCompleted: (response) => {
-                const questions = response?.private?.projectScope?.questions?.items;
-                setOrderedQuestions(questions);
-            },
         },
     );
 
@@ -451,37 +552,58 @@ export function Component() {
         retriggerQuestions,
     ]);
 
+    const [activeLeafGroupId, setActiveLeafGroupId] = useState<string | undefined>();
+
     const questionTypeRendererParams = useCallback((key: string, data: QuestionType) => ({
         questionType: data,
         name: key,
         onQuestionClick: setSelectedQuestionType,
     }), []);
 
-    const questionRendererParams = useCallback((_: string, data: Question) => ({
-        question: data,
-        showAddQuestionPane,
-        setSelectedQuestionType,
-        projectId,
-        setActiveQuestionId,
-    }), [
-        showAddQuestionPane,
-        projectId,
-    ]);
-
-    const handleQuestionAdd = useCallback(() => {
+    const handleQuestionAdd = useCallback((groupId: string) => {
         showAddQuestionPane();
         setActiveQuestionId(undefined);
+        setActiveLeafGroupId(groupId);
     }, [
         showAddQuestionPane,
     ]);
 
-    const groupTabRenderParams = useCallback((_: string, datum: QuestionGroup) => ({
-        children: datum.name,
-        name: datum.id,
+    const tabQuestions = useMemo(() => {
+        const val = orderedOptions?.find((g) => g.key === finalSelectedTab);
+        return val;
+    }, [
+        orderedOptions,
+        finalSelectedTab,
+    ]);
+
+    const groupTabRenderParams = useCallback((_: string, datum: TocItem) => ({
+        children: datum.label,
+        name: datum.key,
         className: styles.tab,
         activeClassName: styles.active,
     }), []);
 
+    const filtered1stLevel = useMemo(() => (
+        orderedOptions?.map((item) => {
+            const childIds = getChildren(item);
+            const inputValue = item.leafNode
+                ? selectedGroups.includes(item.id)
+                : childIds.every((g) => selectedGroups.includes(g));
+
+            const indeterminate = item.leafNode
+                ? false
+                : childIds.some((g) => selectedGroups.includes(g));
+
+            return ({
+                ...item,
+                isSelected: inputValue || indeterminate,
+            });
+        }).filter((item) => item.isSelected)
+    ), [
+        orderedOptions,
+        selectedGroups,
+    ]);
+
     if (isNotDefined(projectId) || isNotDefined(questionnaireId)) {
         return null;
     }
@@ -509,27 +631,17 @@ export function Component() {
                     contentClassName={styles.leftContent}
                 >
                     <TocList
-                        orderedOptions={groupOptionsSafe}
+                        orderedOptions={orderedOptions}
                         onOrderedOptionsChange={handleGroupOptionsChange}
-                        onSelectedGroupsChange={setSelectedGroups}
+                        onSelectedGroupsChange={handleQuestionGroupSelect}
                         selectedGroups={selectedGroups}
-                        onActiveTabChange={setActiveGroupTab}
+                        // onActiveTabChange={setActiveGroupTab}
                     />
                 </Container>
                 <div className={styles.content}>
                     <Header
                         className={styles.header}
                         heading="My Questionnaire"
-                        actions={(
-                            <Button
-                                name={undefined}
-                                onClick={handleQuestionAdd}
-                                icons={<IoAdd />}
-                                disabled={addQuestionPaneShown}
-                            >
-                                Add Question
-                            </Button>
-                        )}
                     />
                     <Tabs
                         onChange={setActiveGroupTab}
@@ -538,7 +650,8 @@ export function Component() {
                     >
                         <ListView
                             className={styles.tabs}
-                            data={selectedParentQuestionGroups}
+                            // FIXME: pass filtered data here
+                            data={filtered1stLevel}
                             keySelector={groupTabKeySelector}
                             renderer={Tab}
                             rendererParams={groupTabRenderParams}
@@ -546,22 +659,17 @@ export function Component() {
                             errored={false}
                             pending={false}
                         />
-                        <SortableList
-                            name="questions"
-                            className={styles.questionList}
-                            data={orderedQuestions}
-                            direction="vertical"
-                            keySelector={questionKeySelector}
-                            // TODO: check this error
-                            renderer={QuestionPreview}
-                            rendererParams={questionRendererParams}
-                            onChange={setOrderedQuestions}
-                            borderBetweenItem
-                            emptyMessage="There are no questions in this questionnaire yet."
-                            messageShown
-                            filtered={false}
-                            errored={false}
-                            pending={false}
+                        <QuestionList
+                            data={tabQuestions}
+                            projectId={projectId}
+                            selectedGroups={selectedGroups}
+                            questionnaireId={questionnaireId}
+                            onEditQuestionClick={showAddQuestionPane}
+                            setActiveQuestionId={setActiveQuestionId}
+                            setSelectedQuestionType={setSelectedQuestionType}
+                            level={2}
+                            handleQuestionAdd={handleQuestionAdd}
+                            addQuestionPaneShown={addQuestionPaneShown}
                         />
                     </Tabs>
                 </div>
@@ -592,88 +700,100 @@ export function Component() {
                                 pending={false}
                             />
                         )}
-                        <div className={styles.question}>
-                            {(selectedQuestionType === 'TEXT') && (
-                                <TextQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'INTEGER') && (
-                                <IntegerQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'RANK') && (
-                                <RankQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'SELECT_ONE') && (
-                                <SelectOneQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'SELECT_MULTIPLE') && (
-                                <SelectMultipleQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'DATE') && (
-                                <DateQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'TIME') && (
-                                <TimeQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'NOTE') && (
-                                <NoteQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'FILE') && (
-                                <FileQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                            {(selectedQuestionType === 'IMAGE') && (
-                                <ImageQuestionForm
-                                    projectId={projectId}
-                                    questionnaireId={questionnaireId}
-                                    questionId={activeQuestionId}
-                                    onSuccess={handleQuestionCreateSuccess}
-                                />
-                            )}
-                        </div>
+                        {activeLeafGroupId && (
+                            <div className={styles.question}>
+                                {(selectedQuestionType === 'TEXT') && (
+                                    <TextQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'INTEGER') && (
+                                    <IntegerQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'RANK') && (
+                                    <RankQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'SELECT_ONE') && (
+                                    <SelectOneQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'SELECT_MULTIPLE') && (
+                                    <SelectMultipleQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'DATE') && (
+                                    <DateQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'TIME') && (
+                                    <TimeQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'NOTE') && (
+                                    <NoteQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'FILE') && (
+                                    <FileQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                                {(selectedQuestionType === 'IMAGE') && (
+                                    <ImageQuestionForm
+                                        projectId={projectId}
+                                        questionnaireId={questionnaireId}
+                                        questionId={activeQuestionId}
+                                        onSuccess={handleQuestionCreateSuccess}
+                                        selectedLeafGroupId={activeLeafGroupId}
+                                    />
+                                )}
+                            </div>
+                        )}
                     </div>
                 )}
             </div>
diff --git a/src/views/QuestionnaireEdit/queries.ts b/src/views/QuestionnaireEdit/queries.ts
index c06e88b..589ae3e 100644
--- a/src/views/QuestionnaireEdit/queries.ts
+++ b/src/views/QuestionnaireEdit/queries.ts
@@ -18,6 +18,25 @@ export const QUESTION_FRAGMENT = gql`
     }
 `;
 
+export const LEAF_GROUPS_FRAGMENT = gql`
+    fragment LeafGroups on QuestionLeafGroupType {
+        id
+        name
+        order
+        category1
+        category1Display
+        category2
+        category2Display
+        category3
+        category3Display
+        category4
+        category4Display
+        type
+        typeDisplay
+        isHidden
+    }
+`;
+
 export const QUESTION_INFO = gql`
     query QuestionInfo (
         $projectId: ID!,