diff --git a/src/index.html b/src/index.html
index abe507e10c..3c9c8f214a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,17 +16,30 @@
href="style.css"
/>
-
-
-
-
+
+
+
diff --git a/src/style.css b/src/style.css
index a63fa10d43..1d41cd3b56 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,85 @@
/* add styles here */
+@font-face {
+ font-family: Avenir;
+ src: url('fonts/Avenir-Book.ttf');
+ font-weight: 300;
+}
+
+@font-face {
+ font-family: Avenir;
+ src: url('fonts/Avenir-Heavy.ttf');
+ font-weight: bold;
+}
+
+:root {
+ --box-shadow: 0 3px 8px rgba(61, 78, 97, 0.2);
+ --text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+ --text-font: Avenir, sans-serif;
+ --big-image: 19px;
+ --small-image: 11px;
+ --text-color: #3d4e61;
+}
+
+.page {
+ margin: 20px 8px;
+}
+
+.search-bar-item {
+ box-sizing: border-box;
+ font-family: var(--text-font);
+ font-size: 16px;
+ color: var(--text-color);
+ background-color: #fff;
+ background-image: url('images/Search.svg');
+ background-repeat: no-repeat;
+ background-size: var(--big-image);
+ background-position: 25px 48%;
+ border: 1px solid #e1e7ed;
+ border-radius: 4px;
+ width: 100%;
+ height: 70px;
+ padding-left: 62px;
+ margin-bottom: 20px;
+ box-shadow: 0 1px 8px rgba(61, 78, 97, 0.1);
+ outline: none;
+}
+
+.search-bar-item::placeholder {
+ color: var(--text-color);
+ font-weight: normal;
+}
+
+.search-bar-item:hover {
+ box-shadow: var(--box-shadow);
+}
+
+.search-bar-item:focus {
+ background: url('images/Search.svg'),
+ linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
+ background-repeat: no-repeat, no-repeat;
+ background-position:
+ 25px 48%,
+ center;
+ background-size: var(--big-image), auto;
+ font-weight: bold;
+ border-radius: 3px;
+ box-shadow: var(--box-shadow);
+ text-shadow: var(--text-shadow);
+}
+
+.search-bar-item--small {
+ background-size: var(--small-image);
+ background-position: 12px 48%;
+ font-size: 14px;
+ font-weight: 400;
+ height: 42px;
+ padding-left: 33px;
+}
+
+.search-bar-item--small:focus {
+ text-shadow: none;
+ background-position:
+ 12px 48%,
+ center;
+ background-size: var(--small-image), auto;
+}