diff --git a/index.html b/index.html
index 8b09b5a..5fb5a84 100644
--- a/index.html
+++ b/index.html
@@ -72,6 +72,14 @@
 				How to Copy <img class="imgInSelectionExplanation" src="img/selectionBright.png"></img> Selection: <b>hold down</b> <span>alt</span> and <b>drag</b> the selected area.
 			</label>
 			<div id="cursor-coords-display"></div>
+			<div id="keyboard-shortcut-hover" onmouseover="Display_Keyboard_Shortcuts()" onmouseleave="Hide_Keyboard_Shortcuts()">Shortcuts</div>
+		</div>
+		<div id="info-section">
+			<table id="keyboard-shortcuts">
+				<tr><td>Copy Selection</td><td>Alt + Click Drag</td></tr>
+				<tr><td>Delete Selection</td><td>Del or Backspace</td></tr>
+				<tr><td>Remove Selection</td><td>Esc</td></tr>
+			</table>
 		</div>
 	</body>
 	<script type="text/javascript" src="js/tools.js"></script>
diff --git a/js/utils.js b/js/utils.js
index 553a89c..82b9265 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -166,3 +166,15 @@ function Get_Canvas_Pixels()
     })
     return canvasPixels;
 }
+
+function Display_Keyboard_Shortcuts()
+{
+  document.getElementById("info-section").style.opacity = "1";
+  document.getElementById("info-section").style.backgroundColor = "#2a2a2a";
+}
+
+function Hide_Keyboard_Shortcuts()
+{
+  document.getElementById("info-section").style.opacity = "0";
+  document.getElementById("info-section").style.backgroundColor = "none";
+}
diff --git a/main.css b/main.css
index 661d769..9d66d65 100644
--- a/main.css
+++ b/main.css
@@ -382,3 +382,32 @@ body {
 input[type="radio"] {
 	margin: 0;
 }
+
+#info-section {
+	position: fixed;
+	top: 80%;
+	right: 1%;
+	z-index: 1000;
+	opacity: 0;
+	background-color: none;
+	transition: background-color .2s ease;
+}
+
+#keyboard-shortcut-hover {
+	position: fixed;
+	right: 0%;
+	top: 99%;
+	
+  	background-color: #e9e9a2;
+  	padding: 0 4px;
+  	border-radius: 2px 0 0 0;
+  	color: #0d0c09;
+  	user-select: none;
+}
+
+#keyboard-shortcuts {
+	border: 1px solid;
+	width: 350px;
+	transition: opacity .2s ease;
+}
+