diff --git a/app/routes/help-center.tsx b/app/routes/help-center.tsx
index 51d9f813..acc0277e 100644
--- a/app/routes/help-center.tsx
+++ b/app/routes/help-center.tsx
@@ -1,10 +1,8 @@
 import type { MetaFunction } from "@remix-run/node";
-import { redirect } from "@remix-run/react";
+import { useNavigate } from "@remix-run/react";
 import React, { useEffect, useRef, useState } from "react";
 
 import { Button } from "~/components/ui/button";
-import Footer from "~/components/ui/footer";
-import Header from "~/components/ui/header";
 
 export const meta: MetaFunction = () => {
   return [
@@ -75,6 +73,7 @@ export default function HelpCenter() {
   }>({});
   const [showDropdown, setShowDropdown] = useState(false);
   const dropdownReference = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setQuery(event.target.value);
@@ -149,23 +148,20 @@ export default function HelpCenter() {
   }, []);
 
   return (
-    <div className="max-w-[1440px] bg-[#FAFAFA]">
-      {/* ======> import Header component <====== */}
-      <Header />
-
-      <section className="w-full bg-[#F973161A] p-6 text-center md:px-0 md:py-[100px]">
-        <h1 className="text-xl font-medium leading-[24.2px] text-[#0A0A0A] md:text-[#525252]">
+    <div className="max-w-[1440px] bg-background">
+      <section className="w-full bg-[#F9731617] p-6 text-center md:px-0 md:py-[100px]">
+        <h1 className="text-xl font-medium leading-[24.2px] text-neutral-2 md:text-neutral-1">
           Help Center
         </h1>
-        <h2 className="my-5 text-[32px] font-bold leading-[38.73px] text-[#0A0A0A] md:text-6xl md:leading-[72.61px]">
+        <h2 className="my-5 text-[32px] font-bold leading-[38.73px] text-neutral-2 md:text-6xl md:leading-[72.61px]">
           How can we help You?
         </h2>
-        <p className="text-[16px] leading-[21.78px] text-[#0A0A0A] md:text-lg md:text-[#525252]">
+        <p className="text-[16px] leading-[21.78px] text-neutral-2 md:text-lg md:text-neutral-1">
           Find advice and answers from our support team
         </p>
         <div className="relative mx-auto mt-5 h-[53px] max-w-[644px] md:h-14">
           <input
-            className="h-full w-full rounded-2xl border-[1px] border-[#CBD5E1] pl-10 outline-none placeholder:text-sm placeholder:text-[#71717A] md:rounded-[36px] md:bg-[#FAFAFA] md:pl-14 md:placeholder:text-[12px] md:placeholder:text-[#525252]"
+            className="h-full w-full rounded-2xl border-[1px] border-border pl-10 outline-none placeholder:text-sm placeholder:text-input md:rounded-[36px] md:bg-[#FAFAFA] md:pl-14 md:placeholder:text-[12px] md:placeholder:text-[#525252]"
             type="text"
             value={query}
             onChange={handleInputChange}
@@ -179,13 +175,13 @@ export default function HelpCenter() {
           {showDropdown && (
             <div
               ref={dropdownReference}
-              className="absolute left-0 right-0 top-full z-10 mt-2 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg"
+              className="absolute left-0 right-0 top-full z-10 mt-2 max-h-60 overflow-y-auto rounded-md border border-border bg-card shadow-lg"
             >
               {filteredTopics.length > 0 ? (
                 filteredTopics.map((topic, index) => (
                   <div
                     key={index}
-                    className="cursor-pointer p-2 text-left hover:bg-gray-100"
+                    className="cursor-pointer p-2 text-left hover:bg-border"
                     role="button"
                     tabIndex={0}
                     onClick={() => handleDropdownClick(index)}
@@ -195,7 +191,7 @@ export default function HelpCenter() {
                   </div>
                 ))
               ) : (
-                <div className="p-2 text-gray-500">No topics found</div>
+                <div className="p-2 text-input">No topics found</div>
               )}
             </div>
           )}
@@ -203,7 +199,7 @@ export default function HelpCenter() {
       </section>
 
       <section className="p-6 text-center md:py-20">
-        <h2 className="text-[24px] font-bold leading-[29.05px] text-[#F97316] md:text-[28px] md:leading-[33.89px]">
+        <h2 className="text-[24px] font-bold leading-[29.05px] text-primary md:text-[28px] md:leading-[33.89px]">
           Browse by topics
         </h2>
         <div className="my mx-auto grid max-w-[1200px] grid-cols-1 md:grid-cols-2 md:gap-x-6 md:gap-y-0 lg:grid-cols-3">
@@ -211,14 +207,14 @@ export default function HelpCenter() {
             filteredTopics.map((topic, index) => (
               <div
                 key={index}
-                className="mt-6 flex h-[128px] cursor-pointer flex-col justify-center gap-5 bg-white p-6 text-left"
+                className="mt-6 flex h-[128px] cursor-pointer flex-col justify-center gap-5 bg-card p-6 text-left"
                 role="button"
                 tabIndex={0}
                 onClick={() => handleTopicToggle(index)}
                 onKeyDown={(event) => handleKeyPressTopicToggle(event, index)}
               >
                 <div className="flex w-full items-center justify-between">
-                  <p className="w-[90%] text-xl font-medium leading-[24.2px] text-[#0F172A]">
+                  <p className="text-loading w-[90%] text-xl font-medium leading-[24.2px]">
                     {topic.topic}
                   </p>
                   <img
@@ -234,7 +230,7 @@ export default function HelpCenter() {
       </section>
 
       <section className="p-6 pb-20">
-        <div className="mx-auto grid-cols-2 p-6 text-[#0A0A0A] md:grid md:max-w-[1200px] md:px-0">
+        <div className="mx-auto grid-cols-2 p-6 text-neutral-2 md:grid md:max-w-[1200px] md:px-0">
           <div>
             <h2 className="text-[24px] font-semibold leading-[29.05px] md:text-[36px] md:leading-[43.57px]">
               Frequently Asked Questions
@@ -243,10 +239,10 @@ export default function HelpCenter() {
               We couldn’t answer your question?
             </p>
             <Button
-              className="border-[#0A0A0A]"
+              className="border-neutral-2"
               variant="outline"
               size="sm"
-              onClick={() => redirect("/contact-us")}
+              onClick={() => navigate("/contact-us")}
             >
               Contact us
             </Button>
@@ -256,7 +252,7 @@ export default function HelpCenter() {
             {questtions.map((ques, ind) => (
               <div
                 key={ind}
-                className="flex cursor-pointer flex-col justify-center gap-[10px] border-b-[1px] border-[#E2E8F0] py-[15px] text-left md:mr-6"
+                className="flex cursor-pointer flex-col justify-center gap-[10px] border-b-[1px] border-border py-[15px] text-left md:mr-6"
                 role="button"
                 tabIndex={0}
                 onClick={() => handleQuestionToggle(ind)}
@@ -279,24 +275,21 @@ export default function HelpCenter() {
         </div>
 
         <div className="mx-auto p-6 text-center md:max-w-[600px]">
-          <h2 className="text-2xl font-bold leading-[29.05px] text-[#F97316] md:text-[28px] md:leading-[33.89px]">
+          <h2 className="text-2xl font-bold leading-[29.05px] text-primary md:text-[28px] md:leading-[33.89px]">
             Didn’t find an answer?
           </h2>
-          <p className="py-5 text-[16px] text-[#525252] md:text-lg md:leading-[21.78px] md:text-[#0A0A0A]">
+          <p className="py-5 text-[16px] text-neutral-1 md:text-lg md:leading-[21.78px] md:text-neutral-2">
             Contact us for more inquires and information about our services.
           </p>
           <Button
-            className="bg-[#F97316]"
+            className="bg-primary"
             size="lg"
-            onClick={() => redirect("/contact-us")}
+            onClick={() => navigate("/contact-us")}
           >
             Contact us
           </Button>
         </div>
       </section>
-
-      {/* ======> import Footer component <====== */}
-      <Footer />
     </div>
   );
 }