diff --git a/package.json b/package.json
index 5695195..0e93327 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 7a52eff..cc4e5f8 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Input, type InputProps } from "./index";
+import { InkIcon } from "../..";
 
 const meta: Meta<InputProps> = {
   title: "Components/Input",
@@ -17,3 +18,15 @@ type Story = StoryObj<typeof meta>;
 export const Simple: Story = {
   args: {},
 };
+
+export const WithIconLeft: Story = {
+  args: {
+    iconLeft: <InkIcon.Search />,
+  },
+};
+
+export const WithIconRight: Story = {
+  args: {
+    iconRight: <InkIcon.Deposit />,
+  },
+};
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 9212424..6c5227d 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -4,20 +4,32 @@ import { classNames } from "../../util/classes";
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   className?: string;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, iconLeft, iconRight, ...props }, ref) => {
+    const iconClasses =
+      "ink:shrink-0 ink:size-3 ink:-my-1 ink:flex ink:items-center ink:justify-center ink:text-text-muted ink:group-focus-within:text-text-on-secondary ink:transition-colors ink:transition-default-animation";
     return (
-      <input
-        ref={ref}
+      <label
         className={classNames(
-          "ink:w-full ink:font-default ink:rounded-xs ink:bg-background-container ink:p-2 ink:h-2 ink:text-body-2-regular ink:text-text-default",
-          "focus:ink:outline focus:ink:outline-1 ink:outline-text-on-secondary",
+          "ink:w-full ink:flex ink:items-center ink:justify-center ink:gap-1 ink:box-border ink:group",
+          "ink:p-2 ink:h-6",
+          "ink:font-default ink:rounded-xs ink:bg-background-container ink:text-body-2-regular ink:text-text-default",
+          "ink:border-1 ink:border-transparent ink:focus-within:border-text-on-secondary ink:transition-colors ink:transition-default-animation",
           className
         )}
-        {...props}
-      />
+      >
+        {iconLeft && <div className={iconClasses}>{iconLeft}</div>}
+        <input
+          className="ink:w-full ink:outline-none ink:box-border ink:-my-1 ink:placeholder:text-body-2-regular ink:placeholder:text-text-muted"
+          ref={ref}
+          {...props}
+        />
+        {iconRight && <div className={iconClasses}>{iconRight}</div>}
+      </label>
     );
   }
 );