diff --git a/src/App.js b/src/App.js
index a2efb0b..63f5281 100644
--- a/src/App.js
+++ b/src/App.js
@@ -555,7 +555,7 @@ function TableEditor(p) {
 						}} value={String(dat[col.name])}/></td>)}</tr>)}
 			  </tbody>
 			</table>
-		</div>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>}
+		</div>:<><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/></>}
 	</>
 }
 
diff --git a/src/TestPanel.js b/src/TestPanel.js
index 8ce799c..5745768 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -121,25 +121,28 @@ function EditableClass(p){
 }
 
 function PopupWindow(p) {
+  const [filter,setFilter] = useState("")
+  const [page,setPage] = useState(1)
+
 	return <Modal isOpen={p.modalOpen} onRequestClose={()=>{p.setModalOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
-<div className="box boxModal">
-<div className="boxTitleBar">
-<h1>{p.title}</h1>
-{p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
-</div>
-<PageControl pages={p.pageNames.length} pageNames={p.pageNames}/>
-<div className="itemBar">
-<div className="itemBarSort">
-<select className="itemBarForm">
-  {p.sortItems.map((item)=><option>{item.name}</option>)}
-</select>
-</div>
-<div className="itemBarFilter">
-{p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" />}
-</div>
-</div>
-{p.children}
-</div>
+    <div className="box boxModal">
+    <div className="boxTitleBar">
+    <h1>{p.title}</h1>
+    {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
+    </div>
+    <PageControl  pages={p.pageNames.length} pageNames={p.pageNames}  currentPage={page} setCurrentPage={setPage}/>
+    <div className="itemBar">
+      <div className="itemBarSort">
+        <select className="itemBarForm">
+          {p.sortItems.map((item)=><option value={item.name}>{item.name}</option>)}
+        </select>
+      </div>
+      <div className="itemBarFilter">
+        {p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
+      </div>
+    </div>
+    {p.children}
+  </div>
 	</Modal>
 } 
 
diff --git a/src/style.css b/src/style.css
index 9e83a40..241827f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -945,14 +945,6 @@ button{
 .table-padding{
 	padding: 4px;
 }
-.modal {
-	flex-grow: 1;
-	flex-basis: 200px;
-	max-width: 580px;
-	outline: 0;
-	height: 95vh;
-	margin: 0 10px;
-  }
 .modalOverlay {
     position: fixed;
     top: 0;
@@ -960,11 +952,24 @@ button{
     right: 0;
     bottom: 0;
     background: rgba(0,0,0,.9);
-	display: flex;
-	flex-flow: row wrap;
-	justify-content: center;
+	display: grid;
+	justify-items: stretch;
+	justify-content: stretch;    
+	grid-template-columns: 10px auto 10px;
+	grid-template-rows: 10px auto 10px;
+	grid-template-areas: 
+    ". . ."
+    ". main ."
+    ". . .";
 }
+.modal {
+	background-color: purple;
+	max-width: 580px;
+	outline: 0;
+	grid-area: main;
+  }
 .boxModal {
+
 }
 .modalItemListContainer {
 		overflow-y: auto;