diff --git a/libs/shared/lib/components/Design guides/styleGuide.mdx b/libs/shared/lib/components/Design guides/styleGuide.mdx
index 8d15b583616cd34b8e354de2959e16233e299118..2a08a222ffb76876b65ab65c476453a150ced47c 100644
--- a/libs/shared/lib/components/Design guides/styleGuide.mdx	
+++ b/libs/shared/lib/components/Design guides/styleGuide.mdx	
@@ -2,7 +2,8 @@ import { Meta, Unstyled } from '@storybook/blocks';
 import { ColorPalette, ColorItem, IconGallery, IconItem, Canvas } from '@storybook/blocks';
 import { Button } from '../buttons/.';
 
-import { Text } from '../inputs/.';
+import { TextInput } from '@graphpolaris/shared/lib/components/inputs';
+
 import { Icon } from '../icon/.';
 
 import {
@@ -986,15 +987,7 @@ The general guide is to not use shadows in the components. However in inputs and
 <div style={{ display: 'flex', justifyContent: 'center' }}>
 
 <div className="w-52 m-5">
-  <Text
-    label="Username"
-    placeholder="Enter your username"
-    value=""
-    required={true}
-    errorText="Username is required"
-    validate={() => console.log('d')}
-    onChange={() => console.log('d')}
-   type="text"/>
+  <TextInput type="text" label="Text Label" value="" onChange={(value) => console.log(value)} />
 </div>
 </div>
 
@@ -1005,3 +998,7 @@ To add a new component, include the following files:
 - "index.tsx": component's code.
 - "componentName.stories.tsx": Story's definition. On tag Meta defines the location of the component in the Storybook dashboard e.g.: title: 'Components/Button'
 - "overview.mdx": Component's documentation.
+
+```
+
+```