diff --git a/create_app.py b/create_app.py
index 83e947c..72a327a 100644
--- a/create_app.py
+++ b/create_app.py
@@ -24,16 +24,19 @@ def create(tiny_index: TinyIndex):
         formatted_results = []
         for result in results:
             pattern = get_query_regex(terms)
-            title_and_extract = f"{result.title} - {result.extract}"
-            matches = re.finditer(pattern, title_and_extract, re.IGNORECASE)
-            all_spans = [0] + sum((list(m.span()) for m in matches), []) + [len(title_and_extract)]
-            formatted_result = []
-            for i in range(len(all_spans) - 1):
-                is_bold = i % 2 == 1
-                start = all_spans[i]
-                end = all_spans[i + 1]
-                formatted_result.append({'value': title_and_extract[start:end], 'is_bold': is_bold})
-            formatted_results.append({'title': formatted_result, 'url': result.url})
+            formatted_result = {}
+            for content_type, content in [('title', result.title), ('extract', result.extract)]:
+                matches = re.finditer(pattern, content, re.IGNORECASE)
+                all_spans = [0] + sum((list(m.span()) for m in matches), []) + [len(content)]
+                content_result = []
+                for i in range(len(all_spans) - 1):
+                    is_bold = i % 2 == 1
+                    start = all_spans[i]
+                    end = all_spans[i + 1]
+                    content_result.append({'value': content[start:end], 'is_bold': is_bold})
+                formatted_result[content_type] = content_result
+            formatted_result['url'] = result.url
+            formatted_results.append(formatted_result)
 
         logger.info("Return results: %r", formatted_results)
         return formatted_results
diff --git a/static/index.css b/static/index.css
index 3afa4cb..62b9abd 100644
--- a/static/index.css
+++ b/static/index.css
@@ -1,5 +1,9 @@
 p {
     font-size: 30px;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 #container {
@@ -27,8 +31,16 @@ p {
 
 a {
     text-decoration: none;
+    color: #555555;
 }
 
 span .term {
     font-weight: bold;
 }
+
+.title {
+    color: black;
+}
+
+.extract {
+}
diff --git a/static/index.js b/static/index.js
index 946f5a9..4d78247 100644
--- a/static/index.js
+++ b/static/index.js
@@ -16,7 +16,7 @@ window.onload = (event) => {
             response.json().then(content => {
                 console.log(content);
                 content.forEach(element => {
-                    addResult(element.title, element.url);
+                    addResult(element.title, element.extract, element.url);
                 })
             });
         });
@@ -30,12 +30,20 @@ function clearResults() {
 }
 
 
-function addResult(title, url) {
+function addResult(title, extract, url) {
    const par = document.createElement("p");
 
    const link = document.createElement("a");
-   const linkText = createBoldedSpan(title);
-   link.appendChild(linkText);
+   const titleText = createBoldedSpan(title);
+   titleText.classList.add('title');
+   const extractText = createBoldedSpan(extract);
+   extractText.classList.add('extract');
+   link.appendChild(titleText);
+
+   separator = document.createTextNode(' - ')
+   link.appendChild(separator);
+
+   link.appendChild(extractText);
    link.href = url;
 
    par.appendChild(link);