diff --git a/README.md b/README.md
index 60bc4e4..4253d88 100755
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@
 - Give call entries shine and box shadow. Maybe color them by type
 - Add entry transition animation
 - Add favicon
+- Seperator could be added by putting li renderer in a seperate function from
+  Feed
 
 ## Summary
 
diff --git a/src/App.jsx b/src/App.jsx
index 0a0c85a..6f20048 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,20 +4,24 @@ import ReactDOM from 'react-dom';
 import Header from './Header.jsx';
 import Feed from './Feed.jsx';
 import Navigator from './Navigator.jsx';
-import Archive from './Archive.jsx';
+import Call from './Call.jsx';
 
 const App = () => {
 	const [recent, setRecent] = useState(true)
+	const [call, setCall] = useState()
+
+	let focus = <Feed recent={recent} onSelect={ (c) => setCall(c) }/>
+	if (call) {
+		focus = <Call/>
+	}
+
   return (
     <div className='container'>
       <Header/>
 	  <Navigator onPageChange={ (r) => setRecent(r) }
 	  recent={recent}/>
       <div className="container-view">
-	  {recent
-		  ? <Feed/>
-		  : <Archive/>
-	  }
+	  {focus}
 	  </div>
     </div>
   );
diff --git a/src/Archive.jsx b/src/Archive.jsx
new file mode 100644
index 0000000..672f68f
--- /dev/null
+++ b/src/Archive.jsx
@@ -0,0 +1,3 @@
+import React, {useState, useEffect} from 'react';
+
+
diff --git a/src/Feed.jsx b/src/Feed.jsx
index 5a8bd08..028589d 100644
--- a/src/Feed.jsx
+++ b/src/Feed.jsx
@@ -61,7 +61,7 @@ function Seperator(props) {
 } 
 
 // The component used for retrieving, sorting, and rendering calls.
-function Feed() {
+function Feed(props) {
 	
 	const [ stack, setStack ] = useState(null)
 
@@ -78,7 +78,9 @@ function Feed() {
 	if (stack) {
 		entries = stack.map((entry, index) => {
 
-			if (entry.is_archived) {
+			// Check if current page matches entry type
+			
+			if (entry.is_archived == props.recent) {
 				return null
 			}
 
diff --git a/src/Navigator.jsx b/src/Navigator.jsx
new file mode 100644
index 0000000..84aef46
--- /dev/null
+++ b/src/Navigator.jsx
@@ -0,0 +1,18 @@
+import React, {useState, useEffect} from 'react';
+
+function Navigator(props) {
+	let recent = "recent" + (props.recent ? " selected" : '')
+	let archived = "archived" + (props.recent ? "" : " selected")
+	return (
+		<nav>
+			<button onClick={() => props.onPageChange(true)}
+			className={recent}>Recent
+			</button>
+			<button onClick={() => props.onPageChange(false)}
+			className={archived}>Archived
+			</button>
+		</nav>
+	)
+}
+
+export default Navigator