diff --git a/dist/output.css b/dist/output.css
index 241ba65..c995ba5 100644
--- a/dist/output.css
+++ b/dist/output.css
@@ -2191,6 +2191,44 @@ html {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.mx-12 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mr-16 {
+  margin-right: 4rem;
+}
+
+.mr-20 {
+  margin-right: 5rem;
+}
+
 .flex {
   display: flex;
 }
@@ -2232,7 +2270,21 @@ html {
   padding-right: 0.5rem;
 }
 
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
\ No newline at end of file
diff --git a/src/views/Generator.vue b/src/views/Generator.vue
index 32266a5..bac0828 100644
--- a/src/views/Generator.vue
+++ b/src/views/Generator.vue
@@ -15,49 +15,48 @@
     <h1 class="grow">Anglish Name Generator</h1>
   </div>
 
-  <div class=" flex center">
-    <form action="">
+  <div class="flex center">
+    <form>
       <label class="label cursor-pointer">
-        <span class="label-text">Living names</span>
-        <input type="checkbox" :checked="livingNamesUsed" class="checkbox">
+        <span class="label-text">Living names (215)</span>
+        <input type="checkbox" class="checkbox" v-model="livingNamesUsed">
       </label>
 
       <label class="label cursor-pointer">
-        <span class="label-text">Last names</span>
-        <input type="checkbox" :checked="lastNamesUsed" class="checkbox">
+        <span class="label-text">Last names (599)</span>
+        <input type="checkbox" class="checkbox" v-model="lastNamesUsed">
       </label>
 
       <label class="label cursor-pointer">
-        <span class="label-text">Quickened names</span>
-        <input type="checkbox" :checked="quickenedNamesUsed" class="checkbox">
+        <span class="label-text">Quickened/Revived names (2059)</span>
+        <input type="checkbox" class="checkbox" v-model="quickenedNamesUsed">
       </label>
 
       <label class="label cursor-pointer">
-        <span class="label-text">Frozen names</span>
-        <input type="checkbox" :checked="frozenNamesUsed" class="checkbox">
+        <span class="label-text">Frozen/Old English names (11)</span>
+        <input type="checkbox" class="checkbox" v-model="frozenNamesUsed">
       </label>
 
       <label class="label cursor-pointer">
-        <span class="label-text">Unfounded names</span>
-        <input type="checkbox" :checked="unfoundedNamesUsed" class="checkbox">
+        <span class="label-text">Unfounded/Germanic names (59)</span>
+        <input type="checkbox" class="checkbox" v-model="unfoundedNamesUsed">
       </label>
 
-      <input type="range" min="0" max="3" value="1" class="range" step="1" v-model="sex"/>
+      <input type="range" min="0" max="2" value="0" class="range mt-5" step="1" v-model="sex"/>
       <div class="w-full flex justify-between text-xs px-2">
-        <span>All sexes</span>
         <span>Unisex</span>
         <span>Male</span>
         <span>Female</span>
       </div>
 
-      <label class="form-control w-full max-w-xs">
+      <label class="form-control w-full max-w-xs my-5">
         <div class="label">
           <span class="label-text">Number of names to generate</span>
         </div>
         <input type="text" placeholder="Number of names" class="input input-bordered w-full max-w-xs" v-model="namesToGenerate"/>
       </label>
 
-      <button class="btn btn-active btn-primary" @click="generateNames" type="button">
+      <button class="btn btn-active btn-primary mb-5" @click="generateNames" type="button">
         Generate Names
       </button>
     </form>
@@ -78,8 +77,19 @@
         <tr v-for="(namePair, index) in generatedNamesTable">
           <!-- {{ console.log(`index = ${index}`) }} -->
           <th>{{ index + 1 }}</th>
-          <td>{{ namePair[0].english_name }} {{ namePair[1].english_name }}</td>
-          <td>{{ namePair[0].anglish_name }} {{ namePair[1].anglish_name }}</td>
+          <td v-if="lastNamesUsed">
+            {{ namePair[0].english_name }} {{ namePair[1].english_name }}
+          </td>
+          <td v-else>
+            {{ namePair[0].english_name }}
+          </td>
+
+          <td v-if="lastNamesUsed">
+            {{ namePair[0].anglish_name }} {{ namePair[1].anglish_name }}
+          </td>
+          <td v-else>
+            {{ namePair[0].anglish_name }}
+          </td>
         </tr>
       </tbody>
     </table>
@@ -91,6 +101,7 @@ import { ref, type Ref } from 'vue';
 
 let names: Ref<NamesDict> = ref({});
 let generatedNamesTable: Ref<NameEntry[][]> = ref([]);
+let filteredNamesTable: Ref<NameEntry[][]> = ref([]);
 
 interface NameEntry {
   "english_name": string,
@@ -108,7 +119,7 @@ interface NamesDict {
 }
 
 async function getNames() {
-  const res = await fetch("../../anglish_given_names.json");
+  const res = await fetch("/anglish_given_names.json");
   await res.json().then((data: NamesDict) => {
     names.value = data;
     console.log("Loaded names!");
@@ -131,47 +142,78 @@ let namesToGenerate: Ref<number> = ref(1);
 function generateFirstName(num: number) {
   let namesPool: Array<NameEntry> = [];
   
-  if (livingNamesUsed) {
+  if (livingNamesUsed.value) {
+    console.log("Living names used!");
     namesPool = [
       ...names.value["Living"],
       ...namesPool,
     ]
   }
 
-  if (quickenedNamesUsed) {
+  if (quickenedNamesUsed.value) {
+    console.log("Quickened names used!");
     namesPool = [
       ...names.value["Quickened"],
       ...namesPool,
     ]
   }
 
-  if (frozenNamesUsed) {
+  if (frozenNamesUsed.value) {
+    console.log("Frozen names used!");
     namesPool = [
       ...names.value["Frozen"],
       ...namesPool,
     ]
   }
 
-  if (unfoundedNamesUsed) {
+  if (unfoundedNamesUsed.value) {
+    console.log("Unfounded names used!");
     namesPool = [
       ...names.value["Unfounded"],
       ...namesPool,
     ]
   }
 
+  // Filter them by sex
+  namesPool = namesPool.filter((name) => {
+      if (sex.value == 0) {
+        return name;
+      } else if ((name.kind == "Male" || name.kind == "Unisex") && sex.value == 1) {
+        return name;
+      } else if ((name.kind == "Female" || name.kind == "Unisex") && sex.value == 2) {
+        return name;
+      }
+      // else {
+      //   console.log(`Name did not match: ${name.english_name}\nkind: ${name.kind}\nsex value: ${sex.value}`);
+      // }
+  });
+
   let generatedNames: Array<NameEntry> = [];
 
   for (let i = 0; i < num; i++) {
-    generatedNames.push(
-      namesPool[(Math.floor(Math.random() * namesPool.length))]
-    );
+    let name = namesPool[(Math.floor(Math.random() * namesPool.length))];
+    
+    // do {
+    //   if (name.kind == "Unisex" && sex.value == 0) {
+    //     break;
+    //   } else if (name.kind == "Male" && sex.value == 1) {
+    //     break;
+    //   } else if (name.kind == "Female" && sex.value == 2) {
+    //     break;
+    //   } else {
+    //     console.log(`Name did not match: ${name.english_name}\nkind: ${name.kind}\nsex value: ${sex.value}`);
+    //     name = namesPool[(Math.floor(Math.random() * namesPool.length))];
+    //   }
+    // } while (true);
+    
+    generatedNames.push(name);
   }
 
   return generatedNames;
 }
 
 function generateLastName(num: number) {
-  if (!lastNamesUsed) {
+  if (!lastNamesUsed.value) {
     return [];
   }
 
@@ -195,6 +237,8 @@ function generateNames() {
   const firstNames = generateFirstName(numberOfNames);
   const lastNames = generateLastName(numberOfNames);
 
+  // If male or female or unisex etc
+
   const zippedNames = firstNames.map((left, idx) => [left, lastNames[idx]]);
 
   // console.log(zippedNames);