diff --git a/snippet_share_project/snip_app/static/css/base.css b/snippet_share_project/snip_app/static/css/base.css
new file mode 100644
index 0000000..c8e8aa8
--- /dev/null
+++ b/snippet_share_project/snip_app/static/css/base.css
@@ -0,0 +1,10 @@
+.searchform input{
+  margin: 10px !important;
+  padding: 10px 10px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+}
+
+.asteriskField {
+  display: none;
+}
\ No newline at end of file
diff --git a/snippet_share_project/snip_app/static/css/index.css b/snippet_share_project/snip_app/static/css/index.css
new file mode 100644
index 0000000..01f17a1
--- /dev/null
+++ b/snippet_share_project/snip_app/static/css/index.css
@@ -0,0 +1,31 @@
+.snipform{
+  border-radius: 10px;
+  background-color: #f2f2f2;
+  padding: 40px;
+}
+
+
+.snipform input{
+  margin: 15px !important;
+  padding: 10px 5px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+}
+
+.snipform textarea {
+  width: 100%;
+  height: 150px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: #ffffff;
+  resize:vertical;
+  overflow:auto;
+}
+
+.snipform select {
+  padding: 16px 20px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/snippet_share_project/snip_app/templates/base.html b/snippet_share_project/snip_app/templates/base.html
index f3a748e..3ac28d2 100644
--- a/snippet_share_project/snip_app/templates/base.html
+++ b/snippet_share_project/snip_app/templates/base.html
@@ -12,6 +12,8 @@
     type="image/x-icon">
   <link href="{% static 'css/prism.css' %}" rel="stylesheet" />
   <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
+  <link rel="stylesheet" href="{% static 'css/base.css' %}">
+  <link rel="stylesheet" href="{% static 'css/index.css' %}">
   <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
 </head>
 
@@ -95,19 +97,7 @@ <h1 class="is-size-3"> <strong>SnipBoard</strong></h1>
               <a>Private</a>
             </p> -->
             <div class="panel-block">
-<style>
-    .searchform input{
-  margin: 10px !important;
-  padding: 10px 10px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  }
-
-  .asteriskField {
-    display: none;
-}
-
-</style>
+
               <form method="POST" class="uniForm searchform is-left" style="font-weight: 700 !important;">
                 {% csrf_token %}
                 {{ searchform|crispy }}
@@ -132,4 +122,4 @@ <h1 class="is-size-3"> <strong>SnipBoard</strong></h1>
   <script src="{% static 'js/prism.js' %}"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/snippet_share_project/snip_app/templates/index.html b/snippet_share_project/snip_app/templates/index.html
index 0e1ed27..d108b2a 100644
--- a/snippet_share_project/snip_app/templates/index.html
+++ b/snippet_share_project/snip_app/templates/index.html
@@ -3,39 +3,6 @@
 {% block content %}
 {% load crispy_forms_tags %}
 
-<style>
-  .snipform{
-  border-radius: 10px;
-  background-color: #f2f2f2;
-  padding: 40px;
-  }
-  
-
-  .snipform input{
-  margin: 15px !important;
-  padding: 10px 5px;
-  border: 2px solid #ccc;
-  border-radius: 4px;
-  }
-
-  .snipform textarea {
-  width: 100%;
-  height: 150px;
-  padding: 12px 20px;
-  box-sizing: border-box;
-  border: 2px solid #ccc;
-  border-radius: 4px;
-  background-color: #ffffff;
-  resize:vertical;
-  overflow:auto;  
-}
-
-.snipform select {
-  padding: 16px 20px;
-  border: 2px solid #ccc;
-  border-radius: 4px;
-}
-</style>
 <article>
   <div class="main">
     <form method="POST" class="uniForm snipform" style="font-weight: 700 !important;">