diff --git a/app/Base/Page/index.tsx b/app/Base/Page/index.tsx
index 95d28b68..74ae78be 100644
--- a/app/Base/Page/index.tsx
+++ b/app/Base/Page/index.tsx
@@ -63,6 +63,7 @@ function useYear(clientCode: string) {
 }
 
 function CountryProfileWithYear(props: Omit<CountryProfileProps, 'endYear'> & { clientCode: string }) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;
@@ -76,6 +77,7 @@ function CountryProfileWithYear(props: Omit<CountryProfileProps, 'endYear'> & {
 }
 
 function GiddWithYear(props: Omit<GiddProps, 'endYear'>) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;
@@ -89,6 +91,7 @@ function GiddWithYear(props: Omit<GiddProps, 'endYear'>) {
 }
 
 function ConflictWidgetWithYear(props: Omit<ConflictWidgetProps, 'endYear'>) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;
@@ -102,6 +105,7 @@ function ConflictWidgetWithYear(props: Omit<ConflictWidgetProps, 'endYear'>) {
 }
 
 function DisasterWidgetWithYear(props: Omit<DisasterWidgetProps, 'endYear'>) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;
diff --git a/app/Base/configs/lang.ts b/app/Base/configs/lang.ts
index b86323de..7949e1ae 100644
--- a/app/Base/configs/lang.ts
+++ b/app/Base/configs/lang.ts
@@ -97,6 +97,10 @@ export const goodPracticesDashboard = {
         en: 'Stage',
         fr: 'Organiser',
     },
+    successFactorLabel: {
+        en: 'Success Factors',
+        fr: 'Facteurs de réussite',
+    },
     clearButtonLabel: {
         en: 'Clear All Filters',
         fr: 'Effacer tous les filtres',
@@ -222,12 +226,12 @@ export const goodPracticesDashboard = {
         fr: 'liens médias et ressources',
     },
     descriptionLabel: {
-        en: 'Description of the project (max 10,000 characters)',
-        fr: 'Description du projet (max 10 000 caractères)',
+        en: 'Description of the project',
+        fr: 'Description du projet',
     },
     descriptionsFrLabel: {
-        en: 'Description du projet (max 10 000 caractères)',
-        fr: 'Description du projet (max 10 000 caractères)',
+        en: 'Description du projet',
+        fr: 'Description du projet',
     },
     titleLabel: {
         en: 'Name of project',
diff --git a/app/components/FigureAnalysis/styles.css b/app/components/FigureAnalysis/styles.css
index 064d2d73..e6a59c3a 100644
--- a/app/components/FigureAnalysis/styles.css
+++ b/app/components/FigureAnalysis/styles.css
@@ -20,10 +20,6 @@
         border: var(--tui-width-separator-thin) solid var(--tui-color-separator);
         border-top: 0;
 
-        .separator {
-            border-bottom: var(--tui-width-separator-thin) solid var(--tui-color-separator);
-        }
-
         .details {
             .collapsible-children {
                 padding-bottom: var(--tui-spacing-medium);
diff --git a/app/components/NumberBlock/styles.css b/app/components/NumberBlock/styles.css
index 8e928d2f..ee72dd8a 100644
--- a/app/components/NumberBlock/styles.css
+++ b/app/components/NumberBlock/styles.css
@@ -14,45 +14,4 @@
         color: var(--tui-color-text-label);
         font-size: var(--tui-font-size-small);
     }
-
-    &.conflict {
-        .label,
-        .value {
-            color: var(--color-conflict);
-        }
-    }
-
-    &.disaster {
-        .label,
-        .value {
-            color: var(--color-disaster);
-        }
-    }
-
-    &.medium {
-        .value {
-            font-size: var(--tui-font-size-super-large);
-        }
-    }
-
-    &.large {
-        .value {
-            font-size: var(--tui-font-size-massive-large);
-        }
-    }
-
-    &.small {
-        .value {
-            font-size: var(--tui-font-size-large);
-        }
-    }
-
-    &.xsmall {
-        .value {
-            font-size: var(--tui-font-size-medium);
-        }
-        .label {
-            font-size: var(--tui-font-size-small);
-        }
-    }
 }
diff --git a/app/components/ProgressLine/styles.css b/app/components/ProgressLine/styles.css
index 0f4becab..accf9d12 100644
--- a/app/components/ProgressLine/styles.css
+++ b/app/components/ProgressLine/styles.css
@@ -12,10 +12,6 @@
         .title {
             flex-grow :1;
         }
-
-        .numeral {
-            flex-shrink: 0;
-        }
     }
 
     .bottom {
diff --git a/app/components/Tabs/Tab/styles.css b/app/components/Tabs/Tab/styles.css
index 913e0c52..206e12f6 100644
--- a/app/components/Tabs/Tab/styles.css
+++ b/app/components/Tabs/Tab/styles.css
@@ -38,7 +38,6 @@
     }
 
     &.secondary {
-        /* border-radius: calc(1em + #{var(--tui-spacing-medium)}); */
         border-radius: 0.25rem;
 
         background-color: var(--tui-color-background);
diff --git a/app/components/TinyMceEditorInput/index.tsx b/app/components/TinyMceEditorInput/index.tsx
index 28f0ca41..35a9bd3c 100644
--- a/app/components/TinyMceEditorInput/index.tsx
+++ b/app/components/TinyMceEditorInput/index.tsx
@@ -1,15 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { _cs } from '@togglecorp/fujs';
+import { isDefined, isNotDefined, _cs } from '@togglecorp/fujs';
 import { InputContainer } from '@togglecorp/toggle-ui';
 import { Editor } from '@tinymce/tinymce-react';
 
 import useTranslation from '#hooks/useTranslation';
-import {
-    goodPracticesDashboard,
-} from '#base/configs/lang';
-import {
-    TINY_MCE_KEY,
-} from '#base/configs/tinyMceEditor';
+import { goodPracticesDashboard } from '#base/configs/lang';
+import { TINY_MCE_KEY } from '#base/configs/tinyMceEditor';
 
 import styles from './styles.css';
 
@@ -37,21 +33,18 @@ function TinyMceEditorInput<N extends string>(props: Props<N>) {
     } = props;
 
     const strings = useTranslation(goodPracticesDashboard);
-
-    const sizeLimit = textLimit ?? 10000;
     const [length, setLength] = useState(0);
-    const lengthExceeded = length >= sizeLimit;
 
     const handleChange = useCallback((newText: string | undefined, editor) => {
         const textLength = editor.getContent({ format: 'text' }).length;
-        if (textLength <= sizeLimit) {
+        if (isNotDefined(textLimit) || textLength <= textLimit) {
             onChange(newText, name);
             setLength(textLength);
         }
     }, [
         onChange,
         name,
-        sizeLimit,
+        textLimit,
     ]);
 
     return (
@@ -72,17 +65,18 @@ function TinyMceEditorInput<N extends string>(props: Props<N>) {
                         init={{ menubar: 'edit insert format' }}
                         toolbar="undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link"
                     />
-                    {value && (
+                    {isDefined(value) && isDefined(textLimit) && (
                         <div className={styles.textLengthSection}>
-                            {lengthExceeded && (
+                            { /* Note: only run when existed form exceed the text limit */ }
+                            {length > textLimit && (
                                 <span className={styles.textLimit}>
                                     {strings.textLimitExceeded}
                                 </span>
                             )}
                             <span>
-                                {sizeLimit - length}
+                                {textLimit - length}
                                 /
-                                {sizeLimit}
+                                {textLimit}
                             </span>
                         </div>
                     )}
diff --git a/app/components/tableHelpers/index.tsx b/app/components/tableHelpers/index.tsx
index c03a6eae..af4cd3a2 100644
--- a/app/components/tableHelpers/index.tsx
+++ b/app/components/tableHelpers/index.tsx
@@ -47,7 +47,6 @@ export function createExternalLinkColumn<D, K>(
             filterType: options?.filterType,
             orderable: options?.orderable,
             hideable: options?.hideable,
-            titleClassName: styles.title,
         },
         cellRenderer: ExternalLink,
         cellRendererParams: (_: K, datum: D): ExternalLinkProps => {
@@ -93,7 +92,6 @@ export function createTextColumn<D, K>(
             filterType: options?.filterType,
             orderable: options?.orderable,
             hideable: options?.hideable,
-            titleClassName: styles.title,
         },
         cellRenderer: Text,
         columnWidth: options?.columnWidth,
@@ -137,7 +135,6 @@ export function createNumberColumn<D, K>(
             filterType: options?.filterType,
             orderable: options?.orderable,
             hideable: options?.hideable,
-            titleClassName: styles.title,
         },
         cellRenderer: Numeral,
         columnWidth: options?.columnWidth,
diff --git a/app/components/tableHelpers/styles.css b/app/components/tableHelpers/styles.css
index aa9f0a40..dfab03cd 100644
--- a/app/components/tableHelpers/styles.css
+++ b/app/components/tableHelpers/styles.css
@@ -4,14 +4,6 @@
         font-size: var(--tui-font-size-medium)!important;
     }
 
-    &.conflict {
-        color: var(--color-conflict);
-    }
-
-    &.disaster {
-        color: var(--color-disaster);
-    }
-
     &.number-header {
         * {
             justify-content: flex-end;
diff --git a/app/views/GoodPractices/AddGoodPractice/index.tsx b/app/views/GoodPractices/AddGoodPractice/index.tsx
index ebabcf00..b63cbba9 100644
--- a/app/views/GoodPractices/AddGoodPractice/index.tsx
+++ b/app/views/GoodPractices/AddGoodPractice/index.tsx
@@ -192,7 +192,6 @@ function AddGoodPractice(props: Props) {
         error: riskyError,
         setFieldValue,
         validate,
-        // setValue,
         setError,
     } = useForm(
         schema,
@@ -516,6 +515,7 @@ function AddGoodPractice(props: Props) {
                     value={value?.whatMakesThisPromisingPractice}
                     error={error?.whatMakesThisPromisingPractice}
                     onChange={setFieldValue}
+                    textLimit={2000}
                 />
                 <TinyMceEditorInput
                     className={styles.input}
@@ -529,6 +529,7 @@ function AddGoodPractice(props: Props) {
                     value={value?.descriptionOfKeyLessonsLearned}
                     error={error?.descriptionOfKeyLessonsLearned}
                     onChange={setFieldValue}
+                    textLimit={2000}
                 />
                 {!value?.isFrench && (
                     <TinyMceEditorInput
diff --git a/app/views/GoodPractices/index.tsx b/app/views/GoodPractices/index.tsx
index f1508e8a..a2370fcf 100644
--- a/app/views/GoodPractices/index.tsx
+++ b/app/views/GoodPractices/index.tsx
@@ -107,6 +107,7 @@ query GoodPractices(
     $driversOfDisplacements : [ID!],
     $focusArea:[ID!] ,
     $stages: [StageTypeEnum!]!,
+    $successFactor:[ID!] ,
     $regions: [GoodPracticeRegion!],
     $countries: [ID!],
     $startYear: Int!,
@@ -123,6 +124,7 @@ query GoodPractices(
             driversOfDisplacements: $driversOfDisplacements,
             focusArea: $focusArea,
             stages: $stages,
+            successFactor: $successFactor,
             regions: $regions,
             countries: $countries,
             startYear: $startYear,
@@ -204,6 +206,10 @@ query GoodPracticeFilterChoices {
             label
             name
         }
+        successFactor {
+            id
+            name
+        }
         type {
             label
             name
@@ -298,6 +304,7 @@ type GoodPracticeDriveType = NonNullable<GoodPracticeFilter['driversOfDisplaceme
 type GoodPracticeStageType = NonNullable<GoodPracticeFilter['stage']>[number]['name'];
 type GoodPracticeRegionType = NonNullable<GoodPracticeFilter['regions']>[number]['name'];
 type GoodPracticeCountryType = NonNullable<GoodPracticeFilter['countries']>[number]['name'];
+type goodPracticeSuccessFactorType = NonNullable<GoodPracticeFilter['successFactor']>[number]['name'];
 
 interface Props {
     className?: string;
@@ -346,7 +353,11 @@ function GoodPractices(props: Props) {
     const [goodPracticeType, setGoodPracticeType] = useInputState<GoodPracticeTypeType[]>([]);
     const [goodPracticeArea, setGoodPracticeArea] = useInputState<GoodPracticeAreaType[]>([]);
     const [goodPracticeDrive, setGoodPracticeDrive] = useInputState<GoodPracticeDriveType[]>([]);
-    const [goodpracticeStage, setGoodPracticeStage] = useInputState<GoodPracticeStageType[]>([]);
+    const [goodPracticeStage, setGoodPracticeStage] = useInputState<GoodPracticeStageType[]>([]);
+    const [goodPracticeSuccessFactor, setGoodPracticeSuccessFactor] = useInputState<
+        goodPracticeSuccessFactorType[]
+    >([]);
+
     const [
         goodPracticeRegion,
         setGoodPracticeRegion,
@@ -396,6 +407,7 @@ function GoodPractices(props: Props) {
         setGoodPracticeStage([]);
         setGoodPracticeRegion([]);
         setGoodPracticeCountry([]);
+        setGoodPracticeSuccessFactor([]);
     }, [
         setYearRange,
         setGoodPracticeType,
@@ -404,6 +416,7 @@ function GoodPractices(props: Props) {
         setGoodPracticeStage,
         setGoodPracticeRegion,
         setGoodPracticeCountry,
+        setGoodPracticeSuccessFactor,
         goodPracticeFilterResponse,
     ]);
 
@@ -418,6 +431,7 @@ function GoodPractices(props: Props) {
         stageFilterOptions,
         regionFilterOptions,
         countryFilterOptions,
+        successFactorFilterOptions,
     ] = React.useMemo(() => [
         filterChoices?.type
             ?.map((v) => ({ key: v.name, label: v.label })),
@@ -428,6 +442,7 @@ function GoodPractices(props: Props) {
         filterChoices?.regions
             ?.map((v) => ({ key: v.name, label: v.label })),
         filterChoices?.countries,
+        filterChoices?.successFactor,
     ], [filterChoices]);
 
     const [activePage, setActivePage] = useState<number>(1);
@@ -441,7 +456,8 @@ function GoodPractices(props: Props) {
             || goodPracticeCountry.length > 0
             || goodPracticeType.length > 0
             || goodPracticeArea.length > 0
-            || goodpracticeStage.length > 0
+            || goodPracticeStage.length > 0
+            || goodPracticeSuccessFactor.length > 0
             || goodPracticeRegion.length > 0
             || goodPracticeDrive.length > 0
             || yearRange[0] !== minYear
@@ -451,7 +467,8 @@ function GoodPractices(props: Props) {
             countries: goodPracticeCountry,
             types: goodPracticeType,
             focusArea: goodPracticeArea,
-            stages: goodpracticeStage,
+            stages: goodPracticeStage,
+            successFactor: goodPracticeSuccessFactor,
             regions: goodPracticeRegion,
             driversOfDisplacements: goodPracticeDrive,
             startYear: yearRange[0],
@@ -465,10 +482,11 @@ function GoodPractices(props: Props) {
         searchText,
         goodPracticeCountry,
         goodPracticeType,
-        goodpracticeStage,
+        goodPracticeStage,
         goodPracticeRegion,
         goodPracticeDrive,
         goodPracticeArea,
+        goodPracticeSuccessFactor,
         yearRange,
         minYear,
         maxYear,
@@ -680,7 +698,7 @@ function GoodPractices(props: Props) {
                     placeholder={strings.stageLabel}
                     label={strings.stageLabel}
                     name="stage"
-                    value={goodpracticeStage}
+                    value={goodPracticeStage}
                     options={stageFilterOptions}
                     keySelector={keySelector}
                     labelSelector={labelSelector}
@@ -688,6 +706,20 @@ function GoodPractices(props: Props) {
                     inputSectionClassName={styles.inputSection}
                 />
             )}
+            {successFactorFilterOptions && successFactorFilterOptions.length > 0 && (
+                <MultiSelectInput
+                    labelContainerClassName={styles.label}
+                    placeholder={strings.successFactorLabel}
+                    label={strings.successFactorLabel}
+                    name="successFactor"
+                    value={goodPracticeSuccessFactor}
+                    options={successFactorFilterOptions}
+                    keySelector={idSelector}
+                    labelSelector={nameSelector}
+                    onChange={setGoodPracticeSuccessFactor}
+                    inputSectionClassName={styles.inputSection}
+                />
+            )}
         </>
     );
 
@@ -1015,16 +1047,26 @@ function GoodPractices(props: Props) {
                                         onChange={setGoodPracticeArea}
                                     />
                                 )}
-                                {goodpracticeStage.length > 0 && (
+                                {goodPracticeStage.length > 0 && (
                                     <DismissableListOutput
                                         label={strings.stageLabel}
-                                        value={goodpracticeStage}
+                                        value={goodPracticeStage}
                                         keySelector={keySelector}
                                         labelSelector={labelSelector}
                                         options={stageFilterOptions}
                                         onChange={setGoodPracticeStage}
                                     />
                                 )}
+                                {goodPracticeSuccessFactor.length > 0 && (
+                                    <DismissableListOutput
+                                        label={strings.successFactorLabel}
+                                        value={goodPracticeSuccessFactor}
+                                        keySelector={idSelector}
+                                        labelSelector={nameSelector}
+                                        options={successFactorFilterOptions}
+                                        onChange={setGoodPracticeSuccessFactor}
+                                    />
+                                )}
                                 <div className={styles.clearAllContainer}>
                                     <Button
                                         name={undefined}