diff --git a/src/lib/components/post.svelte b/src/lib/components/post.svelte
index 17cd8af..bbf4dc9 100644
--- a/src/lib/components/post.svelte
+++ b/src/lib/components/post.svelte
@@ -16,23 +16,6 @@
   }
 </script>
 
-<style>
-  .post {
-    width: 100%;
-    border-top-style: solid;
-    border-color: gray;
-    border-top-width: 1px;
-    padding: 0.5em;
-  }
-  .post > .name {
-    margin-bottom: 0.5em;
-    font-weight: bold;
-  }
-  .post > .message {
-    margin-left: 1em;
-  }
-</style>
-
 <div class="post">
   <div class="name">{post.post.author.displayName}</div>
   <div class="message">
diff --git a/src/lib/components/post_form.svelte b/src/lib/components/post_form.svelte
index 5ee2018..8a22b07 100644
--- a/src/lib/components/post_form.svelte
+++ b/src/lib/components/post_form.svelte
@@ -2,45 +2,6 @@
   import { post } from "$lib/client";
 </script>
 
-<style>
-  form {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  textarea[name=text] {
-    width: 100%;
-    height: 100px;
-    font-size:17px;
-    margin: 0px 0px 20px 0px;
-    padding:17px 15px 17px 15px;
-    border-radius: 20px;
-  }
-
-  .to-right {
-    width: 100%;
-    display: flex;
-    justify-content: end;
-  }
-
-  input[type="submit" i]{
-    width: 10em;
-    border-color: #00acee;
-    background-color: #00acee;
-    border-radius: 20px;
-    padding:5px 15px 5px 15px;
-    color: #FFFFFF;
-  }
-
-  input[type="submit" i]:hover{
-    background-color: #0095d6;
-    border-color: #0095d6;
-  }
-</style>
-
 <form name="post" method="POST" on:submit|preventDefault={post}>
   <textarea name="text" />
   <div class="to-right">
diff --git a/src/lib/components/signin_form.svelte b/src/lib/components/signin_form.svelte
index 927c157..0dc5dda 100644
--- a/src/lib/components/signin_form.svelte
+++ b/src/lib/components/signin_form.svelte
@@ -2,25 +2,6 @@
   import { signin } from "$lib/client";
 </script>
 
-<style>
-  form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    row-gap: 0.5em;
-  }
-  form > input, label {
-    width: 30em;
-  }
-  form > input[type="submit" i]{
-    border-color: #00acee;
-    background-color: #00acee;
-    border-radius: 20px;
-    padding:5px 15px 5px 15px;
-    color: #FFFFFF;
-  }
-</style>
-
 <form name="signin" method="POST" on:submit|preventDefault={signin}>
   <label for="signin-identifier">Email Address</label>
   <input id="signin-identifier" name="identifier" type="email" />
diff --git a/src/lib/components/timeline.svelte b/src/lib/components/timeline.svelte
index ca3e361..099d0e2 100644
--- a/src/lib/components/timeline.svelte
+++ b/src/lib/components/timeline.svelte
@@ -4,31 +4,6 @@
   import Post from "$lib/components/post.svelte";
 </script>
 
-<style>
-  .refresh-button {
-    width: 8em;
-    border-color: #6A5ACD;
-    background-color: #6A5ACD;
-    border-radius: 20px;
-    padding:5px 15px 5px 15px;
-    color: #FFFFFF;
-  }
-
-  .to-right {
-    width: 100%;
-    display: flex;
-    justify-content: end;
-  }
-
-  .timeline {
-    margin-top: 1.5em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    row-gap: 0.5em;
-  }
-</style>
-
 <div class="to-right">
   <button class="refresh-button" on:click={refresh}>Refresh</button>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 034491f..f0688e2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,19 +6,6 @@
   import Timeline from "$lib/components/timeline.svelte";
 </script>
 
-<style>
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .container > .center {
-    flex: 700px;
-  }
-  .container > .left, .right {
-    flex: 0px;
-  }
-</style>
-
 <div class="container">
   <div class="left"></div>
   <div class="center">
diff --git a/static/css/style.css b/static/css/style.css
index e69de29..6e0427d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -0,0 +1,106 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container > .center {
+  flex: 700px;
+}
+
+.container > .left, .right {
+  flex: 0px;
+}
+
+.to-right {
+  width: 100%;
+  display: flex;
+  justify-content: end;
+}
+
+/* Sign-in form */
+form[name=signin] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 0.5em;
+}
+form[name=signin] > input, label {
+  width: 30em;
+}
+
+form[name=signin] > input[type="submit" i] {
+  border-color: #00acee;
+  background-color: #00acee;
+  border-radius: 20px;
+  padding:5px 15px 5px 15px;
+  color: #FFFFFF;
+}
+
+/* post message form */
+form[name=post] {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Post Button Design */
+form[name=post] input[type="submit" i]{
+width: 10em;
+border-color: #00acee;
+background-color: #00acee;
+border-radius: 20px;
+padding:5px 15px 5px 15px;
+color: #FFFFFF;
+}
+
+form[name=post] input[type="submit" i]:hover{
+background-color: #0095d6;
+border-color: #0095d6;
+}
+
+/* Textarea Design */
+form[name=post] > textarea{
+width: 100%;
+height: 100px;
+font-size:17px;
+margin: 0px 0px 20px 0px;
+padding:17px 15px 17px 15px;
+border-radius: 20px;
+}
+
+/* Timeline messages */
+.timeline {
+  margin-top: 1.5em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 0.5em;
+}
+
+/* Refresh Button Design */
+.refresh-button {
+  width: 8em;
+  border-color: #6A5ACD;
+  background-color: #6A5ACD;
+  border-radius: 20px;
+  padding:5px 15px 5px 15px;
+  color: #FFFFFF;
+}
+
+.post {
+  width: 100%;
+  border-top-style: solid;
+  border-color: gray;
+  border-top-width: 1px;
+  padding: 0.5em;
+}
+
+.post > .name {
+  margin-bottom: 0.5em;
+  font-weight: bold;
+}
+.post > .message {
+  margin-left: 1em;
+}