diff --git a/docs/app/components/server/input/description.md b/docs/app/components/server/input/description.md
new file mode 100644
index 0000000000..3f87c754ff
--- /dev/null
+++ b/docs/app/components/server/input/description.md
@@ -0,0 +1,3 @@
+Text input fields allow users to enter text and can be used to collect user feedback or enter information in data entry forms.
+
+These types of input fields are used on their own, or in combination with other inputs such as number entry, date picker, etc.
diff --git a/docs/app/components/server/input/examples/Default.tsx b/docs/app/components/server/input/examples/Default.tsx
new file mode 100644
index 0000000000..d1b344428b
--- /dev/null
+++ b/docs/app/components/server/input/examples/Default.tsx
@@ -0,0 +1,5 @@
+import Input from '@heathmont/moon-base-tw/lib/input/Input';
+
+export const Default = () => <Input aria-label="default" />;
+
+export default Default;
diff --git a/docs/app/components/server/input/page.tsx b/docs/app/components/server/input/page.tsx
new file mode 100644
index 0000000000..c4668835af
--- /dev/null
+++ b/docs/app/components/server/input/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/input/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.input.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Input</h1>
+      <MDX markdown={server.input.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.input.examples.Default}
+      />
+    </div>
+  );
+}
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index d3a9f5e9ea..d3b7c751d7 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -42,6 +42,12 @@ export interface Examples {
         Default: 'string';
       };
     };
+    input: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
     tag: {
       description: 'string';
       examples: {
diff --git a/workspaces/base/src/chip/Chip.tsx b/workspaces/base/src/chip/Chip.tsx
index 3817ef005c..d3f06c065b 100644
--- a/workspaces/base/src/chip/Chip.tsx
+++ b/workspaces/base/src/chip/Chip.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import type ChipProps from './private/types/ChipProps';
-import setPadding from './private/utils/setPadding';
+import getPadding from './private/utils/getPadding';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 const Chip = forwardRef<HTMLButtonElement, ChipProps>(
@@ -28,7 +28,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
         'hover:text-piccolo user-select-none',
         iconOnly ? 'center' : 'space-between',
         size === 'sm' ? 'h-8 gap-1' : 'h-10 gap-2',
-        setPadding({ size, iconLeft, iconRight, iconOnly }),
+        getPadding({ size, iconLeft, iconRight, iconOnly }),
         variant === 'ghost' ? '' : 'bg-gohan',
         isActive ? 'bg-jiren text-piccolo' : 'text-bulma',
         isStroke && 'hover:shadow-interactive',
diff --git a/workspaces/base/src/chip/private/utils/setPadding.ts b/workspaces/base/src/chip/private/utils/getPadding.ts
similarity index 92%
rename from workspaces/base/src/chip/private/utils/setPadding.ts
rename to workspaces/base/src/chip/private/utils/getPadding.ts
index b179e49eb2..140752af57 100644
--- a/workspaces/base/src/chip/private/utils/setPadding.ts
+++ b/workspaces/base/src/chip/private/utils/getPadding.ts
@@ -1,6 +1,6 @@
 import type ChipProps from '../types/ChipProps';
 
-const setPadding = ({
+const getPadding = ({
   size,
   iconLeft,
   iconRight,
@@ -30,4 +30,4 @@ const setPadding = ({
   return `p-2`;
 };
 
-export default setPadding;
+export default getPadding;
diff --git a/workspaces/base/src/input/Input.tsx b/workspaces/base/src/input/Input.tsx
index 415786be6d..3a2b4e5fc5 100644
--- a/workspaces/base/src/input/Input.tsx
+++ b/workspaces/base/src/input/Input.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
-import mergeClassnames from '../mergeClassnames/mergeClassnames';
 import getSizeStyles from './private/getSizeStyles';
+import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -23,7 +23,7 @@ const InputPure = forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         className={mergeClassnames(
           'block w-full max-w-full py-0 px-4 m-0 appearance-none text-[1rem] text-bulma transition-shadow box-border relative z-[2]',
-          'bg-gohan shadow-input hover:shadow-input-hov',
+          'bg-goku shadow-input hover:shadow-input-hov',
           'focus:shadow-input-focus focus:outline-none',
           'focus-visible::shadow-input-focus focus-visible::outline-none',
           error &&
diff --git a/workspaces/base/src/input/private/makeBorder.ts b/workspaces/base/src/input/private/makeBorder.ts
deleted file mode 100644
index 60de8467b0..0000000000
--- a/workspaces/base/src/input/private/makeBorder.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-const makeBorder = (
-  isSideBorderHidden?: boolean,
-  isTopBottomBorderHidden?: boolean,
-  isFirst?: boolean,
-  isRtl?: boolean,
-  error?: boolean
-) => {
-  if (error) return '';
-  if (isSideBorderHidden) {
-    if (isRtl) {
-      return isFirst ? 'input-lsb-hidden' : 'input-rsb-hidden';
-    }
-    return isFirst ? 'input-rsb-hidden' : 'input-lsb-hidden';
-  } else if (isTopBottomBorderHidden) {
-    return isFirst ? 'input-bbb-hidden' : 'input-tbb-hidden';
-  }
-  return '';
-};
-
-export default makeBorder;
diff --git a/workspaces/base/src/loader/Loader.tsx b/workspaces/base/src/loader/Loader.tsx
index 72f04dbf2a..6a05891403 100644
--- a/workspaces/base/src/loader/Loader.tsx
+++ b/workspaces/base/src/loader/Loader.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type LoaderProps from './private/types/LoaderProps';
-import setDivBorder from './private/utils/setDivBorder';
-import setSize from './private/utils/setSize';
+import getDivBorder from './private/utils/getDivBorder';
+import getSize from './private/utils/getSize';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 const Loader = ({
@@ -13,11 +13,11 @@ const Loader = ({
     aria-label={ariaLabel}
     role="alert"
     aria-busy="true"
-    className={mergeClassnames(setSize(size), 'relative rounded-full')}
+    className={mergeClassnames(getSize(size), 'relative rounded-full')}
   >
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}
@@ -26,7 +26,7 @@ const Loader = ({
     />
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}
@@ -35,7 +35,7 @@ const Loader = ({
     />
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}
@@ -44,7 +44,7 @@ const Loader = ({
     />
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}
diff --git a/workspaces/base/src/loader/private/utils/setDivBorder.ts b/workspaces/base/src/loader/private/utils/getDivBorder.ts
similarity index 73%
rename from workspaces/base/src/loader/private/utils/setDivBorder.ts
rename to workspaces/base/src/loader/private/utils/getDivBorder.ts
index b30dd287d5..83f1292f42 100644
--- a/workspaces/base/src/loader/private/utils/setDivBorder.ts
+++ b/workspaces/base/src/loader/private/utils/getDivBorder.ts
@@ -1,6 +1,6 @@
 import type LoaderSize from '../types/LoaderSize';
 
-const setDivBorder = (size?: LoaderSize) => {
+const getDivBorder = (size?: LoaderSize) => {
   switch (size) {
     case '2xs':
     case 'xs':
@@ -11,4 +11,4 @@ const setDivBorder = (size?: LoaderSize) => {
   }
 };
 
-export default setDivBorder;
+export default getDivBorder;
diff --git a/workspaces/base/src/loader/private/utils/setSize.ts b/workspaces/base/src/loader/private/utils/getSize.ts
similarity index 80%
rename from workspaces/base/src/loader/private/utils/setSize.ts
rename to workspaces/base/src/loader/private/utils/getSize.ts
index 9b88b0b8af..723eeeeeb2 100644
--- a/workspaces/base/src/loader/private/utils/setSize.ts
+++ b/workspaces/base/src/loader/private/utils/getSize.ts
@@ -1,6 +1,6 @@
 import type LoaderSize from '../types/LoaderSize';
 
-const setSize = (size?: LoaderSize) => {
+const getSize = (size?: LoaderSize) => {
   switch (size) {
     case '2xs':
       return 'w-4 h-4';
@@ -15,4 +15,4 @@ const setSize = (size?: LoaderSize) => {
   }
 };
 
-export default setSize;
+export default getSize;