diff --git a/resources/js/components/bash.vue b/resources/js/components/bash.vue
index 600201c..f80b960 100644
--- a/resources/js/components/bash.vue
+++ b/resources/js/components/bash.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <a href="#" @click="show = true"><img src="/img/bash/app_icon.webp" width="50" height="50" alt="ロリ端末" /></a>
+    <a href="#" @click="show = true"><img class="icon" src="/img/bash/app_icon.webp" width="50" height="50" alt="ロリ端末" /></a>
     <span v-if="show">
       <label :for="`konsoleinput-${output.length-1}`">
       <vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="konsoleuser" :x="-50" :y="-100" :z="99999999">
@@ -226,4 +226,12 @@
     color: #fcfcfc;
     line-height: 14px;
   }
+
+  .icon {
+    transition: background 0.3s;
+  }
+
+  .icon:hover {
+    background-color:#eff0f180;
+  }
 </style>
diff --git a/resources/js/components/note.vue b/resources/js/components/note.vue
index 1549675..92fd214 100644
--- a/resources/js/components/note.vue
+++ b/resources/js/components/note.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <a href="#" @click="show = true"><img src="/img/bash/note_icon.webp" width="50" height="50" alt="ショタノート" /></a>
+    <a href="#" @click="show = true"><img class="icon" src="/img/bash/note_icon.webp" width="50" height="50" alt="ショタノート" /></a>
     <span v-if="show">
       <vue-draggable-resizable style="border: 0px solid #232629;" :drag-handle="'.drag-handle'" class-name-handle="resize-handle" class="shotanote" :x="50" :y="-100" :z="99999999">
         <div style="width: 100%; position: relative;">
@@ -224,4 +224,12 @@
     right: 0;
     bottom: 0;
   }
+
+  .icon {
+    transition: background 0.3s;
+  }
+
+  .icon:hover {
+    background-color:#eff0f180;
+  }
 </style>
diff --git a/resources/sass/_contents.scss b/resources/sass/_contents.scss
new file mode 100644
index 0000000..1304528
--- /dev/null
+++ b/resources/sass/_contents.scss
@@ -0,0 +1,83 @@
+.bar  {
+  background: linear-gradient(to bottom, $evil4 0%, $evil1 34%, $evil6 100%);
+}
+
+.bara {
+  background: linear-gradient(180deg, $suwa05 0, $suwa01 34%, $evil5 100%);
+}
+
+.bar, .bara {
+  text-align: center;
+  color: $white1;
+  padding: 5px;
+  font-size: 20px;
+  border-bottom: solid 2px $suwa03;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s;
+}
+
+.bar > a {
+  color: $white1;
+}
+
+.bar > a:hover {
+  text-decoration: none;
+}
+
+.bar:hover {
+  color: $white1;
+  background: linear-gradient(to bottom, $evil3 0%, $evil0 34%, $evil2 100%);
+}
+
+.indexborder {
+  border: 2px solid $suwa03;
+  box-shadow: 0px 0px 7px 3px $suwa04;
+  padding: 8px;
+  background-color: $black1;
+}
+
+.meta {
+  padding: 5px;
+  text-align: left;
+  background-color: $suwa09;
+  border-bottom: solid 2px $suwa03;
+}
+
+.comment {
+  border-top: solid 2px $suwa03;
+}
+
+.back, .comment {
+  padding: 4px;
+  background-color: $black2;
+  text-align: left;
+}
+
+.commentloop {
+  padding: 10px 4px 40px 4px;
+}
+
+.commentloop > .name {
+  color: $ok3;
+}
+
+.within {
+  margin: 0 auto;
+  border: 2px solid $suwa03;
+  box-shadow: 0px 0px 7px 3px $suwa04;
+}
+
+.wny {
+  border: solid 2px $ng5;
+  box-shadow: 0px 0px 20px 10px $ng4;
+}
+
+.bny, .cny {
+  background-color: $ng2;
+  border-bottom: solid 2px $ng5;
+}
+
+.mny {
+  background-color: $ng6;
+  border-bottom: solid 2px $ng5;
+}
diff --git a/resources/sass/_jpserriffont.scss b/resources/sass/_jpserriffont.scss
new file mode 100644
index 0000000..f06c4fb
--- /dev/null
+++ b/resources/sass/_jpserriffont.scss
@@ -0,0 +1,16 @@
+// @font-face {
+//   font-family: jpserriffont;
+//   src: url('jpserriffont.woff');
+// }
+
+@font-face {
+  font-family: 'jpserriffont';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/jpserriffont.woff');
+  font-display: swap;
+}
+
+body {
+  font-family: jpserriffont;
+}
diff --git a/resources/sass/_logo.scss b/resources/sass/_logo.scss
new file mode 100644
index 0000000..cbe2c6c
--- /dev/null
+++ b/resources/sass/_logo.scss
@@ -0,0 +1,85 @@
+.logo-img {
+  border: 2px solid $suwa03;
+  box-shadow: 0 0 7px 3px $suwa04;
+}
+
+.logo-sns {
+  transition: background 0.3s, color 0.3s;
+  background-color: $black2;
+  border: 1px solid $white2;
+  padding: 8px;
+  margin: 4px 10px;
+}
+
+.logo-sns:hover {
+  background-color: $white2;
+  border: 1px solid $black2;
+}
+
+.logo-br {
+  position: absolute;
+  bottom: 8px;
+  right: 16px;
+}
+
+/// Stroke font-character
+/// @param  {Integer} $stroke - Stroke width
+/// @param  {Color}   $color  - Stroke color
+/// @return {List}            - text-shadow list
+@function stroke($stroke, $color) {
+  $shadow: ();
+  $from: $stroke*-1;
+  @for $i from $from through $stroke {
+   @for $j from $from through $stroke {
+      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
+    }
+  }
+  @return $shadow;
+}
+/// Stroke font-character
+/// @param  {Integer} $stroke - Stroke width
+/// @param  {Color}   $color  - Stroke color
+/// @return {Style}           - text-shadow
+@mixin stroke($stroke, $color) {
+  text-shadow: stroke($stroke, $color);
+}
+
+@keyframes sitenamehover {
+  0%   { text-shadow: stroke(4, $suwa04); }
+  25%  { text-shadow: stroke(4, $suwa03); }
+  50%  { text-shadow: stroke(4, $suwa00); }
+  75%  { text-shadow: stroke(4, $suwa03); }
+  100% { text-shadow: stroke(4, $suwa04); }
+}
+
+.logo-c {
+  font-size: 64px;
+  font-weight: bolder;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-shadow: stroke(4, $suwa04);
+}
+
+.logo-c:hover {
+  animation: sitenamehover 2s linear infinite;
+}
+
+@media (max-width : 1200px) {
+  .logo-c {
+    font-size: 32px;
+  }
+}
+
+@media (max-width : 968px) {
+  .logo-c {
+    font-size: 20px;
+  }
+}
+
+@media (max-width : 525px) {
+  .logo-br, .nomobile {
+    display: none;
+  }
+}
diff --git a/resources/sass/_navbar.scss b/resources/sass/_navbar.scss
new file mode 100644
index 0000000..d607e51
--- /dev/null
+++ b/resources/sass/_navbar.scss
@@ -0,0 +1,43 @@
+.bg-dark {
+  background: radial-gradient(farthest-corner at 50% 85%, $suwa06 0%, $black1 100%);
+  border: 2px solid $suwa03;
+  box-shadow: 0 0 7px 3px $suwa04;
+}
+
+.navbar {
+  padding: 0px;
+}
+
+.navbar-toggler {
+  border: 0px solid transparent;
+}
+
+.navbar-nav .dropdown-menu {
+  background-color: $black2;
+  color: $white1;
+  border: 2px solid $suwa03;
+  box-shadow: 0 0 7px 3px $suwa04;
+}
+
+.dropdown-item {
+  color: $white1;
+}
+
+.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
+  color: $white1;
+  background-color: $suwa03;
+}
+
+.navbar-brand {
+  padding: 5px;
+}
+
+.navbar-brand, .nav-item {
+  transition: background 0.3s;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.navbar-brand:hover, .nav-item:hover {
+  background-color: $suwa07;
+}
diff --git a/resources/sass/_sidemenu.scss b/resources/sass/_sidemenu.scss
new file mode 100644
index 0000000..d3383f8
--- /dev/null
+++ b/resources/sass/_sidemenu.scss
@@ -0,0 +1,8 @@
+.sidemenu {
+  border: 2px solid $suwa03;
+  box-shadow: 0 0 7px 3px $suwa04;
+}
+
+.nav-pills .nav-link {
+  border-radius: 0px;
+}
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index 58ba18d..c36df91 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -1,19 +1,95 @@
+$spec: false;
 
-// Body
-$body-bg: #31363b;
+// 色
+//// メイン
+$suwa00: #9ed6ff;
+$suwa01: #8bb6d6;
+$suwa02: #6ec0fb;
+$suwa03: #3daee9;
+$suwa04: #1d99f3;
+$suwa05: #0094ff;
+$suwa06: #3498db;
+$suwa07: #2980b9;
+$suwa08: #205e7d;
+$suwa09: #2c3e50;
+$suwa10: #34495e;
 
-// Typography
-$font-family-sans-serif: "Raleway", sans-serif;
-$font-size-base: 1rem;
-$line-height-base: 1.6;
+$evil0: #6e93ad;
+$evil1: #436a86;
+$evil2: #2b6b8b;
+$evil3: #2980b9;
+$evil4: #22699c;
+$evil5: #04547d;
+$evil6: #1a3746;
 
-#app {
-  font-family: monospace;
-  font-size: large;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: left;
-  margin-top: 48px;
-  margin-left: 0px;
+@if $spec {
+  $suwa00: #ffe6f9;
+  $suwa01: #e599e5;
+  $suwa02: #ea81e8;
+  $suwa03: #e93de9;
+  $suwa04: #f31de8;
+  $suwa05: #ea00ff;
+  $suwa06: #db34d3;
+  $suwa07: #b929b2;
+  $suwa07: #b459b6;
+  $suwa08: #7d2069;
+  $suwa09: #502c50;
+  $suwa10: #5e345c;
+
+  $evil0: #ad6ea8;
+  $evil1: #864386;
+  $evil2: #832b8b;
+  $evil3: #b929ad;
+  $evil4: #9c2296;
+  $evil5: #7d0469;
+  $evil6: #421a46;
 }
 
+//// 青
+$dan1: #9ed6ff;
+$dan2: #3daee9;
+$dan3: #1d99f3;
+$dan4: #205e7d;
+
+//// 赤
+$ng1: #f58276;
+$ng2: #da4453;
+$ng3: #e74c3c;
+$ng4: #ff3636;
+$ng5: #ed1515;
+$ng6: #c0392b;
+$ng7: #611e24;
+
+//// グレ
+$grey1: #d6dfe4;
+$grey2: #bdc3c7;
+$grey3: #7f8c8d;
+$grey4: #727272;
+$grey5: #495051;
+
+//// 黒
+$black1: #232629;
+$black2: #31363b;
+$black3: #4d4d4d;
+
+//// 白
+$white1: #fcfcfc;
+$white2: #eff0f1;
+
+//// ピンク
+$jo1: #ffe6f9;
+$jo2: #e93de9;
+$jo3: #f31de8;
+$jo4: #7d2069;
+
+//// 緑
+$ok1: #20ec77;
+$ok2: #2ecc71;
+$ok3: #11d116;
+$ok4: #27ae60;
+$ok5: #145d33;
+
+//// 紫
+$kawaii1: #cb81ea;
+$kawaii2: #9b59b6;
+$kawaii3: #61237c;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 1240f43..56d398e 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -4,306 +4,50 @@
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
 
-  @font-face {
-    font-family: 'jpserriffont';
-    font-style: normal;
-    font-weight: 400;
-    src: url('../fonts/jpserriffont.woff');
-    font-display: swap;
-  }
+// フォント
+@import "jpserriffont";
 
-  body {
-    font-family: 'jpserriffont';
-    text-align: center;
-    color: #fcfcfc;
-    background-color: #232629;
-  }
+// ロゴ
+@import "logo";
 
-  .indexborder {
-    border: 2px solid #3daee9;
-    box-shadow: 0px 0px 7px 3px #1d99f3;
-    padding: 8px;
-    background-color: #31363b;
-  }
+// ナビバー
+@import "navbar";
 
-  .logo-img {
-    border: 2px solid #3daee9;
-    box-shadow: 0 0 7px 3px #1d99f3;
-  }
+// サイドメニュー
+@import "sidemenu";
 
-  .logo-sns {
-    background-color: #31363b;
-    border: 1px solid #eff0f1;
-    padding: 8px;
-    margin: 4px 10px;
-  }
+// コンテンツ
+@import "contents";
 
-  .logo-sns:hover {
-    background-color: #eff0f1;
-    border: 1px solid #31363b;
-  }
+// コンポーネント
+@import "conponent/badge";
+@import "conponent/button";
+@import "conponent/check";
+@import "conponent/form";
+@import "conponent/modal";
 
-  .logo-br {
-    position: absolute;
-    bottom: 8px;
-    right: 16px;
-  }
+// その他
+#app {
+  font-family: monospace;
+  font-size: large;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  margin-top: 48px;
+  margin-left: 0px;
+}
 
-  /// Stroke font-character
-  /// @param  {Integer} $stroke - Stroke width
-  /// @param  {Color}   $color  - Stroke color
-  /// @return {List}            - text-shadow list
-  @function stroke($stroke, $color) {
-    $shadow: ();
-    $from: $stroke*-1;
-    @for $i from $from through $stroke {
-     @for $j from $from through $stroke {
-        $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
-      }
-    }
-    @return $shadow;
-  }
-  /// Stroke font-character
-  /// @param  {Integer} $stroke - Stroke width
-  /// @param  {Color}   $color  - Stroke color
-  /// @return {Style}           - text-shadow
-  @mixin stroke($stroke, $color) { text-shadow: stroke($stroke, $color); }
+body {
+  font-family: 'jpserriffont';
+  text-align: center;
+  color: $white1;
+  background-color: $black1;
+}
 
-  @keyframes sitenamehover {
-    0%   { text-shadow: stroke(4, #1d99f3); }
-    25%  { text-shadow: stroke(4, #3daee9); }
-    50%  { text-shadow: stroke(4, #ffe6f9); }
-    75%  { text-shadow: stroke(4, #3daee9); }
-    100% { text-shadow: stroke(4, #1d99f3); }
-  }
-
-  .logo-c {
-    font-size: 64px;
-    font-weight: bolder;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-shadow: stroke(4, #1d99f3);
-  }
-
-  .logo-c:hover { animation: sitenamehover 2s linear infinite; }
-  @media (max-width : 1200px) { .logo-c { font-size: 32px; } }
-  @media (max-width : 968px) { .logo-c { font-size: 20px; } }
-  @media (max-width : 525px) { .logo-br, .nomobile { display: none; } }
-
-  .sidemenu {
-    border: 2px solid #3daee9;
-    box-shadow: 0 0 7px 3px #1d99f3;
-  }
-
-  a { color: #1d99f3; }
-  a:hover { color: #3daee9; }
-  .bg-dark {
-    background: radial-gradient(farthest-corner at 50% 85%, #3498db 0%, #232629 100%);
-    border: 2px solid #3daee9;
-    box-shadow: 0 0 7px 3px #1d99f3;
-  }
-  .navbar { padding: 0px; }
-  .navbar-toggler { border: 0px solid transparent; }
-  .navbar-nav .dropdown-menu {
-    background-color: #31363b;
-    color: #fcfcfc;
-    border: 2px solid #3daee9;
-    box-shadow: 0 0 7px 3px #1d99f3;
-  }
-  .dropdown-item { color: #fcfcfc; }
-  .dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus {
-    color: #fcfcfc;
-    background-color: #3daee9;
-  }
-  .navbar-brand { padding: 5px; }
-  .navbar-brand, .nav-item {
-    transition: background 0.3s, color 0.3s;
-    border-radius: 2px;
-    cursor: pointer;
-  }
-  .navbar-brand:hover, .nav-item:hover { background-color: #2980b9; }
-  .badge-danger {
-    color: #fcfcfc;
-    background-color: #da4453;
-  }
-  .badge-light {
-    color: #232629;
-    background-color: #eff0f1;
-  }
-  .badge { font-size: 100%; }
-  .within {
-    margin: 30px auto;
-    border: 2px solid #3daee9;
-    box-shadow: 0px 0px 7px 3px #1d99f3;
-  }
-  .nav-pills .nav-link { border-radius: 0px; }
-  .bar  { background: linear-gradient(to bottom, #22699c 0%, #436a86 34%, #1a3746 100%); }
-  .bara { background: linear-gradient(180deg,#0094ff 0,#8bb6d6 34%,#04547d 100%); }
-  .bar, .bara {
-    text-align: center;
-    color: #fcfcfc;
-    padding: 5px;
-    font-size: 20px;
-    border-bottom: solid 2px #3daee9;
-    cursor: pointer;
-    transition: background 0.3s, color 0.3s;
-  }
-  .bar > a { color: #fcfcfc; }
-  .bar > a:hover { text-decoration: none; }
-  .bar:hover { background: linear-gradient(to bottom, #2980b9 0%, #6e93ad 34%, #2b6b8b 100%) }
-  .meta {
-    padding: 5px;
-    text-align: left;
-    background-color: #2c3e50;
-    border-bottom: solid 2px #3daee9;
-  }
-  .comment { border-top: solid 2px #3daee9; }
-  .back, .comment {
-    padding: 4px;
-    background-color: #31363b;
-    text-align: left;
-  }
-
-  .commentloop { padding: 10px 4px 40px 4px; }
-  .commentloop > .name { color: #11d116; }
-  .modal-header, .modal-body, .modal-footer { color: #fcfcfc; }
-  .modal-header { background: linear-gradient(to bottom, #1d99f3 0%, #6ec0fb 34%, #3daee9 100%); }
-  .modal-body { background-color: #4d4d4d; }
-  .modal-footer { background-color: #31363b; }
-  .form-control, .form-control:focus { background-color: #232629; color: #fcfcfc; }
-  .form-control { border: 1px solid #34495e; }
-  .form-control:focus { border: 1px solid #3daee9; }
-  .form-control:disabled, .form-control[readonly] { background-color: #232629; }
-
-  .custom-control-input:checked ~ .custom-control-label::before,
-  .custom-radio .custom-control-input:checked ~ .custom-control-label::before,
-  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before
-  {
-    color: #fcfcfc;
-    background-color: #3daee9;
-    border-color: #1d99f3;
-  }
-  .btn, btn:hover {
-    margin: 0 2px;
-    border: 2px solid;
-  }
-  .btn {
-    border-left-color: #fcfcfc;
-    border-top-color: #fcfcfc;
-  }
-  .btn:hover {
-    border-left-color: #7f8c8d;
-    border-top-color: #7f8c8d;
-  }
-  .btn-forum, .btn-forum.disabled, .btn-forum:disabled {
-    background: radial-gradient(ellipse at top, #61237c, transparent),
-    radial-gradient(ellipse at bottom, #232629, transparent);
-    color: #fcfcfc;
-    background-color: #9b59b6;
-    border-bottom-color: #cb81ea;
-    border-right-color: #cb81ea;
-  }
-  .btn-forum:hover {
-    color: #fcfcfc;
-    background-color: #61237c;
-    border-color: transparent;
-    border-bottom-color: #9b59b6;
-    border-right-color: #9b59b6;
-  }
-  .btn-cwgames, .btn-cwgames.disabled, .btn-cwgames:disabled {
-    background: radial-gradient(ellipse at top, #4d4d4d, transparent),
-    radial-gradient(ellipse at bottom, #232629, transparent);
-    color: #fcfcfc;
-    border-bottom-color: #bdc3c7;
-    border-right-color: #bdc3c7;
-  }
-  .btn-cwgames:hover {
-    color: #fcfcfc;
-    background-color: #727272;
-    border-color: transparent;
-    border-bottom-color: #31363b;
-    border-right-color: #31363b;
-  }
-  .btn-pink, .btn-pink.disabled, .btn-pink:disabled {
-    background: radial-gradient(ellipse at top, #ff00ff, transparent),
-    radial-gradient(ellipse at bottom, #232629, transparent);
-    color: #fcfcfc;
-    background-color: #ff00ff;
-    border-bottom-color: #ea81e8;
-    border-right-color: #ea81e8;
-  }
-  .btn-pink:hover {
-    color: #fcfcfc;
-    background-color: #ff00ff;
-    border-color: transparent;
-    border-bottom-color: #b459b6;
-    border-right-color: #b459b6;
-  }
-  .btn-primary, .btn-primary.disabled, .btn-primary:disabled {
-    background: radial-gradient(ellipse at top, #3daee9, transparent),
-    radial-gradient(ellipse at bottom, #232629, transparent);
-    color: #fcfcfc;
-    border-bottom-color: #9ed6ff;
-    border-right-color: #9ed6ff;
-  }
-  .btn-primary:hover {
-    color: #fcfcfc;
-    background-color: #205e7d;
-    border-color: transparent;
-    border-bottom-color: #1d99f3;
-    border-right-color: #1d99f3;
-  }
-  .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
-    background: radial-gradient(ellipse at top, #7f8c8d, transparent),
-    radial-gradient(ellipse at bottom, #232629, transparent);
-    color: #fcfcfc;
-    border-bottom-color: #d6dfe4;
-    border-right-color: #d6dfe4;
-  }
-  .btn-secondary:hover {
-    color: #fcfcfc;
-    background-color: #495051;
-    border-color: transparent;
-    border-bottom-color: #bdc3c7;
-    border-right-color: #bdc3c7;
-  }
-  .btn-success, .btn-success.disabled, .btn-success:disabled {
-    background: radial-gradient(ellipse at top, #2ecc71, transparent),
-    radial-gradient(ellipse at bottom, #232629, transparent);
-    color: #fcfcfc;
-    border-bottom-color: #20ec77;
-    border-right-color: #20ec77;
-  }
-  .btn-success:hover {
-    color: #fcfcfc;
-    background-color: #145d33;
-    border-color: transparent;
-    border-bottom-color: #27ae60;
-    border-right-color: #27ae60;
-  }
-  .btn-danger, .btn-danger.disabled, .btn-danger:disabled, .alert-danger {
-    background: radial-gradient(ellipse at top, #da4453, transparent),
-    radial-gradient(ellipse at bottom, #232629, transparent);
-    color: #fcfcfc;
-    border-bottom-color: #f58276;
-    border-right-color: #f58276;
-  }
-  .btn-danger:hover {
-    color: #fcfcfc;
-    background-color: #611e24;
-    border-color: transparent;
-    border-bottom-color: #e74c3c;
-    border-right-color: #e74c3c;
-  }
-
-  .within { margin: 0 auto; }
-  .wny { border: solid 2px #ed1515; box-shadow: 0px 0px 20px 10px rgba(237,21,21,1); }
-  .bny, .cny { background-color: #da4453; border-bottom: solid 2px #ed1515; }
-  .mny { background-color: #c0392b; border-bottom: solid 2px #ed1515; }
-  .new { background-color: #2c3e50; margin: 10px auto; padding: 0; }
-  .head > div { margin: 5px 0; }
-  .new-head, .new-body { padding: 10px; }
-  .new-head { border: 2px solid #3daee9; background-color: #34495e; }
-  .new-body { border-bottom: 2px solid #3daee9; border-left: 2px solid #3daee9; border-right: 2px solid #3daee9; }
+a { color: $suwa04; }
+a:hover { color: $suwa03; }
+// .new { background-color: $suwa09; margin: 10px auto; padding: 0; }
+// .head > div { margin: 5px 0; }
+// .new-head, .new-body { padding: 10px; }
+// .new-head { border: 2px solid $suwa03; background-color: $suwa10; }
+// .new-body { border-bottom: 2px solid $suwa03; border-left: 2px solid $suwa03; border-right: 2px solid $suwa03; }
diff --git a/resources/sass/conponent/_badge.scss b/resources/sass/conponent/_badge.scss
new file mode 100644
index 0000000..90d3d8f
--- /dev/null
+++ b/resources/sass/conponent/_badge.scss
@@ -0,0 +1,13 @@
+.badge-danger {
+  color: $white1;
+  background-color: $ng3;
+}
+
+.badge-light {
+  color: $black1;
+  background-color: $white2;
+}
+
+.badge {
+  font-size: 100%;
+}
diff --git a/resources/sass/conponent/_button.scss b/resources/sass/conponent/_button.scss
new file mode 100644
index 0000000..8209035
--- /dev/null
+++ b/resources/sass/conponent/_button.scss
@@ -0,0 +1,145 @@
+.btn, btn:hover {
+  margin: 0 2px;
+  border: 2px solid;
+}
+
+.btn {
+  border-left-color: $white1;
+  border-top-color: $white1;
+}
+
+.btn:hover {
+  border-left-color: $grey3;
+  border-top-color: $grey3;
+}
+
+.btn-cwgames, .btn-cwgames.disabled, .btn-cwgames:disabled {
+  background: radial-gradient(ellipse at top, $black3, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $grey2;
+  border-right-color: $grey2;
+}
+
+.btn-cwgames:hover {
+  color: $white1;
+  background-color: $grey4;
+  border-color: transparent;
+  border-bottom-color: $black2;
+  border-right-color: $black2;
+}
+
+.btn-fumei, .btn-fumei.disabled, .btn-fumei:disabled {
+  background: radial-gradient(ellipse at top, $kawaii3, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  background-color: $kawaii2;
+  border-bottom-color: $kawaii1;
+  border-right-color: $kawaii1;
+}
+
+.btn-fumei:hover {
+  color: $white1;
+  background-color: $kawaii3;
+  border-color: transparent;
+  border-bottom-color: $kawaii2;
+  border-right-color: $kawaii2;
+}
+
+.btn-danshi, .btn-danshi.disabled, .btn-danshi:disabled {
+  background: radial-gradient(ellipse at top, $dan2, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  background-color: $white1;
+  border-bottom-color: $dan1;
+  border-right-color: $dan1;
+}
+
+.btn-danshi:hover {
+  color: $white1;
+  background-color: $suwa08;
+  border-color: transparent;
+  border-bottom-color: $suwa04;
+  border-right-color: $suwa04;
+}
+
+.btn-joshi, .btn-joshi.disabled, .btn-joshi:disabled {
+  background: radial-gradient(ellipse at top, $jo2, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  background-color: $white1;
+  border-bottom-color: $jo1;
+  border-right-color: $jo1;
+}
+
+.btn-joshi:hover {
+  color: $white1;
+  background-color: $jo4;
+  border-color: transparent;
+  border-bottom-color: $jo3;
+  border-right-color: $jo3;
+}
+
+.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
+  background: radial-gradient(ellipse at top, $suwa03, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $suwa00;
+  border-right-color: $suwa00;
+}
+
+.btn-primary:hover {
+  color: $white1;
+  background-color: $suwa08;
+  border-color: transparent;
+  border-bottom-color: $suwa04;
+  border-right-color: $suwa04;
+}
+
+.btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
+  background: radial-gradient(ellipse at top, $grey3, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $grey1;
+  border-right-color: $grey1;
+}
+
+.btn-secondary:hover {
+  color: $white1;
+  background-color: $grey5;
+  border-color: transparent;
+  border-bottom-color: $grey2;
+  border-right-color: $grey2;
+}
+
+.btn-success, .btn-success.disabled, .btn-success:disabled {
+  background: radial-gradient(ellipse at top, $ok2, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $ok1;
+  border-right-color: $ok1;
+}
+
+.btn-success:hover {
+  color: $white1;
+  background-color: $ok5;
+  border-color: transparent;
+  border-bottom-color: $ok4;
+  border-right-color: $ok4;
+}
+
+.btn-danger, .btn-danger.disabled, .btn-danger:disabled, .alert-danger {
+  background: radial-gradient(ellipse at top, $ng3, transparent),
+  radial-gradient(ellipse at bottom, $black1, transparent);
+  color: $white1;
+  border-bottom-color: $ng1;
+  border-right-color: $ng1;
+}
+
+.btn-danger:hover {
+  color: $white1;
+  background-color: $ng7;
+  border-color: transparent;
+  border-bottom-color: $ng3;
+  border-right-color: $ng3;
+}
diff --git a/resources/sass/conponent/_check.scss b/resources/sass/conponent/_check.scss
new file mode 100644
index 0000000..4e6442b
--- /dev/null
+++ b/resources/sass/conponent/_check.scss
@@ -0,0 +1,8 @@
+.custom-control-input:checked ~ .custom-control-label::before,
+.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before
+{
+  color: $white1;
+  background-color: $suwa03;
+  border-color: $suwa04;
+}
diff --git a/resources/sass/conponent/_form.scss b/resources/sass/conponent/_form.scss
new file mode 100644
index 0000000..a48e12c
--- /dev/null
+++ b/resources/sass/conponent/_form.scss
@@ -0,0 +1,16 @@
+.form-control, .form-control:focus {
+  background-color: $black1;
+  color: $white1;
+}
+
+.form-control {
+  border: 1px solid $suwa10;
+}
+
+.form-control:focus {
+  border: 1px solid $suwa03;
+}
+
+.form-control:disabled, .form-control[readonly] {
+  background-color: $black1;
+}
diff --git a/resources/sass/conponent/_modal.scss b/resources/sass/conponent/_modal.scss
new file mode 100644
index 0000000..b64c7a1
--- /dev/null
+++ b/resources/sass/conponent/_modal.scss
@@ -0,0 +1,15 @@
+.modal-header, .modal-body, .modal-footer {
+  color: $white1;
+}
+
+.modal-header {
+  background: linear-gradient(to bottom, $suwa04 0%, $suwa02 34%, $suwa03 100%);
+}
+
+.modal-body {
+  background-color: $black3;
+}
+
+.modal-footer {
+  background-color: $black2;
+}
diff --git a/resources/sass/jpserriffont.scss b/resources/sass/jpserriffont.scss
deleted file mode 100644
index a70945b..0000000
--- a/resources/sass/jpserriffont.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@font-face {
-  font-family: jpserriffont;
-  src: url('jpserriffont.woff');
-}
-
-body {
-  font-family: jpserriffont;
-}
diff --git a/resources/views/pages/site/register.blade.php b/resources/views/pages/site/register.blade.php
index 249b78a..589ee60 100644
--- a/resources/views/pages/site/register.blade.php
+++ b/resources/views/pages/site/register.blade.php
@@ -44,16 +44,16 @@
           <fieldset class="form-group">
             <div tabindex="-1" role="group">
               <div id="gender" role="radiogroup" tabindex="-1" class="btn-group-toggle btn-group" variant="primary">
-                <label class="btn btn-forum">
-                  <input id="gender0" name="gender" type="radio" name="gender" autocomplete="off" class="" value="0" />
+                <label class="btn btn-fumei">
+                  <input id="gender0" name="gender" type="radio" autocomplete="off" class="" value="0" />
                   <span>不明</span>
                 </label>
-                <label class="btn btn-primary">
-                  <input id="gender1" name="gender" type="radio" name="gender" autocomplete="off" class="" value="1" />
+                <label class="btn btn-danshi">
+                  <input id="gender1" name="gender" type="radio" autocomplete="off" class="" value="1" />
                   <span>男性</span>
                 </label>
-                <label class="btn btn-pink">
-                  <input id="gender2" name="gender" type="radio" name="gender" autocomplete="off" class="" value="2" />
+                <label class="btn btn-joshi">
+                  <input id="gender2" name="gender" type="radio" autocomplete="off" class="" value="2" />
                   <span>女性</span>
                 </label>
               </div>