diff --git a/docs-site/public/index.html b/docs-site/public/index.html
index ab937321d..1055c50b1 100644
--- a/docs-site/public/index.html
+++ b/docs-site/public/index.html
@@ -7,7 +7,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="A simple and reusable datepicker component for React.">
   <meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, datepicker">
-  <title>React.js Datepicker crafted by HackerOne</title>
+  <title>React Datepicker crafted by HackerOne</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
 </head>
 
diff --git a/docs-site/src/components/App/index.js b/docs-site/src/components/App/index.js
index e1bb05169..c780ad207 100644
--- a/docs-site/src/components/App/index.js
+++ b/docs-site/src/components/App/index.js
@@ -10,7 +10,7 @@ const Root = () => {
     <div>
       <div className="hero">
         <div className="hero__content">
-          <h1 className="hero__title">ReactJS Datepicker</h1>
+          <h1 className="hero__title">React Datepicker</h1>
           <div className="hero__crafted-by">
             <a href="https://hackerone.com" className="hero__crafted-by-link">
               Crafted by{" "}
@@ -25,7 +25,7 @@ const Root = () => {
           </div>
           <div className="hero__example">
             <DatePicker
-              autoFocus
+              open
               selected={startDate}
               onChange={date => setStartDate(date)}
             />
@@ -33,7 +33,7 @@ const Root = () => {
         </div>
       </div>
       <div className="wrapper">
-        <h1>ReactJS Datepicker</h1>
+        <h1>React Datepicker</h1>
         <p className="badges">
           <a href="https://npmjs.org/package/react-datepicker">
             <img
@@ -75,6 +75,10 @@ const Root = () => {
         <p>
           <code>yarn add react-datepicker</code>
         </p>
+        <p>
+          Below are examples which also can be edited directly via the editor on
+          the left side and will be rendered on the right.
+        </p>
       </div>
       <div className="wrapper">
         <ExampleComponents />
diff --git a/docs-site/src/components/Example/edit-regular.svg b/docs-site/src/components/Example/edit-regular.svg
new file mode 100644
index 000000000..6f92bb5d0
--- /dev/null
+++ b/docs-site/src/components/Example/edit-regular.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>
\ No newline at end of file
diff --git a/docs-site/src/components/Example/index.js b/docs-site/src/components/Example/index.js
index a5cde419d..378826236 100644
--- a/docs-site/src/components/Example/index.js
+++ b/docs-site/src/components/Example/index.js
@@ -11,6 +11,7 @@ import ptBR from "date-fns/locale/pt-BR";
 import slugify from "slugify";
 import range from "lodash/range";
 import prismGitHubTheme from "prism-react-renderer/themes/github";
+import editIcon from "./edit-regular.svg";
 
 export default class CodeExampleComponent extends React.Component {
   static propTypes = {
@@ -31,7 +32,7 @@ export default class CodeExampleComponent extends React.Component {
         <h2 className="example__heading">{title}</h2>
         <div className="row">
           <LiveProvider
-            code={component}
+            code={component.trim()}
             scope={{
               PropTypes,
               useState,
@@ -44,9 +45,14 @@ export default class CodeExampleComponent extends React.Component {
             theme={prismGitHubTheme}
           >
             <pre className="column example__code">
+              <img
+                src={editIcon}
+                className="example__code__edit_icon"
+                alt="edit icon"
+              />
               <LiveEditor />
             </pre>
-            <div className="column">
+            <div className="column example__preview">
               <LiveError />
               <LivePreview />
             </div>
diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
index 464ece8d3..f77d68313 100644
--- a/docs-site/src/components/Examples/examples.scss
+++ b/docs-site/src/components/Examples/examples.scss
@@ -67,9 +67,10 @@
   }
 
   &__code {
+    position: relative;
     background-color: #f5f8fb;
-    padding: 20px;
-    margin: 0 -20px 20px;
+    padding: 5px;
+    margin: 0 -20px;
     border-top: 1px solid #d8e4ef;
     border-bottom: 1px solid #d8e4ef;
     overflow-x: auto;
@@ -82,10 +83,20 @@
       margin-bottom: 0;
     }
 
-    code {
-      background: none;
-      border: 0;
+    textarea:focus {
+      outline: 0;
     }
+
+    &__edit_icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 20px;
+      z-index: 10;
+    }
+  }
+  &__preview {
+    padding: 20px 0;
   }
 }