From 8c4f48ba43820faf00c011c188ab5f6cb0e92e7f Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 4 Mar 2019 16:48:18 +0530
Subject: [PATCH 1/2] remove locale build

---
 .../_build/src/components/Console.jsx.json    |  8 ----
 .../_build/src/components/MainHeader.jsx.json | 47 -------------------
 2 files changed, 55 deletions(-)
 delete mode 100644 src/locales/_build/src/components/Console.jsx.json
 delete mode 100644 src/locales/_build/src/components/MainHeader.jsx.json

diff --git a/src/locales/_build/src/components/Console.jsx.json b/src/locales/_build/src/components/Console.jsx.json
deleted file mode 100644
index 9bc506e..0000000
--- a/src/locales/_build/src/components/Console.jsx.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-	"Console": {
-		"origin": [
-			["src/components/Console.jsx", 58],
-			["src/components/Console.jsx", 58]
-		]
-	}
-}
diff --git a/src/locales/_build/src/components/MainHeader.jsx.json b/src/locales/_build/src/components/MainHeader.jsx.json
deleted file mode 100644
index 188fb52..0000000
--- a/src/locales/_build/src/components/MainHeader.jsx.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-	"Run": {
-		"origin": [
-			["src/components/MainHeader.jsx", 32],
-			["src/components/MainHeader.jsx", 32]
-		]
-	},
-	"Add a JS/CSS library": {
-		"origin": [["src/components/MainHeader.jsx", 41]]
-	},
-	"Add library": {
-		"origin": [
-			["src/components/MainHeader.jsx", 43],
-			["src/components/MainHeader.jsx", 43]
-		]
-	},
-	"New": {
-		"origin": [
-			["src/components/MainHeader.jsx", 64],
-			["src/components/MainHeader.jsx", 64]
-		]
-	},
-	"Save": {
-		"origin": [
-			["src/components/MainHeader.jsx", 80],
-			["src/components/MainHeader.jsx", 80]
-		]
-	},
-	"Open": {
-		"origin": [
-			["src/components/MainHeader.jsx", 96],
-			["src/components/MainHeader.jsx", 96]
-		]
-	},
-	"Login": {
-		"origin": [
-			["src/components/MainHeader.jsx", 105],
-			["src/components/MainHeader.jsx", 105]
-		]
-	},
-	"Signup": {
-		"origin": [
-			["src/components/MainHeader.jsx", 105],
-			["src/components/MainHeader.jsx", 105]
-		]
-	}
-}

From abca6fecb6cd03c752352c0424ca6ed0d023b63f Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 4 Mar 2019 16:49:32 +0530
Subject: [PATCH 2/2] add string extractors for l10n

---
 .gitignore                                |   1 +
 package.json                              |   6 +-
 src/components/AddLibrary.jsx             | 172 ++++----
 src/components/Console.jsx                | 109 ++---
 src/components/Footer.jsx                 | 516 +++++++++++-----------
 src/components/HelpModal.jsx              | 117 ++---
 src/components/KeyboardShortcutsModal.jsx |  67 ++-
 src/components/MainHeader.jsx             |  17 +-
 src/components/SavedItemPane.jsx          | 128 +++---
 src/components/Settings.jsx               |   5 +-
 src/locales/en/messages.js                |  95 +++-
 src/locales/en/messages.po                | 315 ++++++++++++-
 src/locales/es/messages.js                |  95 +++-
 src/locales/es/messages.po                | 315 ++++++++++++-
 src/locales/hi/messages.js                |  99 ++++-
 src/locales/hi/messages.po                | 317 ++++++++++++-
 src/locales/zh-Hans/messages.js           |  95 +++-
 src/locales/zh-Hans/messages.po           | 315 ++++++++++++-
 yarn.lock                                 |   6 +-
 19 files changed, 2236 insertions(+), 554 deletions(-)

diff --git a/.gitignore b/.gitignore
index f662907..2dd14e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@ node_modules/
 .sass-cache
 extension/
 yarn-error.log
+src/locales/_build
\ No newline at end of file
diff --git a/package.json b/package.json
index 0db70e3..f58183e 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
 		]
 	},
 	"devDependencies": {
-		"@lingui/cli": "^2.7.0",
-		"@lingui/macro": "^2.7.0",
+		"@lingui/cli": "^2.7.4",
+		"@lingui/macro": "^2.7.4",
 		"babel-core": "^6.26.3",
 		"babel-eslint": "^7.2.3",
 		"babel-minify": "^0.2.0",
@@ -59,7 +59,7 @@
 	},
 	"dependencies": {
 		"@emmetio/codemirror-plugin": "^0.5.4",
-		"@lingui/react": "^2.7.0",
+		"@lingui/react": "^2.7.4",
 		"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
 		"codemirror": "^5.37.0",
 		"copy-webpack-plugin": "^4.5.1",
diff --git a/src/components/AddLibrary.jsx b/src/components/AddLibrary.jsx
index 54b6e4b..94a29ae 100644
--- a/src/components/AddLibrary.jsx
+++ b/src/components/AddLibrary.jsx
@@ -2,6 +2,8 @@ import { h, Component } from 'preact';
 import { jsLibs, cssLibs } from '../libraryList';
 import { trackEvent } from '../analytics';
 import { LibraryAutoSuggest } from './LibraryAutoSuggest';
+import { Trans, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 export default class AddLibrary extends Component {
 	constructor(props) {
@@ -58,86 +60,104 @@ export default class AddLibrary extends Component {
 	}
 	render() {
 		return (
-			<div>
-				<h1>Add Library</h1>
+			<I18n>
+				{({ i18n }) => (
+					<div>
+						<h1>
+							<Trans>Add Library</Trans>
+						</h1>
 
-				<div class="flex flex-v-center">
-					<svg style="width: 30px; height: 30px;fill:rgb(255,255,255,0.5)">
-						<use xlinkHref="#search" />
-					</svg>
-					<LibraryAutoSuggest
-						fullWidth
-						onSelect={this.suggestionSelectHandler.bind(this)}
-					>
-						<input
-							type="text"
-							id="externalLibrarySearchInput"
+						<div class="flex flex-v-center">
+							<svg style="width: 30px; height: 30px;fill:rgb(255,255,255,0.5)">
+								<use xlinkHref="#search" />
+							</svg>
+							<LibraryAutoSuggest
+								fullWidth
+								onSelect={this.suggestionSelectHandler.bind(this)}
+							>
+								<input
+									type="text"
+									id="externalLibrarySearchInput"
+									class="full-width"
+									placeholder={i18n._(t`Type here to search libraries`)}
+								/>
+							</LibraryAutoSuggest>
+						</div>
+						<div class="tar opacity--70">
+							<small>
+								<Trans>Powered by cdnjs</Trans>
+							</small>
+						</div>
+						<div style="margin:20px 0;">
+							<Trans>Choose from popular libraries</Trans>:{' '}
+							<select
+								name=""
+								id="js-add-library-select"
+								onChange={this.onSelectChange.bind(this)}
+							>
+								<option value="">-------</option>
+								<optgroup label="JavaScript Libraries">
+									{jsLibs.map(lib => (
+										<option data-type={lib.type} value={lib.url}>
+											{lib.label}
+										</option>
+									))}
+								</optgroup>
+								<optgroup label="CSS Libraries">
+									{cssLibs.map(lib => (
+										<option data-type={lib.type} value={lib.url}>
+											{lib.label}
+										</option>
+									))}
+								</optgroup>
+							</select>
+						</div>
+
+						<h3 class="mb-0">JS</h3>
+						<p class="mt-0 help-text">
+							<Trans>Put each library in new line</Trans>
+						</p>
+
+						<p
+							style="font-size: 0.8em;"
+							class="show-when-extension opacity--70"
+						>
+							<Trans>
+								Note: You can load external scripts from following domains:
+							</Trans>
+							localhost, https://ajax.googleapis.com, https://code.jquery.com,
+							https://cdnjs.cloudflare.com, https://unpkg.com,
+							https://maxcdn.com, https://cdn77.com,
+							https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/,
+							https://rawgit.com, https://wzrd.in
+						</p>
+
+						<textarea
+							onBlur={this.textareaBlurHandler.bind(this)}
+							data-lang="js"
 							class="full-width"
-							placeholder="Type here to search libraries"
+							id="externalJsTextarea"
+							cols="30"
+							rows="5"
+							value={this.state.js}
 						/>
-					</LibraryAutoSuggest>
-				</div>
-				<div class="tar opacity--70">
-					<small>Powered by cdnjs</small>
-				</div>
-				<div style="margin:20px 0;">
-					Choose from popular libraries:{' '}
-					<select
-						name=""
-						id="js-add-library-select"
-						onChange={this.onSelectChange.bind(this)}
-					>
-						<option value="">-------</option>
-						<optgroup label="JavaScript Libraries">
-							{jsLibs.map(lib => (
-								<option data-type={lib.type} value={lib.url}>
-									{lib.label}
-								</option>
-							))}
-						</optgroup>
-						<optgroup label="CSS Libraries">
-							{cssLibs.map(lib => (
-								<option data-type={lib.type} value={lib.url}>
-									{lib.label}
-								</option>
-							))}
-						</optgroup>
-					</select>
-				</div>
 
-				<h3 class="mb-0">JS</h3>
-				<p class="mt-0 help-text">Put each library in new line</p>
-
-				<p style="font-size: 0.8em;" class="show-when-extension opacity--70">
-					Note: You can load external scripts from following domains: localhost,
-					https://ajax.googleapis.com, https://code.jquery.com,
-					https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
-					https://cdn77.com, https://maxcdn.bootstrapcdn.com,
-					https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in
-				</p>
-
-				<textarea
-					onBlur={this.textareaBlurHandler.bind(this)}
-					data-lang="js"
-					class="full-width"
-					id="externalJsTextarea"
-					cols="30"
-					rows="5"
-					value={this.state.js}
-				/>
-
-				<h3 class="mb-0">CSS</h3>
-				<p class="mt-0 help-text">Put each library in new line</p>
-				<textarea
-					onBlur={this.textareaBlurHandler.bind(this)}
-					data-lang="css"
-					class="full-width"
-					id="externalCssTextarea"
-					cols="30"
-					rows="5"
-					value={this.state.css}
-				/>
-			</div>
+						<h3 class="mb-0">CSS</h3>
+						<p class="mt-0 help-text">
+							<Trans>Put each library in new line</Trans>
+						</p>
+						<textarea
+							onBlur={this.textareaBlurHandler.bind(this)}
+							data-lang="css"
+							class="full-width"
+							id="externalCssTextarea"
+							cols="30"
+							rows="5"
+							value={this.state.css}
+						/>
+					</div>
+				)}
+			</I18n>
 		);
 	}
 }
diff --git a/src/components/Console.jsx b/src/components/Console.jsx
index 45cf78f..c2200f7 100644
--- a/src/components/Console.jsx
+++ b/src/components/Console.jsx
@@ -1,7 +1,8 @@
 import { h, Component } from 'preact';
 import { Inspector, chromeDark } from 'react-inspector';
-import { Trans } from '@lingui/macro';
 import { PureComponent } from 'preact-compat';
+import { Trans, t, NumberFormat } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 class LogRow extends Component {
 	shouldComponentUpdate() {
@@ -44,61 +45,69 @@ export class Console extends PureComponent {
 		} = this.props;
 
 		return (
-			<div
-				id="consoleEl"
-				class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
-			>
-				<div id="consoleLogEl" class="console__log">
+			<I18n>
+				{({ i18n }) => (
 					<div
-						class="js-console__header  code-wrap__header"
-						title="Double click to toggle console"
-						onDblClick={onConsoleHeaderDblClick}
+						id="consoleEl"
+						class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
 					>
-						<span class="code-wrap__header-label">
-							<Trans>Console</Trans> (<span>{logs.length}</span>)
-						</span>
-						<div class="code-wrap__header-right-options">
-							<a
-								class="code-wrap__header-btn"
-								title="Clear console (CTRL + L)"
-								onClick={onClearConsoleBtnClick}
+						<div id="consoleLogEl" class="console__log">
+							<div
+								class="js-console__header  code-wrap__header"
+								title={i18n._(t`Double click to toggle console`)}
+								onDblClick={onConsoleHeaderDblClick}
 							>
-								<svg>
-									<use xlinkHref="#cancel-icon" />
-								</svg>
-							</a>
-							<a
-								class="code-wrap__header-btn  code-wrap__collapse-btn"
-								title="Toggle console"
-								onClick={toggleConsole}
+								<span class="code-wrap__header-label">
+									<Trans>Console</Trans> (
+									<span>
+										<NumberFormat value={logs.length} />
+									</span>
+									)
+								</span>
+								<div class="code-wrap__header-right-options">
+									<a
+										class="code-wrap__header-btn"
+										title={i18n._(t`Clear console (CTRL + L)`)}
+										onClick={onClearConsoleBtnClick}
+									>
+										<svg>
+											<use xlinkHref="#cancel-icon" />
+										</svg>
+									</a>
+									<a
+										class="code-wrap__header-btn  code-wrap__collapse-btn"
+										title={i18n._(t`Toggle console`)}
+										onClick={toggleConsole}
+									/>
+								</div>
+							</div>
+							<ul
+								class="console__items"
+								ref={el => {
+									this.logContainerEl = el;
+								}}
+							>
+								{logs.map(log => (
+									<LogRow data={log} />
+								))}
+							</ul>
+						</div>
+						<div
+							id="consolePromptEl"
+							class="console__prompt flex flex-v-center flex-shrink-0"
+						>
+							<svg width="18" height="18" fill="#346fd2">
+								<use xlinkHref="#chevron-icon" />
+							</svg>
+							<input
+								tabIndex={isConsoleOpen ? 0 : -1}
+								onKeyUp={onEvalInputKeyup}
+								class="console-exec-input"
 							/>
 						</div>
 					</div>
-					<ul
-						class="console__items"
-						ref={el => {
-							this.logContainerEl = el;
-						}}
-					>
-						{logs.map(log => (
-							<LogRow data={log} />
-						))}
-					</ul>
-				</div>
-				<div
-					id="consolePromptEl"
-					class="console__prompt flex flex-v-center flex-shrink-0"
-				>
-					<svg width="18" height="18" fill="#346fd2">
-						<use xlinkHref="#chevron-icon" />
-					</svg>
-					<input
-						tabIndex={isConsoleOpen ? 0 : -1}
-						onKeyUp={onEvalInputKeyup}
-						class="console-exec-input"
-					/>
-				</div>
-			</div>
+				)}
+			</I18n>
 		);
 	}
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index ba76fa7..f6f4cff 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,5 +1,7 @@
 import { h, Component } from 'preact';
 import { Button } from './common';
+import { Trans, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 class JS13K extends Component {
 	constructor(props) {
@@ -71,263 +73,269 @@ export default class Footer extends Component {
 
 	render() {
 		return (
-			<div id="footer" class="footer">
-				<div>
-					<a
-						href="https://webmakerapp.com/"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<div class="logo" />
-					</a>
-					&copy;
-					<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
-					<Button
-						onClick={this.props.helpBtnClickHandler}
-						data-event-category="ui"
-						data-event-action="helpButtonClick"
-						class="footer__link  hint--rounded  hint--top-right"
-						aria-label="Help"
-					>
-						<svg
-							style="width:20px; height:20px; vertical-align:text-bottom"
-							viewBox="0 0 24 24"
-						>
-							<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
-						</svg>
-					</Button>
-					<Button
-						onClick={this.props.keyboardShortcutsBtnClickHandler}
-						data-event-category="ui"
-						data-event-action="keyboardShortcutButtonClick"
-						class="footer__link hint--rounded  hint--top-right hide-on-mobile"
-						aria-label="Keyboard shortcuts"
-					>
-						<svg
-							style={{
-								width: '20px',
-								height: '20px',
-								verticalAlign: 'text-bottom'
-							}}
-						>
-							<use xlinkHref="#keyboard-icon" />
-						</svg>
-					</Button>
-					<a
-						class="footer__link  hint--rounded  hint--top-right"
-						aria-label="Tweet about 'Web Maker'"
-						href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<svg
-							style={{
-								width: '20px',
-								height: '20px',
-								verticalAlign: 'text-bottom'
-							}}
-						>
-							<use xlinkHref="#twitter-icon" />
-						</svg>
-					</a>
-					<Button
-						onClick={this.props.supportDeveloperBtnClickHandler}
-						data-event-category="ui"
-						data-event-action="supportDeveloperFooterBtnClick"
-						class="footer__link  ml-1  hint--rounded  hint--top-right hide-on-mobile support-link"
-						aria-label="Support the developer by pledging some amount"
-					>
-						Donate
-					</Button>
-				</div>
+			<I18n>
+				{({ i18n }) => (
+					<div id="footer" class="footer">
+						<div>
+							<a
+								href="https://webmakerapp.com/"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<div class="logo" />
+							</a>
+							&copy;
+							<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
+							<Button
+								onClick={this.props.helpBtnClickHandler}
+								data-event-category="ui"
+								data-event-action="helpButtonClick"
+								class="footer__link  hint--rounded  hint--top-right"
+								aria-label={i18n._(t`Help`)}
+							>
+								<svg
+									style="width:20px; height:20px; vertical-align:text-bottom"
+									viewBox="0 0 24 24"
+								>
+									<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+								</svg>
+							</Button>
+							<Button
+								onClick={this.props.keyboardShortcutsBtnClickHandler}
+								data-event-category="ui"
+								data-event-action="keyboardShortcutButtonClick"
+								class="footer__link hint--rounded  hint--top-right hide-on-mobile"
+								aria-label={i18n._(t`Keyboard shortcuts`)}
+							>
+								<svg
+									style={{
+										width: '20px',
+										height: '20px',
+										verticalAlign: 'text-bottom'
+									}}
+								>
+									<use xlinkHref="#keyboard-icon" />
+								</svg>
+							</Button>
+							<a
+								class="footer__link  hint--rounded  hint--top-right"
+								aria-label={i18n._(t`Tweet about 'Web Maker'`)}
+								href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<svg
+									style={{
+										width: '20px',
+										height: '20px',
+										verticalAlign: 'text-bottom'
+									}}
+								>
+									<use xlinkHref="#twitter-icon" />
+								</svg>
+							</a>
+							<Button
+								onClick={this.props.supportDeveloperBtnClickHandler}
+								data-event-category="ui"
+								data-event-action="supportDeveloperFooterBtnClick"
+								class="footer__link  ml-1  hint--rounded  hint--top-right hide-on-mobile support-link"
+								aria-label={i18n._(
+									t`Support the developer by pledging some amount`
+								)}
+							>
+								<Trans>Donate</Trans>
+							</Button>
+						</div>
 
-				{this.props.prefs.isJs13kModeOn ? (
-					<div class="flex flex-v-center">
-						<JS13K
-							isOpen={this.state.isJs13kDropdownOpen}
-							codeSize={this.props.codeSize}
-							onClick={this.js13kClickHandler.bind(this)}
-							onBlur={() =>
-								setTimeout(
-									() => this.setState({ isJs13kDropdownOpen: false }),
-									300
-								)
-							}
-						/>
-						{this.state.isJs13kDropdownOpen && (
-							<div className="js13k__dropdown">
-								<button
-									class="btn"
-									style={{
-										width: '200px',
-										display: 'block',
-										marginBottom: '16px'
-									}}
-									onClick={this.props.onJs13KDownloadBtnClick}
-								>
-									Download game as zip
-								</button>
-								<a
-									class="btn"
-									rel="noopener"
-									style={{
-										width: '200px',
-										display: 'block',
-										marginBottom: '16px'
-									}}
-									href="https://pasteboard.co/"
-									target="_blank"
-								>
-									Upload Image
-								</a>
-								<button
-									class="btn"
-									style={{ width: '200px', display: 'block' }}
-									onClick={this.props.onJs13KHelpBtnClick}
-								>
-									Help
-								</button>
+						{this.props.prefs.isJs13kModeOn ? (
+							<div class="flex flex-v-center">
+								<JS13K
+									isOpen={this.state.isJs13kDropdownOpen}
+									codeSize={this.props.codeSize}
+									onClick={this.js13kClickHandler.bind(this)}
+									onBlur={() =>
+										setTimeout(
+											() => this.setState({ isJs13kDropdownOpen: false }),
+											300
+										)
+									}
+								/>
+								{this.state.isJs13kDropdownOpen && (
+									<div className="js13k__dropdown">
+										<button
+											class="btn"
+											style={{
+												width: '200px',
+												display: 'block',
+												marginBottom: '16px'
+											}}
+											onClick={this.props.onJs13KDownloadBtnClick}
+										>
+											<Trans>Download game as zip</Trans>
+										</button>
+										<a
+											class="btn"
+											rel="noopener"
+											style={{
+												width: '200px',
+												display: 'block',
+												marginBottom: '16px'
+											}}
+											href="https://pasteboard.co/"
+											target="_blank"
+										>
+											<Trans>Upload Image</Trans>
+										</a>
+										<button
+											class="btn"
+											style={{ width: '200px', display: 'block' }}
+											onClick={this.props.onJs13KHelpBtnClick}
+										>
+											<Trans>Help</Trans>
+										</button>
+									</div>
+								)}
 							</div>
-						)}
+						) : null}
+
+						<div class="footer__right">
+							<button
+								onClick={this.props.saveHtmlBtnClickHandler}
+								id="saveHtmlBtn"
+								class="mode-btn  hint--rounded  hint--top-left hide-on-mobile hide-in-file-mode"
+								aria-label={i18n._(t`Save as HTML file`)}
+							>
+								<svg viewBox="0 0 24 24">
+									<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
+								</svg>
+							</button>
+							<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+								<symbol id="codepen-logo" viewBox="0 0 120 120">
+									<path
+										class="outer-ring"
+										d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"
+									/>
+									<path
+										class="inner-box"
+										d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"
+									/>
+								</symbol>
+							</svg>
+
+							<button
+								onClick={this.props.codepenBtnClickHandler}
+								id="codepenBtn"
+								class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile hide-in-file-mode"
+								aria-label={i18n._(t`Edit on CodePen`)}
+							>
+								<svg>
+									<use xlinkHref="#codepen-logo" />
+								</svg>
+							</button>
+
+							<button
+								id="screenshotBtn"
+								class="mode-btn  hint--rounded  hint--top-left show-when-extension"
+								onClick={this.props.screenshotBtnClickHandler}
+								aria-label={i18n._(t`Take screenshot of preview`)}
+							>
+								<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+									<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
+								</svg>
+							</button>
+
+							<div class="footer__separator hide-on-mobile" />
+
+							<button
+								onClick={this.layoutBtnClickhandler.bind(this, 1)}
+								id="layoutBtn1"
+								class="mode-btn hide-on-mobile hide-in-file-mode"
+								aria-label={i18n._(t`Switch to layout with preview on right`)}
+							>
+								<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
+									<use xlinkHref="#mode-icon" />
+								</svg>
+							</button>
+							<button
+								onClick={this.layoutBtnClickhandler.bind(this, 2)}
+								id="layoutBtn2"
+								class="mode-btn hide-on-mobile hide-in-file-mode"
+								aria-label={i18n._(t`Switch to layout with preview on bottom`)}
+							>
+								<svg viewBox="0 0 100 100">
+									<use xlinkHref="#mode-icon" />
+								</svg>
+							</button>
+							<button
+								onClick={this.layoutBtnClickhandler.bind(this, 3)}
+								id="layoutBtn3"
+								class="mode-btn hide-on-mobile hide-in-file-mode"
+								aria-label={i18n._(t`Switch to layout with preview on left`)}
+							>
+								<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
+									<use xlinkHref="#mode-icon" />
+								</svg>
+							</button>
+							<button
+								onClick={this.layoutBtnClickhandler.bind(this, 5)}
+								id="layoutBtn5"
+								class="mode-btn hide-on-mobile hide-in-file-mode"
+								aria-label={i18n._(t`Switch to layout with all vertical panes`)}
+							>
+								<svg viewBox="0 0 100 100">
+									<use xlinkHref="#vertical-mode-icon" />
+								</svg>
+							</button>
+							<button
+								onClick={this.layoutBtnClickhandler.bind(this, 4)}
+								id="layoutBtn4"
+								class="mode-btn hint--top-left hint--rounded  hide-on-mobile"
+								aria-label={i18n._(t`Switch to full screen preview`)}
+							>
+								<svg viewBox="0 0 100 100">
+									<rect x="0" y="0" width="100" height="100" />
+								</svg>
+							</button>
+							<button
+								class="mode-btn hint--top-left hint--rounded hide-on-mobile"
+								aria-label={i18n._(t`Detach Preview`)}
+								onClick={this.props.detachedPreviewBtnHandler}
+							>
+								<svg viewBox="0 0 24 24">
+									<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
+								</svg>
+							</button>
+
+							<div class="footer__separator" />
+
+							<button
+								onClick={this.props.notificationsBtnClickHandler}
+								id="notificationsBtn"
+								class={`notifications-btn  mode-btn  hint--top-left  hint--rounded ${
+									this.props.hasUnseenChangelog ? 'has-new' : ''
+								}`}
+								aria-label={i18n._(t`See Changelog`)}
+							>
+								<svg viewBox="0 0 24 24">
+									<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
+								</svg>
+								<span class="notifications-btn__dot" />
+							</button>
+							<Button
+								onClick={this.props.settingsBtnClickHandler}
+								data-event-category="ui"
+								data-event-action="settingsBtnClick"
+								class="mode-btn  hint--top-left  hint--rounded"
+								aria-label={i18n._(t`Settings`)}
+							>
+								<svg>
+									<use xlinkHref="#settings-icon" />
+								</svg>
+							</Button>
+						</div>
 					</div>
-				) : null}
-
-				<div class="footer__right">
-					<button
-						onClick={this.props.saveHtmlBtnClickHandler}
-						id="saveHtmlBtn"
-						class="mode-btn  hint--rounded  hint--top-left hide-on-mobile hide-in-file-mode"
-						aria-label="Save as HTML file"
-					>
-						<svg viewBox="0 0 24 24">
-							<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
-						</svg>
-					</button>
-					<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-						<symbol id="codepen-logo" viewBox="0 0 120 120">
-							<path
-								class="outer-ring"
-								d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"
-							/>
-							<path
-								class="inner-box"
-								d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"
-							/>
-						</symbol>
-					</svg>
-
-					<button
-						onClick={this.props.codepenBtnClickHandler}
-						id="codepenBtn"
-						class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile hide-in-file-mode"
-						aria-label="Edit on CodePen"
-					>
-						<svg>
-							<use xlinkHref="#codepen-logo" />
-						</svg>
-					</button>
-
-					<button
-						id="screenshotBtn"
-						class="mode-btn  hint--rounded  hint--top-left show-when-extension"
-						onClick={this.props.screenshotBtnClickHandler}
-						aria-label="Take screenshot of preview"
-					>
-						<svg style="width:24px;height:24px" viewBox="0 0 24 24">
-							<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
-						</svg>
-					</button>
-
-					<div class="footer__separator hide-on-mobile" />
-
-					<button
-						onClick={this.layoutBtnClickhandler.bind(this, 1)}
-						id="layoutBtn1"
-						class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with preview on right"
-					>
-						<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
-							<use xlinkHref="#mode-icon" />
-						</svg>
-					</button>
-					<button
-						onClick={this.layoutBtnClickhandler.bind(this, 2)}
-						id="layoutBtn2"
-						class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with preview on bottom"
-					>
-						<svg viewBox="0 0 100 100">
-							<use xlinkHref="#mode-icon" />
-						</svg>
-					</button>
-					<button
-						onClick={this.layoutBtnClickhandler.bind(this, 3)}
-						id="layoutBtn3"
-						class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with preview on left"
-					>
-						<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
-							<use xlinkHref="#mode-icon" />
-						</svg>
-					</button>
-					<button
-						onClick={this.layoutBtnClickhandler.bind(this, 5)}
-						id="layoutBtn5"
-						class="mode-btn hide-on-mobile hide-in-file-mode"
-						aria-label="Switch to layout with all vertical panes"
-					>
-						<svg viewBox="0 0 100 100">
-							<use xlinkHref="#vertical-mode-icon" />
-						</svg>
-					</button>
-					<button
-						onClick={this.layoutBtnClickhandler.bind(this, 4)}
-						id="layoutBtn4"
-						class="mode-btn hint--top-left hint--rounded  hide-on-mobile"
-						aria-label="Switch to full screen preview"
-					>
-						<svg viewBox="0 0 100 100">
-							<rect x="0" y="0" width="100" height="100" />
-						</svg>
-					</button>
-					<button
-						class="mode-btn hint--top-left hint--rounded hide-on-mobile"
-						aria-label="Detach Preview"
-						onClick={this.props.detachedPreviewBtnHandler}
-					>
-						<svg viewBox="0 0 24 24">
-							<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
-						</svg>
-					</button>
-
-					<div class="footer__separator" />
-
-					<button
-						onClick={this.props.notificationsBtnClickHandler}
-						id="notificationsBtn"
-						class={`notifications-btn  mode-btn  hint--top-left  hint--rounded ${
-							this.props.hasUnseenChangelog ? 'has-new' : ''
-						}`}
-						aria-label="See Changelog"
-					>
-						<svg viewBox="0 0 24 24">
-							<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
-						</svg>
-						<span class="notifications-btn__dot" />
-					</button>
-					<Button
-						onClick={this.props.settingsBtnClickHandler}
-						data-event-category="ui"
-						data-event-action="settingsBtnClick"
-						class="mode-btn  hint--top-left  hint--rounded"
-						aria-label="Settings"
-					>
-						<svg>
-							<use xlinkHref="#settings-icon" />
-						</svg>
-					</Button>
-				</div>
-			</div>
+				)}
+			</I18n>
 		);
 	}
 }
diff --git a/src/components/HelpModal.jsx b/src/components/HelpModal.jsx
index db7bb11..dc91805 100644
--- a/src/components/HelpModal.jsx
+++ b/src/components/HelpModal.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import Modal from './Modal';
 import { Button } from './common';
+import { Trans } from '@lingui/macro';
 
 export function HelpModal(props) {
 	return (
@@ -12,47 +13,51 @@ export function HelpModal(props) {
 
 			<div>
 				<p>
-					Made with <span style="margin-right: 8px;">💖</span>&{' '}
-					<span style="margin-right: 8px;"> 🙌</span> by{' '}
-					<a
-						href="https://twitter.com/chinchang457"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Kushagra Gour
-					</a>
+					<notrans>
+						Made with <span style="margin-right: 8px;">💖</span>&{' '}
+						<span style="margin-right: 8px;"> 🙌</span> by{' '}
+						<a
+							href="https://twitter.com/chinchang457"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							Kushagra Gour
+						</a>
+					</notrans>
 				</p>
 				<p>
 					<a href="/docs" target="_blank" rel="noopener noreferrer">
-						Read the documentation
+						<Trans>Read the documentation.</Trans>
 					</a>
-					.
 				</p>
 				<p>
-					Tweet out your feature requests, comments & suggestions to{' '}
-					<a
-						target="_blank"
-						rel="noopener noreferrer"
-						href="https://twitter.com/webmakerApp"
-					>
-						@webmakerApp
-					</a>
+					<notrans>
+						Tweet out your feature requests, comments & suggestions to{' '}
+						<a
+							target="_blank"
+							rel="noopener noreferrer"
+							href="https://twitter.com/webmakerApp"
+						>
+							@webmakerApp
+						</a>
+					</notrans>
 					.
 				</p>
 				<p class="show-when-extension">
-					Like this extension? Please{' '}
-					<a
-						href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						rate it here
-					</a>
-					.
+					<notrans>
+						Like this extension? Please{' '}
+						<a
+							href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							rate it here
+						</a>
+						.
+					</notrans>
 				</p>
 				<p>
 					<Button
-						aria-label="Support the developer"
 						onClick={props.onSupportBtnClick}
 						data-event-action="supportDeveloperHelpBtnClick"
 						data-event-category="ui"
@@ -61,10 +66,9 @@ export function HelpModal(props) {
 						<svg>
 							<use xlinkHref="#gift-icon" />
 						</svg>
-						Support the developer
+						<Trans>Support the developer</Trans>
 					</Button>{' '}
 					<a
-						aria-label="Rate Web Maker"
 						href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
 						target="_blank"
 						rel="noopener noreferrer"
@@ -73,10 +77,9 @@ export function HelpModal(props) {
 						<svg>
 							<use xlinkHref="#heart-icon" />
 						</svg>
-						Review Web Maker
+						<Trans>Review Web Maker</Trans>
 					</a>{' '}
 					<a
-						aria-label="Chat"
 						href="https://spectrum.chat/web-maker"
 						target="_blank"
 						rel="noopener noreferrer"
@@ -85,10 +88,9 @@ export function HelpModal(props) {
 						<svg>
 							<use xlinkHref="#chat-icon" />
 						</svg>
-						Chat
+						<Trans>Chat</Trans>
 					</a>{' '}
 					<a
-						aria-label="Report a Bug"
 						href="https://github.com/chinchang/web-maker/issues"
 						target="_blank"
 						rel="noopener noreferrer"
@@ -97,14 +99,16 @@ export function HelpModal(props) {
 						<svg>
 							<use xlinkHref="#bug-icon" />
 						</svg>
-						Report a bug
+						<Trans>Report a bug</Trans>
 					</a>
 				</p>
 
 				<p>
 					<details>
 						<summary>
-							<h3 class="d-i">See awesome libraries used</h3>
+							<h3 class="d-i">
+								<Trans>See awesome libraries used</Trans>
+							</h3>
 						</summary>
 						<ul>
 							<li>
@@ -191,24 +195,27 @@ export function HelpModal(props) {
 				</p>
 
 				<p>
-					<h3>License</h3>
-					"Web Maker" is{' '}
-					<a
-						target="_blank"
-						rel="noopener noreferrer"
-						href="https://github.com/chinchang/web-maker"
-					>
-						open-source
-					</a>{' '}
-					under the{' '}
-					<a
-						href="https://opensource.org/licenses/MIT"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						MIT License
-					</a>
-					.
+					<h3>
+						<Trans>License</Trans>
+					</h3>
+					<notrans>
+						"Web Maker" is{' '}
+						<a
+							target="_blank"
+							rel="noopener noreferrer"
+							href="https://github.com/chinchang/web-maker"
+						>
+							open-source
+						</a>{' '}
+						under the{' '}
+						<a
+							href="https://opensource.org/licenses/MIT"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							MIT License
+						</a>
+					</notrans>
 				</p>
 			</div>
 		</Modal>
diff --git a/src/components/KeyboardShortcutsModal.jsx b/src/components/KeyboardShortcutsModal.jsx
index 764cdf5..4b63e8d 100644
--- a/src/components/KeyboardShortcutsModal.jsx
+++ b/src/components/KeyboardShortcutsModal.jsx
@@ -1,95 +1,124 @@
 import { h } from 'preact';
 import Modal from './Modal';
+import { Trans } from '@lingui/macro';
 
 export function KeyboardShortcutsModal({ show, closeHandler }) {
 	return (
 		<Modal show={show} closeHandler={closeHandler}>
-			<h1>Keyboard Shortcuts</h1>
+			<h1>
+				<Trans>Keyboard Shortcuts</Trans>
+			</h1>
 
 			<div class="flex">
 				<div>
-					<h2>Global</h2>
+					<h2>
+						<Trans>Global</Trans>
+					</h2>
 					{/*<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + ?</span>
 						<span class="kbd-shortcut__details">See keyboard shortcuts</span>
 					</p>*/}
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + 5</span>
-						<span class="kbd-shortcut__details">Refresh preview</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Refresh preview</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + S</span>
-						<span class="kbd-shortcut__details">Save current creations</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Save current creations</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + O</span>
 						<span class="kbd-shortcut__details">
-							Open list of saved creations
+							<Trans>Open list of saved creations</Trans>
 						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl + L</span>
 						<span class="kbd-shortcut__details">
-							Clear console (works when console input is focused)
+							<Trans>Clear console (works when console input is focused)</Trans>
 						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Esc</span>
 						<span class="kbd-shortcut__details">
-							Close saved creations panel & modals
+							<Trans>Close saved creations panel & modals</Trans>
 						</span>
 					</p>
 				</div>
 				<div class="ml-2">
-					<h2>Editor</h2>
+					<h2>
+						<Trans>Editor</Trans>
+					</h2>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + F</span>
-						<span class="kbd-shortcut__details">Find</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Find</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + G</span>
-						<span class="kbd-shortcut__details">Select next match</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Select next match</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + G</span>
-						<span class="kbd-shortcut__details">Select previous match</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Select previous match</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + Opt/Alt + F</span>
-						<span class="kbd-shortcut__details">Find & replace</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Find & replace</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Shift + Tab</span>
-						<span class="kbd-shortcut__details">Realign code</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Realign code</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + ]</span>
-						<span class="kbd-shortcut__details">Indent code right</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Indent code right</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + [</span>
-						<span class="kbd-shortcut__details">Indent code left</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Indent code left</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Tab</span>
 						<span class="kbd-shortcut__details">
-							Emmet code completion{' '}
+							<Trans>Emmet code completion</Trans>{' '}
 							<a
 								href="https://emmet.io/"
 								target="_blank"
 								rel="noopener noreferrer"
 							>
-								Read more
+								<Trans>Read more</Trans>
 							</a>
 						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + /</span>
-						<span class="kbd-shortcut__details">Single line comment</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Single line comment</Trans>
+						</span>
 					</p>
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl + Shift + F</span>
-						<span class="kbd-shortcut__details">Run Prettier</span>
+						<span class="kbd-shortcut__details">
+							<Trans>Run Prettier</Trans>
+						</span>
 					</p>
 				</div>
 			</div>
diff --git a/src/components/MainHeader.jsx b/src/components/MainHeader.jsx
index 77f7eb5..cfe89de 100644
--- a/src/components/MainHeader.jsx
+++ b/src/components/MainHeader.jsx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { Button } from './common';
-import { Trans, t } from '@lingui/macro';
+import { Trans, NumberFormat, t } from '@lingui/macro';
 import { I18n } from '@lingui/react';
 
 const DEFAULT_PROFILE_IMG =
@@ -23,7 +23,7 @@ export function MainHeader(props) {
 						<button
 							id="runBtn"
 							class="hide btn btn btn--dark flex flex-v-center hint--rounded hint--bottom-left"
-							aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
+							aria-label={i18n._(t`Run preview (Ctrl/⌘ + Shift + 5)`)}
 							onClick={props.runBtnClickHandler}
 						>
 							<svg>
@@ -48,14 +48,14 @@ export function MainHeader(props) {
 									}`}
 									class="count-label"
 								>
-									{props.externalLibCount}
+									<NumberFormat value={props.externalLibCount} />
 								</span>
 							</Button>
 						)}
 
 						<button
 							class="btn btn--dark hint--rounded hint--bottom-left"
-							aria-label="Start a new creation"
+							aria-label={i18n._(t`Start a new creation`)}
 							onClick={props.newBtnHandler}
 						>
 							<svg viewBox="0 0 24 24">
@@ -68,7 +68,7 @@ export function MainHeader(props) {
 							class={`btn btn--dark hint--rounded hint--bottom-left ${
 								props.isSaving ? 'is-loading' : ''
 							} ${props.unsavedEditCount ? 'is-marked' : 0}`}
-							aria-label="Save current creation (Ctrl/⌘ + S)"
+							aria-label={i18n._(t`Save current creation (Ctrl/⌘ + S)`)}
 							onClick={props.saveBtnHandler}
 						>
 							<svg viewBox="0 0 24 24">
@@ -84,7 +84,7 @@ export function MainHeader(props) {
 							class={`btn btn--dark hint--rounded hint--bottom-left ${
 								props.isFetchingItems ? 'is-loading' : ''
 							}`}
-							aria-label="Open a saved creation (Ctrl/⌘ + O)"
+							aria-label={i18n._(t`Open a saved creation (Ctrl/⌘ + O)`)}
 							onClick={props.openBtnHandler}
 						>
 							<svg viewBox="0 0 24 24">
@@ -100,15 +100,14 @@ export function MainHeader(props) {
 							data-event-category="ui"
 							data-event-action="loginButtonClick"
 							class="hide-on-login btn btn--dark hint--rounded  hint--bottom-left"
-							aria-label="Login/Signup"
 						>
-							<Trans>Login</Trans>/<Trans>Signup</Trans>
+							<Trans>Login/Signup</Trans>
 						</Button>
 						<Button
 							onClick={props.profileBtnHandler}
 							data-event-category="ui"
 							data-event-action="headerAvatarClick"
-							aria-label="See profile or Logout"
+							aria-label={i18n._(t`See profile or Logout`)}
 							class="hide-on-logout btn--dark hint--rounded  hint--bottom-left"
 						>
 							<img
diff --git a/src/components/SavedItemPane.jsx b/src/components/SavedItemPane.jsx
index 2bae8e2..c4b786e 100644
--- a/src/components/SavedItemPane.jsx
+++ b/src/components/SavedItemPane.jsx
@@ -5,6 +5,8 @@ import { itemService } from '../itemService';
 import { alertsService } from '../notifications';
 import { deferred } from '../deferred';
 import { ItemTile } from './ItemTile';
+import { Trans, NumberFormat, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 export default class SavedItemPane extends Component {
 	constructor(props) {
@@ -105,7 +107,9 @@ export default class SavedItemPane extends Component {
 			} catch (exception) {
 				log(exception);
 				alert(
-					'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.'
+					i18n._(
+						t`'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.`
+					)
 				);
 			}
 		});
@@ -146,63 +150,83 @@ export default class SavedItemPane extends Component {
 		{ filteredItems = [], items = [] }
 	) {
 		return (
-			<div
-				id="js-saved-items-pane"
-				class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
-				onKeyDown={this.keyDownHandler.bind(this)}
-			>
-				<button
-					onClick={this.onCloseIntent.bind(this)}
-					class="btn  saved-items-pane__close-btn"
-					id="js-saved-items-pane-close-btn"
-				>
-					X
-				</button>
-				<div class="flex flex-v-center" style="justify-content: space-between;">
-					<h3>My Library ({filteredItems.length})</h3>
-
-					<div>
+			<I18n>
+				{({ i18n }) => (
+					<div
+						id="js-saved-items-pane"
+						class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
+						onKeyDown={this.keyDownHandler.bind(this)}
+					>
 						<button
-							onClick={exportBtnClickHandler}
-							class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							aria-label="Export all your creations into a single importable file."
+							onClick={this.onCloseIntent.bind(this)}
+							class="btn  saved-items-pane__close-btn"
+							id="js-saved-items-pane-close-btn"
 						>
-							Export
+							X
 						</button>
-						<button
-							onClick={this.importBtnClickHandler.bind(this)}
-							class="btn--dark hint--bottom-left hint--rounded hint--medium"
-							aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
+						<div
+							class="flex flex-v-center"
+							style="justify-content: space-between;"
 						>
-							Import
-						</button>
-					</div>
-				</div>
-				<input
-					type="search"
-					id="searchInput"
-					class="search-input"
-					onInput={this.searchInputHandler.bind(this)}
-					placeholder="Search your creations here..."
-				/>
+							<h3>
+								<Trans>My Library ({filteredItems.length})</Trans>
+							</h3>
 
-				<div id="js-saved-items-wrap" class="saved-items-pane__container">
-					{!filteredItems.length && items.length ? (
-						<div class="mt-1">No match found.</div>
-					) : null}
-					{filteredItems.map(item => (
-						<ItemTile
-							item={item}
-							onClick={this.itemClickHandler.bind(this, item)}
-							onForkBtnClick={this.itemForkBtnClickHandler.bind(this, item)}
-							onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(this, item)}
+							<div>
+								<button
+									onClick={exportBtnClickHandler}
+									class="btn--dark hint--bottom-left hint--rounded hint--medium"
+									aria-label={i18n._(
+										t`Export all your creations into a single importable file.`
+									)}
+								>
+									<Trans>Export</Trans>
+								</button>
+								<button
+									onClick={this.importBtnClickHandler.bind(this)}
+									class="btn--dark hint--bottom-left hint--rounded hint--medium"
+									aria-label={i18n._(
+										t`Import your creations. Only the file that you export through the 'Export' button can be imported.`
+									)}
+								>
+									<Trans>Import</Trans>
+								</button>
+							</div>
+						</div>
+						<input
+							type="search"
+							id="searchInput"
+							class="search-input"
+							onInput={this.searchInputHandler.bind(this)}
+							placeholder={i18n._(t`Search your creations here...`)}
 						/>
-					))}
-					{!items.length ? (
-						<h2 class="opacity--30">Nothing saved here.</h2>
-					) : null}
-				</div>
-			</div>
+
+						<div id="js-saved-items-wrap" class="saved-items-pane__container">
+							{!filteredItems.length && items.length ? (
+								<div class="mt-1">
+									<Trans>No match found.</Trans>
+								</div>
+							) : null}
+							{filteredItems.map(item => (
+								<ItemTile
+									item={item}
+									onClick={this.itemClickHandler.bind(this, item)}
+									onForkBtnClick={this.itemForkBtnClickHandler.bind(this, item)}
+									onRemoveBtnClick={this.itemRemoveBtnClickHandler.bind(
+										this,
+										item
+									)}
+								/>
+							))}
+							{!items.length ? (
+								<h2 class="opacity--30">
+									<Trans>Nothing saved here.</Trans>
+								</h2>
+							) : null}
+						</div>
+					</div>
+				)}
+			</I18n>
 		);
 	}
 }
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index f4cb970..f8cf5df 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -369,9 +369,10 @@ export default class Settings extends Component {
 									onChange={e => this.updateSetting(e, 'lang')}
 								>
 									<option value="en">English</option>
-									<option value="hi">Hindi</option>
+									<option value="hi">हिंदी</option>
 									<option value="sa">Sanskrit</option>
-									<option value="es">Spanish</option>
+									<option value="es">Español (España)</option>
+									<option value="zh-Hans">中文(简体)</option>
 								</select>
 							</label>
 						</div>
diff --git a/src/locales/en/messages.js b/src/locales/en/messages.js
index 47040b2..b66e190 100644
--- a/src/locales/en/messages.js
+++ b/src/locales/en/messages.js
@@ -18,14 +18,107 @@
 		}
 	},
 	messages: {
+		'"Web Maker" <0>CHill</0>.': '"Web Maker" <0>CHill</0>.',
+		'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.':
+			'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.',
+		'Add Library': 'Add Library',
 		'Add a JS/CSS library': 'Add a JS/CSS library',
 		'Add library': 'Add library',
+		Chat: 'Chat',
+		'Choose from popular libraries': 'Choose from popular libraries',
+		'Clear console (CTRL + L)': 'Clear console (CTRL + L)',
+		'Clear console (works when console input is focused)':
+			'Clear console (works when console input is focused)',
+		'Close saved creations panel & modals':
+			'Close saved creations panel & modals',
 		Console: 'Console',
+		'Detach Preview': 'Detach Preview',
+		Donate: 'Donate',
+		'Double click to toggle console': 'Double click to toggle console',
+		'Download game as zip': 'Download game as zip',
+		'Edit on CodePen': 'Edit on CodePen',
+		Editor: 'Editor',
+		'Emmet code completion': 'Emmet code completion',
+		Export: 'Export',
+		'Export all your creations into a single importable file.':
+			'Export all your creations into a single importable file.',
+		Find: 'Find',
+		'Find & replace': 'Find & replace',
+		Global: 'Global',
+		Help: 'Help',
+		Import: 'Import',
+		"Import your creations. Only the file that you export through the 'Export' button can be imported.":
+			"Import your creations. Only the file that you export through the 'Export' button can be imported.",
+		'Indent code left': 'Indent code left',
+		'Indent code right': 'Indent code right',
+		'Keyboard Shortcuts': 'Keyboard Shortcuts',
+		'Keyboard shortcuts': 'Keyboard shortcuts',
+		License: 'License',
+		'Like this extension? Please <0>rate it here</0>.':
+			'Like this extension? Please <0>rate it here</0>.',
 		Login: 'Login',
+		'Login/Signup': 'Login/Signup',
+		'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>':
+			'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>',
+		'My Library ({0})': function(a) {
+			return ['My Library (', a('0'), ')'];
+		},
 		New: 'New',
+		'No match found.': 'No match found.',
+		'Note: You can load external scripts from following domains:':
+			'Note: You can load external scripts from following domains:',
+		'Nothing saved here.': 'Nothing saved here.',
 		Open: 'Open',
+		'Open a saved creation (Ctrl/\u2318 + O)':
+			'Open a saved creation (Ctrl/\u2318 + O)',
+		'Open list of saved creations': 'Open list of saved creations',
+		'Powered by cdnjs': 'Powered by cdnjs',
+		'Put each library in new line': 'Put each library in new line',
+		'Read more': 'Read more',
+		'Read the documentation.': 'Read the documentation.',
+		'Realign code': 'Realign code',
+		'Refresh preview': 'Refresh preview',
+		'Report a bug': 'Report a bug',
+		'Review Web Maker': 'Review Web Maker',
 		Run: 'Run',
+		'Run Prettier': 'Run Prettier',
+		'Run preview (Ctrl/\u2318 + Shift + 5)':
+			'Run preview (Ctrl/\u2318 + Shift + 5)',
 		Save: 'Save',
-		Signup: 'Signup'
+		'Save as HTML file': 'Save as HTML file',
+		'Save current creation (Ctrl/\u2318 + S)':
+			'Save current creation (Ctrl/\u2318 + S)',
+		'Save current creations': 'Save current creations',
+		'Search your creations here...': 'Search your creations here...',
+		'See Changelog': 'See Changelog',
+		'See awesome libraries used': 'See awesome libraries used',
+		'See profile or Logout': 'See profile or Logout',
+		'Select next match': 'Select next match',
+		'Select previous match': 'Select previous match',
+		Settings: 'Settings',
+		Signup: 'Signup',
+		'Single line comment': 'Single line comment',
+		'Start a new creation': 'Start a new creation',
+		'Support the developer': 'Support the developer',
+		'Support the developer by pledging some amount':
+			'Support the developer by pledging some amount',
+		'Switch to full screen preview': 'Switch to full screen preview',
+		'Switch to layout with all vertical panes':
+			'Switch to layout with all vertical panes',
+		'Switch to layout with preview on bottom':
+			'Switch to layout with preview on bottom',
+		'Switch to layout with preview on left':
+			'Switch to layout with preview on left',
+		'Switch to layout with preview on left"':
+			'Switch to layout with preview on left"',
+		'Switch to layout with preview on right':
+			'Switch to layout with preview on right',
+		'Take screenshot of preview': 'Take screenshot of preview',
+		'Toggle console': 'Toggle console',
+		"Tweet about 'Web Maker'": "Tweet about 'Web Maker'",
+		'Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>':
+			'Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>',
+		'Type here to search libraries': 'Type here to search libraries',
+		'Upload Image': 'Upload Image'
 	}
 };
diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po
index e22bb6f..e541ae0 100644
--- a/src/locales/en/messages.po
+++ b/src/locales/en/messages.po
@@ -13,6 +13,18 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/components/HelpModal.jsx:201
+msgid "\"Web Maker\" <0>CHill</0>."
+msgstr "\"Web Maker\" <0>CHill</0>."
+
+#: src/components/SavedItemPane.jsx:111
+msgid "'Oops! Selected file is corrupted. Please select a file that was generated by clicking the \"Export\" button."
+msgstr "'Oops! Selected file is corrupted. Please select a file that was generated by clicking the \"Export\" button."
+
+#: src/components/AddLibrary.jsx:67
+msgid "Add Library"
+msgstr "Add Library"
+
 #: src/components/MainHeader.jsx:41
 msgid "Add a JS/CSS library"
 msgstr "Add a JS/CSS library"
@@ -22,37 +34,328 @@ msgstr "Add a JS/CSS library"
 msgid "Add library"
 msgstr "Add library"
 
-#: src/components/Console.jsx:58
-#: src/components/Console.jsx:58
+#: src/components/HelpModal.jsx:91
+msgid "Chat"
+msgstr "Chat"
+
+#: src/components/AddLibrary.jsx:92
+#: src/components/AddLibrary.jsx:92
+msgid "Choose from popular libraries"
+msgstr "Choose from popular libraries"
+
+#: src/components/Console.jsx:70
+msgid "Clear console (CTRL + L)"
+msgstr "Clear console (CTRL + L)"
+
+#: src/components/KeyboardShortcutsModal.jsx:42
+msgid "Clear console (works when console input is focused)"
+msgstr "Clear console (works when console input is focused)"
+
+#: src/components/KeyboardShortcutsModal.jsx:48
+msgid "Close saved creations panel & modals"
+msgstr "Close saved creations panel & modals"
+
+#: src/components/Console.jsx:61
+#: src/components/Console.jsx:61
 msgid "Console"
 msgstr "Console"
 
+#: src/components/Footer.jsx:301
+msgid "Detach Preview"
+msgstr "Detach Preview"
+
+#: src/components/Footer.jsx:146
+#: src/components/Footer.jsx:146
+msgid "Donate"
+msgstr "Donate"
+
+#: src/components/Console.jsx:57
+msgid "Double click to toggle console"
+msgstr "Double click to toggle console"
+
+#: src/components/Footer.jsx:174
+#: src/components/Footer.jsx:174
+msgid "Download game as zip"
+msgstr "Download game as zip"
+
+#: src/components/Footer.jsx:229
+msgid "Edit on CodePen"
+msgstr "Edit on CodePen"
+
+#: src/components/KeyboardShortcutsModal.jsx:54
+msgid "Editor"
+msgstr "Editor"
+
+#: src/components/KeyboardShortcutsModal.jsx:101
+msgid "Emmet code completion"
+msgstr "Emmet code completion"
+
+#: src/components/SavedItemPane.jsx:183
+#: src/components/SavedItemPane.jsx:183
+msgid "Export"
+msgstr "Export"
+
+#: src/components/SavedItemPane.jsx:180
+msgid "Export all your creations into a single importable file."
+msgstr "Export all your creations into a single importable file."
+
+#: src/components/KeyboardShortcutsModal.jsx:59
+msgid "Find"
+msgstr "Find"
+
+#: src/components/KeyboardShortcutsModal.jsx:77
+msgid "Find & replace"
+msgstr "Find & replace"
+
+#: src/components/KeyboardShortcutsModal.jsx:15
+msgid "Global"
+msgstr "Global"
+
+#: src/components/Footer.jsx:94
+#: src/components/Footer.jsx:194
+#: src/components/Footer.jsx:194
+msgid "Help"
+msgstr "Help"
+
+#: src/components/SavedItemPane.jsx:192
+#: src/components/SavedItemPane.jsx:192
+msgid "Import"
+msgstr "Import"
+
+#: src/components/SavedItemPane.jsx:189
+msgid "Import your creations. Only the file that you export through the 'Export' button can be imported."
+msgstr "Import your creations. Only the file that you export through the 'Export' button can be imported."
+
+#: src/components/KeyboardShortcutsModal.jsx:95
+msgid "Indent code left"
+msgstr "Indent code left"
+
+#: src/components/KeyboardShortcutsModal.jsx:89
+msgid "Indent code right"
+msgstr "Indent code right"
+
+#: src/components/KeyboardShortcutsModal.jsx:9
+msgid "Keyboard Shortcuts"
+msgstr "Keyboard Shortcuts"
+
+#: src/components/Footer.jsx:108
+msgid "Keyboard shortcuts"
+msgstr "Keyboard shortcuts"
+
+#: src/components/HelpModal.jsx:199
+msgid "License"
+msgstr "License"
+
+#: src/components/HelpModal.jsx:47
+msgid "Like this extension? Please <0>rate it here</0>."
+msgstr "Like this extension? Please <0>rate it here</0>."
+
 #: src/components/MainHeader.jsx:105
 #: src/components/MainHeader.jsx:105
-msgid "Login"
-msgstr "Login"
+#~ msgid "Login"
+#~ msgstr "Login"
+
+#: src/components/MainHeader.jsx:104
+#: src/components/MainHeader.jsx:104
+msgid "Login/Signup"
+msgstr "Login/Signup"
+
+#: src/components/HelpModal.jsx:16
+msgid "Made with <0>💖</0>& <1> 🙌</1> by <2>Kushagra Gour</2>"
+msgstr "Made with <0>💖</0>& <1> 🙌</1> by <2>Kushagra Gour</2>"
+
+#: src/components/SavedItemPane.jsx:172
+msgid "My Library ({0})"
+msgstr "My Library ({0})"
 
 #: src/components/MainHeader.jsx:64
 #: src/components/MainHeader.jsx:64
 msgid "New"
 msgstr "New"
 
+#: src/components/SavedItemPane.jsx:207
+msgid "No match found."
+msgstr "No match found."
+
+#: src/components/AddLibrary.jsx:125
+msgid "Note: You can load external scripts from following domains:"
+msgstr "Note: You can load external scripts from following domains:"
+
+#: src/components/SavedItemPane.jsx:223
+msgid "Nothing saved here."
+msgstr "Nothing saved here."
+
 #: src/components/MainHeader.jsx:96
 #: src/components/MainHeader.jsx:96
 msgid "Open"
 msgstr "Open"
 
+#: src/components/MainHeader.jsx:87
+msgid "Open a saved creation (Ctrl/⌘ + O)"
+msgstr "Open a saved creation (Ctrl/⌘ + O)"
+
+#: src/components/KeyboardShortcutsModal.jsx:36
+msgid "Open list of saved creations"
+msgstr "Open list of saved creations"
+
+#: src/components/AddLibrary.jsx:88
+msgid "Powered by cdnjs"
+msgstr "Powered by cdnjs"
+
+#: src/components/AddLibrary.jsx:118
+#: src/components/AddLibrary.jsx:147
+msgid "Put each library in new line"
+msgstr "Put each library in new line"
+
+#: src/components/KeyboardShortcutsModal.jsx:107
+msgid "Read more"
+msgstr "Read more"
+
+#: src/components/HelpModal.jsx:30
+msgid "Read the documentation."
+msgstr "Read the documentation."
+
+#: src/components/KeyboardShortcutsModal.jsx:83
+msgid "Realign code"
+msgstr "Realign code"
+
+#: src/components/KeyboardShortcutsModal.jsx:24
+msgid "Refresh preview"
+msgstr "Refresh preview"
+
+#: src/components/HelpModal.jsx:102
+msgid "Report a bug"
+msgstr "Report a bug"
+
+#: src/components/HelpModal.jsx:80
+msgid "Review Web Maker"
+msgstr "Review Web Maker"
+
 #: src/components/MainHeader.jsx:32
 #: src/components/MainHeader.jsx:32
 msgid "Run"
 msgstr "Run"
 
+#: src/components/KeyboardShortcutsModal.jsx:120
+msgid "Run Prettier"
+msgstr "Run Prettier"
+
+#: src/components/MainHeader.jsx:26
+msgid "Run preview (Ctrl/⌘ + Shift + 5)"
+msgstr "Run preview (Ctrl/⌘ + Shift + 5)"
+
 #: src/components/MainHeader.jsx:80
 #: src/components/MainHeader.jsx:80
 msgid "Save"
 msgstr "Save"
 
+#: src/components/Footer.jsx:206
+msgid "Save as HTML file"
+msgstr "Save as HTML file"
+
+#: src/components/MainHeader.jsx:71
+msgid "Save current creation (Ctrl/⌘ + S)"
+msgstr "Save current creation (Ctrl/⌘ + S)"
+
+#: src/components/KeyboardShortcutsModal.jsx:30
+msgid "Save current creations"
+msgstr "Save current creations"
+
+#: src/components/SavedItemPane.jsx:201
+msgid "Search your creations here..."
+msgstr "Search your creations here..."
+
+#: src/components/Footer.jsx:317
+msgid "See Changelog"
+msgstr "See Changelog"
+
+#: src/components/HelpModal.jsx:110
+msgid "See awesome libraries used"
+msgstr "See awesome libraries used"
+
+#: src/components/MainHeader.jsx:110
+msgid "See profile or Logout"
+msgstr "See profile or Logout"
+
+#: src/components/KeyboardShortcutsModal.jsx:65
+msgid "Select next match"
+msgstr "Select next match"
+
+#: src/components/KeyboardShortcutsModal.jsx:71
+msgid "Select previous match"
+msgstr "Select previous match"
+
+#: src/components/Footer.jsx:329
+msgid "Settings"
+msgstr "Settings"
+
 #: src/components/MainHeader.jsx:105
 #: src/components/MainHeader.jsx:105
-msgid "Signup"
-msgstr "Signup"
+#~ msgid "Signup"
+#~ msgstr "Signup"
+
+#: src/components/KeyboardShortcutsModal.jsx:114
+msgid "Single line comment"
+msgstr "Single line comment"
+
+#: src/components/MainHeader.jsx:58
+msgid "Start a new creation"
+msgstr "Start a new creation"
+
+#: src/components/HelpModal.jsx:69
+#: src/components/HelpModal.jsx:69
+msgid "Support the developer"
+msgstr "Support the developer"
+
+#: src/components/Footer.jsx:143
+msgid "Support the developer by pledging some amount"
+msgstr "Support the developer by pledging some amount"
+
+#: src/components/Footer.jsx:293
+msgid "Switch to full screen preview"
+msgstr "Switch to full screen preview"
+
+#: src/components/Footer.jsx:283
+msgid "Switch to layout with all vertical panes"
+msgstr "Switch to layout with all vertical panes"
+
+#: src/components/Footer.jsx:263
+msgid "Switch to layout with preview on bottom"
+msgstr "Switch to layout with preview on bottom"
+
+#: src/components/Footer.jsx:273
+msgid "Switch to layout with preview on left"
+msgstr "Switch to layout with preview on left"
+
+#: src/components/Footer.jsx:273
+#~ msgid "Switch to layout with preview on left\""
+#~ msgstr "Switch to layout with preview on left\""
+
+#: src/components/Footer.jsx:253
+msgid "Switch to layout with preview on right"
+msgstr "Switch to layout with preview on right"
+
+#: src/components/Footer.jsx:240
+msgid "Take screenshot of preview"
+msgstr "Take screenshot of preview"
+
+#: src/components/Console.jsx:79
+msgid "Toggle console"
+msgstr "Toggle console"
+
+#: src/components/Footer.jsx:122
+msgid "Tweet about 'Web Maker'"
+msgstr "Tweet about 'Web Maker'"
+
+#: src/components/HelpModal.jsx:34
+msgid "Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>"
+msgstr "Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>"
+
+#: src/components/AddLibrary.jsx:82
+msgid "Type here to search libraries"
+msgstr "Type here to search libraries"
+
+#: src/components/Footer.jsx:187
+#: src/components/Footer.jsx:187
+msgid "Upload Image"
+msgstr "Upload Image"
diff --git a/src/locales/es/messages.js b/src/locales/es/messages.js
index 1489aa9..0d37063 100644
--- a/src/locales/es/messages.js
+++ b/src/locales/es/messages.js
@@ -6,14 +6,107 @@
 		}
 	},
 	messages: {
+		'"Web Maker" <0>CHill</0>.': '"Web Maker" <0>CHill</0>.',
+		'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.':
+			'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.',
+		'Add Library': 'Add Library',
 		'Add a JS/CSS library': 'Add a JS/CSS library',
 		'Add library': 'Add library',
+		Chat: 'Chat',
+		'Choose from popular libraries': 'Choose from popular libraries',
+		'Clear console (CTRL + L)': 'Clear console (CTRL + L)',
+		'Clear console (works when console input is focused)':
+			'Clear console (works when console input is focused)',
+		'Close saved creations panel & modals':
+			'Close saved creations panel & modals',
 		Console: 'Console',
+		'Detach Preview': 'Detach Preview',
+		Donate: 'Donate',
+		'Double click to toggle console': 'Double click to toggle console',
+		'Download game as zip': 'Download game as zip',
+		'Edit on CodePen': 'Edit on CodePen',
+		Editor: 'Editor',
+		'Emmet code completion': 'Emmet code completion',
+		Export: 'Export',
+		'Export all your creations into a single importable file.':
+			'Export all your creations into a single importable file.',
+		Find: 'Find',
+		'Find & replace': 'Find & replace',
+		Global: 'Global',
+		Help: 'Help',
+		Import: 'Import',
+		"Import your creations. Only the file that you export through the 'Export' button can be imported.":
+			"Import your creations. Only the file that you export through the 'Export' button can be imported.",
+		'Indent code left': 'Indent code left',
+		'Indent code right': 'Indent code right',
+		'Keyboard Shortcuts': 'Keyboard Shortcuts',
+		'Keyboard shortcuts': 'Keyboard shortcuts',
+		License: 'License',
+		'Like this extension? Please <0>rate it here</0>.':
+			'Like this extension? Please <0>rate it here</0>.',
 		Login: 'Login',
+		'Login/Signup': 'Login/Signup',
+		'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>':
+			'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>',
+		'My Library ({0})': function(a) {
+			return ['My Library (', a('0'), ')'];
+		},
 		New: 'New',
+		'No match found.': 'No match found.',
+		'Note: You can load external scripts from following domains:':
+			'Note: You can load external scripts from following domains:',
+		'Nothing saved here.': 'Nothing saved here.',
 		Open: 'Open',
+		'Open a saved creation (Ctrl/\u2318 + O)':
+			'Open a saved creation (Ctrl/\u2318 + O)',
+		'Open list of saved creations': 'Open list of saved creations',
+		'Powered by cdnjs': 'Powered by cdnjs',
+		'Put each library in new line': 'Put each library in new line',
+		'Read more': 'Read more',
+		'Read the documentation.': 'Read the documentation.',
+		'Realign code': 'Realign code',
+		'Refresh preview': 'Refresh preview',
+		'Report a bug': 'Report a bug',
+		'Review Web Maker': 'Review Web Maker',
 		Run: 'Run',
+		'Run Prettier': 'Run Prettier',
+		'Run preview (Ctrl/\u2318 + Shift + 5)':
+			'Run preview (Ctrl/\u2318 + Shift + 5)',
 		Save: 'Save',
-		Signup: 'Signup'
+		'Save as HTML file': 'Save as HTML file',
+		'Save current creation (Ctrl/\u2318 + S)':
+			'Save current creation (Ctrl/\u2318 + S)',
+		'Save current creations': 'Save current creations',
+		'Search your creations here...': 'Search your creations here...',
+		'See Changelog': 'See Changelog',
+		'See awesome libraries used': 'See awesome libraries used',
+		'See profile or Logout': 'See profile or Logout',
+		'Select next match': 'Select next match',
+		'Select previous match': 'Select previous match',
+		Settings: 'Settings',
+		Signup: 'Signup',
+		'Single line comment': 'Single line comment',
+		'Start a new creation': 'Start a new creation',
+		'Support the developer': 'Support the developer',
+		'Support the developer by pledging some amount':
+			'Support the developer by pledging some amount',
+		'Switch to full screen preview': 'Switch to full screen preview',
+		'Switch to layout with all vertical panes':
+			'Switch to layout with all vertical panes',
+		'Switch to layout with preview on bottom':
+			'Switch to layout with preview on bottom',
+		'Switch to layout with preview on left':
+			'Switch to layout with preview on left',
+		'Switch to layout with preview on left"':
+			'Switch to layout with preview on left"',
+		'Switch to layout with preview on right':
+			'Switch to layout with preview on right',
+		'Take screenshot of preview': 'Take screenshot of preview',
+		'Toggle console': 'Toggle console',
+		"Tweet about 'Web Maker'": "Tweet about 'Web Maker'",
+		'Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>':
+			'Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>',
+		'Type here to search libraries': 'Type here to search libraries',
+		'Upload Image': 'Upload Image'
 	}
 };
diff --git a/src/locales/es/messages.po b/src/locales/es/messages.po
index 8fd5f42..53e852c 100644
--- a/src/locales/es/messages.po
+++ b/src/locales/es/messages.po
@@ -13,6 +13,18 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/components/HelpModal.jsx:201
+msgid "\"Web Maker\" <0>CHill</0>."
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:111
+msgid "'Oops! Selected file is corrupted. Please select a file that was generated by clicking the \"Export\" button."
+msgstr ""
+
+#: src/components/AddLibrary.jsx:67
+msgid "Add Library"
+msgstr ""
+
 #: src/components/MainHeader.jsx:41
 msgid "Add a JS/CSS library"
 msgstr ""
@@ -22,14 +34,138 @@ msgstr ""
 msgid "Add library"
 msgstr ""
 
-#: src/components/Console.jsx:58
-#: src/components/Console.jsx:58
+#: src/components/HelpModal.jsx:91
+msgid "Chat"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:92
+#: src/components/AddLibrary.jsx:92
+msgid "Choose from popular libraries"
+msgstr ""
+
+#: src/components/Console.jsx:70
+msgid "Clear console (CTRL + L)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:42
+msgid "Clear console (works when console input is focused)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:48
+msgid "Close saved creations panel & modals"
+msgstr ""
+
+#: src/components/Console.jsx:61
+#: src/components/Console.jsx:61
 msgid "Console"
 msgstr ""
 
+#: src/components/Footer.jsx:301
+msgid "Detach Preview"
+msgstr ""
+
+#: src/components/Footer.jsx:146
+#: src/components/Footer.jsx:146
+msgid "Donate"
+msgstr ""
+
+#: src/components/Console.jsx:57
+msgid "Double click to toggle console"
+msgstr ""
+
+#: src/components/Footer.jsx:174
+#: src/components/Footer.jsx:174
+msgid "Download game as zip"
+msgstr ""
+
+#: src/components/Footer.jsx:229
+msgid "Edit on CodePen"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:54
+msgid "Editor"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:101
+msgid "Emmet code completion"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:183
+#: src/components/SavedItemPane.jsx:183
+msgid "Export"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:180
+msgid "Export all your creations into a single importable file."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:59
+msgid "Find"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:77
+msgid "Find & replace"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:15
+msgid "Global"
+msgstr ""
+
+#: src/components/Footer.jsx:94
+#: src/components/Footer.jsx:194
+#: src/components/Footer.jsx:194
+msgid "Help"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:192
+#: src/components/SavedItemPane.jsx:192
+msgid "Import"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:189
+msgid "Import your creations. Only the file that you export through the 'Export' button can be imported."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:95
+msgid "Indent code left"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:89
+msgid "Indent code right"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:9
+msgid "Keyboard Shortcuts"
+msgstr ""
+
+#: src/components/Footer.jsx:108
+msgid "Keyboard shortcuts"
+msgstr ""
+
+#: src/components/HelpModal.jsx:199
+msgid "License"
+msgstr ""
+
+#: src/components/HelpModal.jsx:47
+msgid "Like this extension? Please <0>rate it here</0>."
+msgstr ""
+
 #: src/components/MainHeader.jsx:105
 #: src/components/MainHeader.jsx:105
-msgid "Login"
+#~ msgid "Login"
+#~ msgstr ""
+
+#: src/components/MainHeader.jsx:104
+#: src/components/MainHeader.jsx:104
+msgid "Login/Signup"
+msgstr ""
+
+#: src/components/HelpModal.jsx:16
+msgid "Made with <0>💖</0>& <1> 🙌</1> by <2>Kushagra Gour</2>"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:172
+msgid "My Library ({0})"
 msgstr ""
 
 #: src/components/MainHeader.jsx:64
@@ -37,22 +173,189 @@ msgstr ""
 msgid "New"
 msgstr ""
 
+#: src/components/SavedItemPane.jsx:207
+msgid "No match found."
+msgstr ""
+
+#: src/components/AddLibrary.jsx:125
+msgid "Note: You can load external scripts from following domains:"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:223
+msgid "Nothing saved here."
+msgstr ""
+
 #: src/components/MainHeader.jsx:96
 #: src/components/MainHeader.jsx:96
 msgid "Open"
 msgstr ""
 
+#: src/components/MainHeader.jsx:87
+msgid "Open a saved creation (Ctrl/⌘ + O)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:36
+msgid "Open list of saved creations"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:88
+msgid "Powered by cdnjs"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:118
+#: src/components/AddLibrary.jsx:147
+msgid "Put each library in new line"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:107
+msgid "Read more"
+msgstr ""
+
+#: src/components/HelpModal.jsx:30
+msgid "Read the documentation."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:83
+msgid "Realign code"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:24
+msgid "Refresh preview"
+msgstr ""
+
+#: src/components/HelpModal.jsx:102
+msgid "Report a bug"
+msgstr ""
+
+#: src/components/HelpModal.jsx:80
+msgid "Review Web Maker"
+msgstr ""
+
 #: src/components/MainHeader.jsx:32
 #: src/components/MainHeader.jsx:32
 msgid "Run"
 msgstr ""
 
+#: src/components/KeyboardShortcutsModal.jsx:120
+msgid "Run Prettier"
+msgstr ""
+
+#: src/components/MainHeader.jsx:26
+msgid "Run preview (Ctrl/⌘ + Shift + 5)"
+msgstr ""
+
 #: src/components/MainHeader.jsx:80
 #: src/components/MainHeader.jsx:80
 msgid "Save"
 msgstr ""
 
-#: src/components/MainHeader.jsx:105
-#: src/components/MainHeader.jsx:105
-msgid "Signup"
+#: src/components/Footer.jsx:206
+msgid "Save as HTML file"
+msgstr ""
+
+#: src/components/MainHeader.jsx:71
+msgid "Save current creation (Ctrl/⌘ + S)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:30
+msgid "Save current creations"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:201
+msgid "Search your creations here..."
+msgstr ""
+
+#: src/components/Footer.jsx:317
+msgid "See Changelog"
+msgstr ""
+
+#: src/components/HelpModal.jsx:110
+msgid "See awesome libraries used"
+msgstr ""
+
+#: src/components/MainHeader.jsx:110
+msgid "See profile or Logout"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:65
+msgid "Select next match"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:71
+msgid "Select previous match"
+msgstr ""
+
+#: src/components/Footer.jsx:329
+msgid "Settings"
+msgstr ""
+
+#: src/components/MainHeader.jsx:105
+#: src/components/MainHeader.jsx:105
+#~ msgid "Signup"
+#~ msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:114
+msgid "Single line comment"
+msgstr ""
+
+#: src/components/MainHeader.jsx:58
+msgid "Start a new creation"
+msgstr ""
+
+#: src/components/HelpModal.jsx:69
+#: src/components/HelpModal.jsx:69
+msgid "Support the developer"
+msgstr ""
+
+#: src/components/Footer.jsx:143
+msgid "Support the developer by pledging some amount"
+msgstr ""
+
+#: src/components/Footer.jsx:293
+msgid "Switch to full screen preview"
+msgstr ""
+
+#: src/components/Footer.jsx:283
+msgid "Switch to layout with all vertical panes"
+msgstr ""
+
+#: src/components/Footer.jsx:263
+msgid "Switch to layout with preview on bottom"
+msgstr ""
+
+#: src/components/Footer.jsx:273
+msgid "Switch to layout with preview on left"
+msgstr ""
+
+#: src/components/Footer.jsx:273
+#~ msgid "Switch to layout with preview on left\""
+#~ msgstr ""
+
+#: src/components/Footer.jsx:253
+msgid "Switch to layout with preview on right"
+msgstr ""
+
+#: src/components/Footer.jsx:240
+msgid "Take screenshot of preview"
+msgstr ""
+
+#: src/components/Console.jsx:79
+msgid "Toggle console"
+msgstr ""
+
+#: src/components/Footer.jsx:122
+msgid "Tweet about 'Web Maker'"
+msgstr ""
+
+#: src/components/HelpModal.jsx:34
+msgid "Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:82
+msgid "Type here to search libraries"
+msgstr ""
+
+#: src/components/Footer.jsx:187
+#: src/components/Footer.jsx:187
+msgid "Upload Image"
 msgstr ""
diff --git a/src/locales/hi/messages.js b/src/locales/hi/messages.js
index 85bcd1b..864851b 100644
--- a/src/locales/hi/messages.js
+++ b/src/locales/hi/messages.js
@@ -15,14 +15,107 @@
 		}
 	},
 	messages: {
+		'"Web Maker" <0>CHill</0>.': '"Web Maker" <0>CHill</0>.',
+		'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.':
+			'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.',
+		'Add Library': 'Add Library',
 		'Add a JS/CSS library': 'Add a JS/CSS library',
 		'Add library': 'Add library',
+		Chat: 'Chat',
+		'Choose from popular libraries': 'Choose from popular libraries',
+		'Clear console (CTRL + L)': 'Clear console (CTRL + L)',
+		'Clear console (works when console input is focused)':
+			'Clear console (works when console input is focused)',
+		'Close saved creations panel & modals':
+			'Close saved creations panel & modals',
 		Console: 'Console',
+		'Detach Preview': 'Detach Preview',
+		Donate: 'Donate',
+		'Double click to toggle console': 'Double click to toggle console',
+		'Download game as zip': 'Download game as zip',
+		'Edit on CodePen': 'Edit on CodePen',
+		Editor: 'Editor',
+		'Emmet code completion': 'Emmet code completion',
+		Export: 'Export',
+		'Export all your creations into a single importable file.':
+			'Export all your creations into a single importable file.',
+		Find: 'Find',
+		'Find & replace': 'Find & replace',
+		Global: 'Global',
+		Help: 'Help',
+		Import: 'Import',
+		"Import your creations. Only the file that you export through the 'Export' button can be imported.":
+			"Import your creations. Only the file that you export through the 'Export' button can be imported.",
+		'Indent code left': 'Indent code left',
+		'Indent code right': 'Indent code right',
+		'Keyboard Shortcuts': 'Keyboard Shortcuts',
+		'Keyboard shortcuts': 'Keyboard shortcuts',
+		License: 'License',
+		'Like this extension? Please <0>rate it here</0>.':
+			'Like this extension? Please <0>rate it here</0>.',
 		Login: '\u0932\u0949\u0917\u093F\u0928',
+		'Login/Signup': 'Login/Signup',
+		'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>':
+			'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>',
+		'My Library ({0})': function(a) {
+			return ['My Library (', a('0'), ')'];
+		},
 		New: '\u0928\u092F\u093E \u092C\u0928\u093E\u090F\u0901',
-		Open: 'Open',
-		Run: 'Run',
+		'No match found.': 'No match found.',
+		'Note: You can load external scripts from following domains:':
+			'Note: You can load external scripts from following domains:',
+		'Nothing saved here.': 'Nothing saved here.',
+		Open: '\u0916\u094B\u0932\u0947\u0902',
+		'Open a saved creation (Ctrl/\u2318 + O)':
+			'Open a saved creation (Ctrl/\u2318 + O)',
+		'Open list of saved creations': 'Open list of saved creations',
+		'Powered by cdnjs': 'Powered by cdnjs',
+		'Put each library in new line': 'Put each library in new line',
+		'Read more': 'Read more',
+		'Read the documentation.': 'Read the documentation.',
+		'Realign code': 'Realign code',
+		'Refresh preview': 'Refresh preview',
+		'Report a bug': 'Report a bug',
+		'Review Web Maker': 'Review Web Maker',
+		Run: '\u091A\u0932\u093E\u090F\u0901',
+		'Run Prettier': 'Run Prettier',
+		'Run preview (Ctrl/\u2318 + Shift + 5)':
+			'Run preview (Ctrl/\u2318 + Shift + 5)',
 		Save: 'Save',
-		Signup: 'Signup'
+		'Save as HTML file': 'Save as HTML file',
+		'Save current creation (Ctrl/\u2318 + S)':
+			'Save current creation (Ctrl/\u2318 + S)',
+		'Save current creations': 'Save current creations',
+		'Search your creations here...': 'Search your creations here...',
+		'See Changelog': 'See Changelog',
+		'See awesome libraries used': 'See awesome libraries used',
+		'See profile or Logout': 'See profile or Logout',
+		'Select next match': 'Select next match',
+		'Select previous match': 'Select previous match',
+		Settings: 'Settings',
+		Signup: 'Signup',
+		'Single line comment': 'Single line comment',
+		'Start a new creation': 'Start a new creation',
+		'Support the developer': 'Support the developer',
+		'Support the developer by pledging some amount':
+			'Support the developer by pledging some amount',
+		'Switch to full screen preview': 'Switch to full screen preview',
+		'Switch to layout with all vertical panes':
+			'Switch to layout with all vertical panes',
+		'Switch to layout with preview on bottom':
+			'Switch to layout with preview on bottom',
+		'Switch to layout with preview on left':
+			'Switch to layout with preview on left',
+		'Switch to layout with preview on left"':
+			'Switch to layout with preview on left"',
+		'Switch to layout with preview on right':
+			'Switch to layout with preview on right',
+		'Take screenshot of preview': 'Take screenshot of preview',
+		'Toggle console': 'Toggle console',
+		"Tweet about 'Web Maker'": "Tweet about 'Web Maker'",
+		'Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>':
+			'\u0939\u0932\u0935\u093E \u0939\u093F\u092F\u093E\u0901 \u092F\u0947 \u0924\u094B <0>\u091A\u092E\u092A\u094D\u0930\u0936</0>',
+		'Type here to search libraries': 'Type here to search libraries',
+		'Upload Image': 'Upload Image'
 	}
 };
diff --git a/src/locales/hi/messages.po b/src/locales/hi/messages.po
index 5c70b05..3b02849 100644
--- a/src/locales/hi/messages.po
+++ b/src/locales/hi/messages.po
@@ -13,6 +13,18 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/components/HelpModal.jsx:201
+msgid "\"Web Maker\" <0>CHill</0>."
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:111
+msgid "'Oops! Selected file is corrupted. Please select a file that was generated by clicking the \"Export\" button."
+msgstr ""
+
+#: src/components/AddLibrary.jsx:67
+msgid "Add Library"
+msgstr ""
+
 #: src/components/MainHeader.jsx:41
 msgid "Add a JS/CSS library"
 msgstr ""
@@ -22,37 +34,328 @@ msgstr ""
 msgid "Add library"
 msgstr ""
 
-#: src/components/Console.jsx:58
-#: src/components/Console.jsx:58
+#: src/components/HelpModal.jsx:91
+msgid "Chat"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:92
+#: src/components/AddLibrary.jsx:92
+msgid "Choose from popular libraries"
+msgstr ""
+
+#: src/components/Console.jsx:70
+msgid "Clear console (CTRL + L)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:42
+msgid "Clear console (works when console input is focused)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:48
+msgid "Close saved creations panel & modals"
+msgstr ""
+
+#: src/components/Console.jsx:61
+#: src/components/Console.jsx:61
 msgid "Console"
 msgstr ""
 
+#: src/components/Footer.jsx:301
+msgid "Detach Preview"
+msgstr ""
+
+#: src/components/Footer.jsx:146
+#: src/components/Footer.jsx:146
+msgid "Donate"
+msgstr ""
+
+#: src/components/Console.jsx:57
+msgid "Double click to toggle console"
+msgstr ""
+
+#: src/components/Footer.jsx:174
+#: src/components/Footer.jsx:174
+msgid "Download game as zip"
+msgstr ""
+
+#: src/components/Footer.jsx:229
+msgid "Edit on CodePen"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:54
+msgid "Editor"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:101
+msgid "Emmet code completion"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:183
+#: src/components/SavedItemPane.jsx:183
+msgid "Export"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:180
+msgid "Export all your creations into a single importable file."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:59
+msgid "Find"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:77
+msgid "Find & replace"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:15
+msgid "Global"
+msgstr ""
+
+#: src/components/Footer.jsx:94
+#: src/components/Footer.jsx:194
+#: src/components/Footer.jsx:194
+msgid "Help"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:192
+#: src/components/SavedItemPane.jsx:192
+msgid "Import"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:189
+msgid "Import your creations. Only the file that you export through the 'Export' button can be imported."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:95
+msgid "Indent code left"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:89
+msgid "Indent code right"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:9
+msgid "Keyboard Shortcuts"
+msgstr ""
+
+#: src/components/Footer.jsx:108
+msgid "Keyboard shortcuts"
+msgstr ""
+
+#: src/components/HelpModal.jsx:199
+msgid "License"
+msgstr ""
+
+#: src/components/HelpModal.jsx:47
+msgid "Like this extension? Please <0>rate it here</0>."
+msgstr ""
+
 #: src/components/MainHeader.jsx:105
 #: src/components/MainHeader.jsx:105
-msgid "Login"
-msgstr "लॉगिन"
+#~ msgid "Login"
+#~ msgstr "लॉगिन"
+
+#: src/components/MainHeader.jsx:104
+#: src/components/MainHeader.jsx:104
+msgid "Login/Signup"
+msgstr ""
+
+#: src/components/HelpModal.jsx:16
+msgid "Made with <0>💖</0>& <1> 🙌</1> by <2>Kushagra Gour</2>"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:172
+msgid "My Library ({0})"
+msgstr ""
 
 #: src/components/MainHeader.jsx:64
 #: src/components/MainHeader.jsx:64
 msgid "New"
 msgstr "नया बनाएँ"
 
+#: src/components/SavedItemPane.jsx:207
+msgid "No match found."
+msgstr ""
+
+#: src/components/AddLibrary.jsx:125
+msgid "Note: You can load external scripts from following domains:"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:223
+msgid "Nothing saved here."
+msgstr ""
+
 #: src/components/MainHeader.jsx:96
 #: src/components/MainHeader.jsx:96
 msgid "Open"
 msgstr "खोलें"
 
+#: src/components/MainHeader.jsx:87
+msgid "Open a saved creation (Ctrl/⌘ + O)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:36
+msgid "Open list of saved creations"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:88
+msgid "Powered by cdnjs"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:118
+#: src/components/AddLibrary.jsx:147
+msgid "Put each library in new line"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:107
+msgid "Read more"
+msgstr ""
+
+#: src/components/HelpModal.jsx:30
+msgid "Read the documentation."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:83
+msgid "Realign code"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:24
+msgid "Refresh preview"
+msgstr ""
+
+#: src/components/HelpModal.jsx:102
+msgid "Report a bug"
+msgstr ""
+
+#: src/components/HelpModal.jsx:80
+msgid "Review Web Maker"
+msgstr ""
+
 #: src/components/MainHeader.jsx:32
 #: src/components/MainHeader.jsx:32
 msgid "Run"
 msgstr "चलाएँ"
 
+#: src/components/KeyboardShortcutsModal.jsx:120
+msgid "Run Prettier"
+msgstr ""
+
+#: src/components/MainHeader.jsx:26
+msgid "Run preview (Ctrl/⌘ + Shift + 5)"
+msgstr ""
+
 #: src/components/MainHeader.jsx:80
 #: src/components/MainHeader.jsx:80
 msgid "Save"
 msgstr ""
 
-#: src/components/MainHeader.jsx:105
-#: src/components/MainHeader.jsx:105
-msgid "Signup"
+#: src/components/Footer.jsx:206
+msgid "Save as HTML file"
+msgstr ""
+
+#: src/components/MainHeader.jsx:71
+msgid "Save current creation (Ctrl/⌘ + S)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:30
+msgid "Save current creations"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:201
+msgid "Search your creations here..."
+msgstr ""
+
+#: src/components/Footer.jsx:317
+msgid "See Changelog"
+msgstr ""
+
+#: src/components/HelpModal.jsx:110
+msgid "See awesome libraries used"
+msgstr ""
+
+#: src/components/MainHeader.jsx:110
+msgid "See profile or Logout"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:65
+msgid "Select next match"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:71
+msgid "Select previous match"
+msgstr ""
+
+#: src/components/Footer.jsx:329
+msgid "Settings"
+msgstr ""
+
+#: src/components/MainHeader.jsx:105
+#: src/components/MainHeader.jsx:105
+#~ msgid "Signup"
+#~ msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:114
+msgid "Single line comment"
+msgstr ""
+
+#: src/components/MainHeader.jsx:58
+msgid "Start a new creation"
+msgstr ""
+
+#: src/components/HelpModal.jsx:69
+#: src/components/HelpModal.jsx:69
+msgid "Support the developer"
+msgstr ""
+
+#: src/components/Footer.jsx:143
+msgid "Support the developer by pledging some amount"
+msgstr ""
+
+#: src/components/Footer.jsx:293
+msgid "Switch to full screen preview"
+msgstr ""
+
+#: src/components/Footer.jsx:283
+msgid "Switch to layout with all vertical panes"
+msgstr ""
+
+#: src/components/Footer.jsx:263
+msgid "Switch to layout with preview on bottom"
+msgstr ""
+
+#: src/components/Footer.jsx:273
+msgid "Switch to layout with preview on left"
+msgstr ""
+
+#: src/components/Footer.jsx:273
+#~ msgid "Switch to layout with preview on left\""
+#~ msgstr ""
+
+#: src/components/Footer.jsx:253
+msgid "Switch to layout with preview on right"
+msgstr ""
+
+#: src/components/Footer.jsx:240
+msgid "Take screenshot of preview"
+msgstr ""
+
+#: src/components/Console.jsx:79
+msgid "Toggle console"
+msgstr ""
+
+#: src/components/Footer.jsx:122
+msgid "Tweet about 'Web Maker'"
+msgstr ""
+
+#: src/components/HelpModal.jsx:34
+msgid "Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>"
+msgstr "हलवा हियाँ ये तो <0>चमप्रश</0>"
+
+#: src/components/AddLibrary.jsx:82
+msgid "Type here to search libraries"
+msgstr ""
+
+#: src/components/Footer.jsx:187
+#: src/components/Footer.jsx:187
+msgid "Upload Image"
 msgstr ""
diff --git a/src/locales/zh-Hans/messages.js b/src/locales/zh-Hans/messages.js
index 444a668..0ed40ac 100644
--- a/src/locales/zh-Hans/messages.js
+++ b/src/locales/zh-Hans/messages.js
@@ -6,14 +6,107 @@
 		}
 	},
 	messages: {
+		'"Web Maker" <0>CHill</0>.': '"Web Maker" <0>CHill</0>.',
+		'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.':
+			'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.',
+		'Add Library': 'Add Library',
 		'Add a JS/CSS library': 'Add a JS/CSS library',
 		'Add library': 'Add library',
+		Chat: 'Chat',
+		'Choose from popular libraries': 'Choose from popular libraries',
+		'Clear console (CTRL + L)': 'Clear console (CTRL + L)',
+		'Clear console (works when console input is focused)':
+			'Clear console (works when console input is focused)',
+		'Close saved creations panel & modals':
+			'Close saved creations panel & modals',
 		Console: 'Console',
+		'Detach Preview': 'Detach Preview',
+		Donate: 'Donate',
+		'Double click to toggle console': 'Double click to toggle console',
+		'Download game as zip': 'Download game as zip',
+		'Edit on CodePen': 'Edit on CodePen',
+		Editor: 'Editor',
+		'Emmet code completion': 'Emmet code completion',
+		Export: 'Export',
+		'Export all your creations into a single importable file.':
+			'Export all your creations into a single importable file.',
+		Find: 'Find',
+		'Find & replace': 'Find & replace',
+		Global: 'Global',
+		Help: 'Help',
+		Import: 'Import',
+		"Import your creations. Only the file that you export through the 'Export' button can be imported.":
+			"Import your creations. Only the file that you export through the 'Export' button can be imported.",
+		'Indent code left': 'Indent code left',
+		'Indent code right': 'Indent code right',
+		'Keyboard Shortcuts': 'Keyboard Shortcuts',
+		'Keyboard shortcuts': 'Keyboard shortcuts',
+		License: 'License',
+		'Like this extension? Please <0>rate it here</0>.':
+			'Like this extension? Please <0>rate it here</0>.',
 		Login: 'Login',
+		'Login/Signup': 'Login/Signup',
+		'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>':
+			'Made with <0>\uD83D\uDC96</0>& <1> \uD83D\uDE4C</1> by <2>Kushagra Gour</2>',
+		'My Library ({0})': function(a) {
+			return ['My Library (', a('0'), ')'];
+		},
 		New: 'New',
+		'No match found.': 'No match found.',
+		'Note: You can load external scripts from following domains:':
+			'Note: You can load external scripts from following domains:',
+		'Nothing saved here.': 'Nothing saved here.',
 		Open: 'Open',
+		'Open a saved creation (Ctrl/\u2318 + O)':
+			'Open a saved creation (Ctrl/\u2318 + O)',
+		'Open list of saved creations': 'Open list of saved creations',
+		'Powered by cdnjs': 'Powered by cdnjs',
+		'Put each library in new line': 'Put each library in new line',
+		'Read more': 'Read more',
+		'Read the documentation.': 'Read the documentation.',
+		'Realign code': 'Realign code',
+		'Refresh preview': 'Refresh preview',
+		'Report a bug': 'Report a bug',
+		'Review Web Maker': 'Review Web Maker',
 		Run: 'Run',
+		'Run Prettier': 'Run Prettier',
+		'Run preview (Ctrl/\u2318 + Shift + 5)':
+			'Run preview (Ctrl/\u2318 + Shift + 5)',
 		Save: 'Save',
-		Signup: 'Signup'
+		'Save as HTML file': 'Save as HTML file',
+		'Save current creation (Ctrl/\u2318 + S)':
+			'Save current creation (Ctrl/\u2318 + S)',
+		'Save current creations': 'Save current creations',
+		'Search your creations here...': 'Search your creations here...',
+		'See Changelog': 'See Changelog',
+		'See awesome libraries used': 'See awesome libraries used',
+		'See profile or Logout': 'See profile or Logout',
+		'Select next match': 'Select next match',
+		'Select previous match': 'Select previous match',
+		Settings: 'Settings',
+		Signup: 'Signup',
+		'Single line comment': 'Single line comment',
+		'Start a new creation': 'Start a new creation',
+		'Support the developer': 'Support the developer',
+		'Support the developer by pledging some amount':
+			'Support the developer by pledging some amount',
+		'Switch to full screen preview': 'Switch to full screen preview',
+		'Switch to layout with all vertical panes':
+			'Switch to layout with all vertical panes',
+		'Switch to layout with preview on bottom':
+			'Switch to layout with preview on bottom',
+		'Switch to layout with preview on left':
+			'Switch to layout with preview on left',
+		'Switch to layout with preview on left"':
+			'Switch to layout with preview on left"',
+		'Switch to layout with preview on right':
+			'Switch to layout with preview on right',
+		'Take screenshot of preview': 'Take screenshot of preview',
+		'Toggle console': 'Toggle console',
+		"Tweet about 'Web Maker'": "Tweet about 'Web Maker'",
+		'Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>':
+			'Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>',
+		'Type here to search libraries': 'Type here to search libraries',
+		'Upload Image': 'Upload Image'
 	}
 };
diff --git a/src/locales/zh-Hans/messages.po b/src/locales/zh-Hans/messages.po
index c9ba7a2..fe82ee2 100644
--- a/src/locales/zh-Hans/messages.po
+++ b/src/locales/zh-Hans/messages.po
@@ -13,6 +13,18 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/components/HelpModal.jsx:201
+msgid "\"Web Maker\" <0>CHill</0>."
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:111
+msgid "'Oops! Selected file is corrupted. Please select a file that was generated by clicking the \"Export\" button."
+msgstr ""
+
+#: src/components/AddLibrary.jsx:67
+msgid "Add Library"
+msgstr ""
+
 #: src/components/MainHeader.jsx:41
 msgid "Add a JS/CSS library"
 msgstr ""
@@ -22,14 +34,138 @@ msgstr ""
 msgid "Add library"
 msgstr ""
 
-#: src/components/Console.jsx:58
-#: src/components/Console.jsx:58
+#: src/components/HelpModal.jsx:91
+msgid "Chat"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:92
+#: src/components/AddLibrary.jsx:92
+msgid "Choose from popular libraries"
+msgstr ""
+
+#: src/components/Console.jsx:70
+msgid "Clear console (CTRL + L)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:42
+msgid "Clear console (works when console input is focused)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:48
+msgid "Close saved creations panel & modals"
+msgstr ""
+
+#: src/components/Console.jsx:61
+#: src/components/Console.jsx:61
 msgid "Console"
 msgstr ""
 
+#: src/components/Footer.jsx:301
+msgid "Detach Preview"
+msgstr ""
+
+#: src/components/Footer.jsx:146
+#: src/components/Footer.jsx:146
+msgid "Donate"
+msgstr ""
+
+#: src/components/Console.jsx:57
+msgid "Double click to toggle console"
+msgstr ""
+
+#: src/components/Footer.jsx:174
+#: src/components/Footer.jsx:174
+msgid "Download game as zip"
+msgstr ""
+
+#: src/components/Footer.jsx:229
+msgid "Edit on CodePen"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:54
+msgid "Editor"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:101
+msgid "Emmet code completion"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:183
+#: src/components/SavedItemPane.jsx:183
+msgid "Export"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:180
+msgid "Export all your creations into a single importable file."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:59
+msgid "Find"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:77
+msgid "Find & replace"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:15
+msgid "Global"
+msgstr ""
+
+#: src/components/Footer.jsx:94
+#: src/components/Footer.jsx:194
+#: src/components/Footer.jsx:194
+msgid "Help"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:192
+#: src/components/SavedItemPane.jsx:192
+msgid "Import"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:189
+msgid "Import your creations. Only the file that you export through the 'Export' button can be imported."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:95
+msgid "Indent code left"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:89
+msgid "Indent code right"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:9
+msgid "Keyboard Shortcuts"
+msgstr ""
+
+#: src/components/Footer.jsx:108
+msgid "Keyboard shortcuts"
+msgstr ""
+
+#: src/components/HelpModal.jsx:199
+msgid "License"
+msgstr ""
+
+#: src/components/HelpModal.jsx:47
+msgid "Like this extension? Please <0>rate it here</0>."
+msgstr ""
+
 #: src/components/MainHeader.jsx:105
 #: src/components/MainHeader.jsx:105
-msgid "Login"
+#~ msgid "Login"
+#~ msgstr ""
+
+#: src/components/MainHeader.jsx:104
+#: src/components/MainHeader.jsx:104
+msgid "Login/Signup"
+msgstr ""
+
+#: src/components/HelpModal.jsx:16
+msgid "Made with <0>💖</0>& <1> 🙌</1> by <2>Kushagra Gour</2>"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:172
+msgid "My Library ({0})"
 msgstr ""
 
 #: src/components/MainHeader.jsx:64
@@ -37,22 +173,189 @@ msgstr ""
 msgid "New"
 msgstr ""
 
+#: src/components/SavedItemPane.jsx:207
+msgid "No match found."
+msgstr ""
+
+#: src/components/AddLibrary.jsx:125
+msgid "Note: You can load external scripts from following domains:"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:223
+msgid "Nothing saved here."
+msgstr ""
+
 #: src/components/MainHeader.jsx:96
 #: src/components/MainHeader.jsx:96
 msgid "Open"
 msgstr ""
 
+#: src/components/MainHeader.jsx:87
+msgid "Open a saved creation (Ctrl/⌘ + O)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:36
+msgid "Open list of saved creations"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:88
+msgid "Powered by cdnjs"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:118
+#: src/components/AddLibrary.jsx:147
+msgid "Put each library in new line"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:107
+msgid "Read more"
+msgstr ""
+
+#: src/components/HelpModal.jsx:30
+msgid "Read the documentation."
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:83
+msgid "Realign code"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:24
+msgid "Refresh preview"
+msgstr ""
+
+#: src/components/HelpModal.jsx:102
+msgid "Report a bug"
+msgstr ""
+
+#: src/components/HelpModal.jsx:80
+msgid "Review Web Maker"
+msgstr ""
+
 #: src/components/MainHeader.jsx:32
 #: src/components/MainHeader.jsx:32
 msgid "Run"
 msgstr ""
 
+#: src/components/KeyboardShortcutsModal.jsx:120
+msgid "Run Prettier"
+msgstr ""
+
+#: src/components/MainHeader.jsx:26
+msgid "Run preview (Ctrl/⌘ + Shift + 5)"
+msgstr ""
+
 #: src/components/MainHeader.jsx:80
 #: src/components/MainHeader.jsx:80
 msgid "Save"
 msgstr ""
 
-#: src/components/MainHeader.jsx:105
-#: src/components/MainHeader.jsx:105
-msgid "Signup"
+#: src/components/Footer.jsx:206
+msgid "Save as HTML file"
+msgstr ""
+
+#: src/components/MainHeader.jsx:71
+msgid "Save current creation (Ctrl/⌘ + S)"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:30
+msgid "Save current creations"
+msgstr ""
+
+#: src/components/SavedItemPane.jsx:201
+msgid "Search your creations here..."
+msgstr ""
+
+#: src/components/Footer.jsx:317
+msgid "See Changelog"
+msgstr ""
+
+#: src/components/HelpModal.jsx:110
+msgid "See awesome libraries used"
+msgstr ""
+
+#: src/components/MainHeader.jsx:110
+msgid "See profile or Logout"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:65
+msgid "Select next match"
+msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:71
+msgid "Select previous match"
+msgstr ""
+
+#: src/components/Footer.jsx:329
+msgid "Settings"
+msgstr ""
+
+#: src/components/MainHeader.jsx:105
+#: src/components/MainHeader.jsx:105
+#~ msgid "Signup"
+#~ msgstr ""
+
+#: src/components/KeyboardShortcutsModal.jsx:114
+msgid "Single line comment"
+msgstr ""
+
+#: src/components/MainHeader.jsx:58
+msgid "Start a new creation"
+msgstr ""
+
+#: src/components/HelpModal.jsx:69
+#: src/components/HelpModal.jsx:69
+msgid "Support the developer"
+msgstr ""
+
+#: src/components/Footer.jsx:143
+msgid "Support the developer by pledging some amount"
+msgstr ""
+
+#: src/components/Footer.jsx:293
+msgid "Switch to full screen preview"
+msgstr ""
+
+#: src/components/Footer.jsx:283
+msgid "Switch to layout with all vertical panes"
+msgstr ""
+
+#: src/components/Footer.jsx:263
+msgid "Switch to layout with preview on bottom"
+msgstr ""
+
+#: src/components/Footer.jsx:273
+msgid "Switch to layout with preview on left"
+msgstr ""
+
+#: src/components/Footer.jsx:273
+#~ msgid "Switch to layout with preview on left\""
+#~ msgstr ""
+
+#: src/components/Footer.jsx:253
+msgid "Switch to layout with preview on right"
+msgstr ""
+
+#: src/components/Footer.jsx:240
+msgid "Take screenshot of preview"
+msgstr ""
+
+#: src/components/Console.jsx:79
+msgid "Toggle console"
+msgstr ""
+
+#: src/components/Footer.jsx:122
+msgid "Tweet about 'Web Maker'"
+msgstr ""
+
+#: src/components/HelpModal.jsx:34
+msgid "Tweet out your feature requests, comments & suggestions to <0>@webmakerApp</0>"
+msgstr ""
+
+#: src/components/AddLibrary.jsx:82
+msgid "Type here to search libraries"
+msgstr ""
+
+#: src/components/Footer.jsx:187
+#: src/components/Footer.jsx:187
+msgid "Upload Image"
 msgstr ""
diff --git a/yarn.lock b/yarn.lock
index 8f8a4e9..800ef61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -363,7 +363,7 @@
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/@lingui/babel-plugin-transform-react/-/babel-plugin-transform-react-2.7.4.tgz#7ed5414ee685f1b12c63228581f1404d9b767ea5"
 
-"@lingui/cli@^2.7.0":
+"@lingui/cli@^2.7.4":
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/@lingui/cli/-/cli-2.7.4.tgz#a3b352fcbf6382d08f898a983fb2eb661c06a99f"
   dependencies:
@@ -412,14 +412,14 @@
     make-plural "^4.1.1"
     messageformat-parser "^2.0.0"
 
-"@lingui/macro@^2.7.0":
+"@lingui/macro@^2.7.4":
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/@lingui/macro/-/macro-2.7.4.tgz#5e21c46f5782816f42e24316a1cff55098848e7d"
   dependencies:
     "@lingui/babel-plugin-transform-react" "2.7.4"
     babel-plugin-macros "^2.2.0"
 
-"@lingui/react@^2.7.0":
+"@lingui/react@^2.7.4":
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/@lingui/react/-/react-2.7.4.tgz#b336b2aac3a1848b7532a657bff3cb6d04e19464"
   dependencies: