diff --git a/src/plugins/navigation/__tests__/testNavigationPlugin.node.js b/src/plugins/navigation/__tests__/testNavigationPlugin.node.js
index bab2dfcd2..1642dd230 100644
--- a/src/plugins/navigation/__tests__/testNavigationPlugin.node.js
+++ b/src/plugins/navigation/__tests__/testNavigationPlugin.node.js
@@ -12,14 +12,12 @@ import type {PersistedState} from '../';
 
 function constructPersistedStateMock(): PersistedState {
   return {
-    bookmarks: [],
     navigationEvents: [],
   };
 }
 
 function constructPersistedStateMockWithEvents(): PersistedState {
   return {
-    bookmarks: [],
     navigationEvents: [
       {
         uri: 'mock://this_is_a_mock_uri/mock/1',
diff --git a/src/plugins/navigation/components/BookmarksSidebar.js b/src/plugins/navigation/components/BookmarksSidebar.js
index 7c681871d..791cc93b7 100644
--- a/src/plugins/navigation/components/BookmarksSidebar.js
+++ b/src/plugins/navigation/components/BookmarksSidebar.js
@@ -11,7 +11,7 @@ import {DetailSidebar, FlexCenter, styled, colors} from 'flipper';
 import type {Bookmark} from '../';
 
 type Props = {|
-  bookmarks: Array<Bookmark>,
+  bookmarks: Map<string, Bookmark>,
   onNavigate: string => void,
 |};
 
@@ -57,11 +57,11 @@ export default (props: Props) => {
   const {bookmarks, onNavigate} = props;
   return (
     <DetailSidebar>
-      {bookmarks.length === 0 ? (
+      {bookmarks.size === 0 ? (
         <NoData grow>No Bookmarks</NoData>
       ) : (
         <BookmarksList>
-          {bookmarks.map(bookmark => (
+          {[...bookmarks.values()].map(bookmark => (
             <div
               className="bookmark-container"
               role="button"
diff --git a/src/plugins/navigation/components/NavigationInfoBox.js b/src/plugins/navigation/components/NavigationInfoBox.js
index e0a574014..4e1001ceb 100644
--- a/src/plugins/navigation/components/NavigationInfoBox.js
+++ b/src/plugins/navigation/components/NavigationInfoBox.js
@@ -11,6 +11,7 @@ import {parseURIParameters} from '../util/uri';
 import {IconButton, FavoriteButton} from './';
 
 type Props = {|
+  isBookmarked: boolean,
   uri: ?string,
   onNavigate: (query: string) => void,
   onFavorite: (query: string) => void,
@@ -52,7 +53,7 @@ const NavigationInfoBoxContainer = styled('div')({
 });
 
 export default (props: Props) => {
-  const {uri} = props;
+  const {uri, isBookmarked} = props;
   if (uri == null) {
     return (
       <NavigationInfoBoxContainer>
@@ -65,7 +66,7 @@ export default (props: Props) => {
       <NavigationInfoBoxContainer>
         <div className="icon-container">
           <FavoriteButton
-            highlighted={false}
+            highlighted={isBookmarked}
             size={16}
             onClick={() => props.onFavorite(uri)}
           />
diff --git a/src/plugins/navigation/components/SaveBookmarkDialog.js b/src/plugins/navigation/components/SaveBookmarkDialog.js
index 057e328a7..3009d673e 100644
--- a/src/plugins/navigation/components/SaveBookmarkDialog.js
+++ b/src/plugins/navigation/components/SaveBookmarkDialog.js
@@ -7,12 +7,15 @@
  */
 
 import {Button, FlexColumn, Input, Sheet, styled} from 'flipper';
+import {useState} from 'react';
+
+import type {Bookmark} from '../';
 
 type Props = {|
   uri: ?string,
   shouldShow: boolean,
   onHide: ?() => void,
-  onSubmit: ?(uri: string) => void,
+  onSubmit: Bookmark => void,
 |};
 
 const Container = styled(FlexColumn)({
@@ -45,6 +48,7 @@ const NameInput = styled(Input)({
 
 export default (props: Props) => {
   const {shouldShow, onHide, onSubmit, uri} = props;
+  const [commonName, setCommonName] = useState('');
   if (uri == null || !shouldShow) {
     return null;
   } else {
@@ -54,19 +58,30 @@ export default (props: Props) => {
           return (
             <Container>
               <Title>Save to bookmarks...</Title>
-              <NameInput placeholder="Name..." />
+              <NameInput
+                placeholder="Name..."
+                value={commonName}
+                onChange={event => setCommonName(event.target.value)}
+              />
               <URIContainer>{uri}</URIContainer>
               <ButtonContainer>
-                <Button onClick={() => hide()} compact padded>
+                <Button
+                  onClick={() => {
+                    hide();
+                    setCommonName('');
+                  }}
+                  compact
+                  padded>
                   Cancel
                 </Button>
                 <Button
                   type="primary"
                   onClick={() => {
                     hide();
-                    if (onSubmit != null) {
-                      onSubmit(uri);
-                    }
+                    onSubmit({uri, commonName});
+                    // The component state is remembered even after unmounting.
+                    // Thus it is necessary to reset the commonName here.
+                    setCommonName('');
                   }}
                   compact
                   padded>
diff --git a/src/plugins/navigation/components/SearchBar.js b/src/plugins/navigation/components/SearchBar.js
index baec400e0..c017ecbd6 100644
--- a/src/plugins/navigation/components/SearchBar.js
+++ b/src/plugins/navigation/components/SearchBar.js
@@ -16,9 +16,12 @@ import {
 } from 'flipper';
 import {IconButton, FavoriteButton} from './';
 
+import type {Bookmark} from '../';
+
 type Props = {|
   onFavorite: (query: string) => void,
   onNavigate: (query: string) => void,
+  bookmarks: Map<string, Bookmark>,
 |};
 
 type State = {|
@@ -63,6 +66,8 @@ class SearchBar extends Component<Props, State> {
   };
 
   render = () => {
+    const {bookmarks} = this.props;
+    const {query} = this.state;
     return (
       <Toolbar>
         <SearchBox>
@@ -79,19 +84,21 @@ class SearchBar extends Component<Props, State> {
             <Glyph name="chevron-down" size={12} />
           </SearchChevronContainer>
         </SearchBox>
-        <IconContainer>
-          <IconButton
-            icon="send"
-            size={16}
-            outline={true}
-            onClick={() => this.navigateTo(this.state.query)}
-          />
-          <FavoriteButton
-            size={16}
-            highlighted={false}
-            onClick={() => this.favorite(this.state.query)}
-          />
-        </IconContainer>
+        {query.length > 0 ? (
+          <IconContainer>
+            <IconButton
+              icon="send"
+              size={16}
+              outline={true}
+              onClick={() => this.navigateTo(this.state.query)}
+            />
+            <FavoriteButton
+              size={16}
+              highlighted={bookmarks.has(query)}
+              onClick={() => this.favorite(this.state.query)}
+            />
+          </IconContainer>
+        ) : null}
       </Toolbar>
     );
   };
diff --git a/src/plugins/navigation/components/Timeline.js b/src/plugins/navigation/components/Timeline.js
index d27a5c88a..8e01a08bc 100644
--- a/src/plugins/navigation/components/Timeline.js
+++ b/src/plugins/navigation/components/Timeline.js
@@ -9,11 +9,13 @@
 import {styled} from 'flipper';
 import {NavigationInfoBox} from './';
 
-import type {NavigationEvent} from '../';
+import type {Bookmark, NavigationEvent} from '../';
 
 type Props = {|
+  bookmarks: Map<string, Bookmark>,
   events: Array<NavigationEvent>,
   onNavigate: string => void,
+  onFavorite: string => void,
 |};
 
 const TimelineContainer = styled('div')({
@@ -22,14 +24,16 @@ const TimelineContainer = styled('div')({
 });
 
 export default (props: Props) => {
+  const {bookmarks, events, onNavigate, onFavorite} = props;
   return (
     <TimelineContainer>
-      {props.events.map((event: NavigationEvent) => {
+      {events.map((event: NavigationEvent) => {
         return (
           <NavigationInfoBox
+            isBookmarked={event.uri != null ? bookmarks.has(event.uri) : false}
             uri={event.uri}
-            onNavigate={props.onNavigate}
-            onFavorite={() => {}} // stubbed for now
+            onNavigate={onNavigate}
+            onFavorite={onFavorite}
           />
         );
       })}
diff --git a/src/plugins/navigation/index.js b/src/plugins/navigation/index.js
index 932962846..1126a7b6d 100644
--- a/src/plugins/navigation/index.js
+++ b/src/plugins/navigation/index.js
@@ -9,12 +9,18 @@
 import {FlipperPlugin} from 'flipper';
 import {
   BookmarksSidebar,
+  SaveBookmarkDialog,
   SearchBar,
   Timeline,
   ScrollableFlexColumn,
 } from './components';
+import {readBookmarksFromDB, writeBookmarkToDB} from './util/indexedDB';
 
-type State = {||};
+type State = {|
+  bookmarks: Map<string, Bookmark>,
+  shouldShowSaveBookmarkDialog: boolean,
+  saveBookmarkURI: ?string,
+|};
 
 export type NavigationEvent = {|
   date: ?Date,
@@ -23,12 +29,11 @@ export type NavigationEvent = {|
 
 export type Bookmark = {|
   uri: string,
-  commonName: ?string,
+  commonName: string,
 |};
 
 export type PersistedState = {|
   navigationEvents: Array<NavigationEvent>,
-  bookmarks: Array<Bookmark>,
 |};
 
 export default class extends FlipperPlugin<State, {}, PersistedState> {
@@ -39,7 +44,12 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
 
   static defaultPersistedState: PersistedState = {
     navigationEvents: [],
-    bookmarks: [],
+  };
+
+  state = {
+    bookmarks: new Map<string, Bookmark>(),
+    shouldShowSaveBookmarkDialog: false,
+    saveBookmarkURI: null,
   };
 
   static persistedStateReducer = (
@@ -66,6 +76,12 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     }
   };
 
+  componentDidMount = () => {
+    readBookmarksFromDB().then(bookmarks => {
+      this.setState({bookmarks});
+    });
+  };
+
   onKeyboardAction = (action: string) => {
     if (action === 'clear') {
       this.props.setPersistedState({navigationEvents: []});
@@ -78,16 +94,45 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     });
   };
 
+  onFavorite = (uri: string) => {
+    this.setState({shouldShowSaveBookmarkDialog: true, saveBookmarkURI: uri});
+  };
+
+  addBookmark = (bookmark: Bookmark) => {
+    const newBookmark = {
+      uri: bookmark.uri,
+      commonName:
+        bookmark.commonName.length > 0 ? bookmark.commonName : bookmark.uri,
+    };
+    writeBookmarkToDB(newBookmark);
+    const newMapRef = this.state.bookmarks;
+    newMapRef.set(newBookmark.uri, newBookmark);
+    this.setState({bookmarks: newMapRef});
+  };
+
   render() {
-    const {navigationEvents, bookmarks} = this.props.persistedState;
+    const {bookmarks, shouldShowSaveBookmarkDialog} = this.state;
+    const {navigationEvents} = this.props.persistedState;
     return (
       <ScrollableFlexColumn>
         <SearchBar
+          bookmarks={bookmarks}
           onNavigate={this.navigateTo}
-          onFavorite={(query: string) => {}}
+          onFavorite={this.onFavorite}
+        />
+        <Timeline
+          bookmarks={bookmarks}
+          events={navigationEvents}
+          onNavigate={this.navigateTo}
+          onFavorite={this.onFavorite}
         />
-        <Timeline events={navigationEvents} onNavigate={this.navigateTo} />
         <BookmarksSidebar bookmarks={bookmarks} onNavigate={this.navigateTo} />
+        <SaveBookmarkDialog
+          shouldShow={shouldShowSaveBookmarkDialog}
+          uri={this.state.saveBookmarkURI}
+          onHide={() => this.setState({shouldShowSaveBookmarkDialog: false})}
+          onSubmit={this.addBookmark}
+        />
       </ScrollableFlexColumn>
     );
   }