diff --git a/common/page.html b/common/page.html
index d64fe56..2c8710f 100644
--- a/common/page.html
+++ b/common/page.html
@@ -4,52 +4,55 @@
 					{{nav}}
 				</nav>
 				<div id="legend">
-					<h2>Legend</h2>
-					<p>Orientate your Pi with the GPIO on the right and the HDMI port on the left.</p>
-					<ul>
-						<li class="gpio">
-							<a href="/pinout/wiringpi" title="GPIO (General Purpose IO)">
-								<span class="default"></span>
-								<span class="pin"></span> GPIO <small>(General Purpose IO)</small>
-							</a>
-						</li>
-						<li class="spi">
-							<a href="/pinout/spi" title="SPI (Serial Peripheral Interface)">
-								<span class="default"></span>
-								<span class="pin"></span> SPI <small>(Serial Peripheral Interface)</small>
-							</a>
-						</li>
-						<li class="i2c">
-							<a href="/pinout/i2c" title="I2C (Inter-integrated Circuit)">
-								<span class="default"></span>
-								<span class="pin"></span> I<sup>2</sup>C <small>(Inter-integrated Circuit)</small>
-							</a>
-						</li>
-						<li class="uart">
-							<a href="/pinout/uart" title="UART (Universal Asyncronous Receiver/Transmitter)">
-								<span class="default"></span>
-								<span class="pin"></span> UART <small>(Universal Asyncronous Receiver/Transmitter)</small>
-							</a>
-						</li>
-						<li class="gnd">
-							<a href="/pinout/ground" title="Ground">
-								<span class="default"></span>
-								<span class="pin"></span> Ground
-							</a>
-						</li>
-						<li class="pow5v">
-							<a href="/pinout/5v_power" title="5v (Power)">
-								<span class="default"></span>
-								<span class="pin"></span> 5v <small>(Power)</small>
-							</a>
-						</li>
-						<li class="pow3v3">
-							<a href="/pinout/3v3_power" title="3.3v (Power)">
-								<span class="default"></span>
-								<span class="pin"></span> 3.3v <small>(Power)</small>
-							</a>
-						</li>
-					</ul>
+					<div>
+						<h2>Legend</h2>
+						<p>Orientate your Pi with the GPIO on the right and the HDMI port on the left.</p>
+						<ul>
+							<li class="gpio">
+								<a href="/pinout/wiringpi" title="GPIO (General Purpose IO)">
+									<span class="default"></span>
+									<span class="pin"></span> GPIO <small>(General Purpose IO)</small>
+								</a>
+							</li>
+							<li class="spi">
+								<a href="/pinout/spi" title="SPI (Serial Peripheral Interface)">
+									<span class="default"></span>
+									<span class="pin"></span> SPI <small>(Serial Peripheral Interface)</small>
+								</a>
+							</li>
+							<li class="i2c">
+								<a href="/pinout/i2c" title="I2C (Inter-integrated Circuit)">
+									<span class="default"></span>
+									<span class="pin"></span> I<sup>2</sup>C <small>(Inter-integrated Circuit)</small>
+								</a>
+							</li>
+							<li class="uart">
+								<a href="/pinout/uart" title="UART (Universal Asyncronous Receiver/Transmitter)">
+									<span class="default"></span>
+									<span class="pin"></span> UART <small>(Universal Asyncronous Receiver/Transmitter)</small>
+								</a>
+							</li>
+							<li class="gnd">
+								<a href="/pinout/ground" title="Ground">
+									<span class="default"></span>
+									<span class="pin"></span> Ground
+								</a>
+							</li>
+							<li class="pow5v">
+								<a href="/pinout/5v_power" title="5v (Power)">
+									<span class="default"></span>
+									<span class="pin"></span> 5v <small>(Power)</small>
+								</a>
+							</li>
+							<li class="pow3v3">
+								<a href="/pinout/3v3_power" title="3.3v (Power)">
+									<span class="default"></span>
+									<span class="pin"></span> 3.3v <small>(Power)</small>
+								</a>
+							</li>
+						</ul>
+					</div>
+					<img src="{{resource_url}}pi-orientation.png" />
 				</div>
 			</div>
 			<div id="content">
diff --git a/resources/pi-orientation.png b/resources/pi-orientation.png
new file mode 100644
index 0000000..b14f7bf
Binary files /dev/null and b/resources/pi-orientation.png differ
diff --git a/resources/pinout.scss b/resources/pinout.scss
index 41fe9ed..2b04846 100644
--- a/resources/pinout.scss
+++ b/resources/pinout.scss
@@ -602,6 +602,14 @@ nav {
         margin-top:5px;
         margin-bottom:5px;
     }
+    div {
+        width: 300px;
+        float: left;
+        display: block;
+    }
+    img {width:196px;height:auto;margin-top:4px;
+        float: left;
+        display: block;}
     p {
         font-size:$base-font-size * 0.7;
         padding: 0 10px 10px 0;
diff --git a/resources/pinout.scss.css b/resources/pinout.scss.css
index db1ad79..3d42646 100644
--- a/resources/pinout.scss.css
+++ b/resources/pinout.scss.css
@@ -459,6 +459,16 @@ nav {
 #legend h2 {
   margin-top: 5px;
   margin-bottom: 5px; }
+#legend div {
+  width: 300px;
+  float: left;
+  display: block; }
+#legend img {
+  width: 196px;
+  height: auto;
+  margin-top: 4px;
+  float: left;
+  display: block; }
 #legend p {
   font-size: 0.84em;
   padding: 0 10px 10px 0; }