diff --git a/app/data/components.tsx b/app/data/components.tsx
index 5f2fac140..7b6caf7f2 100644
--- a/app/data/components.tsx
+++ b/app/data/components.tsx
@@ -328,14 +328,14 @@ export const COMPONENTS_DATA: Component[] = [
   //   link: `/docs/components/skeleton`,
   //   classes: 'w-40'
   // },
-  // {
-  //   id: '42',
-  //   name: 'KBD (Keyboard)',
-  //   image: '/images/components/keyboard.svg',
-  //   imageDark: '/images/components/keyboard-dark.svg',
-  //   link: `/docs/components/kbd`,
-  //   classes: 'w-40'
-  // },
+  {
+    id: '42',
+    name: 'KBD (Keyboard)',
+    image: '/images/components/keyboard.svg',
+    imageDark: '/images/components/keyboard-dark.svg',
+    link: `/docs/components/kbd`,
+    classes: 'w-40',
+  },
   // {
   //   id: '43',
   //   name: 'Drawer (offcanvas)',
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index af9d4143f..280f055f3 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -278,7 +278,14 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
                     <SidebarLink href="/docs/components/dropdown">Dropdown</SidebarLink>
                     <SidebarLink href="/docs/components/footer">Footer</SidebarLink>
                     <SidebarLink href="/docs/components/forms">Forms</SidebarLink>
-                    <SidebarLink href="/docs/components/kbd">KBD</SidebarLink>
+                    <SidebarLink href="/docs/components/kbd">
+                      <span className="flex items-center gap-2">
+                        KDB{' '}
+                        <Badge color="cyan" className="px-2">
+                          New
+                        </Badge>
+                      </span>
+                    </SidebarLink>
                     <SidebarLink href="/docs/components/list-group">List group</SidebarLink>
                     <SidebarLink href="/docs/components/modal">Modal</SidebarLink>
                     <SidebarLink href="/docs/components/navbar">Navbar</SidebarLink>
@@ -315,7 +322,14 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
                 </Accordion.Title>
                 <Accordion.Content className="mb-2 border-none p-0">
                   <Sidebar.ItemGroup className="border-none">
-                    <SidebarLink href="/docs/forms/floating-label">Floating Label</SidebarLink>
+                    <SidebarLink href="/docs/forms/floating-label">
+                      <span className="flex items-center gap-2">
+                        Floating Label{' '}
+                        <Badge color="cyan" className="px-2">
+                          New
+                        </Badge>
+                      </span>
+                    </SidebarLink>
                   </Sidebar.ItemGroup>
                 </Accordion.Content>
               </Accordion.Panel>
diff --git a/public/images/components/floating-label.svg b/public/images/components/floating-label.svg
new file mode 100644
index 000000000..b1e536bfe
--- /dev/null
+++ b/public/images/components/floating-label.svg
@@ -0,0 +1,11 @@
+<svg width="284" height="200" viewBox="0 0 284 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 85C0 80.5817 3.58172 77 8 77H276C280.418 77 284 80.5817 284 85V125H0V85Z" fill="#E5E7EB"/>
+<rect x="12" y="81" width="59" height="6" rx="2" fill="#1C64F2"/>
+<rect y="123" width="284" height="2" fill="#D1D5DB"/>
+<rect y="152" width="59" height="6" rx="2" fill="#1C64F2"/>
+<rect y="198" width="284" height="2" fill="#D1D5DB"/>
+<rect x="0.5" y="2.5" width="283" height="47" rx="7.5" fill="white"/>
+<rect x="0.5" y="2.5" width="283" height="47" rx="7.5" stroke="#D1D5DB"/>
+<rect width="73" height="6" transform="translate(16)" fill="white"/>
+<rect x="24" width="57" height="6" rx="2" fill="#1C64F2"/>
+</svg>