diff --git a/src/component/base/animation/index.css b/src/component/base/animation/index.css
deleted file mode 100644
index 2a4781fd..00000000
--- a/src/component/base/animation/index.css
+++ /dev/null
@@ -1,127 +0,0 @@
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes shake {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  10% {
-    transform: translate3d(-1.2em, 0, 0);
-  }
-
-  20% {
-    transform: translate3d(1.2em, 0, 0);
-  }
-
-  30% {
-    transform: translate3d(-1em, 0, 0);
-  }
-
-  40% {
-    transform: translate3d(1em, 0, 0);
-  }
-
-  50% {
-    transform: translate3d(-0.8em, 0, 0);
-  }
-
-  60% {
-    transform: translate3d(0.8em, 0, 0);
-  }
-
-  70% {
-    transform: translate3d(-0.3em, 0, 0);
-  }
-
-  80% {
-    transform: translate3d(0.3em, 0, 0);
-  }
-
-  90% {
-    transform: translate3d(-0.1em, 0, 0);
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes pop {
-  0% {
-    transform: scale(1);
-  }
-
-  25% {
-    transform: scale(1.1);
-  }
-
-  50% {
-    transform: scale(0.9);
-  }
-
-  75% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes jello {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
-
-  30% {
-    transform: scale3d(1.25, 0.75, 1);
-  }
-
-  40% {
-    transform: scale3d(0.75, 1.25, 1);
-  }
-
-  50% {
-    transform: scale3d(1.15, 0.85, 1);
-  }
-
-  65% {
-    transform: scale3d(0.95, 1.05, 1);
-  }
-
-  75% {
-    transform: scale3d(1.05, 0.95, 1);
-  }
-
-  100% {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes circle-in {
-  0% {
-    clip-path: circle(100% at 50% 50%);
-  }
-
-  100% {
-    clip-path: circle(0% at 50% 50%);
-  }
-}
-
-@keyframes circle-out {
-  0% {
-    clip-path: circle(0% at 50% 50%);
-  }
-
-  100% {
-    clip-path: circle(100% at 50% 50%);
-  }
-}
diff --git a/src/component/base/font/index.css b/src/component/base/font/index.css
deleted file mode 100644
index d1660650..00000000
--- a/src/component/base/font/index.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* open sans */
-@font-face {
-  font-family: "Open Sans";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Open Sans Regular"),
-    local("OpenSans-Regular"),
-    url("../../../font/open-sans/open-sans-400.woff") format("woff"),
-    url("../../../font/open-sans/open-sans-400.woff2") format("woff2"),
-    url("../../../font/open-sans/open-sans-400.ttf") format("truetype");
-}
-
-/* fjalla one */
-@font-face {
-  font-family: "Fjalla One";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src:
-    local("Fjalla One"),
-    url("../../../font/fjalla-one/fjalla-one-400.woff") format("woff"),
-    url("../../../font/fjalla-one/fjalla-one-400.woff2") format("woff2"),
-    url("../../../font/fjalla-one/fjalla-one-400.ttf") format("truetype");
-}
diff --git a/src/component/base/index.js b/src/component/base/index.js
index 372ede7c..a6b968f8 100644
--- a/src/component/base/index.js
+++ b/src/component/base/index.js
@@ -7,8 +7,6 @@ import '../../style/font/index.css';
 import '../../style/spacing/index.css';
 import '../../style/state/index.css';
 import '../../style/typography/index.css';
-//FIXME version to move made into its own component
-import '../../style/version/index.css';
 import '../../style/zindex/index.css';
 import '../../style/utility/index.css';
 
diff --git a/src/component/base/spacing/index.css b/src/component/base/spacing/index.css
deleted file mode 100644
index f5d59123..00000000
--- a/src/component/base/spacing/index.css
+++ /dev/null
@@ -1,1563 +0,0 @@
-.mt-0,
-.my-0 {
-  margin-top: 0 !important;
-}
-
-.mr-0,
-.mx-0 {
-  margin-right: 0 !important;
-}
-
-.mb-0,
-.my-0 {
-  margin-bottom: 0 !important;
-}
-
-.ml-0,
-.mx-0 {
-  margin-left: 0 !important;
-}
-
-.m-1 {
-  margin: 0.25rem !important;
-}
-
-.mt-1,
-.my-1 {
-  margin-top: 0.25rem !important;
-}
-
-.mr-1,
-.mx-1 {
-  margin-right: 0.25rem !important;
-}
-
-.mb-1,
-.my-1 {
-  margin-bottom: 0.25rem !important;
-}
-
-.ml-1,
-.mx-1 {
-  margin-left: 0.25rem !important;
-}
-
-.m-2 {
-  margin: 0.5rem !important;
-}
-
-.mt-2,
-.my-2 {
-  margin-top: 0.5rem !important;
-}
-
-.mr-2,
-.mx-2 {
-  margin-right: 0.5rem !important;
-}
-
-.mb-2,
-.my-2 {
-  margin-bottom: 0.5rem !important;
-}
-
-.ml-2,
-.mx-2 {
-  margin-left: 0.5rem !important;
-}
-
-.m-3 {
-  margin: 1rem !important;
-}
-
-.mt-3,
-.my-3 {
-  margin-top: 1rem !important;
-}
-
-.mr-3,
-.mx-3 {
-  margin-right: 1rem !important;
-}
-
-.mb-3,
-.my-3 {
-  margin-bottom: 1rem !important;
-}
-
-.ml-3,
-.mx-3 {
-  margin-left: 1rem !important;
-}
-
-.m-4 {
-  margin: 1.5rem !important;
-}
-
-.mt-4,
-.my-4 {
-  margin-top: 1.5rem !important;
-}
-
-.mr-4,
-.mx-4 {
-  margin-right: 1.5rem !important;
-}
-
-.mb-4,
-.my-4 {
-  margin-bottom: 1.5rem !important;
-}
-
-.ml-4,
-.mx-4 {
-  margin-left: 1.5rem !important;
-}
-
-.m-5 {
-  margin: 3rem !important;
-}
-
-.mt-5,
-.my-5 {
-  margin-top: 3rem !important;
-}
-
-.mr-5,
-.mx-5 {
-  margin-right: 3rem !important;
-}
-
-.mb-5,
-.my-5 {
-  margin-bottom: 3rem !important;
-}
-
-.ml-5,
-.mx-5 {
-  margin-left: 3rem !important;
-}
-
-.p-0 {
-  padding: 0 !important;
-}
-
-.pt-0,
-.py-0 {
-  padding-top: 0 !important;
-}
-
-.pr-0,
-.px-0 {
-  padding-right: 0 !important;
-}
-
-.pb-0,
-.py-0 {
-  padding-bottom: 0 !important;
-}
-
-.pl-0,
-.px-0 {
-  padding-left: 0 !important;
-}
-
-.p-1 {
-  padding: 0.25rem !important;
-}
-
-.pt-1,
-.py-1 {
-  padding-top: 0.25rem !important;
-}
-
-.pr-1,
-.px-1 {
-  padding-right: 0.25rem !important;
-}
-
-.pb-1,
-.py-1 {
-  padding-bottom: 0.25rem !important;
-}
-
-.pl-1,
-.px-1 {
-  padding-left: 0.25rem !important;
-}
-
-.p-2 {
-  padding: 0.5rem !important;
-}
-
-.pt-2,
-.py-2 {
-  padding-top: 0.5rem !important;
-}
-
-.pr-2,
-.px-2 {
-  padding-right: 0.5rem !important;
-}
-
-.pb-2,
-.py-2 {
-  padding-bottom: 0.5rem !important;
-}
-
-.pl-2,
-.px-2 {
-  padding-left: 0.5rem !important;
-}
-
-.p-3 {
-  padding: 1rem !important;
-}
-
-.pt-3,
-.py-3 {
-  padding-top: 1rem !important;
-}
-
-.pr-3,
-.px-3 {
-  padding-right: 1rem !important;
-}
-
-.pb-3,
-.py-3 {
-  padding-bottom: 1rem !important;
-}
-
-.pl-3,
-.px-3 {
-  padding-left: 1rem !important;
-}
-
-.p-4 {
-  padding: 1.5rem !important;
-}
-
-.pt-4,
-.py-4 {
-  padding-top: 1.5rem !important;
-}
-
-.pr-4,
-.px-4 {
-  padding-right: 1.5rem !important;
-}
-
-.pb-4,
-.py-4 {
-  padding-bottom: 1.5rem !important;
-}
-
-.pl-4,
-.px-4 {
-  padding-left: 1.5rem !important;
-}
-
-.p-5 {
-  padding: 3rem !important;
-}
-
-.pt-5,
-.py-5 {
-  padding-top: 3rem !important;
-}
-
-.pr-5,
-.px-5 {
-  padding-right: 3rem !important;
-}
-
-.pb-5,
-.py-5 {
-  padding-bottom: 3rem !important;
-}
-
-.pl-5,
-.px-5 {
-  padding-left: 3rem !important;
-}
-
-.m-auto {
-  margin: auto !important;
-}
-
-.mt-auto,
-.my-auto {
-  margin-top: auto !important;
-}
-
-.mr-auto,
-.mx-auto {
-  margin-right: auto !important;
-}
-
-.mb-auto,
-.my-auto {
-  margin-bottom: auto !important;
-}
-
-.ml-auto,
-.mx-auto {
-  margin-left: auto !important;
-}
-
-@media (min-width: 550px) {
-  .m-sm-0 {
-    margin: 0 !important;
-  }
-
-  .mt-sm-0,
-  .my-sm-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-sm-0,
-  .mx-sm-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-sm-0,
-  .my-sm-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-sm-0,
-  .mx-sm-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-sm-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-sm-1,
-  .my-sm-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-sm-1,
-  .mx-sm-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-sm-1,
-  .my-sm-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-sm-1,
-  .mx-sm-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-sm-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-sm-2,
-  .my-sm-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-sm-2,
-  .mx-sm-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-sm-2,
-  .my-sm-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-sm-2,
-  .mx-sm-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-sm-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-sm-3,
-  .my-sm-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-sm-3,
-  .mx-sm-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-sm-3,
-  .my-sm-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-sm-3,
-  .mx-sm-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-sm-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-sm-4,
-  .my-sm-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-sm-4,
-  .mx-sm-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-sm-4,
-  .my-sm-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-sm-4,
-  .mx-sm-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-sm-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-sm-5,
-  .my-sm-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-sm-5,
-  .mx-sm-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-sm-5,
-  .my-sm-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-sm-5,
-  .mx-sm-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-sm-0 {
-    padding: 0 !important;
-  }
-
-  .pt-sm-0,
-  .py-sm-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-sm-0,
-  .px-sm-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-sm-0,
-  .py-sm-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-sm-0,
-  .px-sm-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-sm-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-sm-1,
-  .py-sm-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-sm-1,
-  .px-sm-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-sm-1,
-  .py-sm-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-sm-1,
-  .px-sm-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-sm-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-sm-2,
-  .py-sm-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-sm-2,
-  .px-sm-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-sm-2,
-  .py-sm-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-sm-2,
-  .px-sm-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-sm-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-sm-3,
-  .py-sm-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-sm-3,
-  .px-sm-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-sm-3,
-  .py-sm-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-sm-3,
-  .px-sm-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-sm-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-sm-4,
-  .py-sm-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-sm-4,
-  .px-sm-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-sm-4,
-  .py-sm-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-sm-4,
-  .px-sm-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-sm-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-sm-5,
-  .py-sm-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-sm-5,
-  .px-sm-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-sm-5,
-  .py-sm-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-sm-5,
-  .px-sm-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-sm-auto {
-    margin: auto !important;
-  }
-
-  .mt-sm-auto,
-  .my-sm-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-sm-auto,
-  .mx-sm-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-sm-auto,
-  .my-sm-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-sm-auto,
-  .mx-sm-auto {
-    margin-left: auto !important;
-  }
-}
-
-@media (min-width: 700px) {
-  .m-md-0 {
-    margin: 0 !important;
-  }
-
-  .mt-md-0,
-  .my-md-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-md-0,
-  .mx-md-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-md-0,
-  .my-md-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-md-0,
-  .mx-md-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-md-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-md-1,
-  .my-md-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-md-1,
-  .mx-md-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-md-1,
-  .my-md-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-md-1,
-  .mx-md-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-md-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-md-2,
-  .my-md-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-md-2,
-  .mx-md-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-md-2,
-  .my-md-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-md-2,
-  .mx-md-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-md-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-md-3,
-  .my-md-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-md-3,
-  .mx-md-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-md-3,
-  .my-md-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-md-3,
-  .mx-md-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-md-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-md-4,
-  .my-md-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-md-4,
-  .mx-md-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-md-4,
-  .my-md-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-md-4,
-  .mx-md-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-md-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-md-5,
-  .my-md-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-md-5,
-  .mx-md-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-md-5,
-  .my-md-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-md-5,
-  .mx-md-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-md-0 {
-    padding: 0 !important;
-  }
-
-  .pt-md-0,
-  .py-md-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-md-0,
-  .px-md-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-md-0,
-  .py-md-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-md-0,
-  .px-md-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-md-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-md-1,
-  .py-md-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-md-1,
-  .px-md-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-md-1,
-  .py-md-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-md-1,
-  .px-md-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-md-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-md-2,
-  .py-md-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-md-2,
-  .px-md-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-md-2,
-  .py-md-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-md-2,
-  .px-md-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-md-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-md-3,
-  .py-md-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-md-3,
-  .px-md-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-md-3,
-  .py-md-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-md-3,
-  .px-md-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-md-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-md-4,
-  .py-md-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-md-4,
-  .px-md-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-md-4,
-  .py-md-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-md-4,
-  .px-md-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-md-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-md-5,
-  .py-md-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-md-5,
-  .px-md-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-md-5,
-  .py-md-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-md-5,
-  .px-md-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-md-auto {
-    margin: auto !important;
-  }
-
-  .mt-md-auto,
-  .my-md-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-md-auto,
-  .mx-md-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-md-auto,
-  .my-md-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-md-auto,
-  .mx-md-auto {
-    margin-left: auto !important;
-  }
-}
-
-@media (min-width: 900px) {
-  .m-lg-0 {
-    margin: 0 !important;
-  }
-
-  .mt-lg-0,
-  .my-lg-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-lg-0,
-  .mx-lg-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-lg-0,
-  .my-lg-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-lg-0,
-  .mx-lg-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-lg-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-lg-1,
-  .my-lg-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-lg-1,
-  .mx-lg-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-lg-1,
-  .my-lg-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-lg-1,
-  .mx-lg-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-lg-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-lg-2,
-  .my-lg-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-lg-2,
-  .mx-lg-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-lg-2,
-  .my-lg-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-lg-2,
-  .mx-lg-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-lg-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-lg-3,
-  .my-lg-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-lg-3,
-  .mx-lg-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-lg-3,
-  .my-lg-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-lg-3,
-  .mx-lg-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-lg-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-lg-4,
-  .my-lg-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-lg-4,
-  .mx-lg-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-lg-4,
-  .my-lg-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-lg-4,
-  .mx-lg-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-lg-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-lg-5,
-  .my-lg-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-lg-5,
-  .mx-lg-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-lg-5,
-  .my-lg-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-lg-5,
-  .mx-lg-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-lg-0 {
-    padding: 0 !important;
-  }
-
-  .pt-lg-0,
-  .py-lg-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-lg-0,
-  .px-lg-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-lg-0,
-  .py-lg-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-lg-0,
-  .px-lg-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-lg-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-lg-1,
-  .py-lg-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-lg-1,
-  .px-lg-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-lg-1,
-  .py-lg-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-lg-1,
-  .px-lg-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-lg-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-lg-2,
-  .py-lg-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-lg-2,
-  .px-lg-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-lg-2,
-  .py-lg-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-lg-2,
-  .px-lg-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-lg-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-lg-3,
-  .py-lg-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-lg-3,
-  .px-lg-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-lg-3,
-  .py-lg-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-lg-3,
-  .px-lg-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-lg-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-lg-4,
-  .py-lg-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-lg-4,
-  .px-lg-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-lg-4,
-  .py-lg-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-lg-4,
-  .px-lg-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-lg-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-lg-5,
-  .py-lg-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-lg-5,
-  .px-lg-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-lg-5,
-  .py-lg-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-lg-5,
-  .px-lg-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-lg-auto {
-    margin: auto !important;
-  }
-
-  .mt-lg-auto,
-  .my-lg-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-lg-auto,
-  .mx-lg-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-lg-auto,
-  .my-lg-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-lg-auto,
-  .mx-lg-auto {
-    margin-left: auto !important;
-  }
-}
-
-@media (min-width: 1100px) {
-  .m-xl-0 {
-    margin: 0 !important;
-  }
-
-  .mt-xl-0,
-  .my-xl-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-xl-0,
-  .mx-xl-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-xl-0,
-  .my-xl-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-xl-0,
-  .mx-xl-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-xl-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-xl-1,
-  .my-xl-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-xl-1,
-  .mx-xl-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-xl-1,
-  .my-xl-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-xl-1,
-  .mx-xl-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-xl-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-xl-2,
-  .my-xl-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-xl-2,
-  .mx-xl-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-xl-2,
-  .my-xl-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-xl-2,
-  .mx-xl-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-xl-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-xl-3,
-  .my-xl-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-xl-3,
-  .mx-xl-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-xl-3,
-  .my-xl-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-xl-3,
-  .mx-xl-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-xl-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-xl-4,
-  .my-xl-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-xl-4,
-  .mx-xl-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-xl-4,
-  .my-xl-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-xl-4,
-  .mx-xl-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-xl-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-xl-5,
-  .my-xl-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-xl-5,
-  .mx-xl-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-xl-5,
-  .my-xl-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-xl-5,
-  .mx-xl-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-xl-0 {
-    padding: 0 !important;
-  }
-
-  .pt-xl-0,
-  .py-xl-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-xl-0,
-  .px-xl-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-xl-0,
-  .py-xl-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-xl-0,
-  .px-xl-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-xl-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-xl-1,
-  .py-xl-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-xl-1,
-  .px-xl-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-xl-1,
-  .py-xl-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-xl-1,
-  .px-xl-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-xl-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-xl-2,
-  .py-xl-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-xl-2,
-  .px-xl-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-xl-2,
-  .py-xl-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-xl-2,
-  .px-xl-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-xl-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-xl-3,
-  .py-xl-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-xl-3,
-  .px-xl-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-xl-3,
-  .py-xl-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-xl-3,
-  .px-xl-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-xl-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-xl-4,
-  .py-xl-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-xl-4,
-  .px-xl-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-xl-4,
-  .py-xl-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-xl-4,
-  .px-xl-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-xl-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-xl-5,
-  .py-xl-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-xl-5,
-  .px-xl-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-xl-5,
-  .py-xl-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-xl-5,
-  .px-xl-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-xl-auto {
-    margin: auto !important;
-  }
-
-  .mt-xl-auto,
-  .my-xl-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-xl-auto,
-  .mx-xl-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-xl-auto,
-  .my-xl-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-xl-auto,
-  .mx-xl-auto {
-    margin-left: auto !important;
-  }
-}
diff --git a/src/component/base/state/index.css b/src/component/base/state/index.css
deleted file mode 100644
index 85ca1e45..00000000
--- a/src/component/base/state/index.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.is-hidden {
-  display: none !important;
-}
-
-.is-inline-block {
-  display: inline-block !important;
-}
-
-.is-block {
-  display: block !important;
-}
-
-.is-transparent {
-  opacity: 0 !important;
-}
-
-.is-opaque {
-  opacity: 1 !important;
-}
-
-.is-invisible {
-  visibility: hidden !important;
-}
-
-.is-visible {
-  visibility: visible !important;
-}
-
-.is-small {
-  transform: scale(0.5) !important;
-}
-
-.is-large {
-  transform: scale(1.5) !important;
-}
-
-.is-scroll-disabled {
-  overflow: hidden !important;
-}
-
-.is-scroll-x-disabled {
-  overflow-x: hidden !important;
-}
-
-.is-scroll-y-disabled {
-  overflow-y: hidden !important;
-}
-
-.is-appear {
-  animation: appear var(--layout-transition-medium) 1;
-}
-
-.is-shake {
-  animation: shake var(--layout-transition-slow) 1;
-}
-
-.is-pop {
-  animation: pop var(--layout-transition-medium) 1;
-}
-
-.is-jello {
-  animation: jello var(--layout-transition-slow) 1;
-}
diff --git a/src/component/base/typography/index.css b/src/component/base/typography/index.css
deleted file mode 100644
index d0778ac6..00000000
--- a/src/component/base/typography/index.css
+++ /dev/null
@@ -1,183 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0 0 1em 0;
-  font-weight: normal;
-  line-height: 1.6;
-  color: hsl(var(--theme-primary-text-010));
-}
-
-h1 {
-  font-size: 1.5em;
-  font-family: var(--theme-font-display-name);
-  font-weight: var(--theme-font-display-weight);
-  font-style: var(--theme-font-display-style);
-}
-
-h2 {
-  font-size: 1.3em;
-  font-family: var(--theme-font-display-name);
-  font-weight: var(--theme-font-display-weight);
-  font-style: var(--theme-font-display-style);
-}
-
-h3 {
-  font-size: 1.1em;
-  font-family: var(--theme-font-ui-name);
-  font-weight: var(--theme-font-ui-weight);
-  font-style: var(--theme-font-ui-style);
-}
-
-h4 {
-  font-size: 1em;
-  font-family: var(--theme-font-ui-name);
-  font-weight: var(--theme-font-ui-weight);
-  font-style: var(--theme-font-ui-style);
-}
-
-h5 {
-  font-size: 1em;
-  font-family: var(--theme-font-ui-name);
-  font-weight: var(--theme-font-ui-weight);
-  font-style: var(--theme-font-ui-style);
-  font-weight: bold;
-}
-
-h6 {
-  font-size: 0.75em;
-  font-family: var(--theme-font-ui-name);
-  font-weight: var(--theme-font-ui-weight);
-  font-style: var(--theme-font-ui-style);
-  font-weight: bold;
-}
-
-p {
-  color: hsl(var(--theme-primary-text-010));
-  margin: 0;
-  line-height: 1.6;
-}
-
-p:not(:last-child) {
-  margin-bottom: 0.5em;
-}
-
-hr {
-  border: 0;
-  border-top: var(--layout-horizontal-rule-small);
-  border-radius: calc(var(--theme-radius) * 0.01em);
-  margin: calc(var(--wrap-space) * 2) 0;
-  clear: both;
-  transition: border-color var(--layout-transition-extra-fast);
-}
-
-b,
-caption,
-strong {
-  color: hsl(var(--theme-primary-text-010));
-  font-family: var(--theme-font-ui-name);
-  font-weight: 600;
-}
-
-i {
-  font-style: italic;
-}
-
-a {
-  color: hsl(var(--theme-primary-text-010));
-  text-decoration: underline;
-  transition: text-decoration var(--layout-transition-extra-fast);
-}
-
-a:link,
-a:visited {
-  color: hsl(var(--theme-primary-text-010));
-}
-
-a:focus {
-  text-decoration-color: hsl(var(--theme-primary-text-010));
-  outline: none;
-}
-
-a:hover {
-  color: hsl(var(--theme-primary-text-010));
-  text-decoration-color: rgb(var(--theme-accent));
-}
-
-a:active {
-  color: hsl(var(--theme-primary-text-010));
-  text-decoration-color: hsl(var(--theme-primary-text-010));
-}
-
-ol,
-ul {
-  margin: 0;
-  padding: 0 0 0 1.5em;
-}
-
-ol:not(:last-child),
-ul:not(:last-child) {
-  margin-bottom: 1em;
-}
-
-li {
-  margin: 0;
-}
-
-li>ul,
-li>ol {
-  margin: 0;
-}
-
-li:not(:last-child) {
-  margin-bottom: 0.5em;
-}
-
-li>ul:not(:last-child),
-li>ol:not(:last-child) {
-  margin-bottom: 0.5em;
-}
-
-table {
-  border: 0;
-  margin: 0 0 1em;
-  padding: 0;
-  width: 100%;
-  border-spacing: 0;
-}
-
-table thead tr td,
-table thead tr th {
-  background-color: hsl(var(--theme-primary-030));
-  border: 0;
-  border-bottom: 1px solid hsl(var(--theme-primary-040));
-  padding: 0.5em;
-  margin: 0;
-  text-align: left;
-  font-family: var(--theme-font-ui-name);
-  font-weight: var(--theme-font-ui-weight);
-  font-style: var(--theme-font-ui-style);
-  font-weight: bold;
-  box-sizing: border-box;
-}
-
-table tr:nth-child(odd) {
-  background-color: hsl(var(--theme-primary-020));
-}
-
-table tbody tr td,
-table tbody tr th {
-  padding: 0.25em 0.5em;
-  margin: 0;
-  border: 0;
-  text-align: left;
-  box-sizing: border-box;
-}
-
-code {
-  background-color: hsl(var(--theme-primary-040));
-  padding: 0.2em 0.5em;
-  border-radius: calc(var(--theme-radius) * 0.01em);
-}
diff --git a/src/component/base/utility/index.css b/src/component/base/utility/index.css
deleted file mode 100644
index b14fbd38..00000000
--- a/src/component/base/utility/index.css
+++ /dev/null
@@ -1,85 +0,0 @@
-:root {
-  --utility-muted: var(--theme-primary-110);
-  --utility-muted-hover: var(--theme-primary-110);
-  --utility-muted-focus-active: var(--theme-primary-110);
-  --utility-muted-checked: var(--theme-primary-110);
-  --utility-muted-disabled: var(--theme-primary-030);
-}
-
-.list-unstyled {
-  padding-left: 0;
-  margin-bottom: 0;
-}
-
-.list-unstyled li {
-  list-style-type: none;
-}
-
-.list-unstyled li:not(:last-child) {
-  margin-bottom: 0;
-}
-
-.list-feature {
-  padding-left: 0;
-  margin-bottom: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-}
-
-.list-feature li {
-  padding: 0.25em 0.5em;
-  list-style-type: none;
-}
-
-.list-feature li:not(:last-child) {
-  margin-bottom: 0;
-}
-
-.list-inline li {
-  display: inline-block;
-}
-
-.small {
-  font-size: 0.8em;
-}
-
-.large {
-  font-size: 1.2em;
-}
-
-.muted {
-  color: hsl(var(--utility-muted));
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.d-flex {
-  display: flex;
-}
-
-.d-horizontal {
-  flex-direction: row;
-}
-
-.d-vertical {
-  flex-direction: column;
-}
-
-.d-center {
-  align-items: center;
-  justify-content: center;
-}
-
-.d-gap {
-  gap: 1em;
-}
diff --git a/src/component/base/version/index.css b/src/component/base/version/index.css
deleted file mode 100644
index 5269201f..00000000
--- a/src/component/base/version/index.css
+++ /dev/null
@@ -1,40 +0,0 @@
-:root {
-  --version-icon-size: 22;
-  --version-icon: calc((var(--version-icon-size) / 4) * 1em);
-}
-
-.version {
-  font-size: 1rem;
-  display: inline-grid;
-  grid-template-columns: auto auto;
-  grid-gap: var(--wrap-space);
-  align-items: center;
-  justify-items: start;
-}
-
-.version-app-name {
-  margin-bottom: 0;
-}
-
-.version-number:not(:last-child),
-.version-name:not(:last-child) {
-  margin-bottom: 0;
-}
-
-.version-number {
-  background-color: rgb(var(--theme-accent));
-  color: hsl(var(--theme-accent-text));
-  border-radius: calc(var(--theme-radius) * 0.01em);
-  padding: 0 0.5em;
-}
-
-.version-icon {
-  width: var(--version-icon);
-}
-
-.version-details {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.25em;
-}
diff --git a/src/component/base/zindex/index.css b/src/component/base/zindex/index.css
deleted file mode 100644
index fe9d3c94..00000000
--- a/src/component/base/zindex/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-:root {
-  --z-index-background: 1000;
-  --z-index-layout: 2000;
-  --z-index-toolbar: 3000;
-  --z-index-edge: 4000;
-  --z-index-dropdown: 5000;
-  --z-index-shade: 6000;
-  --z-index-menu: 7000;
-  --z-index-modal: 8000;
-  --z-index-suggest: 9000;
-}
diff --git a/src/component/index.js b/src/component/index.js
index 8325f41e..4c7b6034 100644
--- a/src/component/index.js
+++ b/src/component/index.js
@@ -7,7 +7,6 @@ import { fontawesome } from './fontawesome';
 import { icon } from './icon';
 import { keyboard } from './keyboard';
 import { layout } from './layout';
-import { logo } from './logo';
 import { menu } from './menu';
 import { pageLock } from './pageLock';
 import { theme } from './theme';
@@ -30,7 +29,6 @@ export const component = {
   icon,
   keyboard,
   layout,
-  logo,
   menu,
   pageLock,
   theme,
diff --git a/src/component/logo/index.css b/src/component/logo/index.css
index 3d9e3dc7..7145a229 100644
--- a/src/component/logo/index.css
+++ b/src/component/logo/index.css
@@ -1,14 +1,21 @@
+:root {
+  --logo-size: 22;
+  --logo-width: calc((var(--logo-size) / 4) * 1em);
+}
+
 .logo {
+  font-size: 1rem;
+  width: var(--logo-width);
   transform: scale(1) rotate(0deg);
   transition: transform var(--layout-transition-extra-fast);
 }
 
 .logo:hover {
-  transform: scale(1.2) rotate(180deg);
+  transform: scale(1.1) rotate(180deg);
 }
 
 .logo:active {
-  transform: scale(1.4) rotate(180deg);
+  transform: scale(1.2) rotate(180deg);
 }
 
 .logo,
@@ -94,7 +101,7 @@
 
 @keyframes shrink {
   0% {
-    transform: scale(1.2);
+    transform: scale(1.1);
   }
 
   100% {
diff --git a/src/component/logo/index.js b/src/component/logo/index.js
index c7daa3db..80b0d3d6 100644
--- a/src/component/logo/index.js
+++ b/src/component/logo/index.js
@@ -4,24 +4,35 @@ import { node } from '../../utility/node';
 
 import './index.css';
 
-const logo = {};
+export const Logo = function() {
 
-logo.svg =
-  '<svg class="logo" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
-  '<circle cx="256" cy="256" r="256" class="logo-circle"/>' +
-  '<path d="M374 224H138C132.477 224 128 228.477 128 234V278C128 283.523 132.477 288 138 288H374C379.523 288 384 283.523 384 278V234C384 228.477 379.523 224 374 224Z" class="logo-cross-x"/>' +
-  '<path d="M278 128H234C228.477 128 224 132.477 224 138V374C224 379.523 228.477 384 234 384H278C283.523 384 288 379.523 288 374V138C288 132.477 283.523 128 278 128Z" class="logo-cross-y"/>' +
-  '</svg>';
+  this.element = {
+    logo: node('div|class:logo'),
+    svg: '<svg class="logo" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
+      '<circle cx="256" cy="256" r="256" class="logo-circle"/>' +
+      '<path d="M374 224H138C132.477 224 128 228.477 128 234V278C128 283.523 132.477 288 138 288H374C379.523 288 384 283.523 384 278V234C384 228.477 379.523 224 374 224Z" class="logo-cross-x"/>' +
+      '<path d="M278 128H234C228.477 128 224 132.477 224 138V374C224 379.523 228.477 384 234 384H278C283.523 384 288 379.523 288 374V138C288 132.477 283.523 128 278 128Z" class="logo-cross-y"/>' +
+      '</svg>'
+  };
 
-logo.render = () => {
+  this.assemble = () => {
 
-  const versionIcon = node('div|class:version-icon');
+    this.element.logo.innerHTML = this.element.svg;
 
-  versionIcon.innerHTML = logo.svg;
+  };
 
-  versionIcon.addEventListener('dblclick', () => { easterEgg.toaster.bind.add(); });
+  this.bind = () => {
+
+    this.element.logo.addEventListener('dblclick', () => { easterEgg.toaster.bind.add(); });
+
+  };
+
+  this.logo = () => {
+    return this.element.logo;
+  };
+
+  this.assemble();
+
+  this.bind();
 
-  return versionIcon;
 };
-
-export { logo };
diff --git a/src/component/menuContent/appSetting/index.js b/src/component/menuContent/appSetting/index.js
index 35bf58b2..8ba08386 100644
--- a/src/component/menuContent/appSetting/index.js
+++ b/src/component/menuContent/appSetting/index.js
@@ -1,22 +1,19 @@
-import { version } from '../../version';
-import { logo } from '../../logo';
+import { node } from '../../../utility/node';
+
 import { APP_NAME } from '../../../constant';
 
-
 import { Link } from '../../link';
-
-
-import { node } from '../../../utility/node';
+import { Splash } from '../../splash';
 
 const appSetting = {};
 
 appSetting[APP_NAME.toLowerCase()] = (parent) => {
 
-  const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + APP_NAME, openNew: true });
+  const githubLink = new Link({ text: 'GitHub.', href: `https://github.com/zombieFox/${APP_NAME}`, openNew: true });
 
-  const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: 'https://www.reddit.com/r/' + APP_NAME, openNew: true });
+  const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: `https://www.reddit.com/r/${APP_NAME}`, openNew: true });
 
-  const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: 'https://github.com/zombieFox/' + APP_NAME + '/blob/master/license', openNew: true });
+  const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: `https://github.com/zombieFox/${APP_NAME}/blob/master/license`, openNew: true });
 
   const para1 = node('p');
 
@@ -30,16 +27,11 @@ appSetting[APP_NAME.toLowerCase()] = (parent) => {
 
   para3.innerHTML = `${APP_NAME} uses the ${licenseLink.link().outerHTML}`;
 
+  const splash = new Splash();
+
   parent.appendChild(
     node('div', [
-      node('div|class:version', [
-        logo.render(),
-        node('div|class:version-details', [
-          node('h1:' + APP_NAME + '|class:version-app-name'),
-          node('p:Version ' + version.number + '|class:version-number'),
-          node('p:' + version.name + '|class:version-name small')
-        ])
-      ]),
+      splash.splash(),
       node('hr'),
       para1,
       para2,
diff --git a/src/style/version/index.css b/src/component/splash/index.css
similarity index 61%
rename from src/style/version/index.css
rename to src/component/splash/index.css
index 5269201f..25bdf5ce 100644
--- a/src/style/version/index.css
+++ b/src/component/splash/index.css
@@ -1,9 +1,4 @@
-:root {
-  --version-icon-size: 22;
-  --version-icon: calc((var(--version-icon-size) / 4) * 1em);
-}
-
-.version {
+.splash {
   font-size: 1rem;
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -12,29 +7,27 @@
   justify-items: start;
 }
 
-.version-app-name {
-  margin-bottom: 0;
-}
+.splash-logo {}
 
-.version-number:not(:last-child),
-.version-name:not(:last-child) {
-  margin-bottom: 0;
-}
-
-.version-number {
-  background-color: rgb(var(--theme-accent));
-  color: hsl(var(--theme-accent-text));
-  border-radius: calc(var(--theme-radius) * 0.01em);
-  padding: 0 0.5em;
-}
-
-.version-icon {
-  width: var(--version-icon);
-}
-
-.version-details {
+.splash-description {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25em;
 }
+
+.splash-name {
+  margin-bottom: 0;
+}
+
+.splash-version-number:not(:last-child),
+.splash-version-name:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.splash-version-number {
+  background-color: rgb(var(--theme-accent));
+  color: hsl(var(--theme-accent-text));
+  border-radius: calc(var(--theme-radius) * 0.01em);
+  padding: 0 0.5em;
+}
diff --git a/src/component/splash/index.js b/src/component/splash/index.js
new file mode 100644
index 00000000..96927f33
--- /dev/null
+++ b/src/component/splash/index.js
@@ -0,0 +1,47 @@
+import { version } from '../version';
+import { node } from '../../utility/node';
+
+import { Logo } from '../logo';
+
+import { APP_NAME } from '../../constant';
+
+import './index.css';
+
+export const Splash = function() {
+
+  this.logo = new Logo();
+
+  this.element = {
+    splash: node('div|class:splash'),
+    logo: node('div|class:splash-logo'),
+    description: {
+      description: node('div|class:splash-description'),
+      name: node('h1:' + APP_NAME + '|class:splash-name'),
+      versionName: node('p:' + version.name + '|class:splash-version-name small'),
+      versionNumber: node('p:Version ' + version.number + '|class:splash-version-number')
+    }
+  };
+
+  this.assemble = () => {
+
+    this.element.logo.appendChild(this.logo.logo());
+
+    this.element.splash.appendChild(this.element.logo);
+
+    this.element.description.description.appendChild(this.element.description.name);
+
+    this.element.description.description.appendChild(this.element.description.versionNumber);
+
+    this.element.description.description.appendChild(this.element.description.versionName);
+
+    this.element.splash.appendChild(this.element.description.description);
+
+  };
+
+  this.splash = () => {
+    return this.element.splash;
+  };
+
+  this.assemble();
+
+};