diff --git a/Controllers/HomeController.cs b/Controllers/HomeController.cs
index a8494c3..35d251b 100644
--- a/Controllers/HomeController.cs
+++ b/Controllers/HomeController.cs
@@ -64,6 +64,7 @@ namespace fxl.codes.kisekae.Controllers
         {
             var stream = _storage.OpenFile(Path.Combine(directory, file), FileMode.Open);
             var model = _readerService.ParseStream(stream, directory);
+            model.Name = file;
             return View("Play", model);
         }
 
diff --git a/Models/CelModel.cs b/Models/CelModel.cs
index ad557d3..c8bf0b2 100644
--- a/Models/CelModel.cs
+++ b/Models/CelModel.cs
@@ -52,5 +52,11 @@ namespace fxl.codes.kisekae.Models
         public Coordinate[] InitialPositions { get; } = new Coordinate[10];
         public string DefaultImage => ImageByPalette.ContainsKey(PaletteId) ? ImageByPalette[PaletteId] : null;
         public Coordinate Offset { get; set; }
+
+        public Coordinate PositionForSet(int set)
+        {
+            var current = InitialPositions[set];
+            return current == null ? new Coordinate(0, 0) : new Coordinate(current.X + Offset.X, current.Y + Offset.Y);
+        }
     }
 }
\ No newline at end of file
diff --git a/Models/PlaysetModel.cs b/Models/PlaysetModel.cs
index e54e17a..585846f 100644
--- a/Models/PlaysetModel.cs
+++ b/Models/PlaysetModel.cs
@@ -6,11 +6,26 @@ namespace fxl.codes.kisekae.Models
     public class PlaysetModel
     {
         public int[] CurrentPalettes = new int[10];
+        public string Name { get; set; }
         public int Height { get; set; }
         public int Width { get; set; }
-        public Color BorderColor { get; set; }
+        public Color BorderColor { get; set; } = Color.Black;
 
         public List<PaletteModel> Palettes { get; } = new();
         public List<CelModel> Cels { get; } = new();
+
+        public bool[] EnabledSets
+        {
+            get
+            {
+                var enabled = new bool[10];
+                foreach (var cel in Cels)
+                    for (var index = 0; index < cel.Sets.Length; index++)
+                        if (cel.Sets[index])
+                            enabled[index] = true;
+
+                return enabled;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/Program.cs b/Program.cs
index e2623e0..35b46b3 100644
--- a/Program.cs
+++ b/Program.cs
@@ -1,11 +1,5 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Hosting;
-using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.Hosting;
-using Microsoft.Extensions.Logging;
 
 namespace fxl.codes.kisekae
 {
@@ -16,8 +10,10 @@ namespace fxl.codes.kisekae
             CreateHostBuilder(args).Build().Run();
         }
 
-        public static IHostBuilder CreateHostBuilder(string[] args) =>
-            Host.CreateDefaultBuilder(args)
+        public static IHostBuilder CreateHostBuilder(string[] args)
+        {
+            return Host.CreateDefaultBuilder(args)
                 .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
+        }
     }
 }
\ No newline at end of file
diff --git a/Scripts/function.ts b/Scripts/function.ts
new file mode 100644
index 0000000..f7c0cf9
--- /dev/null
+++ b/Scripts/function.ts
@@ -0,0 +1,27 @@
+import Builder from "./utility"
+import {ICel, IPlayset} from "./pto"
+
+export function draw(playset: IPlayset, set: number): HTMLCanvasElement {
+    let canvas = new Builder("canvas").addAttributes({
+        "height": playset.height.toString(),
+        "width": playset.width.toString()
+    }).build() as HTMLCanvasElement
+    let context = canvas.getContext("2d")
+    
+    playset.cels.forEach(cel => {
+        drawToCanvas2dContext(cel, context, set)
+    })
+
+    return canvas
+}
+
+export function drawToCanvas2dContext(cel: ICel, context: CanvasRenderingContext2D, set: number): void {
+    if (!cel.sets[set]) return
+
+    let image = new Image()
+    image.onload = () => {
+        context.drawImage(image, cel.initialPositions[set].x + cel.offset.x, cel.initialPositions[set].y + cel.offset.y)
+    }
+
+    image.src = `data:image/gif;base64,${cel.defaultImage}`
+}
\ No newline at end of file
diff --git a/Scripts/main.ts b/Scripts/main.ts
index b144ed0..7c1abe1 100644
--- a/Scripts/main.ts
+++ b/Scripts/main.ts
@@ -1,4 +1,9 @@
-import { MDCTopAppBar } from '@material/top-app-bar'
+import {MDCLinearProgress} from "@material/linear-progress"
+import {MDCRipple} from "@material/ripple"
+import {MDCTopAppBar} from "@material/top-app-bar"
+import {draw} from "./function"
+import {IPlayset} from "./pto"
+import Builder from "./utility"
 
 declare global {
     interface Document {
@@ -8,38 +13,87 @@ declare global {
 
 export default class Main {
     appBar: MDCTopAppBar
+    linearProgress: MDCLinearProgress
+    ripples: MDCRipple[] = []
+
     constructor() {
         this.appBar = MDCTopAppBar.attachTo(document.querySelector(".mdc-top-app-bar"))
-        
+
+        document.querySelectorAll(".mdc-button").forEach(button => {
+            this.ripples.push(MDCRipple.attachTo(button))
+        })
+
+        this.linearProgress = MDCLinearProgress.attachTo(document.querySelector(".mdc-linear-progress"))
+
         this.init()
     }
-    
-    init() {
+
+    public load(containerId: string, headerId: string, playset: IPlayset, set: number = 0): void {
+        let container = document.getElementById(containerId)
+        let header = document.getElementById(headerId)
+        let menu = header.querySelector("ul")
+
+        let reset = header.querySelector(`button[data-rel="reset"]`)
+        reset.addEventListener("click", () => {
+            this.setPlayArea(container, playset, 0)
+        })
+
+        playset.enabledSets.forEach((enabled, index) => {
+            if (enabled) {
+                let button = new Builder("li")
+                    .addChildren(new Builder("button")
+                        .addClass("mdc-button")
+                        .addChildren(
+                            new Builder("span").addClass("mdc-button__ripple"),
+                            new Builder("span").addClass("mdc-button__label").setText(index.toString())
+                        )).build()
+
+                button.addEventListener("click", () => {
+                    this.setPlayArea(container, playset, index)
+                })
+
+                menu.appendChild(button)
+            }
+        })
+
+        this.setPlayArea(container, playset, set)
+    }
+
+    private setPlayArea(container: HTMLElement, playset: IPlayset, set: number): void {
+        // Empty
+        while (container.firstChild) container.removeChild(container.firstChild)
+
+        let canvas = draw(playset, set)
+        container.appendChild(canvas)
+    }
+
+    private init() {
         let main = document.querySelector("main")
         let directories = main.querySelector("ul")
-        
+
         if (!directories) return
-        
+
         let links = directories.querySelectorAll("a")
-        
+
         links.forEach(link => {
             link.addEventListener("click", () => {
                 let directory = link.attributes.getNamedItem("data-directory")
-                let form = document.createElement("form")
-                
-                let method = document.createAttribute("method")
-                method.value = "post"
-                let action = document.createAttribute("action")
-                action.value = "/Home/Select"
-                
-                form.attributes.setNamedItem(method)
-                form.attributes.setNamedItem(action)
-                
-                form.innerHTML = `<input type="hidden" name="directory" value="${directory.value}">`
-                    + `<input type="hidden" name="file" value="${link.textContent}">`
-                
+                let form = new Builder("form")
+                    .addAttributes({"method": "post", "action": "/Home/Select"})
+                    .addChildren(
+                        new Builder("input").addAttributes({
+                            "type": "hidden",
+                            "name": "directory",
+                            "value": directory.value
+                        }),
+                        new Builder("input").addAttributes({
+                            "type": "hidden",
+                            "name": "file",
+                            "value": link.textContent
+                        })
+                    ).build() as HTMLFormElement
+
                 link.appendChild(form)
-                
                 form.submit()
             })
         })
diff --git a/Scripts/pto.ts b/Scripts/pto.ts
new file mode 100644
index 0000000..a0e9f67
--- /dev/null
+++ b/Scripts/pto.ts
@@ -0,0 +1,20 @@
+export interface IPlayset {
+    name: string
+    height: number
+    width: number
+
+    cels: ICel[]
+    enabledSets: boolean[]
+}
+
+export interface ICel {
+    defaultImage: string
+    initialPositions: Coordinate[]
+    offset: Coordinate
+    sets: boolean[]
+}
+
+export class Coordinate {
+    x: number
+    y: number
+}
diff --git a/Scripts/utility.ts b/Scripts/utility.ts
new file mode 100644
index 0000000..d72e084
--- /dev/null
+++ b/Scripts/utility.ts
@@ -0,0 +1,49 @@
+export default class Builder {
+    element: HTMLElement
+    
+    constructor(tag: string) {
+        this.element = document.createElement(tag)
+    }
+
+    addAttributes(attributes: {[key: string]: string | number}): Builder {
+        for (let key of Object.keys(attributes)) {
+            this.addAttribute(key, attributes[key])
+        }
+        
+        return this
+    }
+    
+    addAttribute(name: string, value: string | number): Builder {
+        let attribute = document.createAttribute(name)
+        attribute.value = value.toString()
+        
+        this.element.attributes.setNamedItem(attribute)
+        return this
+    }
+    
+    addClass(...classes: string[]): Builder {
+        this.element.classList.add(...classes)
+        return this
+    }
+    
+    addChildren(...children: HTMLElement[] | Builder[]): Builder {
+        children.forEach(child => {
+            if (child instanceof HTMLElement) {
+                this.element.appendChild(child)
+            } else {
+                this.element.appendChild(child.build())
+            }
+        })
+        
+        return this
+    }
+    
+    setText(text: string): Builder {
+        this.element.textContent = text
+        return this
+    }
+    
+    build(): HTMLElement {
+        return this.element
+    }
+}
\ No newline at end of file
diff --git a/Services/ConfigurationReaderService.cs b/Services/ConfigurationReaderService.cs
index a0870de..3a1cb29 100644
--- a/Services/ConfigurationReaderService.cs
+++ b/Services/ConfigurationReaderService.cs
@@ -23,7 +23,9 @@ namespace fxl.codes.kisekae.Services
         public PlaysetModel ReadCnf(IFormFile file)
         {
             _logger.LogTrace($"Reading filename {file.FileName}");
-            return ParseStream(file.OpenReadStream());
+            var set = ParseStream(file.OpenReadStream());
+            set.Name = file.FileName;
+            return set;
         }
 
         public PlaysetModel ParseStream(Stream fileStream, string directory = null)
@@ -65,8 +67,6 @@ namespace fxl.codes.kisekae.Services
             }
             
             SetInitialPositions(model, initialPositions.ToString());
-            if (model.Palettes.Any() && model.Palettes[0].Colors.Any()) model.BorderColor = model.Palettes[0].Colors[borderColorIndex];
-
             if (string.IsNullOrEmpty(directory)) return model;
             
             foreach (var palette in model.Palettes)
@@ -78,6 +78,9 @@ namespace fxl.codes.kisekae.Services
             {
                 _fileParser.ParseCel(directory, cel, model.Palettes);
             }
+            
+            if (model.Palettes.Any() && model.Palettes[0].Colors.Any()) model.BorderColor = model.Palettes[0].Colors[borderColorIndex];
+            model.Cels.Reverse();
 
             return model;
         }
diff --git a/Styles/main.css b/Styles/main.css
new file mode 100644
index 0000000..af897a7
--- /dev/null
+++ b/Styles/main.css
@@ -0,0 +1,20 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 4 | / @use "~@material/theme" with (
+ * 5 | |   $primary: $fxl-orange,
+ * 6 | |   $on-primary: $fxl-gray
+ * 7 | | );
+ *   | '-^
+ *   '
+ *   main.scss 4:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 4 \2502  \250c  @use \"~@material/theme\" with (\a 5 \2502  \2502    $primary: $fxl-orange,\a 6 \2502  \2502    $on-primary: $fxl-gray\a 7 \2502  \2502  );\a   \2502  \2514 \2500 ^\a   \2575 \a   main.scss 4:1  root stylesheet";
+}
diff --git a/Styles/main.scss b/Styles/main.scss
index 6b73d9c..9c092ed 100644
--- a/Styles/main.scss
+++ b/Styles/main.scss
@@ -6,7 +6,9 @@ $fxl-orange: #ff6e40;
   $on-primary: $fxl-gray
 );
 
+@use "@material/button/styles";
 @use "@material/icon-button/icon-button";
+@use "@material/linear-progress";
 @use "@material/top-app-bar/mdc-top-app-bar";
 @use "@material/typography/mdc-typography";
 
@@ -18,17 +20,43 @@ html, body {
 
 body {
   @include icon-button.core-styles;
-  
+
   display: flex;
   flex-direction: column;
-  
+
   main {
     display: flex;
     flex: 1;
     flex-direction: column;
+
+    header {
+      ul {
+        align-content: center;
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+          margin: 0 0.25em;
+        }
+      }
+    }
+
+    article {
+      display: flex;
+      flex: 1;
+      text-align: center;
+
+      canvas {
+        margin: 2em auto;
+      }
+    }
   }
-  
+
   footer {
+    background-color: $fxl-orange;
     font-size: smaller;
     text-align: center;
   }
diff --git a/Utilities/Extensions.cs b/Utilities/Extensions.cs
deleted file mode 100644
index e602f6b..0000000
--- a/Utilities/Extensions.cs
+++ /dev/null
@@ -1,23 +0,0 @@
-using System.Collections;
-
-namespace fxl.codes.kisekae.Utilities
-{
-    public static class Extensions
-    {
-        public static bool[] ToBoolArray(this BitArray bitArray)
-        {
-            var data = new bool[bitArray.Length];
-            bitArray.CopyTo(data, 0);
-            return data;
-        }
-
-        public static int IntValue(this bool[] data)
-        {
-            var bits = new BitArray(data);
-            var value = new int[1];
-            bits.CopyTo(value, 0);
-
-            return value[0];
-        }
-    }
-}
\ No newline at end of file
diff --git a/Views/Home/Play.cshtml b/Views/Home/Play.cshtml
index 3be2eb2..cc28120 100644
--- a/Views/Home/Play.cshtml
+++ b/Views/Home/Play.cshtml
@@ -1,29 +1,26 @@
 @model PlaysetModel
 
 @{
-    ViewBag.Title = "Play";
+    ViewBag.Title = $"Play with {Model.Name}";
     Layout = "_Layout";
 }
 
-<div>
-    @foreach (var palette in Model.Palettes)
-    {
-        <p>
-            Start Palette
-            @palette.Comment<br>
-            @foreach (var color in palette.Colors)
-            {
-                <span style="background-color: #@(color.ToHex())">@color</span>
-            }
-            <br>
-            End Palette
-        </p>
-    }
-</div>
-
-<div>
-    @foreach (var cel in Model.Cels)
-    {
-        <img src="data:image/gif;base64,@cel.DefaultImage" alt="@cel.FileName">
-    }
-</div>
\ No newline at end of file
+<header id="play_menu">
+    <ul>
+        <li>
+            <button class="mdc-button mdc-button--icon-trailing" data-rel="reset">
+                <span class="mdc-button__ripple"></span>
+                <span class="mdc-button__label">Reset</span>
+                <i class="material-icons mdc-button__icon" aria-hidden="true">restart_alt</i>
+            </button>
+        </li>
+        <li class="mdc-typography--button">Sets</li>
+    </ul>
+</header>
+<article id="play_area" style="background-color: #@Model.BorderColor"></article>
+@section Scripts
+{
+    <script>
+        document.kisekae.load("play_area", "play_menu", @Json.Serialize(Model))
+    </script>
+}
diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
index 9bb6a2b..bbd7cd3 100644
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@@ -9,7 +9,7 @@
         <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
         <link rel="stylesheet" href="~/css/main.css"/>
     </head>
-    <body>
+    <body class="mdc-typography">
         <header class="mdc-top-app-bar">
             <div class="mdc-top-app-bar__row">
                 <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
@@ -23,6 +23,18 @@
                     <a class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Options">more_vert</a>
                 </section>
             </div>
+            <div role="progressbar" class="mdc-linear-progress" aria-label="Loading Progress" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
+                <div class="mdc-linear-progress__buffer">
+                    <div class="mdc-linear-progress__buffer-bar"></div>
+                    <div class="mdc-linear-progress__buffer-dots"></div>
+                </div>
+                <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
+                    <span class="mdc-linear-progress__bar-inner"></span>
+                </div>
+                <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
+                    <span class="mdc-linear-progress__bar-inner"></span>
+                </div>
+            </div>
         </header>
         <main class="mdc-top-app-bar--fixed-adjust" role="main">
             @RenderBody()
diff --git a/fxl.codes.kisekae.csproj b/fxl.codes.kisekae.csproj
index 42dfe25..c6cf31d 100644
--- a/fxl.codes.kisekae.csproj
+++ b/fxl.codes.kisekae.csproj
@@ -6,7 +6,10 @@
     </PropertyGroup>
 
     <ItemGroup>
+      <TypeScriptCompile Include="Scripts\function.ts" />
       <TypeScriptCompile Include="Scripts\main.ts" />
+      <TypeScriptCompile Include="Scripts\pto.ts" />
+      <TypeScriptCompile Include="Scripts\utility.ts" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/package-lock.json b/package-lock.json
index abcddcd..ed3fb43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "ts-loader": "^9.2.6",
         "typescript": "^4.4.3",
         "webpack": "^5.55.0",
+        "webpack-bundle-analyzer": "^4.4.2",
         "webpack-cli": "^4.8.0"
       }
     },
@@ -791,6 +792,12 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
@@ -1044,6 +1051,15 @@
         "acorn": "^8"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2097,6 +2113,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.3.853",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.853.tgz",
@@ -2420,6 +2442,21 @@
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
       "dev": true
     },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2846,6 +2883,18 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.49.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
@@ -2978,6 +3027,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@@ -3514,6 +3572,20 @@
       "integrity": "sha512-rqYhcAnZ6d/vTPGghdrw7iumdcbXpsk1b8IG/rz+VWV51DM0p7XCtMoJ3qhPLIbp3tvyt3pKRbaaEMZYpHto8Q==",
       "dev": true
     },
+    "node_modules/sirv": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.17.tgz",
+      "integrity": "sha512-qx9go5yraB7ekT7bCMqUHJ5jEaOC/GXBxUWv+jeWnb7WzHUFdcQPGWk7YmAwFBaQBrogpuSqd/azbC2lZRqqmw==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mime": "^2.3.1",
+        "totalist": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -3678,6 +3750,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
@@ -3849,6 +3930,81 @@
         }
       }
     },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.2.tgz",
+      "integrity": "sha512-PIagMYhlEzFfhMYOzs5gFT55DkUdkyrJi/SxJp8EF3YMWhS+T9vvs2EoTetpk5qb6VsCq02eXTlRDOydRhDFAQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^6.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/webpack-cli": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.8.0.tgz",
@@ -3945,6 +4101,27 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "node_modules/ws": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
+      "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -4731,6 +4908,12 @@
         "tslib": "^2.1.0"
       }
     },
+    "@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
@@ -4963,6 +5146,12 @@
       "dev": true,
       "requires": {}
     },
+    "acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -5917,6 +6106,12 @@
         "repeating": "^2.0.0"
       }
     },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.3.853",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.853.tgz",
@@ -6155,6 +6350,15 @@
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
       "dev": true
     },
+    "gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.2"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -6485,6 +6689,12 @@
         "picomatch": "^2.2.3"
       }
     },
+    "mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "dev": true
+    },
     "mime-db": {
       "version": "1.49.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
@@ -6584,6 +6794,12 @@
         "mimic-fn": "^2.1.0"
       }
     },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@@ -6955,6 +7171,17 @@
       "integrity": "sha512-rqYhcAnZ6d/vTPGghdrw7iumdcbXpsk1b8IG/rz+VWV51DM0p7XCtMoJ3qhPLIbp3tvyt3pKRbaaEMZYpHto8Q==",
       "dev": true
     },
+    "sirv": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.17.tgz",
+      "integrity": "sha512-qx9go5yraB7ekT7bCMqUHJ5jEaOC/GXBxUWv+jeWnb7WzHUFdcQPGWk7YmAwFBaQBrogpuSqd/azbC2lZRqqmw==",
+      "dev": true,
+      "requires": {
+        "@polka/url": "^1.0.0-next.20",
+        "mime": "^2.3.1",
+        "totalist": "^1.0.0"
+      }
+    },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -7061,6 +7288,12 @@
         "is-number": "^7.0.0"
       }
     },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true
+    },
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
@@ -7184,6 +7417,59 @@
         "webpack-sources": "^3.2.0"
       }
     },
+    "webpack-bundle-analyzer": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.2.tgz",
+      "integrity": "sha512-PIagMYhlEzFfhMYOzs5gFT55DkUdkyrJi/SxJp8EF3YMWhS+T9vvs2EoTetpk5qb6VsCq02eXTlRDOydRhDFAQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^6.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "webpack-cli": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.8.0.tgz",
@@ -7244,6 +7530,13 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "ws": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
+      "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
+      "dev": true,
+      "requires": {}
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 4c55c10..2b363f9 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "Online Kisekae viewer",
   "main": "index.js",
   "scripts": {
-    "test": "",
+    "test": "exit 0",
     "build": "webpack build --mode development",
     "release": "webpack build --mode production"
   },
@@ -21,6 +21,7 @@
     "ts-loader": "^9.2.6",
     "typescript": "^4.4.3",
     "webpack": "^5.55.0",
+    "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.8.0"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index fe73e98..2c73ea6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,6 @@
     "preserveConstEnums": true,
     "sourceMap": true
   },
-  "include": ["Scripts/*"],
+  "include": ["./Scripts/*"],
   "exclude": ["node_modules"]
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 52eeda5..8d063fc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -27,8 +27,8 @@ module.exports = [{
                             name: 'css/main.css',
                         },
                     },
-                    { loader: 'extract-loader' },
-                    { loader: 'css-loader' },
+                    {loader: 'extract-loader'},
+                    {loader: 'css-loader'},
                     {
                         loader: 'sass-loader',
                         options: {
@@ -46,7 +46,11 @@ module.exports = [{
                     },
                 ]
             },
-            { test: /\.tsx?$/, loader: "ts-loader" }
+            {test: /\.tsx?$/, loader: "ts-loader"}
         ]
     },
+    stats: {
+        // Display bailout reasons
+        optimizationBailout: true,
+    },
 }];
\ No newline at end of file