diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0a34381
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vs
\ No newline at end of file
diff --git a/README.md b/README.md
index 0ed34d0..f4bf75e 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 # PolyrhythmMaker
-Create and download long and or complex polyrhythms as midi files.
+Create and download long and/or complex polyrhythms as midi files. Try the [live website app](https://selim-sheta.github.io/PolyrhythmMaker) to generate, vizualize, preview and download your own polyrhythms.
 
-https://selim-sheta.github.io/PolyrhythmMaker
\ No newline at end of file
+
+Project inspired by: https://youtu.be/SthcxWPXG_E?si=hkXKBKlslRpAWaXP
\ No newline at end of file
diff --git a/index.html b/index.html
index 5778d7a..1471d20 100644
--- a/index.html
+++ b/index.html
@@ -2,28 +2,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Polyrhythm Generator</title>
+    <title>Polyrhythm Maker</title>
     <script src="midiwriter.js"></script>
     <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
+    <link href="style.css" rel="stylesheet">
 </head>
 <body>
-    <h1>Polyrhythm Generator</h1>
-    
-    <form id="polyrhythmForm">
-        <h3>Global Settings</h3>
-        <label for="tempo">Tempo (BPM):</label>
-        <input type="number" onchange="generateMidi()" id="tempo" name="tempo" value="120" min="1" max="300" required>
-        <label for="duration">Duration (seconds):</label>
-        <input type="number" onchange="generateMidi()" id="duration" name="duration" value="30" min="1" max="600" required>
-        <button type="button" onclick="addNote()">Add Note</button>
-        <button type="button" onclick="downloadMidi()">Download</button>
-        <div id="noteInputs"></div> <!-- Container for dynamic note inputs -->
-    </form>
-
-    <midi-player id="player" src="" sound-font></midi-player>
-
-    <midi-visualizer type="piano-roll" id="v_roll" src=""></midi-visualizer>
-
+    <div class="mainContainer">
+        <h1>Polyrhythm Maker</h1>
+
+        <form id="polyrhythmForm">
+            <div class="globalParameters">
+                <label for="tempo">Tempo (BPM):</label>
+                <input type="number" onchange="generateMidi()" id="tempo" name="tempo" value="120" min="1" max="300" required>
+                <label for="duration">Duration (seconds):</label>
+                <input type="number" onchange="generateMidi()" id="duration" name="duration" value="30" min="1" max="600" required>
+                <button type="button" onclick="addNote()">Add Note</button>
+                <button type="button" onclick="downloadMidi()">Download</button>
+            </div>
+            <div id="noteInputs"></div> <!-- Container for dynamic note inputs -->
+        </form>
+
+        <midi-player id="player" src="" sound-font></midi-player>
+
+        <midi-visualizer type="piano-roll" id="v_roll" src=""></midi-visualizer>
+    </div>
     <script>
 
         let globalDataUri = "";
@@ -67,6 +70,7 @@ <h3>Global Settings</h3>
             const noteIndex = container.children.length + 1;
             const noteDiv = document.createElement('div');
             noteDiv.id = 'noteContainer' + noteIndex;
+            noteDiv.className = 'noteContainer'
             noteDiv.innerHTML = `
                 <label for="note${noteIndex}">Pitch</label>
                 <select id="note${noteIndex}" onchange="generateMidi()" name="note${noteIndex}">
@@ -91,18 +95,9 @@ <h3>Global Settings</h3>
                 <select id="duration${noteIndex}" onchange="generateMidi()" name="duration${noteIndex}" required>
                     <option value="1">whole</option>
                     <option value="2">half</option>
-                    <option value="d2">dotted half</option>
-                    <option value="dd2">double dotted half</option>
                     <option value="4" selected="selected">quarter</option>
-                    <option value="4t">quarter triplet</option>
-                    <option value="d4">dotted quarter</option>
-                    <option value="dd4">double dotted quarter</option>
                     <option value="8">eighth</option>
-                    <option value="8t">eighth triplet</option>
-                    <option value="d8">dotted eighth</option>
-                    <option value="dd8">double dotted eighth</option>
                     <option value="16">sixteenth</option>
-                    <option value="16t">sixteenth triplet</option>
                     <option value="32">thirty-second</option>
                     <option value="64">sixty-fourth</option>
                 </select>
@@ -116,7 +111,7 @@ <h3>Global Settings</h3>
                 <label for="beats${noteIndex}">times every</label>
                 <input type="number" onchange="generateMidi()" id="beats${noteIndex}" name="beats${noteIndex}" min="1" max="100" value="${defaultBeats}" required>
                 
-                <label for="xbut${noteIndex}">beats</label>
+                <label for="xbut${noteIndex}">beats.</label>
                 <button type="button" onchange="generateMidi()" id="xbut${noteIndex}" onclick="removeNote(${noteIndex})">X</button>
             `;
             container.appendChild(noteDiv);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f331c8e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,117 @@
+:root {
+    --text: #032319;
+    --background: #fafffd;
+    --primary: #2d5c4e;
+    --secondary: #af9ad6;
+    --accent: #f2b44e;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: var(--background);
+    color: var(--text);
+    padding: 20px;
+    margin: 0;
+    
+}
+
+.mainContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center; /* Centers content horizontally */
+    align-items: center; /* Optional: if you also want vertical centering */
+}
+
+h1, h3 {
+    color: var(--primary);
+}
+
+form {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    margin-top: 20px;
+    overflow-x: hidden;
+    max-height: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center; /* Centers content horizontally */
+    align-items: center; /* Optional: if you also want vertical centering */
+}
+
+label {
+    margin: 5px 0 5px;
+}
+
+input[type="number"],
+select {
+    padding: 8px;
+    margin: 5px 0 5px;
+    border: 1px solid var(--secondary);
+    border-radius: 4px;
+    box-sizing: border-box; /* Makes padding not affect width */
+}
+
+button {
+    background-color: var(--primary);
+    color: white;
+    border: none;
+    padding: 10px 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 5px;
+}
+
+button:hover {
+    background-color: var(--accent);
+}
+
+#noteInputs {
+    width: 100%; /* Ensures the container spans the full width of its parent */
+    overflow-x: auto; /* Enables horizontal scrolling when content overflows */
+    margin-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center; /* Centers content horizontally */
+    align-items: center; /* Optional: if you also want vertical centering */
+}
+
+#noteInputs label,
+#noteInputs input,
+#noteInputs select {
+    display: inline-block;
+    width: auto;
+    margin-right: 10px;
+}
+
+#noteInputs button {
+    background-color: var(--secondary);
+}
+
+#noteInputs button:hover {
+    background-color: var(--accent);
+}
+
+.noteContainer {
+    display: inline-block;
+    font-size: 14px;
+    border-top: 1px solid var(--secondary);
+    white-space: nowrap; /* Prevents items from wrapping to the next line */
+}
+
+midi-player {
+    display: block;
+    margin-top: 20px;
+    width: 100%;
+    max-width: 600px;
+}
+
+midi-visualizer {
+    display: block;
+    margin-top: 20px;
+    max-width: 100%;
+}
\ No newline at end of file
