diff --git a/app/src/components/header/index.tsx b/app/src/components/header/index.tsx
index 60d39c7..19cc1b4 100644
--- a/app/src/components/header/index.tsx
+++ b/app/src/components/header/index.tsx
@@ -7,6 +7,7 @@ import {
   Container,
   Heading,
   Text,
+  Kbd,
 } from "@chakra-ui/react";
 
 import HeaderMobile from "./mobile";
@@ -19,7 +20,7 @@ const Header = () => {
   return (
     <Box pos="sticky" top="0" w="full" bg={bg} borderBottomWidth="1px">
       <Container maxW="98%" py={5}>
-        <Flex alignItems="center" justifyContent="space-between">
+        <Flex alignItems="center" justifyContent="space-around">
           <CustomLink href="/" external={false}>
             <HStack spacing={3}>
               <Heading fontSize="18px">SuperUI</Heading>
@@ -43,6 +44,11 @@ const Header = () => {
                 </CustomLink>
               ))}
             </HStack>
+          </HStack>
+          <HStack spacing={5}>
+            <span>
+              <Kbd>⌘</Kbd> + <Kbd>K</Kbd>
+            </span>
             <Theme />
           </HStack>
           <HeaderMobile />
diff --git a/app/src/data/headerLinks.ts b/app/src/data/headerLinks.ts
index 81f1b2c..dc7f8c4 100644
--- a/app/src/data/headerLinks.ts
+++ b/app/src/data/headerLinks.ts
@@ -1,4 +1,9 @@
 export const HeaderLinks = [
+  {
+    title: "About",
+    slug: "/about",
+    external: false,
+  },
   {
     title: "Community",
     slug: "/community",
@@ -14,4 +19,9 @@ export const HeaderLinks = [
     slug: "https://github.com/pheralb/superui",
     external: true,
   },
+  {
+    title: "Contribute",
+    slug: "https://github.com/pheralb/superui",
+    external: true,
+  },
 ];
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index 766e52d..34bf82d 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -1,96 +1,7 @@
 import { useState } from "react";
-import {
-  Avatar,
-  AvatarGroup,
-  Button,
-  Input,
-  LinearProgress,
-  Group,
-  Modal,
-  Checkbox,
-  PinCode,
-} from "superui";
 
 import "superui/dist/index.css";
 
 export default function Docs() {
-  const [isOpen, setOpen] = useState(false);
-  return (
-    <>
-      <h1>Docs</h1>
-      <div className="flex flex-col gap-3">
-        <Button variant="primary">Primary Button</Button>
-        <PinCode />
-        <Checkbox label="Checkbox" variant="primary">
-          <span className="text-gray-600">Primary checkbox</span>
-        </Checkbox>
-        <Group variant="outline">
-          <Group.Item name="1">Item 1</Group.Item>
-          <Group.Item name="2">Item 2</Group.Item>
-          <Group.Item name="3">Item 3</Group.Item>
-        </Group>
-        <LinearProgress variant="primary" type="determinate" value={50} />
-        <LinearProgress variant="secondary" type="determinate" value={25} />
-        <LinearProgress variant="danger" type="determinate" value={75} />
-        <div className="inline-flex items-end gap-3">
-          <Avatar
-            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
-            alt="Prueba"
-            size="xs"
-            type="square"
-          />
-          <Avatar
-            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
-            alt="Prueba"
-            size="sm"
-            type="circle"
-            bordered
-          />
-          <Avatar
-            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
-            alt="Prueba"
-            size="md"
-            type="square"
-            bordered
-          />
-          <Avatar
-            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
-            alt="Prueba"
-            size="lg"
-            type="circle"
-          />
-          <Avatar
-            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
-            alt="Prueba"
-            size="xl"
-            type="square"
-            bordered
-          />
-        </div>
-        <AvatarGroup
-          max={4}
-          data={Array.from(Array(10).keys()).map((i) => ({
-            name: `${i}`,
-            alt: `${i}`,
-            src: `https://source.boringavatars.com/beam/120/${i}?colors=264653,2a9d8f,e9c46a,f4a261,e76f51`,
-          }))}
-          size="lg"
-        />
-        <Button variant="primary" onClick={() => setOpen(true)}>
-          Open Modal
-        </Button>
-        <Modal
-          isOpen={isOpen}
-          title="Delete folder"
-          confirmLabel="Delete"
-          variant="danger"
-          onClose={() => setOpen(false)}
-          blur
-        >
-          Are you sure you want to delete "Documents"? All contents will be
-          perminately destroyed.
-        </Modal>
-      </div>
-    </>
-  );
+  return <h1>Index</h1>;
 }
diff --git a/app/src/pages/test.tsx b/app/src/pages/test.tsx
new file mode 100644
index 0000000..abb9595
--- /dev/null
+++ b/app/src/pages/test.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+
+type Props = {};
+import {
+  Avatar,
+  AvatarGroup,
+  Button,
+  Input,
+  LinearProgress,
+  Group,
+  Modal,
+  Checkbox,
+  PinCode,
+} from "superui";
+export default function Test({}: Props) {
+  const [isOpen, setOpen] = useState(false);
+
+  return (
+    <>
+      <h1>Docs</h1>
+      <div className="flex flex-col gap-3">
+        <Button variant="primary">Primary Button</Button>
+        <PinCode />
+        <Checkbox label="Checkbox" variant="primary">
+          <span className="text-gray-600">Primary checkbox</span>
+        </Checkbox>
+        <Group variant="outline">
+          <Group.Item name="1">Item 1</Group.Item>
+          <Group.Item name="2">Item 2</Group.Item>
+          <Group.Item name="3">Item 3</Group.Item>
+        </Group>
+        <LinearProgress variant="primary" type="determinate" value={50} />
+        <LinearProgress variant="secondary" type="determinate" value={25} />
+        <LinearProgress variant="danger" type="determinate" value={75} />
+        <div className="inline-flex items-end gap-3">
+          <Avatar
+            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
+            alt="Prueba"
+            size="xs"
+            type="square"
+          />
+          <Avatar
+            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
+            alt="Prueba"
+            size="sm"
+            type="circle"
+            bordered
+          />
+          <Avatar
+            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
+            alt="Prueba"
+            size="md"
+            type="square"
+            bordered
+          />
+          <Avatar
+            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
+            alt="Prueba"
+            size="lg"
+            type="circle"
+          />
+          <Avatar
+            src="https://avatars0.githubusercontent.com/u/22749943?s=460&v=4"
+            alt="Prueba"
+            size="xl"
+            type="square"
+            bordered
+          />
+        </div>
+        <AvatarGroup
+          max={4}
+          data={Array.from(Array(10).keys()).map((i) => ({
+            name: `${i}`,
+            alt: `${i}`,
+            src: `https://source.boringavatars.com/beam/120/${i}?colors=264653,2a9d8f,e9c46a,f4a261,e76f51`,
+          }))}
+          size="lg"
+        />
+        <Button variant="primary" onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          isOpen={isOpen}
+          title="Delete folder"
+          confirmLabel="Delete"
+          variant="danger"
+          onClose={() => setOpen(false)}
+          blur
+        >
+          Are you sure you want to delete "Documents"? All contents will be
+          perminately destroyed.
+        </Modal>
+      </div>
+    </>
+  );
+}