diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a3cf6988d..be3e242f4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3103,6 +3103,8 @@
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -4395,7 +4397,9 @@
       "license": "MIT"
     },
     "node_modules/clsx": {
-      "version": "2.0.0",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "license": "MIT",
       "peer": true,
       "engines": {
diff --git a/frontend/package.json b/frontend/package.json
index 858b5a3a2..e8615d6ad 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -105,5 +105,6 @@
       "prettier --write",
       "git add"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/frontend/src/components/QuestionComponents/Dropdown/index.tsx b/frontend/src/components/QuestionComponents/Dropdown/index.tsx
new file mode 100644
index 000000000..aded2ca32
--- /dev/null
+++ b/frontend/src/components/QuestionComponents/Dropdown/index.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import tw from 'twin.macro';
+import { ChevronDownIcon, CheckIcon } from '@heroicons/react/24/solid';
+
+interface DropdownOption {
+  id: string | number;
+  label: string;
+}
+
+interface DropdownProps {
+  id: number;
+  question: string;
+  description?: string;
+  options: DropdownOption[];
+  required?: boolean;
+  defaultValue?: string | number;
+  onChange?: (value: string | number) => void;
+  onSubmit?: (questionId: number, value: string | number) => void;
+  disabled?: boolean;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+  id,
+  question,
+  description,
+  options,
+  required = false,
+  defaultValue,
+  onChange,
+  onSubmit,
+  disabled = false,
+}) => {
+  const [value, setValue] = useState<string | number | undefined>(defaultValue);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelect = (optionId: string | number) => {
+    setValue(optionId);
+    setIsOpen(false);
+
+    if (onChange) onChange(optionId);
+    if (onSubmit) onSubmit(id, optionId);
+  };
+
+  const selectedOption = options.find(option => option.id === value);
+
+  return (
+    <div tw="mb-6 max-w-4xl w-full">
+      <div tw="flex items-center mb-1">
+        <label tw="text-lg font-medium text-gray-900">{question}</label>
+        {required && <span tw="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p tw="mb-2 text-sm text-gray-600">{description}</p>
+      )}
+
+      <div tw="relative">
+        <button
+          type="button"
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          disabled={disabled}
+          tw="w-full py-1 px-4 text-left rounded-md border-2 border-gray-400 shadow-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-blue-400"
+        >
+          <div tw="flex items-center justify-between">
+            <span>{selectedOption ? selectedOption.label : 'Select an option'}</span>
+            <ChevronDownIcon tw="h-3 w-5 text-gray-400" />
+          </div>
+        </button>
+
+        {isOpen && (
+          <div tw="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1 max-h-60 overflow-auto border-2 border-gray-300">
+            {options.map((option) => {
+              // Check if this option is selected
+              const isSelected = option.id === value;
+
+              return (
+                <div
+                  key={option.id}
+                  onClick={() => handleSelect(option.id)}
+                  // Basic styling for all options
+                  tw="px-4 py-1 cursor-pointer hover:bg-blue-50 text-sm flex items-center justify-between"
+                  // Apply conditional styling based on selection state
+                  css={isSelected ? tw`bg-blue-50 font-medium` : undefined}
+                >
+                  <span>{option.label}</span>
+                  {/* Show checkmark for selected option */}
+                  {isSelected && (
+                    <CheckIcon tw="h-4 w-4 text-blue-500 ml-2" />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;
\ No newline at end of file
diff --git a/frontend/src/components/QuestionComponents/MultiChoice/index.tsx b/frontend/src/components/QuestionComponents/MultiChoice/index.tsx
new file mode 100644
index 000000000..8cb42d208
--- /dev/null
+++ b/frontend/src/components/QuestionComponents/MultiChoice/index.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import tw from 'twin.macro';
+
+interface Option {
+  id: string | number;
+  label: string;
+}
+
+interface MultiChoiceProps {
+  id: number;
+  question: string;
+  description?: string;
+  options: Option[];
+  required?: boolean;
+  defaultValue?: string | number;
+  onChange?: (value: string | number) => void;
+  onSubmit?: (questionId: number, value: string | number) => void;
+  disabled?: boolean;
+}
+
+const MultiChoice: React.FC<MultiChoiceProps> = ({
+  id,
+  question,
+  description,
+  options,
+  required = false,
+  defaultValue,
+  onChange,
+  onSubmit,
+  disabled = false,
+}) => {
+  const [selectedOption, setSelectedOption] = useState<string | number | undefined>(defaultValue);
+
+  const handleChange = (optionId: string | number) => {
+    setSelectedOption(optionId);
+
+    if (onChange) onChange(optionId);
+    if (onSubmit) onSubmit(id, optionId);
+  };
+
+  return (
+    <div tw="mb-6">
+      <div tw="flex items-center mb-1">
+        <label tw="text-lg font-medium text-gray-900">{question}</label>
+        {required && <span tw="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p tw="mb-2 text-sm text-gray-600">{description}</p>
+      )}
+
+      <div tw="space-y-2">
+        {options.map((option) => (
+          <div key={option.id} tw="flex items-center">
+            <input
+              type="radio"
+              id={`option-${id}-${option.id}`}
+              name={`question-${id}`}
+              value={option.id.toString()}
+              checked={selectedOption === option.id}
+              onChange={() => handleChange(option.id)}
+              disabled={disabled}
+              tw="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+            />
+            <label
+              htmlFor={`option-${id}-${option.id}`}
+              tw="ml-3 block text-sm font-medium text-gray-700"
+            >
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MultiChoice;
\ No newline at end of file
diff --git a/frontend/src/components/QuestionComponents/MultiSelect/index.tsx b/frontend/src/components/QuestionComponents/MultiSelect/index.tsx
new file mode 100644
index 000000000..13e400843
--- /dev/null
+++ b/frontend/src/components/QuestionComponents/MultiSelect/index.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import tw from 'twin.macro';
+
+interface Option {
+  id: string | number;
+  label: string;
+}
+
+interface MultiSelectProps {
+  id: number;
+  question: string;
+  description?: string;
+  options: Option[];
+  required?: boolean;
+  defaultValue?: Array<string | number>;
+  onChange?: (value: Array<string | number>) => void;
+  onSubmit?: (questionId: number, value: Array<string | number>) => void;
+  disabled?: boolean;
+}
+
+const MultiSelect: React.FC<MultiSelectProps> = ({
+  id,
+  question,
+  description,
+  options,
+  required = false,
+  defaultValue = [],
+  onChange,
+  onSubmit,
+  disabled = false,
+}) => {
+  const [selectedOptions, setSelectedOptions] = useState<Array<string | number>>(defaultValue);
+
+  const handleChange = (optionId: string | number) => {
+    let newSelectedOptions: Array<string | number> = [];
+
+    if (selectedOptions.includes(optionId)) {
+      newSelectedOptions = selectedOptions.filter(id => id !== optionId);
+    } else {
+      newSelectedOptions = [...selectedOptions, optionId];
+    }
+
+    setSelectedOptions(newSelectedOptions);
+
+    if (onChange) onChange(newSelectedOptions);
+    if (onSubmit) onSubmit(id, newSelectedOptions);
+  };
+
+  return (
+    <div tw="mb-6">
+      <div tw="flex items-center mb-1">
+        <label tw="text-lg font-medium text-gray-900">{question}</label>
+        {required && <span tw="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p tw="mb-2 text-sm text-gray-600">{description}</p>
+      )}
+
+      <div tw="space-y-2">
+        {options.map((option) => (
+          <div key={option.id} tw="flex items-center">
+            <input
+              type="checkbox"
+              id={`option-${id}-${option.id}`}
+              name={`question-${id}-${option.id}`}
+              value={option.id.toString()}
+              checked={selectedOptions.includes(option.id)}
+              onChange={() => handleChange(option.id)}
+              disabled={disabled}
+              tw="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
+            />
+            <label
+              htmlFor={`option-${id}-${option.id}`}
+              tw="ml-3 block text-sm font-medium text-gray-700"
+            >
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MultiSelect;
\ No newline at end of file
diff --git a/frontend/src/components/QuestionComponents/Ranking/index.tsx b/frontend/src/components/QuestionComponents/Ranking/index.tsx
new file mode 100644
index 000000000..8ba14bf14
--- /dev/null
+++ b/frontend/src/components/QuestionComponents/Ranking/index.tsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react';
+import tw, {css} from 'twin.macro';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+
+interface Option {
+  id: string | number;
+  label: string;
+}
+
+interface RankedOption extends Option {
+  rank: number;
+}
+
+interface RankingProps {
+  id: number;
+  question: string;
+  description?: string;
+  options: Option[];
+  required?: boolean;
+  defaultValue?: Array<string | number>;
+  onChange?: (value: Array<string | number>) => void;
+  onSubmit?: (questionId: number, value: Array<string | number>) => void;
+  disabled?: boolean;
+}
+
+const Ranking: React.FC<RankingProps> = ({
+  id,
+  question,
+  description,
+  options,
+  required = false,
+  defaultValue = [],
+  onChange,
+  onSubmit,
+  disabled = false,
+}) => {
+  const [rankedOptions, setRankedOptions] = useState<RankedOption[]>([]);
+
+  // Initialize ranked options on mount or when options change
+  useEffect(() => {
+    if (defaultValue.length > 0) {
+      const initialRanked = defaultValue.map((optionId, index) => {
+        const option = options.find(opt => opt.id === optionId);
+        return option ? { ...option, rank: index + 1 } : null;
+      }).filter(Boolean) as RankedOption[];
+
+      const rankedIds = initialRanked.map(o => o.id);
+      const unrankedOptions = options
+        .filter(opt => !rankedIds.includes(opt.id))
+        .map((opt, i) => ({ ...opt, rank: initialRanked.length + i + 1 }));
+
+      setRankedOptions([...initialRanked, ...unrankedOptions]);
+    } else {
+      setRankedOptions(options.map((opt, i) => ({ ...opt, rank: i + 1 })));
+    }
+  }, [options, defaultValue]);
+
+  const handleDragEnd = (result: any) => {
+    if (!result.destination) {
+      return;
+    }
+
+    if (result.destination.index === result.source.index) {
+      return;
+    }
+
+    const newRankedOptions = Array.from(rankedOptions);
+    const [removed] = newRankedOptions.splice(result.source.index, 1);
+    newRankedOptions.splice(result.destination.index, 0, removed);
+
+    const updatedOptions = newRankedOptions.map((opt, idx) => ({
+      ...opt,
+      rank: idx + 1
+    }));
+
+    setRankedOptions(updatedOptions);
+
+    const orderedIds = updatedOptions.map(opt => opt.id);
+    if (onChange) onChange(orderedIds);
+    if (onSubmit) onSubmit(id, orderedIds);
+  };
+
+  const sortedOptions = [...rankedOptions].sort((a, b) => a.rank - b.rank);
+
+  return (
+    <div tw="mb-6 max-w-3xl w-full">
+      <div tw="flex items-center mb-1">
+        <label tw="text-lg font-medium text-gray-900">{question}</label>
+        {required && <span tw="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p tw="mb-2 text-sm text-gray-600">{description}</p>
+      )}
+
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Droppable droppableId="ranking-list" isDropDisabled={disabled}>
+          {(provided, snapshot) => (
+            <div
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+              tw="space-y-3"
+            >
+              {sortedOptions.map((option, index) => (
+                <Draggable
+                  key={option.id.toString()}
+                  draggableId={option.id.toString()}
+                  index={index}
+                  isDragDisabled={disabled}
+                >
+                  {(provided, snapshot) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      tw="flex items-center p-3 bg-white border-2 border-gray-300 rounded-lg cursor-grab hover:border-blue-500 transition-colors duration-150"
+                    >
+                      <span tw="bg-gray-200 text-gray-700 rounded-full w-8 h-8 flex items-center justify-center font-semibold mr-3 text-sm">
+                        {option.rank}
+                      </span>
+                      <span tw="text-gray-800 flex-1">{option.label}</span>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  );
+};
+
+export default Ranking;
\ No newline at end of file
diff --git a/frontend/src/components/QuestionComponents/ShortAnswer/index.tsx b/frontend/src/components/QuestionComponents/ShortAnswer/index.tsx
new file mode 100644
index 000000000..5e5324d7d
--- /dev/null
+++ b/frontend/src/components/QuestionComponents/ShortAnswer/index.tsx
@@ -0,0 +1,77 @@
+import React, { useState, ChangeEvent } from 'react';
+import tw from 'twin.macro';
+import Textarea from 'components/Textarea';
+
+interface ShortAnswerProps {
+  id: number;
+  question: string;
+  description?: string;
+  required?: boolean;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (questionId: number, value: string) => void;
+  disabled?: boolean;
+  rows?: number;
+  columns?: number;
+}
+
+const ShortAnswer: React.FC<ShortAnswerProps> = ({
+  id,
+  question,
+  description,
+  required = false,
+  defaultValue = '',
+  onChange,
+  onSubmit,
+  disabled = false,
+  rows = 3, // Fix: expand to 3 rows
+  columns = 77,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Changed to handle textarea instead of input
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    if (onChange) onChange(e.target.value);
+  };
+
+  const handleBlur = () => {
+    if (onSubmit && value.trim() !== '') {
+      onSubmit(id, value);
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  return (
+    <div tw="mb-6 max-w-4xl w-full">
+      <div tw="flex items-center mb-1">
+        <label tw="text-lg font-medium text-gray-900">{question}</label>
+        {required && <span tw="ml-1 text-red-500">*</span>}
+      </div>
+
+      {description && (
+        <p tw="mb-2 text-sm text-gray-600">{description}</p>
+      )}
+    <Textarea
+        value={value}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        disabled={disabled}
+        rows={rows}
+        cols={columns}
+        size="md"
+        placeholder="Your answer"
+        required={required}
+        style={{
+          caretColor: isFocused ? '#3b82f6' : 'auto',
+          transition: 'all 0.2s ease-in-out',
+        }}
+      />
+    </div>
+  );
+};
+
+export default ShortAnswer;
\ No newline at end of file
diff --git a/frontend/src/components/QuestionComponents/index.tsx b/frontend/src/components/QuestionComponents/index.tsx
new file mode 100644
index 000000000..77faeeff5
--- /dev/null
+++ b/frontend/src/components/QuestionComponents/index.tsx
@@ -0,0 +1,20 @@
+// src/components/QuestionComponents/index.ts
+
+// Define and export the QuestionType
+export type QuestionType = 'short_answer' | 'dropdown' | 'multi_choice' | 'multi_select' | 'ranking';
+
+// Export common interfaces
+export interface BaseQuestionProps {
+  id: number;
+  question: string;
+  description?: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+// Export all components
+export { default as ShortAnswer } from './ShortAnswer';
+export { default as Dropdown } from './Dropdown';
+export { default as MultiChoice } from './MultiChoice';
+export { default as MultiSelect } from './MultiSelect';
+export { default as Ranking } from './Ranking';
\ No newline at end of file
diff --git a/frontend/src/pages/question_components_test/index.tsx b/frontend/src/pages/question_components_test/index.tsx
new file mode 100644
index 000000000..5cdac8c67
--- /dev/null
+++ b/frontend/src/pages/question_components_test/index.tsx
@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import "twin.macro";
+import Card from "components/Card";
+
+// Import question components
+import ShortAnswer from "components/QuestionComponents/ShortAnswer";
+import Dropdown from "components/QuestionComponents/Dropdown";
+import MultiChoice from "components/QuestionComponents/MultiChoice";
+import MultiSelect from "components/QuestionComponents/MultiSelect";
+import Ranking from "components/QuestionComponents/Ranking";
+
+const QuestionComponentsTestPage: React.FC = () => {
+  // State to store answers
+  const [answers, setAnswers] = useState<{ [key: number]: any }>({});
+
+  // Handler for answer submission
+  const handleAnswerSubmit = (questionId: number, value: any) => {
+    setAnswers((prev) => ({
+      ...prev,
+      [questionId]: value,
+    }));
+    console.log(`Question ${questionId} answered:`, value);
+  };
+
+  // Sample options for select-type questions
+  const sampleOptions = [
+    { id: 1, label: "Option 1" },
+    { id: 2, label: "Option 2" },
+    { id: 3, label: "Option 3" },
+    { id: 4, label: "Option 4" },
+  ];
+
+  return (
+    <div tw="container mx-auto py-8 px-4">
+      <h1 tw="text-3xl font-bold mb-6">Question Component Types Test</h1>
+
+      <Card tw="mb-8">
+        <h2 tw="text-2xl font-medium mb-4">Short Answer</h2>
+        <ShortAnswer
+          id={1}
+          question="What is your name?"
+          description="Please enter your full name"
+          required={true}
+          defaultValue={answers[1] || ""}
+          onSubmit={handleAnswerSubmit}
+        />
+      </Card>
+
+      <Card tw="mb-8">
+        <h2 tw="text-2xl font-medium mb-4">Dropdown</h2>
+        <Dropdown
+          id={2}
+          question="What is your preferred programming language?"
+          description="Select one option from the dropdown"
+          options={sampleOptions}
+          required={true}
+          defaultValue={answers[2]}
+          onSubmit={handleAnswerSubmit}
+        />
+      </Card>
+
+      <Card tw="mb-8">
+        <h2 tw="text-2xl font-medium mb-4">Multi Choice (Radio Buttons)</h2>
+        <MultiChoice
+          id={3}
+          question="Which team are you most interested in?"
+          description="Select one option"
+          options={sampleOptions}
+          required={true}
+          defaultValue={answers[3]}
+          onSubmit={handleAnswerSubmit}
+        />
+      </Card>
+
+      <Card tw="mb-8">
+        <h2 tw="text-2xl font-medium mb-4">Multi Select (Checkboxes)</h2>
+        <MultiSelect
+          id={4}
+          question="Which technologies are you familiar with?"
+          description="Select all that apply"
+          options={sampleOptions}
+          required={true}
+          defaultValue={answers[4] || []}
+          onSubmit={handleAnswerSubmit}
+        />
+      </Card>
+
+      <Card tw="mb-8">
+        <h2 tw="text-2xl font-medium mb-4">Ranking</h2>
+        <Ranking
+          id={5}
+          question="Rank your preference for the following options"
+          description="Drag and drop options to your preferences"
+          options={sampleOptions}
+          required={true}
+          defaultValue={answers[5] || []}
+          onSubmit={handleAnswerSubmit}
+        />
+      </Card>
+
+      <Card>
+        <h2 tw="text-2xl font-medium mb-4">Current Answers Log</h2>
+        <pre tw="bg-gray-100 p-4 rounded overflow-auto">
+          {JSON.stringify(answers, null, 2)}
+        </pre>
+      </Card>
+    </div>
+  );
+};
+
+export default QuestionComponentsTestPage;
\ No newline at end of file
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index ecf361176..902e21cda 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -14,6 +14,7 @@ const Marking = lazy(() => import("./pages/admin/review/marking"));
 const Rankings = lazy(() => import("./pages/admin/review/rankings"));
 const Review = lazy(() => import("./pages/admin/review"));
 const SignupPage = lazy(() => import("./pages/signup"));
+const QuestionComponentsTest = lazy(() => import("./pages/question_components_test"));
 
 const routes = [
   <Route key="dashboard" path="/dashboard" element={<DashboardPage />} />,
@@ -41,6 +42,11 @@ const routes = [
     path="/application/:campaignId"
     element={<ApplicationPage />}
   />,
+  <Route
+    key="QuestionComponentsTest"
+    path="/question-components-test"
+    element={<QuestionComponentsTest />}
+  />,
 ];
 
 export default routes;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 907a07a6a..820750d50 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1163,9 +1163,6 @@
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@esbuild/linux-x64@0.17.18":
-  version "0.17.18"
-
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -1500,6 +1497,8 @@
 
 "@popperjs/core@^2.11.7", "@popperjs/core@^2.11.8":
   version "2.11.8"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
 "@remix-run/router@1.6.3":
   version "1.6.3"
@@ -2117,7 +2116,9 @@ clsx@^1.2.1:
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
 clsx@^2.0.0:
-  version "2.0.0"
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 color-convert@^1.9.0:
   version "1.9.3"