diff --git a/src/App.js b/src/App.js
index 93a3eee..7a6d9a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,6 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, Component } from 'react';
+import LangDropdown from './components/LangDropdown';
+import axios from 'axios';
 
 function makeBook(author, hLang, cLang, title, url)
 {
@@ -85,27 +87,42 @@ class SubmitButton extends Component{
 	}
 }
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-        message: "Default Content"
-    }
-  }
+function App() {
+	const [ data, setData ] = useState(undefined);
+	const [ loading, setLoading ] = useState(true); //Determines whether to show spinner
 
+	useEffect( // runs the first time the page renders
+		() => {
+			async function fetchData() {
+				setLoading(true);
+				let result = await axios.get('https://raw.githubusercontent.com/FreeEbookFoundationBot/free-programming-books-json/main/fpb.json');
+				setData(result.data);
+				setLoading(false);
+			}
+			fetchData();
+		},
+		[]
+	);
 
- 
-  render() {
-    return (
-      <div>
-        <div id="frontPage">
-          <h1>Free Programming Books</h1>
-          <input type="text"></input>
-		  <SubmitButton/>
-        </div>
-      </div>
-    );
-  }
+	if(loading){ //still fetching resource
+		return(
+			<h1>Loading...</h1>
+		);
+	}
+	else{ // resource fetched
+		console.log(data);
+		return(
+			<div>
+				<div id="frontPage">
+					<h1>Free Programming Books</h1>
+					<input type="text"></input>
+					<LangDropdown data={data}/>
+					<SubmitButton/>
+				</div>
+			</div>
+		);
+	}
 }
+
  
 export default App;
\ No newline at end of file
diff --git a/src/components/LangDropdown.js b/src/components/LangDropdown.js
new file mode 100644
index 0000000..414caf3
--- /dev/null
+++ b/src/components/LangDropdown.js
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+
+function LangDropdown({ data }){
+    const [ languages, setLanguages ] = useState([]);
+    let options = null;
+
+    useEffect( // run whenever data changes
+        () => {
+            let langArray = [];
+            data.children[0].children.forEach( (document) => {
+                langArray.push(document.language);
+            });
+            langArray.sort((a, b) => a.name > b.name)
+            setLanguages(langArray);
+        },
+        [data]
+    )
+
+    const createOption = (language) => {
+        return (<option key={language.code} value={language.code}>{language.name}</option>)
+    }
+
+    options = 
+            languages &&
+            languages.map( (language) => {
+                return createOption(language)
+            });
+    // console.log(options);
+    return(
+        
+        <select name="languages" id="languages">
+            {options}
+        </select>
+    )
+}
+
+export default LangDropdown;
\ No newline at end of file