diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..386c343
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,33 @@
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  title?: string;
+
+  className?: string;
+}
+
+export default function Button ({
+  children,
+  onClick,
+  title,
+
+  className
+}: ButtonProps) {
+  return (
+    <button
+      className={`
+        whitespace-nowrap px-4 py-2 rounded-lg
+        text-gray-300 flex justify-center items-center
+        bg-gray-900 bg-opacity-20
+        border border-gray-900 
+        transition-all
+        ${className ? className : ""}
+      `}
+
+      onClick={onClick}
+      title={title}
+    >
+      {children}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ProjectEditor/CardEditor.tsx b/src/components/ProjectEditor/CardEditor.tsx
index 1eb244e..e3cb65b 100644
--- a/src/components/ProjectEditor/CardEditor.tsx
+++ b/src/components/ProjectEditor/CardEditor.tsx
@@ -1,10 +1,11 @@
-import type { ProjectData, ProjectDataSample } from "@/types/Project";
+import type { ProjectData } from "@/types/Project";
 import type { ChangeEvent } from "react";
 
 // Stores
 import { useUnsavedProjectStore } from "@/stores/unsaved_project";
 
 // Components
+import Button from "@/components/Button";
 import Select from "@/components/Select";
 import Input from "@/components/Input";
 import { Fragment } from "react";
@@ -84,21 +85,14 @@ export default function CardEditor ({
             )}
           </Select>
 
-          <button
-            className="
-              whitespace-nowrap px-4 py-2 rounded-lg
-              text-gray-300
-              hover:bg-blue-600
-              bg-gray-900 bg-opacity-20
-              border border-gray-900 hover:border-blue-500
-              transition-all
-            "
+          <Button
+            className="hover:bg-blue-600 hover:border-blue-500"
 
             onClick={addToSelector}
             title={`Add a ${type} to the project`}
           >
             <HiOutlinePlus size={18} />
-          </button>
+          </Button>
         </div>
 
         {children}
@@ -110,49 +104,34 @@ export default function CardEditor ({
             ? (
               <Fragment>
                 {target.id !== 0 && (
-                  <button
-                    className="
-                      px-4 py-2 rounded-lg w-full flex justify-center
-                      text-gray-300 hover:text-blue-600
-                      bg-gray-900 bg-opacity-20 hover:bg-opacity-60
-                      border border-gray-900 hover:border-blue-600
-                    "
+                  <Button
+                    className="hover:bg-blue-600 hover:border-blue-500 w-full"
 
                     title={`Move the current ${type} up`}
                     onClick={upItem}
                   >
                     <HiArrowUp size={18} />
-                  </button>
+                  </Button>
                 )}
 
-                <button
-                  className="
-                    px-4 py-2 rounded-lg w-full flex justify-center
-                    text-gray-300 hover:text-pink-600
-                    bg-gray-900 bg-opacity-20 hover:bg-opacity-60
-                    border border-gray-900 hover:border-pink-600
-                  "
+                <Button
+                  className="hover:text-pink-600 hover:border-pink-600 w-full"
 
                   title={`Remove the current ${type}`}
                   onClick={removeFromSelector}
                 >
                   <HiOutlineTrash size={18} />
-                </button>
+                </Button>
 
                 {launchpad && target.id !== ((type === "launchpad" ? data.launchpads : launchpad.pages).length - 1) && (
-                  <button
-                    className="
-                      px-4 py-2 rounded-lg w-full flex justify-center
-                      text-gray-300 hover:text-blue-600
-                      bg-gray-900 bg-opacity-20 hover:bg-opacity-60
-                      border border-gray-900 hover:border-blue-600
-                    "
+                  <Button
+                    className="hover:bg-blue-600 hover:border-blue-500 w-full"
 
                     title={`Move the current ${type} down`}
                     onClick={downItem}
                   >
                     <HiArrowDown size={18} />
-                  </button>
+                  </Button>
                 )}
               </Fragment>
             )
diff --git a/src/components/ProjectEditor/LaunchpadPageEditor.tsx b/src/components/ProjectEditor/LaunchpadPageEditor.tsx
index 5e6eb7c..3f3a3e0 100644
--- a/src/components/ProjectEditor/LaunchpadPageEditor.tsx
+++ b/src/components/ProjectEditor/LaunchpadPageEditor.tsx
@@ -90,7 +90,13 @@ export default function LaunchpadPageEditor ({
       downItem={downLaunchpadPage}
     >
 
-      <div className="w-full aspect-square bg-gray-400">
+      <div className="
+        w-full aspect-square rounded-md
+        bg-gray-400 bg-opacity-20
+        border border-gray-400
+      
+        flex justify-center items-center
+      ">
 
       </div>
     </CardEditor>
diff --git a/src/components/ProjectEditor/index.tsx b/src/components/ProjectEditor/index.tsx
index 3adc4eb..79b70e7 100644
--- a/src/components/ProjectEditor/index.tsx
+++ b/src/components/ProjectEditor/index.tsx
@@ -1,7 +1,3 @@
-import type {
-  ProjectDataSample
-} from "@/types/Project";
-
 import {
   ChangeEvent,
   useState
@@ -14,6 +10,7 @@ import { useUnsavedProjectStore } from "@/stores/unsaved_project";
 // ProjectEditor's components
 import LaunchpadEditor from "./LaunchpadEditor";
 import LaunchpadPageEditor from "./LaunchpadPageEditor";
+import LaunchpadSampleEditor from "./LaunchpadSampleEditor";
 
 export default function ProjectEditor () {
   const log = logger("/:slug~ProjectEditor");
@@ -112,7 +109,7 @@ export default function ProjectEditor () {
     // Add a new page to the current launchpad.
     const index = data_copy.launchpads[currentLaunchpadSelected].pages.length;
     const name = `Page ${index}`;
-    data_copy.launchpads[currentLaunchpadSelected].pages.push({ name, samples: [] });
+    data_copy.launchpads[currentLaunchpadSelected].pages.push({ name, samples: {} });
     
     setData(data_copy);
     setCurrentPadSelected(undefined);
@@ -166,12 +163,13 @@ export default function ProjectEditor () {
   /** Short-hand for `currentPadSelected` with data. */
   const sample = (launchpad && page && typeof currentPadSelected !== "undefined") ? {
     ...page.samples[currentPadSelected],
-    id: currentPadSelected
+    id: currentPadSelected,
+    isAssigned: !! page.samples[currentPadSelected]
   } : null;
 
   return (
     <div>
-      <div className="flex flex-row flex-wrap gap-4">
+      <div className="flex flex-row flex-wrap gap-4 mb-4">
         <LaunchpadEditor
           setCurrentLaunchpadSelected={setCurrentLaunchpadSelected}
           handleLaunchpadSelection={handleLaunchpadSelection}
@@ -197,21 +195,14 @@ export default function ProjectEditor () {
         )}
       </div>
 
-      {sample && (
-        <PadEditor
+      {launchpad && sample && page && (
+        <LaunchpadSampleEditor
+          page={page}
           sample={sample}
+          launchpad={launchpad}
         />
       )}
     </div>
   );
 }
 
-const PadEditor = ({ sample }: { sample: ProjectDataSample & { id: number } }) => {
-  return (
-    <div>
-      <p>
-        Viewing sample from note {sample.id}
-      </p>
-    </div>
-  );
-};
\ No newline at end of file