diff --git a/frontend/src/layout/Sidebar.jsx b/frontend/src/layout/Sidebar.jsx
index 5f67ba9..6e14a58 100644
--- a/frontend/src/layout/Sidebar.jsx
+++ b/frontend/src/layout/Sidebar.jsx
@@ -8,8 +8,8 @@ const navItems = [
     label: "Melodies",
     permission: "melodies",
     children: [
-      { to: "/melodies", label: "Editor" },
-      { to: "/melodies/builder", label: "Builder" },
+      { to: "/melodies", label: "Main Editor" },
+      { to: "/melodies/builder", label: "Archetypes" },
       { to: "/melodies/settings", label: "Settings" },
     ],
   },
diff --git a/frontend/src/melodies/MelodyDetail.jsx b/frontend/src/melodies/MelodyDetail.jsx
index 22fcca6..96f20ae 100644
--- a/frontend/src/melodies/MelodyDetail.jsx
+++ b/frontend/src/melodies/MelodyDetail.jsx
@@ -201,13 +201,35 @@ export default function MelodyDetail() {
           </div>
         </div>
         {canEdit && (
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowPlayback(true)}
+              className="px-4 py-2 text-sm rounded-md transition-colors"
+              style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+            >
+              Playback
+            </button>
+            <button
+              onClick={() => setShowSpeedCalc(true)}
+              className="px-4 py-2 text-sm rounded-md transition-colors"
+              style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+            >
+              Speed Calculator
+            </button>
+            <div className="w-px h-6 mx-1" style={{ backgroundColor: "var(--border-primary)" }} />
+            <button
+              onClick={() => navigate(`/melodies/${id}/edit`)}
+              className="px-4 py-2 text-sm rounded-md transition-colors"
+              style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
+            >
+              Edit
+            </button>
             {melody.status === "draft" ? (
               <button
                 onClick={handlePublish}
                 disabled={actionLoading}
                 className="px-4 py-2 text-sm rounded-md transition-colors disabled:opacity-50"
-                style={{ backgroundColor: "#16a34a", color: "#fff" }}
+                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
               >
                 {actionLoading ? "Publishing..." : "Publish"}
               </button>
@@ -216,36 +238,15 @@ export default function MelodyDetail() {
                 onClick={() => setShowUnpublish(true)}
                 disabled={actionLoading}
                 className="px-4 py-2 text-sm rounded-md transition-colors disabled:opacity-50"
-                style={{ backgroundColor: "#ea580c", color: "#fff" }}
+                style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
               >
                 Unpublish
               </button>
             )}
-            <button
-              onClick={() => setShowPlayback(true)}
-              className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
-            >
-              Playback
-            </button>
-            <button
-              onClick={() => setShowSpeedCalc(true)}
-              className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
-            >
-              Speed Calculator
-            </button>
-            <button
-              onClick={() => navigate(`/melodies/${id}/edit`)}
-              className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
-            >
-              Edit
-            </button>
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
+              style={{ backgroundColor: "var(--danger)", color: "var(--text-white)" }}
             >
               Delete
             </button>
diff --git a/frontend/src/melodies/MelodyForm.jsx b/frontend/src/melodies/MelodyForm.jsx
index e7ae59e..c992407 100644
--- a/frontend/src/melodies/MelodyForm.jsx
+++ b/frontend/src/melodies/MelodyForm.jsx
@@ -5,6 +5,7 @@ import TranslationModal from "./TranslationModal";
 import SelectBuiltMelodyModal from "./builder/SelectBuiltMelodyModal";
 import BuildOnTheFlyModal from "./builder/BuildOnTheFlyModal";
 import SpeedCalculatorModal from "./SpeedCalculatorModal";
+import PlaybackModal from "./PlaybackModal";
 import {
   getLocalizedValue,
   getLanguageName,
@@ -86,6 +87,7 @@ export default function MelodyForm() {
   const [showSelectBuilt, setShowSelectBuilt] = useState(false);
   const [showBuildOnTheFly, setShowBuildOnTheFly] = useState(false);
   const [showSpeedCalc, setShowSpeedCalc] = useState(false);
+  const [showPlayback, setShowPlayback] = useState(false);
   const [builtMelody, setBuiltMelody] = useState(null);
   const [assignedBinaryName, setAssignedBinaryName] = useState(null);
 
@@ -270,35 +272,97 @@ export default function MelodyForm() {
         <h1 className="text-2xl font-bold" style={headingStyle}>
           {isEdit ? "Edit Melody" : "Add Melody"}
         </h1>
-        <div className="flex gap-3">
-          {isEdit && (
-            <button
-              type="button"
-              onClick={() => setShowSpeedCalc(true)}
-              className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
-            >
-              Speed Calculator
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={() => navigate(isEdit ? `/melodies/${id}` : "/melodies")}
-            className="px-4 py-2 text-sm rounded-md transition-colors"
-            style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
-          >
-            Cancel
-          </button>
-          {!isEdit ? (
+        <div className="flex items-center gap-2">
+          {isEdit ? (
             <>
+              <button
+                type="button"
+                onClick={() => setShowPlayback(true)}
+                className="px-4 py-2 text-sm rounded-md transition-colors"
+                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+              >
+                Playback
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowSpeedCalc(true)}
+                className="px-4 py-2 text-sm rounded-md transition-colors"
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+              >
+                Speed Calculator
+              </button>
+              <div className="w-px h-6 mx-1" style={{ backgroundColor: "var(--border-primary)" }} />
+              {melodyStatus === "draft" ? (
+                <>
+                  <button
+                    type="submit"
+                    form="melody-form"
+                    disabled={saving || uploading}
+                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+                  >
+                    {saving ? "Saving..." : "Update Melody"}
+                  </button>
+                  <button
+                    type="button"
+                    disabled={saving || uploading}
+                    onClick={handlePublishAction}
+                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+                  >
+                    {uploading ? "Uploading..." : "Publish"}
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button
+                    type="submit"
+                    form="melody-form"
+                    disabled={saving || uploading}
+                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+                  >
+                    {uploading ? "Uploading..." : saving ? "Saving..." : "Update Melody"}
+                  </button>
+                  <button
+                    type="button"
+                    disabled={saving || uploading}
+                    onClick={handleUnpublishAction}
+                    className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    style={{ backgroundColor: "var(--danger-btn)", color: "var(--text-white)" }}
+                  >
+                    Unpublish
+                  </button>
+                </>
+              )}
+              <button
+                type="button"
+                onClick={() => navigate(`/melodies/${id}`)}
+                className="px-4 py-2 text-sm rounded-md transition-colors"
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+              >
+                Cancel
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={() => navigate("/melodies")}
+                className="px-4 py-2 text-sm rounded-md transition-colors"
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
+              >
+                Cancel
+              </button>
+              <div className="w-px h-6 mx-1" style={{ backgroundColor: "var(--border-primary)" }} />
               <button
                 type="submit"
                 form="melody-form"
                 disabled={saving || uploading}
                 className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
+                style={{ backgroundColor: "var(--btn-neutral)", color: "var(--text-white)" }}
               >
-                {saving ? "Saving..." : "Save as Draft"}
+                {saving ? "Saving..." : "Save Draft"}
               </button>
               <button
                 type="button"
@@ -307,49 +371,7 @@ export default function MelodyForm() {
                 className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
               >
-                {uploading ? "Uploading files..." : "Publish Melody"}
-              </button>
-            </>
-          ) : melodyStatus === "draft" ? (
-            <>
-              <button
-                type="submit"
-                form="melody-form"
-                disabled={saving || uploading}
-                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
-              >
-                {saving ? "Saving..." : "Update Draft"}
-              </button>
-              <button
-                type="button"
-                disabled={saving || uploading}
-                onClick={handlePublishAction}
-                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "#16a34a", color: "#fff" }}
-              >
-                {uploading ? "Uploading files..." : "Publish"}
-              </button>
-            </>
-          ) : (
-            <>
-              <button
-                type="submit"
-                form="melody-form"
-                disabled={saving || uploading}
-                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
-              >
-                {uploading ? "Uploading files..." : saving ? "Saving..." : "Update Melody"}
-              </button>
-              <button
-                type="button"
-                disabled={saving || uploading}
-                onClick={handleUnpublishAction}
-                className="px-4 py-2 text-sm rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ backgroundColor: "#ea580c", color: "#fff" }}
-              >
-                Unpublish
+                {uploading ? "Uploading..." : "Publish Melody"}
               </button>
             </>
           )}
@@ -634,6 +656,13 @@ export default function MelodyForm() {
 
       {isEdit && (
         <>
+          <PlaybackModal
+            open={showPlayback}
+            melody={{ id, information, default_settings: settings, type, url, uid, pid }}
+            builtMelody={builtMelody}
+            archetypeCsv={information.archetype_csv || null}
+            onClose={() => setShowPlayback(false)}
+          />
           <SpeedCalculatorModal
             open={showSpeedCalc}
             melody={{ id, information, default_settings: settings, type, url, uid, pid }}