diff --git a/imports/ui/Assignments.svelte b/imports/ui/Assignments.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/imports/ui/Assets/AssignAssets.svelte b/imports/ui/Assignments/AssignAssets.svelte
similarity index 100%
rename from imports/ui/Assets/AssignAssets.svelte
rename to imports/ui/Assignments/AssignAssets.svelte
diff --git a/imports/ui/Assets/AssignmentByAsset.svelte b/imports/ui/Assignments/AssignmentByAsset.svelte
similarity index 100%
rename from imports/ui/Assets/AssignmentByAsset.svelte
rename to imports/ui/Assignments/AssignmentByAsset.svelte
diff --git a/imports/ui/Assets/AssignmentByAssignee.svelte b/imports/ui/Assignments/AssignmentByAssignee.svelte
similarity index 100%
rename from imports/ui/Assets/AssignmentByAssignee.svelte
rename to imports/ui/Assignments/AssignmentByAssignee.svelte
diff --git a/imports/ui/Assignments/AssignmentByPerson.svelte b/imports/ui/Assignments/AssignmentByPerson.svelte
new file mode 100644
index 0000000..d6190b6
--- /dev/null
+++ b/imports/ui/Assignments/AssignmentByPerson.svelte
@@ -0,0 +1,162 @@
+<script>
+    import {Meteor} from "meteor/meteor";
+    import {onMount} from "svelte";
+    import {Sites} from "../../api/sites";
+    import TextField from '@smui/textfield';
+    import {Students} from "../../api/students";
+    import Select, { Option } from '@smui/select';
+    import {Staff} from "/imports/api/staff";
+    import List, {Item, Graphic, Meta, Text, PrimaryText, SecondaryText} from '@smui/list';
+    import Paper from '@smui/paper';
+    import LayoutGrid, {Cell} from '@smui/layout-grid';
+
+    let grades = ['Staff', 'All Grades'];
+    onMount(async () => {
+        Meteor.subscribe('sites');
+        Meteor.call('students.getPossibleGrades', (err, result) => {
+            if(err) console.log(err);
+            else {
+                grades = ['Staff', 'All Grades', ...result];
+            }
+        });
+    });
+    // Load the sites (reactive).
+    let sites = Sites.find({});
+    let selectedSiteId;
+    let categories = ['Asset ID', 'Email', 'First Name', 'Last Name'];
+    let selectedCategory = 'Email';
+    let selectedGrade = 'All Grades';
+    let searchText = "";
+    let searchResults;
+    let selectedResult;
+
+    $: {
+    	console.log("Site ID")
+	    console.log(selectedSiteId)
+        if(selectedSiteId) {
+            Meteor.subscribe('students', selectedSiteId);
+            Meteor.subscribe('staff', selectedSiteId);
+        }
+    }
+
+    $: {
+        selectedResult = null;
+        console.log("Starting search")
+
+        // Require at least two characters in the search field before we start filtering.
+        if(selectedSiteId && selectedGrade && selectedCategory) {
+            let query = {};
+            let queryType = (selectedGrade === "Staff") ? 1 : 0;
+
+            if(searchText && searchText.length > 0) {
+	            if (selectedCategory === 'Email') {
+		            query.email = {$regex: searchText, $options: 'i'};
+	            } else if( selectedCategory === 'Asset ID') {
+                    //Do not do anything yet...
+                } else if (selectedCategory === 'First Name') {
+		            query.firstName = {$regex: searchText, $options: 'i'};
+	            } else {
+		            query.lastName = {$regex: searchText, $options: 'i'};
+	            }
+            }
+
+            if(selectedCategory === 'Asset ID') {
+                Meteor.call('AssetAssignments.getOne', searchText, (err, result) => {
+                   if(err) {
+                       console.error(err);
+                   }
+                   else {
+                       if(result && result.assigneeType && result.assigneeId) {
+                           if (result.assigneeType === 'Staff') {
+                                query._id = result.assigneeId;
+                                queryType = 1;
+                           } else if (result.assigneeType === 'Student') {
+                               query._id = result.assigneeId;
+                               queryType = 0;
+                           } else {
+                               console.error("Invalid AssigneeType");
+                           }
+                       }
+                       else {
+                           console.error('Invalid result from AssetAssignments.getOne');
+                       }
+                   }
+                });
+            }
+
+            if(queryType === 1) {
+                searchResults = Staff.find(query);
+            }
+            else {
+                if(selectedGrade !== 'All Grades') {
+                    query.grade = selectedGrade;
+                }
+
+                // console.log("Searching")
+	            // console.log(query)
+                searchResults = Students.find(query);
+            }
+        }
+        else {
+            searchResults = undefined;
+        }
+    }
+</script>
+
+<div class="container">
+    <h1 style="display: block">Asset Assignments</h1>
+
+    <Paper>
+        <LayoutGrid>
+            <Cell span="{6}">
+                <Select bind:value={selectedSiteId} label="Site">
+                    {#each $sites as site}
+                        <Option value={site._id}>{site.name}</Option>
+                    {/each}
+                </Select>
+            </Cell>
+            <Cell span="{6}">
+                <Select bind:value={selectedGrade} label="Grade">
+                    {#each grades as grade}
+                        <Option value={grade}>{grade}</Option>
+                    {/each}
+                </Select>
+            </Cell>
+            <Cell span="{6}">
+                <Select bind:value={selectedCategory} label="Category">
+                    {#each categories as category}
+                        <Option value={category}>{category}</Option>
+                    {/each}
+                </Select>
+            </Cell>
+            <Cell span="{6}">
+                <TextField type="text" bind:value={searchText} label="Search"></TextField>
+            </Cell>
+        </LayoutGrid>
+    </Paper>
+
+    <div style="width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; align-content: stretch; column-gap: 2rem;">
+<!--        <TextField bind:this={assetIdWidget} style="flex-grow: 999;" type="text" bind:value={assetId} label="Asset ID">-->
+
+<!--        </TextField>-->
+<!--        <Button variant="raised" color="secondary" on:click={createAssignment()} disabled={!assetId || assetId.length === 0 || !selectedAssignee}>-->
+<!--            <Label style="color: white">Create</Label>-->
+<!--        </Button>-->
+    </div>
+    <List twoLine singleSelection>
+	    {#if searchResults}
+        {#each $searchResults as result}
+            <Item selected={selectedResult === result}>
+                <Text>
+                    <PrimaryText>{result.firstName} {result.lastName}</PrimaryText>
+                    <SecondaryText>{result.email} {result.grade ? '(' + result.grade + ')' : ""}</SecondaryText>
+                </Text>
+            </Item>
+        {/each}
+	    {/if}
+    </List>
+</div>
+
+<style>
+
+</style>
\ No newline at end of file