diff --git a/templates/unit1.html b/templates/unit1.html
index f749195..b5238ae 100644
--- a/templates/unit1.html
+++ b/templates/unit1.html
@@ -35,12 +35,12 @@
         <div class="first">
           <p>Alkane:</p>
           <p>Any hydrocarbon with only single bonds</p>
-          <p>Example: <a href="../../3d/butane">butane</a></p>
+          <p>Example: <a href="/3d/butane/">butane</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/pent-2-ene"
+            src="/3d/butane/"
             title="butane"
           ></iframe>
         </div>
@@ -50,12 +50,12 @@
         <div class="first">
           <p>Alkene:</p>
           <p>Any hydrocarbon with double bonds</p>
-          <p>Example: <a href="../../3d/pent-2-ene">pent-2-ene</a></p>
+          <p>Example: <a href="/3d/pent-2-ene/">pent-2-ene</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/pent-2-ene"
+            src="/3d/pent-2-ene/"
             title="butane"
           ></iframe>
         </div>
@@ -65,12 +65,12 @@
         <div class="first">
           <p>Alkyne:</p>
           <p>Any hydrocarbon with triple bonds</p>
-          <p>Example: <a href="../../3d/hex-3-yne">hex-3-yne</a></p>
+          <p>Example: <a href="/3d/hex-3-yne/">hex-3-yne</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/hex-3-yne"
+            src="/3d/hex-3-yne/"
             title="butane"
           ></iframe>
         </div>
@@ -82,12 +82,12 @@
           <p>
             Any hydrocarbon that contains benzene or benzene like properties
           </p>
-          <p>Example: <a href="../../3d/benzene">benzene</a></p>
+          <p>Example: <a href="/3d/benzene/">benzene</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/benzene"
+            src="/3d/benzene/"
             title="benzene"
           ></iframe>
         </div>
@@ -98,12 +98,12 @@
         <div class="first">
           <p>Alcohol:</p>
           <p>A hydrocarbon with a main hydroxyl (OH) branch</p>
-          <p>Example: <a href="../../3d/propan-2-ol">propan-2-ol</a></p>
+          <p>Example: <a href="/3d/propan-2-ol/">propan-2-ol</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/propan-2-ol"
+            src="/3d/propan-2-ol/"
             title="propan-2-ol"
           ></iframe>
         </div>
@@ -117,12 +117,12 @@
             A hydrocarbon with double bonded oxygen (=O), single bonded hydrogen
             (H)
           </p>
-          <p>Example: <a href="../../3d/ethanal">ethanal</a></p>
+          <p>Example: <a href="/3d/ethanal/">ethanal</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/ethanal"
+            src="/3d/ethanal/"
             title="ethanal"
           ></iframe>
         </div>
@@ -134,13 +134,13 @@
           <p>Ether:</p>
           <p>A hydrocarbon with an oxygen (O) between two alkyl groups</p>
           <p>
-            Example: <a href="../../3d/1-methoxypropane">1-methoxypropane</a>
+            Example: <a href="/3d/1-methoxypropane/">1-methoxypropane</a>
           </p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/1-methoxypropane"
+            src="/3d/1-methoxypropane/"
             title="1-methoxypropane"
           ></iframe>
         </div>
@@ -154,12 +154,12 @@
             A hydrocarbon with a carboxyl group (C(=O)OH) attached to an alkyl
             groups
           </p>
-          <p>Example: <a href="../../3d/ethanoic_acid">ethanoic acid</a></p>
+          <p>Example: <a href="/3d/ethanoic_acid/">ethanoic acid</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/ethanoic_acid"
+            src="/3d/ethanoic_acid/"
             title="ethanoic_acid"
           ></iframe>
         </div>
@@ -173,12 +173,12 @@
             A hydrocarbon with a double bonded oxygen (C=O) attached to two
             alkyl groups
           </p>
-          <p>Example: <a href="../../3d/pentan-2-one">pentan-2-one</a></p>
+          <p>Example: <a href="/3d/pentan-2-one/">pentan-2-one</a></p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/pentan-2-one"
+            src="/3d/pentan-2-one/"
             title="pentan-2-one"
           ></iframe>
         </div>
@@ -193,13 +193,13 @@
             (O-C=O) attached to two alkyl groups
           </p>
           <p>
-            Example: <a href="../../3d/propyl_ethanoate">propyl ethanoate</a>
+            Example: <a href="/3d/propyl_ethanoate/">propyl ethanoate</a>
           </p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/propyl_ethanoate"
+            src="/3d/propyl_ethanoate/"
             title="propyl_ethanoate"
           ></iframe>
         </div>
@@ -215,13 +215,13 @@
           </p>
           <p>
             Example:
-            <a href="../../3d/n-methylbutan-2-amine">n-methylbutan-2-amine</a>
+            <a href="/3d/n-methylbutan-2-amine/">n-methylbutan-2-amine</a>
           </p>
         </div>
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/n-methylbutan-2-amine"
+            src="/3d/n-methylbutan-2-amine/"
             title="n-methylbutan-2-amine"
           ></iframe>
         </div>
@@ -237,7 +237,7 @@
           </p>
           <p>
             Example:
-            <a href="../../3d/n_n-dimethylpropanamide"
+            <a href="/3d/n_n-dimethylpropanamide/"
               >n,n-dimethylpropanamide</a
             >
           </p>
@@ -245,7 +245,7 @@
         <div class="second">
           <iframe
             loading="lazy"
-            src="../../3d/n_n-dimethylpropanamide"
+            src="/3d/n_n-dimethylpropanamide/"
             title="n_n-dimethylpropanamide"
           ></iframe>
         </div>