diff --git a/Resources/Scripts/imports/styles/introduction.css b/Resources/Scripts/imports/styles/introduction.css
new file mode 100644
index 00000000..b414fe67
--- /dev/null
+++ b/Resources/Scripts/imports/styles/introduction.css
@@ -0,0 +1,69 @@
+#td-introduction-modal {
+  display: flex;
+}
+
+#td-introduction-modal .mdl {
+  width: 90%;
+  min-width: 515px;
+  max-width: 835px;
+  height: 328px;
+}
+
+#td-introduction-modal .mdl-inner {
+  padding-top: 0;
+}
+
+#td-introduction-modal .mdl-header-title {
+  cursor: default;
+}
+
+#td-introduction-modal .mdl-content {
+  padding: 4px 16px 0;
+  overflow-y: auto;
+}
+
+#td-introduction-modal p {
+  margin: 12px 0;
+  font-size: 1.4rem;
+}
+
+#td-introduction-modal p strong {
+  font-weight: normal;
+  text-shadow: 0 0 #000;
+}
+
+#td-introduction-modal .main-menu {
+  float: left;
+  width: 187px;
+  height: 124px;
+  margin-right: 12px;
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.33);
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALsAAAB8CAMAAAAGozFUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZUExURQAAAAAANgAAYQA2YQA2iABhYQBhrDYAADYANjYAYTY2ADY2NjY2YTY2iDZhrDaIiDaIz2EAAGEANmEAYWE2NmE2iGFhNmFhYWGs8og2AIg2Nog2YYiIYYisiIjPrIjPz4jP8qxhAKxhNqzPiKzyrKzy8szMzM+INs/PiM/yrM/yz8/y8tfX1/Dw8PKsYfLPiPLyrPLyz/Ly8nG9GIQAAARDSURBVHja7ZyPd9IwEMdDxbI5cemcWJjbWrWrDi2Q//+PM7m7pOGHfcORlD6v7w1ok2wfwqXkvrs78TTcQzypoR6DZ//dcTA7szM7s8dgX2dCiJxGrG+Kvd+C1w619M+uoZqkGiy7AxvivI+XajURSWVO9AtjQ6UQqTIn18R+PxFSP82SCnuUOYxdfdjMzSmNn9mPMJa9p/QWpH5cZ5rjgqbanNQjOMnGS315nWl+7NGkqrmSqpb6hRuvm+PO++qygtkWKZ2YOW2EGBWr6dK3mTKHmcYeuu3r/fR5UawmUrXjY9tMLRFItez6abPYYd/MffbN4uHT89033UPVInfje1ir+Glbm7msGjKR1mbg/UFv7KFqYzGfwUhq6cbHZle1Jp3QZ65fjMwcize3hbEcu1ZnZkVCb+wBq8L86D4JGl1sm+E9AbMzO7MzO7MzO7Mze586QQqdcav7ggO3juMfF8Whlsj+6hXuzx17x0aWmswO/nBLbPaZ8RqatzdHsO/36In94WOltAOnXSZwoR7A+Qa3H5q/CEH+aA5+OfaQ6ASCYGAuZq3nAi4KjML2oH6T9qxX05+W3T5pt5+WQ5NUpA1s99jMpZt05zpiPxzVpOF1gukSFACPDN3+1p0l/3qbHf1rVBQO9gMFISz7ZnE/Xe6wX3oqXzc7KgoH+4GCEFoXA8VL20CuGprCTG6xkzZwyGZIUTjUDxSEwOybu4regzC3mxLXqm8zVhsoYUXai2aF5qQolL7KQB1QQeDvVWZndmZndmZn9nNn/3WuB9sMszM7szM7sw+WXXvEQgYTRYOyNxA9IEMJiyHZjSijWi1pUOxIDcqWiao6uSgalN0E70BYT7YncJ1CFI0074Uvg55KFI1i715U1SlF0bD3maRSGH4nfbn0VKJo+Pt77qKqTi2KRvlePZObI7PzXozZmZ3ZmZ3Zmf1/YjdO3qjY3xH0rBW8PN9jvDyv3cyR+R7DZvdCNq7pQk8iwfE243l7NUTR9CYSHLNWk8qPRsKcJu9CdJHgmHlXqos9vkhwPLsNuWptpi+R4Hh2G3KF+Vgte3yR4FXfq620Orw9QTleDpLd3M6Tvqed95HMzuzMzuzMzuw9sJep6v7XQSnEXsyBd0AZmN3WVzrAL2Rfvb8t/vK3OgukKM/ddelpkdlraVyLV7LvbZujsLuyG1CkxcURtGlalsQVbaHELfP43YYfeP9WRmGBfPWw7Bpc47dFWnaTsBy7K9ri6r3Q4w47BrSsbx7neeh5NwZTp7ZIy34ik2P3iraYxK22aguyb+c46RfvZGibgZsElfzRc9fB7oq2uJysHXvfZs+u0tDspl4RhqBgOAHGEXhpWu3Ks0VbqF6Lq9piC7vQIGszRSkDs+MfqFMbTkBJWF6almO3RVsocQsfS0yihOxXGgQpW2D4/+728p6A2Zmd2Zmd2c+SfaCHZh/u8QdspaeBZ15I7gAAAABJRU5ErkJggg==);
+}
+
+#td-introduction-modal .main-menu + p {
+  margin-top: 15px;
+}
+
+#td-introduction-modal footer {
+  padding: 10px 0;
+}
+
+#td-introduction-modal button {
+  margin-left: 8px;
+}
+
+#td-introduction-modal .anondata {
+  float: left;
+  margin: 5px 7px;
+}
+
+#td-introduction-modal .anondata input {
+  vertical-align: -10%;
+}
+
+#td-introduction-modal .anondata label {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+}
diff --git a/Resources/Scripts/introduction.js b/Resources/Scripts/introduction.js
index 02e788b5..91083074 100644
--- a/Resources/Scripts/introduction.js
+++ b/Resources/Scripts/introduction.js
@@ -1,77 +1,6 @@
 (function($, $TD){
   $(document).one("TD.ready", function(){
-    let css = $(`
-<style>
-#td-introduction-modal {
-  display: flex;
-}
-
-#td-introduction-modal .mdl {
-  width: 90%;
-  min-width: 515px;
-  max-width: 835px;
-  height: 328px;
-}
-
-#td-introduction-modal .mdl-inner {
-  padding-top: 0;
-}
-
-#td-introduction-modal .mdl-header-title {
-  cursor: default;
-}
-
-#td-introduction-modal .mdl-content {
-  padding: 4px 16px 0;
-  overflow-y: auto;
-}
-
-#td-introduction-modal p {
-  margin: 12px 0;
-  font-size: 1.4rem;
-}
-
-#td-introduction-modal p strong {
-  font-weight: normal;
-  text-shadow: 0 0 #000;
-}
-
-#td-introduction-modal .main-menu {
-  float: left;
-  width: 187px;
-  height: 124px;
-  margin-right: 12px;
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.33);
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALsAAAB8CAMAAAAGozFUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZUExURQAAAAAANgAAYQA2YQA2iABhYQBhrDYAADYANjYAYTY2ADY2NjY2YTY2iDZhrDaIiDaIz2EAAGEANmEAYWE2NmE2iGFhNmFhYWGs8og2AIg2Nog2YYiIYYisiIjPrIjPz4jP8qxhAKxhNqzPiKzyrKzy8szMzM+INs/PiM/yrM/yz8/y8tfX1/Dw8PKsYfLPiPLyrPLyz/Ly8nG9GIQAAARDSURBVHja7ZyPd9IwEMdDxbI5cemcWJjbWrWrDi2Q//+PM7m7pOGHfcORlD6v7w1ok2wfwqXkvrs78TTcQzypoR6DZ//dcTA7szM7s8dgX2dCiJxGrG+Kvd+C1w619M+uoZqkGiy7AxvivI+XajURSWVO9AtjQ6UQqTIn18R+PxFSP82SCnuUOYxdfdjMzSmNn9mPMJa9p/QWpH5cZ5rjgqbanNQjOMnGS315nWl+7NGkqrmSqpb6hRuvm+PO++qygtkWKZ2YOW2EGBWr6dK3mTKHmcYeuu3r/fR5UawmUrXjY9tMLRFItez6abPYYd/MffbN4uHT89033UPVInfje1ir+Glbm7msGjKR1mbg/UFv7KFqYzGfwUhq6cbHZle1Jp3QZ65fjMwcize3hbEcu1ZnZkVCb+wBq8L86D4JGl1sm+E9AbMzO7MzO7MzO7Mze586QQqdcav7ggO3juMfF8Whlsj+6hXuzx17x0aWmswO/nBLbPaZ8RqatzdHsO/36In94WOltAOnXSZwoR7A+Qa3H5q/CEH+aA5+OfaQ6ASCYGAuZq3nAi4KjML2oH6T9qxX05+W3T5pt5+WQ5NUpA1s99jMpZt05zpiPxzVpOF1gukSFACPDN3+1p0l/3qbHf1rVBQO9gMFISz7ZnE/Xe6wX3oqXzc7KgoH+4GCEFoXA8VL20CuGprCTG6xkzZwyGZIUTjUDxSEwOybu4regzC3mxLXqm8zVhsoYUXai2aF5qQolL7KQB1QQeDvVWZndmZndmZn9nNn/3WuB9sMszM7szM7sw+WXXvEQgYTRYOyNxA9IEMJiyHZjSijWi1pUOxIDcqWiao6uSgalN0E70BYT7YncJ1CFI0074Uvg55KFI1i715U1SlF0bD3maRSGH4nfbn0VKJo+Pt77qKqTi2KRvlePZObI7PzXozZmZ3ZmZ3Zmf1/YjdO3qjY3xH0rBW8PN9jvDyv3cyR+R7DZvdCNq7pQk8iwfE243l7NUTR9CYSHLNWk8qPRsKcJu9CdJHgmHlXqos9vkhwPLsNuWptpi+R4Hh2G3KF+Vgte3yR4FXfq620Orw9QTleDpLd3M6Tvqed95HMzuzMzuzMzuw9sJep6v7XQSnEXsyBd0AZmN3WVzrAL2Rfvb8t/vK3OgukKM/ddelpkdlraVyLV7LvbZujsLuyG1CkxcURtGlalsQVbaHELfP43YYfeP9WRmGBfPWw7Bpc47dFWnaTsBy7K9ri6r3Q4w47BrSsbx7neeh5NwZTp7ZIy34ik2P3iraYxK22aguyb+c46RfvZGibgZsElfzRc9fB7oq2uJysHXvfZs+u0tDspl4RhqBgOAHGEXhpWu3Ks0VbqF6Lq9piC7vQIGszRSkDs+MfqFMbTkBJWF6almO3RVsocQsfS0yihOxXGgQpW2D4/+728p6A2Zmd2Zmd2c+SfaCHZh/u8QdspaeBZ15I7gAAAABJRU5ErkJggg==);
-}
-
-#td-introduction-modal .main-menu + p {
-  margin-top: 15px;
-}
-
-#td-introduction-modal footer {
-  padding: 10px 0;
-}
-
-#td-introduction-modal button {
-  margin-left: 8px;
-}
-
-#td-introduction-modal .anondata {
-  float: left;
-  margin: 5px 7px;
-}
-
-#td-introduction-modal .anondata input {
-  vertical-align: -10%;
-}
-
-#td-introduction-modal .anondata label {
-  cursor: pointer;
-  display: inline-block;
-  font-size: 14px;
-}
-</style>`).appendTo(document.head);
+    let css = $(`<style>#import "styles/introduction.css"</style>`).appendTo(document.head);
     
     let ele = $(`
 <div id="td-introduction-modal" class="ovl scroll-v scroll-styled-v">