diff --git a/src/components/app.js b/src/components/app.js
index e5a35a7..e858966 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -7,6 +7,7 @@ import RepositoryList from './repository-list';
 import Footer from './footer';
 import Title from './title';
 import Error from './error';
+import Loader from './loader';
 
 export default class App extends Component {
 
@@ -30,6 +31,7 @@ export default class App extends Component {
 
   searchGitHub = () => {
     this.setState({
+      'items': [],
       'progress': 'start'
     });
     axios.get(this.buildUrl())
@@ -114,6 +116,9 @@ export default class App extends Component {
           items={state.items}
           loadMore={this.loadMore}
         />
+        {
+          state.progress === 'start' && <Loader />
+        }
         <Footer />
       </div>
     );
diff --git a/src/components/loader.js b/src/components/loader.js
new file mode 100644
index 0000000..62ddaa4
--- /dev/null
+++ b/src/components/loader.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Loader = () => (
+  <div className="loader" />
+);
+
+export default Loader;
\ No newline at end of file
diff --git a/src/components/search-bar.js b/src/components/search-bar.js
index 061fa19..17da865 100644
--- a/src/components/search-bar.js
+++ b/src/components/search-bar.js
@@ -27,11 +27,15 @@ export default class SearchBar extends Component {
   }
 
   renderLanguageDropdown(languages) {
-    return <div className="custom-selectbox"><select className="language-dropdown" onChange={event => this.onLanguageChange(event.target.value)}>
-      {languages.map(language => {
-        return <option value={language} className="language-dropdown-option"><span >{language}</span></option>;
-      })}
-    </select></div>
+    return (
+      <div className="custom-selectbox">
+        <select className="minimal" onChange={event => this.onLanguageChange(event.target.value)}>
+          {languages.map(language =>
+            <option value={language} className="language-dropdown-option">{language}</option>
+          )}
+        </select>
+      </div>
+    )
   }
 
   render({query, order, languages}) {
diff --git a/src/style/index.css b/src/style/index.css
index f93bad8..e2e55d7 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -375,24 +375,6 @@ body {
   transition: all 375ms ease-in-out;
 }
 
-.custom-selectbox{
-    position: relative;
-    display: inline-block;
-}
-
-.custom-selectbox:after{
-    content: " ";
-    height: 0;
-    width: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 6px solid #444;
-    position: absolute;
-    right: 2.5px;
-    top: 47.2px;
-    transition: all 0.3s linear;
-}
-
 .error {
 	color: red;
 	font-size: 20px;
@@ -402,3 +384,50 @@ body {
 .footer .contributor:hover {
 	opacity: 0.7;
 }
+
+.loader {
+	display: inline-block;
+	border: 8px solid #f3f3f3;
+	border-top: 8px solid #14b866;
+	border-radius: 50%;
+	width: 60px;
+	height: 60px;
+	animation: spin 2s linear infinite;
+}
+#app .loader {
+	margin-top: 24px;
+}
+
+.custom-selectbox {
+	margin: 24px 0;
+}
+
+.minimal {
+	color: #3d3d3d;
+	background-color: #efefef;
+	border: thin solid #efefef;
+	border-radius: 4px;
+	display: inline-block;
+	font: inherit;
+	line-height: 1.5em;
+	padding: 0.5em 3.5em 0.5em 1em;
+	margin: 0;
+	box-sizing: border-box;
+	appearance: none;
+	font-weight: bold;
+
+	background-image: linear-gradient(45deg, transparent 50%, #3d3d3d 50%), linear-gradient(135deg, #3d3d3d 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
+	background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+	background-size: 5px 5px, 5px 6px, 1px 1.5em;
+	background-repeat: no-repeat;
+	outline: none;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}