From 3bd09d50104c3f85068250f2bca190b79b2444ec Mon Sep 17 00:00:00 2001
From: polesye <s2pak.anton@gmail.com>
Date: Sat, 22 Nov 2014 22:00:31 +0200
Subject: [PATCH] TNL-731: Add possibility to search notes.

---
 cms/envs/test.py                              |   2 +-
 common/djangoapps/terrain/stubs/edxnotes.py   |  13 +-
 common/static/js/vendor/jquery.highlight.js   | 108 +++++
 common/templates/edxnotes_wrapper.html        |   2 +-
 common/test/acceptance/pages/lms/edxnotes.py  | 158 ++++++-
 .../acceptance/tests/lms/test_lms_edxnotes.py | 196 ++++++---
 lms/djangoapps/edxnotes/exceptions.py         |  10 +
 lms/djangoapps/edxnotes/helpers.py            | 138 ++++--
 lms/djangoapps/edxnotes/tests.py              | 414 +++++++++++++-----
 lms/djangoapps/edxnotes/urls.py               |  11 +
 lms/djangoapps/edxnotes/views.py              |  39 +-
 lms/envs/bok_choy.py                          |   2 +-
 lms/envs/common.py                            |   2 +-
 lms/static/js/edxnotes/collections/notes.js   |  18 +-
 lms/static/js/edxnotes/collections/tabs.js    |  12 +
 lms/static/js/edxnotes/models/note.js         |  46 +-
 lms/static/js/edxnotes/models/tab.js          |  33 ++
 lms/static/js/edxnotes/utils/logger.js        | 183 +++++---
 lms/static/js/edxnotes/views/note_item.js     |  28 --
 lms/static/js/edxnotes/views/notes.js         |  90 ----
 lms/static/js/edxnotes/views/notes_factory.js |  95 ++++
 lms/static/js/edxnotes/views/notes_page.js    |  66 ++-
 lms/static/js/edxnotes/views/page_factory.js  |  54 ++-
 .../js/edxnotes/views/recent_activity_view.js |  33 --
 lms/static/js/edxnotes/views/search_box.js    | 160 +++++++
 lms/static/js/edxnotes/views/shim.js          | 238 +++++-----
 lms/static/js/edxnotes/views/subview.js       |  33 ++
 lms/static/js/edxnotes/views/tab_item.js      |  62 +++
 lms/static/js/edxnotes/views/tab_view.js      | 122 ++++++
 .../js/edxnotes/views/tabs/recent_activity.js |  25 ++
 .../js/edxnotes/views/tabs/search_results.js  | 135 ++++++
 lms/static/js/edxnotes/views/tabs_list.js     |  41 ++
 lms/static/js/fixtures/edxnotes/edxnotes.html |  27 +-
 .../fixtures/edxnotes/edxnotes_wrapper.html   |   6 +
 .../js/spec/edxnotes/custom_matchers.js       |  28 ++
 .../js/spec/edxnotes/models/tab_spec.js       |  33 ++
 .../js/spec/edxnotes/notes_factory_spec.js    |  38 ++
 lms/static/js/spec/edxnotes/notes_spec.js     |  35 --
 lms/static/js/spec/edxnotes/shim_spec.js      | 200 ++++-----
 .../js/spec/edxnotes/utils/logger_spec.js     | 168 ++++---
 .../js/spec/edxnotes/views/notes_page_spec.js |  69 ++-
 .../js/spec/edxnotes/views/search_box_spec.js | 153 +++++++
 .../js/spec/edxnotes/views/tab_item_spec.js   |  41 ++
 .../js/spec/edxnotes/views/tab_view_spec.js   | 106 +++++
 .../views/tabs/recent_activity_spec.js        |  75 ++++
 .../views/tabs/search_results_spec.js         | 206 +++++++++
 .../js/spec/edxnotes/views/tabs_list_spec.js  |  50 +++
 lms/static/js/spec/main.js                    |  20 +-
 lms/static/js_test.yml                        |   1 +
 lms/static/require-config-lms.js              |  14 +-
 lms/static/sass/course/_edxnotes.scss         | 102 ++++-
 lms/templates/{ => edxnotes}/edxnotes.html    |  34 +-
 lms/templates/edxnotes/note-item.underscore   |  24 -
 .../edxnotes/recent-activity-item.underscore  |  28 ++
 lms/templates/edxnotes/tab-item.underscore    |   4 +
 lms/urls.py                                   |   2 +-
 56 files changed, 3084 insertions(+), 949 deletions(-)
 create mode 100644 common/static/js/vendor/jquery.highlight.js
 create mode 100644 lms/djangoapps/edxnotes/exceptions.py
 create mode 100644 lms/djangoapps/edxnotes/urls.py
 create mode 100644 lms/static/js/edxnotes/collections/tabs.js
 create mode 100644 lms/static/js/edxnotes/models/tab.js
 delete mode 100644 lms/static/js/edxnotes/views/note_item.js
 delete mode 100644 lms/static/js/edxnotes/views/notes.js
 create mode 100644 lms/static/js/edxnotes/views/notes_factory.js
 delete mode 100644 lms/static/js/edxnotes/views/recent_activity_view.js
 create mode 100644 lms/static/js/edxnotes/views/search_box.js
 create mode 100644 lms/static/js/edxnotes/views/subview.js
 create mode 100644 lms/static/js/edxnotes/views/tab_item.js
 create mode 100644 lms/static/js/edxnotes/views/tab_view.js
 create mode 100644 lms/static/js/edxnotes/views/tabs/recent_activity.js
 create mode 100644 lms/static/js/edxnotes/views/tabs/search_results.js
 create mode 100644 lms/static/js/edxnotes/views/tabs_list.js
 create mode 100644 lms/static/js/fixtures/edxnotes/edxnotes_wrapper.html
 create mode 100644 lms/static/js/spec/edxnotes/custom_matchers.js
 create mode 100644 lms/static/js/spec/edxnotes/models/tab_spec.js
 create mode 100644 lms/static/js/spec/edxnotes/notes_factory_spec.js
 delete mode 100644 lms/static/js/spec/edxnotes/notes_spec.js
 create mode 100644 lms/static/js/spec/edxnotes/views/search_box_spec.js
 create mode 100644 lms/static/js/spec/edxnotes/views/tab_item_spec.js
 create mode 100644 lms/static/js/spec/edxnotes/views/tab_view_spec.js
 create mode 100644 lms/static/js/spec/edxnotes/views/tabs/recent_activity_spec.js
 create mode 100644 lms/static/js/spec/edxnotes/views/tabs/search_results_spec.js
 create mode 100644 lms/static/js/spec/edxnotes/views/tabs_list_spec.js
 rename lms/templates/{ => edxnotes}/edxnotes.html (59%)
 delete mode 100644 lms/templates/edxnotes/note-item.underscore
 create mode 100644 lms/templates/edxnotes/recent-activity-item.underscore
 create mode 100644 lms/templates/edxnotes/tab-item.underscore

diff --git a/cms/envs/test.py b/cms/envs/test.py
index ab478f9c8ef8..1b20dbe757aa 100644
--- a/cms/envs/test.py
+++ b/cms/envs/test.py
@@ -227,5 +227,5 @@
 
 FEATURES['ENABLE_EDXNOTES'] = True
 EDXNOTES_INTERFACE = {
-    'url': 'http://localhost:8042/',
+    'url': 'http://localhost:8042/api/v1',
 }
diff --git a/common/djangoapps/terrain/stubs/edxnotes.py b/common/djangoapps/terrain/stubs/edxnotes.py
index 38b43ff45775..56664ca061d4 100644
--- a/common/djangoapps/terrain/stubs/edxnotes.py
+++ b/common/djangoapps/terrain/stubs/edxnotes.py
@@ -198,6 +198,7 @@ def _search(self):
         user = self.get_params.get("user", None)
         usage_id = self.get_params.get("usage_id", None)
         course_id = self.get_params.get("course_id", None)
+        text = self.get_params.get("text", None)
 
         if user is None:
             self.respond(400, "Bad Request")
@@ -209,6 +210,8 @@ def _search(self):
             results = self.server.filter_by_course_id(results, course_id)
         if usage_id is not None:
             results = self.server.filter_by_usage_id(results, usage_id)
+        if text:
+            results = self.server.search(results, text)
         self.respond(content={
             "total": len(results),
             "rows": results,
@@ -247,7 +250,9 @@ def get_notes(self):
         """
         Returns a list of all notes.
         """
-        return deepcopy(self.notes)
+        notes = deepcopy(self.notes)
+        notes.reverse()
+        return notes
 
     def add_notes(self, notes):
         """
@@ -318,3 +323,9 @@ def filter_by(self, data, field_name, value):
         Filters provided `data(list)` by the `field_name(str)` with `value`.
         """
         return [note for note in data if note.get(field_name) == value]
+
+    def search(self, data, query):
+        """
+        Search the `query(str)` text in the provided `data(list)`.
+        """
+        return [note for note in data if unicode(query).strip() in note.get("text")]
diff --git a/common/static/js/vendor/jquery.highlight.js b/common/static/js/vendor/jquery.highlight.js
new file mode 100644
index 000000000000..9dcf3c7af3ff
--- /dev/null
+++ b/common/static/js/vendor/jquery.highlight.js
@@ -0,0 +1,108 @@
+/*
+ * jQuery Highlight plugin
+ *
+ * Based on highlight v3 by Johann Burkard
+ * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
+ *
+ * Code a little bit refactored and cleaned (in my humble opinion).
+ * Most important changes:
+ *  - has an option to highlight only entire words (wordsOnly - false by default),
+ *  - has an option to be case sensitive (caseSensitive - false by default)
+ *  - highlight element tag and class names can be specified in options
+ *
+ * Usage:
+ *   // wrap every occurrance of text 'lorem' in content
+ *   // with <span class='highlight'> (default options)
+ *   $('#content').highlight('lorem');
+ *
+ *   // search for and highlight more terms at once
+ *   // so you can save some time on traversing DOM
+ *   $('#content').highlight(['lorem', 'ipsum']);
+ *   $('#content').highlight('lorem ipsum');
+ *
+ *   // search only for entire word 'lorem'
+ *   $('#content').highlight('lorem', { wordsOnly: true });
+ *
+ *   // don't ignore case during search of term 'lorem'
+ *   $('#content').highlight('lorem', { caseSensitive: true });
+ *
+ *   // wrap every occurrance of term 'ipsum' in content
+ *   // with <em class='important'>
+ *   $('#content').highlight('ipsum', { element: 'em', className: 'important' });
+ *
+ *   // remove default highlight
+ *   $('#content').unhighlight();
+ *
+ *   // remove custom highlight
+ *   $('#content').unhighlight({ element: 'em', className: 'important' });
+ *
+ *
+ * Copyright (c) 2009 Bartek Szopka
+ *
+ * Licensed under MIT license.
+ *
+ */
+
+jQuery.extend({
+    highlight: function (node, re, nodeName, className) {
+        if (node.nodeType === 3) {
+            var match = node.data.match(re);
+            if (match) {
+                var highlight = document.createElement(nodeName || 'span');
+                highlight.className = className || 'highlight';
+                var wordNode = node.splitText(match.index);
+                wordNode.splitText(match[0].length);
+                var wordClone = wordNode.cloneNode(true);
+                highlight.appendChild(wordClone);
+                wordNode.parentNode.replaceChild(highlight, wordNode);
+                return 1; //skip added node in parent
+            }
+        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
+                !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
+                !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
+            for (var i = 0; i < node.childNodes.length; i++) {
+                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
+            }
+        }
+        return 0;
+    }
+});
+
+jQuery.fn.unhighlight = function (options) {
+    var settings = { className: 'highlight', element: 'span' };
+    jQuery.extend(settings, options);
+
+    return this.find(settings.element + "." + settings.className).each(function () {
+        var parent = this.parentNode;
+        parent.replaceChild(this.firstChild, this);
+        parent.normalize();
+    }).end();
+};
+
+jQuery.fn.highlight = function (words, options) {
+    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
+    jQuery.extend(settings, options);
+    
+    if (words.constructor === String) {
+        words = [words];
+    }
+    words = jQuery.grep(words, function(word, i){
+      return word != '';
+    });
+    words = jQuery.map(words, function(word, i) {
+      return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+    });
+    if (words.length == 0) { return this; };
+
+    var flag = settings.caseSensitive ? "" : "i";
+    var pattern = "(" + words.join("|") + ")";
+    if (settings.wordsOnly) {
+        pattern = "\\b" + pattern + "\\b";
+    }
+    var re = new RegExp(pattern, flag);
+    
+    return this.each(function () {
+        jQuery.highlight(this, re, settings.element, settings.className);
+    });
+};
+
diff --git a/common/templates/edxnotes_wrapper.html b/common/templates/edxnotes_wrapper.html
index 52d5f4255eda..3030d31e8078 100644
--- a/common/templates/edxnotes_wrapper.html
+++ b/common/templates/edxnotes_wrapper.html
@@ -8,7 +8,7 @@
 </div>
 <script type="text/javascript">
     (function (require) {
-        require(['js/edxnotes/views/notes'], function (Notes) {
+        require(['js/edxnotes/views/notes_factory'], function (Notes) {
             var element = document.getElementById('edx-notes-wrapper-${uid}');
             Notes.factory(element, ${json.dumps(params)});
         });
diff --git a/common/test/acceptance/pages/lms/edxnotes.py b/common/test/acceptance/pages/lms/edxnotes.py
index 5e24e885e70a..fd4a57a0666c 100644
--- a/common/test/acceptance/pages/lms/edxnotes.py
+++ b/common/test/acceptance/pages/lms/edxnotes.py
@@ -1,4 +1,5 @@
-from bok_choy.page_object import PageObject
+from bok_choy.page_object import PageObject, PageLoadError, unguarded
+from bok_choy.promise import BrokenPromise
 from .course_page import CoursePage
 from ...tests.helpers import disable_animations
 from selenium.webdriver.common.action_chains import ActionChains
@@ -26,25 +27,159 @@ def _bounded_selector(self, selector):
         )
 
 
+class EdxNotesPageView(PageObject):
+    """
+    Base class for EdxNotes views: Recent Activity, Course Structure, Search Results.
+    """
+    url = None
+    BODY_SELECTOR = ".edx-notes-page-items-list"
+    TAB_SELECTOR = ".tab-item"
+    CHILD_SELECTOR = ".edx-notes-page-item"
+
+    @unguarded
+    def visit(self):
+        """
+        Open the page containing this page object in the browser.
+
+        Raises:
+            PageLoadError: The page did not load successfully.
+
+        Returns:
+            PageObject
+        """
+        self.q(css=self.TAB_SELECTOR).first.click()
+        try:
+            return self.wait_for_page()
+        except (BrokenPromise):
+            raise PageLoadError("Timed out waiting to load page '{!r}'".format(self))
+
+    def is_browser_on_page(self):
+        return all([
+            self.q(css="{}".format(self.BODY_SELECTOR)).present,
+            self.q(css="{}.is-active".format(self.TAB_SELECTOR)).present,
+            not self.q(css=".ui-loading").visible,
+        ])
+
+    @property
+    def is_closable(self):
+        """
+        Indicates if tab is closable or not.
+        """
+        return self.q(css="{} .btn-close".format(self.TAB_SELECTOR)).present
+
+    def close(self):
+        """
+        Closes the tab.
+        """
+        self.q(css="{} .btn-close".format(self.TAB_SELECTOR)).first.click()
+
+    @property
+    def children(self):
+        """
+        Returns all notes on the page.
+        """
+        children = self.q(css=self.CHILD_SELECTOR)
+        return [EdxNotesPageItem(self.browser, child.get_attribute("id")) for child in children]
+
+
+class RecentActivityView(EdxNotesPageView):
+    """
+    Helper class for Recent Activity view.
+    """
+    BODY_SELECTOR = "#edx-notes-page-recent-activity"
+    TAB_SELECTOR = ".tab-item.tab-recent-activity"
+
+
+class SearchResultsView(EdxNotesPageView):
+    """
+    Helper class for Search Results view.
+    """
+    BODY_SELECTOR = "#edx-notes-page-search-results"
+    TAB_SELECTOR = ".tab-item.tab-search-results"
+
+
 class EdxNotesPage(CoursePage):
     """
     EdxNotes page.
     """
     url_path = "edxnotes"
+    MAPPING = {
+        "recent": RecentActivityView,
+        "search": SearchResultsView,
+    }
 
     def __init__(self, *args, **kwargs):
         super(EdxNotesPage, self).__init__(*args, **kwargs)
-        self.current_view = EdxNotesPageView(self.browser, "edx-notes-page-recent-activity")
+        self.current_view = self.MAPPING["recent"](self.browser)
 
     def is_browser_on_page(self):
         return self.q(css=".edx-notes-page-wrapper").present
 
+    def switch_to_tab(self, tab_name):
+        """
+        Switches to the appropriate tab `tab_name(str)`.
+        """
+        self.current_view = self.MAPPING[tab_name](self.browser)
+        self.current_view.visit()
+
+    def close_tab(self, tab_name):
+        """
+        Closes the tab `tab_name(str)`.
+        """
+        self.current_view.close()
+        self.current_view = self.MAPPING["recent"](self.browser)
+
+    def search(self, text):
+        """
+        Runs search with `text(str)` query.
+        """
+        self.q(css=".search-box #search-field").first.fill(text)
+        self.q(css='.search-box button').first.click()
+        # Frontend will automatically switch to Search results tab when search
+        # is running, so the view also needs to be changed.
+        self.current_view = self.MAPPING["search"](self.browser)
+
+    @property
+    def tabs(self):
+        """
+        Returns all tabs on the page.
+        """
+        tabs = self.q(css=".tabs .tab-item-name")
+        if tabs:
+            return tabs.text
+        else:
+            return None
+
+    @property
+    def is_error_visible(self):
+        """
+        Indicates whether error message is visible or not.
+        """
+        return self.q(css=".inline-error").visible
+
+    @property
+    def error_text(self):
+        """
+        Returns error message.
+        """
+        element = self.q(css=".inline-error").first
+        if element and self.is_error_visible:
+            return element.text[0]
+        else:
+            return None
+
     @property
     def children(self):
+        """
+        Returns all notes on the page.
+        """
         return self.current_view.children
 
     @property
     def no_content_text(self):
+        """
+        Returns no content message.
+        """
         element = self.q(css=".no-content").first
         if element:
             return element.text[0]
@@ -52,25 +187,6 @@ def no_content_text(self):
             return None
 
 
-class EdxNotesPageView(NoteChild):
-    """
-    Base class for EdxNotes views: Recent Activity, Course Structure.
-    """
-    BODY_SELECTOR = ".edx-notes-page-items-list"
-    CHILD_SELECTOR = ".edx-notes-page-item"
-
-    def is_browser_on_page(self):
-        return all([
-            self.q(css="{}#{}".format(self.BODY_SELECTOR, self.item_id)).present,
-            not self.q(css=".ui-loading").visible,
-        ])
-
-    @property
-    def children(self):
-        children = self.q(css=self._bounded_selector(self.CHILD_SELECTOR))
-        return [EdxNotesPageItem(self.browser, child.get_attribute("id")) for child in children]
-
-
 class EdxNotesPageItem(NoteChild):
     """
     Helper class that works with note items on Note page of the course.
diff --git a/common/test/acceptance/tests/lms/test_lms_edxnotes.py b/common/test/acceptance/tests/lms/test_lms_edxnotes.py
index e720a014d51f..0b759a32bd4c 100644
--- a/common/test/acceptance/tests/lms/test_lms_edxnotes.py
+++ b/common/test/acceptance/tests/lms/test_lms_edxnotes.py
@@ -46,7 +46,7 @@ def setUp(self):
                             "Test HTML 1",
                             data="""
                                 <p><span class="{0}">Annotate</span> this text!</p>
-                                <p>Annotate this <span class="{0}">text</span></p>
+                                <p>Annotate this text</p>
                             """.format(self.selector)
                         ),
                         XBlockFixtureDesc(
@@ -116,13 +116,10 @@ def assert_notes_are_removed(self, components):
         for component in components:
             self.assertEqual(0, len(component.notes))
 
-    def assert_text_in_notes(self, components, offset=0):
-        index = offset
-        for component in components:
-            actual = [note.text for note in component.notes]
-            expected = ["TEST TEXT {}".format(i + index) for i in xrange(len(actual))]
-            index += len(actual)
-            self.assertEqual(set(expected), set(actual))
+    def assert_text_in_notes(self, notes):
+        actual = [note.text for note in notes]
+        expected = ["TEST TEXT {}".format(i) for i in xrange(len(notes))]
+        self.assertEqual(expected, actual)
 
     def test_can_create_notes(self):
         """
@@ -143,20 +140,18 @@ def test_can_create_notes(self):
 
         components = self.note_unit_page.components
         self.create_notes(components)
-        self.assert_text_in_notes(components)
-        offset = len(self.note_unit_page.notes)
+        self.assert_text_in_notes(self.note_unit_page.notes)
 
         self.course_nav.go_to_sequential_position(2)
         components = self.note_unit_page.components
-        self.create_notes(components, offset)
-        self.assert_text_in_notes(components, offset)
+        self.create_notes(components)
 
         components = self.note_unit_page.refresh()
-        self.assert_text_in_notes(components, offset)
+        self.assert_text_in_notes(self.note_unit_page.notes)
 
         self.course_nav.go_to_sequential_position(1)
         components = self.note_unit_page.components
-        self.assert_text_in_notes(components)
+        self.assert_text_in_notes(self.note_unit_page.notes)
 
     def test_can_edit_notes(self):
         """
@@ -178,20 +173,19 @@ def test_can_edit_notes(self):
 
         components = self.note_unit_page.components
         self.edit_notes(components)
-        self.assert_text_in_notes(components)
-        offset = len(self.note_unit_page.notes)
+        self.assert_text_in_notes(self.note_unit_page.notes)
 
         self.course_nav.go_to_sequential_position(2)
         components = self.note_unit_page.components
-        self.edit_notes(components, offset)
-        self.assert_text_in_notes(components, offset)
+        self.edit_notes(components)
+        self.assert_text_in_notes(self.note_unit_page.notes)
 
         components = self.note_unit_page.refresh()
-        self.assert_text_in_notes(components, offset)
+        self.assert_text_in_notes(self.note_unit_page.notes)
 
         self.course_nav.go_to_sequential_position(1)
         components = self.note_unit_page.components
-        self.assert_text_in_notes(components)
+        self.assert_text_in_notes(self.note_unit_page.notes)
 
     def test_can_delete_notes(self):
         """
@@ -256,15 +250,15 @@ def setUp(self):
         self.course_fixture.add_children(
             XBlockFixtureDesc("chapter", "Test Section").add_children(
                 XBlockFixtureDesc("sequential", "Test Subsection").add_children(
-                    XBlockFixtureDesc('vertical', 'Test Unit 1').add_children(
+                    XBlockFixtureDesc("vertical", "Test Unit 1").add_children(
                         XBlockFixtureDesc(
                             "html",
                             "Test HTML 1",
                             data="""<p>Annotate this text!</p>"""
                         ),
                     ),
-                    XBlockFixtureDesc('vertical', 'Test Unit 2').add_children(
-                        XBlockFixtureDesc('vertical', 'Test Unit 2').add_children(
+                    XBlockFixtureDesc("vertical", "Test Unit 2").add_children(
+                        XBlockFixtureDesc("vertical", "Test Unit 2").add_children(
                             XBlockFixtureDesc(
                                 "html",
                                 "Test HTML 2",
@@ -284,33 +278,25 @@ def _add_notes(self, notes_list):
         self.edxnotes_fixture.create_notes(notes_list)
         self.edxnotes_fixture.install()
 
-    def test_no_content(self):
-        """
-        Scenario: User can see `No content` message.
-        Given I have a course without notes
-        When I open Notes page
-        Then I see only "You do not have any notes within the course." message
-        """
-        self.notes_page.visit()
-        self.assertEqual('You do not have any notes within the course.', self.notes_page.no_content_text)
-
-    def test_recent_activity_view(self):
-        """
-        Scenario: User can view all notes.
-        Given I have a course with 3 notes
-        When I open Notes page
-        Then I see 3 notes sorted by the day
-        And I see correct content in the notes
-        """
+    def _add_default_notes(self):
         xblocks = self.course_fixture.get_nested_xblocks(category="html")
         self._add_notes([
+            Note(
+                usage_id=xblocks[1].locator,
+                user=self.username,
+                course_id=self.course_fixture._course_key,
+                text="Third text",
+                quote="",
+                updated=datetime(2012, 1, 1, 1, 1, 1, 1).isoformat(),
+            ),
             Note(
                 usage_id=xblocks[0].locator,
                 user=self.username,
                 course_id=self.course_fixture._course_key,
                 text="Annotate this text!",
                 quote="Second note",
-                updated=datetime(2013, 1, 1, 1, 1, 1, 1).isoformat()
+                updated=datetime(2013, 1, 1, 1, 1, 1, 1).isoformat(),
+                ranges=[Range(startOffset=0, endOffset=19)],
             ),
             Note(
                 usage_id=xblocks[1].locator,
@@ -318,18 +304,30 @@ def test_recent_activity_view(self):
                 course_id=self.course_fixture._course_key,
                 text="",
                 quote="First note",
-                updated=datetime(2014, 1, 1, 1, 1, 1, 1).isoformat()
+                updated=datetime(2014, 1, 1, 1, 1, 1, 1).isoformat(),
             ),
-            Note(
-                usage_id=xblocks[1].locator,
-                user=self.username,
-                course_id=self.course_fixture._course_key,
-                text="Third text",
-                quote="",
-                updated=datetime(2012, 1, 1, 1, 1, 1, 1).isoformat()
-            )
         ])
 
+    def test_no_content(self):
+        """
+        Scenario: User can see `No content` message.
+        Given I have a course without notes
+        When I open Notes page
+        Then I see only "You do not have any notes within the course." message
+        """
+        self.notes_page.visit()
+        self.assertEqual("You do not have any notes within the course.", self.notes_page.no_content_text)
+
+    def test_recent_activity_view(self):
+        """
+        Scenario: User can view all notes by recent activity.
+        Given I have a course with 3 notes
+        When I open Notes page
+        Then I see 3 notes sorted by the day
+        And I see correct content in the notes
+        """
+        self._add_default_notes()
+
         def assertContent(item, text=None, quote=None, unit_name=None, time_updated=None):
             self.assertEqual(item.text, text)
             self.assertEqual(item.quote, quote)
@@ -370,29 +368,87 @@ def assertContent(item, text=None, quote=None, unit_name=None, time_updated=None
     def test_easy_access_from_notes_page(self):
         """
         Scenario: Ensure that the link to the Unit works correctly.
-        Given I have a course with a note
+        Given I have a course with 3 notes
         When I open Notes page
-        And I click on the unit link
+        And I click on the second unit link
         Then I see correct text on the unit page
         """
-        xblocks = self.course_fixture.get_nested_xblocks(category="html")
-        self._add_notes([
-            Note(
-                usage_id=xblocks[0].locator,
-                user=self.username,
-                course_id=self.course_fixture._course_key,
-                text="Annotate this text!",
-                ranges=[Range(startOffset=0, endOffset=20)]
-            ),
-        ])
-
+        self._add_default_notes()
         self.notes_page.visit()
-        item = self.notes_page.children[0]
+        item = self.notes_page.children[1]
         text = item.text
         item.go_to_unit()
         self.courseware_page.wait_for_page()
         self.assertIn(text, self.courseware_page.xblock_component_html_content())
 
+    def test_search_behaves_correctly(self):
+        """
+        Scenario: Searching behaves correctly.
+        Given I have a course with 3 notes
+        When I open Notes page
+        When I run the search with "   " query
+        Then I see the following error message "Search field cannot be blank."
+        And I still can see only "Recent Activity" tab
+        When I run the search with "text" query
+        Then I see that error message disappears
+        And I see that "Search Results" tab appears with 2 notes found
+        """
+        self._add_default_notes()
+        self.notes_page.visit()
+        # Run the search with whitespaces only
+        self.notes_page.search("   ")
+        # Displays error message
+        self.assertTrue(self.notes_page.is_error_visible)
+        self.assertEqual(self.notes_page.error_text, u"Search field cannot be blank.")
+        # Search results tab does not appear
+        self.assertEqual(len(self.notes_page.tabs), 1)
+        # Run the search with correct query
+        self.notes_page.search("text")
+        # Error message disappears
+        self.assertFalse(self.notes_page.is_error_visible)
+        self.assertIn(u"Search Results", self.notes_page.tabs)
+        self.assertEqual(len(self.notes_page.children), 2)
+
+    def test_tabs_behaves_correctly(self):
+        """
+        Scenario: Tabs behaves correctly.
+        Given I have a course with 3 notes
+        When I open Notes page
+        Then I see only "Recent Activity" tab with 3 notes
+        When I run the search with "text" query
+        And I see that "Search Results" tab appears with 2 notes found
+        Then I switch to "Recent Activity" tab
+        And I see all 3 notes
+        When I switch back to "Search Results" tab
+        Then I can still see 2 notes found
+        When I close "Search Results" tab
+        Then I see that "Recent Activity" tab becomes active
+        And "Search Results" tab disappears
+        And I see all 3 notes
+        """
+        self._add_default_notes()
+        self.notes_page.visit()
+
+        # We're on Recent Activity tab.
+        self.assertEqual(len(self.notes_page.tabs), 1)
+        self.assertIn(u"Recent Activity", self.notes_page.tabs)
+        self.assertEqual(len(self.notes_page.children), 3)
+        self.notes_page.search("text")
+        # We're on Search Results tab
+        self.assertEqual(len(self.notes_page.tabs), 2)
+        self.assertIn(u"Search Results", self.notes_page.tabs)
+        self.assertEqual(len(self.notes_page.children), 2)
+        # We can switch on Recent Activity tab and back.
+        self.notes_page.switch_to_tab("recent")
+        self.assertEqual(len(self.notes_page.children), 3)
+        self.notes_page.switch_to_tab("search")
+        self.assertEqual(len(self.notes_page.children), 2)
+        # Can close search results page
+        self.notes_page.close_tab("search")
+        self.assertEqual(len(self.notes_page.tabs), 1)
+        self.assertIn(u"Recent Activity", self.notes_page.tabs)
+        self.assertEqual(len(self.notes_page.children), 3)
+
 
 class EdxNotesToggleSingleNoteTest(EdxNotesTestMixin):
     """
@@ -417,9 +473,9 @@ def test_can_toggle_by_clicking_on_highlighted_text(self):
         note = self.note_unit_page.notes[0]
 
         note.click_on_highlight()
-        self.note_unit_page.move_mouse_to('body')
+        self.note_unit_page.move_mouse_to("body")
         self.assertTrue(note.is_visible)
-        self.note_unit_page.click('body')
+        self.note_unit_page.click("body")
         self.assertFalse(note.is_visible)
 
     def test_can_toggle_by_clicking_on_the_note(self):
@@ -435,9 +491,9 @@ def test_can_toggle_by_clicking_on_the_note(self):
         note = self.note_unit_page.notes[0]
 
         note.show().click_on_viewer()
-        self.note_unit_page.move_mouse_to('body')
+        self.note_unit_page.move_mouse_to("body")
         self.assertTrue(note.is_visible)
-        self.note_unit_page.click('body')
+        self.note_unit_page.click("body")
         self.assertFalse(note.is_visible)
 
     def test_interaction_between_notes(self):
@@ -456,7 +512,7 @@ def test_interaction_between_notes(self):
         note_2 = self.note_unit_page.notes[1]
 
         note_1.click_on_highlight()
-        self.note_unit_page.move_mouse_to('body')
+        self.note_unit_page.move_mouse_to("body")
         self.assertTrue(note_1.is_visible)
 
         note_2.click_on_highlight()
diff --git a/lms/djangoapps/edxnotes/exceptions.py b/lms/djangoapps/edxnotes/exceptions.py
new file mode 100644
index 000000000000..4e02362ea327
--- /dev/null
+++ b/lms/djangoapps/edxnotes/exceptions.py
@@ -0,0 +1,10 @@
+"""
+Exceptions related to EdxNotes.
+"""
+
+
+class EdxNotesParseError(Exception):
+    """
+    An exception that is raised whenever we have issues with data parsing.
+    """
+    pass
diff --git a/lms/djangoapps/edxnotes/helpers.py b/lms/djangoapps/edxnotes/helpers.py
index 757d5aa76eb3..536d4178d3a1 100644
--- a/lms/djangoapps/edxnotes/helpers.py
+++ b/lms/djangoapps/edxnotes/helpers.py
@@ -16,9 +16,10 @@
 from xmodule.modulestore.exceptions import ItemNotFoundError
 from util.date_utils import get_default_time_display
 from dateutil.parser import parse as dateutil_parse
-log = logging.getLogger(__name__)
 from provider.oauth2.models import AccessToken, Client
 from provider.utils import now
+from .exceptions import EdxNotesParseError
+log = logging.getLogger(__name__)
 
 
 class NoteJSONEncoder(JSONEncoder):
@@ -38,67 +39,113 @@ def get_token(user):
     """
     try:
         token = AccessToken.objects.get(
-            client=Client.objects.get(name='edx-notes'),
+            client=Client.objects.get(name="edx-notes"),
             user=user,
             expires__gt=now()
         )
     except AccessToken.DoesNotExist:
-        token = AccessToken(client=Client.objects.get(name='edx-notes'), user=user)
+        token = AccessToken(client=Client.objects.get(name="edx-notes"), user=user)
         token.save()
     return token.token
 
 
-def get_notes(user, course):
+def send_request(user, course_id, path="", query_string=""):
     """
-    Returns all notes for the user.
+    Sends a request with appropriate parameters and headers.
     """
-    url = get_endpoint("/annotations")
+    url = get_endpoint(path)
+    params = {
+        "user": user.username,
+        "course_id": unicode(course_id).encode("utf-8"),
+    }
+
+    if query_string:
+        params.update({
+            "text": query_string,
+        })
+
     response = requests.get(
         url,
-        params={
-            'user': user.username,
-            'course_id': unicode(course.id).encode('utf-8'),
-        },
         headers={
-            'x-annotator-auth-token': get_token(user)
-        }
+            "x-annotator-auth-token": get_token(user)
+        },
+        params=params
     )
 
-    try:
-        collection = json.loads(response.content)
-    except ValueError:
-        return None
+    return response
 
-    # if collection is empty, just return it.
-    if not collection:
-        return None
 
+def preprocess_collection(user, course, collection):
+    """
+    Reprocess provided `collection(list)`: adds information about ancestor,
+    converts "updated" date, sorts the collection in descending order.
+
+    Raises:
+        ItemNotFoundError - when appropriate module is not found.
+    """
     store = modulestore()
     filtered_collection = list()
     with store.bulk_operations(course.id):
         for model in collection:
-            usage_key = course.id.make_usage_key_from_deprecated_string(model['usage_id'])
+            usage_key = course.id.make_usage_key_from_deprecated_string(model["usage_id"])
             try:
                 item = store.get_item(usage_key)
             except ItemNotFoundError:
                 log.warning("Module not found: %s", usage_key)
                 continue
 
-            if not has_access(user, 'load', item, course_key=course.id):
+            if not has_access(user, "load", item, course_key=course.id):
                 continue
 
             model.update({
-                u'unit': get_parent_context(course, store, usage_key),
-                u'updated': dateutil_parse(model['updated']),
+                u"unit": get_ancestor_context(course, store, usage_key),
+                u"updated": dateutil_parse(model["updated"]),
             })
             filtered_collection.append(model)
 
-    return json.dumps(sorted(filtered_collection, key=lambda note: note['updated'], reverse=True), cls=NoteJSONEncoder)
+    return filtered_collection
+
+
+def search(user, course, query_string):
+    """
+    Returns search results for the `query_string(str)`.
+    """
+    response = send_request(user, course.id, "search", query_string)
+
+    try:
+        content = json.loads(response.content)
+        collection = content["rows"]
+    except (ValueError, KeyError):
+        log.warning("invalid JSON: %s", response.content)
+        raise EdxNotesParseError(_("Server error. Try again in a few minutes."))
+
+    content.update({
+        "rows": preprocess_collection(user, course, collection)
+    })
+
+    return json.dumps(content, cls=NoteJSONEncoder)
+
+
+def get_notes(user, course):
+    """
+    Returns all notes for the user.
+    """
+    response = send_request(user, course.id, "annotations")
+
+    try:
+        collection = json.loads(response.content)
+    except ValueError:
+        return None
+
+    if not collection:
+        return None
+
+    return json.dumps(preprocess_collection(user, course, collection), cls=NoteJSONEncoder)
 
 
-def get_parent(store, usage_key):
+def get_ancestor(store, usage_key):
     """
-    Returns parent module for the passed `usage_key`.
+    Returns ancestor module for the passed `usage_key`.
     """
     location = store.get_parent_location(usage_key)
     if not location:
@@ -111,26 +158,26 @@ def get_parent(store, usage_key):
         return
 
 
-def get_parent_context(course, store, usage_key):
+def get_ancestor_context(course, store, usage_key):
     """
     Returns dispay_name and url for the parent module.
     """
-    parent = get_parent(store, usage_key)
+    parent = get_ancestor(store, usage_key)
 
     if not parent:
         return {
-            u'display_name': None,
-            u'url': None,
+            u"display_name": None,
+            u"url": None,
         }
 
-    url = reverse('jump_to', kwargs={
-        'course_id': course.id.to_deprecated_string(),
-        'location': parent.location.to_deprecated_string(),
+    url = reverse("jump_to", kwargs={
+        "course_id": course.id.to_deprecated_string(),
+        "location": parent.location.to_deprecated_string(),
     })
 
     return {
-        u'display_name': parent.display_name_with_default,
-        u'url': url,
+        u"display_name": parent.display_name_with_default,
+        u"url": url,
     }
 
 
@@ -138,16 +185,19 @@ def get_endpoint(path=""):
     """
     Returns endpoint.
     """
-    interface = settings.EDXNOTES_INTERFACE if hasattr(settings, 'EDXNOTES_INTERFACE') else False
-    if interface and interface.get("url", False):
-        url = interface["url"]
+    try:
+        url = settings.EDXNOTES_INTERFACE['url']
         if not url.endswith("/"):
             url += "/"
-        if path and not path.startswith("/"):
-            path = "/" + path
 
-        return url + "api/v1" + path
-    else:
+        if path:
+            if path.startswith("/"):
+                path = path.lstrip("/")
+            if not path.endswith("/"):
+                path += "/"
+
+        return url + path
+    except (AttributeError, KeyError):
         raise ImproperlyConfigured(_("No endpoint was provided for EdxNotes."))
 
 
@@ -166,7 +216,7 @@ def is_feature_enabled(course):
         1) enabled globally via FEATURES.
         2) present in the course tab configuration.
     """
-    tab_found = next((True for t in course.tabs if t['type'] == 'edxnotes'), False)
-    feature_enabled = settings.FEATURES.get('ENABLE_EDXNOTES')
+    tab_found = next((True for t in course.tabs if t["type"] == "edxnotes"), False)
+    feature_enabled = settings.FEATURES.get("ENABLE_EDXNOTES")
 
     return feature_enabled and tab_found
diff --git a/lms/djangoapps/edxnotes/tests.py b/lms/djangoapps/edxnotes/tests.py
index ad975deeb775..6b3aa030d837 100644
--- a/lms/djangoapps/edxnotes/tests.py
+++ b/lms/djangoapps/edxnotes/tests.py
@@ -18,6 +18,7 @@
 from xmodule.modulestore.exceptions import ItemNotFoundError
 from student.tests.factories import UserFactory
 
+from .exceptions import EdxNotesParseError
 from . import helpers
 
 
@@ -48,52 +49,52 @@ def get_html(self):
         """
         Imitate get_html in module.
         """
-        return 'original_get_html'
+        return "original_get_html"
 
 
-@skipUnless(settings.FEATURES["ENABLE_EDXNOTES"], 'EdxNotes feature needs to be enabled.')
+@skipUnless(settings.FEATURES["ENABLE_EDXNOTES"], "EdxNotes feature needs to be enabled.")
 class EdxNotesDecoratorTest(TestCase):
     """
     Tests for edxnotes decorator.
     """
 
     def setUp(self):
-        ClientFactory(name='edx-notes')
+        ClientFactory(name="edx-notes")
         self.course = CourseFactory.create(edxnotes=True)
         self.user = UserFactory.create(username="Bob", email="bob@example.com", password="edx")
         self.client.login(username=self.user.username, password="edx")
         self.problem = TestProblem(self.course)
 
-    @patch.dict("django.conf.settings.FEATURES", {'ENABLE_EDXNOTES': True})
+    @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": True})
     def test_edxnotes_enabled(self):
         """
         Tests if get_html is wrapped when feature flag is on and edxnotes are
         enabled for the course.
         """
         enable_edxnotes_for_the_course(self.course, self.user.id)
-        self.assertIn('edx-notes-wrapper', self.problem.get_html())
+        self.assertIn("edx-notes-wrapper", self.problem.get_html())
 
-    @patch.dict("django.conf.settings.FEATURES", {'ENABLE_EDXNOTES': True})
+    @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": True})
     def test_edxnotes_disabled_if_edxnotes_flag_is_false(self):
         """
         Tests if get_html is wrapped when feature flag is on, but edxnotes are
         disabled for the course.
         """
-        self.assertEqual('original_get_html', self.problem.get_html())
+        self.assertEqual("original_get_html", self.problem.get_html())
 
-    @patch.dict("django.conf.settings.FEATURES", {'ENABLE_EDXNOTES': False})
+    @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": False})
     def test_edxnotes_disabled(self):
         """
         Tests if get_html is not wrapped when feature flag is off.
         """
-        self.assertEqual('original_get_html', self.problem.get_html())
+        self.assertEqual("original_get_html", self.problem.get_html())
 
     def test_edxnotes_studio(self):
         """
         Tests if get_html is not wrapped when problem is rendered in Studio.
         """
         self.problem.system.is_author_mode = True
-        self.assertEqual('original_get_html', self.problem.get_html())
+        self.assertEqual("original_get_html", self.problem.get_html())
 
 
 @skipUnless(settings.FEATURES["ENABLE_EDXNOTES"], "EdxNotes feature needs to be enabled.")
@@ -105,66 +106,25 @@ def setUp(self):
         """
         Setup a dummy course content.
         """
-        ClientFactory(name='edx-notes')
+        ClientFactory(name="edx-notes")
         self.course = CourseFactory.create()
-        self.chapter = ItemFactory.create(category='chapter', parent_location=self.course.location)
-        self.sequential = ItemFactory.create(category='sequential', parent_location=self.chapter.location)
-        self.vertical = ItemFactory.create(category='vertical', parent_location=self.sequential.location)
-        self.html_module_1 = ItemFactory.create(category='html', parent_location=self.vertical.location)
-        self.html_module_2 = ItemFactory.create(category='html', parent_location=self.vertical.location)
+        self.chapter = ItemFactory.create(category="chapter", parent_location=self.course.location)
+        self.sequential = ItemFactory.create(category="sequential", parent_location=self.chapter.location)
+        self.vertical = ItemFactory.create(category="vertical", parent_location=self.sequential.location)
+        self.html_module_1 = ItemFactory.create(category="html", parent_location=self.vertical.location)
+        self.html_module_2 = ItemFactory.create(category="html", parent_location=self.vertical.location)
         self.user = UserFactory.create(username="Bob", email="bob@example.com", password="edx")
         self.client.login(username=self.user.username, password="edx")
-        self.datetimes = [
-            datetime(2014, 11, 19, 8, 5, 16, 00000).isoformat(),
-            datetime(2014, 11, 19, 8, 6, 16, 00000).isoformat(),
-        ]
-        self.datetimes_str = [
-            "Nov 19, 2014 at 08:05 UTC",
-            "Nov 19, 2014 at 08:06 UTC",
-        ]
 
     def _get_jump_to_url(self, vertical):
         """
         Returns `jump_to` url for the `vertical`.
         """
-        return reverse('jump_to', kwargs={
-            'course_id': self.course.id.to_deprecated_string(),
-            'location': vertical.location.to_deprecated_string(),
+        return reverse("jump_to", kwargs={
+            "course_id": self.course.id.to_deprecated_string(),
+            "location": vertical.location.to_deprecated_string(),
         })
 
-    def _get_dummy_model(self, module, fields_to_update=None):
-        """
-        Returns dummy model for the `module`.
-        """
-        dummy_model = {
-            u'quote': u'quote text',
-            u'text': u'text',
-            u'usage_id': unicode(module.location),
-            u'updated': self.datetimes[0],
-        }
-        if fields_to_update:
-            dummy_model.update(fields_to_update)
-        return dummy_model
-
-    def _get_dummy_note(self, module, vertical, fields_to_update=None):
-        """
-        Returns dummy note for the `module`.
-        """
-        dummy_note = {
-            u'quote': u'quote text',
-            u'text': u'text',
-            u'unit': {
-                u'url': self._get_jump_to_url(vertical),
-                u'display_name': vertical.display_name_with_default,
-            },
-            u'usage_id': unicode(module.location),
-            u'updated': self.datetimes_str[0],
-        }
-
-        if fields_to_update:
-            dummy_note.update(fields_to_update)
-        return dummy_note
-
     def test_edxnotes_not_enabled(self):
         """
         Tests that edxnotes are disabled when the course tab configuration does NOT
@@ -189,19 +149,19 @@ def test_get_endpoint(self):
         """
         # url ends with "/"
         with patch.dict("django.conf.settings.EDXNOTES_INTERFACE", {"url": "http://example.com/"}):
-            self.assertEqual("http://example.com/api/v1", helpers.get_endpoint())
+            self.assertEqual("http://example.com/", helpers.get_endpoint())
 
         # url doesn't have "/" at the end
         with patch.dict("django.conf.settings.EDXNOTES_INTERFACE", {"url": "http://example.com"}):
-            self.assertEqual("http://example.com/api/v1", helpers.get_endpoint())
+            self.assertEqual("http://example.com/", helpers.get_endpoint())
 
         # url with path that starts with "/"
         with patch.dict("django.conf.settings.EDXNOTES_INTERFACE", {"url": "http://example.com"}):
-            self.assertEqual("http://example.com/api/v1/some_path", helpers.get_endpoint("/some_path"))
+            self.assertEqual("http://example.com/some_path/", helpers.get_endpoint("/some_path"))
 
         # url with path without "/"
         with patch.dict("django.conf.settings.EDXNOTES_INTERFACE", {"url": "http://example.com"}):
-            self.assertEqual("http://example.com/api/v1/some_path", helpers.get_endpoint("some_path"))
+            self.assertEqual("http://example.com/some_path/", helpers.get_endpoint("some_path/"))
 
         # url is not configured
         with patch.dict("django.conf.settings.EDXNOTES_INTERFACE", {"url": None}):
@@ -213,14 +173,42 @@ def test_get_notes_correct_data(self, mock_get):
         Tests the result if correct data is received.
         """
         mock_get.return_value.content = json.dumps([
-            self._get_dummy_model(self.html_module_1),
-            self._get_dummy_model(self.html_module_2, fields_to_update={"updated": self.datetimes[1]}),
+            {
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"usage_id": unicode(self.html_module_1.location),
+                u"updated": datetime(2014, 11, 19, 8, 5, 16, 00000).isoformat(),
+            },
+            {
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"usage_id": unicode(self.html_module_2.location),
+                u"updated": datetime(2014, 11, 19, 8, 6, 16, 00000).isoformat(),
+            }
         ])
 
         self.assertItemsEqual(
             [
-                self._get_dummy_note(self.html_module_2, self.vertical, fields_to_update={"updated": self.datetimes_str[1]}),
-                self._get_dummy_note(self.html_module_1, self.vertical),
+                {
+                    u"quote": u"quote text",
+                    u"text": u"text",
+                    u"unit": {
+                        u"url": self._get_jump_to_url(self.vertical),
+                        u"display_name": self.vertical.display_name_with_default,
+                    },
+                    u"usage_id": unicode(self.html_module_2.location),
+                    u"updated": "Nov 19, 2014 at 08:06 UTC",
+                },
+                {
+                    u"quote": u"quote text",
+                    u"text": u"text",
+                    u"unit": {
+                        u"url": self._get_jump_to_url(self.vertical),
+                        u"display_name": self.vertical.display_name_with_default,
+                    },
+                    u"usage_id": unicode(self.html_module_1.location),
+                    u"updated": "Nov 19, 2014 at 08:05 UTC",
+                },
             ],
             json.loads(helpers.get_notes(self.user, self.course))
         )
@@ -242,77 +230,195 @@ def test_get_notes_empty_collection(self, mock_get):
         self.assertIsNone(helpers.get_notes(self.user, self.course))
 
     @patch("edxnotes.helpers.requests.get")
-    def test_get_notes_no_item(self, mock_get):
+    def test_search_correct_data(self, mock_get):
         """
-        Tests the result if appropriate module is not found.
+        Tests the result if correct data is received.
         """
-        module = MagicMock()
-        module.location = self.course.id.make_usage_key("html", "test_item")
-        mock_get.return_value.content = json.dumps([
-            self._get_dummy_model(self.html_module_1),
-            self._get_dummy_model(module),
-        ])
+        mock_get.return_value.content = json.dumps({
+            "total": 2,
+            "rows": [
+                {
+                    u"quote": u"quote text",
+                    u"text": u"text",
+                    u"usage_id": unicode(self.html_module_1.location),
+                    u"updated": datetime(2014, 11, 19, 8, 5, 16, 00000).isoformat(),
+                },
+                {
+                    u"quote": u"quote text",
+                    u"text": u"text",
+                    u"usage_id": unicode(self.html_module_2.location),
+                    u"updated": datetime(2014, 11, 19, 8, 6, 16, 00000).isoformat(),
+                }
+            ]
+        })
 
         self.assertItemsEqual(
-            [self._get_dummy_note(self.html_module_1, self.vertical)],
-            json.loads(helpers.get_notes(self.user, self.course))
+            {
+                "total": 2,
+                "rows": [
+                    {
+                        u"quote": u"quote text",
+                        u"text": u"text",
+                        u"unit": {
+                            u"url": self._get_jump_to_url(self.vertical),
+                            u"display_name": self.vertical.display_name_with_default,
+                        },
+                        u"usage_id": unicode(self.html_module_2.location),
+                        u"updated": "Nov 19, 2014 at 08:06 UTC",
+                    },
+                    {
+                        u"quote": u"quote text",
+                        u"text": u"text",
+                        u"unit": {
+                            u"url": self._get_jump_to_url(self.vertical),
+                            u"display_name": self.vertical.display_name_with_default,
+                        },
+                        u"usage_id": unicode(self.html_module_1.location),
+                        u"updated": "Nov 19, 2014 at 08:05 UTC",
+                    },
+                ]
+            },
+            json.loads(helpers.search(self.user, self.course, "test"))
         )
 
     @patch("edxnotes.helpers.requests.get")
-    def test_get_notes_has_access(self, mock_get):
+    def test_search_json_error(self, mock_get):
+        """
+        Tests the result if incorrect json is received.
+        """
+        mock_get.return_value.content = "Error"
+        self.assertRaises(EdxNotesParseError, helpers.search, self.user, self.course, "test")
+
+    @patch("edxnotes.helpers.requests.get")
+    def test_search_wrong_data_format(self, mock_get):
+        """
+        Tests the result if incorrect data structure is received.
+        """
+        mock_get.return_value.content = json.dumps({"1": 2})
+        self.assertRaises(EdxNotesParseError, helpers.search, self.user, self.course, "test")
+
+    @patch("edxnotes.helpers.requests.get")
+    def test_search_empty_collection(self, mock_get):
+        """
+        Tests no results.
+        """
+        mock_get.return_value.content = json.dumps({
+            "total": 0,
+            "rows": []
+        })
+        self.assertItemsEqual(
+            {
+                "total": 0,
+                "rows": []
+            },
+            json.loads(helpers.search(self.user, self.course, "test"))
+        )
+
+    def test_preprocess_collection_no_item(self):
+        """
+        Tests the result if appropriate module is not found.
+        """
+        initial_collection = [
+            {
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"usage_id": unicode(self.html_module_1.location),
+                u"updated": datetime(2014, 11, 19, 8, 5, 16, 00000).isoformat()
+            },
+            {
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"usage_id": unicode(self.course.id.make_usage_key("html", "test_item")),
+                u"updated": datetime(2014, 11, 19, 8, 6, 16, 00000).isoformat()
+            },
+        ]
+
+        self.assertItemsEqual(
+            [{
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"unit": {
+                    u"url": self._get_jump_to_url(self.vertical),
+                    u"display_name": self.vertical.display_name_with_default,
+                },
+                u"usage_id": unicode(self.html_module_1.location),
+                u"updated": datetime(2014, 11, 19, 8, 5, 16, 00000),
+            }],
+            helpers.preprocess_collection(self.user, self.course, initial_collection)
+        )
+
+    def test_preprocess_collection_has_access(self):
         """
         Tests the result if the user do not has access to some modules.
         """
+        initial_collection = [
+            {
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"usage_id": unicode(self.html_module_1.location),
+                u"updated": datetime(2014, 11, 19, 8, 5, 16, 00000).isoformat(),
+            },
+            {
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"usage_id": unicode(self.html_module_2.location),
+                u"updated": datetime(2014, 11, 19, 8, 6, 16, 00000).isoformat(),
+            },
+        ]
         self.html_module_2.visible_to_staff_only = True
         modulestore().update_item(self.html_module_2, self.user.id)
-
-        mock_get.return_value.content = json.dumps([
-            self._get_dummy_model(self.html_module_1),
-            self._get_dummy_model(self.html_module_2),
-        ])
         self.assertItemsEqual(
-            [self._get_dummy_note(self.html_module_1, self.vertical)],
-            json.loads(helpers.get_notes(self.user, self.course))
+            [{
+                u"quote": u"quote text",
+                u"text": u"text",
+                u"unit": {
+                    u"url": self._get_jump_to_url(self.vertical),
+                    u"display_name": self.vertical.display_name_with_default,
+                },
+                u"usage_id": unicode(self.html_module_1.location),
+                u"updated": datetime(2014, 11, 19, 8, 5, 16, 00000),
+            }],
+            helpers.preprocess_collection(self.user, self.course, initial_collection)
         )
 
-    def test_get_parent(self):
+    def test_get_ancestor(self):
         """
-        Tests `test_get_parent` method for the successful result.
+        Tests `test_get_ancestor` method for the successful result.
         """
-        parent = helpers.get_parent(modulestore(), self.html_module_1.location)
+        parent = helpers.get_ancestor(modulestore(), self.html_module_1.location)
         self.assertEqual(parent.location, self.vertical.location)
 
-    def test_get_parent_no_location(self):
+    def test_get_ancestor_no_location(self):
         """
         Tests the result if parent location is not found.
         """
         store = MagicMock()
         store.get_parent_location.return_value = None
-        self.assertEqual(helpers.get_parent(store, self.html_module_1.location), None)
+        self.assertEqual(helpers.get_ancestor(store, self.html_module_1.location), None)
 
-    def test_get_parent_no_parent(self):
+    def test_get_ancestor_no_parent(self):
         """
-        Tests the result if parent module is not found.
+        Tests the result if ancestor module is not found.
         """
         store = MagicMock()
         store.get_item.side_effect = ItemNotFoundError
-        self.assertEqual(helpers.get_parent(store, self.html_module_1.location), None)
+        self.assertEqual(helpers.get_ancestor(store, self.html_module_1.location), None)
 
-    def test_get_parent_context(self):
+    def test_get_ancestor_context(self):
         """
-        Tests `test_get_parent_context` method for the successful result.
+        Tests `test_get_ancestor_context` method for the successful result.
         """
         self.assertDictEqual(
             {
                 u"url": self._get_jump_to_url(self.vertical),
                 u"display_name": self.vertical.display_name_with_default,
             },
-            helpers.get_parent_context(self.course, modulestore(), self.html_module_1.location)
+            helpers.get_ancestor_context(self.course, modulestore(), self.html_module_1.location)
         )
 
     # pylint: disable=unused-argument
-    @patch('edxnotes.helpers.get_parent', return_value=None)
-    def test_get_parent_context_no_parent(self, mock_get_parent):
+    @patch("edxnotes.helpers.get_ancestor", return_value=None)
+    def test_get_ancestor_context_no_parent(self, mock_get_ancestor):
         """
         Tests the result if parent module is not found.
         """
@@ -321,7 +427,52 @@ def test_get_parent_context_no_parent(self, mock_get_parent):
                 u"url": None,
                 u"display_name": None,
             },
-            helpers.get_parent_context(self.course, modulestore(), self.html_module_1.location)
+            helpers.get_ancestor_context(self.course, modulestore(), self.html_module_1.location)
+        )
+
+    @patch.dict("django.conf.settings.EDXNOTES_INTERFACE", {"url": "http://example.com"})
+    @patch("edxnotes.helpers.get_token")
+    @patch("edxnotes.helpers.requests.get")
+    def test_send_request_with_query_string(self, mock_get, get_token):
+        """
+        Tests that requests are send with correct information.
+        """
+        get_token.return_value = "test_token"
+        helpers.send_request(
+            self.user, self.course.id, path="test", query_string="text"
+        )
+        mock_get.assert_called_with(
+            "http://example.com/test/",
+            headers={
+                "x-annotator-auth-token": "test_token"
+            },
+            params={
+                "user": self.user.username,
+                "course_id": unicode(self.course.id),
+                "text": "text",
+            }
+        )
+
+    @patch.dict("django.conf.settings.EDXNOTES_INTERFACE", {"url": "http://example.com"})
+    @patch("edxnotes.helpers.get_token")
+    @patch("edxnotes.helpers.requests.get")
+    def test_send_request_without_query_string(self, mock_get, get_token):
+        """
+        Tests that requests are send with correct information.
+        """
+        get_token.return_value = "test_token"
+        helpers.send_request(
+            self.user, self.course.id, path="test"
+        )
+        mock_get.assert_called_with(
+            "http://example.com/test/",
+            headers={
+                "x-annotator-auth-token": "test_token"
+            },
+            params={
+                "user": self.user.username,
+                "course_id": unicode(self.course.id),
+            }
         )
 
 
@@ -331,12 +482,13 @@ class EdxNotesViewsTest(TestCase):
     Tests for EdxNotes views.
     """
     def setUp(self):
-        ClientFactory(name='edx-notes')
+        ClientFactory(name="edx-notes")
         super(EdxNotesViewsTest, self).setUp()
         self.course = CourseFactory.create(edxnotes=True)
         self.user = UserFactory.create(username="Bob", email="bob@example.com", password="edx")
         self.client.login(username=self.user.username, password="edx")
         self.notes_page_url = reverse("edxnotes", args=[unicode(self.course.id)])
+        self.search_url = reverse("search_notes", args=[unicode(self.course.id)])
 
     # pylint: disable=unused-argument
     @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": True})
@@ -353,7 +505,65 @@ def test_edxnotes_view_is_enabled(self, mock_get_notes):
     @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": False})
     def test_edxnotes_view_is_disabled(self):
         """
-        Tests that 404 response is received if EdxNotes feature is disabled.
+        Tests that 404 status code is received if EdxNotes feature is disabled.
         """
         response = self.client.get(self.notes_page_url)
         self.assertEqual(response.status_code, 404)
+
+    @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": True})
+    @patch("edxnotes.views.search")
+    def test_search_notes_successfully_respond(self, mock_search):
+        """
+        Tests that `search_notes` successfully respond if EdxNotes feature is enabled.
+        """
+        mock_search.return_value = json.dumps({
+            "total": 0,
+            "rows": [],
+        })
+        enable_edxnotes_for_the_course(self.course, self.user.id)
+        response = self.client.get(self.search_url, {"text": "test"})
+        self.assertEqual(json.loads(response.content), {
+            "total": 0,
+            "rows": [],
+        })
+        self.assertEqual(response.status_code, 200)
+
+    @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": False})
+    @patch("edxnotes.views.search")
+    def test_search_notes_is_disabled(self, mock_search):
+        """
+        Tests that 404 status code is received if EdxNotes feature is disabled.
+        """
+        mock_search.return_value = json.dumps({
+            "total": 0,
+            "rows": [],
+        })
+        response = self.client.get(self.search_url, {"text": "test"})
+        self.assertEqual(response.status_code, 404)
+
+    @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": True})
+    @patch("edxnotes.views.search")
+    def test_search_notes_without_required_parameters(self, mock_search):
+        """
+        Tests that 400 status code is received if the required parameters were not sent.
+        """
+        mock_search.return_value = json.dumps({
+            "total": 0,
+            "rows": [],
+        })
+        enable_edxnotes_for_the_course(self.course, self.user.id)
+        response = self.client.get(self.search_url)
+        self.assertEqual(response.status_code, 400)
+
+    @patch.dict("django.conf.settings.FEATURES", {"ENABLE_EDXNOTES": True})
+    @patch("edxnotes.views.search")
+    def test_search_notes_exception(self, mock_search):
+        """
+        Tests that 500 status code is received if invalid data was received from
+        EdXNotes service.
+        """
+        mock_search.side_effect = EdxNotesParseError
+        enable_edxnotes_for_the_course(self.course, self.user.id)
+        response = self.client.get(self.search_url, {"text": "test"})
+        self.assertEqual(response.status_code, 500)
+        self.assertIn("error", response.content)
diff --git a/lms/djangoapps/edxnotes/urls.py b/lms/djangoapps/edxnotes/urls.py
new file mode 100644
index 000000000000..aabd156f2082
--- /dev/null
+++ b/lms/djangoapps/edxnotes/urls.py
@@ -0,0 +1,11 @@
+"""
+URLs for EdxNotes.
+"""
+from django.conf.urls import patterns, url
+
+# Additionally, we include login URLs for the browseable API.
+urlpatterns = patterns(
+    'edxnotes.views',
+    url(r'^/$', 'edxnotes', name='edxnotes'),
+    url(r'^/search/$', "search_notes", name="search_notes"),
+)
diff --git a/lms/djangoapps/edxnotes/views.py b/lms/djangoapps/edxnotes/views.py
index 74949b89767b..8e888a771f11 100644
--- a/lms/djangoapps/edxnotes/views.py
+++ b/lms/djangoapps/edxnotes/views.py
@@ -3,16 +3,18 @@
 """
 import json
 from django.contrib.auth.decorators import login_required
-from django.http import Http404
+from django.core.urlresolvers import reverse
+from django.http import HttpResponse, HttpResponseBadRequest, Http404
 from django.conf import settings
+from util.json_request import JsonResponseBadRequest
 from edxmako.shortcuts import render_to_response
 from opaque_keys.edx.locations import SlashSeparatedCourseKey
 from courseware.courses import get_course_with_access
+from edxnotes.exceptions import EdxNotesParseError
 from edxnotes.helpers import (
-    get_endpoint,
-    get_token,
     get_notes,
-    is_feature_enabled
+    is_feature_enabled,
+    search
 )
 
 
@@ -29,12 +31,33 @@ def edxnotes(request, course_id):
 
     notes = get_notes(request.user, course)
     context = {
-        # Use camelCase to name keys.
         "course": course,
-        "endpoint": get_endpoint(),
+        "search_endpoint": reverse("search_notes", kwargs={"course_id": course_id}),
         "notes": notes,
-        "token": get_token(request.user),
         "debug": json.dumps(settings.DEBUG),
     }
 
-    return render_to_response("edxnotes.html", context)
+    return render_to_response("edxnotes/edxnotes.html", context)
+
+
+@login_required
+def search_notes(request, course_id):
+    """
+    Handles search requests.
+    """
+    course_key = SlashSeparatedCourseKey.from_deprecated_string(course_id)
+    course = get_course_with_access(request.user, "load", course_key)
+
+    if not is_feature_enabled(course):
+        raise Http404
+
+    if not "text" in request.GET:
+        return HttpResponseBadRequest()
+
+    query_string = request.GET["text"]
+    try:
+        search_results = search(request.user, course, query_string)
+    except EdxNotesParseError as err:
+        return JsonResponseBadRequest({"error": err.message}, status=500)
+
+    return HttpResponse(search_results)
diff --git a/lms/envs/bok_choy.py b/lms/envs/bok_choy.py
index 12735f64914b..2cc65bb215bd 100644
--- a/lms/envs/bok_choy.py
+++ b/lms/envs/bok_choy.py
@@ -57,7 +57,7 @@
 
 # Configure the LMS to use our stub EdxNotes implementation
 EDXNOTES_INTERFACE = {
-    'url': 'http://localhost:8042/',
+    'url': 'http://localhost:8042/api/v1',
 }
 FEATURES['ENABLE_EDXNOTES'] = True
 
diff --git a/lms/envs/common.py b/lms/envs/common.py
index a184325a6d57..f2b409e9381e 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -892,7 +892,7 @@
 
 # Configure the LMS to use our stub EdxNotes implementation
 EDXNOTES_INTERFACE = {
-    'url': 'http://localhost:8042/',
+    'url': 'http://localhost:8042/api/v1',
 }
 
 ################################# Jasmine ##################################
diff --git a/lms/static/js/edxnotes/collections/notes.js b/lms/static/js/edxnotes/collections/notes.js
index 58a0f5a09e08..bbf50c9a2e1f 100644
--- a/lms/static/js/edxnotes/collections/notes.js
+++ b/lms/static/js/edxnotes/collections/notes.js
@@ -1,12 +1,12 @@
 ;(function (define, undefined) {
-    'use strict';
-    define([
-        'backbone', 'js/edxnotes/models/note'
-    ], function (Backbone, NoteModel) {
-        var NotesCollection = Backbone.Collection.extend({
-            model: NoteModel
-        });
-
-        return NotesCollection;
+'use strict';
+define([
+    'backbone', 'js/edxnotes/models/note'
+], function (Backbone, NoteModel) {
+    var NotesCollection = Backbone.Collection.extend({
+        model: NoteModel
     });
+
+    return NotesCollection;
+});
 }).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/collections/tabs.js b/lms/static/js/edxnotes/collections/tabs.js
new file mode 100644
index 000000000000..bb709c16c170
--- /dev/null
+++ b/lms/static/js/edxnotes/collections/tabs.js
@@ -0,0 +1,12 @@
+;(function (define, undefined) {
+'use strict';
+define([
+    'backbone', 'js/edxnotes/models/tab'
+], function (Backbone, TabModel) {
+    var TabsCollection = Backbone.Collection.extend({
+        model: TabModel
+    });
+
+    return TabsCollection;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/models/note.js b/lms/static/js/edxnotes/models/note.js
index cda405ae5000..45b2d9d49957 100644
--- a/lms/static/js/edxnotes/models/note.js
+++ b/lms/static/js/edxnotes/models/note.js
@@ -1,24 +1,24 @@
-;(function (define, gettext, interpolate, undefined) {
-    'use strict';
-    define(['jquery', 'backbone', 'date'], function ($, Backbone) {
-        var NoteModel = Backbone.Model.extend({
-            defaults: {
-                'id': null,
-                'created': null,
-                'updated': null,
-                'user': null,
-                'usage_id': null,
-                'course_id': null,
-                'text': null,
-                'quote': null,
-                'unit': {
-                    'display_name': null,
-                    'url': null
-                },
-                'ranges': []
-            }
-        });
-
-        return NoteModel;
+;(function (define) {
+'use strict';
+define(['backbone'], function (Backbone) {
+    var NoteModel = Backbone.Model.extend({
+        defaults: {
+            'id': null,
+            'created': null,
+            'updated': null,
+            'user': null,
+            'usage_id': null,
+            'course_id': null,
+            'text': null,
+            'quote': null,
+            'unit': {
+                'display_name': null,
+                'url': null
+            },
+            'ranges': []
+        }
     });
-}).call(this, define || RequireJS.define, gettext, interpolate);
+
+    return NoteModel;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/models/tab.js b/lms/static/js/edxnotes/models/tab.js
new file mode 100644
index 000000000000..381800b208ca
--- /dev/null
+++ b/lms/static/js/edxnotes/models/tab.js
@@ -0,0 +1,33 @@
+;(function (define, undefined) {
+'use strict';
+define(['backbone'], function (Backbone) {
+    var TabModel = Backbone.Model.extend({
+        defaults: {
+            'name': '',
+            'class_name': '',
+            'is_active': false,
+            'is_closable': false
+        },
+
+        activate: function () {
+            this.collection.each(_.bind(function(model) {
+                // Inactivate all other models.
+                if (model !== this) {
+                    model.inactivate();
+                }
+            }, this));
+            this.set('is_active', true);
+        },
+
+        inactivate: function () {
+            this.set('is_active', false);
+        },
+
+        isActive: function () {
+            return this.get('is_active');
+        }
+    });
+
+    return TabModel;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/utils/logger.js b/lms/static/js/edxnotes/utils/logger.js
index b4ffe871c221..34ec5dadfbb1 100644
--- a/lms/static/js/edxnotes/utils/logger.js
+++ b/lms/static/js/edxnotes/utils/logger.js
@@ -1,68 +1,135 @@
 ;(function (define) {
-    define([], function () {
-        'use strict';
-        /**
-         * Logger constructor.
-         * @constructor
-         * @param {String} id Id of the logger.
-         * @param {Boolean|Number} mode Outputs messages to the Web Console if true.
-         */
-        var Logger = function (id, mode) {
-            this.id = id;
-            this._history = [];
-            // 0 - silent;
-            // 1 - show logs;
-            this.logLevel = mode;
+'use strict';
+define([], function () {
+    var loggers = [],
+        Logger, now, destroyLogger;
+
+    now = function () {
+        if (performance && performance.now) {
+            return performance.now();
+        } else if (Date.now) {
+            return Date.now();
+        } else {
+            return (new Date()).getTime();
         }
+    };
+
+    /**
+     * Removes a reference on the logger from `loggers`.
+     * @param  {Object} logger An instance of Logger.
+     */
+    destroyLogger = function (logger) {
+        var index = loggers.length,
+            removedLogger;
 
-        /**
-         * Outputs a message with appropriate type to the Web Console and
-         * store it in the history.
-         * @param  {String} logType The type of the log message.
-         * @param  {Arguments} args Information that will be stored.
-         */
-        Logger.prototype._log = function (logType, args) {
-            this.updateHistory.apply(this, arguments);
-            // Adds ID at the first place
-            Array.prototype.unshift.call(args, this.id);
-            if (this.logLevel && console && console[logType]) {
-                if (console[logType].apply){
-                    console[logType].apply(console, args);
-                } else { // Do this for IE
-                    console[logType](args.join(' '));
-                }
+        while(index--) {
+            if (loggers[index].id === logger.id) {
+                removedLogger = loggers.splice(index, 1)[0];
+                removedLogger.historyStorage = [];
+                removedLogger.timeStorage = {};
+                break;
             }
-        };
+        }
+    };
+
+    /**
+     * Logger constructor.
+     * @constructor
+     * @param {String} id Id of the logger.
+     * @param {Boolean|Number} mode Outputs messages to the Web Console if true.
+     */
+    Logger = function (id, mode) {
+        this.id = id;
+        this.historyStorage = [];
+        this.timeStorage = {};
+        // 0 - silent;
+        // 1 - show logs;
+        this.logLevel = mode;
+    };
 
-        /**
-         * Outputs a message to the Web Console and store it in the history.
-         */
-        Logger.prototype.log = function () {
-            this._log('log', arguments);
-        };
+    /**
+     * Outputs a message with appropriate type to the Web Console and
+     * store it in the history.
+     * @param  {String} logType The type of the log message.
+     * @param  {Arguments} args Information that will be stored.
+     */
+    Logger.prototype._log = function (logType, args) {
+        if (!this.logLevel) {
+            return false;
+        }
+        this.updateHistory.apply(this, arguments);
+        // Adds ID at the first place
+        Array.prototype.unshift.call(args, this.id);
+        if (console && console[logType]) {
+            if (console[logType].apply){
+                console[logType].apply(console, args);
+            } else { // Do this for IE
+                console[logType](args.join(' '));
+            }
+        }
+    };
 
-        /**
-         * Outputs an error message to the Web Console and store it in the history.
-         */
-        Logger.prototype.error = function () {
-            this._log('error', arguments);
-        };
+    /**
+     * Outputs a message to the Web Console and store it in the history.
+     */
+    Logger.prototype.log = function () {
+        this._log('log', arguments);
+    };
+
+    /**
+     * Outputs an error message to the Web Console and store it in the history.
+     */
+    Logger.prototype.error = function () {
+        this._log('error', arguments);
+    };
+
+    /**
+     * Adds information to the history.
+     */
+    Logger.prototype.updateHistory = function () {
+        this.historyStorage.push(arguments);
+    };
+
+    /**
+     * Returns the history for the logger.
+     * @return {Array}
+     */
+    Logger.prototype.getHistory = function () {
+        return this.historyStorage;
+    };
+
+    /**
+     * Starts a timer you can use to track how long an operation takes.
+     * @param {String} label Timer name.
+     */
+    Logger.prototype.time = function (label) {
+        this.timeStorage[label] = now();
+    };
+
+    /**
+     * Stops a timer that was previously started by calling Logger.prototype.time().
+     * @param {String} label Timer name.
+     */
+    Logger.prototype.timeEnd = function (label) {
+        if (!this.timeStorage[label]) {
+            return null;
+        }
 
-        /**
-         * Adds information to the history.
-         */
-        Logger.prototype.updateHistory = function () {
-            this._history.push(arguments);
-        };
+        this._log('log', [label, now() - this.timeStorage[label], 'ms']);
+        delete this.timeStorage[label];
+    };
 
-        /**
-         * Returns the history for the logger.
-         * @return {Array}
-         */
-        Logger.prototype.getHistory = function () {
-            return this._history;
-        };
+    Logger.prototype.destroy = function () {
+        destroyLogger(this);
+    }
 
-        return Logger;
-    });
+    return {
+        getLogger: function (id, mode) {
+            var logger = new Logger(id, mode);
+            loggers.push(logger);
+            return logger;
+        },
+        destroyLogger: destroyLogger
+    };
+});
 }).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/note_item.js b/lms/static/js/edxnotes/views/note_item.js
deleted file mode 100644
index 09b2c0f1b2db..000000000000
--- a/lms/static/js/edxnotes/views/note_item.js
+++ /dev/null
@@ -1,28 +0,0 @@
-;(function (define, gettext, undefined) {
-    'use strict';
-    define(['underscore', 'backbone'], function (_, Backbone) {
-        var NoteItemView = Backbone.View.extend({
-            tagName: 'article',
-            className: 'edx-notes-page-item',
-            id: function () {
-                return 'edx-notes-page-item-' + _.uniqueId();
-            },
-
-            initialize: function (options) {
-                this.template = _.template($('#note-item-tpl').text());
-            },
-
-            render: function () {
-                var context = this.model.toJSON();
-                this.$el.html(this.template(context));
-                return this;
-            },
-
-            destroy: function () {
-                this.remove();
-            }
-        });
-
-        return NoteItemView;
-    });
-}).call(this, define || RequireJS.define, gettext);
diff --git a/lms/static/js/edxnotes/views/notes.js b/lms/static/js/edxnotes/views/notes.js
deleted file mode 100644
index 196781295488..000000000000
--- a/lms/static/js/edxnotes/views/notes.js
+++ /dev/null
@@ -1,90 +0,0 @@
-;(function (define, undefined) {
-    'use strict';
-    define([
-         'jquery', 'underscore', 'annotator', 'js/edxnotes/utils/logger', 'js/edxnotes/views/shim'
-    ], function ($, _, Annotator, Logger) {
-        var plugins = ['Store'],
-            getOptions, setupPlugins, updateHeaders, getAnnotator;
-
-        /**
-         * Returns options for the annotator.
-         * @param {jQuery Element} The container element.
-         * @param {String} params.endpoint The endpoint of the store.
-         * @param {String} params.user User id of annotation owner.
-         * @param {String} params.usageId Usage Id of the component.
-         * @param {String} params.courseId Course id.
-         * @return {Object} Options.
-         **/
-        getOptions = function (element, params) {
-            var defaultParams = {
-                user: params.user,
-                usage_id: params.usageId,
-                course_id: params.courseId
-            };
-
-            return {
-                store: {
-                    prefix: params.endpoint,
-                    annotationData: defaultParams,
-                    loadFromSearch: defaultParams
-                }
-            };
-        };
-
-        /**
-         * Updates request headers.
-         * @param {jQuery Element} The container element.
-         * @param {String} token An authentication token.
-         **/
-        updateHeaders = function (element, token) {
-            var current = element.data('annotator:headers');
-            element.data('annotator:headers', $.extend(current, {
-              'x-annotator-auth-token': token
-            }));
-        };
-
-        /**
-         * Setups plugins for the annotator.
-         * @param {Object} annotator An instance of the annotator.
-         * @param {Array} plugins A list of plugins for the annotator.
-         * @param {Object} options An options for the annotator.
-         **/
-        setupPlugins = function (annotator, plugins, options) {
-            _.each(plugins, function(plugin) {
-                var settings = options[plugin.toLowerCase()];
-                annotator.addPlugin(plugin, settings);
-            }, this);
-        };
-
-        /**
-         * Factory method that returns Annotator.js instantiates.
-         * @param {DOM Element} element The container element.
-         * @param {String} params.endpoint The endpoint of the store.
-         * @param {String} params.user User id of annotation owner.
-         * @param {String} params.usageId Usage Id of the component.
-         * @param {String} params.courseId Course id.
-         * @param {String} params.token An authentication token.
-         * @return {Object} An instance of Annotator.js.
-         **/
-        getAnnotator = function (element, params) {
-            var el = $(element),
-                options = getOptions(el, params),
-                annotator = el.annotator(options).data('annotator'),
-                logger = new Logger(element.id, params.debug);
-
-            setupPlugins(annotator, plugins, options);
-            updateHeaders(el, params.token);
-            annotator.logger = logger;
-            logger.log({
-                'element': element,
-                'options': options,
-                'annotator': annotator
-            });
-            return annotator;
-        };
-
-        return {
-            factory: getAnnotator
-        };
-    });
-}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/notes_factory.js b/lms/static/js/edxnotes/views/notes_factory.js
new file mode 100644
index 000000000000..893319b8c1f4
--- /dev/null
+++ b/lms/static/js/edxnotes/views/notes_factory.js
@@ -0,0 +1,95 @@
+;(function (define, undefined) {
+'use strict';
+define([
+     'jquery', 'underscore', 'annotator', 'js/edxnotes/utils/logger', 'js/edxnotes/views/shim'
+], function ($, _, Annotator, Logger) {
+    var plugins = ['Store'],
+        getOptions, setupPlugins, updateHeaders, getAnnotator;
+
+    /**
+     * Returns options for the annotator.
+     * @param {jQuery Element} The container element.
+     * @param {String} params.endpoint The endpoint of the store.
+     * @param {String} params.user User id of annotation owner.
+     * @param {String} params.usageId Usage Id of the component.
+     * @param {String} params.courseId Course id.
+     * @return {Object} Options.
+     **/
+    getOptions = function (element, params) {
+        var defaultParams = {
+                user: params.user,
+                usage_id: params.usageId,
+                course_id: params.courseId
+            },
+            prefix = params.endpoint.replace(/(.+)\/$/, '$1');
+
+        return {
+            store: {
+                prefix: prefix,
+                annotationData: defaultParams,
+                loadFromSearch: defaultParams,
+                urls: {
+                    create:  '/annotations/',
+                    read:    '/annotations/:id/',
+                    update:  '/annotations/:id/',
+                    destroy: '/annotations/:id/',
+                    search:  '/search/'
+                }
+            }
+        };
+    };
+
+    /**
+     * Updates request headers.
+     * @param {jQuery Element} The container element.
+     * @param {String} token An authentication token.
+     **/
+    updateHeaders = function (element, token) {
+        var current = element.data('annotator:headers');
+        element.data('annotator:headers', $.extend(current, {
+          'x-annotator-auth-token': token
+        }));
+    };
+
+    /**
+     * Setups plugins for the annotator.
+     * @param {Object} annotator An instance of the annotator.
+     * @param {Array} plugins A list of plugins for the annotator.
+     * @param {Object} options An options for the annotator.
+     **/
+    setupPlugins = function (annotator, plugins, options) {
+        _.each(plugins, function(plugin) {
+            var settings = options[plugin.toLowerCase()];
+            annotator.addPlugin(plugin, settings);
+        }, this);
+    };
+
+    /**
+     * Factory method that returns Annotator.js instantiates.
+     * @param {DOM Element} element The container element.
+     * @param {String} params.endpoint The endpoint of the store.
+     * @param {String} params.user User id of annotation owner.
+     * @param {String} params.usageId Usage Id of the component.
+     * @param {String} params.courseId Course id.
+     * @param {String} params.token An authentication token.
+     * @return {Object} An instance of Annotator.js.
+     **/
+    getAnnotator = function (element, params) {
+        var el = $(element),
+            options = getOptions(el, params),
+            logger = Logger.getLogger(element.id, params.debug),
+            annotator;
+
+        updateHeaders(el, params.token);
+        annotator = el.annotator(options).data('annotator');
+        setupPlugins(annotator, plugins, options);
+        annotator.logger = logger;
+        logger.log({'element': element, 'options': options});
+        return annotator;
+    };
+
+    return {
+        factory: getAnnotator
+    };
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/notes_page.js b/lms/static/js/edxnotes/views/notes_page.js
index b7cd995e6a13..1c92bfd0f563 100644
--- a/lms/static/js/edxnotes/views/notes_page.js
+++ b/lms/static/js/edxnotes/views/notes_page.js
@@ -1,39 +1,37 @@
 ;(function (define, undefined) {
-    'use strict';
-    define([
-        'backbone', 'js/edxnotes/views/recent_activity_view'
-    ], function (Backbone, RecentActivityView) {
-        var NotesPageView = Backbone.View.extend({
-            initialize: function (options) {
-                this.options = options;
-            },
+'use strict';
+define([
+    'backbone', 'js/edxnotes/collections/tabs', 'js/edxnotes/views/tabs_list',
+    'js/edxnotes/views/tabs/recent_activity', 'js/edxnotes/views/tabs/search_results'
+], function (
+    Backbone, TabsCollection, TabsListView, RecentActivityView, SearchResultsView
+) {
+    var NotesPageView = Backbone.View.extend({
+        initialize: function (options) {
+            this.options = options;
+            this.tabsCollection = new TabsCollection();
+            this.recentActivityView = new RecentActivityView({
+                el: this.el,
+                collection: this.collection,
+                tabsCollection: this.tabsCollection
+            });
 
-            render: function () {
-                this.view = new RecentActivityView({
-                    collection: this.collection
-                }).render();
+            this.searchResultsView = new SearchResultsView({
+                el: this.el,
+                tabsCollection: this.tabsCollection,
+                user: this.options.user,
+                courseId: this.options.courseId,
+                debug: this.options.debug,
+                createTabOnInitialization: false
+            });
 
-                this.$('.course-info').append(this.view.$el);
-                this.hideLoadingIndicator();
-
-                return this;
-            },
-
-            /**
-             * Show the page's loading indicator.
-             */
-            showLoadingIndicator: function() {
-                this.$('.ui-loading').removeClass('is-hidden');
-            },
-
-            /**
-             * Hide the page's loading indicator.
-             */
-            hideLoadingIndicator: function() {
-                this.$('.ui-loading').addClass('is-hidden');
-            }
-        });
-
-        return NotesPageView;
+            this.tabsView = new TabsListView({collection: this.tabsCollection});
+            this.$('.edx-notes-page-views')
+                .append(this.tabsView.render().$el)
+                .removeClass('is-hidden');
+        }
     });
+
+    return NotesPageView;
+});
 }).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/page_factory.js b/lms/static/js/edxnotes/views/page_factory.js
index 3b5195567575..adba038d327f 100644
--- a/lms/static/js/edxnotes/views/page_factory.js
+++ b/lms/static/js/edxnotes/views/page_factory.js
@@ -1,31 +1,29 @@
 ;(function (define, undefined) {
-    'use strict';
-    define([
-        'jquery', 'js/edxnotes/collections/notes', 'js/edxnotes/views/notes_page'
-    ], function ($, NotesCollection, NotesPageView) {
-        /**
-         * Factory method for the Notes page.
-         * @param {Object} params Params for the Notes page.
-         * @param {Array} params.notesList A list of note models.
-         * @param {Boolean} params.debugMode Enable the flag to see debug information.
-         * @param {String} params.authToken An authentication token for the edx-notes-api.
-         * @param {String} params.user User id of notes owner.
-         * @param {String} params.courseId Course id.
-         * @param {String} params.endpoint The endpoint of the store.
-         * @return {Object} An instance of NotesPageView.
-         */
-        return function (params) {
-            var collection = new NotesCollection(params.notesList, {parse: true});
+'use strict';
+define([
+    'jquery', 'js/edxnotes/collections/notes', 'js/edxnotes/views/notes_page'
+], function ($, NotesCollection, NotesPageView) {
+    /**
+     * Factory method for the Notes page.
+     * @param {Object} params Params for the Notes page.
+     * @param {Array} params.notesList A list of note models.
+     * @param {Boolean} params.debugMode Enable the flag to see debug information.
+     * @param {String} params.user User id of notes owner.
+     * @param {String} params.courseId Course id.
+     * @param {String} params.endpoint The endpoint of the store.
+     * @return {Object} An instance of NotesPageView.
+     */
+    return function (params) {
+        var collection = new NotesCollection(params.notesList);
 
-            return new NotesPageView({
-                el: $('.edx-notes-page-wrapper'),
-                collection: collection,
-                debug: params.debugMode,
-                authToken: params.authToken,
-                user: params.user,
-                courseId: params.courseId,
-                endpoint: params.endpoint
-            }).render();
-        };
-    });
+        return new NotesPageView({
+            el: $('.edx-notes-page-wrapper').get(0),
+            collection: collection,
+            debug: params.debugMode,
+            user: params.user,
+            courseId: params.courseId,
+            endpoint: params.endpoint
+        });
+    };
+});
 }).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/recent_activity_view.js b/lms/static/js/edxnotes/views/recent_activity_view.js
deleted file mode 100644
index 2d065c77eb7e..000000000000
--- a/lms/static/js/edxnotes/views/recent_activity_view.js
+++ /dev/null
@@ -1,33 +0,0 @@
-;(function (define, undefined) {
-    'use strict';
-    define(['underscore', 'backbone', 'js/edxnotes/views/note_item'],
-    function (_, Backbone, NoteItemView) {
-        var RecentActivityView = Backbone.View.extend({
-            id: 'edx-notes-page-recent-activity',
-            className: 'edx-notes-page-items-list',
-
-            render: function () {
-                this.items = this.collection.map(function(model) {
-                    var item = new NoteItemView({
-                        model: model
-                    }).render();
-                    item.$el.appendTo(this.$el);
-                    return item;
-                }, this);
-
-                return this;
-            },
-
-            destroy: function () {
-                // Removes a view from the DOM, and calls stopListening to remove
-                // any bound events that the view has listenTo'd.
-                this.remove();
-                // Destroy all children.
-                _.invoke(this.items, 'destroy');
-                delete this['items'];
-            }
-        });
-
-        return RecentActivityView;
-    });
-}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/search_box.js b/lms/static/js/edxnotes/views/search_box.js
new file mode 100644
index 000000000000..58de5be7cbe2
--- /dev/null
+++ b/lms/static/js/edxnotes/views/search_box.js
@@ -0,0 +1,160 @@
+;(function (define, undefined) {
+'use strict';
+define([
+    'jquery', 'underscore', 'backbone', 'gettext', 'js/edxnotes/utils/logger',
+    'js/edxnotes/collections/notes'
+], function ($, _, Backbone, gettext, Logger, NotesCollection) {
+    var SearchBoxView = Backbone.View.extend({
+        events: {
+            'submit': 'submitHandler'
+        },
+
+        errorMessage: gettext('This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.'),
+        emptyFieldMessage: gettext('Search field cannot be blank.'),
+
+        initialize: function (options) {
+            _.bindAll(this, 'onSuccess', 'onError', 'onComplete');
+            this.options = _.defaults(options || {}, {
+                beforeSearchStart: function () {},
+                search: function () {},
+                error: function () {},
+                complete: function () {}
+            });
+            this.logger = Logger.getLogger('search_box', this.options.debug);
+            this.$el.removeClass('is-hidden');
+            this.isDisabled = false;
+            this.logger.log('initialized');
+        },
+
+        submitHandler: function (event) {
+            event.preventDefault();
+            this.search();
+        },
+
+        /**
+         * Prepares server response to appropriate structure.
+         * @param  {Object} data The response form the server.
+         * @return {Array}
+         */
+        prepareData: function (data) {
+            var collection;
+
+            if (!(data && _.has(data, 'total') && _.has(data, 'rows'))) {
+                this.logger.log('Wrong data', data, this.searchQuery);
+                return null;
+            }
+
+            collection = new NotesCollection(data.rows);
+            return [collection, data.total, this.searchQuery];
+        },
+
+        /**
+         * Returns search text.
+         * @return {String}
+         */
+        getSearchQuery: function () {
+            return this.$el.find('#search-field').val();
+        },
+
+        /**
+         * Starts search if form is not disabled.
+         * @return {Boolean} Indicates if search is started or not.
+         */
+        search: function () {
+            if (this.isDisabled) {
+                return false;
+            }
+
+            this.searchQuery = this.getSearchQuery();
+            if (!this.validateField(this.searchQuery)) {
+                return false;
+            }
+
+            this.options.beforeSearchStart(this.searchQuery);
+            this.disableForm();
+            this.sendRequest(this.searchQuery)
+                .done(this.onSuccess)
+                .fail(this.onError)
+                .complete(this.onComplete);
+
+            return true;
+        },
+
+        validateField: function (searchQuery) {
+            if (!($.trim(searchQuery))) {
+                this.options.error(this.emptyFieldMessage, searchQuery);
+                return false;
+            }
+            return true;
+        },
+
+        onSuccess: function (data) {
+            var args = this.prepareData(data);
+            if (args) {
+                this.options.search.apply(this, args);
+                this.logger.log('Successful response', args);
+            } else {
+                this.options.error(this.errorMessage, this.searchQuery);
+            }
+        },
+
+        onError:function (jXHR) {
+            var searchQuery = this.getSearchQuery(),
+                message;
+
+            if (jXHR.responseText) {
+                try {
+                    message = $.parseJSON(jXHR.responseText).error;
+                } catch (error) { }
+            }
+
+            this.options.error(message || this.errorMessage, searchQuery);
+            this.logger.log('Response fails', jXHR.responseText);
+        },
+
+        onComplete: function () {
+            this.enableForm();
+            this.options.complete(this.searchQuery);
+        },
+
+        enableForm: function () {
+            this.isDisabled = false;
+            this.$el.removeClass('is-looking');
+            this.$('button[type=submit]').removeClass('is-disabled');
+        },
+
+        disableForm: function () {
+            this.isDisabled = true;
+            this.$el.addClass('is-looking');
+            this.$('button[type=submit]').addClass('is-disabled');
+        },
+
+        /**
+         * Sends a request with appropriate configurations.
+         * @param  {String} text Search query.
+         * @return {jQuery.Deferred}
+         */
+        sendRequest: function (text) {
+            this.logger.log('sendRequest', {
+                action: this.el.action,
+                method: this.el.method,
+                user: this.options.user,
+                course_id: this.options.courseId,
+                text: text
+            });
+            return $.ajax({
+                url: this.el.action,
+                type: this.el.method,
+                dataType: 'json',
+                data: {
+                    user: this.options.user,
+                    course_id: this.options.courseId,
+                    text: text
+                }
+            });
+        }
+    });
+
+    return SearchBoxView;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/shim.js b/lms/static/js/edxnotes/views/shim.js
index 2e92109694f6..cd093f1602fb 100644
--- a/lms/static/js/edxnotes/views/shim.js
+++ b/lms/static/js/edxnotes/views/shim.js
@@ -1,133 +1,137 @@
-;(function (define, $, _, undefined) {
-    'use strict';
-    define(['annotator'], function (Annotator) {
-        var _t = Annotator._t;
+;(function (define, undefined) {
+'use strict';
+define(['jquery', 'underscore', 'annotator'], function ($, _, Annotator) {
+    var _t = Annotator._t;
 
-        /**
-         * We currently run JQuery 1.7.2 in Jasmine tests and LMS.
-         * AnnotatorJS 1.2.9. uses two calls to addBack (in the two functions
-         * 'isAnnotator' and 'onHighlightMouseover') which was only defined in
-         * JQuery 1.8.0. In LMS, it works without throwing an error because
-         * JQuery.UI 1.10.0 adds support to jQuery<1.8 by augmenting '$.fn' with
-         * that missing function. It is not the case for all Jasmine unit tests,
-         * so we add it here if necessary.
-         **/
-        if (!$.fn.addBack) {
-            $.fn.addBack = function(selector) {
-                return this.add(selector === null ?
-                        this.prevObject : this.prevObject.filter(selector)
-                );
-            };
-        }
+    /**
+     * We currently run JQuery 1.7.2 in Jasmine tests and LMS.
+     * AnnotatorJS 1.2.9. uses two calls to addBack (in the two functions
+     * 'isAnnotator' and 'onHighlightMouseover') which was only defined in
+     * JQuery 1.8.0. In LMS, it works without throwing an error because
+     * JQuery.UI 1.10.0 adds support to jQuery<1.8 by augmenting '$.fn' with
+     * that missing function. It is not the case for all Jasmine unit tests,
+     * so we add it here if necessary.
+     **/
+    if (!$.fn.addBack) {
+        $.fn.addBack = function(selector) {
+            return this.add(selector === null ?
+                    this.prevObject : this.prevObject.filter(selector)
+            );
+        };
+    }
 
-        Annotator.frozenSrc = null;
+    Annotator.frozenSrc = null;
 
-        /**
-         * Modifies Annotator.highlightRange to add a "tabindex=0" attribute
-         * to the <span class="annotator-hl"> markup that encloses the note.
-         * These are then focusable via the TAB key.
-         **/
-        Annotator.prototype.highlightRange = _.compose(
-            function (results) {
-                $('.annotator-hl', this.wrapper).attr('tabindex', 0);
-                return results;
-            },
-            Annotator.prototype.highlightRange
-        );
+    /**
+     * Modifies Annotator.highlightRange to add a "tabindex=0" attribute
+     * to the <span class="annotator-hl"> markup that encloses the note.
+     * These are then focusable via the TAB key.
+     **/
+    Annotator.prototype.highlightRange = _.compose(
+        function (results) {
+            $('.annotator-hl', this.wrapper).attr('tabindex', 0);
+            return results;
+        },
+        Annotator.prototype.highlightRange
+    );
 
-        /**
-         * Modifies Annotator.destroy to unbind click.edxnotes:freeze from the
-         * document and reset isFrozen to default value, false.
-         **/
-        Annotator.prototype.destroy = _.compose(
-            Annotator.prototype.destroy,
-            function () {
-                // We are destroying the instance that has the popup visible, revert to default,
-                // unfreeze all instances and set their isFrozen to false
-                if (this === Annotator.frozenSrc) {
-                    _.invoke(Annotator._instances, 'unfreeze');
-                } else {
-                    // Unfreeze only this instance and unbound associated 'click.edxnotes:freeze' handler
-                    $(document).off('click.edxnotes:freeze'+this.uid);
-                    this.isFrozen = false;
-                }
+    /**
+     * Modifies Annotator.destroy to unbind click.edxnotes:freeze from the
+     * document and reset isFrozen to default value, false.
+     **/
+    Annotator.prototype.destroy = _.compose(
+        Annotator.prototype.destroy,
+        function () {
+            // We are destroying the instance that has the popup visible, revert to default,
+            // unfreeze all instances and set their isFrozen to false
+            if (this === Annotator.frozenSrc) {
+                _.invoke(Annotator._instances, 'unfreeze');
+            } else {
+                // Unfreeze only this instance and unbound associated 'click.edxnotes:freeze' handler
+                $(document).off('click.edxnotes:freeze' + this.uid);
+                this.isFrozen = false;
             }
-        );
 
-        /**
-         * Modifies Annotator.Viewer.html.item template to add an i18n for the
-         * buttons.
-         **/
-        Annotator.Viewer.prototype.html.item = [
-            '<li class="annotator-annotation annotator-item">',
-              '<span class="annotator-controls">',
-                '<a href="#" title="', _t('View as webpage'), '" class="annotator-link">',
-                    _t('View as webpage'),
-                '</a>',
-                '<button title="', _t('Edit'), '" class="annotator-edit">',
-                    _t('Edit'),
-                '</button>',
-                '<button title="', _t('Delete'), '" class="annotator-delete">',
-                    _t('Delete'),
-                '</button>',
-              '</span>',
-            '</li>'
-        ].join('');
+            if (this.logger && this.logger.destroy) {
+                this.logger.destroy();
+            }
+        }
+    );
 
-        $.extend(true, Annotator.prototype, {
-            events: {
-                '.annotator-hl click': 'onHighlightClick',
-                '.annotator-viewer click': 'onNoteClick'
-            },
+    /**
+     * Modifies Annotator.Viewer.html.item template to add an i18n for the
+     * buttons.
+     **/
+    Annotator.Viewer.prototype.html.item = [
+        '<li class="annotator-annotation annotator-item">',
+          '<span class="annotator-controls">',
+            '<a href="#" title="', _t('View as webpage'), '" class="annotator-link">',
+                _t('View as webpage'),
+            '</a>',
+            '<button title="', _t('Edit'), '" class="annotator-edit">',
+                _t('Edit'),
+            '</button>',
+            '<button title="', _t('Delete'), '" class="annotator-delete">',
+                _t('Delete'),
+            '</button>',
+          '</span>',
+        '</li>'
+    ].join('');
 
-            isFrozen: false,
-            uid: _.uniqueId(),
+    $.extend(true, Annotator.prototype, {
+        events: {
+            '.annotator-hl click': 'onHighlightClick',
+            '.annotator-viewer click': 'onNoteClick'
+        },
 
-            onHighlightClick: function (event) {
-                Annotator.Util.preventEventDefault(event);
+        isFrozen: false,
+        uid: _.uniqueId(),
 
-                if (!this.isFrozen) {
-                    event.stopPropagation();
-                    this.onHighlightMouseover.call(this, event);
-                }
-                Annotator.frozenSrc = this;
-                _.invoke(Annotator._instances, 'freeze');
-            },
+        onHighlightClick: function (event) {
+            Annotator.Util.preventEventDefault(event);
 
-            onNoteClick: function (event) {
+            if (!this.isFrozen) {
                 event.stopPropagation();
-                Annotator.Util.preventEventDefault(event);
-                if (!$(event.target).is('.annotator-delete')) {
-                    Annotator.frozenSrc = this;
-                    _.invoke(Annotator._instances, 'freeze');
-                }
-            },
+                this.onHighlightMouseover.call(this, event);
+            }
+            Annotator.frozenSrc = this;
+            _.invoke(Annotator._instances, 'freeze');
+        },
 
-            freeze: function() {
-                if (!this.isFrozen) {
-                    // Remove default events
-                    this.removeEvents();
-                    this.viewer.element.unbind('mouseover mouseout');
-                    this.uid = _.uniqueId();
-                    $(document).on('click.edxnotes:freeze'+this.uid, this.unfreeze.bind(this));
-                    this.isFrozen = true;
-                }
-            },
+        onNoteClick: function (event) {
+            event.stopPropagation();
+            Annotator.Util.preventEventDefault(event);
+            if (!$(event.target).is('.annotator-delete')) {
+                Annotator.frozenSrc = this;
+                _.invoke(Annotator._instances, 'freeze');
+            }
+        },
 
-            unfreeze: function() {
-                if (this.isFrozen) {
-                    // Add default events
-                    this.addEvents();
-                    this.viewer.element.bind({
-                        'mouseover': this.clearViewerHideTimer,
-                        'mouseout':  this.startViewerHideTimer
-                    });
-                    this.viewer.hide();
-                    $(document).off('click.edxnotes:freeze'+this.uid);
-                    this.isFrozen = false;
-                    Annotator.frozenSrc = null;
-                }
+        freeze: function() {
+            if (!this.isFrozen) {
+                // Remove default events
+                this.removeEvents();
+                this.viewer.element.unbind('mouseover mouseout');
+                this.uid = _.uniqueId();
+                $(document).on('click.edxnotes:freeze'+this.uid, this.unfreeze.bind(this));
+                this.isFrozen = true;
             }
-        });
+        },
+
+        unfreeze: function() {
+            if (this.isFrozen) {
+                // Add default events
+                this.addEvents();
+                this.viewer.element.bind({
+                    'mouseover': this.clearViewerHideTimer,
+                    'mouseout':  this.startViewerHideTimer
+                });
+                this.viewer.hide();
+                $(document).off('click.edxnotes:freeze'+this.uid);
+                this.isFrozen = false;
+                Annotator.frozenSrc = null;
+            }
+        }
     });
-}).call(this, define || RequireJS.define, jQuery, _);
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/subview.js b/lms/static/js/edxnotes/views/subview.js
new file mode 100644
index 000000000000..89e12634c1e8
--- /dev/null
+++ b/lms/static/js/edxnotes/views/subview.js
@@ -0,0 +1,33 @@
+;(function (define, undefined) {
+'use strict';
+define(['underscore', 'backbone'],
+function (_, Backbone) {
+    var SubView = Backbone.View.extend({
+        className: 'edx-notes-page-items-list',
+        templateName: '',
+        initialize: function (options) {
+            this.options = options;
+            if (this.templateName) {
+                this.template = this.loadTemplate(this.templateName);
+            }
+        },
+
+        render: function () {
+            return this;
+        },
+
+        loadTemplate: function (name) {
+            var templateSelector = "#" + name + "-tpl",
+                templateText = $(templateSelector).text();
+
+            if (!templateText) {
+                console.error("Failed to load " + name + " template");
+            }
+
+            return _.template(templateText);
+        }
+    });
+
+    return SubView;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/tab_item.js b/lms/static/js/edxnotes/views/tab_item.js
new file mode 100644
index 000000000000..55c7f308aa85
--- /dev/null
+++ b/lms/static/js/edxnotes/views/tab_item.js
@@ -0,0 +1,62 @@
+;(function (define, undefined) {
+'use strict';
+define(['gettext', 'underscore', 'backbone'],
+function (gettext, _, Backbone) {
+    var TabItemView = Backbone.View.extend({
+        tagName: 'li',
+        className: 'tab-item',
+        activeClassName: 'is-active',
+
+        events: {
+            'click': 'selectHandler',
+            'click a': function (event) { event.preventDefault(); },
+            'click .btn-close': 'closeHandler'
+        },
+
+        initialize: function (options) {
+            this.template = _.template($('#tab-item-tpl').text());
+            this.options = options;
+            this.$el.addClass(this.model.get('class_name'));
+            this.bindEvents();
+        },
+
+        render: function () {
+            var html = this.template(this.model.toJSON());
+            this.$el.html(html);
+            return this;
+        },
+
+        bindEvents: function () {
+            this.model.on({
+                'change:is_active': function (model, value) {
+                    this.$el.toggleClass(this.activeClassName, value);
+                },
+                'destroy': this.remove
+            }, this);
+        },
+
+        selectHandler: function (event) {
+            event.preventDefault();
+            if (!this.model.isActive()) {
+                this.select();
+            }
+        },
+
+        closeHandler: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+        },
+
+        select: function () {
+            this.model.activate();
+        },
+
+        close: function () {
+            this.model.destroy();
+        }
+    });
+
+    return TabItemView;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/tab_view.js b/lms/static/js/edxnotes/views/tab_view.js
new file mode 100644
index 000000000000..59fdd6879ae3
--- /dev/null
+++ b/lms/static/js/edxnotes/views/tab_view.js
@@ -0,0 +1,122 @@
+;(function (define, undefined) {
+'use strict';
+define([
+    'underscore', 'backbone', 'js/edxnotes/models/tab'
+], function (_, Backbone, TabModel) {
+    var TabView = Backbone.View.extend({
+        SubViewConstructor: null,
+
+        tabInfo: {
+            name: '',
+            class_name: ''
+        },
+
+        initialize: function (options) {
+            _.bindAll(this, 'showLoadingIndicator', 'hideLoadingIndicator');
+            this.options = _.defaults(options || {}, {
+                createTabOnInitialization: true
+            });
+
+            if (this.options.createTabOnInitialization) {
+                this.createTab();
+            }
+        },
+
+        /**
+         * Creates a tab for the view.
+         */
+        createTab: function () {
+            this.tabModel = new TabModel(this.tabInfo);
+            this.options.tabsCollection.add(this.tabModel);
+            this.tabModel.on({
+                'change:is_active': function (model, value) {
+                    if (value) {
+                        this.render();
+                    } else {
+                        this.destroySubView();
+                    }
+                },
+                'destroy': function () {
+                    this.destroySubView();
+                    this.tabModel = null;
+                    this.onClose();
+                }
+            }, this);
+        },
+
+        /**
+         * Renders content for the view.
+         */
+        render: function () {
+            this.showLoadingIndicator();
+            // If the view is already rendered, destroy it.
+            this.destroySubView();
+            this.renderContent().always(this.hideLoadingIndicator);
+            return this;
+        },
+
+        renderContent: function () {
+            var contentView = this.getSubView();
+            this.$('.course-info').append(contentView.render().$el);
+            return $.Deferred().resolve().promise();
+        },
+
+        getSubView: function () {
+            var collection = this.getCollection();
+            return new this.SubViewConstructor({collection: collection});
+        },
+
+        destroySubView: function () {
+            this.$('.edx-notes-page-items-list').remove();
+        },
+
+        /**
+         * Returns collection for the view.
+         * @return {Backbone.Collection}
+         */
+        getCollection: function () {
+            return this.collection;
+        },
+
+        /**
+         * Callback that is called on closing the tab.
+         */
+        onClose: function () { },
+
+        /**
+         * Shows the page's loading indicator.
+         */
+        showLoadingIndicator: function() {
+            this.$('.ui-loading').removeClass('is-hidden');
+        },
+
+        /**
+         * Hides the page's loading indicator.
+         */
+        hideLoadingIndicator: function() {
+            this.$('.ui-loading').addClass('is-hidden');
+        },
+
+
+        /**
+         * Shows error message.
+         */
+        showErrorMessage: function (message) {
+            this.$('.inline-error')
+                .text(message)
+                .removeClass('is-hidden');
+        },
+
+        /**
+         * Hides error message.
+         */
+        hideErrorMessage: function () {
+            this.$('.inline-error')
+                .text('')
+                .addClass('is-hidden');
+        }
+    });
+
+    return TabView;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/tabs/recent_activity.js b/lms/static/js/edxnotes/views/tabs/recent_activity.js
new file mode 100644
index 000000000000..4d3740887194
--- /dev/null
+++ b/lms/static/js/edxnotes/views/tabs/recent_activity.js
@@ -0,0 +1,25 @@
+;(function (define, undefined) {
+'use strict';
+define([
+    'gettext', 'js/edxnotes/views/subview', 'js/edxnotes/views/tab_view'
+], function (gettext, SubView, TabView) {
+    var RecentActivityView = TabView.extend({
+        SubViewConstructor: SubView.extend({
+            id: 'edx-notes-page-recent-activity',
+            templateName: 'recent-activity-item',
+            render: function () {
+                this.$el.html(this.template({collection: this.collection}));
+
+                return this;
+            }
+        }),
+
+        tabInfo: {
+            name: gettext('Recent Activity'),
+            class_name: 'tab-recent-activity'
+        }
+    });
+
+    return RecentActivityView;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/tabs/search_results.js b/lms/static/js/edxnotes/views/tabs/search_results.js
new file mode 100644
index 000000000000..040900d908f8
--- /dev/null
+++ b/lms/static/js/edxnotes/views/tabs/search_results.js
@@ -0,0 +1,135 @@
+;(function (define, undefined) {
+'use strict';
+define([
+    'gettext', 'js/edxnotes/views/subview', 'js/edxnotes/views/tab_view',
+    'js/edxnotes/views/search_box', 'jquery.highlight'
+], function (gettext, SubView, TabView, SearchBoxView) {
+    var SearchResultsView = TabView.extend({
+        SubViewConstructor: SubView.extend({
+            id: 'edx-notes-page-search-results',
+            highlightMatchedText: true,
+            templateName: 'recent-activity-item',
+            render: function () {
+                this.$el.html(this.template({collection: this.collection}));
+
+                if (this.highlightMatchedText) {
+                    this.$('.edx-notes-item-text').highlight(this.options.searchQuery, {
+                        element: 'span',
+                        className: 'edx-notes-highlight',
+                        caseSensitive: false
+                    });
+                }
+                return this;
+            }
+        }),
+
+        NoResultsViewConstructor: SubView.extend({
+            id: 'edx-notes-page-no-search-results',
+            render: function () {
+                var message = gettext('No results found for "%(query_string)s".');
+                this.$el.html(interpolate(message, {
+                    query_string: this.options.searchQuery
+                }, true));
+                return this;
+            }
+        }),
+
+        tabInfo: {
+            name: gettext('Search Results'),
+            class_name: 'tab-search-results',
+            is_closable: true
+        },
+
+        initialize: function (options) {
+            _.bindAll(this, 'onBeforeSearchStart', 'onSearch', 'onSearchError');
+            TabView.prototype.initialize.call(this, options);
+            this.searchResults = null;
+            this.searchBox = new SearchBoxView({
+                el: this.$('form.search-box').get(0),
+                user: this.options.user,
+                courseId: this.options.courseId,
+                debug: this.options.debug,
+                beforeSearchStart: this.onBeforeSearchStart,
+                search: this.onSearch,
+                error: this.onSearchError
+            });
+        },
+
+        renderContent: function () {
+            return this.searchPromise.done(_.bind(function () {
+                var contentView = this.getSubView();
+                if (contentView) {
+                    this.$('.course-info').append(contentView.render().$el);
+                }
+            }, this));
+        },
+
+        getSubView: function () {
+            var collection = this.getCollection();
+            if (collection) {
+                if (collection.length) {
+                    return new this.SubViewConstructor({
+                        collection: collection,
+                        searchQuery: this.searchResults.searchQuery
+                    });
+                } else {
+                    return new this.NoResultsViewConstructor({
+                        searchQuery: this.searchResults.searchQuery
+                    });
+                }
+            }
+
+            return null;
+        },
+
+        getCollection: function () {
+            if (this.searchResults) {
+                return this.searchResults.collection;
+            }
+
+            return null;
+        },
+
+        onClose: function () {
+            this.searchResults = null;
+        },
+
+        onBeforeSearchStart: function () {
+            this.searchDeferred = $.Deferred();
+            this.searchPromise = this.searchDeferred.promise();
+            this.hideErrorMessage();
+            this.searchResults = null;
+            // If tab doesn't exist, creates it.
+            if (!this.tabModel) {
+                this.createTab();
+            }
+            // If tab is not already active, makes it active
+            if (!this.tabModel.isActive()) {
+                this.tabModel.activate();
+            } else {
+                this.render();
+            }
+        },
+
+        onSearch: function (collection, total, searchQuery) {
+            this.searchResults = {
+                collection: collection,
+                total: total,
+                searchQuery: searchQuery
+            };
+            if (this.searchDeferred) {
+                this.searchDeferred.resolve();
+            }
+        },
+
+        onSearchError: function (errorMessage) {
+            this.showErrorMessage(errorMessage);
+            if (this.searchDeferred) {
+                this.searchDeferred.reject();
+            }
+        }
+    });
+
+    return SearchResultsView;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/edxnotes/views/tabs_list.js b/lms/static/js/edxnotes/views/tabs_list.js
new file mode 100644
index 000000000000..a6397bd80f03
--- /dev/null
+++ b/lms/static/js/edxnotes/views/tabs_list.js
@@ -0,0 +1,41 @@
+;(function (define, undefined) {
+'use strict';
+define([
+    'underscore', 'backbone', 'js/edxnotes/views/tab_item'
+], function (_, Backbone, TabItemView) {
+    var TabsListView = Backbone.View.extend({
+        tagName: 'ul',
+        className: 'tabs',
+
+        initialize: function (options) {
+            this.options = options;
+            this.collection.on({
+                'add': this.createTab,
+                'destroy': function (model, collection) {
+                    if (model.isActive() && collection.length) {
+                        collection.at(0).activate();
+                    }
+                }
+            }, this);
+        },
+
+        render: function () {
+            this.collection.each(this.createTab, this);
+            if (this.collection.length) {
+                this.collection.at(0).activate();
+            }
+            return this;
+        },
+
+        createTab: function (model) {
+            var tab = new TabItemView({
+                model: model
+            });
+            tab.render().$el.appendTo(this.$el);
+            return tab;
+        }
+    });
+
+    return TabsListView;
+});
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/fixtures/edxnotes/edxnotes.html b/lms/static/js/fixtures/edxnotes/edxnotes.html
index 9fa2c15ed389..f4ee0678000d 100644
--- a/lms/static/js/fixtures/edxnotes/edxnotes.html
+++ b/lms/static/js/fixtures/edxnotes/edxnotes.html
@@ -1,6 +1,23 @@
-<div id="edx-notes-wrapper-123" class="edx-notes-wrapper">
-    Annotate it!
-</div>
-<div id="edx-notes-wrapper-456" class="edx-notes-wrapper">
-    Annotate it!
+<div class="edx-notes-page-wrapper">
+    <header>
+        <div class="page-title">
+            <h1>Notes</h1>
+            <small>Highlights and personal notes you've made within the course</small>
+        </div>
+        <form method="GET" action="/search_endpoint" class="is-hidden search-box">
+            <button type="submit">Search</button>
+            <input name="text" id="search-field" required placeholder="Search Notes for..." />
+        </form>
+    </header>
+    <nav class="edx-notes-page-views is-hidden">
+        <h4>View notes by:</h4>
+    </nav>
+    <div class="container">
+        <div class="course-info">
+            <div class="inline-error is-hidden"></div>
+            <div class="ui-loading">
+                <p><span class="spin"><i class="icon-refresh"></i></span> <span class="copy">Loading...</span></p>
+            </div>
+        </div>
+    </div>
 </div>
diff --git a/lms/static/js/fixtures/edxnotes/edxnotes_wrapper.html b/lms/static/js/fixtures/edxnotes/edxnotes_wrapper.html
new file mode 100644
index 000000000000..9fa2c15ed389
--- /dev/null
+++ b/lms/static/js/fixtures/edxnotes/edxnotes_wrapper.html
@@ -0,0 +1,6 @@
+<div id="edx-notes-wrapper-123" class="edx-notes-wrapper">
+    Annotate it!
+</div>
+<div id="edx-notes-wrapper-456" class="edx-notes-wrapper">
+    Annotate it!
+</div>
diff --git a/lms/static/js/spec/edxnotes/custom_matchers.js b/lms/static/js/spec/edxnotes/custom_matchers.js
new file mode 100644
index 000000000000..d3d645d6b9f0
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/custom_matchers.js
@@ -0,0 +1,28 @@
+define(['jquery'], function($) {
+    'use strict';
+    return function (that) {
+        that.addMatchers({
+            toContainText: function (text) {
+                var trimmedText = $.trim($(this.actual).text());
+
+                if (text && $.isFunction(text.test)) {
+                  return text.test(trimmedText);
+                } else {
+                  return trimmedText.indexOf(text) !== -1;
+                }
+            },
+
+            toHaveLength: function (number) {
+                return $(this.actual).length === number;
+            },
+
+            toHaveIndex: function (number) {
+                return $(this.actual).index() === number;
+            },
+
+            toBeInRange: function (min, max) {
+                return min <= this.actual && this.actual <= max;
+            }
+        });
+    };
+});
diff --git a/lms/static/js/spec/edxnotes/models/tab_spec.js b/lms/static/js/spec/edxnotes/models/tab_spec.js
new file mode 100644
index 000000000000..00e410b80ea6
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/models/tab_spec.js
@@ -0,0 +1,33 @@
+define([
+    'js/edxnotes/collections/tabs'
+], function(TabsCollection) {
+    'use strict';
+    describe('EdxNotes TabModel', function() {
+        beforeEach(function () {
+            this.collection = new TabsCollection([{}, {}, {}]);
+        });
+
+        it('when activate current model, all other models are inactivated', function () {
+            this.collection.at(1).activate();
+            expect(this.collection.at(1).get('is_active')).toBeTruthy();
+            expect(this.collection.at(0).get('is_active')).toBeFalsy();
+            expect(this.collection.at(2).get('is_active')).toBeFalsy();
+        });
+
+        it('can inactivate current model', function () {
+            var model = this.collection.at(0);
+            model.activate();
+            expect(model.get('is_active')).toBeTruthy();
+            model.inactivate();
+            expect(model.get('is_active')).toBeFalsy();
+        });
+
+        it('can see correct activity status via isActive', function () {
+            var model = this.collection.at(0);
+            model.activate();
+            expect(model.isActive()).toBeTruthy();
+            model.inactivate();
+            expect(model.isActive()).toBeFalsy();
+        });
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/notes_factory_spec.js b/lms/static/js/spec/edxnotes/notes_factory_spec.js
new file mode 100644
index 000000000000..033b2995d052
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/notes_factory_spec.js
@@ -0,0 +1,38 @@
+define([
+    'jquery', 'js/edxnotes/views/notes_factory', 'js/common_helpers/ajax_helpers',
+    'jasmine-jquery'
+],
+function($, Notes, AjaxHelpers) {
+    'use strict';
+    describe('EdxNotes Notes', function() {
+        var wrapper;
+
+        beforeEach(function() {
+            loadFixtures('js/fixtures/edxnotes/edxnotes_wrapper.html');
+            wrapper = $('div#edx-notes-wrapper-123');
+        });
+
+        it('Tests that annotator is initialized with options correctly', function() {
+            var requests = AjaxHelpers.requests(this),
+                internalOptions = {
+                    user: 'a user',
+                    usage_id : 'an usage',
+                    course_id: 'a course'
+                },
+                annotator = Notes.factory(wrapper[0], {
+                    endpoint: 'test_endpoint',
+                    user: 'a user',
+                    usageId : 'an usage',
+                    courseId: 'a course',
+                    token: 'test_token'
+                }),
+                request = requests[0];
+
+            expect(requests.length).toBe(1);
+            expect(request.requestHeaders['x-annotator-auth-token']).toBe('test_token');
+            expect(annotator.options.store.prefix).toBe('test_endpoint');
+            expect(annotator.options.store.annotationData).toEqual(internalOptions);
+            expect(annotator.options.store.loadFromSearch).toEqual(internalOptions);
+        });
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/notes_spec.js b/lms/static/js/spec/edxnotes/notes_spec.js
deleted file mode 100644
index 73bbd8c689f9..000000000000
--- a/lms/static/js/spec/edxnotes/notes_spec.js
+++ /dev/null
@@ -1,35 +0,0 @@
-define(['jquery', 'js/edxnotes/views/notes', 'jasmine-jquery'],
-    function($, Notes) {
-        'use strict';
-
-        describe('Test notes', function() {
-            var wrapper;
-
-            beforeEach(function() {
-                loadFixtures('js/fixtures/edxnotes/edxnotes.html');
-                wrapper = $('div#edx-notes-wrapper-123');
-            });
-
-            it('Tests that annotator is initialized with options correctly', function() {
-                var annotator, internalOptions;
-
-                internalOptions = {
-                    user: 'a user',
-                    usage_id : 'an usage',
-                    course_id: 'a course'
-                };
-
-                annotator = Notes.factory(wrapper[0], {
-                    endpoint: 'a prefix',
-                    user: 'a user',
-                    usageId : 'an usage',
-                    courseId: 'a course'
-                });
-
-                expect(annotator.options.store.prefix).toBe('a prefix');
-                expect(annotator.options.store.annotationData).toEqual(internalOptions);
-                expect(annotator.options.store.loadFromSearch).toEqual(internalOptions);
-            });
-        });
-    }
-);
diff --git a/lms/static/js/spec/edxnotes/shim_spec.js b/lms/static/js/spec/edxnotes/shim_spec.js
index 83b2444c5ce5..81fd684256f4 100644
--- a/lms/static/js/spec/edxnotes/shim_spec.js
+++ b/lms/static/js/spec/edxnotes/shim_spec.js
@@ -1,111 +1,111 @@
-define(['jquery', 'underscore', 'js/edxnotes/notes', 'jasmine-jquery'],
-    function($, _, Notes) {
-        'use strict';
-
-        describe('Test Shim', function() {
-            var annotators = [], highlights = [];
-
-            function checkAnnotatorIsFrozen(annotator) {
-                expect(annotator.isFrozen).toBe(true);
-                expect(annotator.onHighlightMouseover).not.toHaveBeenCalled();
-                expect(annotator.startViewerHideTimer).not.toHaveBeenCalled();
-            }
-
-            function checkAnnotatorIsUnfrozen(annotator) {
-                expect(annotator.isFrozen).toBe(false);
-                expect(annotator.onHighlightMouseover).toHaveBeenCalled();
-                expect(annotator.startViewerHideTimer).toHaveBeenCalled();
-            }
-
-            function checkClickEventsNotBound(namespace) {
-                var events = $._data(document, 'events').click;
-
-                _.each(events, function(event) {
-                    expect(event.namespace.indexOf(namespace)).toBeGreaterThan(-1);
-                });
-            }
-
-            beforeEach(function() {
-                loadFixtures('js/fixtures/edxnotes/edxnotes.html');
-                highlights = [];
-                annotators = [
-                    Notes.factory($('div#edx-notes-wrapper-123').get(0), {}),
-                    Notes.factory($('div#edx-notes-wrapper-456').get(0), {})
-                ];
-                _.each(annotators, function(annotator, index) {
-                    highlights.push($('<span class="annotator-hl" />').appendTo(annotators[index].element));
-                    spyOn(annotator, 'onHighlightClick').andCallThrough();
-                    spyOn(annotator, 'onHighlightMouseover').andCallThrough();
-                    spyOn(annotator, 'startViewerHideTimer').andCallThrough();
-                });
+define(['jquery', 'underscore', 'js/edxnotes/views/notes_factory', 'jasmine-jquery'],
+function($, _, Notes) {
+    'use strict';
+    describe('EdxNotes Shim', function() {
+        var annotators, highlights;
+
+        function checkAnnotatorIsFrozen(annotator) {
+            expect(annotator.isFrozen).toBe(true);
+            expect(annotator.onHighlightMouseover).not.toHaveBeenCalled();
+            expect(annotator.startViewerHideTimer).not.toHaveBeenCalled();
+        }
+
+        function checkAnnotatorIsUnfrozen(annotator) {
+            expect(annotator.isFrozen).toBe(false);
+            expect(annotator.onHighlightMouseover).toHaveBeenCalled();
+            expect(annotator.startViewerHideTimer).toHaveBeenCalled();
+        }
+
+        function checkClickEventsNotBound(namespace) {
+            var events = $._data(document, 'events').click;
+
+            _.each(events, function(event) {
+                expect(event.namespace.indexOf(namespace)).toBe(-1);
             });
-
-            it('Test that clicking a highlight freezes mouseover and mouseout in all highlighted text', function() {
-                _.each(annotators, function(annotator) {
-                    expect(annotator.isFrozen).toBe(false);
-                });
-                highlights[0].click();
-                // Click is attached to the onHighlightClick event handler which
-                // in turn calls onHighlightMouseover.
-                // To test if onHighlightMouseover is called or not on
-                // mouseover, we'll have to reset onHighlightMouseover.
-                expect(annotators[0].onHighlightClick).toHaveBeenCalled();
-                expect(annotators[0].onHighlightMouseover).toHaveBeenCalled();
-                annotators[0].onHighlightMouseover.reset();
-
-                // Check that both instances of annotator are frozen
-                _.invoke(highlights, 'mouseover');
-                _.invoke(highlights, 'mouseout');
-                _.each(annotators, function(annotator) {
-                    checkAnnotatorIsFrozen(annotator);
-                });
+        }
+
+        beforeEach(function() {
+            loadFixtures('js/fixtures/edxnotes/edxnotes_wrapper.html');
+            highlights = [];
+            annotators = [
+                Notes.factory($('div#edx-notes-wrapper-123').get(0), {
+                    endpoint: 'http://example.com/'
+                }),
+                Notes.factory($('div#edx-notes-wrapper-456').get(0), {
+                    endpoint: 'http://example.com/'
+                })
+            ];
+            _.each(annotators, function(annotator, index) {
+                highlights.push($('<span class="annotator-hl" />').appendTo(annotators[index].element));
+                spyOn(annotator, 'onHighlightClick').andCallThrough();
+                spyOn(annotator, 'onHighlightMouseover').andCallThrough();
+                spyOn(annotator, 'startViewerHideTimer').andCallThrough();
             });
+        });
 
-            it('Test that clicking twice reverts to default behavior', function() {
-                highlights[0].click();
-                $(document).click();
-                annotators[0].onHighlightMouseover.reset();
-
-                // Check that both instances of annotator are unfrozen
-                _.invoke(highlights, 'mouseover');
-                _.invoke(highlights, 'mouseout');
-                _.each(annotators, function(annotator) {
-                    checkAnnotatorIsUnfrozen(annotator);
-                });
+        it('clicking a highlight freezes mouseover and mouseout in all highlighted text', function() {
+            _.each(annotators, function(annotator) {
+                expect(annotator.isFrozen).toBe(false);
             });
+            highlights[0].click();
+            // Click is attached to the onHighlightClick event handler which
+            // in turn calls onHighlightMouseover.
+            // To test if onHighlightMouseover is called or not on
+            // mouseover, we'll have to reset onHighlightMouseover.
+            expect(annotators[0].onHighlightClick).toHaveBeenCalled();
+            expect(annotators[0].onHighlightMouseover).toHaveBeenCalled();
+            annotators[0].onHighlightMouseover.reset();
+
+            // Check that both instances of annotator are frozen
+            _.invoke(highlights, 'mouseover');
+            _.invoke(highlights, 'mouseout');
+            _.each(annotators, checkAnnotatorIsFrozen);
+        });
 
-            it('Test that destroying an instance with an open viewer sets all other instances' +
-               'to unfrozen and unbinds document click.edxnotes:freeze event handlers', function() {
-                // Freeze all instances
-                highlights[0].click();
-                // Destroy first instance
-                annotators[0].destroy();
-
-                // Check that all click.edxnotes:freeze are unbound
-                checkClickEventsNotBound('edxnotes:freeze');
+        it('clicking twice reverts to default behavior', function() {
+            highlights[0].click();
+            $(document).click();
+            annotators[0].onHighlightMouseover.reset();
 
-                // Check that the remaining instance is unfrozen
-                highlights[1].mouseover();
-                highlights[1].mouseout();
-                checkAnnotatorIsUnfrozen(annotators[1]);
+            // Check that both instances of annotator are unfrozen
+            _.invoke(highlights, 'mouseover');
+            _.invoke(highlights, 'mouseout');
+            _.each(annotators, function(annotator) {
+                checkAnnotatorIsUnfrozen(annotator);
             });
+        });
 
-            it('Test that destroying an instance with an closed viewer only unfreezes that instance' +
-               'and unbinds one document click.edxnotes:freeze event handlers', function() {
-                // Freeze all instances
-                highlights[0].click();
-                annotators[0].onHighlightMouseover.reset();
-                // Destroy second instance
-                annotators[1].destroy();
+        it('destroying an instance with an open viewer sets all other instances' +
+           'to unfrozen and unbinds document click.edxnotes:freeze event handlers', function() {
+            // Freeze all instances
+            highlights[0].click();
+            // Destroy first instance
+            annotators[0].destroy();
 
-                // Check that the first instance is frozen
-                highlights[0].mouseover();
-                highlights[0].mouseout();
-                checkAnnotatorIsFrozen(annotators[0]);
+            // Check that all click.edxnotes:freeze are unbound
+            checkClickEventsNotBound('edxnotes:freeze');
 
-                // Check that second one doesn't have a bound click.edxnotes:freeze
-                checkClickEventsNotBound('edxnotes:freeze'+annotators[1].uid);
-            });
+            // Check that the remaining instance is unfrozen
+            highlights[1].mouseover();
+            highlights[1].mouseout();
+            checkAnnotatorIsUnfrozen(annotators[1]);
+        });
+
+        it('destroying an instance with an closed viewer only unfreezes that instance' +
+           'and unbinds one document click.edxnotes:freeze event handlers', function() {
+            // Freeze all instances
+            highlights[0].click();
+            annotators[0].onHighlightMouseover.reset();
+            // Destroy second instance
+            annotators[1].destroy();
+
+            // Check that the first instance is frozen
+            highlights[0].mouseover();
+            highlights[0].mouseout();
+            checkAnnotatorIsFrozen(annotators[0]);
+
+            // Check that second one doesn't have a bound click.edxnotes:freeze
+            checkClickEventsNotBound('edxnotes:freeze' + annotators[1].uid);
         });
-    }
-);
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/utils/logger_spec.js b/lms/static/js/spec/edxnotes/utils/logger_spec.js
index d6f2f2f03cf3..327613f842cb 100644
--- a/lms/static/js/spec/edxnotes/utils/logger_spec.js
+++ b/lms/static/js/spec/edxnotes/utils/logger_spec.js
@@ -1,55 +1,115 @@
-define(['js/edxnotes/utils/logger'],
-    function(Logger) {
-        'use strict';
-
-        describe('Test logger', function() {
-            var log, logs, logger;
-
-            beforeEach(function() {
-                logger = new Logger('id', 0); // 0 is silent mode
-            });
-
-            it('Tests if the logger keeps a correct history of logs', function() {
-                logger.log('A log type', 'A first log');
-                logger.log('A log type', 'A second log');
-
-                logs = logger.getHistory();
-
-                // Test first log
-                log = logs[0];
-                expect(log[0]).toBe('log');
-                expect(log[1][0]).toBe('id');
-                expect(log[1][1]).toBe('A log type');
-                expect(log[1][2]).toBe('A first log');
-
-                // Test second log
-                log = logs[1];
-                expect(log[0]).toBe('log');
-                expect(log[1][0]).toBe('id');
-                expect(log[1][1]).toBe('A log type');
-                expect(log[1][2]).toBe('A second log');
-            });
-
-            it('Tests if the logger keeps a correct history of errors', function() {
-                logger.error('An error type', 'A first error');
-                logger.error('An error type', 'A second error');
-
-                logs = logger.getHistory();
-
-                // Test first error
-                log = logs[0];
-                expect(log[0]).toBe('error');
-                expect(log[1][0]).toBe('id');
-                expect(log[1][1]).toBe('An error type');
-                expect(log[1][2]).toBe('A first error');
-
-                // Test second error
-                log = logs[1];
-                expect(log[0]).toBe('error');
-                expect(log[1][0]).toBe('id');
-                expect(log[1][1]).toBe('An error type');
-                expect(log[1][2]).toBe('A second error');
-            });
+define([
+    'js/edxnotes/utils/logger', 'js/spec/edxnotes/custom_matchers'
+], function(Logger, customMatchers) {
+    'use strict';
+    describe('Edxnotes logger', function() {
+        var getLogger = function(id, mode) {
+            return Logger.getLogger(id, mode);
+        };
+
+        beforeEach(function () {
+            spyOn(window.console, 'log');
+            spyOn(window.console, 'error');
+            customMatchers(this);
+        });
+
+        it('keeps a correct history of logs', function() {
+            var logger = getLogger('id', 1),
+                logs, log;
+
+            logger.log('A log type', 'A first log');
+            logger.log('A log type', 'A second log');
+            expect(window.console.log).toHaveBeenCalled();
+
+            logs = logger.getHistory();
+            // Test first log
+            log = logs[0];
+            expect(log[0]).toBe('log');
+            expect(log[1][0]).toBe('id');
+            expect(log[1][1]).toBe('A log type');
+            expect(log[1][2]).toBe('A first log');
+
+            // Test second log
+            log = logs[1];
+            expect(log[0]).toBe('log');
+            expect(log[1][0]).toBe('id');
+            expect(log[1][1]).toBe('A log type');
+            expect(log[1][2]).toBe('A second log');
+        });
+
+        it('keeps a correct history of errors', function() {
+            var logger = getLogger('id', 1),
+                logs, log;
+            logger.error('An error type', 'A first error');
+            logger.error('An error type', 'A second error');
+            expect(window.console.error).toHaveBeenCalled();
+
+            logs = logger.getHistory();
+            // Test first error
+            log = logs[0];
+            expect(log[0]).toBe('error');
+            expect(log[1][0]).toBe('id');
+            expect(log[1][1]).toBe('An error type');
+            expect(log[1][2]).toBe('A first error');
+
+            // Test second error
+            log = logs[1];
+            expect(log[0]).toBe('error');
+            expect(log[1][0]).toBe('id');
+            expect(log[1][1]).toBe('An error type');
+            expect(log[1][2]).toBe('A second error');
+        });
+
+        it('can destroy the logger', function() {
+            var logger = getLogger('id', 1),
+                logs;
+
+            logger.log('A log type', 'A first log');
+            logger.error('An error type', 'A first error');
+            logs = logger.getHistory();
+            expect(logs.length).toBe(2);
+            logger.destroy();
+            logs = logger.getHistory();
+            expect(logs.length).toBe(0);
+        });
+
+        it('do not store the history in silent mode', function() {
+            var logger = getLogger('id', 0),
+                logs;
+            logger.log('A log type', 'A first log');
+            logger.error('An error type', 'A first error');
+            logs = logger.getHistory();
+            expect(logs.length).toBe(0);
+        });
+
+        it('do not show logs in the console in silent mode', function() {
+            var logger = getLogger('id', 0);
+            logger.log('A log type', 'A first log');
+            logger.error('An error type', 'A first error');
+            expect(window.console.log).not.toHaveBeenCalled();
+            expect(window.console.error).not.toHaveBeenCalled();
+        });
+
+        it('can use timers', function() {
+            var logger = getLogger('id', 1),
+                now, t0, logs, log;
+
+            now = function () {
+                return (new Date()).getTime();
+            };
+
+            t0 = now();
+            logger.time('timer');
+            while (now() - t0 < 200) {}
+            logger.timeEnd('timer');
+
+            logs = logger.getHistory();
+            log = logs[0];
+            expect(log[0]).toBe('log');
+            expect(log[1][0]).toBe('id');
+            expect(log[1][1]).toBe('timer');
+            expect(log[1][2]).toBeInRange(190, 210);
+            expect(log[1][3]).toBe('ms');
         });
-    }
-);
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/views/notes_page_spec.js b/lms/static/js/spec/edxnotes/views/notes_page_spec.js
index 063675f6fc23..c9953f857551 100644
--- a/lms/static/js/spec/edxnotes/views/notes_page_spec.js
+++ b/lms/static/js/spec/edxnotes/views/notes_page_spec.js
@@ -1,64 +1,63 @@
 define([
-    'jquery', 'underscore', 'js/common_helpers/template_helpers', 'js/edxnotes/views/page_factory'
-], function($, _, TemplateHelpers, NotesFactory) {
+    'jquery', 'underscore', 'js/common_helpers/template_helpers',
+    'js/common_helpers/ajax_helpers', 'js/edxnotes/views/page_factory',
+    'js/spec/edxnotes/custom_matchers'
+], function($, _, TemplateHelpers, AjaxHelpers, NotesFactory, customMatchers) {
     'use strict';
-    describe('NotesPage', function() {
+    describe('EdxNotes NotesPage', function() {
         var notes = [
             {
                 created: 'December 11, 2014 at 11:12AM',
                 updated: 'December 11, 2014 at 11:12AM',
-                text: 'First added model',
-                quote: 'Should be listed third'
+                text: 'Third added model',
+                quote: 'Should be listed first'
             },
             {
                 created: 'December 11, 2014 at 11:11AM',
                 updated: 'December 11, 2014 at 11:11AM',
-                text: 'Third added model',
+                text: 'Second added model',
                 quote: 'Should be listed second'
             },
             {
                 created: 'December 11, 2014 at 11:10AM',
                 updated: 'December 11, 2014 at 11:10AM',
-                text: 'Second added model',
-                quote: 'Should be listed first'
+                text: 'First added model',
+                quote: 'Should be listed third'
             }
         ];
 
         beforeEach(function() {
-            setFixtures('<div class="edx-notes-page-wrapper"><div class="course-info"></div></div>');
-            TemplateHelpers.installTemplate('templates/edxnotes/note-item');
+            customMatchers(this);
+            loadFixtures('js/fixtures/edxnotes/edxnotes.html');
+            TemplateHelpers.installTemplates([
+                'templates/edxnotes/recent-activity-item',
+                'templates/edxnotes/tab-item'
+            ]);
             this.view = new NotesFactory({notesList: notes});
         });
 
-        describe('Initial rendering', function() {
-            it('should not show the loading indicator', function() {
-                expect('.ui-loading').not.toBeVisible();
-            });
 
-            it('should have certain elements', function() {
-                expect($('div.edx-notes-page-wrapper')).toExist();
-                expect($('div.course-info')).toExist();
-                expect($('div.edx-notes-page-items-list')).toExist();
-            });
+        it('should be displayed properly', function() {
+            var requests = AjaxHelpers.requests(this);
 
-            it('should be displayed properly', function() {
-                var pageItems = $('article.edx-notes-page-item');
-                // Make sure we have exactly 3 page items created
-                expect(pageItems.length).toEqual(3);
-                // Check that the ordering is correct and each model's text and quote are rendered
-                _.each(pageItems, function(el, index) {
-                    expect(pageItems.eq(index).find('.edx-notes-item-text').text()).toContain(notes[index].text);
-                    expect(pageItems.eq(index).find('.edx-notes-item-quote').text()).toContain(notes[index].quote);
-                });
-            });
+            expect(this.view.$('.tab-search-results')).not.toExist();
+            expect(this.view.$('.tab-recent-activity')).toHaveClass('is-active');
+            expect(this.view.$('.edx-notes-page-items-list')).toExist();
 
-            it('should display update value and accompanying text', function() {
-                var pageItems = $('article.edxnotes-page-item');
+            this.view.$('.search-box input').val('test_query');
+            this.view.$('.search-box button[type=submit]').click();
+            AjaxHelpers.respondWithJson(requests, {
+                total: 0,
+                rows: []
+            });
+            expect(this.view.$('.tab-search-results')).toHaveClass('is-active');
+            expect(this.view.$('.tab-recent-activity')).toExist();
+        });
 
-                _.each(pageItems, function(el, index) {
-                    expect(pageItems.eq(index).find('dl>dt').last().text()).toBe('Last Edited:');
-                    expect(pageItems.eq(index).find('dl>dd').last().text()).toBe(notes[index].updated);
-                });
+        it('should display update value and accompanying text', function() {
+            _.each($('.edxnotes-page-item'), function(element, index) {
+                expect($('dl > dt', element).last()).toContainText('Last Edited:');
+                expect($('dl > dd', element).last()).toContainText(notes[index].updated);
             });
         });
     });
diff --git a/lms/static/js/spec/edxnotes/views/search_box_spec.js b/lms/static/js/spec/edxnotes/views/search_box_spec.js
new file mode 100644
index 000000000000..3aebda632c42
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/views/search_box_spec.js
@@ -0,0 +1,153 @@
+define([
+    'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/edxnotes/views/search_box',
+    'js/edxnotes/collections/notes', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
+], function($, _, AjaxHelpers, SearchBoxView, NotesCollection, customMatchers) {
+    'use strict';
+    describe('EdxNotes SearchBoxView', function() {
+        var getSearchBox, submitForm, assertBoxIsEnabled, assertBoxIsDisabled;
+
+        getSearchBox = function (options) {
+            options = _.defaults(options || {}, {
+                el: $('form.search-box').get(0),
+                user: 'test_user',
+                courseId: 'test_course_id',
+                beforeSearchStart: jasmine.createSpy(),
+                search: jasmine.createSpy(),
+                error: jasmine.createSpy(),
+                complete: jasmine.createSpy()
+            });
+
+            return new SearchBoxView(options);
+        };
+
+        submitForm = function (searchBox, text) {
+            searchBox.$('input').val(text);
+            searchBox.$('button[type=submit]').click();
+        };
+
+        assertBoxIsEnabled = function (searchBox) {
+            expect(searchBox.$el).not.toHaveClass('is-looking');
+            expect(searchBox.$('button[type=submit]')).not.toHaveClass('is-disabled');
+            expect(searchBox.isDisabled).toBeFalsy();
+        };
+
+        assertBoxIsDisabled = function (searchBox) {
+            expect(searchBox.$el).toHaveClass('is-looking');
+            expect(searchBox.$('button[type=submit]')).toHaveClass('is-disabled');
+            expect(searchBox.isDisabled).toBeTruthy();
+        };
+
+        beforeEach(function () {
+            customMatchers(this);
+            loadFixtures('js/fixtures/edxnotes/edxnotes.html');
+            this.searchBox = getSearchBox();
+        });
+
+        it('sends a request with proper information on submit the form', function () {
+            var requests = AjaxHelpers.requests(this),
+                form = this.searchBox.el,
+                request;
+
+            submitForm(this.searchBox, 'test_text');
+            request = requests[0];
+            expect(request.method).toBe(form.method.toUpperCase());
+            expect(request.url).toBe(form.action + '?' + $.param({
+                user: 'test_user',
+                course_id: 'test_course_id',
+                text: 'test_text'
+            }));
+        });
+
+        it('returns success result', function () {
+            var requests = AjaxHelpers.requests(this);
+            submitForm(this.searchBox, 'test_text');
+            expect(this.searchBox.options.beforeSearchStart).toHaveBeenCalledWith(
+                'test_text'
+            );
+            assertBoxIsDisabled(this.searchBox);
+            AjaxHelpers.respondWithJson(requests, {
+                total: 2,
+                rows: [null, null]
+            });
+            assertBoxIsEnabled(this.searchBox);
+            expect(this.searchBox.options.search).toHaveBeenCalledWith(
+                jasmine.any(NotesCollection), 2, 'test_text'
+            );
+            expect(this.searchBox.options.complete).toHaveBeenCalledWith(
+                'test_text'
+            );
+        });
+
+        it('returns default error message if received data structure is wrong', function () {
+            var requests = AjaxHelpers.requests(this);
+            submitForm(this.searchBox, 'test_text');
+            AjaxHelpers.respondWithJson(requests, {});
+            expect(this.searchBox.options.error).toHaveBeenCalledWith(
+                'This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.',
+                'test_text'
+            );
+            expect(this.searchBox.options.complete).toHaveBeenCalledWith(
+                'test_text'
+            );
+        });
+
+        it('returns default error message if network error occurs', function () {
+            var requests = AjaxHelpers.requests(this);
+            submitForm(this.searchBox, 'test_text');
+            AjaxHelpers.respondWithError(requests);
+            expect(this.searchBox.options.error).toHaveBeenCalledWith(
+                'This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.',
+                'test_text'
+            );
+            expect(this.searchBox.options.complete).toHaveBeenCalledWith(
+                'test_text'
+            );
+        });
+
+        it('returns error message if server error occurs', function () {
+            var requests = AjaxHelpers.requests(this);
+            submitForm(this.searchBox, 'test_text');
+            assertBoxIsDisabled(this.searchBox);
+
+            requests[0].respond(
+                500, {'Content-Type': 'application/json'},
+                JSON.stringify({
+                    error: 'test error message'
+                })
+            );
+
+            assertBoxIsEnabled(this.searchBox);
+            expect(this.searchBox.options.error).toHaveBeenCalledWith(
+                'test error message',
+                'test_text'
+            );
+            expect(this.searchBox.options.complete).toHaveBeenCalledWith(
+                'test_text'
+            );
+        });
+
+        it('does not send second request during current search', function () {
+            var requests = AjaxHelpers.requests(this);
+            submitForm(this.searchBox, 'test_text');
+            assertBoxIsDisabled(this.searchBox);
+            submitForm(this.searchBox, 'another_text');
+            AjaxHelpers.respondWithJson(requests, {
+                total: 2,
+                rows: [null, null]
+            });
+            assertBoxIsEnabled(this.searchBox);
+            expect(requests).toHaveLength(1);
+        });
+
+        it('returns error message if the field is empty', function () {
+            var requests = AjaxHelpers.requests(this);
+            submitForm(this.searchBox, '   ');
+            expect(requests).toHaveLength(0);
+            assertBoxIsEnabled(this.searchBox);
+            expect(this.searchBox.options.error).toHaveBeenCalledWith(
+                'Search field cannot be blank.',
+                '   '
+            );
+        });
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/views/tab_item_spec.js b/lms/static/js/spec/edxnotes/views/tab_item_spec.js
new file mode 100644
index 000000000000..ab1f80d316c1
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/views/tab_item_spec.js
@@ -0,0 +1,41 @@
+define([
+    'jquery', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/tabs',
+    'js/edxnotes/views/tabs_list', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
+], function($, TemplateHelpers, TabsCollection, TabsListView, customMatchers) {
+    'use strict';
+    describe('EdxNotes TabItemView', function() {
+        beforeEach(function () {
+            customMatchers(this);
+            TemplateHelpers.installTemplate('templates/edxnotes/tab-item');
+            this.collection = new TabsCollection([
+                {'class_name': 'first-item'},
+                {
+                    'class_name': 'second-item',
+                    'is_closable': true
+                }
+            ]);
+            this.tabsList = new TabsListView({
+                collection: this.collection
+            }).render();
+        });
+
+        it('can navigate between tabs', function () {
+            var firstItem = this.tabsList.$('.first-item'),
+                secondItem = this.tabsList.$('.second-item');
+
+            expect(firstItem).toHaveClass('is-active'); // first tab is active
+            expect(secondItem).not.toHaveClass('is-active'); // second tab is not active
+            secondItem.click();
+            expect(firstItem).not.toHaveClass('is-active'); // first tab is not active
+            expect(secondItem).toHaveClass('is-active'); // second tab is active
+        });
+
+        it('can close the tab', function () {
+            var secondItem = this.tabsList.$('.second-item');
+
+            expect(this.tabsList.$('.tab-item')).toHaveLength(2);
+            secondItem.find('.btn-close').click();
+            expect(this.tabsList.$('.tab-item')).toHaveLength(1);
+        });
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/views/tab_view_spec.js b/lms/static/js/spec/edxnotes/views/tab_view_spec.js
new file mode 100644
index 000000000000..e830e301361f
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/views/tab_view_spec.js
@@ -0,0 +1,106 @@
+define([
+    'jquery', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/tabs',
+    'js/edxnotes/views/tabs_list', 'js/edxnotes/views/subview',
+    'js/edxnotes/views/tab_view', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
+], function(
+    $, TemplateHelpers, TabsCollection, TabsListView, SubView, TabView, customMatchers
+) {
+    'use strict';
+    describe('EdxNotes TabView', function() {
+        var TestSubView = SubView.extend({
+                id: 'edx-notes-page-test-subview',
+                content: '<p>test view content</p>',
+                render: function () {
+                    this.$el.html(this.content);
+                    return this;
+                }
+            }),
+            TestView = TabView.extend({
+                SubViewConstructor: TestSubView,
+                tabInfo: {
+                    name: 'Test View Tab',
+                    is_closable: true
+                }
+            }), getView;
+
+        getView = function (tabsCollection, options) {
+            var view;
+            options = _.defaults(options || {}, {
+                el: $('.edx-notes-page-wrapper'),
+                collection: [],
+                tabsCollection: tabsCollection
+            });
+            view = new TestView(options);
+
+            if (tabsCollection.length) {
+                tabsCollection.at(0).activate();
+            }
+
+            return view;
+        };
+
+        beforeEach(function () {
+            customMatchers(this);
+            loadFixtures('js/fixtures/edxnotes/edxnotes.html');
+            TemplateHelpers.installTemplates([
+                'templates/edxnotes/recent-activity-item', 'templates/edxnotes/tab-item'
+            ]);
+            this.tabsCollection = new TabsCollection();
+            this.tabsList = new TabsListView({collection: this.tabsCollection}).render();
+            this.tabsList.$el.appendTo($('.edx-notes-page-wrapper'));
+        });
+
+        it('can create a tab and content on initialization', function () {
+            var view = getView(this.tabsCollection);
+            expect(this.tabsCollection).toHaveLength(1);
+            expect(view.$('.tab-item')).toExist();
+            expect(view.$('.course-info')).toContainHtml('<p>test view content</p>');
+        });
+
+        it('cannot create a tab on initialization if flag is not set', function () {
+            var view = getView(this.tabsCollection, {
+                createTabOnInitialization: false
+            });
+            expect(this.tabsCollection).toHaveLength(0);
+            expect(view.$('.tab-item')).not.toExist();
+            expect(view.$('.course-info')).not.toContainHtml('<p>test view content</p>');
+        });
+
+        it('can remove the content if tab becomes inactive', function () {
+            var view = getView(this.tabsCollection);
+            this.tabsCollection.add({'class_name': 'second-tab'});
+            view.$('.tab-item.second-tab').click();
+            expect(view.$('.tab-item')).toHaveLength(2);
+            expect(view.$('.course-info')).not.toContainHtml('<p>test view content</p>');
+        });
+
+        it('can remove the content if tab is closed', function () {
+            var view = getView(this.tabsCollection);
+            view.onClose =  jasmine.createSpy();
+            view.$('.tab-item .btn-close').click();
+            expect(view.$('.tab-item')).toHaveLength(0);
+            expect(view.$('.course-info')).not.toContainHtml('<p>test view content</p>');
+            expect(view.tabModel).toBeNull();
+            expect(view.onClose).toHaveBeenCalled();
+        });
+
+        it('can correctly update the content of active tab', function () {
+            var view = getView(this.tabsCollection);
+            TestSubView.prototype.content = '<p>New content</p>';
+            view.render();
+            expect(view.$('.course-info')).toContainHtml('<p>New content</p>');
+            expect(view.$('.course-info')).not.toContainHtml('<p>test view content</p>');
+        });
+
+        it('can show/hide error messages', function () {
+            var view = getView(this.tabsCollection);
+            view.showErrorMessage('<p>error message is here</p>');
+            expect(view.$('.inline-error')).not.toHaveClass('is-hidden');
+            expect(view.$('.inline-error')).toContainText('<p>error message is here</p>');
+
+            view.hideErrorMessage();
+            expect(view.$('.inline-error')).toHaveClass('is-hidden');
+            expect(view.$('.inline-error')).toBeEmpty();
+        });
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/views/tabs/recent_activity_spec.js b/lms/static/js/spec/edxnotes/views/tabs/recent_activity_spec.js
new file mode 100644
index 000000000000..be5ada7e87ea
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/views/tabs/recent_activity_spec.js
@@ -0,0 +1,75 @@
+define([
+    'jquery', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/notes',
+    'js/edxnotes/collections/tabs', 'js/edxnotes/views/tabs/recent_activity',
+    'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
+], function(
+    $, TemplateHelpers, NotesCollection, TabsCollection, RecentActivityView, customMatchers
+) {
+    'use strict';
+    describe('EdxNotes RecentActivityView', function() {
+        var notes = [
+            {
+                created: 'December 11, 2014 at 11:12AM',
+                updated: 'December 11, 2014 at 11:12AM',
+                text: 'Third added model',
+                quote: 'Should be listed first'
+            },
+            {
+                created: 'December 11, 2014 at 11:11AM',
+                updated: 'December 11, 2014 at 11:11AM',
+                text: 'Second added model',
+                quote: 'Should be listed second'
+            },
+            {
+                created: 'December 11, 2014 at 11:10AM',
+                updated: 'December 11, 2014 at 11:10AM',
+                text: 'First added model',
+                quote: 'Should be listed third'
+            }
+        ], getView;
+
+        getView = function (collection, tabsCollection, options) {
+            var view;
+
+            options = _.defaults(options || {}, {
+                el: $('.edx-notes-page-wrapper'),
+                collection: collection,
+                tabsCollection: tabsCollection,
+            });
+
+            view = new RecentActivityView(options);
+            tabsCollection.at(0).activate();
+
+            return view;
+        };
+
+        beforeEach(function () {
+            customMatchers(this);
+            loadFixtures('js/fixtures/edxnotes/edxnotes.html');
+            TemplateHelpers.installTemplates([
+                'templates/edxnotes/recent-activity-item', 'templates/edxnotes/tab-item'
+            ]);
+
+            this.collection = new NotesCollection(notes);
+            this.tabsCollection = new TabsCollection();
+        });
+
+        it('displays a tab and content with proper data and order', function () {
+            var view = getView(this.collection, this.tabsCollection);
+
+            expect(this.tabsCollection).toHaveLength(1);
+            expect(this.tabsCollection.at(0).attributes).toEqual({
+                name: 'Recent Activity',
+                class_name: 'tab-recent-activity',
+                is_active: true,
+                is_closable: false
+            });
+            expect(view.$('#edx-notes-page-recent-activity')).toExist();
+            expect(view.$('.edx-notes-page-item')).toHaveLength(3);
+            _.each(view.$('.edx-notes-page-item'), function(element, index) {
+                expect($('.edx-notes-item-text', element)).toContainText(notes[index].text);
+                expect($('.edx-notes-item-quote', element)).toContainText(notes[index].quote);
+            });
+        });
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/views/tabs/search_results_spec.js b/lms/static/js/spec/edxnotes/views/tabs/search_results_spec.js
new file mode 100644
index 000000000000..04ec0c02baf7
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/views/tabs/search_results_spec.js
@@ -0,0 +1,206 @@
+define([
+    'jquery', 'js/common_helpers/template_helpers', 'js/common_helpers/ajax_helpers',
+    'js/edxnotes/collections/tabs', 'js/edxnotes/views/tabs/search_results',
+    'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
+], function(
+    $, TemplateHelpers, AjaxHelpers, TabsCollection, SearchResultsView, customMatchers
+) {
+    'use strict';
+    describe('EdxNotes SearchResultsView', function() {
+        var notes = [
+            {
+                created: 'December 11, 2014 at 11:12AM',
+                updated: 'December 11, 2014 at 11:12AM',
+                text: 'Third added model',
+                quote: 'Should be listed first'
+            },
+            {
+                created: 'December 11, 2014 at 11:11AM',
+                updated: 'December 11, 2014 at 11:11AM',
+                text: 'Second added model',
+                quote: 'Should be listed second'
+            },
+            {
+                created: 'December 11, 2014 at 11:10AM',
+                updated: 'December 11, 2014 at 11:10AM',
+                text: 'First added model',
+                quote: 'Should be listed third'
+            }
+        ],
+        responseJson = {
+            total: 3,
+            rows: notes
+        },
+        getView, submitForm;
+
+        getView = function (tabsCollection, options) {
+            options = _.defaults(options || {}, {
+                el: $('.edx-notes-page-wrapper'),
+                tabsCollection: tabsCollection,
+                user: 'test_user',
+                courseId: 'course_id',
+                createTabOnInitialization: false
+            });
+            return new SearchResultsView(options);
+        };
+
+        submitForm = function (searchBox, text) {
+            searchBox.$('input').val(text);
+            searchBox.$('button[type=submit]').click();
+        };
+
+        beforeEach(function () {
+            customMatchers(this);
+            loadFixtures('js/fixtures/edxnotes/edxnotes.html');
+            TemplateHelpers.installTemplates([
+                'templates/edxnotes/recent-activity-item', 'templates/edxnotes/tab-item'
+            ]);
+
+            this.tabsCollection = new TabsCollection();
+        });
+
+        it('does not create a tab and content on initialization', function () {
+            var view = getView(this.tabsCollection);
+            expect(this.tabsCollection).toHaveLength(0);
+            expect(view.$('#edx-notes-page-search-results')).not.toExist();
+        });
+
+        it('displays a tab and content on search with proper data and order', function () {
+            var view = getView(this.tabsCollection),
+                requests = AjaxHelpers.requests(this);
+
+            submitForm(view.searchBox, 'econd');
+            AjaxHelpers.respondWithJson(requests, responseJson);
+
+            expect(this.tabsCollection).toHaveLength(1);
+            expect(this.tabsCollection.at(0).attributes).toEqual({
+                name: 'Search Results',
+                class_name: 'tab-search-results',
+                is_active: true,
+                is_closable: true
+            });
+            expect(view.$('#edx-notes-page-search-results')).toExist();
+            expect(view.$('.edx-notes-item-text').eq(1)).toContainHtml(
+                '<span class="edx-notes-highlight">econd</span>'
+            );
+            expect(view.$('.edx-notes-item-quote .edx-notes-highlight')).not.toExist();
+            expect(view.$('.edx-notes-page-item')).toHaveLength(3);
+            view.searchResults.collection.each(function (model, index) {
+                expect(model.get('text')).toBe(notes[index].text);
+            });
+        });
+
+        it('displays loading indicator when search is running', function () {
+            var view = getView(this.tabsCollection),
+                requests = AjaxHelpers.requests(this);
+
+            submitForm(view.searchBox, 'test query');
+            expect(view.$('.ui-loading')).not.toHaveClass('is-hidden');
+            expect(this.tabsCollection).toHaveLength(1);
+            expect(view.searchResults).toBeNull();
+            expect(view.$('.edx-notes-page-items-list')).not.toExist();
+            AjaxHelpers.respondWithJson(requests, responseJson);
+            expect(view.$('.ui-loading')).toHaveClass('is-hidden');
+        });
+
+        it('displays no results message', function () {
+            var view = getView(this.tabsCollection),
+                requests = AjaxHelpers.requests(this);
+
+            submitForm(view.searchBox, 'some text');
+            AjaxHelpers.respondWithJson(requests, {
+                total: 0,
+                rows: []
+            });
+
+            expect(view.$('#edx-notes-page-search-results')).not.toExist();
+            expect(view.$('#edx-notes-page-no-search-results')).toExist();
+            expect(view.$('.edx-notes-highlight')).not.toExist();
+            expect(view.$('#edx-notes-page-no-search-results')).toContainText(
+                'No results found for "some text".'
+            );
+        });
+
+        it('does not send an additional request on switching between tabs', function () {
+            var view = getView(this.tabsCollection),
+                requests = AjaxHelpers.requests(this);
+
+            submitForm(view.searchBox, 'test_query');
+            AjaxHelpers.respondWithJson(requests, responseJson);
+
+            expect(requests).toHaveLength(1);
+
+            this.tabsCollection.add({});
+            this.tabsCollection.at(1).activate();
+            expect(view.$('#edx-notes-page-search-results')).not.toExist();
+            this.tabsCollection.at(0).activate();
+
+            expect(requests).toHaveLength(1);
+            expect(view.$('#edx-notes-page-search-results')).toExist();
+            expect(view.$('.edx-notes-page-item')).toHaveLength(3);
+        });
+
+        it('can clear search results if tab is closed', function () {
+            var view = getView(this.tabsCollection),
+                requests = AjaxHelpers.requests(this);
+
+            submitForm(view.searchBox, 'test_query');
+            AjaxHelpers.respondWithJson(requests, responseJson);
+            expect(view.searchResults).toBeDefined();
+            this.tabsCollection.at(0).destroy();
+            expect(view.searchResults).toBeNull();
+        });
+
+        it('can correctly show/hide error messages', function () {
+            var view = getView(this.tabsCollection),
+                requests = AjaxHelpers.requests(this);
+
+            submitForm(view.searchBox, 'test error');
+            requests[0].respond(
+                500, {'Content-Type': 'application/json'},
+                JSON.stringify({
+                    error: 'test error message'
+                })
+            );
+
+            expect(view.$('.inline-error')).not.toHaveClass('is-hidden');
+            expect(view.$('.inline-error')).toContainText('test error message');
+            expect(view.$('.edx-notes-highlight')).not.toExist();
+            expect(view.$('.ui-loading')).toHaveClass('is-hidden');
+
+            submitForm(view.searchBox, 'Second');
+            AjaxHelpers.respondWithJson(requests, responseJson);
+
+            expect(view.$('.inline-error')).toHaveClass('is-hidden');
+            expect(view.$('.inline-error')).toBeEmpty();
+            expect(view.$('.edx-notes-highlight')).toExist();
+        });
+
+        it('can correctly update search results', function () {
+            var view = getView(this.tabsCollection),
+                requests = AjaxHelpers.requests(this),
+                newNotes = [{
+                    created: 'December 11, 2014 at 11:10AM',
+                    updated: 'December 11, 2014 at 11:10AM',
+                    text: 'New Note',
+                    quote: 'New Note'
+                }];
+
+            submitForm(view.searchBox, 'test_query');
+            AjaxHelpers.respondWithJson(requests, responseJson);
+
+            expect(view.$('.edx-notes-page-item')).toHaveLength(3);
+
+            submitForm(view.searchBox, 'new_test_query');
+            AjaxHelpers.respondWithJson(requests, {
+                total: 1,
+                rows: newNotes
+            });
+
+            expect(view.$('.edx-notes-page-item').length).toHaveLength(1);
+            view.searchResults.collection.each(function (model, index) {
+                expect(model.get('text')).toBe(newNotes[index].text);
+            });
+        });
+    });
+});
diff --git a/lms/static/js/spec/edxnotes/views/tabs_list_spec.js b/lms/static/js/spec/edxnotes/views/tabs_list_spec.js
new file mode 100644
index 000000000000..6e5e5ed38b09
--- /dev/null
+++ b/lms/static/js/spec/edxnotes/views/tabs_list_spec.js
@@ -0,0 +1,50 @@
+define([
+    'jquery', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/tabs',
+    'js/edxnotes/views/tabs_list', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
+], function($, TemplateHelpers, TabsCollection, TabsListView, customMatchers) {
+    'use strict';
+    describe('EdxNotes TabsListView', function() {
+        beforeEach(function () {
+            customMatchers(this);
+            TemplateHelpers.installTemplate('templates/edxnotes/tab-item');
+            this.collection = new TabsCollection([
+                {'class_name': 'first-item'},
+                {'class_name': 'second-item'}
+            ]);
+            this.tabsList = new TabsListView({
+                collection: this.collection
+            }).render();
+        });
+
+        it('has correct order and class names', function () {
+            var firstItem = this.tabsList.$('.first-item'),
+                secondItem = this.tabsList.$('.second-item');
+
+            expect(firstItem).toHaveIndex(0);
+            expect(firstItem).toHaveClass('is-active');
+            expect(secondItem).toHaveIndex(1);
+        });
+
+        it('can add a new tab', function () {
+            var firstItem = this.tabsList.$('.first-item'),
+                thirdItem;
+
+            this.collection.add({'class_name': 'third-item'});
+            thirdItem = this.tabsList.$('.third-item');
+
+            expect(firstItem).toHaveClass('is-active'); // first tab is still active
+            expect(thirdItem).toHaveIndex(2);
+            expect(this.tabsList.$('.tab-item')).toHaveLength(3);
+        });
+
+        it('can remove tabs', function () {
+            var secondItem = this.tabsList.$('.second-item');
+
+            this.collection.at(0).destroy(); // remove first tab
+            expect(this.tabsList.$('.tab-item')).toHaveLength(1);
+            expect(secondItem).toHaveClass('is-active'); // second tab becomes active
+            this.collection.at(0).destroy();
+            expect(this.tabsList.$('.tab-item')).toHaveLength(0);
+        });
+    });
+});
diff --git a/lms/static/js/spec/main.js b/lms/static/js/spec/main.js
index 72f85111f6c2..5e8cd680ff72 100644
--- a/lms/static/js/spec/main.js
+++ b/lms/static/js/spec/main.js
@@ -24,6 +24,7 @@
             'jquery.immediateDescendents': 'xmodule_js/common_static/coffee/src/jquery.immediateDescendents',
             'jquery.simulate': 'xmodule_js/common_static/js/vendor/jquery.simulate',
             'jquery.url': 'xmodule_js/common_static/js/vendor/url.min',
+            'jquery.highlight': 'xmodule_js/common_static/js/vendor/jquery.highlight',
             'datepair': 'xmodule_js/common_static/js/vendor/timepicker/datepair',
             'date': 'xmodule_js/common_static/js/vendor/date',
             'underscore': 'xmodule_js/common_static/js/vendor/underscore-min',
@@ -150,6 +151,10 @@
                 deps: ['jquery'],
                 exports: 'jQuery.fn.url'
             },
+            'jquery.highlight': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.highlight'
+            },
             'datepair': {
                 deps: ['jquery.ui', 'jquery.timepicker']
             },
@@ -399,12 +404,17 @@
         'lms/include/js/spec/student_account/emailoptin_spec.js',
         'lms/include/js/spec/student_account/shoppingcart_spec.js',
         'lms/include/js/spec/student_profile/profile_spec.js',
-        'lms/include/js/spec/edxnotes/notes_spec.js',
+        'lms/include/js/spec/edxnotes/notes_factory_spec.js',
+        'lms/include/js/spec/edxnotes/shim_spec.js',
         'lms/include/js/spec/edxnotes/utils/logger_spec.js',
-        'lms/include/js/spec/edxnotes/views/notes_page_spec.js'
-        'lms/include/js/spec/edxnotes/logger_spec.js',
-        'lms/include/js/spec/edxnotes/notes_spec.js',
-        'lms/include/js/spec/edxnotes/shim_spec.js'
+        'lms/include/js/spec/edxnotes/views/notes_page_spec.js',
+        'lms/include/js/spec/edxnotes/views/search_box_spec.js',
+        'lms/include/js/spec/edxnotes/views/tabs_list_spec.js',
+        'lms/include/js/spec/edxnotes/views/tab_item_spec.js',
+        'lms/include/js/spec/edxnotes/views/tab_view_spec.js',
+        'lms/include/js/spec/edxnotes/views/tabs/search_results_spec.js',
+        'lms/include/js/spec/edxnotes/views/tabs/recent_activity_spec.js',
+        'lms/include/js/spec/edxnotes/models/tab_spec.js'
     ]);
 
 }).call(this, requirejs, define);
diff --git a/lms/static/js_test.yml b/lms/static/js_test.yml
index 2e2530200618..5c51f0efeedc 100644
--- a/lms/static/js_test.yml
+++ b/lms/static/js_test.yml
@@ -38,6 +38,7 @@ lib_paths:
     - xmodule_js/common_static/js/vendor/jquery.min.js
     - xmodule_js/common_static/js/vendor/jquery-ui.min.js
     - xmodule_js/common_static/js/vendor/jquery.cookie.js
+    - xmodule_js/common_static/js/vendor/jquery.highlight.js
     - xmodule_js/common_static/js/vendor/flot/jquery.flot.js
     - xmodule_js/common_static/js/vendor/CodeMirror/codemirror.js
     - xmodule_js/common_static/js/vendor/URI.min.js
diff --git a/lms/static/require-config-lms.js b/lms/static/require-config-lms.js
index 1525ed5e0d05..42241dd0bf25 100644
--- a/lms/static/require-config-lms.js
+++ b/lms/static/require-config-lms.js
@@ -13,6 +13,11 @@
     } else {
         paths.jquery = "js/vendor/underscore-min";
     }
+    if (window.gettext) {
+        define("gettext", [], function() {return window.gettext;});
+    } else {
+        paths.gettext = "/i18n";
+    }
 
     config = {
         // NOTE: baseUrl has been previously set in lms/static/templates/main.html
@@ -20,7 +25,8 @@
         paths: {
           "annotator_1.2.9": "js/vendor/edxnotes/annotator-full.min",
           "date": "js/vendor/date",
-          "backbone": "js/vendor/backbone-min"
+          "backbone": "js/vendor/backbone-min",
+          "jquery.highlight": "js/vendor/jquery.highlight"
         },
         shim: {
           "annotator_1.2.9": {
@@ -32,6 +38,10 @@
           "jquery": {
               exports: "$"
           },
+          "jquery.highlight": {
+              deps: ["jquery"],
+              exports: "jQuery.fn.highlight"
+          },
           "underscore": {
               exports: "_"
           },
@@ -41,7 +51,7 @@
           }
         },
         map: {
-          "js/edxnotes/views/notes": {
+          "js/edxnotes/views/notes_factory": {
             "annotator": "annotator_1.2.9"
           },
           "js/edxnotes/views/shim": {
diff --git a/lms/static/sass/course/_edxnotes.scss b/lms/static/sass/course/_edxnotes.scss
index c96b8d537948..293569e26d62 100644
--- a/lms/static/sass/course/_edxnotes.scss
+++ b/lms/static/sass/course/_edxnotes.scss
@@ -1,11 +1,19 @@
 .edx-notes-page-wrapper {
-  .course-info {
-    @extend .content;
-    font-size: 1em;
-    line-height: 1.6em;
+  header {
+    @include clearfix;
+    @include box-sizing(border-box);
+    margin: 0.5em auto 2em;
+    padding: 1em 2.5em;
+    max-width: grid-width(12);
+    min-width: 760px;
+    width: flex-grid(12);
+    border-width: 4px 0;;
+    border-color: #ccc;
+    border-style: solid;
 
-    header {
-      margin-bottom: 2em;
+    .page-title {
+      float: left;
+      max-width: 68%;
 
       h1 {
         font-weight: 100;
@@ -16,6 +24,84 @@
         display: block;
       }
     }
+
+    .search-box {
+      @include clearfix;
+      margin: 8px 0;
+      float: right;
+      text-align: right;
+      width: 40%;
+
+      #search-field {
+        @include box-sizing(border-box);
+        width: 70%;
+        font-size: 1em;
+        padding: 0.9em 10px;
+        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
+        border: 1px solid #ccc;
+      }
+
+      button {
+        @extend %btn-secondary-blue-outline;
+        margin: 2px 0 0 7px;
+      }
+    }
+  }
+
+  .edx-notes-page-views {
+    @include clearfix;
+    @include box-sizing(border-box);
+    margin: 0 auto;
+    padding: 0px 2.5em;
+    max-width: grid-width(12);
+    min-width: 760px;
+    width: flex-grid(12);
+
+    h4 {
+      display: inline-block;
+      color: $gray-l1;
+      font-weight: 600;
+      text-transform: uppercase;
+      font-size: 0.9em;
+      margin-right: 5em;
+    }
+
+    .tabs {
+      display: inline-block;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      .tab-item {
+        display: inline-block;
+        padding: 10px 20px;
+        margin: 0;
+
+        &.is-active {
+          border-bottom: 3px solid #000;
+        }
+      }
+    }
+  }
+
+  .container {
+    padding-top: 0;
+  }
+
+  .course-info {
+    @extend .content;
+    display: block;
+    width: 100%;
+    font-size: 1em;
+    line-height: 1.6em;
+
+    .inline-error {
+      color: $red;
+      border-bottom: 1px solid $red;
+      padding: 0 0 0.5em;
+      margin-bottom: 1em;
+    }
+
     .edx-notes-page-item {
       @extend .clearfix;
       padding-top: 2em;
@@ -27,6 +113,10 @@
         margin-top: 0;
         border-top: 0;
       }
+
+      .edx-notes-highlight {
+        background-color: #FFFF88;
+      }
     }
 
     .col-left {
diff --git a/lms/templates/edxnotes.html b/lms/templates/edxnotes/edxnotes.html
similarity index 59%
rename from lms/templates/edxnotes.html
rename to lms/templates/edxnotes/edxnotes.html
index 76a7a8de27a5..914a5426af54 100644
--- a/lms/templates/edxnotes.html
+++ b/lms/templates/edxnotes/edxnotes.html
@@ -1,7 +1,7 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! import json %>
-<%namespace name='static' file='static_content.html'/>
-<%inherit file="main.html" />
+<%namespace name='static' file='/static_content.html'/>
+<%inherit file="/main.html" />
 
 <%block name="pagetitle">${_("Notes")}</%block>
 <%block name="headextra">
@@ -9,13 +9,25 @@
 </%block>
 
 <%include file="/courseware/course_navigation.html" args="active_page='edxnotes'" />
-<div class="container">
-    <div class="edx-notes-page-wrapper">
+<div class="edx-notes-page-wrapper">
+    <header>
+        <div class="page-title">
+            <h1>${_('Notes')}</h1>
+            <small>${_("Highlights and personal notes you've made within the course")}</small>
+        </div>
+    % if notes:
+        <form method="GET" action="${search_endpoint}" class="is-hidden search-box">
+            <input name="text" id="search-field" required placeholder="${_('Search Notes for...')}" />
+            <button type="submit">${_('Search')}</button>
+        </form>
+    % endif
+    </header>
+    <nav class="edx-notes-page-views is-hidden">
+        <h4>${_('View notes by:')}</h4>
+    </nav>
+    <div class="container">
         <div class="course-info">
-            <header>
-                <h1>${_('Notes')}</h1>
-                <small>${_("Highlights and personal notes you've made within the course")}</small>
-            </header>
+            <div class="inline-error is-hidden"></div>
         % if notes:
             <div class="ui-loading">
                 <p><span class="spin"><i class="icon-refresh"></i></span> <span class="copy">${_("Loading...")}</span></p>
@@ -29,7 +41,7 @@ <h1>${_('Notes')}</h1>
 
 ## Include Underscore templates
 <%block name="header_extras">
-% for template_name in ["note-item"]:
+% for template_name in ["recent-activity-item", "tab-item"]:
 <script type="text/template" id="${template_name}-tpl">
   <%static:include path="edxnotes/${template_name}.underscore" />
 </script>
@@ -43,10 +55,8 @@ <h1>${_('Notes')}</h1>
             var pageView = new NotesFactory({
                 notesList: ${notes},
                 debugMode: ${debug},
-                authToken: '${token}',
                 user: '${user.username}',
-                courseId: '${course.id}',
-                endpoint: '${endpoint}'
+                courseId: '${course.id}'
             });
         });
     }).call(this, require || RequireJS.require);
diff --git a/lms/templates/edxnotes/note-item.underscore b/lms/templates/edxnotes/note-item.underscore
deleted file mode 100644
index cd3ee4179b29..000000000000
--- a/lms/templates/edxnotes/note-item.underscore
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="col-left">
-<% if (quote) { %>
-    <div class="edx-notes-item-quote"><%- quote %></div>
-<% } %>
-<% if (text) { %>
-    <div class="edx-notes-item-text"><%- text %></div>
-<% } %>
-</div>
-<div class="col-right">
-    <dl>
-    <% if (text && quote) { %>
-        <dt class="edx-notes-item-highlight-title"><%- gettext("Highlighted & Noted in:") %></dt>
-    <% } else if (text) { %>
-        <dt class="edx-notes-item-highlight-title"><%- gettext("Highlighted in:") %></dt>
-    <% } else if (quote) { %>
-        <dt class="edx-notes-item-highlight-title"><%- gettext("Noted in:") %></dt>
-    <% } %>
-        <dd><a class="edx-notes-item-unit-link" href="<%= unit.url %>" title="<%- gettext('Visit the unit.') %>"><%- unit.display_name %></a></dd>
-    <% if (updated) { %>
-        <dt class="edx-notes-item-last-edited-title"><%- gettext("Last Edited:") %></dt>
-        <dd class="edx-notes-item-last-edited-value"><%- updated %></dd>
-    <% } %>
-    </dl>
-</div>
diff --git a/lms/templates/edxnotes/recent-activity-item.underscore b/lms/templates/edxnotes/recent-activity-item.underscore
new file mode 100644
index 000000000000..3d997880ed9a
--- /dev/null
+++ b/lms/templates/edxnotes/recent-activity-item.underscore
@@ -0,0 +1,28 @@
+<% collection.each(function (model) { %>
+<article id="edx-notes-page-item-<%=_.uniqueId()%>" class="edx-notes-page-item">
+    <div class="col-left">
+    <% if (model.get('quote')) { %>
+        <div class="edx-notes-item-quote"><%= model.escape('quote') %></div>
+    <% } %>
+    <% if (model.get('text')) { %>
+        <div class="edx-notes-item-text"><%= model.escape('text') %></div>
+    <% } %>
+    </div>
+    <div class="col-right">
+        <dl>
+        <% if (model.get('text') && model.get('quote')) { %>
+            <dt class="edx-notes-item-highlight-title"><%- gettext("Highlighted & Noted in:") %></dt>
+        <% } else if (model.get('text')) { %>
+            <dt class="edx-notes-item-highlight-title"><%- gettext("Highlighted in:") %></dt>
+        <% } else if (model.get('quote')) { %>
+            <dt class="edx-notes-item-highlight-title"><%- gettext("Noted in:") %></dt>
+        <% } %>
+            <dd><a class="edx-notes-item-unit-link" href="<%= model.get('unit').url %>" title="<%- gettext('Visit the unit.') %>"><%- model.get('unit').display_name %></a></dd>
+        <% if (model.get('updated')) { %>
+            <dt class="edx-notes-item-last-edited-title"><%- gettext("Last Edited:") %></dt>
+            <dd class="edx-notes-item-last-edited-value"><%- model.get('updated') %></dd>
+        <% } %>
+        </dl>
+    </div>
+</article>
+<% }) %>
diff --git a/lms/templates/edxnotes/tab-item.underscore b/lms/templates/edxnotes/tab-item.underscore
new file mode 100644
index 000000000000..a5eff00dc619
--- /dev/null
+++ b/lms/templates/edxnotes/tab-item.underscore
@@ -0,0 +1,4 @@
+<a href class="tab-item-name"><%- gettext(name) %></a>
+<% if (is_closable) { %>
+    <a href class="btn-close icon-close">x</a>
+<% } %>
diff --git a/lms/urls.py b/lms/urls.py
index 79304abc3b45..28b4d757e0f6 100644
--- a/lms/urls.py
+++ b/lms/urls.py
@@ -379,7 +379,7 @@
         url(r'^profile/', include('student_profile.urls')),
 
         # Student Notes
-        url(r'^courses/{}/edxnotes$'.format(settings.COURSE_ID_PATTERN), 'edxnotes.views.edxnotes', name='edxnotes'),
+        url(r'^courses/{}/edxnotes'.format(settings.COURSE_ID_PATTERN), include('edxnotes.urls'), name="edxnotes_endpoints"),
     )
 
     # allow course staff to change to student view of courseware