diff --git a/README.md b/README.md
index 73f02927..c6f5e807 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,18 @@ format-fix:
 	npm run format:write
 ```
 
+To test the sistent component locally, you can run
+
+```
+build:
+  npm run build
+```
+
+```
+attach sistent to your project:
+	npm install [path to sistent repo ]
+```
+
 > [!NOTE]
 > Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability.
 
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
index a6256749..b8cc173a 100644
--- a/src/custom/CustomTooltip/customTooltip.tsx
+++ b/src/custom/CustomTooltip/customTooltip.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { CHARCOAL, WHITE } from '../../theme';
 
 type CustomTooltipProps = {
-  title: string | React.ReactNode;
+  title: string | React.ReactNode | JSX.Element;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   children: React.ReactNode;
 } & Omit<TooltipProps, 'title' | 'onClick'>;
diff --git a/src/custom/Feedback/FeedbackButton.tsx b/src/custom/Feedback/FeedbackButton.tsx
index b83867cb..e7f097f8 100644
--- a/src/custom/Feedback/FeedbackButton.tsx
+++ b/src/custom/Feedback/FeedbackButton.tsx
@@ -100,12 +100,20 @@ interface FeedbackComponentProps {
   onSubmit: (data: { label: string; message: string }) => void;
   containerStyles?: CSSProperties;
   feedbackOptionStyles?: CSSProperties;
+  renderPosition:
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'bottom-left'
+    | 'right-top'
+    | 'right-middle'
+    | 'right-bottom';
 }
 
 const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
   onSubmit,
   containerStyles,
-  feedbackOptionStyles
+  feedbackOptionStyles,
+  renderPosition
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [submitted, setSubmitted] = useState<boolean>(false);
@@ -139,98 +147,101 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
   };
 
   return (
-    <Container isOpen={isOpen} style={containerStyles}>
-      {submitted ? (
-        <FeedbackMessage isOpen={isOpen}>
-          <SuccessIcon width={'32'} height={'32'} />
-          We got your concern. Thank you!
-        </FeedbackMessage>
-      ) : (
-        <>
-          <FeedbackButton onClick={handleFeedback}>Feedback</FeedbackButton>
-
-          <ModalCard
-            onClose={() => {}}
-            open={true}
-            closeComponent={
-              <CloseButton onClick={() => setIsOpen(false)}>
-                <CloseIcon width={'30'} height={'30'} fill={CULTURED} />
-              </CloseButton>
-            }
-            actions={
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center'
-                }}
-              >
-                <ActionWrapper>
-                  <StyledCheckbox checked={isChecked} onChange={handleCheckboxChange} />
-                  <Typography style={{ color: 'white', fontSize: '12px', height: '15px' }}>
-                    We may email you for more information or updates
-                  </Typography>
-                </ActionWrapper>
-                <FeedbackSubmitButton
-                  type="submit"
-                  disabled={!(messageValue && isChecked)}
-                  isOpen={!(messageValue && isChecked)}
-                  onClick={handleSubmit}
+    <>
+      <FeedbackButton onClick={handleFeedback} renderPosition={renderPosition}>
+        Feedback
+      </FeedbackButton>
+      <Container isOpen={isOpen} style={containerStyles} renderPosition={renderPosition}>
+        {submitted ? (
+          <FeedbackMessage isOpen={isOpen}>
+            <SuccessIcon width={'32'} height={'32'} />
+            We got your concern. Thank you!
+          </FeedbackMessage>
+        ) : (
+          <>
+            <ModalCard
+              onClose={() => {}}
+              open={true}
+              closeComponent={
+                <CloseButton onClick={() => setIsOpen(false)}>
+                  <CloseIcon width={'30'} height={'30'} fill={CULTURED} />
+                </CloseButton>
+              }
+              actions={
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center'
+                  }}
                 >
-                  Send
-                </FeedbackSubmitButton>
-              </div>
-            }
-            leftHeaderIcon={<FeedbackIcon />}
-            title="Feedback"
-            helpArea={
-              <CustomTooltip placement="top" title={tooltipContent} arrow>
-                <HelperWrapper>
-                  <QuestionIcon width={'30'} height={'30'} />
-                </HelperWrapper>
-              </CustomTooltip>
-            }
-            helpText={'Help'}
-            content={
-              <FeedbackForm>
-                <FeedbackOptions>
-                  {feedbackData?.map((item) => (
-                    <FeedbackOptionButton
-                      key={item.label}
-                      style={feedbackOptionStyles}
-                      type="button"
-                      onClick={() => {
-                        setCategory(item);
-                      }}
-                      isOpen={category?.label === item.label}
-                    >
-                      <FeedbackMiniIcon>{item.icon}</FeedbackMiniIcon>
-                      <Typography>{item.label}</Typography>
-                    </FeedbackOptionButton>
-                  ))}
-                </FeedbackOptions>
-                {category?.isTextInput ? (
-                  <FeedbackTextArea>
-                    <StyledTextArea
-                      value={messageValue || ''}
-                      onChange={(e) => {
-                        setMessageValue(e.target.value);
-                      }}
-                      ref={feedbackTextRef}
-                      required
-                      placeholder={category.placeholder}
-                      rows={5}
-                      cols={30}
-                    />
-                  </FeedbackTextArea>
-                ) : (
-                  <InnerComponentWrapper>{category?.innerComponent}</InnerComponentWrapper>
-                )}
-              </FeedbackForm>
-            }
-          ></ModalCard>
-        </>
-      )}
-    </Container>
+                  <ActionWrapper>
+                    <StyledCheckbox checked={isChecked} onChange={handleCheckboxChange} />
+                    <Typography style={{ color: 'white', fontSize: '12px', height: '15px' }}>
+                      We may email you for more information or updates
+                    </Typography>
+                  </ActionWrapper>
+                  <FeedbackSubmitButton
+                    type="submit"
+                    disabled={!(messageValue && isChecked)}
+                    isOpen={!(messageValue && isChecked)}
+                    onClick={handleSubmit}
+                  >
+                    Send
+                  </FeedbackSubmitButton>
+                </div>
+              }
+              leftHeaderIcon={<FeedbackIcon />}
+              title="Feedback"
+              helpArea={
+                <CustomTooltip placement="top" title={tooltipContent} arrow>
+                  <HelperWrapper>
+                    <QuestionIcon width={'30'} height={'30'} />
+                  </HelperWrapper>
+                </CustomTooltip>
+              }
+              helpText={'Help'}
+              content={
+                <FeedbackForm>
+                  <FeedbackOptions>
+                    {feedbackData?.map((item) => (
+                      <FeedbackOptionButton
+                        key={item.label}
+                        style={feedbackOptionStyles}
+                        type="button"
+                        onClick={() => {
+                          setCategory(item);
+                        }}
+                        isOpen={category?.label === item.label}
+                      >
+                        <FeedbackMiniIcon>{item.icon}</FeedbackMiniIcon>
+                        <Typography>{item.label}</Typography>
+                      </FeedbackOptionButton>
+                    ))}
+                  </FeedbackOptions>
+                  {category?.isTextInput ? (
+                    <FeedbackTextArea>
+                      <StyledTextArea
+                        value={messageValue || ''}
+                        onChange={(e) => {
+                          setMessageValue(e.target.value);
+                        }}
+                        ref={feedbackTextRef}
+                        required
+                        placeholder={category.placeholder}
+                        rows={5}
+                        cols={30}
+                      />
+                    </FeedbackTextArea>
+                  ) : (
+                    <InnerComponentWrapper>{category?.innerComponent}</InnerComponentWrapper>
+                  )}
+                </FeedbackForm>
+              }
+            ></ModalCard>
+          </>
+        )}
+      </Container>
+    </>
   );
 };
 
diff --git a/src/custom/Feedback/style.tsx b/src/custom/Feedback/style.tsx
index 36cd8edf..f7bb81b7 100644
--- a/src/custom/Feedback/style.tsx
+++ b/src/custom/Feedback/style.tsx
@@ -24,16 +24,95 @@ export const CloseButton = styled('div')({
   alignItems: 'center',
   fill: CULTURED
 });
-
-interface ContainerProps {
+interface SubmitProp {
   isOpen: boolean;
 }
+interface RenderPositionType {
+  renderPosition:
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'bottom-left'
+    | 'right-top'
+    | 'right-middle'
+    | 'right-bottom';
+}
+interface ContainerProps extends RenderPositionType {
+  isOpen: boolean;
+}
+const containerPositionMap: Record<
+  'bottom-center' | 'bottom-right' | 'bottom-left' | 'right-top' | 'right-middle' | 'right-bottom',
+  { open: React.CSSProperties; closed: React.CSSProperties }
+> = {
+  'bottom-center': {
+    open: {
+      bottom: '0px',
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    closed: {
+      bottom: '-42%',
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }
+  },
+  'bottom-right': {
+    open: {
+      bottom: '0px',
+      right: '10px'
+    },
+    closed: {
+      bottom: '-42%',
+      right: '10px'
+    }
+  },
+  'bottom-left': {
+    open: {
+      bottom: '0px',
+      left: '10px'
+    },
+    closed: {
+      bottom: '-42%',
+      left: '10px'
+    }
+  },
+  'right-top': {
+    open: {
+      top: '0px',
+      right: '0px'
+    },
+    closed: {
+      top: '0px',
+      right: '-42%'
+    }
+  },
+  'right-middle': {
+    open: {
+      top: '50%',
+      right: '0px',
+      transform: 'translateY(-50%)'
+    },
+    closed: {
+      top: '50%',
+      right: '-42%',
+      transform: 'translateY(-50%)'
+    }
+  },
+  'right-bottom': {
+    open: {
+      bottom: '0px',
+      right: '0px'
+    },
+    closed: {
+      bottom: '0px',
+      right: '-42%'
+    }
+  }
+};
 
-export const Container = styled(Box)<ContainerProps>(({ isOpen }) => ({
+export const Container = styled(Box)<ContainerProps>(({ isOpen, renderPosition }) => ({
   position: 'fixed',
-  bottom: isOpen ? '0px' : '-487px',
-  right: '20px',
-  transition: 'bottom 0.5s ease'
+  transition: 'all 0.5s ease',
+  ...containerPositionMap[renderPosition][isOpen ? 'open' : 'closed']
 }));
 
 export const FeedbackTextArea = styled('div')({
@@ -59,7 +138,7 @@ export const FeedbackMiniIcon = styled('div')({
   height: '24px'
 });
 
-export const FeedbackSubmitButton = styled(Button)<ContainerProps>(({ isOpen }) => ({
+export const FeedbackSubmitButton = styled(Button)<SubmitProp>(({ isOpen }) => ({
   color: 'white',
   width: '4.313rem',
   height: '2.25rem',
@@ -68,7 +147,7 @@ export const FeedbackSubmitButton = styled(Button)<ContainerProps>(({ isOpen })
   backgroundColor: isOpen ? buttonDisabled.main : KEPPEL
 }));
 
-export const FeedbackButton = styled(Button)(({ theme }) => ({
+export const FeedbackButton = styled(Button)<RenderPositionType>(({ theme, renderPosition }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? BUTTON_MODAL_DARK : BUTTON_MODAL,
   color: CULTURED,
   borderRadius: '5px',
@@ -76,12 +155,46 @@ export const FeedbackButton = styled(Button)(({ theme }) => ({
   fontSize: '16px',
   transition: 'bottom 0.5s ease',
   position: 'fixed',
-  bottom: '-10px',
+  ...positionMap[renderPosition],
   '&:hover': {
     backgroundColor: theme.palette.mode === 'dark' ? BLACK : '#213A45'
   }
 }));
 
+const positionMap: Record<
+  'bottom-center' | 'bottom-right' | 'bottom-left' | 'right-top' | 'right-middle' | 'right-bottom',
+  React.CSSProperties
+> = {
+  'bottom-center': {
+    bottom: '-10px',
+    left: '50%',
+    transform: 'translateX(-50%)'
+  },
+  'bottom-right': {
+    bottom: '-10px',
+    right: '10px'
+  },
+  'bottom-left': {
+    bottom: '-10px',
+    left: '10px'
+  },
+  'right-top': {
+    top: '8%',
+    right: '-4%',
+    transform: 'rotate(-90deg)'
+  },
+  'right-middle': {
+    top: '50%',
+    right: '-6%',
+    transform: 'rotate(-90deg) translateY(-50%)'
+  },
+  'right-bottom': {
+    bottom: '5%',
+    right: '-4%',
+    transform: 'rotate(-90deg)'
+  }
+};
+
 export const FeedbackForm = styled('form')(({ theme }) => ({
   display: 'block',
   right: '0',