diff --git a/package-lock.json b/package-lock.json
index 3d7401c..66138b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1211,6 +1211,66 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.5.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.0.5",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@tybys/wasm-util": "^0.10.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
       "version": "4.1.14",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.14.tgz",
diff --git a/src/app/components/FormInput/DatePicker.jsx b/src/app/components/FormInput/DatePicker.jsx
new file mode 100644
index 0000000..3a3451f
--- /dev/null
+++ b/src/app/components/FormInput/DatePicker.jsx
@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+export const DatePicker = ({ label = "Select Date", onChange }) => {
+  const [date, setDate] = useState("");
+
+  const handleChange = (e) => {
+    setDate(e.target.value);
+    if (onChange) onChange(e.target.value);
+  };
+
+  return (
+    <div style={{ marginBottom: "1rem" }}>
+      <label>{label}</label>
+      <input
+        type="date"
+        value={date}
+        onChange={handleChange}
+        style={{ padding: "0.5rem", marginLeft: "0.5rem" }}
+      />
+      {date && <p>Selected Date: {date}</p>}
+    </div>
+  );
+};
diff --git a/src/app/components/FormInput/FileUpload.jsx b/src/app/components/FormInput/FileUpload.jsx
new file mode 100644
index 0000000..df3fb85
--- /dev/null
+++ b/src/app/components/FormInput/FileUpload.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+export const FileUpload = ({ onFileSelect }) => {
+  const [file, setFile] = useState(null);
+
+  const handleFile = (file) => {
+    setFile(file);
+    if (onFileSelect) onFileSelect(file);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    handleFile(e.dataTransfer.files[0]);
+  };
+
+  const handleChange = (e) => {
+    handleFile(e.target.files[0]);
+  };
+
+  return (
+    <div style={{ marginBottom: "1rem" }}>
+      <label
+        style={{
+          display: "block",
+          width: "300px",
+          height: "100px",
+          border: "2px dashed #aaa",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+        }}
+      >
+        {file ? file.name : "Drag & Drop file or click to upload"}
+        <input
+          type="file"
+          style={{ display: "none" }}
+          onChange={handleChange}
+          onDrop={handleDrop}
+          onDragOver={(e) => e.preventDefault()}
+        />
+      </label>
+    </div>
+  );
+};
diff --git a/src/app/components/FormInput/FormValidation.jsx b/src/app/components/FormInput/FormValidation.jsx
new file mode 100644
index 0000000..ba426b5
--- /dev/null
+++ b/src/app/components/FormInput/FormValidation.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+
+export const FormValidation = ({ minLength = 3, onSubmit }) => {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim() === "") {
+      setError("Field cannot be empty");
+    } else if (value.length < minLength) {
+      setError(`Minimum ${minLength} characters required`);
+    } else {
+      setError("");
+      if (onSubmit) onSubmit(value);
+      alert("Form submitted: " + value);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ marginBottom: "1rem" }}>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        style={{ padding: "0.5rem", marginRight: "0.5rem" }}
+        placeholder="Enter text"
+      />
+      <button type="submit">Submit</button>
+      {error && <p style={{ color: "red", marginTop: "0.5rem" }}>{error}</p>}
+    </form>
+  );
+};
diff --git a/src/app/components/FormInput/Slider.jsx b/src/app/components/FormInput/Slider.jsx
new file mode 100644
index 0000000..fc59b45
--- /dev/null
+++ b/src/app/components/FormInput/Slider.jsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+export const Slider = ({ min = 0, max = 100, step = 1, onChange }) => {
+  const [value, setValue] = useState((min + max) / 2);
+
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    if (onChange) onChange(e.target.value);
+  };
+
+  return (
+    <div style={{ marginBottom: "1rem" }}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+      />
+      <p>Value: {value}</p>
+    </div>
+  );
+};
diff --git a/src/app/components/page.jsx b/src/app/components/page.jsx
index 566a5d8..3d75511 100644
--- a/src/app/components/page.jsx
+++ b/src/app/components/page.jsx
@@ -1,9 +1,9 @@
 "use client";
-import React, { useState, useEffect } from 'react'
-import { Search, X } from 'lucide-react'
+import React, { useState, useEffect } from "react";
+import { Search, X } from "lucide-react";
 
-import { useAnalytics } from '../context/AnalyticsContext'
-import { useTheme } from '../context/ThemeContext'
+import { useAnalytics } from "../context/AnalyticsContext";
+import { useTheme } from "../context/ThemeContext";
 // Button Imports
 // import PrimaryButton from '@/components/buttons/PrimaryButton'
 // import SecondaryButton from '@/components/buttons/SecondaryButton'
@@ -53,11 +53,17 @@ import Pagination from "./navigation/Pagination";
 import UserCard from "@/app/components/cards/UserCard";
 import RainbowButton from "@/app/components/buttons/RainbowButton";
 
+// form Input
+
+import { DatePicker } from "./FormInput/DatePicker";
+import { FileUpload } from "./FormInput/FileUpload";
+import { FormValidation } from "./FormInput/FormValidation";
+import { Slider } from "./FormInput/Slider";
 
 export default function Page() {
   // Search and Filter State
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filterType, setFilterType] = useState('all');
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterType, setFilterType] = useState("all");
 
 
   // Analytics
@@ -68,7 +74,7 @@ export default function Page() {
 
   // Track page view - only once on mount
   useEffect(() => {
-    trackComponentView('ComponentsPage');
+    trackComponentView("ComponentsPage");
   }, []); // Empty dependency array to run only once
 
   // Inputs
@@ -76,8 +82,6 @@ export default function Page() {
   const [selectValue, setSelectValue] = React.useState("");
   const [checkboxValue, setCheckboxValue] = React.useState(false);
 
-
-
   // Data
   const selectOptions = [
     { value: "option1", label: "Option 1" },
@@ -108,11 +112,129 @@ export default function Page() {
     { label: "Breadcrumb" },
   ];
 
-
-
   // All components with search data
   const allComponents = {
     buttons: [
+      {
+        name: "Primary Button",
+        component: <PrimaryButton>Primary</PrimaryButton>,
+        keywords: ["primary", "main", "action", "cta"],
+        desc: "Used for Main Actions",
+      },
+      {
+        name: "Secondary Button",
+        component: <SecondaryButton>Secondary</SecondaryButton>,
+        keywords: ["secondary", "alternate"],
+        desc: "Used for secondary Actions",
+      },
+      {
+        name: "Ghost Button",
+        component: <GhostButton>Ghost</GhostButton>,
+        keywords: ["ghost", "transparent", "subtle"],
+        desc: "Used for minimal actions",
+      },
+      {
+        name: "Outline Button",
+        component: <OutlineButton>Outline</OutlineButton>,
+        keywords: ["outline", "border", "stroke"],
+        desc: "Used for gives outline",
+      },
+      {
+        name: "Danger Button",
+        component: <DangerButton>Danger</DangerButton>,
+        keywords: ["danger", "error", "delete", "warning", "red"],
+        desc: "Used for destructive actions",
+      },
+      {
+        name: "Success Button",
+        component: <SuccessButton>Success</SuccessButton>,
+        keywords: ["success", "confirm", "done", "green"],
+        desc: "Used for success actions",
+      },
+      {
+        name: "Icon Button",
+        component: <IconButton aria-label="star">★</IconButton>,
+        keywords: ["icon", "star", "symbol"],
+        desc: "Used for icons",
+      },
+      {
+        name: "Rainbow Button",
+        component: <RainbowButton>Rainbow</RainbowButton>,
+        keywords: ["rainbow", "action", "colorful"],
+        desc: "Used for call to actions",
+      },
+    ],
+    cards: [
+      {
+        name: "Simple Card",
+        component: (
+          <SimpleCard
+            title="Simple Card"
+            description="A minimal card with actions."
+          />
+        ),
+        keywords: ["simple", "basic", "minimal"],
+      },
+      {
+        name: "Image Card",
+        component: (
+          <ImageCard title="Image Card" description="Card with SVG image." />
+        ),
+        keywords: ["image", "picture", "visual"],
+      },
+      {
+        name: "Feature Card",
+        component: (
+          <FeatureCard
+            title="Feature Card"
+            description="Highlight features and benefits."
+          />
+        ),
+        keywords: ["feature", "highlight", "benefit"],
+      },
+      {
+        name: "Pricing Card",
+        component: (
+          <PricingCard
+            plan="Pro"
+            price="$9/mo"
+            features={["10 projects", "Priority support", "Unlimited users"]}
+          />
+        ),
+        keywords: ["pricing", "plan", "subscription", "price"],
+      },
+      {
+        name: "Data Card",
+        component: (
+          <DataCard title="Active Projects" value="27" icon="📂" trend={8} />
+        ),
+        keywords: ["data", "stats", "analytics", "metrics"],
+      },
+    ],
+    inputs: [
+      {
+        name: "Text Input",
+        component: <TextInput label="Sample Input" placeholder="Enter text" />,
+        keywords: ["text", "input", "field", "form"],
+      },
+      {
+        name: "Select",
+        component: <Select label="Sample Select" options={selectOptions} />,
+        keywords: ["select", "dropdown", "options", "choice"],
+      },
+      {
+        name: "Checkbox",
+        component: (
+          <Checkbox
+            label="Sample Checkbox"
+            description="Check this option"
+            checked={false}
+            onChange={() => {}}
+          />
+        ),
+        keywords: ["checkbox", "check", "toggle", "boolean"],
+      },
+
       { name: 'Primary Button', component: <PrimaryButton>Primary</PrimaryButton>, keywords: ['primary', 'main', 'action', 'cta'], desc: "Used for Main Actions" },
       { name: 'Secondary Button', component: <SecondaryButton>Secondary</SecondaryButton>, keywords: ['secondary', 'alternate'], desc: "Used for secondary Actions" },
       { name: 'Ghost Button', component: <GhostButton>Ghost</GhostButton>, keywords: ['ghost', 'transparent', 'subtle'], desc: "Used for minimal actions" },
@@ -134,12 +256,27 @@ export default function Page() {
       { name: 'Text Input', component: <TextInput label="Sample Input" placeholder="Enter text" />, keywords: ['text', 'input', 'field', 'form'] },
       { name: 'Select', component: <Select label="Sample Select" options={selectOptions} />, keywords: ['select', 'dropdown', 'options', 'choice'] },
       { name: 'Checkbox', component: <Checkbox label="Sample Checkbox" description="Check this option" checked={false} onChange={() => { }} />, keywords: ['checkbox', 'check', 'toggle', 'boolean'] }
+
     ],
     navigation: [
-      { name: 'Breadcrumb', component: <Breadcrumb items={breadcrumbItems} />, keywords: ['breadcrumb', 'navigation', 'path', 'hierarchy'] },
-      { name: 'Tabs', component: <Tabs tabs={tabsData} defaultTab={0} />, keywords: ['tabs', 'navigation', 'switch', 'toggle'] },
-      { name: 'Pagination', component: <Pagination currentPage={1} totalPages={5} maxVisiblePages={3} />, keywords: ['pagination', 'pages', 'navigation', 'paging'] }
-    ]
+      {
+        name: "Breadcrumb",
+        component: <Breadcrumb items={breadcrumbItems} />,
+        keywords: ["breadcrumb", "navigation", "path", "hierarchy"],
+      },
+      {
+        name: "Tabs",
+        component: <Tabs tabs={tabsData} defaultTab={0} />,
+        keywords: ["tabs", "navigation", "switch", "toggle"],
+      },
+      {
+        name: "Pagination",
+        component: (
+          <Pagination currentPage={1} totalPages={5} maxVisiblePages={3} />
+        ),
+        keywords: ["pagination", "pages", "navigation", "paging"],
+      },
+    ],
   };
 
   // Filter logic
@@ -147,7 +284,7 @@ export default function Page() {
     let components = {};
 
     // Apply type filter
-    if (filterType === 'all') {
+    if (filterType === "all") {
       components = allComponents;
     } else {
       components = { [filterType]: allComponents[filterType] };
@@ -156,10 +293,13 @@ export default function Page() {
     // Apply search filter
     if (searchTerm) {
       const filtered = {};
-      Object.keys(components).forEach(type => {
-        const matchedComponents = components[type].filter(comp =>
-          comp.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          comp.keywords.some(keyword => keyword.toLowerCase().includes(searchTerm.toLowerCase()))
+      Object.keys(components).forEach((type) => {
+        const matchedComponents = components[type].filter(
+          (comp) =>
+            comp.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            comp.keywords.some((keyword) =>
+              keyword.toLowerCase().includes(searchTerm.toLowerCase())
+            )
         );
         if (matchedComponents.length > 0) {
           filtered[type] = matchedComponents;
@@ -172,7 +312,10 @@ export default function Page() {
   };
 
   const filteredComponents = getFilteredComponents();
-  const totalResults = Object.values(filteredComponents).reduce((total, components) => total + components.length, 0);
+  const totalResults = Object.values(filteredComponents).reduce(
+    (total, components) => total + components.length,
+    0
+  );
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-500">
@@ -202,7 +345,7 @@ export default function Page() {
               />
               {searchTerm && (
                 <button
-                  onClick={() => setSearchTerm('')}
+                  onClick={() => setSearchTerm("")}
                   className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                 >
                   <X className="w-4 h-4" />
@@ -227,13 +370,14 @@ export default function Page() {
       </section>
 
       {/* Search Results Info */}
-      {(searchTerm || filterType !== 'all') && (
+      {(searchTerm || filterType !== "all") && (
         <div className="max-w-5xl mx-auto px-4 mb-8">
           <div className="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
             <p className="text-blue-800 dark:text-blue-200">
-              Found <span className="font-semibold">{totalResults}</span> component{totalResults !== 1 ? 's' : ''}
+              Found <span className="font-semibold">{totalResults}</span>{" "}
+              component{totalResults !== 1 ? "s" : ""}
               {searchTerm && ` matching "${searchTerm}"`}
-              {filterType !== 'all' && ` in ${filterType}`}
+              {filterType !== "all" && ` in ${filterType}`}
             </p>
           </div>
         </div>
@@ -243,7 +387,9 @@ export default function Page() {
       {totalResults === 0 && (
         <div className="max-w-5xl mx-auto px-4 text-center py-12">
           <div className="text-6xl mb-4">🔍</div>
-          <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">No components found</h3>
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            No components found
+          </h3>
         </div>
       )}
 
@@ -263,10 +409,18 @@ export default function Page() {
               {filteredComponents.buttons.map((item, index) => (
                 <div
                   key={index}
+
+                  className={`${
+                    darkMode
+                      ? "bg-gray-800 text-gray-200"
+                      : "bg-gray-300 text-gray-900"
+                  } shadow-md rounded-2xl p-5 flex flex-col items-center text-center border border-gray-100 hover:shadow-lg transition w-60`}
+
                   className={`${darkMode
                       ? "bg-gray-800 text-gray-200"
                       : "bg-gray-300 text-gray-900"
                     } shadow-md rounded-2xl p-5 flex flex-col items-center text-center border border-gray-100 hover:shadow-lg transition w-60`}
+
                 >
                   <div title={item.name} className="mb-3">
                     {item.component}
@@ -317,7 +471,8 @@ export default function Page() {
                 </div>
               ))}
               {/* Show additional examples if all inputs are visible */}
-              {filteredComponents.inputs.length === allComponents.inputs.length && (
+              {filteredComponents.inputs.length ===
+                allComponents.inputs.length && (
                 <>
                   <TextInput
                     label="Email Address"
@@ -342,6 +497,8 @@ export default function Page() {
                     onChange={(e) => setSelectValue(e.target.value)}
                     required
 
+
+
                     className="text-gray-100 bg-gray-600 px-4 py-2"
                   />
                   <Checkbox
@@ -370,16 +527,16 @@ export default function Page() {
             className="bg-gradient-to-br from-yellow-50 via-orange-50 to-pink-50 dark:from-[#3a3020] dark:via-[#412920] dark:to-[#16101a] border border-yellow-100 dark:border-yellow-900 shadow-xl rounded-2xl p-10"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-yellow-600 dark:text-yellow-200">
-              <span>Navigation Components ({filteredComponents.navigation.length})</span>
+              <span>
+                Navigation Components ({filteredComponents.navigation.length})
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-yellow-300 to-pink-300 rounded-full block" />
             </h2>
             <div className="space-y-8">
               {filteredComponents.navigation.map((item, index) => (
                 <div key={index}>
                   <h3 className="text-lg font-medium mb-3">{item.name}</h3>
-                  <div title={item.name}>
-                    {item.component}
-                  </div>
+                  <div title={item.name}>{item.component}</div>
                 </div>
               ))}
             </div>
@@ -387,10 +544,8 @@ export default function Page() {
         )}
 
         {/* Feedback Section - Always show when no specific filter is applied */}
-        {(filterType === 'all' && !searchTerm) && (
-          <section
-            className="bg-white/90 dark:bg-gray-900/90 border border-blue-100 dark:border-blue-900 shadow-xl rounded-2xl p-10"
-          >
+        {filterType === "all" && !searchTerm && (
+          <section className="bg-white/90 dark:bg-gray-900/90 border border-blue-100 dark:border-blue-900 shadow-xl rounded-2xl p-10">
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-blue-700 dark:text-blue-200">
               <span>Feedback Components</span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-blue-300 to-violet-300 rounded-full block" />
@@ -416,7 +571,47 @@ export default function Page() {
           </section>
         )}
 
+        {filterType === "all" && !searchTerm && (
+          <section className="bg-white/90 dark:bg-gray-900/90 border border-blue-100 dark:border-blue-900 shadow-xl rounded-2xl p-10 m-10">
+            {/* Heading */}
+            <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-blue-700 dark:text-blue-200">
+              <span>Form Helper Components</span>
+              <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-blue-300 to-violet-300 rounded-full block" />
+            </h2>
+
+            {/* Components Grid */}
+            <div className="grid gap-6">
+              {/* Date Picker Card */}
+              <div className="p-6 bg-gradient-to-r from-pink-50 to-pink-100/80 dark:from-pink-900 dark:to-pink-700 text-pink-900 dark:text-pink-100 rounded-xl font-medium shadow-sm border border-pink-200 dark:border-pink-800">
+                <h3 className="text-lg font-semibold mb-2">📅 Date Picker</h3>
+                <DatePicker label="Choose a Date" />
+              </div>
+
+              {/* Slider Card */}
+              <div className="p-6 bg-gradient-to-r from-green-50 to-green-100/80 dark:from-green-900 dark:to-green-700 text-green-900 dark:text-green-100 rounded-xl font-medium shadow-sm border border-green-200 dark:border-green-800">
+                <h3 className="text-lg font-semibold mb-2">🎚 Slider</h3>
+                <Slider min={0} max={50} />
+              </div>
+
+              {/* File Upload Card */}
+              <div className="p-6 bg-gradient-to-r from-yellow-50 to-yellow-100/80 dark:from-yellow-900 dark:to-yellow-700 text-yellow-900 dark:text-yellow-100 rounded-xl font-medium shadow-sm border border-yellow-200 dark:border-yellow-800">
+                <h3 className="text-lg font-semibold mb-2">📁 File Upload</h3>
+                <FileUpload />
+              </div>
+
+              {/* Form Validation Card */}
+              <div className="p-6 bg-gradient-to-r from-blue-50 to-blue-100/80 dark:from-blue-900 dark:to-blue-700 text-blue-900 dark:text-blue-100 rounded-xl font-medium shadow-sm border border-blue-200 dark:border-blue-800">
+                <h3 className="text-lg font-semibold mb-2">
+                  ✅ Form Validation
+                </h3>
+                <FormValidation minLength={5} />
+              </div>
+            </div>
+          </section>
+        )}
+
+
       </div>
     </div>
   );
-}
\ No newline at end of file
+}