diff --git a/src/component/HelpFulArticle.js b/src/component/HelpFulArticle.js
index 917a7438e..c6faf220c 100644
--- a/src/component/HelpFulArticle.js
+++ b/src/component/HelpFulArticle.js
@@ -1,197 +1,222 @@
-import React from 'react';
-import { useEffect, useRef, useState } from "react";
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import ThemedImage from '@theme/ThemedImage'
-
+import React from "react";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ThemedImage from "@theme/ThemedImage";
 export default function HelpFulArticle() {
-    const [feedback, SetFeedback] = useState();
-    const [feedbackSubmitted, SetFeedbackSubmitted] = useState(false);
-    const [isContactFormSubmitted, setIsContactFormSubmitted] = useState(false);
-
-    const feedbackSubmit = () => {
-        var myHeaders = new Headers();
-        myHeaders.append("Content-Type", "application/json");
-
-        var raw = JSON.stringify({
-            "url": window.location.href,
-        });
-
-        var requestOptions = {
-            method: 'POST',
-            headers: myHeaders,
-            body: raw,
-            redirect: 'follow'
+    const thumbsUpLight = useBaseUrl("/img/thumbsUp_light.svg");
+    const thumbsUpDark = useBaseUrl("/img/thumbsUp_dark.svg");
+    const thumbsDownLight = useBaseUrl("/img/thumbsDown_light.svg");
+    const thumbsDownDark = useBaseUrl("/img/thumbsDown_dark.svg");
+    return (
+        <HelpFulArticleClass 
+            thumbsUpLight={thumbsUpLight}
+            thumbsUpDark={thumbsUpDark}
+            thumbsDownLight={thumbsDownLight}
+            thumbsDownDark={thumbsDownDark}
+        />
+    );
+}
+class HelpFulArticleClass extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            feedback: null,
+            feedbackSubmitted: false,
+            isContactFormSubmitted: false,
+            selectedOption: "",
+            message: "",
+            formMsgError: false,
+            feedbackOptionErr: false
         };
-
-        fetch(`https://test-backend.lambdatest.com/api/website_feed/thumbs_up`, requestOptions)
-            .then(response => response.text())
-            .then(result => console.log(result))
-            .catch(error => console.log('error', error));
-        SetFeedback("")
-        SetFeedbackSubmitted(true)
+        
+        this.handleThumbsUp = this.handleThumbsUp.bind(this);
+        this.handleThumbsDown = this.handleThumbsDown.bind(this);
+        this.handleOptionChange = this.handleOptionChange.bind(this);
+        this.handleMessageChange = this.handleMessageChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.getCookie = this.getCookie.bind(this);
     }
-
-
-    const handleOptionChange = (e) => {
-        if(e.target.value) {
-            setFeedbackOptionErr(false);
-        }
-        if(e.target.value === 'other') {
-            setOtherSelected(true);
-        } else {
-            setOtherSelected(false);
-            setFormMsgError(false);
-        }
+    
+    getCookie(name) {
+        const cookies = document.cookie.split("; ");
+        const cookie = cookies.find((c) => c.startsWith(name + "="));
+        return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
     }
-
-    let form = useRef();
-    const [formMsgError, setFormMsgError] = useState(false);
-    const [feedbackOptionErr, setFeedbackOptionErr] = useState(false);
-    const [otherSelected, setOtherSelected] = useState(false);
-    const getContactFormResponse = (res) => {
-        setIsContactFormSubmitted(res);
+    
+    handleThumbsUp() {
+        
+        fetch("https://test-backend.lambdatest.com/api/website_feed/thumbs_up", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ url: window.location.href }),
+        })
+            .then(() => this.setState({ feedbackSubmitted: true }))
+            .catch((error) => console.error("Error:", error));
+    }
+    
+    handleThumbsDown() {
+        this.setState({ feedback: "Negative" });
+    }
+    
+    handleOptionChange(e) {
+        this.setState({
+            selectedOption: e.target.value,
+            feedbackOptionErr: false,
+            formMsgError: e.target.value !== "other" ? false : this.state.formMsgError
+        });
+    }
+    
+    handleMessageChange(e) {
+        this.setState({
+            message: e.target.value,
+            formMsgError: e.target.value.trim() ? false : this.state.formMsgError
+        });
     }
-    const handleSubmit = (e) => {
+    
+    handleSubmit(e) {
         e.preventDefault();
-        let utmJsonTemp = getCookie("utm")
-        const { message, feedback_option } = form.current;
-        console.log("feedback_option.value", feedback_option.value)
-        let feedBackString = "";
-        if(feedback_option.value == '' || feedback_option.value == null) {
-            setFeedbackOptionErr(true);
-            return
+        
+        if (!this.state.selectedOption) {
+            this.setState({ feedbackOptionErr: true });
+            return;
         }
-        feedBackString = feedback_option.value;
-        if(feedback_option.value === 'other') {
-            setOtherSelected(true);
-            if(message.value == '' || message.value == null) {
-                setFormMsgError(true);
-                return
-            } else {
-                setFormMsgError(false);
-                feedBackString = message.value;
-            }
+        
+        if (this.state.selectedOption === "other" && !this.state.message.trim()) {
+            this.setState({ formMsgError: true });
+            return;
         }
         
-
-
-        var myHeaders = new Headers();
-        myHeaders.append("Content-Type", "application/json");
-
-        var raw = JSON.stringify({
-            feedback: feedBackString,
-            url: window.location.href,
-            utm: utmJsonTemp
-        });
-
-        var requestOptions = {
-            method: 'POST',
-            headers: myHeaders,
-            body: raw,
-            redirect: 'follow'
-        };
-
-        fetch(`https://test-backend.lambdatest.com/api/website_feed/thumbs_down`, requestOptions)
-            .then(response => response.text())
-            .then(result => {
-                getContactFormResponse(true);
-            })
-            .catch(error => console.log('error', error));
-
-    };
-    useEffect(() => {
-        // console.log('isContactFormSubmitted', isContactFormSubmitted)
-    }, [isContactFormSubmitted])
-
-    return (
+        fetch("https://test-backend.lambdatest.com/api/website_feed/thumbs_down", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                feedback: this.state.selectedOption === "other" ? this.state.message : this.state.selectedOption,
+                url: window.location.href,
+                utm: this.getCookie("utm"),
+            }),
+        })
+            .then(() => this.setState({ isContactFormSubmitted: true }))
+            .catch((error) => console.error("Error:", error));
+    }
+    
+    render() {
+        const { 
+            feedback, 
+            feedbackSubmitted, 
+            isContactFormSubmitted, 
+            selectedOption,
+            message, 
+            formMsgError, 
+            feedbackOptionErr 
+        } = this.state;
+        
+        const {
+            thumbsUpLight,
+            thumbsUpDark,
+            thumbsDownLight,
+            thumbsDownDark
+        } = this.props;
+        
+        const otherSelected = selectedOption === "other";
+        
+        return (
             <div className="feedback__box">
-                
-                <div className='support_container'>
-                
+                <div className="support_container">
                     <div>
-                        <h3 className='feedback__box__title feedback__box__title_helpful'>Do you find this helpful?</h3>
-                    {!feedbackSubmitted && !isContactFormSubmitted &&
-                       <div className='feedback__box__icons'>
-                            <button role="button"  tabIndex="0" type="button" onClick={() => { feedbackSubmit() }} title='Document Feedback' aria-label="Document Feedback" >
-
-
+                    <h3 className="feedback__box__title feedback__box__title_helpful">
+                        Do you find this helpful?
+                    </h3>
+                    {!feedbackSubmitted && !isContactFormSubmitted ? (
+                        <div className="feedback__box__icons">
+                            <button onClick={this.handleThumbsUp} title="Thumbs Up" type="button">
                                 <ThemedImage
                                     className="no-zoom"
-                                    alt="Docusaurus themed image"
+                                    alt="Thumbs Up"
                                     sources={{
-                                        light: useBaseUrl('/img/thumbsUp_light.svg'),
-                                        dark: useBaseUrl('/img/thumbsUp_dark.svg'),
+                                        light: thumbsUpLight,
+                                        dark: thumbsUpDark,
                                     }}
                                 />
-                                
-                                
-
                             </button>
-                            <button role="button" tabIndex="0" type="button" onClick={() => { SetFeedback("Negative") }} title='Document Feedback' aria-label="Document Feedback">
+                            <button onClick={this.handleThumbsDown} title="Thumbs Down" type="button">
                                 <ThemedImage
                                     className="no-zoom"
-                                    alt="Docusaurus themed image"
+                                    alt="Thumbs Down"
                                     sources={{
-                                        light: useBaseUrl('/img/thumbsDown_light.svg'),
-                                        dark: useBaseUrl('/img/thumbsDown_dark.svg'),
+                                        light: thumbsDownLight,
+                                        dark: thumbsDownDark,
                                     }}
                                 />
                             </button>
                         </div>
-                    }
-                    {feedbackSubmitted && <div className='feedback__box__thanks-title'>
-                        <h3>Thanks for your feedback!</h3>
-                    </div>}
-                    {isContactFormSubmitted && <div className='feedback__box__thanks-title'>
-                        <h3>Thanks for your feedback!</h3>
-                    </div>}
-                    </div>
-
-                    <div className="social_button">
+                    ) : (
+                        <div className="feedback__box__thanks-title">
+                            <h3>Thanks for your feedback!</h3>
+                        </div>
+                    )}
+                </div>
+                               <div className="social_button">
                         <h3 className='feedback__box__title feedback__box__title_helpful'>Still need help?</h3>
                         <span onClick={() => window.openLTChatWidget()} className="chat_btn"><img loading="lazy" src="/support/img/Chat.svg" alt=" " role="presentation" title='Chat with Us' className='' width="16" height="16" />Chat with Us</span>
                         <a role="button" tabIndex="0" href="https://community.lambdatest.com/" target="_blank" className="chat_btn"><img loading="lazy" src="/support/img/community.svg" alt=" " role="presentation" title='Chat with Us' className='' width="16" height="16" />Ask the Community</a>
                         {/* <a href="https://accounts.lambdatest.com/register" target="_blank"  className="btnlink">Start Free Testing</a> */}
                     </div>
-                </div>
-
-            {feedback == "Negative" && !isContactFormSubmitted &&
-                        <form ref={form} onSubmit={handleSubmit} className="feedback__box__form">
-                            <p className='feedback__box__form__title'>We're sorry to hear that. Please share your feedback with us.</p>
-                            <ol className="feedback__box__form__radios">
-                                <li className='feedback__box__form__radio_div'>
-                                    <input type="radio" name="feedback_option" value={"The information that I need is partially explained"} onChange={handleOptionChange} />
-                                    <span>The information that I need is partially explained</span>
-                                </li>
-                                <li className='feedback__box__form__radio_div'>
-                                    <input type="radio" name="feedback_option" value={"This page does not contain what I am looking for."} onChange={handleOptionChange}  />
-                                    <span>This page does not contain what I am looking for.</span>
-                                </li>
-                                <li className='feedback__box__form__radio_div'>
-                                    <input type="radio" name="feedback_option" value={"This content & code samples are not accurate and outdated"} onChange={handleOptionChange}  />
-                                    <span>This content & code samples are not accurate and outdated</span>
+                    </div> 
+
+                {feedback === "Negative" && !isContactFormSubmitted && (
+                    <form onSubmit={this.handleSubmit} className="feedback__box__form">
+                        <p className="feedback__box__form__title">
+                            We're sorry to hear that. Please share your feedback with us.
+                        </p>
+                        <ol className="feedback__box__form__radios">
+                            {[
+                                "The information that I need is partially explained",
+                                "This page does not contain what I am looking for.",
+                                "This content & code samples are not accurate and outdated",
+                                "The information that I need is not easy to understand",
+                            ].map((option, index) => (
+                                <li key={index} className="feedback__box__form__radio_div">
+                                    <input 
+                                        type="radio" 
+                                        name="feedback_option" 
+                                        id={`option_${index}`}
+                                        value={option} 
+                                        checked={selectedOption === option}
+                                        onChange={this.handleOptionChange} 
+                                    />
+                                    <span>{option}</span>
                                 </li>
-                                <li className='feedback__box__form__radio_div'>
-                                    <input type="radio" name="feedback_option" value={"The information that I need is not easy to understand"} onChange={handleOptionChange}  />
-                                    <span>The information that I need is not easy to understand</span>
-                                </li>
-                                <li className='feedback__box__form__radio_div'>
-                                    <input type="radio" name="feedback_option" value={"other"} onChange={handleOptionChange}  />
-                                    <span>Other (please tell us more below)</span>
-                                </li>
-                            </ol>
-                            {feedbackOptionErr && <p className='feedback__box__form__red_alert'>Please select an option.</p>}
-                            <div>
-                                {otherSelected && <textarea id="messageid" name="message"  placeholder="What were you looking" className='feedback__form__control'></textarea>}
-                                {otherSelected && formMsgError && <p className='feedback__box__form__red_alert'>Please write your feedback</p>}
-                                <button type="submit" className='feedback__form__submit__btn'>
-                                    Submit
-                                </button>
-                            </div>
-                        </form>
-                    }
-                
-                
+                            ))}
+                            <li className="feedback__box__form__radio_div">
+                                <input 
+                                    type="radio" 
+                                    name="feedback_option" 
+                                    id="option_other"
+                                    value="other" 
+                                    checked={selectedOption === "other"}
+                                    onChange={this.handleOptionChange} 
+                                />
+                                <span>Other (please tell us more below)</span>
+                            </li>
+                        </ol>
+                        {feedbackOptionErr && <p className="feedback__box__form__red_alert">Please select an option.</p>}
+                        {otherSelected && (
+                            <>
+                                <textarea 
+                                    name="message" 
+                                    value={message}
+                                    onChange={this.handleMessageChange}
+                                    placeholder="What were you looking for?" 
+                                    className="feedback__form__control"
+                                ></textarea>
+                                {formMsgError && <p className="feedback__box__form__red_alert">Please write your feedback</p>}
+                            </>
+                        )}
+                        <button type="submit" className="feedback__form__submit__btn">
+                            Submit
+                        </button>
+                    </form>
+                )}
             </div>
-    );
-}
+        );
+    }
+}
\ No newline at end of file