diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 6470f912..03f2d334 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -16,6 +16,7 @@ jobs:
         pip3 install --upgrade pip
         sudo apt install python3-setuptools
         pip3 install furo==2020.10.5b9
+        pip3 install jinja2
         pip3 install sphinx-copybutton
     
     - name: Install manim env
diff --git a/docs/source/_static/custom.css b/docs/source/_static/custom.css
new file mode 100644
index 00000000..5cc727b5
--- /dev/null
+++ b/docs/source/_static/custom.css
@@ -0,0 +1,50 @@
+.highlight-python.notranslate {
+    margin-top: 0em;
+}
+
+.manim-video {
+    width: 99.9%;
+    padding: 8px 0;
+    outline: 0;
+}
+
+.manim-example {
+    background-color: #58C4DD;
+    margin-bottom: 50px;
+    box-shadow: 2px 2px 4px #ddd;
+}
+
+.manim-example .manim-video {
+    padding: 0;
+}
+
+.manim-example img {
+    margin-bottom: 0;
+}
+
+h5.example-header {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 8px 16px;
+    color: white;
+    margin: 0;
+    font-family: inherit;
+    text-transform: none;
+    margin-top: -0.4em;
+    margin-bottom: -0.2em;
+}
+
+.manim-example .highlight {
+    background-color: #fafafa;
+    border: 2px solid #58C4DD;
+    padding: 8px 8px 10px 8px;
+    font-size: large;
+    margin: 0;
+}
+
+.manim-example .highlight pre {
+    background-color: inherit;
+    border-left: none;
+    margin: 0;
+    padding: 0 6px 0 6px;
+}
\ No newline at end of file
diff --git a/docs/source/_static/example_scenes/WarpSquare.mp4 b/docs/source/_static/example_scenes/WarpSquare.mp4
new file mode 100644
index 00000000..d1b2560c
Binary files /dev/null and b/docs/source/_static/example_scenes/WarpSquare.mp4 differ
diff --git a/docs/source/conf.py b/docs/source/conf.py
index e304ce4d..f841916a 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -1,5 +1,6 @@
 import os
 import sys
+sys.path.insert(0, os.path.abspath("."))
 sys.path.insert(0, os.path.abspath('../../'))
 
 
@@ -7,7 +8,7 @@ project = 'manim'
 copyright = '- This document has been placed in the public domain.'
 author = 'TonyCrane'
 
-release = '0.1'
+release = ''
 
 extensions = [
     'sphinx.ext.todo',
@@ -18,6 +19,7 @@ extensions = [
     'sphinx.ext.coverage',
     'sphinx.ext.napoleon',
     'sphinx_copybutton',
+    'manim_example_ext'
 ]
 
 autoclass_content = 'both'
@@ -28,6 +30,8 @@ source_suffix = '.rst'
 master_doc = 'index'
 pygments_style = 'default'
 
+html_static_path = ["_static"]
+html_css_files = ["custom.css"]
 html_theme = 'furo'  # pip install furo==2020.10.5b9
 # html_favicon = '../../logo/graph.png'
 html_logo = '../../logo/transparent_graph.png'
diff --git a/docs/source/getting_started/quickstart/index.rst b/docs/source/getting_started/quickstart/index.rst
index 3d18577d..7f1cf145 100644
--- a/docs/source/getting_started/quickstart/index.rst
+++ b/docs/source/getting_started/quickstart/index.rst
@@ -1,3 +1,12 @@
 Quick Start
 ===========
-WIP
\ No newline at end of file
+
+
+.. manim-example:: WarpSquare
+   :media: ../../_static/example_scenes/WarpSquare.mp4
+
+   class WarpSquare(Scene):
+       def construct(self):
+           square = Square()
+           self.play(square.apply_complex_function, np.exp)
+           self.wait()
\ No newline at end of file
diff --git a/docs/source/manim_example_ext.py b/docs/source/manim_example_ext.py
new file mode 100644
index 00000000..e5defb9d
--- /dev/null
+++ b/docs/source/manim_example_ext.py
@@ -0,0 +1,108 @@
+from docutils import nodes
+from docutils.parsers.rst import directives, Directive
+
+import jinja2
+import os
+
+
+class skip_manim_node(nodes.Admonition, nodes.Element):
+    pass
+
+
+def visit(self, node, name=""):
+    self.visit_admonition(node, name)
+
+
+def depart(self, node):
+    self.depart_admonition(node)
+
+
+class ManimExampleDirective(Directive):
+    has_content = True
+    required_arguments = 1
+    optional_arguments = 0
+    option_spec = {
+        "hide_code": bool,
+        "media": str,
+    }
+    final_argument_whitespace = True
+
+    def run(self):
+        hide_code = "hide_code" in self.options
+        scene_name = self.arguments[0]
+        media_file_name = self.options["media"]
+
+        source_block = [
+            ".. code-block:: python",
+            "",
+            *["    " + line for line in self.content],
+        ]
+        source_block = "\n".join(source_block)
+
+        state_machine = self.state_machine
+        document = state_machine.document
+
+        if any(media_file_name.endswith(ext) for ext in [".png", ".jpg", ".gif"]):
+            is_video = False
+        else:
+            is_video = True
+
+        rendered_template = jinja2.Template(TEMPLATE).render(
+            scene_name=scene_name,
+            scene_name_lowercase=scene_name.lower(),
+            hide_code=hide_code,
+            is_video=is_video,
+            media_file_name=media_file_name,
+            source_block=source_block,
+        )
+        state_machine.insert_input(
+            rendered_template.split("\n"), source=document.attributes["source"]
+        )
+
+        return []
+
+
+def setup(app):
+    app.add_node(skip_manim_node, html=(visit, depart))
+
+    setup.app = app
+    setup.config = app.config
+    setup.confdir = app.confdir
+
+    app.add_directive("manim-example", ManimExampleDirective)
+
+    metadata = {"parallel_read_safe": False, "parallel_write_safe": True}
+    return metadata
+
+
+TEMPLATE = r"""
+{% if not hide_code %}
+
+.. raw:: html
+
+    <div class="manim-example">
+
+{% endif %}
+
+{% if is_video %}
+.. raw:: html
+
+    <video id="{{ scene_name_lowercase }}" class="manim-video" controls loop autoplay src="{{ media_file_name }}"></video>
+{% else %}
+.. image:: {{ media_file_name }}
+    :align: center
+    :name: {{ scene_name_lowercase }}
+{% endif %}
+
+{% if not hide_code %}
+.. raw:: html
+
+    <h5 class="example-header">{{ scene_name }}<a class="headerlink" href="#{{ scene_name_lowercase }}">¶</a></h5>
+
+{{ source_block }}
+{% endif %}
+
+.. raw:: html
+
+    </div>
+"""
\ No newline at end of file