diff --git a/build.gradle b/build.gradle
index 59da21991..798dab338 100644
--- a/build.gradle
+++ b/build.gradle
@@ -316,12 +316,13 @@ task jsxDocs(type: Exec, dependsOn: [illuaminateDocs]) {
     description = "Post-processes documentation to statically render some dynamic content."
 
     inputs.files(fileTree("src/web")).withPropertyName("sources")
+    inputs.file("src/generated/export/index.json").withPropertyName("export")
     inputs.file("package-lock.json").withPropertyName("package-lock.json")
     inputs.file("tsconfig.json").withPropertyName("Typescript config")
     inputs.files(fileTree("$buildDir/docs/lua"))
     outputs.dir("$buildDir/docs/site")
 
-    commandLine mkCommand("'node_modules/.bin/ts-node' --esm src/web/transform.tsx")
+    commandLine mkCommand('"node_modules/.bin/ts-node" --esm src/web/transform.tsx')
 }
 
 task docWebsite(type: Copy, dependsOn: [jsxDocs]) {
diff --git a/src/main/java/dan200/computercraft/shared/computer/blocks/TileComputerBase.java b/src/main/java/dan200/computercraft/shared/computer/blocks/TileComputerBase.java
index 88bad785a..3d4f98852 100644
--- a/src/main/java/dan200/computercraft/shared/computer/blocks/TileComputerBase.java
+++ b/src/main/java/dan200/computercraft/shared/computer/blocks/TileComputerBase.java
@@ -437,6 +437,7 @@ protected void transferStateFrom( TileComputerBase copy )
             label = copy.label;
             on = copy.on;
             startOn = copy.startOn;
+            lockCode = copy.lockCode;
             updateBlock();
         }
         copy.instanceID = -1;
diff --git a/src/main/java/dan200/computercraft/shared/peripheral/diskdrive/DiskDrivePeripheral.java b/src/main/java/dan200/computercraft/shared/peripheral/diskdrive/DiskDrivePeripheral.java
index 4d21f7176..db47fe6ef 100644
--- a/src/main/java/dan200/computercraft/shared/peripheral/diskdrive/DiskDrivePeripheral.java
+++ b/src/main/java/dan200/computercraft/shared/peripheral/diskdrive/DiskDrivePeripheral.java
@@ -30,6 +30,11 @@
  * When a disk is inserted, a {@code disk} event is fired, with the side peripheral is on. Likewise, when the disk is
  * detached, a {@code disk_eject} event is fired.
  *
+ * ## Recipe
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:disk_drive"></mc-recipe>
+ * </div>
+ *
  * @cc.module drive
  */
 public class DiskDrivePeripheral implements IPeripheral
diff --git a/src/main/java/dan200/computercraft/shared/peripheral/modem/ModemPeripheral.java b/src/main/java/dan200/computercraft/shared/peripheral/modem/ModemPeripheral.java
index fde98d4fe..c815f67ab 100644
--- a/src/main/java/dan200/computercraft/shared/peripheral/modem/ModemPeripheral.java
+++ b/src/main/java/dan200/computercraft/shared/peripheral/modem/ModemPeripheral.java
@@ -75,6 +75,15 @@
  *
  * print("Received a reply: " .. tostring(message))
  * }</pre>
+ *
+ * ## Recipes
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:wireless_modem_normal"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:wireless_modem_advanced"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:wired_modem"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:cable"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:wired_modem_full_from"></mc-recipe>
+ * </div>
  */
 public abstract class ModemPeripheral implements IPeripheral, IPacketSender, IPacketReceiver
 {
diff --git a/src/main/java/dan200/computercraft/shared/peripheral/monitor/MonitorPeripheral.java b/src/main/java/dan200/computercraft/shared/peripheral/monitor/MonitorPeripheral.java
index bb83499ab..d574212b3 100644
--- a/src/main/java/dan200/computercraft/shared/peripheral/monitor/MonitorPeripheral.java
+++ b/src/main/java/dan200/computercraft/shared/peripheral/monitor/MonitorPeripheral.java
@@ -25,6 +25,12 @@
  *
  * Like computers, monitors come in both normal (no colour) and advanced (colour) varieties.
  *
+ * ## Recipes
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:monitor_normal"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:monitor_advanced"></mc-recipe>
+ * </div>
+ *
  * @cc.module monitor
  * @cc.usage Write "Hello, world!" to an adjacent monitor:
  *
diff --git a/src/main/java/dan200/computercraft/shared/peripheral/printer/PrinterPeripheral.java b/src/main/java/dan200/computercraft/shared/peripheral/printer/PrinterPeripheral.java
index 8d881db9b..64f33cc5e 100644
--- a/src/main/java/dan200/computercraft/shared/peripheral/printer/PrinterPeripheral.java
+++ b/src/main/java/dan200/computercraft/shared/peripheral/printer/PrinterPeripheral.java
@@ -18,6 +18,11 @@
 /**
  * The printer peripheral allows pages and books to be printed.
  *
+ * ## Recipe
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:printer"></mc-recipe>
+ * </div>
+ *
  * @cc.module printer
  */
 public class PrinterPeripheral implements IPeripheral
diff --git a/src/main/java/dan200/computercraft/shared/peripheral/speaker/SpeakerPeripheral.java b/src/main/java/dan200/computercraft/shared/peripheral/speaker/SpeakerPeripheral.java
index 9f543e713..34e6baac5 100644
--- a/src/main/java/dan200/computercraft/shared/peripheral/speaker/SpeakerPeripheral.java
+++ b/src/main/java/dan200/computercraft/shared/peripheral/speaker/SpeakerPeripheral.java
@@ -41,8 +41,10 @@
  * - {@link #playSound} plays any built-in Minecraft sound, such as block sounds or mob noises.
  * - {@link #playAudio} can play arbitrary audio.
  *
- * <h2>Recipe</h2>
- * <McRecipe recipe="computercraft:speaker"></McRecipe>
+ * ## Recipe
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:speaker"></mc-recipe>
+ * </div>
  *
  * @cc.module speaker
  * @cc.since 1.80pr1
diff --git a/src/main/resources/assets/computercraft/lang/uk_UA.json b/src/main/resources/assets/computercraft/lang/uk_UA.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/src/main/resources/assets/computercraft/lang/uk_UA.json
@@ -0,0 +1 @@
+{}
diff --git a/src/web/components/Recipe.tsx b/src/web/components/Recipe.tsx
index 1dbf34c4f..40d402156 100644
--- a/src/web/components/Recipe.tsx
+++ b/src/web/components/Recipe.tsx
@@ -10,9 +10,12 @@ const Item: FunctionComponent<{ item: string }> = ({ item }) => {
         src={`/images/items/${item.replace(":", "/")}.png`}
         alt={itemName}
         title={itemName}
+        className="recipe-icon"
     />
 };
 
+const EmptyItem: FunctionComponent = () => <span className="recipe-icon " />;
+
 const Arrow: FunctionComponent<JSX.IntrinsicElements["svg"]> = (props) => <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.513 45.512" {...props}>
     <g>
         <path d="M44.275,19.739L30.211,5.675c-0.909-0.909-2.275-1.18-3.463-0.687c-1.188,0.493-1.959,1.654-1.956,2.938l0.015,5.903
@@ -27,18 +30,17 @@ const Recipe: FunctionComponent<{ recipe: string }> = ({ recipe }) => {
     const recipeInfo = data.recipes[recipe];
     if (!recipeInfo) throw Error("Cannot find recipe for " + recipe);
 
-    return <div className="recipe-container">
-        <div className="recipe">
-            <strong className="recipe-title">{data.itemNames[recipeInfo.output]}</strong>
-            <div className="recipe-inputs">
-                {recipeInfo.inputs.map((items, i) => <div className="recipe-item recipe-input" key={i}>{items && <Item item={items[0]} />}</div>)}
-            </div>
-            <Arrow className="recipe-arrow" />
-            <div className="recipe-item recipe-output">
-                <Item item={recipeInfo.output} />
-                {recipeInfo.count > 1 && <span className="recipe-count">{recipeInfo.count}</span>}
-            </div>
+    return <div className="recipe">
+        <strong className="recipe-title">{data.itemNames[recipeInfo.output]}</strong>
+        <div className="recipe-inputs">
+            {recipeInfo.inputs.map((items, i) => <div className="recipe-item recipe-input" key={i}>{items ? <Item item={items[0]} /> : <EmptyItem />}</div>)}
         </div>
-    </div>;
-}
+        <Arrow className="recipe-arrow" />
+        <div className="recipe-item recipe-output">
+            <Item item={recipeInfo.output} />
+            {recipeInfo.count > 1 && <span className="recipe-count">{recipeInfo.count}</span>}
+        </div>
+    </div>
+};
+
 export default Recipe;
diff --git a/src/web/styles.css b/src/web/styles.css
index d72373384..5ed6964aa 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -40,7 +40,6 @@ pre.highlight {
     z-index: 200;
     top: 0px;
     top: 0px;
-    ;
 }
 
 /* Behold, the most cursed CSS! copy-cat's resizing algorithm is a weird, in
@@ -108,11 +107,12 @@ pre.highlight {
     --recipe-size: 32px;
 }
 
-
 .recipe-container {
     display: flex;
     justify-content: center;
     margin: 1em 0;
+    gap: 1em;
+    flex-wrap: wrap;
 }
 
 .recipe {
@@ -127,6 +127,7 @@ pre.highlight {
 }
 
 .recipe-title {
+    color: #222; /* Same as --foreground in light theme. Ugly, but too lazy to style in dark for now. */
     grid-column-start: span 3;
 }
 
@@ -148,7 +149,7 @@ pre.highlight {
     background-color: var(--recipe-hover);
 }
 
-.recipe-item > img {
+.recipe-icon {
     display: block;
     width: var(--recipe-size);
     height: var(--recipe-size);
@@ -163,6 +164,14 @@ pre.highlight {
 }
 
 .recipe-output {
-    /* Hrm! */
     align-self: center;
+    position: relative;
+}
+
+.recipe-count {
+    position: absolute;
+    bottom: 0;
+    right: var(--recipe-padding);
+    color: #fff;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
 }