diff --git a/website/src/views/modules/ModuleTree.scss b/website/src/views/modules/ModuleTree.scss
index a7a90873a5..72aeee60e4 100644
--- a/website/src/views/modules/ModuleTree.scss
+++ b/website/src/views/modules/ModuleTree.scss
@@ -4,6 +4,7 @@ $connector-size: 0.75rem;
 
 .container {
   display: flex;
+  flex-direction: row-reverse;
   overflow-y: auto;
   align-items: center;
   // Leave some space for the tooltip
@@ -42,12 +43,12 @@ $connector-size: 0.75rem;
   justify-content: center;
   align-items: center;
   padding: 0.125rem 0.25rem;
-  margin: 0 0 1px $connector-size;
+  margin: 0 $connector-size 1px 0;
   border-radius: $btn-border-radius;
 
   &::before {
     top: 50%;
-    left: -$connector-size;
+    right: -$connector-size;
     width: $connector-size;
     height: 1px;
   }
@@ -75,11 +76,12 @@ $connector-size: 0.75rem;
 .conditional {
   flex: 0 0 auto;
   margin-right: $connector-size;
+  margin-left: $connector-size;
   border: 0;
 
   &::after {
     top: 50%;
-    right: -$connector-size;
+    left: -$connector-size;
     width: $connector-size;
     height: 1px;
   }
@@ -88,11 +90,12 @@ $connector-size: 0.75rem;
 .branch {
   position: relative;
   display: flex;
+  flex-direction: row-reverse;
   align-items: center;
 
   &::before,
   &::after {
-    left: 0;
+    right: 0;
     width: 1px;
     height: 50%;
   }
@@ -111,19 +114,19 @@ $connector-size: 0.75rem;
   }
 }
 
-.prereqBranch {
+.dependentBranch {
   &::before,
   &::after {
-    right: 0;
-    left: auto;
+    left: 0;
+    right: auto;
   }
 }
 
-.prereqNode {
-  margin: 0 $connector-size 1px 0;
+.dependentNode {
+  margin: 0 0 1px $connector-size;
 
   &::before {
-    right: -$connector-size;
-    left: auto;
+    left: -$connector-size;
+    right: auto;
   }
 }
diff --git a/website/src/views/modules/ModuleTree.tsx b/website/src/views/modules/ModuleTree.tsx
index 51da28a75d..1f62d24708 100644
--- a/website/src/views/modules/ModuleTree.tsx
+++ b/website/src/views/modules/ModuleTree.tsx
@@ -17,10 +17,10 @@ type Props = {
 interface TreeDisplay {
   layer: number;
   node: PrereqTree;
-  isPrereq?: boolean;
+  isDependent?: boolean;
 }
 
-const formatConditional = (name: string) => (name === 'or' ? 'one of' : 'all of');
+const formatConditional = (name: string) => (name === 'or' ? 'take one' : 'take all');
 
 const nodeName = (node: PrereqTree) => (typeof node === 'string' ? node : Object.keys(node)[0]);
 
@@ -38,7 +38,7 @@ const Branch: React.FC<{ nodes: PrereqTree[]; layer: number }> = (props) => (
 );
 
 const Tree: React.FC<TreeDisplay> = (props) => {
-  const { layer, node, isPrereq } = props;
+  const { layer, node, isDependent } = props;
 
   const isConditional = typeof node !== 'string';
   const name = nodeName(node);
@@ -49,7 +49,7 @@ const Tree: React.FC<TreeDisplay> = (props) => {
         className={classnames(styles.node, {
           [`hoverable color-${layer}`]: !isConditional,
           [styles.conditional]: isConditional,
-          [styles.prereqNode]: isPrereq,
+          [styles.dependentNode]: isDependent,
         })}
       >
         {isConditional ? (
@@ -76,14 +76,14 @@ const ModuleTree: React.FC<Props> = (props) => {
               {fulfillRequirements.map((fulfilledModule) => (
                 <li
                   key={fulfilledModule}
-                  className={classnames(styles.branch, styles.prereqBranch)}
+                  className={classnames(styles.branch, styles.dependentBranch)}
                 >
-                  <Tree layer={0} node={fulfilledModule} isPrereq />
+                  <Tree layer={0} node={fulfilledModule} isDependent />
                 </li>
               ))}
             </ul>
 
-            <div className={classnames(styles.node, styles.conditional)}>needs</div>
+            <div className={classnames(styles.node, styles.conditional)}>unlocks</div>
           </>
         )}