diff --git a/.idea/wordRotator.iml b/.idea/wordRotator.iml
index 3a4de54..bcf3c2f 100644
--- a/.idea/wordRotator.iml
+++ b/.idea/wordRotator.iml
@@ -3,6 +3,7 @@
   <component name="NewModuleRootManager">
     <content url="file://$MODULE_DIR$">
       <sourceFolder url="file://$MODULE_DIR$/src/module/Application/src" isTestSource="false" packagePrefix="Application\" />
+      <sourceFolder url="file://$MODULE_DIR$/src/module/Application/pwa/html" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/true/punycode" />
     </content>
     <orderEntry type="inheritedJdk" />
diff --git a/public/css/wordRotator.css b/public/css/wordRotator.css
index deffad9..6c10595 100644
--- a/public/css/wordRotator.css
+++ b/public/css/wordRotator.css
@@ -1 +1 @@
-.height-10{height:10%}.width-10{width:10%}.height-20{height:20%}.width-20{width:20%}.height-30{height:30%}.width-30{width:30%}.height-40{height:40%}.width-40{width:40%}.height-50{height:50%}.width-50{width:50%}.height-60{height:60%}.width-60{width:60%}.height-70{height:70%}.width-70{width:70%}.height-80{height:80%}.width-80{width:80%}.height-90{height:90%}.width-90{width:90%}.height-100{height:100%}.width-100{width:100%}@-webkit-keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}}@keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}}@keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}}@keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:transparent;z-index:0}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}}@keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:transparent;z-index:0}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}}.segment:not(.segment-row):not(.segment-triangle).rotating{overflow:hidden}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}#level{white-space:nowrap;max-width:100%;overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{white-space:normal;cursor:pointer;display:inline-block;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1;background-color:#fff;line-height:0}.segment.segment-row{display:block;width:100%;-webkit-animation:none!important;animation:none!important;white-space:nowrap}.segment.segment-leaf{min-width:1em;padding:.8em}.segment.segment-leaf:before{content:" ";display:block;padding-top:100%}.segment.segment-leaf .leaf-element{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-transform:translateY(50%);transform:translateY(50%)}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px;padding:1px}.segment.segment-triangle>.child-container>.segment-parent{border:3px solid #000;position:relative}.show-when-won{visibility:hidden}.show-when-won,.show-when-won *{-webkit-transition:none;transition:none}.won .show-when-won{visibility:initial}
\ No newline at end of file
+.height-10{height:10%}.width-10{width:10%}.height-20{height:20%}.width-20{width:20%}.height-30{height:30%}.width-30{width:30%}.height-40{height:40%}.width-40{width:40%}.height-50{height:50%}.width-50{width:50%}.height-60{height:60%}.width-60{width:60%}.height-70{height:70%}.width-70{width:70%}.height-80{height:80%}.width-80{width:80%}.height-90{height:90%}.width-90{width:90%}.height-100{height:100%}.width-100{width:100%}@-webkit-keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@-webkit-keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.segment:not(.segment-row):not(.segment-triangle).rotating{z-index:10!important;overflow:hidden}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180,.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90.rotating{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180.rotating{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270.rotating{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360.rotating{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}#level{white-space:nowrap;max-width:100%;overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{white-space:normal;cursor:pointer;display:inline-block;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1;background-color:#fff;line-height:0}.segment.segment-row{display:block;width:100%;-webkit-animation:none!important;animation:none!important;white-space:nowrap}.segment.segment-leaf{background-color:transparent;min-width:1em;padding:.8em}.segment.segment-leaf:before{content:" ";display:block;padding-top:100%}.segment.segment-leaf .leaf-element{position:absolute;width:100%;height:100%;line-height:1.5em;top:0;left:0}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px;padding:1px}.segment.segment-triangle>.child-container>.segment-parent{border:3px solid #000;position:relative}.show-when-won{visibility:hidden}.show-when-won,.show-when-won *{-webkit-transition:none;transition:none}.won .show-when-won{visibility:initial}
\ No newline at end of file
diff --git a/public/html/application/level.html b/public/html/application/level.html
index b259b75..deddeb9 100644
--- a/public/html/application/level.html
+++ b/public/html/application/level.html
@@ -1 +1 @@
-<div class=max-height><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><div class=max-height><div class="show-when-won height-20 center flex-center"><b data-translation=won id=won-text></b></div><div class="flex-center height-60 overflow-hidden"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>
\ No newline at end of file
+<div class=max-height><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><div class=max-height><div class="show-when-won height-20 center flex-center"><b data-translation=won id=won-text></b></div><div class="flex-center height-60"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 5a05ef3..188a7e7 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -3004,6 +3004,10 @@ class Segment{
         this.parent = null;
     }
 
+    getCurrentRotations(rotations){
+        return rotations;
+    }
+
     sameAs(otherSegment){
         return false;
     }
@@ -3106,14 +3110,18 @@ class ParentSegment extends Segment {
             this.rotation += 90;
             this.rotation %= 360;
 
+            let currentRotation = this.rotation;
+
             this._updateRotationClass();
             this.element.classList.add("rotating");
 
             let self = this;
             let delayPromise = new Promise(function (resolve) {
                 setTimeout(resolve, 250);
-            }).then(()=>{
-                self.element.classList.remove("rotating");
+            }).then(() => {
+                if (self.rotation === currentRotation) {
+                    self.element.classList.remove("rotating");
+                }
             });
             this.getLevel().checkHasWon(delayPromise);
             return delayPromise;
@@ -3133,7 +3141,6 @@ class ParentSegment extends Segment {
     }
 
     applyRotations(rotations) {
-        // debugger;
         this.rotation = rotations[0];
         rotations.splice(0, 1);
         for (let i = 0, n = this.children.length; i < n; i++) {
@@ -3142,6 +3149,15 @@ class ParentSegment extends Segment {
         return rotations;
     }
 
+    getCurrentRotations(rotations)
+    {
+        rotations.push(this.rotation);
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     isSolved() {
         for (let i = 0, n = this.children.length; i < n; i++) {
             if (!this.children[i].isSolved()) {
@@ -3150,7 +3166,7 @@ class ParentSegment extends Segment {
         }
         return (this.rotation === 0 || (
             this.children[0].sameAs(this.children[2]) && this.children[1].sameAs(this.children[3]) && (
-                this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
+            this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
     }
 
     setChildren(children) {
@@ -3191,8 +3207,7 @@ class ParentSegment extends Segment {
         for (let i = 0, n = this.children.length; i < n; i++) {
             this.children[i]._updateElement();
             childContainer.appendChild(this.children[i].getElement());
-            if (i%2 === 1 && this.children.length-1 !== i)
-            {
+            if (i % 2 === 1 && this.children.length - 1 !== i) {
                 childContainer.appendChild(document.createElement("br"));
             }
         }
@@ -3271,6 +3286,19 @@ class Level {
         });
     }
 
+    saveAsCurrentLevel(){
+        let rotations = this.getCurrentRotations();
+        localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations}));
+    }
+
+    getCurrentRotations(){
+        if (this.rootSegment !== null)
+        {
+            return this.rootSegment.getCurrentRotations([]);
+        }
+        return [];
+    }
+
     setId(id)
     {
         this.id = id;
@@ -3332,6 +3360,7 @@ class Level {
             });
             return true;
         }
+        this.saveAsCurrentLevel();
         return false;
     }
 
@@ -3366,6 +3395,13 @@ class RowSegment extends ParentSegment{
         return rotations;
     }
 
+    getCurrentRotations(rotations){
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     _updateElement() {
         const childContainer = this.element.querySelector(".child-container");
         childContainer.removeAllChildren();
@@ -3553,6 +3589,80 @@ class SixWordsRowLevel12 extends SixWordsRowLevel {
     }
 }
 
+class FourWordsLevel extends Level {
+
+    constructor(templateContainer, wordLength) {
+        super(templateContainer);
+        this.wordLength = wordLength;
+    }
+
+    createSegments() {
+        if (this.words.length >= 4 &&
+            this.words[0].length >= this.wordLength &&
+            this.words[1].length >= this.wordLength &&
+            this.words[2].length >= this.wordLength &&
+            this.words[3].length >= this.wordLength
+        ) {
+            let leafsWords = [];
+            leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
+            leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
+            leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
+
+            let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
+            for (let i = 0, n = this.wordLength / 4; i < n; i++) {
+
+                let parents = [];
+                parents[0] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[1] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[2] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[3] = new ParentSegment(this.templateContainer.copyParentTemplate());
+
+                parents[0].addChild(leafsWords[0][4 * i]);
+                parents[0].addChild(leafsWords[0][4 * i + 1]);
+                parents[0].addChild(leafsWords[1][4 * i]);
+                parents[0].addChild(leafsWords[1][4 * i + 1]);
+
+                parents[1].addChild(leafsWords[0][4 * i + 2]);
+                parents[1].addChild(leafsWords[0][4 * i + 3]);
+                parents[1].addChild(leafsWords[1][4 * i + 2]);
+                parents[1].addChild(leafsWords[1][4 * i + 3]);
+
+                parents[2].addChild(leafsWords[2][4 * i]);
+                parents[2].addChild(leafsWords[2][4 * i + 1]);
+                parents[2].addChild(leafsWords[3][4 * i]);
+                parents[2].addChild(leafsWords[3][4 * i + 1]);
+
+                parents[3].addChild(leafsWords[2][4 * i + 2]);
+                parents[3].addChild(leafsWords[2][4 * i + 3]);
+                parents[3].addChild(leafsWords[3][4 * i + 2]);
+                parents[3].addChild(leafsWords[3][4 * i + 3]);
+
+                let parent = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parent.addChild(parents[0]);
+                parent.addChild(parents[1]);
+                parent.addChild(parents[2]);
+                parent.addChild(parents[3]);
+
+                rootSegment.addChild(parent);
+            }
+            this.setRootSegment(rootSegment);
+        }
+    }
+}
+
+class FourWordsLevel8 extends FourWordsLevel{
+    constructor(templateContainer) {
+        super(templateContainer, 8);
+    }
+}
+
+class FourWordsLevel12 extends FourWordsLevel{
+    constructor(templateContainer) {
+        super(templateContainer, 12);
+    }
+}
+
 class LevelHelper {
     static setLevelType(typeId, level) {
         LevelHelper.types[typeId] = level;
@@ -3583,7 +3693,9 @@ LevelHelper.types = {
     40: RowLevel8,
     60: RowLevel10,
     100: SixWordsRowLevel8,
+    120: FourWordsLevel8,
     140: SixWordsRowLevel12,
+    160: FourWordsLevel12,
 };
 
 class WordRotatorDb extends MyDb {
@@ -3715,7 +3827,48 @@ class LevelSite extends AbstractSite$1 {
 
         this.levelCounterAction.setTitle(this.levelCounter);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
-        this.nextLevel();
+
+        this.loadLastLevel();
+    }
+
+    async loadLastLevel() {
+        try {
+            let currentLevelInfo = localStorage.getItem("currentLevel");
+            if (currentLevelInfo !== null) {
+                currentLevelInfo = JSON.parse(currentLevelInfo);
+
+                const db = WordRotatorDb.getInstance();
+                const levelJson = await db.loadLevel(currentLevelInfo["id"]);
+                if (levelJson === null) {
+                    return this.nextLevel();
+                }
+
+                const level = LevelHelper.inflateLevel(levelJson, this.templateContainer);
+                level.setStartRotations(currentLevelInfo["rotations"]);
+
+                const self = this;
+                level.getWonPromise().then(() => {
+                    self.levelWon(level);
+                });
+
+                level.createSegments();
+                level.getRootSegment()._updateElement();
+
+                level.saveAsCurrentLevel();
+
+                let levelSegment = this.findBy("#level");
+                levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
+                let scaleHelper = new ScaleHelper();
+                scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
+
+                this.level = level;
+                return;
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return this.nextLevel();
     }
 
     async nextLevel() {
@@ -3723,14 +3876,13 @@ class LevelSite extends AbstractSite$1 {
             this._siteContent.classList.remove('won');
 
             const db = WordRotatorDb.getInstance();
-            // const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
-            const nextLevelJson = await db.loadNextLevel([140]);
+            const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]);
+            // const nextLevelJson = await db.loadNextLevel([120]);
             if (nextLevelJson === null) {
                 this.startSite(EndSite);
                 return;
             }
             const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
-
             const self = this;
             level.getWonPromise().then(() => {
                 self.levelWon(level);
@@ -3739,6 +3891,8 @@ class LevelSite extends AbstractSite$1 {
             level.createSegments();
             level.getRootSegment()._updateElement();
 
+            level.saveAsCurrentLevel();
+
             let levelSegment = this.findBy("#level");
             levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
             let scaleHelper = new ScaleHelper();
@@ -3762,6 +3916,7 @@ class LevelSite extends AbstractSite$1 {
             this.levelCounterAction.redraw();
 
             this._siteContent.classList.add('won');
+            localStorage.removeItem("currentLevel");
             await savePromise;
         }
         catch (e) {
diff --git a/src/module/Application/pwa/html/application/level.html b/src/module/Application/pwa/html/application/level.html
index 2e03198..aa596b7 100644
--- a/src/module/Application/pwa/html/application/level.html
+++ b/src/module/Application/pwa/html/application/level.html
@@ -17,7 +17,7 @@
         <div class = 'show-when-won height-20 center flex-center'>
             <b data-translation="won" id = "won-text"></b>
         </div>
-        <div class="flex-center height-60 overflow-hidden">
+        <div class="flex-center height-60">
             <div id='level'>
             </div>
         </div>
diff --git a/src/module/Application/pwa/js/site/LevelSite.js b/src/module/Application/pwa/js/site/LevelSite.js
index 87af456..5bad7ff 100644
--- a/src/module/Application/pwa/js/site/LevelSite.js
+++ b/src/module/Application/pwa/js/site/LevelSite.js
@@ -61,7 +61,48 @@ export class LevelSite extends AbstractSite {
 
         this.levelCounterAction.setTitle(this.levelCounter);
         this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
-        this.nextLevel();
+
+        this.loadLastLevel();
+    }
+
+    async loadLastLevel() {
+        try {
+            let currentLevelInfo = localStorage.getItem("currentLevel");
+            if (currentLevelInfo !== null) {
+                currentLevelInfo = JSON.parse(currentLevelInfo);
+
+                const db = WordRotatorDb.getInstance();
+                const levelJson = await db.loadLevel(currentLevelInfo["id"]);
+                if (levelJson === null) {
+                    return this.nextLevel();
+                }
+
+                const level = LevelHelper.inflateLevel(levelJson, this.templateContainer);
+                level.setStartRotations(currentLevelInfo["rotations"]);
+
+                const self = this;
+                level.getWonPromise().then(() => {
+                    self.levelWon(level);
+                });
+
+                level.createSegments();
+                level.getRootSegment()._updateElement();
+
+                level.saveAsCurrentLevel();
+
+                let levelSegment = this.findBy("#level");
+                levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
+                let scaleHelper = new ScaleHelper();
+                scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
+
+                this.level = level;
+                return;
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return this.nextLevel();
     }
 
     async nextLevel() {
@@ -69,14 +110,13 @@ export class LevelSite extends AbstractSite {
             this._siteContent.classList.remove('won');
 
             const db = WordRotatorDb.getInstance();
-            // const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
-            const nextLevelJson = await db.loadNextLevel([140]);
+            const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]);
+            // const nextLevelJson = await db.loadNextLevel([120]);
             if (nextLevelJson === null) {
                 this.startSite(EndSite);
                 return;
             }
             const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
-
             const self = this;
             level.getWonPromise().then(() => {
                 self.levelWon(level);
@@ -85,6 +125,8 @@ export class LevelSite extends AbstractSite {
             level.createSegments();
             level.getRootSegment()._updateElement();
 
+            level.saveAsCurrentLevel();
+
             let levelSegment = this.findBy("#level");
             levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
             let scaleHelper = new ScaleHelper();
@@ -108,6 +150,7 @@ export class LevelSite extends AbstractSite {
             this.levelCounterAction.redraw();
 
             this._siteContent.classList.add('won');
+            localStorage.removeItem("currentLevel");
             await savePromise;
         }
         catch (e) {
diff --git a/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel.js b/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel.js
new file mode 100644
index 0000000..9dbccb7
--- /dev/null
+++ b/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel.js
@@ -0,0 +1,66 @@
+import {Level} from "./Level";
+import {RowSegment} from "../Segment/RowSegment";
+import {TriangleSegment} from "../Segment/TriangleSegment";
+import {ParentSegment} from "../Segment/ParentSegment";
+
+export class FourWordsLevel extends Level {
+
+    constructor(templateContainer, wordLength) {
+        super(templateContainer);
+        this.wordLength = wordLength;
+    }
+
+    createSegments() {
+        if (this.words.length >= 4 &&
+            this.words[0].length >= this.wordLength &&
+            this.words[1].length >= this.wordLength &&
+            this.words[2].length >= this.wordLength &&
+            this.words[3].length >= this.wordLength
+        ) {
+            let leafsWords = [];
+            leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
+            leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
+            leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
+
+            let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
+            for (let i = 0, n = this.wordLength / 4; i < n; i++) {
+
+                let parents = [];
+                parents[0] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[1] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[2] = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parents[3] = new ParentSegment(this.templateContainer.copyParentTemplate());
+
+                parents[0].addChild(leafsWords[0][4 * i]);
+                parents[0].addChild(leafsWords[0][4 * i + 1]);
+                parents[0].addChild(leafsWords[1][4 * i]);
+                parents[0].addChild(leafsWords[1][4 * i + 1]);
+
+                parents[1].addChild(leafsWords[0][4 * i + 2]);
+                parents[1].addChild(leafsWords[0][4 * i + 3]);
+                parents[1].addChild(leafsWords[1][4 * i + 2]);
+                parents[1].addChild(leafsWords[1][4 * i + 3]);
+
+                parents[2].addChild(leafsWords[2][4 * i]);
+                parents[2].addChild(leafsWords[2][4 * i + 1]);
+                parents[2].addChild(leafsWords[3][4 * i]);
+                parents[2].addChild(leafsWords[3][4 * i + 1]);
+
+                parents[3].addChild(leafsWords[2][4 * i + 2]);
+                parents[3].addChild(leafsWords[2][4 * i + 3]);
+                parents[3].addChild(leafsWords[3][4 * i + 2]);
+                parents[3].addChild(leafsWords[3][4 * i + 3]);
+
+                let parent = new ParentSegment(this.templateContainer.copyParentTemplate());
+                parent.addChild(parents[0]);
+                parent.addChild(parents[1]);
+                parent.addChild(parents[2]);
+                parent.addChild(parents[3]);
+
+                rootSegment.addChild(parent);
+            }
+            this.setRootSegment(rootSegment)
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel12.js b/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel12.js
new file mode 100644
index 0000000..ccd3cbf
--- /dev/null
+++ b/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel12.js
@@ -0,0 +1,7 @@
+import {FourWordsLevel} from "./FourWordsLevel";
+
+export class FourWordsLevel12 extends FourWordsLevel{
+    constructor(templateContainer) {
+        super(templateContainer, 12);
+    }
+}
\ No newline at end of file
diff --git a/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel8.js b/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel8.js
new file mode 100644
index 0000000..21755e8
--- /dev/null
+++ b/src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel8.js
@@ -0,0 +1,7 @@
+import {FourWordsLevel} from "./FourWordsLevel";
+
+export class FourWordsLevel8 extends FourWordsLevel{
+    constructor(templateContainer) {
+        super(templateContainer, 8);
+    }
+}
\ No newline at end of file
diff --git a/src/module/Application/pwa/js/wordrotator/Level/Level.js b/src/module/Application/pwa/js/wordrotator/Level/Level.js
index d16fc89..5ece269 100644
--- a/src/module/Application/pwa/js/wordrotator/Level/Level.js
+++ b/src/module/Application/pwa/js/wordrotator/Level/Level.js
@@ -21,6 +21,19 @@ export class Level {
         });
     }
 
+    saveAsCurrentLevel(){
+        let rotations = this.getCurrentRotations();
+        localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations}));
+    }
+
+    getCurrentRotations(){
+        if (this.rootSegment !== null)
+        {
+            return this.rootSegment.getCurrentRotations([]);
+        }
+        return [];
+    }
+
     setId(id)
     {
         this.id = id;
@@ -82,6 +95,7 @@ export class Level {
             });
             return true;
         }
+        this.saveAsCurrentLevel();
         return false;
     }
 
diff --git a/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js b/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js
index 18aa572..0982a99 100644
--- a/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js
+++ b/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js
@@ -3,6 +3,8 @@ import {RowLevel8} from "./RowLevel8";
 import {RowLevel10} from "./RowLevel10";
 import {SixWordsRowLevel8} from "./SixWordsRowLevel8";
 import {SixWordsRowLevel12} from "./SixWordsRowLevel12";
+import {FourWordsLevel8} from "./FourWordsLevel8";
+import {FourWordsLevel12} from "./FourWordsLevel12";
 
 export class LevelHelper {
     static setLevelType(typeId, level) {
@@ -34,5 +36,7 @@ LevelHelper.types = {
     40: RowLevel8,
     60: RowLevel10,
     100: SixWordsRowLevel8,
+    120: FourWordsLevel8,
     140: SixWordsRowLevel12,
+    160: FourWordsLevel12,
 };
\ No newline at end of file
diff --git a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
index efad630..10b3a50 100644
--- a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
+++ b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
@@ -13,14 +13,18 @@ export class ParentSegment extends Segment {
             this.rotation += 90;
             this.rotation %= 360;
 
+            let currentRotation = this.rotation;
+
             this._updateRotationClass();
             this.element.classList.add("rotating");
 
             let self = this;
             let delayPromise = new Promise(function (resolve) {
                 setTimeout(resolve, 250);
-            }).then(()=>{
-                self.element.classList.remove("rotating");
+            }).then(() => {
+                if (self.rotation === currentRotation) {
+                    self.element.classList.remove("rotating");
+                }
             });
             this.getLevel().checkHasWon(delayPromise);
             return delayPromise;
@@ -40,7 +44,6 @@ export class ParentSegment extends Segment {
     }
 
     applyRotations(rotations) {
-        // debugger;
         this.rotation = rotations[0];
         rotations.splice(0, 1);
         for (let i = 0, n = this.children.length; i < n; i++) {
@@ -49,6 +52,15 @@ export class ParentSegment extends Segment {
         return rotations;
     }
 
+    getCurrentRotations(rotations)
+    {
+        rotations.push(this.rotation);
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     isSolved() {
         for (let i = 0, n = this.children.length; i < n; i++) {
             if (!this.children[i].isSolved()) {
@@ -57,7 +69,7 @@ export class ParentSegment extends Segment {
         }
         return (this.rotation === 0 || (
             this.children[0].sameAs(this.children[2]) && this.children[1].sameAs(this.children[3]) && (
-                this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
+            this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
     }
 
     setChildren(children) {
@@ -98,8 +110,7 @@ export class ParentSegment extends Segment {
         for (let i = 0, n = this.children.length; i < n; i++) {
             this.children[i]._updateElement();
             childContainer.appendChild(this.children[i].getElement());
-            if (i%2 === 1 && this.children.length-1 !== i)
-            {
+            if (i % 2 === 1 && this.children.length - 1 !== i) {
                 childContainer.appendChild(document.createElement("br"));
             }
         }
diff --git a/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js
index 3c365b4..83467c6 100644
--- a/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js
+++ b/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js
@@ -11,6 +11,13 @@ export class RowSegment extends ParentSegment{
         return rotations;
     }
 
+    getCurrentRotations(rotations){
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].getCurrentRotations(rotations);
+        }
+        return rotations;
+    }
+
     _updateElement() {
         const childContainer = this.element.querySelector(".child-container");
         childContainer.removeAllChildren();
diff --git a/src/module/Application/pwa/js/wordrotator/Segment/Segment.js b/src/module/Application/pwa/js/wordrotator/Segment/Segment.js
index b41337a..a9b2a74 100644
--- a/src/module/Application/pwa/js/wordrotator/Segment/Segment.js
+++ b/src/module/Application/pwa/js/wordrotator/Segment/Segment.js
@@ -7,6 +7,10 @@ export class Segment{
         this.parent = null;
     }
 
+    getCurrentRotations(rotations){
+        return rotations;
+    }
+
     sameAs(otherSegment){
         return false;
     }
diff --git a/src/scss/wordRotator.scss b/src/scss/wordRotator.scss
index 36101f6..f827413 100644
--- a/src/scss/wordRotator.scss
+++ b/src/scss/wordRotator.scss
@@ -17,24 +17,16 @@ $animationDuration: 0.25s;
   @keyframes rotate-#{nth($rotationDegrees, $i)} {
     0% {
       transform: rotate(#{$startDegree}deg);
-      background-color: transparent;
-      z-index: 0;
-    }
-    99% {
-      transform: rotate(#{nth($rotationDegrees, $i)}deg);
-      background-color: transparent;
-      z-index: 0;
     }
     100% {
       transform: rotate(#{nth($rotationDegrees, $i)}deg);
-      background-color: white;
-      z-index: 1;
     }
   }
 }
 
 .segment:not(.segment-row):not(.segment-triangle) {
   &.rotating {
+    z-index: 10 !important;
     overflow: hidden;
 
     @for $i from 1 through length($rotationDegrees) {
@@ -56,7 +48,6 @@ $animationDuration: 0.25s;
               $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
               &.rotate-#{nth($rotationDegrees, $j)} {
                 animation-name: rotate-#{$animationName};
-
               }
             }
           }
@@ -91,20 +82,6 @@ $animationDuration: 0.25s;
                   animation-duration: $animationDuration;
                   animation-fill-mode: forwards;
                   animation-timing-function: linear;
-
-                  > .child-container {
-                    > .segment {
-                      @if $animationName==360 {
-                        $animationName: 0;
-                      }
-                      //animation-name: rotate-#{90+ $animationName};
-                      //animation-duration: 2.5s;
-                      //animation-fill-mode: forwards;
-                      //animation-direction: reverse;
-                      //animation-timing-function: linear;
-
-                    }
-                  }
                 }
               }
             }
@@ -147,6 +124,7 @@ $animationDuration: 0.25s;
   }
 
   &.segment-leaf {
+    background-color: transparent;
     min-width: 1em;
     padding: 0.8em;
     &:before {
@@ -156,11 +134,11 @@ $animationDuration: 0.25s;
     }
     .leaf-element {
       position: absolute;
+      width: 100%;
+      height: 100%;
+      line-height: 1.5em;
       top: 0;
       left: 0;
-      right: 0;
-      bottom: 0;
-      transform: translateY(50%);
     }
   }