diff --git a/index.html b/index.html
index 12c5dfc..3828eb9 100644
--- a/index.html
+++ b/index.html
@@ -16,20 +16,36 @@
 
       rect#map {
         fill: gainsboro;
-        opacity: 0;
+        opacity: 0.33;
       }
 
-      image {
+      image#img1 {
         transform: scale(3.41) rotate(-0.15deg);
         /* opacity: 0.33; */
       }
 
+      image#img2 {
+        transform: scale(1.39) rotate(0.07deg);
+        /* opacity: 0.33; */
+      }
+
       .wall {
         fill: none;
         stroke: red;
         stroke-width: 7px;
         opacity: 0.7;
       }
+
+      #hex {
+        opacity: 0.2;
+        /* stroke: black;
+        stroke-opacity: 0.2; */
+        transform: scale(0.26) translate(-2in, -2in);
+      }
+
+      #asterisk {
+        font-size: 30;
+      }
     </style>
   </head>
   <body>
@@ -41,15 +57,25 @@
         </pattern>
 
         <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
+
+        <linearGradient id="gradient" gradientTransform="rotate(45)">
+          <stop offset="50%" stop-color="gold" />
+          <stop offset="95%" stop-color="red" />
+        </linearGradient>
+
+        <circle id="point" cx="0" cy="0" r="0.07in" />
+        <polygon id="hex" fill="url('#gradient')" points="0,121.32 184.152,15.544 368.312,121.32 368.312,332.864 184.152,438.64 0,332.864 "/>
+        <text id="asterisk" x="-0.06in" y="0.22in">*</text>
       </defs>
       
       <line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
       <line x1="-0.25in" y1="0" x2="-0.25in" y2="22in" stroke="url(#vert)" />
-      <image href="map1.png" height="6.428in" width="9.971in" />
+      <!-- <image id="img1" href="map1.png" height="6.428in" width="9.971in" /> -->
+      <image id="img2" href="scans/map1.jpg" width="2284" height="1518" />
       <rect id="map" x="0" y="0" width="34in" height="22in" />
 
-      <rect class="wall" x="3.77in" y="1.49in" width="4.3in" height="7.33in" />
-      <line class="wall" x1="5.93in" y1="1.49in" x2="5.93in" y2="4.41in" />
+      <rect class="wall" x="4.04in" y="1.65in" width="4.09in" height="7.16in" />
+      <!-- <line class="wall" x1="5.93in" y1="1.49in" x2="5.93in" y2="4.41in" />
       <line class="wall" x1="5.93in" y1="5.36in" x2="5.93in" y2="8.82in" />
       <line class="wall" x1="6.98in" y1="3.59in" x2="6.98in" y2="5.36in" />
 
@@ -57,7 +83,7 @@
       <line class="wall" x1="5.93in" y1="5.36in" x2="8.07in" y2="5.36in" />
       <line class="wall" x1="5.93in" y1="7.51in" x2="8.07in" y2="7.51in" />
       <line class="wall" x1="3.77in" y1="4.41in" x2="5.93in" y2="4.41in" />
-      <line class="wall" x1="3.77in" y1="7.51in" x2="5.09in" y2="7.51in" />
+      <line class="wall" x1="3.77in" y1="7.51in" x2="5.09in" y2="7.51in" /> -->
     </svg>
 
     <script>
@@ -82,32 +108,31 @@
       
       var columnCount = 33,
           rowCount = 25,
-          pointDistanceInInches = 1.044;
+          pointDistanceInInches = 1.005;
 
-      var isOdd = n => n % 2 === 1;
+      var isEven = n => n % 2 === 0;
 
       var columns = [...Array(columnCount).keys()],
           rows = [...Array(rowCount).keys()],
           columnCoords = columns.map(x => x * pointDistanceInInches),
           rowCoords = rows.map(y => y * pointDistanceInInches),
-          pointCoords = rowCoords.map((y, index) =>
-            (isOdd(index) ? columnCoords.slice(0, -1) : columnCoords).map(x => [x, y])
-          );
+          pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y]));
 
-      var xOffset = 0.4,
-          yOffset = 0.2;
-          calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.945,
+      var xOffset = 0.25,
+          yOffset = 0.4;
+          calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.99,
           alternatingOffset = pointDistanceInInches / 2;
 
       pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
-        var circle = document.createElementNS(svgns, 'circle'),
-            cx = x + xOffset + (isOdd(index) ? alternatingOffset : 0),
-            cy = calcY * y + yOffset;
+        var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0),
+            cy = calcY * y + yOffset,
+            point = document.createElementNS(svgns, 'use');
 
-        circle.setAttributeNS(null, 'cx', `${cx}in`);
-        circle.setAttributeNS(null, 'cy', `${cy}in`);
-        circle.setAttributeNS(null, 'r', '0.07in');
-        svg.appendChild(circle);
+        point.setAttributeNS(null, 'href', `#point`);
+        point.setAttributeNS(null, 'x', `${cx}in`);
+        point.setAttributeNS(null, 'y', `${cy}in`);
+
+        svg.appendChild(point);
       }));
     </script>
   </body>
