diff --git a/frontend/src/components/PhotoSelection.jsx b/frontend/src/components/PhotoSelection.jsx
new file mode 100644
index 0000000..d3760f4
--- /dev/null
+++ b/frontend/src/components/PhotoSelection.jsx
@@ -0,0 +1,24 @@
+import {useState} from 'react'
+
+/*
+Display a drop-down list of photos to be shown.
+*/
+function PhotoSelection (props) {
+
+
+    let listDisplayed = props.data.map(item =>
+        <option key={item.id} value={item}>{item}</option>);
+
+
+    return(
+        <>
+            <select
+                name="photo"
+                id="photo"
+            >
+                <option/>
+                {listDisplayed}</select>
+        </>
+    )
+}
+export default PhotoSelection
\ No newline at end of file
diff --git a/frontend/src/components/ShowList.jsx b/frontend/src/components/ShowList.jsx
index 2d223bc..5eb9512 100644
--- a/frontend/src/components/ShowList.jsx
+++ b/frontend/src/components/ShowList.jsx
@@ -1,5 +1,5 @@
 import {useState} from 'react'
-
+import PhotoSelection from './PhotoSelection'
 /*
 Display a drop-down list of sessions for navigation.
 */
@@ -25,16 +25,12 @@ function ShowList(props) {
         fetch(url)
             .then(response => response.json())
             .then(data => setPhotoFilenames(data));
-    }
 
-    function PhotoList() {
-        console.log(photoFilenames);
-        return (
-            <ul>
-            </ul>
-        )
+       
     }
 
+  
+
     return (
         <>
             <h1>Photo Selection</h1>
@@ -45,7 +41,7 @@ function ShowList(props) {
             >
                 <option/>
                 {listDisplayed}</select>
-            <PhotoList/>
+            <PhotoSelection data={photoFilenames}/>
         </>
     )