diff --git a/client/src/app/app.component.css b/client/src/app/app.component.scss
similarity index 100%
rename from client/src/app/app.component.css
rename to client/src/app/app.component.scss
diff --git a/client/src/app/kata-create/kata-create.component.css b/client/src/app/kata-create/kata-create.component.scss
similarity index 100%
rename from client/src/app/kata-create/kata-create.component.css
rename to client/src/app/kata-create/kata-create.component.scss
diff --git a/client/src/app/kata-displayer/kata-displayer.component.css b/client/src/app/kata-displayer/kata-displayer.component.scss
similarity index 100%
rename from client/src/app/kata-displayer/kata-displayer.component.css
rename to client/src/app/kata-displayer/kata-displayer.component.scss
diff --git a/client/src/app/kata/kata.component.css b/client/src/app/kata/kata.component.scss
similarity index 84%
rename from client/src/app/kata/kata.component.css
rename to client/src/app/kata/kata.component.scss
index 76d7ee533b14c3e4b4925ee49834e367312e2658..fe7b77186e3dad501e72b4aec2f98918901ae138 100644
--- a/client/src/app/kata/kata.component.css
+++ b/client/src/app/kata/kata.component.scss
@@ -72,4 +72,12 @@ button:hover {
   background-color: rgba(39, 174, 96, 0.2);
 }
 
+.header{
+  width: 500px;
+  height: 20px;
+  background-color: rgba(43, 47, 57, 1);
+  font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  padding:3px;
+  border-radius: 6px;
+}
 
diff --git a/client/src/app/main-left-side-nav/main-left-side-nav.component.css b/client/src/app/main-left-side-nav/main-left-side-nav.component.scss
similarity index 100%
rename from client/src/app/main-left-side-nav/main-left-side-nav.component.css
rename to client/src/app/main-left-side-nav/main-left-side-nav.component.scss
diff --git a/client/src/app/program-create/program-create.component.css b/client/src/app/program-create/program-create.component.scss
similarity index 100%
rename from client/src/app/program-create/program-create.component.css
rename to client/src/app/program-create/program-create.component.scss
diff --git a/client/src/app/program-displayer/program-displayer.component.css b/client/src/app/program-displayer/program-displayer.component.scss
similarity index 100%
rename from client/src/app/program-displayer/program-displayer.component.css
rename to client/src/app/program-displayer/program-displayer.component.scss
diff --git a/client/src/app/terminal-assert/terminal-assert.component.css b/client/src/app/terminal-assert/terminal-assert.component.scss
similarity index 100%
rename from client/src/app/terminal-assert/terminal-assert.component.css
rename to client/src/app/terminal-assert/terminal-assert.component.scss
diff --git a/client/src/app/terminal-code/terminal-code.component.css b/client/src/app/terminal-code/terminal-code.component.scss
similarity index 100%
rename from client/src/app/terminal-code/terminal-code.component.css
rename to client/src/app/terminal-code/terminal-code.component.scss
diff --git a/client/src/styles.css b/client/src/styles.scss
similarity index 100%
rename from client/src/styles.css
rename to client/src/styles.scss