diff --git a/frontend/components/ClubEditPage/EventsCard.tsx b/frontend/components/ClubEditPage/EventsCard.tsx
index e0acc1feb..b8fbaf946 100644
--- a/frontend/components/ClubEditPage/EventsCard.tsx
+++ b/frontend/components/ClubEditPage/EventsCard.tsx
@@ -1,7 +1,6 @@
 import { Field } from 'formik'
 import moment from 'moment'
 import React, { ReactElement, useState } from 'react'
-import CreatableSelect from 'react-select/creatable'
 import TimeAgo from 'react-timeago'
 import styled from 'styled-components'
 
@@ -297,7 +296,22 @@ const eventTableFields = [
   {
     name: 'is_ics_event',
     label: 'ICS',
-    converter: (a: boolean): ReactElement => <Icon name={a ? 'check' : 'x'} />,
+    converter: (a: boolean): ReactElement => (
+      <Icon
+        className={`${a ? 'has-text-success' : 'has-text-danger'}`}
+        name={a ? 'check' : 'x'}
+      />
+    ),
+  },
+]
+
+const eventTableFilter = [
+  {
+    label: 'Types',
+    options: EVENT_TYPES.map((obj) => {
+      return { key: obj.value, label: obj.label }
+    }),
+    filterFunction: (selection, object) => object.type === selection,
   },
 ]
 
@@ -343,12 +357,6 @@ const eventFields = (
       placeholder="Type your event description here!"
       as={RichTextField}
     />
-    <CreatableSelect
-      name="multiple_choice"
-      as={SelectField}
-      isMulti
-      creatable
-    />
   </>
 )
 
@@ -415,6 +423,7 @@ export default function EventsCard({ club }: EventsCardProps): ReactElement {
         fields={eventFields}
         fileFields={['image']}
         tableFields={eventTableFields}
+        filterOptions={eventTableFilter}
         noun="Event"
         currentTitle={(obj) => (obj != null ? obj.name : 'Deleted Event')}
         onChange={(obj) => {
diff --git a/frontend/components/ClubEditPage/MembersCard.tsx b/frontend/components/ClubEditPage/MembersCard.tsx
index 74d1585e8..a50937225 100644
--- a/frontend/components/ClubEditPage/MembersCard.tsx
+++ b/frontend/components/ClubEditPage/MembersCard.tsx
@@ -95,7 +95,16 @@ export default function MembersCard({ club }: MembersCardProps): ReactElement {
             ],
             filterFunction: (selection, object) => object.role === selection,
           },
+          {
+            label: 'Active',
+            options: [
+              { key: true, label: 'Active' },
+              { key: false, label: 'Inactive' },
+            ],
+            filterFunction: (selection, object) => object.active === selection,
+          },
         ]}
+        searchableColumns={['name', 'email']}
         currentTitle={(obj) =>
           obj != null ? `${obj.name} (${obj.email})` : 'Kicked Member'
         }
diff --git a/frontend/components/ModelForm.tsx b/frontend/components/ModelForm.tsx
index f76248bff..80c9ee12a 100644
--- a/frontend/components/ModelForm.tsx
+++ b/frontend/components/ModelForm.tsx
@@ -74,6 +74,7 @@ type ModelFormProps = {
   fields: any
   tableFields?: TableField[]
   filterOptions?: FilterOption[]
+  searchableColumns?: string[]
   currentTitle?: (object: ModelObject) => ReactElement | string
   noun?: string
   deleteVerb?: string
@@ -111,6 +112,7 @@ export const doFormikInitialValueFixes = (currentObject: {
 type ModelTableProps = {
   tableFields: TableField[]
   filterOptions?: FilterOption[]
+  searchableColumns?: string[]
   objects: ModelObject[]
   allowEditing?: boolean
   allowDeletion?: boolean
@@ -130,6 +132,7 @@ type ModelTableProps = {
 export const ModelTable = ({
   tableFields,
   filterOptions,
+  searchableColumns,
   objects,
   allowEditing = false,
   allowDeletion = false,
@@ -150,16 +153,16 @@ export const ModelTable = ({
       })),
     [tableFields],
   )
-
   tableFields = tableFields.map((column, index) => {
     if (column.converter) {
       const renderFunction = column.converter
       return {
         ...column,
-        render: (id, _) => {
-          const obj = objects?.[id]
+        render: (id) => {
+          const obj =
+            objects?.filter((item) => item.id === id)[0] || objects?.[id]
           const value = obj?.[column.name]
-          return obj && value ? renderFunction(value, obj) : 'N/A'
+          return obj && value !== null ? renderFunction(value, obj) : 'None'
         },
       }
     } else return column
@@ -215,7 +218,9 @@ export const ModelTable = ({
       <Table
         data={objects}
         columns={tableFields}
-        searchableColumns={['name']}
+        searchableColumns={
+          searchableColumns || tableFields.map((field) => field.name)
+        }
         filterOptions={filterOptions || []}
         draggable={draggable}
         onDragEnd={onDragEnd}
@@ -255,6 +260,7 @@ export const ModelForm = (props: ModelFormProps): ReactElement => {
     fields,
     tableFields,
     filterOptions,
+    searchableColumns,
     onUpdate,
     currentTitle,
     noun = 'Object',
@@ -464,6 +470,7 @@ export const ModelForm = (props: ModelFormProps): ReactElement => {
           noun={noun}
           tableFields={tableFields}
           filterOptions={filterOptions}
+          searchableColumns={searchableColumns}
           objects={objects}
           allowDeletion={allowDeletion}
           confirmDeletion={confirmDeletion}
diff --git a/frontend/components/PaginatedClubDisplay.tsx b/frontend/components/PaginatedClubDisplay.tsx
index d65bb35a5..db61b9519 100644
--- a/frontend/components/PaginatedClubDisplay.tsx
+++ b/frontend/components/PaginatedClubDisplay.tsx
@@ -101,7 +101,7 @@ const PaginatedClubDisplay = ({
         />
       )}
       {isLoading && <Loading delay={0} />}
-      {clubs && clubs.length <= 0 && (
+      {(clubs == null || clubs.length <= 0) && (
         <EmptyState>
           <img
             src="/static/img/button.svg"
diff --git a/frontend/components/common/Table.tsx b/frontend/components/common/Table.tsx
index 141f608bd..399779c50 100644
--- a/frontend/components/common/Table.tsx
+++ b/frontend/components/common/Table.tsx
@@ -15,6 +15,7 @@ import {
   BORDER,
   CLUBS_GREY,
   FOCUS_GRAY,
+  LIGHT_GRAY,
   SNOW,
   WHITE,
 } from '../../constants/colors'
@@ -81,7 +82,6 @@ type tableProps = {
 
 const Styles = styled.div`
   padding: 1rem;
-  width: 100%;
 `
 
 const SearchWrapper = styled.div`
@@ -115,6 +115,10 @@ const Input = styled.input`
   }
 `
 
+const GreyText = styled.span`
+  color: ${LIGHT_GRAY};
+`
+
 const Table = ({
   columns,
   data,
@@ -131,16 +135,20 @@ const Table = ({
   const [searchQuery, setSearchQuery] = useState<string>('')
   const [tableData, setTableData] = useState<Row[]>([])
   const [selectedFilter, setSelectedFilter] = useState<any>({})
+  const [sortedColumn, setSortedColumn] = useState<any>(null)
   useEffect(() => {
     const searchedData = data.filter((item) => {
       if (!searchQuery || searchQuery.length < 3) {
         return true
       }
       return searchableColumns.some((searchId) => {
-        const strings = item[searchId].split(' ')
-        return strings.some((string) =>
-          string.toLowerCase().startsWith(searchQuery.toLowerCase()),
-        )
+        if (typeof item[searchId] === 'string') {
+          const strings = item[searchId].split(' ')
+          return strings.some((string) =>
+            string.toLowerCase().startsWith(searchQuery.toLowerCase()),
+          )
+        }
+        return false
       })
     })
     const filteredData = searchedData.filter((item) => {
@@ -216,6 +224,18 @@ const Table = ({
     setSearchQuery(e.target.value)
   }
 
+  const handleColumnsSort = (target) => {
+    if (sortedColumn && sortedColumn.name === target) {
+      if (sortedColumn.status === 'asc') {
+        setSortedColumn({ name: target, status: 'desc' })
+      } else {
+        setSortedColumn(null)
+      }
+    } else {
+      setSortedColumn({ name: target, status: 'asc' })
+    }
+  }
+
   const components = {
     IndicatorSeparator: () => null,
   }
@@ -225,7 +245,6 @@ const Table = ({
     newFilters[newFilter.label] = newFilter.value
     setSelectedFilter(newFilters)
   }
-
   if (data.length <= 0) {
     return <></>
   } else if (setInitialPage != null) {
@@ -233,8 +252,8 @@ const Table = ({
   }
   return (
     <Styles>
-      <Toolbar>
-        <div className="is-pulled-left">
+      <Toolbar className="is-clearfix">
+        <div className="is-pulled-right">
           <SearchWrapper>
             <Input
               className="input"
@@ -246,64 +265,63 @@ const Table = ({
             />
           </SearchWrapper>
         </div>
-        <div className="is-pulled-left" style={{ width: '70%' }}>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr 1fr',
-            }}
-          >
-            {filterOptions &&
-              filterOptions.map((filterOption) => (
-                <div style={{ marginRight: '10px' }}>
-                  <Select
-                    value={
-                      selectedFilter[filterOption.label]
-                        ? {
-                            label: selectedFilter[filterOption.label].label,
-                            value: selectedFilter[filterOption.label].key,
-                          }
-                        : null
-                    }
-                    styles={styles}
-                    components={components}
-                    onChange={(value) =>
-                      handleFilterChange({
-                        value: value || null,
-                        label: filterOption.label ? filterOption.label : null,
-                      })
-                    }
-                    isClearable={true}
-                    placeholder={`Filter by ${titleize(filterOption.label)}`}
-                    options={filterOption.options.map((option) => {
-                      return { value: option.key, label: option.label }
-                    })}
-                  />
-                </div>
-              ))}
-          </div>
+        <div className="is-pulled-left is-clearfix" style={{ width: '70%' }}>
+          {filterOptions &&
+            filterOptions.map((filterOption) => (
+              <span
+                style={{ marginRight: '10px', width: '40%', float: 'left' }}
+              >
+                <Select
+                  value={
+                    selectedFilter[filterOption.label]
+                      ? {
+                          label: selectedFilter[filterOption.label].label,
+                          value: selectedFilter[filterOption.label].key,
+                        }
+                      : null
+                  }
+                  styles={styles}
+                  components={components}
+                  onChange={(value) =>
+                    handleFilterChange({
+                      value: value || null,
+                      label: filterOption.label ? filterOption.label : null,
+                    })
+                  }
+                  isClearable={true}
+                  placeholder={`Filter by ${titleize(filterOption.label)}`}
+                  options={filterOption.options.map((option) => {
+                    return { value: option.key, label: option.label }
+                  })}
+                />
+              </span>
+            ))}
         </div>
       </Toolbar>
 
-      {tableData.length > 0 ? (
+      {headerGroups.length > 0 ? (
         <table className="table is-fullwidth" {...getTableProps()}>
           <thead>
             {headerGroups.map((headerGroup) => (
               <tr {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column) => (
                   <th {...column.getHeaderProps(column.getSortByToggleProps())}>
-                    {titleize(column.render('Header'))}
-                    <span style={{ marginLeft: '1rem' }}>
-                      {column.isSorted ? (
-                        column.isSortedDesc ? (
-                          <Icon name="chevron-down" />
+                    <div onClick={() => handleColumnsSort(column.Header)}>
+                      {titleize(column.render('Header'))}
+                      <span style={{ marginLeft: '1rem' }}>
+                        {column.isSorted ? (
+                          column.isSortedDesc ? (
+                            <Icon name="triangle-down" />
+                          ) : (
+                            <Icon name="triangle-up" />
+                          )
+                        ) : sortedColumn === null ? (
+                          <Icon name="group-arrows" />
                         ) : (
-                          <Icon name="chevron-up" />
-                        )
-                      ) : (
-                        ''
-                      )}
-                    </span>
+                          ''
+                        )}
+                      </span>
+                    </div>
                   </th>
                 ))}
               </tr>
@@ -334,8 +352,12 @@ const Table = ({
                             return (
                               <td key={i}>
                                 {column.render
-                                  ? column.render(row.original.id, row.id)
-                                  : row.original[column.name]}
+                                  ? column.render(row.original.id) || (
+                                      <GreyText>None</GreyText>
+                                    )
+                                  : row.original[column.name] || (
+                                      <GreyText>None</GreyText>
+                                    )}
                               </td>
                             )
                           })}
@@ -412,23 +434,25 @@ const Table = ({
           )}
         </table>
       ) : (
-        <h1>No matches were found. Please change your filters.</h1>
+        <h1>Nothing to Show.</h1>
       )}
       {pageOptions.length > 1 && (
-        <div className="is-clearfix" style={{ display: 'flex' }}>
+        <div className="is-clearfix">
           <button
             style={{ marginRight: '0.5rem' }}
+            className="is-light is-small"
             onClick={() => gotoPage(0)}
             disabled={!canPreviousPage}
           >
-            <Icon name="chevrons-left" />
+            {'<<'}
           </button>
           <button
             style={{ marginRight: '0.5rem' }}
+            className="is-light is-small"
             onClick={() => previousPage()}
             disabled={!canPreviousPage}
           >
-            <Icon name="chevron-left" />
+            {'<'}
           </button>
           <select
             value={pageIndex}
@@ -444,21 +468,25 @@ const Table = ({
           </select>
           <button
             style={{ marginRight: '0.5rem' }}
+            className="is-light is-small"
             onClick={() => nextPage()}
             disabled={!canNextPage}
           >
-            <Icon name="chevron-right" />
+            {'>'}
           </button>
           <button
             style={{ marginRight: '0.5rem' }}
+            className="is-light is-small"
             onClick={() => gotoPage(pageCount - 1)}
             disabled={!canNextPage}
           >
-            <Icon name="chevrons-right" />
+            {'>>'}
           </button>
-          <span className="is-pulled-right">
-            {data.length} total entries, {pageSize} entries per page
-          </span>
+          <div className="is-pulled-right">
+            <span>
+              {data.length} total entries, {pageSize} entries per page
+            </span>
+          </div>
         </div>
       )}
     </Styles>
diff --git a/frontend/public/static/img/icons/group-arrows.svg b/frontend/public/static/img/icons/group-arrows.svg
new file mode 100644
index 000000000..e4bc620eb
--- /dev/null
+++ b/frontend/public/static/img/icons/group-arrows.svg
@@ -0,0 +1,4 @@
+<svg width="65" height="95" viewBox="0 0 65 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.8495 2.92062C32.665 2.70904 32.335 2.70904 32.1505 2.92061L2.89531 36.4761C2.63546 36.7742 2.84824 37.2381 3.24479 37.2381H61.7552C62.1518 37.2381 62.3645 36.7742 62.1047 36.4761L32.8495 2.92062ZM30.0537 1.11078C31.3449 -0.370264 33.6551 -0.370259 34.9463 1.11079L64.2015 34.6663C66.0205 36.7526 64.5311 40 61.7552 40H3.24479C0.46893 40 -1.02049 36.7526 0.798459 34.6663L30.0537 1.11078Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.1505 92.0794C32.335 92.291 32.665 92.291 32.8495 92.0794L62.1047 58.5239C62.3645 58.2258 62.1518 57.7619 61.7552 57.7619L3.24479 57.7619C2.84824 57.7619 2.63547 58.2258 2.89532 58.5239L32.1505 92.0794ZM34.9463 93.8892C33.6551 95.3703 31.3449 95.3703 30.0537 93.8892L0.798463 60.3337C-1.02049 58.2474 0.468939 55 3.2448 55L61.7552 55C64.5311 55 66.0205 58.2474 64.2015 60.3337L34.9463 93.8892Z" fill="black"/>
+</svg>
diff --git a/frontend/public/static/img/icons/triangle-down.svg b/frontend/public/static/img/icons/triangle-down.svg
new file mode 100644
index 000000000..80b1ebda1
--- /dev/null
+++ b/frontend/public/static/img/icons/triangle-down.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="40" viewBox="0 0 65 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.1505 37.0794C32.335 37.291 32.665 37.291 32.8495 37.0794L62.1047 3.5239C62.3645 3.22585 62.1518 2.76193 61.7552 2.76193L3.24479 2.76193C2.84824 2.76193 2.63547 3.22584 2.89532 3.52389L32.1505 37.0794ZM34.9463 38.8892C33.6551 40.3703 31.3449 40.3703 30.0537 38.8892L0.798463 5.33372C-1.02049 3.24739 0.468939 -2.49118e-06 3.2448 -2.2485e-06L61.7552 2.86664e-06C64.5311 3.10931e-06 66.0205 3.2474 64.2015 5.33373L34.9463 38.8892Z" fill="black"/>
+</svg>
diff --git a/frontend/public/static/img/icons/triangle-up.svg b/frontend/public/static/img/icons/triangle-up.svg
new file mode 100644
index 000000000..11f444267
--- /dev/null
+++ b/frontend/public/static/img/icons/triangle-up.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="40" viewBox="0 0 65 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.8495 2.92062C32.665 2.70904 32.335 2.70904 32.1505 2.92061L2.89531 36.4761C2.63546 36.7742 2.84824 37.2381 3.24479 37.2381H61.7552C62.1518 37.2381 62.3645 36.7742 62.1047 36.4761L32.8495 2.92062ZM30.0537 1.11078C31.3449 -0.370264 33.6551 -0.370259 34.9463 1.11079L64.2015 34.6663C66.0205 36.7526 64.5311 40 61.7552 40H3.24479C0.46893 40 -1.02049 36.7526 0.798459 34.6663L30.0537 1.11078Z" fill="black"/>
+</svg>