diff --git a/README.md b/README.md
index 76882fef..b0d31141 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,47 @@
 # Algorithm Visualizer
 
-> Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.
+## Introduction
+Welcome to Algorithm Visualizer, an interactive online platform designed to bring algorithms to life through visualization. Whether you're a student, teacher, or professional, our platform provides an engaging way to explore and understand various algorithms.
 
 [![GitHub contributors](https://img.shields.io/github/contributors/algorithm-visualizer/algorithm-visualizer.svg?style=flat-square)](https://github.com/algorithm-visualizer/algorithm-visualizer/graphs/contributors)
 [![GitHub license](https://img.shields.io/github/license/algorithm-visualizer/algorithm-visualizer.svg?style=flat-square)](https://github.com/algorithm-visualizer/algorithm-visualizer/blob/master/LICENSE)
 
+## Languages and Frameworks Used
+[![Languages](https://skillicons.dev/icons?i=html,css,js,react,nodejs,redux)](https://skillicons.dev)
+
+
+## Key Features
+<ul> 
+<li>
+
+### Visualize algorithms from code:
+Algorithm Visualizer allows you to witness algorithms in action by visualizing code written in various programming languages. This visual approach facilitates a better understanding of algorithmic behavior..</li>
+<li>
+
+### Learn about Algorithms:
+Explore our collection of tutorials, articles, and videos that serve as valuable resources for learning about algorithms.
+</li>
+</ul>
+
+## algorithms
+In this repository, you'll find visualizations of algorithms showcased in the website's side menu. Contributions here directly impact the educational content available on the platform.   https://github.com/algorithm-visualizer/algorithms</li>
+</ul>
+
+
+## tracers
+Explore the various visualization libraries in different programming languages. These libraries extract visualization commands from code.
+https://github.com/search?q=topic%3Avisualization-library+org%3Aalgorithm-visualizer&type=Repositories</li>
+</ul>
+
+## Live Demo
 Learning an algorithm gets much easier with visualizing it. Don't get what we mean? Check it out:
 
 [**algorithm-visualizer.org**![Screenshot](https://raw.githubusercontent.com/algorithm-visualizer/algorithm-visualizer/master/branding/screenshot.png)](https://algorithm-visualizer.org/)
 
 ## Contributing
 
-We have multiple repositories under the hood that comprise the website. Take a look at the contributing guidelines in the repository you want to contribute to.
+Our project consists of multiple repositories, each playing a crucial role in the Algorithm Visualizer ecosystem. If you're interested in contributing, check out the guidelines for the specific repository:
+
 
 - [**`algorithm-visualizer`**](https://github.com/algorithm-visualizer/algorithm-visualizer) is a web app written in React. It contains UI components and interprets commands into visualizations. Check out [the contributing guidelines](CONTRIBUTING.md).
 
@@ -20,3 +50,5 @@ We have multiple repositories under the hood that comprise the website. Take a l
 - [**`algorithms`**](https://github.com/algorithm-visualizer/algorithms) contains visualizations of algorithms shown on the side menu of the website.
 
 - [**`tracers.*`**](https://github.com/search?q=topic%3Avisualization-library+org%3Aalgorithm-visualizer&type=Repositories) are visualization libraries written in each supported language. They extract visualizing commands from code.
+
+Ready to contribute? Explore the repositories and become part of the Algorithm Visualizer community!
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d7576dce..624bcab6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3065,9 +3065,9 @@
           }
         },
         "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+          "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
         },
         "yallist": {
           "version": "3.0.3",
@@ -10951,9 +10951,9 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
     "postcss": {
-      "version": "7.0.17",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.17.tgz",
-      "integrity": "sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==",
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
       "requires": {
         "chalk": "^2.4.2",
         "source-map": "^0.6.1",
@@ -15540,9 +15540,9 @@
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
     },
     "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+      "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
     },
     "yallist": {
       "version": "2.1.2",
diff --git a/package.json b/package.json
index 82f90d22..8e4114d2 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,9 @@
   },
   "proxy": "http://localhost:8080",
   "license": "MIT",
+  "engines": {
+    "node": ">=10.15.3"
+  },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-brands": "^5.0.13",
diff --git a/src/components/App/index.js b/src/components/App/index.js
index 720ff5ae..625b3a61 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -18,7 +18,7 @@ import { AlgorithmApi, GitHubApi, VisualizationApi } from 'apis';
 import { actions } from 'reducers';
 import { createUserFile, extension, refineGist } from 'common/util';
 import { exts, languages } from 'common/config';
-import { CONTRIBUTING_MD } from 'files';
+import { SCRATCH_PAPER_README_MD } from 'files';
 import styles from './App.module.scss';
 
 class App extends BaseComponent {
@@ -163,7 +163,7 @@ class App extends BaseComponent {
               login: undefined,
               gistId,
               title: 'Untitled',
-              files: [CONTRIBUTING_MD, createUserFile('visualization.json', JSON.stringify(content))],
+              files: [SCRATCH_PAPER_README_MD, createUserFile('visualization.json', JSON.stringify(content))],
             });
           });
       } else if (gistId === 'new') {
@@ -172,7 +172,7 @@ class App extends BaseComponent {
           login: undefined,
           gistId,
           title: 'Untitled',
-          files: [CONTRIBUTING_MD, language.skeleton],
+          files: [SCRATCH_PAPER_README_MD, language.skeleton],
         });
       } else if (gistId) {
         return GitHubApi.getGist(gistId, { timestamp: Date.now() })
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index dc839ecb..f9fa9ef5 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -154,10 +154,10 @@ class Header extends BaseComponent {
                 <Button className={styles.btn_dropdown} icon={user.avatar_url}>
                   {user.login}
                   <div className={styles.dropdown}>
-                    <ListItem label="Sign Out" href="/api/auth/destroy" rel="nofollow"/>
+                    <ListItem label="Sign Out" href="/api/auth/destroy" rel="opener"/>
                   </div>
                 </Button> :
-                <Button icon={faGithub} primary href="/api/auth/request" rel="nofollow">
+                <Button icon={faGithub} primary href="/api/auth/request" rel="opener">
                   <Ellipsis>Sign In</Ellipsis>
                 </Button>
             }
diff --git a/src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss b/src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss
new file mode 100644
index 00000000..7afb96e4
--- /dev/null
+++ b/src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss
@@ -0,0 +1 @@
+@import "~common/stylesheet/index";
diff --git a/src/core/renderers/ScatterRenderer/index.js b/src/core/renderers/ScatterRenderer/index.js
new file mode 100644
index 00000000..27715a63
--- /dev/null
+++ b/src/core/renderers/ScatterRenderer/index.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import {Scatter} from 'react-chartjs-2'
+import Array2DRenderer from '../Array2DRenderer'
+
+const convertToObjectArray = ([x, y]) => ({ x, y })
+const colors = ['white', 'green', 'blue', 'red', 'yellow', 'cyan']
+
+class ScatterRenderer extends Array2DRenderer {
+  renderData() {
+    const { data } = this.props.data
+
+    const datasets = data.map((series, index) => (
+        {
+          backgroundColor: colors[index],
+          data: series.map(s => convertToObjectArray(s.value)),
+          label: Math.random(),
+          radius: (index + 1) * 2,
+        }))
+
+    const chartData = {
+      datasets,
+    }
+
+    return <Scatter data={chartData} options={{
+      legend: false,
+      animation: false,
+      layout: {
+        padding: {
+          left: 20,
+          right: 20,
+          top: 20,
+          bottom: 20,
+        },
+      },
+      scales: {
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero: false,
+            },
+          }],
+        xAxes: [
+          {
+            ticks: {
+              beginAtZero: false,
+            },
+          }],
+      },
+    }}/>
+  }
+}
+
+export default ScatterRenderer
diff --git a/src/core/renderers/index.js b/src/core/renderers/index.js
index ead04604..67341879 100644
--- a/src/core/renderers/index.js
+++ b/src/core/renderers/index.js
@@ -5,3 +5,4 @@ export { default as Array2DRenderer } from './Array2DRenderer';
 export { default as Array1DRenderer } from './Array1DRenderer';
 export { default as ChartRenderer } from './ChartRenderer';
 export { default as GraphRenderer } from './GraphRenderer';
+export { default as ScatterRenderer } from './ScatterRenderer';
diff --git a/src/core/tracers/ScatterTracer.js b/src/core/tracers/ScatterTracer.js
new file mode 100644
index 00000000..d6f37951
--- /dev/null
+++ b/src/core/tracers/ScatterTracer.js
@@ -0,0 +1,10 @@
+import { Array2DTracer } from 'core/tracers';
+import { ScatterRenderer } from 'core/renderers';
+
+class ScatterTracer extends Array2DTracer {
+  getRendererClass() {
+    return ScatterRenderer;
+  }
+}
+
+export default ScatterTracer;
diff --git a/src/core/tracers/index.js b/src/core/tracers/index.js
index 1b94f997..1f3259dc 100644
--- a/src/core/tracers/index.js
+++ b/src/core/tracers/index.js
@@ -5,3 +5,4 @@ export { default as Array2DTracer } from './Array2DTracer';
 export { default as Array1DTracer } from './Array1DTracer';
 export { default as ChartTracer } from './ChartTracer';
 export { default as GraphTracer } from './GraphTracer';
+export { default as ScatterTracer} from './ScatterTracer';
diff --git a/src/files/index.js b/src/files/index.js
index 3cc8282e..6fb1ea07 100644
--- a/src/files/index.js
+++ b/src/files/index.js
@@ -8,5 +8,5 @@ const readUserFile = filePath => createUserFile(getName(filePath), getContent(fi
 export const CODE_CPP = readUserFile('skeletons/code.cpp');
 export const CODE_JAVA = readUserFile('skeletons/code.java');
 export const CODE_JS = readUserFile('skeletons/code.js');
-export const README_MD = readProjectFile('algorithm-visualizer/README.md');
-export const CONTRIBUTING_MD = readProjectFile('scratch-paper/CONTRIBUTING.md');
+export const ROOT_README_MD = readProjectFile('algorithm-visualizer/README.md');
+export const SCRATCH_PAPER_README_MD = readProjectFile('scratch-paper/README.md');
diff --git a/src/files/scratch-paper/CONTRIBUTING.md b/src/files/scratch-paper/CONTRIBUTING.md
deleted file mode 120000
index c97564d9..00000000
--- a/src/files/scratch-paper/CONTRIBUTING.md
+++ /dev/null
@@ -1 +0,0 @@
-../../../CONTRIBUTING.md
\ No newline at end of file
diff --git a/src/files/scratch-paper/README.md b/src/files/scratch-paper/README.md
new file mode 100644
index 00000000..438de890
--- /dev/null
+++ b/src/files/scratch-paper/README.md
@@ -0,0 +1,28 @@
+# Scratch Paper
+
+Visualize your own code here!
+
+## Learning About Tracers
+
+The project [Algorithm Visualizer](https://github.com/algorithm-visualizer) has a visualization library in each
+supported language ([JavaScript](https://github.com/algorithm-visualizer/tracers.js)
+, [C++](https://github.com/algorithm-visualizer/tracers.cpp),
+and [Java](https://github.com/algorithm-visualizer/tracers.java)) to visualize codes.
+
+There are five tracers in the library to visualize different types of data:
+
+- [Array1DTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/Array1DTracer)
+- [Array2DTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/Array2DTracer)
+- [ChartTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/ChartTracer)
+- [GraphTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/GraphTracer)
+- [LogTracer](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki/LogTracer)
+
+There are also randomizers to help you create random data.
+
+Check out the [API reference](https://github.com/algorithm-visualizer/algorithm-visualizer/wiki) for more information.
+
+## Making Your Visualization Public
+
+If you think other people would find your visualization useful, you can add it to the side menu
+by [contributing to `algorithm-visualizer/algorithms`](https://github.com/algorithm-visualizer/algorithms/blob/master/CONTRIBUTING.md)
+.
\ No newline at end of file
diff --git a/src/reducers/current.js b/src/reducers/current.js
index 111a716d..215c281e 100644
--- a/src/reducers/current.js
+++ b/src/reducers/current.js
@@ -1,5 +1,5 @@
 import { combineActions, createAction, handleActions } from 'redux-actions';
-import { README_MD } from 'files';
+import { ROOT_README_MD } from 'files';
 import { extension, isSaved } from 'common/util';
 
 const prefix = 'CURRENT';
@@ -37,7 +37,7 @@ export const actions = {
 };
 
 const homeTitles = ['Algorithm Visualizer'];
-const homeFiles = [README_MD];
+const homeFiles = [ROOT_README_MD];
 const homeDescription = 'Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.';
 const defaultState = {
   algorithm: {