diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..3177c3a
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "jsdocParser": true
+}
diff --git a/src/App.svelte b/src/App.svelte
index fe78976..82e8b86 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,13 +5,13 @@
   import Communication from "./lib/Communication.svelte";
   import Cli from './lib/Cli.svelte';
   import '@fortawesome/fontawesome-free/css/all.css';
-  import Search from './lib/Search.svelte';
+  import Search from './lib/Search/Search.svelte';
   import ThemeSwitcher from './lib/ThemeSwitcher.svelte';
   import { theme }from './lib/stores';
   import configStore from './lib/ThemeSwitcher.svelte';
-  
 
-  
+
+
 
   const views = [
     {
@@ -26,7 +26,7 @@
       label: "Messages",
       component: Communication,
     },
-    
+
 ];
 
 let selected = views[0];
@@ -34,7 +34,7 @@ let responses = writable([]);
 function select(view) {
     selected = view;
   }
- 
+
 
 
 function onMessage(value) {
@@ -54,11 +54,11 @@ function clear() {
 <svelte:head>
     <meta name="color-scheme" content={$theme == 'spacelab' ? 'lumen darkly' :
     $theme} /> <link rel="stylesheet" href={`/src/assets/bulmaswatch/${$theme}/bulmaswatch.min.css`} />
-    
+
 </svelte:head>
 
 <main>
-  
+
 
 
   <ThemeSwitcher />
@@ -69,7 +69,7 @@ function clear() {
     {#if Array.isArray(configStore)}
       {#each configStore as item}
     <li>{item.name} {item.theme}</li>
-      
+
       {/each}
     {/if}
   </ul>
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 0000000..cac953c
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,3 @@
+export const CONFIG = {
+  ServerURL: 'http://127.0.0.1:8000',
+};
diff --git a/src/lib/Search.svelte b/src/lib/Search.svelte
deleted file mode 100644
index 161dcdf..0000000
--- a/src/lib/Search.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
-    import { Tag, Taglist, Field, Input} from 'svelma';
-    import { invoke } from '@tauri-apps/api/tauri';
-    import logo from '/src/assets/terraphim_gray.png';
-    import { fade } from 'svelte/transition'
-    import { role,is_tauri, input } from './stores';
-    let result: string = '';
-  
-
-    
-    function handleClick() {
-      if($is_tauri){
-        invoke("search", {
-        needle: input,
-        role: $role,
-      })
-    }else{
-      console.log(input);
-      fetch('http://127.0.0.1:8000/search',
-      {
-        method: 'POST',
-        headers: {
-          'accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          "search":$input,
-          "skip": 0,
-          "limit": 10
-        })
-      }
-      ).then(response => response.json())
-          .then(data => {
-              console.log(data);
-              result=data;
-          }).catch((e) => console.error(e));
-
-    }
-  }
-    
-//  (res) => {
-  // configStore=(JSON.parse(res));
-  //                   role.set(configStore[0].name); 
-  //                 }
-                    
-</script>
-  
-
-  
-<Field>
-    <Input type="search" bind:value={$input} placeholder="Search" icon="search" expanded autofocus on:click={handleClick} on:submit={handleClick} on:keyup={e=>e.key==='Enter' && handleClick()}/>
-</Field>
-  {#if result.length !== 0}
-  
-    
-    {#each Object.values(result) as result_item}
-    <div class="box">
-    <article class="media">
-      <div class="media-content">
-      <div class="content">
-        <div class="level-right">
-        <Taglist>
-          <Tag rounded>{result_item.pk}</Tag>
-          <Tag >Tag1</Tag>
-          <Tag type='is-info'>Tag2</Tag>
-        </Taglist>
-      </div>
-        <p transition:fade>
-              <strong>{result_item.title}</strong>
-              <br />
-
-              <small>Description</small>
-              <small />
-              <br /> 
-        </p>
-      </div>
-            <div class="level-right">      
-              <nav class="level is-mobile" transition:fade>
-                <div class="level-right">
-                  <a href="{result_item.url}" target="_blank" class="level-item" aria-label="URL">
-                    <span class="icon is-medium">
-                      <i class="fas fa-link"></i>
-                  </span>
-                </a>
-                  
-
-                  <a href class="level-item" aria-label="download/save">
-                      <span class="icon is-medium">
-                      <i class="fas fa-download" aria-hidden="true" />
-                    </span>
-                  </a>
-                  <a href class="level-item" aria-label="like">
-                    <span class="icon is-medium">
-                      <i class="fas fa-plus" aria-hidden="true" />
-                    </span>
-                  </a>
-                  <a href class="level-item" aria-label="like">
-                    <span class="icon is-medium">
-                      <i class="fas fa-bookmark" aria-hidden="true" />
-                    </span>
-                  </a>
-                </div>
-              </nav>
-            </div>
-      </div>
-   
-    </article>
-  </div>
-    {/each}
-
-{:else}
-<section class="section">
-  <div class="content has-text-grey has-text-centered">
-    <img src={logo} alt="Terraphim Logo"/>
-  </div>
-  <div class="content has-text-grey has-text-centered">
-    <p>
-      I am Terraphim, your personal assistant.
-    <p>
-    </div>
-</section>
-{/if}
-<style>
-img {
-  width: 16rem;
-}
-</style>
\ No newline at end of file
diff --git a/src/lib/Search/ArticleModal.svelte b/src/lib/Search/ArticleModal.svelte
new file mode 100644
index 0000000..6f91255
--- /dev/null
+++ b/src/lib/Search/ArticleModal.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Modal } from 'svelma';
+
+  import type { SearchResult } from './SearchResult';
+
+  export let active: boolean = false;
+  export let item: SearchResult;
+</script>
+
+<Modal bind:active>
+  <div class="box wrapper">
+    <article class="card-content content">
+      <h2>{item.title}</h2>
+      {@html item.body}
+    </article>
+  </div>
+</Modal>
+
+<style lang="scss">
+  h2 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 2rem;
+  }
+  .wrapper {
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+  }
+
+  /* Bulma hard-codes a modals width to 640px with no way to change it so we have to override it */
+  :global(.modal-content) {
+    width: min(100%, 95ch) !important;
+  }
+</style>
diff --git a/src/lib/Search/ResultItem.svelte b/src/lib/Search/ResultItem.svelte
new file mode 100644
index 0000000..ecc38dc
--- /dev/null
+++ b/src/lib/Search/ResultItem.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { Tag, Taglist } from 'svelma';
+  import { fade } from 'svelte/transition';
+  import ArticleModal from './ArticleModal.svelte';
+  import type { SearchResult } from './SearchResult';
+
+  export let item: SearchResult;
+  let showModal = false;
+
+  const onTitleClick = () => {
+    showModal = true;
+  };
+</script>
+
+<div class="box">
+  <article class="media">
+    <div class="media-content">
+      <div class="content">
+        <div class="level-right">
+          <Taglist>
+            <Tag rounded>{item.pk}</Tag>
+            <Tag>Tag1</Tag>
+            <Tag type="is-info">Tag2</Tag>
+          </Taglist>
+        </div>
+        <div transition:fade>
+          <button on:click={onTitleClick}>
+            <h2 class="title">
+              {item.title}
+            </h2>
+          </button>
+          <small>Description</small>
+          <small />
+          <br />
+        </div>
+      </div>
+      <div class="level-right">
+        <nav class="level is-mobile" transition:fade>
+          <div class="level-right">
+            <a
+              href={item.url}
+              target="_blank"
+              class="level-item"
+              aria-label="URL"
+            >
+              <span class="icon is-medium">
+                <i class="fas fa-link" />
+              </span>
+            </a>
+            <a href="#" class="level-item" aria-label="download/save">
+              <span class="icon is-medium">
+                <i class="fas fa-download" aria-hidden="true" />
+              </span>
+            </a>
+            <a href="#" class="level-item" aria-label="like">
+              <span class="icon is-medium">
+                <i class="fas fa-plus" aria-hidden="true" />
+              </span>
+            </a>
+            <a href="#" class="level-item" aria-label="like">
+              <span class="icon is-medium">
+                <i class="fas fa-bookmark" aria-hidden="true" />
+              </span>
+            </a>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </article>
+</div>
+<ArticleModal bind:active={showModal} {item} />
+
+<style lang="scss">
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+    display: block;
+  }
+  .title {
+    font-size: 1.3em;
+    margin-bottom: 0px;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+</style>
diff --git a/src/lib/Search/Search.svelte b/src/lib/Search/Search.svelte
new file mode 100644
index 0000000..d4669fe
--- /dev/null
+++ b/src/lib/Search/Search.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { Field, Input } from 'svelma';
+  import { invoke } from '@tauri-apps/api/tauri';
+  import logo from '/src/assets/terraphim_gray.png';
+  import { role, is_tauri, input } from '../stores';
+  import type { SearchResult } from './SearchResult';
+  import ResultItem from './ResultItem.svelte';
+  import { CONFIG } from '../../config';
+
+  let result: SearchResult[] = [];
+
+  function handleClick() {
+    if ($is_tauri) {
+      invoke('search', {
+        needle: input,
+        role: $role,
+      });
+    } else {
+      console.log(input);
+      fetch(`${CONFIG.ServerURL}/search`, {
+        method: 'POST',
+        headers: {
+          accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          search: $input,
+          skip: 0,
+          limit: 10,
+        }),
+      })
+        .then(response => response.json())
+        .then(data => {
+          console.log(data);
+          result = data;
+        })
+        .catch(e => console.error(e));
+    }
+  }
+
+  //  (res) => {
+  // configStore=(JSON.parse(res));
+  //                   role.set(configStore[0].name);
+  //                 }
+</script>
+
+<Field>
+  <Input
+    type="search"
+    bind:value={$input}
+    placeholder="Search"
+    icon="search"
+    expanded
+    autofocus
+    on:click={handleClick}
+    on:submit={handleClick}
+    on:keyup={e => e.key === 'Enter' && handleClick()}
+  />
+</Field>
+
+{#if result.length !== 0}
+  {#each result as result_item}
+    <ResultItem item={result_item} />
+  {/each}
+{:else}
+  <section class="section">
+    <div class="content has-text-grey has-text-centered">
+      <img src={logo} alt="Terraphim Logo" />
+    </div>
+    <div class="content has-text-grey has-text-centered">
+      <p>I am Terraphim, your personal assistant.</p>
+      <p />
+    </div>
+  </section>
+{/if}
+
+<style>
+  img {
+    width: 16rem;
+  }
+</style>
diff --git a/src/lib/Search/SearchResult.ts b/src/lib/Search/SearchResult.ts
new file mode 100644
index 0000000..59f777f
--- /dev/null
+++ b/src/lib/Search/SearchResult.ts
@@ -0,0 +1,6 @@
+export interface SearchResult {
+  pk: string;
+  title: string;
+  url: string;
+  body: string;
+}
diff --git a/src/lib/ThemeSwitcher.svelte b/src/lib/ThemeSwitcher.svelte
index 0e9d491..ba69546 100644
--- a/src/lib/ThemeSwitcher.svelte
+++ b/src/lib/ThemeSwitcher.svelte
@@ -1,62 +1,60 @@
 <script lang="ts">
-  import { invoke } from "@tauri-apps/api/tauri";
-  import { theme,role, is_tauri} from './stores';
-  let configStore=[]; 
-  export function loadConfig(){
-          
-      try {
-          if (window.__TAURI__) {
-              is_tauri.set(true);
-              invoke("get_config").then((res) => {
-              configStore=(JSON.parse(res));
-              role.set(Object.keys(configStore)[0]); 
-          
-              }).catch((e) => console.error(e));
-          } else {
-          fetch('http://127.0.0.1:8000/config')
+  import { invoke } from '@tauri-apps/api/tauri';
+  import { theme, role, is_tauri } from './stores';
+  import { Field, Select } from 'svelma';
+  import { CONFIG } from '../config';
+
+  let configStore = [];
+  export function loadConfig() {
+    try {
+      if (window.__TAURI__) {
+        is_tauri.set(true);
+        invoke('get_config')
+          .then(res => {
+            configStore = JSON.parse(res);
+            role.set(Object.keys(configStore)[0]);
+          })
+          .catch(e => console.error(e));
+      } else {
+        fetch(`${CONFIG.ServerURL}/config`)
           .then(response => response.json())
           .then(data => {
-              configStore=data.roles;
-              role.set(Object.keys(configStore)[0]);
-              console.log("Role", $role);
-              console.log("Value", configStore[$role]["theme"]);
-              theme.set(configStore[$role]["theme"]);
-              console.log(Object.keys(configStore));
-              console.log(configStore);
-              console.log(typeof(configStore));
-          }).catch((e) => console.error(e));
-      }
-  
-      } catch (error) {
-          console.error(error);
+            configStore = data.roles;
+            role.set(Object.keys(configStore)[0]);
+            console.log('Role', $role);
+            console.log('Value', configStore[$role]['theme']);
+            theme.set(configStore[$role]['theme']);
+            console.log(Object.keys(configStore));
+            console.log(configStore);
+            console.log(typeof configStore);
+          })
+          .catch(e => console.error(e));
       }
-      return configStore;
+    } catch (error) {
+      console.error(error);
+    }
+    return configStore;
   }
 
+  configStore = loadConfig();
 
-    import { Field,Select } from 'svelma';
-    import { Button } from 'svelma';
-    
-
-configStore=loadConfig();
-
-console.log("test ",configStore.length);
-let themes ="";
-//  FIXME: DO the for loop for theme
-// $: if (role === configStore[0].name) {
-//     themes = configStore[0].theme;
-// }
-$: if (themes) {
+  console.log('test ', configStore.length);
+  let themes = '';
+  //  FIXME: DO the for loop for theme
+  // $: if (role === configStore[0].name) {
+  //     themes = configStore[0].theme;
+  // }
+  $: if (themes) {
     role.set(themes);
-    theme.set(configStore[themes].theme)
+    theme.set(configStore[themes].theme);
     console.log(configStore[themes].theme);
-}
+  }
 </script>
+
 <Field grouped position="is-right">
-    <Select bind:selected={themes}>
-      {#each Object.values(configStore) as role_value}
+  <Select bind:selected={themes}>
+    {#each Object.values(configStore) as role_value}
       <option value={role_value.name}>{role_value.name}</option>
-      {/each}
-</Select>
+    {/each}
+  </Select>
 </Field>
-
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 0caffc0..351e5dd 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -1,8 +1,8 @@
-import { writable } from 'svelte/store'
+import { writable } from 'svelte/store';
 import { invoke } from '@tauri-apps/api/tauri';
 
-const theme = writable('spacelab')
+const theme = writable('spacelab');
 const role = writable('selected');
-const is_tauri=writable(false);
-let input = writable('test');
-export { theme, role , is_tauri, input};
\ No newline at end of file
+const is_tauri = writable(false);
+let input = writable('');
+export { theme, role, is_tauri, input };