diff --git a/frontend/islands/new.tsx b/frontend/islands/new.tsx
index b9ac6115..88e313f6 100644
--- a/frontend/islands/new.tsx
+++ b/frontend/islands/new.tsx
@@ -33,6 +33,7 @@ interface ScopeSelectProps {
   initialScope: string | undefined;
   scopeUsage: number;
   scopeLimit: number;
+  locked: boolean;
 }
 
 export function ScopeSelect(
@@ -42,6 +43,7 @@ export function ScopeSelect(
     initialScope,
     scopeLimit: initialScopeLimit,
     scopeUsage: initialScopeUsage,
+    locked,
   }: ScopeSelectProps,
 ) {
   const scopeUsage = useSignal(initialScopeUsage);
@@ -63,6 +65,7 @@ export function ScopeSelect(
             scopes.value = [...scopes.value, newScope];
             scope.value = newScope;
           }}
+          locked={locked}
         />
       </div>
     );
@@ -81,16 +84,19 @@ export function ScopeSelect(
             scope.value = newScope;
             scopeUsage.value++;
           }}
+          locked={locked}
         />
-        <p>
-          or{" "}
-          <button
-            class="inline link"
-            onClick={() => explicitCreateScope.value = false}
-          >
-            select an existing scope
-          </button>
-        </p>
+        {!locked && (
+          <p>
+            or{" "}
+            <button
+              class="inline link"
+              onClick={() => explicitCreateScope.value = false}
+            >
+              select an existing scope
+            </button>
+          </p>
+        )}
         <p class="text-gray-700 text-sm mt-2">
           You can create {scopesLeft === 0 ? "no" : scopesLeft}{" "}
           more scope{scopesLeft !== 1 && "s"}.{" "}
@@ -107,24 +113,29 @@ export function ScopeSelect(
         class="w-full mt-4 block py-2 px-4 input-container input select"
         onChange={(e) => scope.value = e.currentTarget.value}
         value={scope}
+        disabled={locked}
+        data-locked={locked || undefined}
       >
         <option value="" disabled selected class="hidden text-gray-100">
           ---
         </option>
         {scopes.value.map((scope) => <option value={scope}>{scope}</option>)}
       </select>
-      <p class="text-gray-500">
-        or{" "}
-        <button
-          class="inline link mt-2"
-          onClick={() => {
-            explicitCreateScope.value = true;
-            scope.value = "";
-          }}
-        >
-          create a new scope
-        </button>
-      </p>
+
+      {!locked && (
+        <p class="text-gray-500">
+          or{" "}
+          <button
+            class="inline link mt-2"
+            onClick={() => {
+              explicitCreateScope.value = true;
+              scope.value = "";
+            }}
+          >
+            create a new scope
+          </button>
+        </p>
+      )}
     </>
   );
 }
@@ -133,6 +144,7 @@ function CreateScope(
   props: {
     initialValue: string | undefined;
     onCreate: (scope: string) => void;
+    locked: boolean;
   },
 ) {
   const newScope = useSignal(props.initialValue ?? "");
@@ -178,6 +190,8 @@ function CreateScope(
             type="text"
             name="scope"
             placeholder="foo"
+            disabled={props.locked}
+            data-locked={props.locked || undefined}
             value={newScope}
             onInput={(e) => {
               newScope.value = e.currentTarget.value;
@@ -197,14 +211,16 @@ function CreateScope(
         ? (
           <p class="text-sm text-yellow-600">
             Scope names can not contain _, use - instead.{" "}
-            <button
-              class="text-cyan-700 hover:underline hover:text-blue-400"
-              onClick={() => {
-                newScope.value = newScope.value.replace(/_/g, "-");
-              }}
-            >
-              Click to replace
-            </button>
+            {!props.locked && (
+              <button
+                class="text-cyan-700 hover:underline hover:text-blue-400"
+                onClick={() => {
+                  newScope.value = newScope.value.replace(/_/g, "-");
+                }}
+              >
+                Click to replace
+              </button>
+            )}
           </p>
         )
         : message.value && <p class="text-sm text-yellow-600">{message}</p>}
@@ -213,10 +229,11 @@ function CreateScope(
 }
 
 export function PackageName(
-  { scope, name, pkg }: {
+  { scope, name, pkg, locked }: {
     scope: Signal<string>;
     name: Signal<string>;
     pkg: Signal<Package | null | undefined>;
+    locked: boolean;
   },
 ) {
   const error = useSignal("");
@@ -283,6 +300,8 @@ export function PackageName(
         type="text"
         name="package"
         placeholder="bar"
+        disabled={locked}
+        data-locked={locked || undefined}
         value={name}
         onInput={(e) => {
           name.value = e.currentTarget.value;
@@ -299,15 +318,16 @@ export function PackageName(
       {name.value.includes("_")
         ? (
           <p class="text-sm text-yellow-600">
-            Package names can not contain _, use - instead.{" "}
-            <button
-              class="text-cyan-700 hover:underline hover:text-blue-400"
-              onClick={() => {
-                name.value = name.value.replace(/_/g, "-");
-              }}
-            >
-              Click to replace
-            </button>
+            Package names can not contain _, use - instead. {!locked && (
+              <button
+                class="text-cyan-700 hover:underline hover:text-blue-400"
+                onClick={() => {
+                  name.value = name.value.replace(/_/g, "-");
+                }}
+              >
+                Click to replace
+              </button>
+            )}
           </p>
         )
         : message.value && <p class="text-sm text-yellow-600">{message}</p>}
@@ -390,7 +410,8 @@ export function CreatePackage({ scope, name, pkg, fromCli }: {
               </p>
               {fromCli && (
                 <p class="mt-2 text-gray-500">
-                  Go back to your terminal to continue publishing.
+                  You can now close this page and go back to your terminal to
+                  continue publishing.
                 </p>
               )}
             </div>
diff --git a/frontend/routes/new.tsx b/frontend/routes/new.tsx
index ad728152..e44a4895 100644
--- a/frontend/routes/new.tsx
+++ b/frontend/routes/new.tsx
@@ -77,6 +77,7 @@ export default function New(props: PageProps<Data, State>) {
                     initialScope={props.data.initialScope}
                     scopeUsage={props.state.user.scopeUsage}
                     scopeLimit={props.state.user.scopeLimit}
+                    locked={props.data.fromCli}
                   />
                 )
                 : (
@@ -104,8 +105,12 @@ export default function New(props: PageProps<Data, State>) {
                 The name of your package must be unique within the scope you
                 selected.
               </p>
-              <PackageName scope={scope} name={name} pkg={pkg} />
-
+              <PackageName
+                scope={scope}
+                name={name}
+                pkg={pkg}
+                locked={props.data.fromCli}
+              />
               <CreatePackage
                 scope={scope}
                 name={name}
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index e91116d0..4ea630a5 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -154,8 +154,14 @@
   .input-container {
     @apply bg-white rounded-md leading-snug
       border-1.5 border-jsr-cyan-900/30 focus-within:border-jsr-cyan-500
-      has-[input:disabled,select:disabled]:border-gray-300 has-[input:disabled,select:disabled]:text-jsr-gray-300 has-[input:disabled,select:disabled]:cursor-not-allowed
-      has-[input:disabled,select:disabled]:bg-gray-100;
+  }
+
+  select:not([data-locked="true"]):disabled.input-container, input:not([data-locked="true"]):disabled.input-container, .input-container input:not([data-locked="true"]):disabled, .input-container select:not([data-locked="true"]):disabled {
+    @apply border-gray-300 text-jsr-gray-300 cursor-not-allowed bg-jsr-gray-100;
+  }
+
+  select[data-locked="true"].input-container, input[data-locked="true"].input-container, .input-container input[data-locked="true"], .input-container select[data-locked="true"] {
+    @apply text-jsr-gray-500 cursor-not-allowed bg-gray-50;
   }
 
   .input {
@@ -167,7 +173,7 @@
   }
 
   .select {
-    @apply appearance-none outline-none;
+    @apply appearance-none outline-none opacity-100;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')
       no-repeat;
     background-position: center right 0.5rem;