diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a6d7ecd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+temp/
diff --git a/assets/ui/mouse-middle.png b/assets/ui/mouse-middle.png
new file mode 100644
index 0000000..95f02e6
Binary files /dev/null and b/assets/ui/mouse-middle.png differ
diff --git a/assets/ui/pointer.png b/assets/ui/pointer.png
new file mode 100644
index 0000000..ffa466e
Binary files /dev/null and b/assets/ui/pointer.png differ
diff --git a/index.html b/index.html
index 2797a6a..766706a 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<html>
+﻿<html>
 <head>
     <title>Article cover generator - Godot Engine</title>
     <link rel="stylesheet" href="styles/normalize.css" />
@@ -73,11 +73,26 @@
             </div>
         </div>
 
-        <div class="canvas-container">
-            <canvas id="generator"></canvas>
-            <canvas id="render-target" style="display:none;"></canvas>
+        <div class="editor">
+            <div class="canvas-container">
+                <canvas id="generator"></canvas>
+                <canvas id="render-target" style="display:none;"></canvas>
+            </div>
+            <div class="editor-hint">
+                <img src="assets/ui/pointer.png" heigth="24" width="24" />
+                <span>Click and drag to adjust the image</span>
+                <span></span>
+                <img src="assets/ui/mouse-middle.png" heigth="24" width="24" />
+                <span>Use the scrollwheel to scale the image</span>
+            </div>
         </div>
     </div>
 
+    <div class="credits">
+        Godot Logo by <a href="https://github.com/godotengine/godot/blob/master/LOGO_LICENSE.txt" target="_blank">Andrea Calabró</a>
+        ●
+        Assets by <a href="https://kenney.nl/" target="_blank">Kenney</a>
+    </div>
+
 </body>
 </html>
diff --git a/styles/main.css b/styles/main.css
index f58b9f8..e28292d 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -25,6 +25,18 @@ body {
     padding: 16px 24px;
 }
 
+.credits {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: var(--background-color);
+    border-radius: 4px 0 0 0;
+    color: var(--text-faint-color);
+    font-size: 12px;
+    padding: 2px 4px;
+    text-align: right;
+}
+
 /* TOOLBAR STYLING. */
 
 .toolbar {
@@ -97,6 +109,23 @@ body {
     text-align: right;
 }
 
+/* EDITOR AREA STYLING. */
+
+.editor {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.editor-hint {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+}
+
 /* CANVAS STYLING. */
 
 .canvas-container {
