diff --git a/app/static/css/main.css b/app/static/css/main.css
index 728093b..78b7601 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -23,6 +23,10 @@ h3.header {
   margin-top: 0 !important;
 }
 
+.mb-1 {
+    margin-bottom: 1rem;
+}
+
 .position-relative {
   position: relative;
 }
@@ -114,6 +118,21 @@ h3.header {
   display: flex;
 }
 
+.btn-switch-type {
+    background-color: #fff;
+    color: #42A5F5;
+}
+
+.btn-switch-type:hover {
+    background-color: #eee;
+    color: #42A5F5;
+}
+
+.btn-switch-type.active {
+    background-color: #42A5F5;
+    color: #fff;
+}
+
 .btn-action {
   display: flex;
   align-items: center;
diff --git a/app/templates/index.html b/app/templates/index.html
index e2a6f8c..d3f1577 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -105,7 +105,10 @@
 			<div class="container">
 				<div class="row">
 					<h3 class="header center">Translation API</h3>
-
+                    <div class="col s12 mb-1">
+                        <a class="btn btn-switch-type active"><i class="material-icons left">title</i>Translate text</a>
+                        <a class="btn btn-switch-type"><i class="material-icons left">description</i>Translate files</a>
+                    </div>
 					<form class="col s12">
 						<div class="row mb-0">
 							<div class="col s6 language-select">