diff --git a/package-lock.json b/package-lock.json
index 834c5e5..5976b9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.1.1",
         "@testing-library/user-event": "^13.5.0",
+        "nanoid": "^3.3.4",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-scripts": "5.0.1",
@@ -11151,9 +11152,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
-      "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -24075,9 +24076,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
-      "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA=="
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
     "natural-compare": {
       "version": "1.4.0",
diff --git a/package.json b/package.json
index e71c92d..3a9bba3 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "nanoid": "^3.3.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",
diff --git a/src/App.js b/src/App.js
index e6a8ee4..bed7f3b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,13 @@
-import Page from "./Page";
+import Page from "./components/Page";
 import "./App.css";
 
 const App = () => {
-  console.log("App");
   return (
     <div className="App">
       <Page />
       <center>
         <strong>
-          Created By: <a href="https://github.com/Gameonn">Gameonn</a>{" "}
+          Created By: <a href="https://github.com/Gameonn">Gameonn</a>
         </strong>
         - devChallenges.io
       </center>
diff --git a/src/Button.js b/src/Button.js
deleted file mode 100644
index ecfd5f3..0000000
--- a/src/Button.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import styles from "./Button.module.css";
-
-const Button = ({
-  variant,
-  text,
-  disableShadow,
-  states,
-  disabled,
-  size,
-  color,
-  startIcon,
-  endIcon,
-  children
-}) => {
-  return (
-    <button
-      className={`
-    ${styles.button}
-    ${color ? styles[color] : styles["default"]}
-    ${styles[variant]}
-    ${disableShadow ? styles.disableShadow : undefined}
-    ${styles[size]}`}
-      disabled={disabled ? "disabled" : ""}
-    >
-      {startIcon && <span className="material-icons">{startIcon}</span>}
-      {/* {variant && <span className={styles["caps"]}> {variant}</span>}
-      {color && <span className={styles["caps"]}> {color}</span>}  */}
-      <span className={styles["caps"]}> Default </span>
-      {endIcon && <span className="material-icons">{endIcon}</span>}
-    </button>
-  );
-};
-
-export default Button;
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..10cc692
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,39 @@
+import styles from "./Button.module.css";
+
+const Button = (...props) => {
+  console.log(props, "Button");
+  return <p>Hey</p>;
+};
+
+// const Button = ({
+//   variant,
+//   text,
+//   disableShadow,
+//   states,
+//   disabled,
+//   size,
+//   color,
+//   startIcon,
+//   endIcon,
+//   children
+// }) => {
+//   return (
+//     <button
+//       className={`
+//     ${styles.button}
+//     ${color ? styles[color] : styles["default"]}
+//     ${styles[variant]}
+//     ${disableShadow ? styles.disableShadow : undefined}
+//     ${styles[size]}`}
+//       disabled={disabled ? "disabled" : ""}
+//     >
+//       {startIcon && <span className="material-icons">{startIcon}</span>}
+//       {/* {variant && <span className={styles["caps"]}> {variant}</span>}
+//       {color && <span className={styles["caps"]}> {color}</span>}  */}
+//       <span className={styles["caps"]}> Default </span>
+//       {endIcon && <span className="material-icons">{endIcon}</span>}
+//     </button>
+//   );
+// };
+
+export default Button;
diff --git a/src/Button.module.css b/src/components/Button.module.css
similarity index 100%
rename from src/Button.module.css
rename to src/components/Button.module.css
diff --git a/src/components/ButtonType.js b/src/components/ButtonType.js
new file mode 100644
index 0000000..e3cb549
--- /dev/null
+++ b/src/components/ButtonType.js
@@ -0,0 +1,38 @@
+import Button from "./Button";
+import { FlexboxGrid, Divider } from "rsuite";
+import { nanoid } from "nanoid";
+
+let styleObj = {
+  display: "block",
+  height: "40px"
+};
+
+const ButtonType = ({ title, types, set }) => {
+  // console.log(types, "types");
+  let item = {};
+  let selectedTypes = Object.fromEntries(
+    Object.keys(types).filter(([key]) => key.includes(set))
+  )[set];
+  // console.log(selectedTypes);
+  return (
+    <div>
+      <b> {title} </b>
+      <FlexboxGrid justify="space-around">
+        {selectedTypes &&
+          selectedTypes.map(type => {
+            item[set] = type;
+            return (
+              <FlexboxGrid.Item colspan={6} key={nanoid()}>
+                <small style={styleObj}> {`<Button  />`} </small>
+                <Button {...item} />
+              </FlexboxGrid.Item>
+            );
+          })}
+      </FlexboxGrid>
+
+      <Divider />
+    </div>
+  );
+};
+
+export default ButtonType;
diff --git a/src/Main.js b/src/components/Main.js
similarity index 84%
rename from src/Main.js
rename to src/components/Main.js
index 280ddcb..b4d6934 100644
--- a/src/Main.js
+++ b/src/components/Main.js
@@ -1,4 +1,5 @@
 import Button from "./Button";
+import ButtonType from "./ButtonType";
 import { FlexboxGrid, Divider } from "rsuite";
 
 let styleObj = {
@@ -6,30 +7,36 @@ let styleObj = {
   height: "40px"
 };
 
+const variantTypes = ["", "outline", "text"];
+const colorTypes = ["default", "primary", "danger", "secondary"];
+const sizeTypes = ["xs", "sm", "md", "lg"];
+const startIconTypes = ["home", "bookmarks", "bolt", "book"];
+const endIconTypes = ["toys", "whatshot", "weekend", "vignette"];
+
+const types = {
+  color: ["default", "primary", "danger", "secondary"],
+  size: ["xs", "sm", "md", "lg"],
+  variant: ["", "outline", "text"],
+  startIcon: ["home", "bookmarks", "bolt", "book"],
+  endIcon: ["toys", "whatshot", "weekend", "vignette"]
+};
+
 const Main = () => {
-  console.log("Main");
   return (
     <div>
       <h4>Buttons</h4> <br />
       <div className="show-grid">
-        <b> Normal </b>
-        <FlexboxGrid justify="space-around">
-          <FlexboxGrid.Item colspan={6}>
-            <small style={styleObj}> {`<Button />`} </small>
-            <Button />
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item colspan={6}>
-            <small style={styleObj}>{`<Button variant="outline" />`}</small>
-            <Button variant="outline" />
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item colspan={6}>
-            <small style={styleObj}> {`<Button variant="text" />`} </small>
-            <Button variant="text" />
-          </FlexboxGrid.Item>
-        </FlexboxGrid>
-
-        <Divider />
+        <ButtonType types={types} set="variant" title="Normal" />
+        <ButtonType types={types} set="color" title="Colors" />
+        <ButtonType types={types} set="size" title="Size" />
+        <ButtonType
+          types={startIconTypes}
+          set="startIcon"
+          title="Start Icons"
+        />
+        <ButtonType types={endIconTypes} set="endIcon" title="End Icons" />
         <b> Colors </b>
+
         <FlexboxGrid justify="space-around">
           <FlexboxGrid.Item colspan={4}>
             <small style={styleObj}> {`<Button color="default" />`} </small>
diff --git a/src/Page.js b/src/components/Page.js
similarity index 100%
rename from src/Page.js
rename to src/components/Page.js