diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index f5f528dc..d117efe1 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -8,6 +8,7 @@ import {
   deleteActivePattern,
   duplicateActivePattern,
   getUserPattern,
+  renameActivePattern,
 } from '../../settings.mjs';
 
 function classNames(...classes) {
@@ -34,6 +35,9 @@ export function PatternsTab({ context }) {
           <button className="underline" onClick={() => duplicateActivePattern()}>
             duplicate
           </button>
+          <button className="underline" onClick={() => renameActivePattern()}>
+            rename
+          </button>
           <button className="underline" onClick={() => deleteActivePattern()}>
             delete
           </button>
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 75980db4..2f9feaae 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -112,6 +112,20 @@ export function getUserPattern(key) {
   return userPatterns[key];
 }
 
+export function renameActivePattern() {
+  const newName = prompt('Enter new name');
+  let userPatterns = getUserPatterns();
+  if (userPatterns[newName]) {
+    alert('Name already taken!');
+    return;
+  }
+  let activePattern = getSetting('activePattern');
+  userPatterns[newName] = userPatterns[activePattern]; // copy code
+  delete userPatterns[activePattern];
+  setUserPatterns({ ...userPatterns });
+  setActivePattern(newName);
+}
+
 export function updateUserPattern(code) {
   const userPatterns = getUserPatterns();
   let activePattern = getSetting('activePattern');