diff --git a/src/Localization/en/Demo.json b/src/Localization/en/Demo.json
new file mode 100644
index 000000000..f0402bd85
--- /dev/null
+++ b/src/Localization/en/Demo.json
@@ -0,0 +1,16 @@
+{
+    "PreviousCommentsLabel": "Previous Comments",
+    "RatingLabel": "Rating",
+    "ShowCommentsLabel": "Have more Comments?",
+    "ShowCommentsTrueLabel": "Yes",
+    "ShowCommentsFalseLabel": "No",
+    "CommentsLabel": "Comments",
+    "CommentsPlaceholder": "Leave your comments here",
+    "IntializeMesssage": "Feedback is being submitted",
+    "IntializeTitle": "Feedback Submission",
+    "SuccessMesssage": "Feedback submitted successfully",
+    "SuccessTitle": "Feedback Submission",
+    "FailureMesssage": "Feedback submission failed",
+    "FailureTitle": "Feedback Submission",
+    "UpdateInProgressMessage": "Feedback submission in progress"
+}
\ No newline at end of file
diff --git a/src/SelfServe/Demo/Demo.rp.ts b/src/SelfServe/Demo/Demo.rp.ts
new file mode 100644
index 000000000..d645f50f1
--- /dev/null
+++ b/src/SelfServe/Demo/Demo.rp.ts
@@ -0,0 +1,31 @@
+import { SessionStorageUtility } from "../../Shared/StorageUtility";
+import { RefreshResult } from "../SelfServeTypes";
+import { Feedback } from "./Demo.types";
+
+export const update = async (feedback: Feedback): Promise<void> => {
+  SessionStorageUtility.setEntry("rating", feedback.rating?.toString());
+  SessionStorageUtility.setEntry("comments", feedback.comments);
+};
+
+export const initialize = async (): Promise<Feedback> => {
+  let rating = parseInt(SessionStorageUtility.getEntry("rating"));
+  rating = isNaN(rating) ? undefined : rating;
+  const comments = SessionStorageUtility.getEntry("comments");
+  return {
+    rating,
+    comments,
+  };
+};
+
+export const refresh = async (): Promise<RefreshResult> => {
+  const refreshCountString = SessionStorageUtility.getEntry("refreshCount");
+  const refreshCount = refreshCountString ? parseInt(refreshCountString) : 0;
+
+  const progressToBeSent = refreshCount % 2 === 0 ? false : true;
+  SessionStorageUtility.setEntry("refreshCount", (refreshCount + 1).toString());
+
+  return {
+    isUpdateInProgress: progressToBeSent,
+    updateInProgressMessageTKey: "UpdateInProgressMessage",
+  };
+};
diff --git a/src/SelfServe/Demo/Demo.tsx b/src/SelfServe/Demo/Demo.tsx
new file mode 100644
index 000000000..b76abcba4
--- /dev/null
+++ b/src/SelfServe/Demo/Demo.tsx
@@ -0,0 +1,105 @@
+import { IsDisplayable, OnChange, RefreshOptions, Values } from "../Decorators";
+import {
+  Description,
+  DescriptionType,
+  InputType,
+  NumberUiType,
+  OnSaveResult,
+  RefreshResult,
+  SelfServeBaseClass,
+  SmartUiInput,
+} from "../SelfServeTypes";
+import { initialize, refresh, update } from "./Demo.rp";
+
+const onShowCommentsChanged = (
+  newValue: InputType,
+  currentValues: Map<string, SmartUiInput>
+): Map<string, SmartUiInput> => {
+  const comments = currentValues.get("comments");
+  const showComments = currentValues.get("showComments");
+  showComments.value = newValue;
+
+  // show the comments element only when toggle is true, hide comments when toggle is false
+  comments.hidden = !newValue;
+
+  currentValues.set("comments", comments);
+  currentValues.set("showComments", showComments);
+  return currentValues;
+};
+
+@IsDisplayable()
+@RefreshOptions({ retryIntervalInMs: 1000 })
+export default class Demo extends SelfServeBaseClass {
+  public initialize = async (): Promise<Map<string, SmartUiInput>> => {
+    const initialFeedback = await initialize();
+    const resultMap = new Map<string, SmartUiInput>();
+    const previousComments = initialFeedback.comments
+      ? { value: { textTKey: initialFeedback.comments, type: DescriptionType.Text } as Description }
+      : undefined;
+    resultMap.set("previousComments", previousComments);
+    resultMap.set("rating", { value: initialFeedback.rating });
+    resultMap.set("showComments", { value: false });
+    resultMap.set("comments", { value: "", hidden: true });
+    return resultMap;
+  };
+
+  public onSave = async (currentValues: Map<string, SmartUiInput>): Promise<OnSaveResult> => {
+    const rating = currentValues.get("rating")?.value as number;
+    const currentComments = currentValues.get("comments")?.value as string;
+    const comments = currentComments
+      ? currentComments
+      : (currentValues.get("previousComments")?.value as Description).textTKey;
+
+    await update({ rating, comments });
+    return {
+      operationStatusUrl: undefined,
+      portalNotification: {
+        initialize: {
+          messageTKey: "IntializeMesssage",
+          titleTKey: "IntializeTitle",
+        },
+        success: {
+          messageTKey: "SuccessMesssage",
+          titleTKey: "SuccessTitle",
+        },
+        failure: {
+          messageTKey: "FailureMesssage",
+          titleTKey: "FailureTitle",
+        },
+      },
+    };
+  };
+
+  public onRefresh = async (): Promise<RefreshResult> => {
+    return refresh();
+  };
+
+  @Values({
+    labelTKey: "PreviousCommentsLabel",
+    isDynamicDescription: true,
+  })
+  previousComments: string;
+
+  @Values({
+    labelTKey: "RatingLabel",
+    min: 0,
+    max: 5,
+    step: 1,
+    uiType: NumberUiType.Slider,
+  })
+  rating: number;
+
+  @OnChange(onShowCommentsChanged)
+  @Values({
+    labelTKey: "ShowCommentsLabel",
+    trueLabelTKey: "ShowCommentsTrueLabel",
+    falseLabelTKey: "ShowCommentsFalseLabel",
+  })
+  showComments: boolean;
+
+  @Values({
+    labelTKey: "CommentsLabel",
+    placeholderTKey: "CommentsPlaceholder",
+  })
+  comments: string;
+}
diff --git a/src/SelfServe/Demo/Demo.types.ts b/src/SelfServe/Demo/Demo.types.ts
new file mode 100644
index 000000000..49359dc5e
--- /dev/null
+++ b/src/SelfServe/Demo/Demo.types.ts
@@ -0,0 +1,4 @@
+export interface Feedback {
+  rating: number;
+  comments: string;
+}
diff --git a/src/SelfServe/SelfServe.tsx b/src/SelfServe/SelfServe.tsx
index 50f6eecf8..fcfa9ee6c 100644
--- a/src/SelfServe/SelfServe.tsx
+++ b/src/SelfServe/SelfServe.tsx
@@ -50,6 +50,12 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
       await loadTranslations(sqlX.constructor.name);
       return sqlX.toSelfServeDescriptor();
     }
+    case SelfServeType.demo: {
+      const Demo = await import(/* webpackChunkName: "Demo" */ "./Demo/Demo");
+      const demo = new Demo.default();
+      await loadTranslations(demo.constructor.name);
+      return demo.toSelfServeDescriptor();
+    }
     default:
       return undefined;
   }
diff --git a/src/SelfServe/SelfServeUtils.tsx b/src/SelfServe/SelfServeUtils.tsx
index 3c34bc982..8afe181e1 100644
--- a/src/SelfServe/SelfServeUtils.tsx
+++ b/src/SelfServe/SelfServeUtils.tsx
@@ -31,6 +31,7 @@ export enum SelfServeType {
   // Add your self serve types here
   example = "example",
   sqlx = "sqlx",
+  demo = "demo",
 }
 
 /**