diff --git a/package-lock.json b/package-lock.json
index b0bca4a..2ae69cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "@emotion/styled": "^11.11.0",
         "framer-motion": "^10.16.5",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.12.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.37",
@@ -4736,6 +4737,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
+      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 3f57fc7..643d3ed 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "@emotion/styled": "^11.11.0",
     "framer-motion": "^10.16.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
deleted file mode 100644
index 78b3446..0000000
--- a/src/components/Button/Button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export const Button = ({
-  onClickCallback,
-  children,
-}: {
-  onClickCallback: () => void;
-  children: React.ReactNode;
-}) => {
-  return (
-    <button
-      onClick={onClickCallback}
-      className="p-3 drop-shadow-md rounded-lg bg-white hover:bg-neutral-50 active:bg-neutral-200 border border-neutral-800"
-    >
-      {children}
-    </button>
-  );
-};
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
deleted file mode 100644
index 8b166a8..0000000
--- a/src/components/Button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Button';
diff --git a/src/components/NotesList/NotesList.tsx b/src/components/NotesList/NotesList.tsx
index 1f5f0e2..a0546c0 100644
--- a/src/components/NotesList/NotesList.tsx
+++ b/src/components/NotesList/NotesList.tsx
@@ -1,9 +1,20 @@
-import { Note } from "../../config/Notes";
+import { Note } from "../../config";
 
-export const NotesList = ({ notes }: { notes: Note[] }) => {
+export const NotesList = ({
+  notes,
+  GuitarStringDecorator,
+}: {
+  notes: Note[];
+  GuitarStringDecorator?: React.ReactNode;
+}) => {
   return (
-    <div className="flex flex-col md:flex-row md:gap-7 text-[35px] md:text-[45px] mt-6 mb-6 font-bold">
-      {notes.map((note: Note, index: number) => <div key={index}>{note}</div>)}
-    </div>
+    <>
+      <div className="text-[25px] md:text-[25px] font-bold text-neutral-500">{GuitarStringDecorator}</div>
+      <div className="flex flex-col md:flex-row md:gap-7 text-[35px] md:text-[45px] mb-6 font-bold">
+        {notes.map((note: Note, index: number) => (
+          <div key={index}>{note}</div>
+        ))}
+      </div>
+    </>
   );
 };
diff --git a/src/components/index.ts b/src/components/index.ts
index 16f7a19..be78984 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1 @@
-export * from './Button';
 export * from './NotesList';
diff --git a/src/config/GuitarStrings.ts b/src/config/GuitarStrings.ts
new file mode 100644
index 0000000..b57dcf6
--- /dev/null
+++ b/src/config/GuitarStrings.ts
@@ -0,0 +1,12 @@
+export enum GuitarStrings {
+	String1 = 'String 1',
+	String2 = 'String 2',
+	String3 = 'String 3',
+	String4 = 'String 4',
+	String5 = 'String 5',
+	String6 = 'String 6',
+}
+
+export type GuitarString = keyof typeof GuitarStrings;
+
+export const guitarStrings = Object.values(GuitarStrings) as unknown as GuitarString[];
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 0000000..052b0c0
--- /dev/null
+++ b/src/config/index.ts
@@ -0,0 +1,2 @@
+export * from './Notes';
+export * from './GuitarStrings';
diff --git a/src/pages/NotesPage.tsx b/src/pages/NotesPage.tsx
index e0e1d73..eb425ba 100644
--- a/src/pages/NotesPage.tsx
+++ b/src/pages/NotesPage.tsx
@@ -1,29 +1,61 @@
 import { useState } from "react";
+import { Button } from "@chakra-ui/react";
+import { MdBuild } from "react-icons/md";
+import { TbArrowsRandom } from "react-icons/tb";
 
+import { GuitarString, Note } from "../config";
 import { NotesList } from "../components";
-import { Note } from "../config/Notes";
-import { getListOfRandomNotes } from "../services/noteService";
-import { Button } from "@chakra-ui/react";
+
+import { getListOfRandomNotes, getRandomString } from "../services";
 
 export const NotesPage = () => {
   const [notes, setNotes] = useState<Note[]>(getListOfRandomNotes());
+  const [isStringVisible, setIsStringVisible] = useState(false);
+  const [guitarString, setGuitarString] = useState<GuitarString>(getRandomString());
 
-  const handleOnClick = () => {
+  const handleGetRandomNoteOnClick = () => {
     setNotes(getListOfRandomNotes());
+    setGuitarString(getRandomString());
+  };
+
+  const toggleStringVisible = () => {
+    setIsStringVisible((prevState: boolean) => !prevState);
   };
 
+  const GuitarStringDecorator: React.ReactNode = (
+    <div className={`${isStringVisible ? "" : "invisible"}`}>
+      {guitarString}
+    </div>
+  );
+
   return (
-    <div className="h-screen flex flex-col items-center justify-around">
-      <div className="text-lg font-semibold">RANDOM NOTES GENERATOR</div>
+    <div className="h-screen flex flex-col items-center justify-between">
+      <div className="text-lg font-semibold mt-5">RANDOM NOTES GENERATOR</div>
       <div className="w-screen flex items-center justify-center">
         <div className="flex flex-col items-center">
-          <NotesList notes={notes} />
-          <Button variant='outline' onClick={handleOnClick}>
-            Generate list of notes
-          </Button>
+          <NotesList
+            notes={notes}
+            GuitarStringDecorator={GuitarStringDecorator}
+          />
+          <div className="flex flex-col gap-1">
+            <Button
+              leftIcon={<TbArrowsRandom />}
+              variant="outline"
+              onClick={handleGetRandomNoteOnClick}
+            >
+              Generate list of notes
+            </Button>
+            <Button
+              leftIcon={<MdBuild />}
+              variant="outline"
+              onClick={toggleStringVisible}
+            >
+              Toggle string complexity
+            </Button>
+          </div>
         </div>
       </div>
-      <div>
+      <div className="mb-5">
         {"Made with ❤️ by "}
         <a
           href="https://github.com/cyrilgourgouillon"
diff --git a/src/services/index.ts b/src/services/index.ts
new file mode 100644
index 0000000..c996077
--- /dev/null
+++ b/src/services/index.ts
@@ -0,0 +1,2 @@
+export * from './noteService'
+export * from './stringService'
diff --git a/src/services/noteService.ts b/src/services/noteService.ts
index 724590d..032afb6 100644
--- a/src/services/noteService.ts
+++ b/src/services/noteService.ts
@@ -1,4 +1,4 @@
-import { Note, notes } from "../config/Notes";
+import { Note, notes } from "../config";
 import { shuffle } from "../utils/shuffle";
 
 export const getListOfRandomNotes = (): Note[] => {
diff --git a/src/services/stringService.ts b/src/services/stringService.ts
new file mode 100644
index 0000000..d5da0ea
--- /dev/null
+++ b/src/services/stringService.ts
@@ -0,0 +1,5 @@
+import { GuitarString, guitarStrings } from "../config";
+
+export const getRandomString = (): GuitarString => {
+  return guitarStrings[Math.floor(Math.random()*guitarStrings.length)];
+};