diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 1a76f3af..dcd8941a 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -1,11 +1,5 @@
 import React, { useState } from 'react';
-import { Avatar, AvatarVariants } from 'components/shared/Avatar';
-import { Badge, BadgeProps } from 'components/shared/Badge';
-import { Button, ButtonOrLinkProps } from 'components/shared/Button';
 import { Calendar } from 'components/shared/Calendar';
-import { Checkbox } from 'components/shared/Checkbox';
-import { SearchIcon, CrossIcon, PlusIcon } from 'components/shared/CustomIcon';
-import { Input } from 'components/shared/Input';
 import { Value } from 'react-calendar/dist/cjs/shared/types';
 import {
   renderCheckbox,
@@ -19,6 +13,7 @@ import {
   renderTabs,
   renderVerticalTabs,
 } from './renders/tabs';
+import { renderInputs } from './renders/input';
 
 const Page = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -40,55 +35,7 @@ const Page = () => {
         {/* Button */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <h1 className="text-2xl font-bold">Input</h1>
-          <div className="flex w-full flex-col gap-10">
-            <div className="flex w-full gap-10">
-              <Input
-                label="Label"
-                description="Additional information or context"
-                leftIcon={<SearchIcon />}
-                rightIcon={<CrossIcon />}
-                placeholder="Placeholder text"
-              />
-              <Input
-                disabled
-                label="Label"
-                description="Additional information or context"
-                placeholder="Placeholder text"
-              />
-              <Input
-                state="error"
-                label="Label"
-                description="Additional information or context"
-                placeholder="Placeholder text"
-                helperText="The error goes here"
-              />
-            </div>
-            <div className="flex w-full gap-10">
-              <Input
-                label="Label"
-                leftIcon={<SearchIcon />}
-                rightIcon={<CrossIcon />}
-                description="Additional information or context"
-                placeholder="Placeholder text"
-                size="sm"
-              />
-              <Input
-                disabled
-                label="Label"
-                description="Additional information or context"
-                placeholder="Placeholder text"
-                size="sm"
-              />
-              <Input
-                state="error"
-                label="Label"
-                description="Additional information or context"
-                placeholder="Placeholder text"
-                size="sm"
-                helperText="The error goes here"
-              />
-            </div>
-          </div>
+          <div className="flex w-full flex-col gap-10">{renderInputs()}</div>
 
           <div className="w-full h border border-gray-200 px-20 my-10" />