diff --git a/web/components/CustomFormSelect/BranchSelector/BranchSelectorQuery.tsx b/web/components/CustomFormSelect/BranchSelector/BranchSelectorQuery.tsx
index 5d015390..cdae33f6 100644
--- a/web/components/CustomFormSelect/BranchSelector/BranchSelectorQuery.tsx
+++ b/web/components/CustomFormSelect/BranchSelector/BranchSelectorQuery.tsx
@@ -1,4 +1,5 @@
 import QueryHandler from "@components/util/QueryHandler";
+import { Maybe } from "@dolthub/web-utils";
 import { useBranchesForSelectorQuery } from "@gen/graphql-types";
 import useDefaultBranch from "@hooks/useDefaultBranch";
 import { database } from "@lib/urls";
@@ -16,7 +17,8 @@ export default function BranchSelectorQuery(props: BranchSelectorForRepoProps) {
   });
   const router = useRouter();
 
-  const handleChangeBranch = async (branchName: string) => {
+  const handleChangeBranch = async (branchName: Maybe<string>) => {
+    if (!branchName) return;
     const { href, as } = props.routeRefChangeTo
       ? props.routeRefChangeTo({
           ...props.params,
diff --git a/web/components/CustomFormSelect/BranchSelector/BranchSelectorWithTableQuery.tsx b/web/components/CustomFormSelect/BranchSelector/BranchSelectorWithTableQuery.tsx
index 510a36f8..0a36fb88 100644
--- a/web/components/CustomFormSelect/BranchSelector/BranchSelectorWithTableQuery.tsx
+++ b/web/components/CustomFormSelect/BranchSelector/BranchSelectorWithTableQuery.tsx
@@ -1,4 +1,5 @@
 import QueryHandler from "@components/util/QueryHandler";
+import { Maybe } from "@dolthub/web-utils";
 import {
   useBranchesForSelectorQuery,
   useTableNamesLazyQuery,
@@ -23,7 +24,8 @@ export default function BranchSelectorWithTableQuery(
   });
   const router = useRouter();
 
-  const handleChangeBranch = async (branchName: string) => {
+  const handleChangeBranch = async (branchName: Maybe<string>) => {
+    if (!branchName) return;
     const variables = {
       databaseName: props.params.databaseName,
       refName: branchName,
diff --git a/web/components/CustomFormSelect/BranchSelector/index.tsx b/web/components/CustomFormSelect/BranchSelector/index.tsx
index c26c31ea..686fd6cf 100644
--- a/web/components/CustomFormSelect/BranchSelector/index.tsx
+++ b/web/components/CustomFormSelect/BranchSelector/index.tsx
@@ -1,4 +1,5 @@
 import QueryHandler from "@components/util/QueryHandler";
+import { Maybe } from "@dolthub/web-utils";
 import { useBranchesForSelectorQuery } from "@gen/graphql-types";
 import useDefaultBranch from "@hooks/useDefaultBranch";
 import { RefUrl } from "@lib/urls";
@@ -18,7 +19,7 @@ export function BranchSelector(props: BranchSelectorForRepoProps) {
 }
 
 type CustomProps = BranchSelectorForRepoProps & {
-  onChangeValue: (e: string) => void;
+  onChangeValue: (e: Maybe<string>) => void;
   routeRefChangeTo?: RefUrl;
 };
 
diff --git a/web/components/CustomFormSelect/BranchSelector/types.ts b/web/components/CustomFormSelect/BranchSelector/types.ts
index a9af9886..9e7e4fb1 100644
--- a/web/components/CustomFormSelect/BranchSelector/types.ts
+++ b/web/components/CustomFormSelect/BranchSelector/types.ts
@@ -1,3 +1,4 @@
+import { Maybe } from "@dolthub/web-utils";
 import { BranchForBranchSelectorFragment } from "@gen/graphql-types";
 import { OptionalRefParams, TableParams } from "@lib/params";
 import { RefUrl } from "@lib/urls";
@@ -12,7 +13,7 @@ export type BranchSelectorForRepoProps = BaseFormSelectorProps & {
 
 export type BranchSelectorProps<B extends BranchForBranchSelectorFragment> =
   BranchSelectorForRepoProps & {
-    onChangeValue: (e: string) => void;
+    onChangeValue: (e: Maybe<string>) => void;
     branches: B[];
   };
 
diff --git a/web/components/CustomFormSelect/CommitSelector.tsx b/web/components/CustomFormSelect/CommitSelector.tsx
index 7804e715..264e3119 100644
--- a/web/components/CustomFormSelect/CommitSelector.tsx
+++ b/web/components/CustomFormSelect/CommitSelector.tsx
@@ -1,7 +1,9 @@
 import QueryHandler from "@components/util/QueryHandler";
+import { Maybe } from "@dolthub/web-utils";
 import { CommitForHistoryFragment } from "@gen/graphql-types";
 import { useCommitListForBranch } from "@hooks/useCommitListForBranch";
 import { RefParams } from "@lib/params";
+import { commitLog } from "@lib/urls";
 import Selector from "./component";
 import { BaseFormSelectorProps, Tab } from "./types";
 import { getCommitLabel } from "./utils";
@@ -9,7 +11,7 @@ import { getCommitLabel } from "./utils";
 type Props = BaseFormSelectorProps & {
   params: RefParams;
   tabs: Tab[];
-  onChangeValue: (e: string) => void;
+  onChangeValue: (e: Maybe<string>) => void;
 };
 
 type InnerProps = {
@@ -34,10 +36,10 @@ function Inner({ commits, ...props }: InnerProps) {
             label: getCommitLabel(c),
           };
         })}
-        // footerLink={{
-        //   urlString: "View all commits",
-        //   urlParams: commitLog(props.params),
-        // }}
+        footerLink={{
+          urlString: "View all commits",
+          urlParams: commitLog(props.params),
+        }}
       />
     </div>
   );
diff --git a/web/components/CustomFormSelect/ForBranchesAndCommits.tsx b/web/components/CustomFormSelect/ForBranchesAndCommits.tsx
index 347a4a69..9cfc9051 100644
--- a/web/components/CustomFormSelect/ForBranchesAndCommits.tsx
+++ b/web/components/CustomFormSelect/ForBranchesAndCommits.tsx
@@ -1,4 +1,5 @@
 import { useEffectOnMount } from "@dolthub/react-hooks";
+import { Maybe } from "@dolthub/web-utils";
 import useDefaultBranch from "@hooks/useDefaultBranch";
 import { OptionalRefParams } from "@lib/params";
 import { useEffect, useState } from "react";
@@ -8,8 +9,8 @@ import TabWrapper from "./TabWrapper";
 
 type Props = {
   params: OptionalRefParams;
-  selectedValue: string;
-  onChangeValue: (s: string) => void;
+  selectedValue: Maybe<string>;
+  onChangeValue: (s: Maybe<string>) => void;
 };
 
 export default function ForBranchesAndCommits(props: Props) {
diff --git a/web/components/CustomFormSelect/TagSelector.tsx b/web/components/CustomFormSelect/TagSelector.tsx
index ef91eadf..6daa48c1 100644
--- a/web/components/CustomFormSelect/TagSelector.tsx
+++ b/web/components/CustomFormSelect/TagSelector.tsx
@@ -1,6 +1,7 @@
+import { Maybe } from "@dolthub/web-utils";
 import { TagForListFragment } from "@gen/graphql-types";
 import { DatabaseParams } from "@lib/params";
-import { RefUrl, database } from "@lib/urls";
+import { RefUrl, database, releases } from "@lib/urls";
 import { useRouter } from "next/router";
 import Selector from "./component";
 import { BaseFormSelectorProps, Tab } from "./types";
@@ -15,7 +16,8 @@ type Props = BaseFormSelectorProps & {
 export default function TagSelector(props: Props) {
   const router = useRouter();
 
-  const handleChangeRef = async (refName: string) => {
+  const handleChangeRef = async (refName: Maybe<string>) => {
+    if (!refName) return;
     const { href, as } = props.routeRefChangeTo
       ? props.routeRefChangeTo({
           ...props.params,
@@ -41,10 +43,10 @@ export default function TagSelector(props: Props) {
             label: t.tagName,
           };
         })}
-        // footerLink={{
-        //   urlString: "View all tags",
-        //   urlParams: releases(props.params),
-        // }}
+        footerLink={{
+          urlString: "View all tags",
+          urlParams: releases(props.params),
+        }}
       />
     </div>
   );
diff --git a/web/components/CustomFormSelect/component.tsx b/web/components/CustomFormSelect/component.tsx
index e52990b4..b8965718 100644
--- a/web/components/CustomFormSelect/component.tsx
+++ b/web/components/CustomFormSelect/component.tsx
@@ -1,4 +1,4 @@
-import FormSelect from "@components/FormSelect";
+import { FormSelect } from "@dolthub/react-components";
 import cx from "classnames";
 import DoltDisabledSelector from "./DoltDisabledSelector";
 import css from "./index.module.css";
diff --git a/web/components/CustomFormSelect/selectorComponents.tsx b/web/components/CustomFormSelect/selectorComponents.tsx
index e1548af3..d177a62f 100644
--- a/web/components/CustomFormSelect/selectorComponents.tsx
+++ b/web/components/CustomFormSelect/selectorComponents.tsx
@@ -1,17 +1,19 @@
-import { Option } from "@components/FormSelect";
 import Link from "@components/links/Link";
-import { FiCheck } from "@react-icons/all-files/fi/FiCheck";
-import cx from "classnames";
 import {
+  FormSelectTypes,
   MenuProps,
   OptionProps,
   SingleValueProps,
   components,
-} from "react-select";
+} from "@dolthub/react-components";
+import { FiCheck } from "@react-icons/all-files/fi/FiCheck";
+import cx from "classnames";
 import SelectTabs from "./SelectTabs";
 import css from "./index.module.css";
 import { FooterProps, FormSelectorProps } from "./types";
 
+type Option = FormSelectTypes.Option<string>;
+
 function SingleValueComponent(
   props: SingleValueProps<Option, false>,
 ): JSX.Element {
diff --git a/web/components/CustomFormSelect/types.ts b/web/components/CustomFormSelect/types.ts
index 53e123dd..03879b69 100644
--- a/web/components/CustomFormSelect/types.ts
+++ b/web/components/CustomFormSelect/types.ts
@@ -1,4 +1,4 @@
-import { Option } from "@components/FormSelect";
+import { FormSelectTypes } from "@dolthub/react-components";
 import { Maybe, Route } from "@dolthub/web-utils";
 
 export type Tab = {
@@ -27,9 +27,9 @@ export type FooterProps = {
 };
 
 export type FormSelectorProps = BaseFormSelectorProps & {
-  onChangeValue: (e: string) => void;
-  val?: Maybe<string>;
-  options: Option[];
+  onChangeValue: (e: Maybe<string>) => void;
+  val: Maybe<string>;
+  options: Array<FormSelectTypes.Option<string>>;
   label: string;
   dataCySuffix?: string;
   noneFoundMsg?: string;
diff --git a/web/components/DatabaseHeaderAndNav/Full.tsx b/web/components/DatabaseHeaderAndNav/Full.tsx
index ebcf05e4..1f45482b 100644
--- a/web/components/DatabaseHeaderAndNav/Full.tsx
+++ b/web/components/DatabaseHeaderAndNav/Full.tsx
@@ -34,7 +34,7 @@ export default function Full(props: Props) {
             {...props}
             onMenuClick={() => props.setShowSmall(true)}
           />
-          <MobileHeaderSelector {...props} className={css.mobileSelector} />
+          <MobileHeaderSelector {...props} />
         </div>
       </div>
       <DatabaseNav {...props} />
diff --git a/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx b/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx
index 6eac8fcb..92c40205 100644
--- a/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx
+++ b/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx
@@ -1,71 +1,39 @@
-import FormSelect from "@components/FormSelect";
-import { Option } from "@components/FormSelect/types";
+import { FormSelect, FormSelectTypes } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
 import useDatabaseDetails from "@hooks/useDatabaseDetails";
 import {
   getDatabasePageName,
   getDatabasePageRedirectInfo,
 } from "@lib/mobileUtils";
 import { OptionalRefParams } from "@lib/params";
-import { colors } from "@lib/tailwind";
 import { useRouter } from "next/router";
-import { GroupBase, StylesConfig } from "react-select";
+import css from "./index.module.css";
 
 type Props = {
   params: OptionalRefParams;
-  className?: string;
   title?: string;
 };
 
-const getTabOptions = (isDolt: boolean, hideDoltFeature: boolean): Option[] => {
+const getTabOptions = (
+  isDolt: boolean,
+  hideDoltFeature: boolean,
+): Array<FormSelectTypes.Option<string>> => {
   if (hideDoltFeature) return [{ value: "ref", label: "Database" }];
   return [
     { value: "ref", label: "Database" },
     { value: "about", label: "About", isDisabled: !isDolt },
     { value: "commitLog", label: "Commit Log", isDisabled: !isDolt },
     { value: "releases", label: "Releases", isDisabled: !isDolt },
-    // { value: "pulls", label: "Pull Requests", isDisabled: !isDolt },
+    { value: "pulls", label: "Pull Requests", isDisabled: !isDolt },
   ];
 };
 
-const mobileSelectorStyle: StylesConfig<Option, boolean, GroupBase<Option>> = {
-  placeholder: styles => {
-    return {
-      ...styles,
-      color: "#FFFFFFE5",
-    };
-  },
-  control: styles => {
-    return {
-      ...styles,
-      backgroundColor: "rgba(255, 255, 255, 0.1)",
-      borderColor: "rgba(255, 255, 255, 0.1)",
-      marginTop: "1rem",
-    };
-  },
-  menu: styles => {
-    return {
-      ...styles,
-      color: colors["ld-darkergrey"],
-    };
-  },
-  singleValue: styles => {
-    return {
-      ...styles,
-      color: "#FFFFFFE5",
-    };
-  },
-  dropdownIndicator: styles => {
-    return {
-      ...styles,
-    };
-  },
-};
-
 export default function MobileHeaderSelector(props: Props) {
   const res = useDatabaseDetails();
   const router = useRouter();
 
-  const handleChangeTab = (pageName: string) => {
+  const handleChangeTab = (pageName: Maybe<string>) => {
+    if (!pageName) return;
     const { href, as } = getDatabasePageRedirectInfo(pageName, props.params);
     router.push(href, as).catch(console.error);
   };
@@ -77,9 +45,8 @@ export default function MobileHeaderSelector(props: Props) {
       options={getTabOptions(res.isDolt, res.hideDoltFeature)}
       val={pageName}
       hideSelectedOptions
-      styles={mobileSelectorStyle}
-      className={props.className}
-      isMobile
+      outerClassName={css.mobileSelector}
+      forMobile
     />
   );
 }
diff --git a/web/components/DiffSelector/ForBranch.tsx b/web/components/DiffSelector/ForBranch.tsx
index 1564ee97..12db58c1 100644
--- a/web/components/DiffSelector/ForBranch.tsx
+++ b/web/components/DiffSelector/ForBranch.tsx
@@ -1,5 +1,6 @@
-import FormSelect from "@components/FormSelect";
 import QueryHandler from "@components/util/QueryHandler";
+import { FormSelect } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
 import {
   CommitListForDiffSelectorFragment,
   useCommitsForDiffSelectorQuery,
@@ -32,8 +33,8 @@ function Inner(props: InnerProps) {
     };
   });
 
-  const setFromCommitId = (id?: string) => {
-    const diffPaths = diff({ ...props.params, fromCommitId: id });
+  const setFromCommitId = (id: Maybe<string>) => {
+    const diffPaths = diff({ ...props.params, fromCommitId: id ?? undefined });
     router.push(diffPaths.href, diffPaths.as).catch(console.error);
   };
 
diff --git a/web/components/DiffTable/DataDiff/FilterByType.tsx b/web/components/DiffTable/DataDiff/FilterByType.tsx
index 893ec20b..0b7be752 100644
--- a/web/components/DiffTable/DataDiff/FilterByType.tsx
+++ b/web/components/DiffTable/DataDiff/FilterByType.tsx
@@ -1,33 +1,33 @@
+import { FormSelect } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
 import { DiffRowType } from "@gen/graphql-types";
-import FormSelect from "@components/FormSelect";
 import css from "./index.module.css";
 
 type Props = {
-  filter?: DiffRowType;
-  setFilter: (f?: DiffRowType) => void;
+  filter: Maybe<DiffRowType>;
+  setFilter: (f: Maybe<DiffRowType>) => void;
 };
 
 export default function FilterByType(props: Props) {
   return (
-    <div className={css.filterContainer} data-cy="filter-by-diff-type">
-      <span>Filter by</span>
-      <div className={css.filterSelect}>
-        <FormSelect
-          val={props.filter}
-          options={[
-            { label: "Added", value: DiffRowType.Added },
-            { label: "Removed", value: DiffRowType.Removed },
-            { label: "Modified", value: DiffRowType.Modified },
-          ]}
-          onChangeValue={props.setFilter}
-          placeholder="all changes"
-          hideSelectedOptions
-          isClearable
-          light
-          mono
-          small
-        />
-      </div>
-    </div>
+    <FormSelect
+      className={css.filterSelect}
+      labelClassName={css.filterLabel}
+      label="Filter by"
+      val={props.filter}
+      options={[
+        { label: "Added", value: DiffRowType.Added },
+        { label: "Removed", value: DiffRowType.Removed },
+        { label: "Modified", value: DiffRowType.Modified },
+      ]}
+      onChangeValue={props.setFilter}
+      placeholder="all changes"
+      hideSelectedOptions
+      isClearable
+      horizontal
+      light
+      mono
+      small
+    />
   );
 }
diff --git a/web/components/DiffTable/DataDiff/index.module.css b/web/components/DiffTable/DataDiff/index.module.css
index ddaa8f69..56d0ffea 100644
--- a/web/components/DiffTable/DataDiff/index.module.css
+++ b/web/components/DiffTable/DataDiff/index.module.css
@@ -164,7 +164,7 @@
   @apply absolute mb-6 right-2 ml-14 hidden -top-20;
 
   @screen lg {
-    @apply flex -top-10;
+    @apply flex items-center -top-10;
   }
 
   a {
@@ -172,16 +172,12 @@
   }
 }
 
-.filterContainer {
-  @apply flex ml-4;
-
-  > span {
-    @apply mr-4 mt-0.5;
-  }
+.filterLabel {
+  @apply font-normal ml-4;
 }
 
 .filterSelect {
-  @apply w-40;
+  @apply w-36;
 }
 
 .err {
diff --git a/web/components/DiffTable/DataDiff/index.tsx b/web/components/DiffTable/DataDiff/index.tsx
index f255703c..d4769632 100644
--- a/web/components/DiffTable/DataDiff/index.tsx
+++ b/web/components/DiffTable/DataDiff/index.tsx
@@ -5,6 +5,7 @@ import { useDataTableContext } from "@contexts/dataTable";
 import { useDiffContext } from "@contexts/diff";
 import { Button, Loader } from "@dolthub/react-components";
 import { useFocus } from "@dolthub/react-hooks";
+import { Maybe } from "@dolthub/web-utils";
 import { DiffRowType } from "@gen/graphql-types";
 import { ApolloErrorType } from "@lib/errors/types";
 import { RequiredRefsParams } from "@lib/params";
@@ -32,7 +33,7 @@ type Props = {
 
 type InnerProps = Props & {
   fetchMore: () => Promise<void>;
-  setFilter: (d: DiffRowType | undefined) => void;
+  setFilter: (d: Maybe<DiffRowType>) => void;
   state: RowDiffState;
   hasMore: boolean;
   error?: ApolloErrorType;
diff --git a/web/components/DiffTable/DataDiff/state.ts b/web/components/DiffTable/DataDiff/state.ts
index cf0a2206..99319587 100644
--- a/web/components/DiffTable/DataDiff/state.ts
+++ b/web/components/DiffTable/DataDiff/state.ts
@@ -11,7 +11,7 @@ export const defaultState = {
   offset: undefined as Maybe<number>,
   rowDiffs: [] as RowDiffForTableListFragment[],
   cols: [] as ColumnForDiffTableListFragment[],
-  filter: undefined as DiffRowType | undefined,
+  filter: null as Maybe<DiffRowType>,
 };
 
 export type RowDiffState = typeof defaultState;
diff --git a/web/components/DiffTable/DataDiff/useRowDiffs.ts b/web/components/DiffTable/DataDiff/useRowDiffs.ts
index 92920502..b54cd3c6 100644
--- a/web/components/DiffTable/DataDiff/useRowDiffs.ts
+++ b/web/components/DiffTable/DataDiff/useRowDiffs.ts
@@ -18,7 +18,7 @@ import { RowDiffState, getDefaultState } from "./state";
 
 type ReturnType = {
   fetchMore: () => Promise<void>;
-  setFilter: (d: DiffRowType | undefined) => void;
+  setFilter: (d: Maybe<DiffRowType>) => void;
   state: RowDiffState;
   hasMore: boolean;
   loading: boolean;
@@ -48,7 +48,7 @@ export default function useRowDiffs(
   const handleQuery = async (
     setRowDiffs: (rd: RowDiffForTableListFragment[]) => void,
     offset: Maybe<number>,
-    filterByRowType?: DiffRowType,
+    filterByRowType: Maybe<DiffRowType>,
   ) => {
     if (err) setErr(undefined);
     if (offset === undefined || offset === null) {
@@ -74,7 +74,7 @@ export default function useRowDiffs(
   };
 
   // Changes diff row filter, starts with first page diffs
-  const setFilter = async (rowType?: DiffRowType) => {
+  const setFilter = async (rowType: Maybe<DiffRowType>) => {
     setState({ filter: rowType });
     const setRowDiffs = (rd: RowDiffForTableListFragment[]) =>
       setState({ rowDiffs: rd });
diff --git a/web/components/EditCellInput/Input.tsx b/web/components/EditCellInput/Input.tsx
index 5e662654..4e1375b8 100644
--- a/web/components/EditCellInput/Input.tsx
+++ b/web/components/EditCellInput/Input.tsx
@@ -1,4 +1,4 @@
-import FormSelect from "@components/FormSelect";
+import { FormSelect } from "@dolthub/react-components";
 import { splitEnumOptions } from "@lib/dataTable";
 import cx from "classnames";
 import css from "./index.module.css";
@@ -43,9 +43,18 @@ export default function Input(props: Props) {
             value: t,
           };
         })}
-        onChangeValue={props.setNewValue}
-        className={css.editSelect}
+        onChangeValue={v => props.setNewValue(v ?? "")}
+        outerClassName={css.editSelect}
         mono
+        small
+        customStyles={s => {
+          return {
+            ...s,
+            singleValue: styles => {
+              return { ...styles, marginBottom: "6px" };
+            },
+          };
+        }}
       />
     );
   }
diff --git a/web/components/FormSelect/customComponents.tsx b/web/components/FormSelect/customComponents.tsx
deleted file mode 100644
index a94fdef3..00000000
--- a/web/components/FormSelect/customComponents.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { AiFillCaretDown } from "@react-icons/all-files/ai/AiFillCaretDown";
-import { GroupBase, SelectComponentsConfig } from "react-select";
-import css from "./index.module.css";
-
-function Dropdown() {
-  return <AiFillCaretDown className={css.dropdownIndicator} />;
-}
-
-type Components<Option, IsMulti extends boolean> =
-  | Partial<SelectComponentsConfig<Option, IsMulti, GroupBase<Option>>>
-  | undefined;
-
-export function getComponents<Option, IsMulti extends boolean>(
-  components?: Components<Option, IsMulti>,
-): Components<Option, IsMulti> {
-  return {
-    ...components,
-    IndicatorSeparator: () => null,
-    DropdownIndicator: Dropdown,
-  };
-}
diff --git a/web/components/FormSelect/index.module.css b/web/components/FormSelect/index.module.css
deleted file mode 100644
index efc65642..00000000
--- a/web/components/FormSelect/index.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.horizontal {
-  @apply flex items-center;
-}
-
-.label {
-  @apply font-semibold text-primary mb-2;
-}
-
-.horizontalLabel {
-  @apply mr-3 mb-0;
-}
-
-.dropdownIndicator {
-  @apply mr-3;
-}
diff --git a/web/components/FormSelect/index.test.tsx b/web/components/FormSelect/index.test.tsx
deleted file mode 100644
index e01a20b9..00000000
--- a/web/components/FormSelect/index.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { randomArrayItem } from "@dolthub/web-utils";
-import {
-  fireEvent,
-  queryByAttribute,
-  render,
-  screen,
-} from "@testing-library/react";
-import selectEvent from "react-select-event";
-import FormSelect from "./index";
-import { Option } from "./types";
-
-const optionWithoutIconPath: Option[] = [...Array(5).keys()].map(i => {
-  return {
-    label: `test${i}`,
-    value: `test${i}`,
-  };
-});
-
-const mocks = [{ options: optionWithoutIconPath }];
-
-describe("test FormSelect", () => {
-  mocks.forEach(mock => {
-    it("it renders component and is clickable", async () => {
-      const onChangeValue = jest.fn();
-      render(
-        <FormSelect
-          options={mock.options}
-          val=""
-          onChangeValue={onChangeValue}
-        />,
-      );
-
-      // expand the options
-      fireEvent.mouseDown(screen.getByRole("combobox"));
-      mock.options.forEach(option => {
-        expect(screen.getByText(option.value)).toBeVisible();
-      });
-
-      // click new value
-      await selectEvent.select(
-        screen.getByText(mock.options[0].value),
-        mock.options[1].value,
-      );
-
-      // check that onChangeValue has been called
-      expect(onChangeValue).toHaveBeenCalled();
-      fireEvent.mouseDown(screen.getByRole("combobox"));
-    });
-
-    it("shows the selected option first if selectedOptionFirst is true", async () => {
-      const selected = randomArrayItem(mock.options);
-      const { container } = render(
-        <FormSelect
-          options={mock.options}
-          val={selected.value}
-          selectedOptionFirst
-          onChangeValue={() => {}}
-        />,
-      );
-
-      // expand the options
-      fireEvent.mouseDown(screen.getByRole("combobox"));
-
-      // Difficult to get the inner MenuList by anything else
-      const menuList = queryByAttribute("class", container, /MenuList/);
-      if (!menuList) {
-        throw Error("MenuList not found");
-      }
-      expect(menuList.firstChild).toHaveTextContent(selected.value);
-    });
-  });
-});
diff --git a/web/components/FormSelect/index.tsx b/web/components/FormSelect/index.tsx
deleted file mode 100644
index 1267ca23..00000000
--- a/web/components/FormSelect/index.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import customStyles from "@lib/selectStyles";
-import cx from "classnames";
-import React from "react";
-import Select from "react-select";
-import { getComponents } from "./customComponents";
-import css from "./index.module.css";
-import { Option, OptionWithDetails, Props } from "./types";
-import {
-  getOnChange,
-  getValue,
-  getValueForOptions,
-  moveSelectedToTop,
-} from "./utils";
-
-/*
-This custom FormSelect component is simplified to accept values/onChange arguments that represent the `value` field on an `OptionType`.
-
-For example, instead of using the full OptionType as a value (i.e. value={ value: "Taylor", label: "Name" }) we can just use the string "Taylor" and the `getValueForOptions` finds the matching `OptionType` within the provided `options`. A custom `getValueForOptions` function can be provided using the `getValFunc` prop.
-
-It has also been adjusted to accept values other than strings, like numbers, enums, etc.
-*/
-export default function FormSelect({
-  mono = false,
-  light = false,
-  small = false,
-  horizontal = false,
-  selectedOptionFirst: selectedFirst = false,
-  pill = false,
-  transparentBorder = false,
-  ...props
-}: Props<Option>): JSX.Element {
-  const styles = customStyles<Option>(
-    mono,
-    light,
-    small,
-    pill,
-    transparentBorder,
-  );
-
-  const options =
-    selectedFirst && !props.hideSelectedOptions
-      ? moveSelectedToTop(props.val, props.options)
-      : props.options;
-  return (
-    <div
-      className={cx(props.outerClassName, {
-        [css.horizontal]: horizontal,
-      })}
-      data-cy={props["data-cy"]}
-    >
-      {props.label && (
-        <div
-          className={cx(
-            css.label,
-            { [css.horizontalLabel]: horizontal },
-            props.labelClassName,
-          )}
-        >
-          {props.label}
-        </div>
-      )}
-      <Select
-        {...props}
-        options={options}
-        onChange={getOnChange<Option>(props.onChangeValue)}
-        value={getValue(props, options)}
-        styles={{ ...styles, ...props.styles }}
-        components={getComponents(props.components)}
-      />
-    </div>
-  );
-}
-
-function WithOptionDetails({
-  mono = false,
-  light = false,
-  small = false,
-  selectedOptionFirst: selectedFirst = false,
-  ...props
-}: Props<OptionWithDetails>) {
-  const styles = customStyles<OptionWithDetails>(mono, light, small);
-  const options =
-    selectedFirst && !props.hideSelectedOptions
-      ? moveSelectedToTop(props.val, props.options)
-      : props.options;
-  return (
-    <div className={props.outerClassName} data-cy={props["data-cy"]}>
-      {props.label && <div className={css.label}>{props.label}</div>}
-      <Select
-        {...props}
-        options={options}
-        onChange={getOnChange<OptionWithDetails>(props.onChangeValue)}
-        value={getValueForOptions<OptionWithDetails>(
-          props.val,
-          options,
-          props.getValFunc,
-        )}
-        styles={{ ...styles, input: styles.input }}
-        formatOptionLabel={formatOptionLabel}
-        components={getComponents(props.components)}
-      />
-    </div>
-  );
-}
-
-FormSelect.WithOptionDetails = WithOptionDetails;
-
-function formatOptionLabel(
-  option: OptionWithDetails,
-): React.DetailedReactHTMLElement<Record<string, unknown>, HTMLElement> {
-  return React.createElement(
-    "div",
-    {},
-    <span>
-      <span>{option.label}</span>
-      <span>{option.details}</span>
-    </span>,
-  );
-}
-
-function WithMulti({
-  mono = false,
-  light = false,
-  small = false,
-  horizontal = false,
-  selectedOptionFirst: selectedFirst = false,
-  isMulti = true,
-  ...props
-}: Props<Option, true>): JSX.Element {
-  const styles = props.styles || customStyles<Option, true>(mono, light, small);
-
-  const options =
-    selectedFirst && !props.hideSelectedOptions
-      ? moveSelectedToTop(props.val, props.options)
-      : props.options;
-
-  return (
-    <div
-      className={cx(props.outerClassName, {
-        [css.horizontal]: horizontal,
-      })}
-    >
-      {props.label && <div className={css.label}>{props.label}</div>}
-      <Select
-        {...props}
-        isMulti={isMulti}
-        options={options}
-        onChange={(opts: readonly Option[]) => {
-          props.onChangeValue(opts.map(o => o.value));
-        }}
-        value={getValueForOptions<Option>(props.val, options, props.getValFunc)}
-        styles={{ ...styles, input: styles.input }}
-        components={getComponents(props.components)}
-      />
-    </div>
-  );
-}
-
-FormSelect.WithMulti = WithMulti;
-
-function WithIcon({
-  mono = false,
-  light = false,
-  small = false,
-  selectedOptionFirst: selectedFirst = false,
-  ...props
-}: Props<OptionWithDetails>) {
-  const styles = customStyles<OptionWithDetails>(mono, light, small);
-  const options =
-    selectedFirst && !props.hideSelectedOptions
-      ? moveSelectedToTop(props.val, props.options)
-      : props.options;
-  return (
-    <Select
-      {...props}
-      options={options}
-      onChange={getOnChange<OptionWithDetails>(props.onChangeValue)}
-      value={getValueForOptions<OptionWithDetails>(
-        props.val,
-        options,
-        props.getValFunc,
-      )}
-      styles={{ ...styles, input: styles.input }}
-      formatOptionLabel={formatOptionIcon}
-      components={getComponents(props.components)}
-    />
-  );
-}
-
-FormSelect.WithIcon = WithIcon;
-
-function formatOptionIcon(
-  option: OptionWithDetails,
-): React.DetailedReactHTMLElement<Record<string, unknown>, HTMLElement> {
-  return React.createElement(
-    "div",
-    {},
-    <span>
-      {option.details}
-      <span>{option.label}</span>
-    </span>,
-  );
-}
-
-export * from "./types";
diff --git a/web/components/FormSelect/types.ts b/web/components/FormSelect/types.ts
deleted file mode 100644
index ce00a27e..00000000
--- a/web/components/FormSelect/types.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { ReactNode } from "react";
-import { ActionMeta, OnChangeValue, Props as SelectProps } from "react-select";
-
-export interface Option {
-  label: string;
-  value: any;
-  isDisabled?: boolean;
-}
-
-// Options rendered with details will not render an input; selection can only be made from dropdown.
-export interface OptionWithDetails extends Option {
-  details: ReactNode;
-}
-
-export type OnChange<OptionType> = (
-  value: OnChangeValue<OptionType, false>,
-  action: ActionMeta<OptionType>,
-) => void;
-
-type CustomProps<OptionType> = {
-  options: OptionType[];
-  val: any | null;
-  label?: string;
-  outerClassName?: string;
-  labelClassName?: string;
-  mono?: boolean;
-  light?: boolean;
-  small?: boolean;
-  pill?: boolean;
-  transparentBorder?: boolean;
-  isMobile?: boolean;
-  horizontal?: boolean;
-  // Show the selected option first in the list
-  selectedOptionFirst?: boolean;
-  ["data-cy"]?: string;
-  useValueAsSingleValue?: boolean;
-  // onChangeValue handles updating the `val` prop (type any).
-  // onChange can be used to update `value` (type OptionType).
-  onChangeValue: (val: any) => void;
-  // Handles getting value if value is not a string
-  getValFunc?: (o: any, v: any) => boolean;
-};
-
-export type OptionTypeBase = {
-  label: string;
-  value: any;
-};
-
-export type Props<
-  OptionType extends OptionTypeBase,
-  IsMulti extends boolean = false,
-> = SelectProps<OptionType, IsMulti> & CustomProps<OptionType>;
diff --git a/web/components/FormSelect/utils.test.ts b/web/components/FormSelect/utils.test.ts
deleted file mode 100644
index 8892b53c..00000000
--- a/web/components/FormSelect/utils.test.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { nTimesWithIndex } from "@dolthub/web-utils";
-import { Option } from "./types";
-import { getValueForOptions, moveSelectedToTop } from "./utils";
-
-type OrgParams = {
-  orgName: string;
-};
-
-const stringOps: Option[] = [
-  { value: "taylor", label: "Taylor" },
-  { value: "katie", label: "Katie" },
-  { value: "tim", label: "Tim" },
-];
-
-const orgParams = nTimesWithIndex(3, i => {
-  return { orgName: `Org ${i}` };
-});
-const orgParamsOps: Option[] = orgParams.map(r => {
-  return {
-    value: r,
-    label: `Org: ${r.orgName}`,
-  };
-});
-
-function orgParamsAreEqual(o: OrgParams, v: OrgParams): boolean {
-  return o.orgName === v.orgName;
-}
-
-describe("test form select utils", () => {
-  it("gets value for options", () => {
-    // Options with string values
-    expect(getValueForOptions<Option>("katie", stringOps)).toEqual(
-      stringOps[1],
-    );
-    expect(getValueForOptions<Option>("taylor", stringOps)).toEqual(
-      stringOps[0],
-    );
-    expect(getValueForOptions<Option>(null, stringOps)).toBeNull();
-    expect(getValueForOptions<Option>("brian", stringOps)).toBeUndefined();
-
-    // Options with DatabaseParam values, which reqiure a getValFunc
-    expect(
-      getValueForOptions<Option>(orgParams[1], orgParamsOps, orgParamsAreEqual),
-    ).toEqual(orgParamsOps[1]);
-  });
-});
-
-describe("test moveSelectedToTop", () => {
-  it("moves the selected item to the top of the array", () => {
-    stringOps.forEach(selected => {
-      const out = moveSelectedToTop(selected.value, stringOps);
-      expect(out).toHaveLength(stringOps.length);
-      expect(out[0]).toEqual(selected);
-    });
-  });
-
-  it("does not modify options if selectedVal is null", () => {
-    const out = moveSelectedToTop(null, stringOps);
-    expect(out).toEqual(stringOps);
-  });
-
-  it("does not modify options if selectedVal is invalid", () => {
-    const out = moveSelectedToTop("some invalid value", stringOps);
-    expect(out).toEqual(stringOps);
-  });
-});
diff --git a/web/components/FormSelect/utils.ts b/web/components/FormSelect/utils.ts
deleted file mode 100644
index 134d3dfb..00000000
--- a/web/components/FormSelect/utils.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  GroupBase,
-  OnChangeValue,
-  OptionsOrGroups,
-  PropsValue,
-} from "react-select";
-import { OnChange, Option, OptionTypeBase, Props } from "./types";
-
-// Converts custom onChangeValue function to onChange function for react-select
-export function getOnChange<OptionType extends OptionTypeBase>(
-  onChangeValue: (e: any) => void,
-): OnChange<OptionType> | undefined {
-  return (e: OnChangeValue<OptionType, false>) => {
-    if (!e) {
-      onChangeValue(null);
-      return;
-    }
-    onChangeValue((e as OptionType).value);
-  };
-}
-
-// Searches options array for OptionType that matches val. If provided, uses
-// `getValFunc` for matching. The default matching function checks for val ===
-// option.value
-export function getValueForOptions<OptionType extends OptionTypeBase>(
-  val: any | null,
-  options: OptionType[],
-  getValFunc?: (o: any, v: any) => boolean,
-): OptionType | null {
-  const equal = (o: any, v: any): boolean => {
-    if (getValFunc) {
-      return getValFunc(o, v);
-    }
-    return o === v;
-  };
-  return val !== undefined && val !== null
-    ? options[options.findIndex(x => equal(x.value, val))]
-    : null;
-}
-
-export function getValue(
-  props: Props<Option>,
-  options: OptionsOrGroups<Option, GroupBase<Option>> & Option[],
-): PropsValue<Option> | undefined {
-  const valueFromOptions = getValueForOptions<Option>(
-    props.val,
-    options,
-    props.getValFunc,
-  );
-
-  if (props.useValueAsSingleValue && props.val) {
-    return { value: props.val, label: props.val };
-  }
-
-  return valueFromOptions;
-}
-
-// Given a value that is currently selected and a list of all options,
-// move the selected option (determined by value) to the top of the list.
-export function moveSelectedToTop<OptionType extends OptionTypeBase>(
-  selectedVal: any | null,
-  options: OptionType[],
-): OptionType[] {
-  if (!selectedVal) {
-    return options;
-  }
-
-  const i = options.findIndex(({ value }) => value === selectedVal);
-  // If no value was found for the given selected value, return the original array.
-  if (i < 0) {
-    return options;
-  }
-  const selectedOption = options[i];
-  const optionsCopy = [...options];
-  optionsCopy.splice(i, 1);
-  optionsCopy.unshift(selectedOption);
-  return optionsCopy;
-}
diff --git a/web/components/Navbar/index.module.css b/web/components/Navbar/index.module.css
index f82a56ba..bc277a34 100644
--- a/web/components/Navbar/index.module.css
+++ b/web/components/Navbar/index.module.css
@@ -28,7 +28,7 @@
 }
 
 .right {
-  @apply flex justify-end items-center mr-6 w-1/3;
+  @apply hidden lg:flex justify-end items-center mr-6 w-1/3;
 }
 
 .closeIcon {
diff --git a/web/components/TableSelector/index.tsx b/web/components/TableSelector/index.tsx
index 90bb6150..db05ed90 100644
--- a/web/components/TableSelector/index.tsx
+++ b/web/components/TableSelector/index.tsx
@@ -1,11 +1,12 @@
-import FormSelect from "@components/FormSelect";
 import QueryHandler from "@components/util/QueryHandler";
+import { FormSelect } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
 import { useTableNamesQuery } from "@gen/graphql-types";
 import { RefParams } from "@lib/params";
 
 type Props = {
   params: RefParams;
-  onChangeTable: (t: string) => void;
+  onChangeTable: (t: Maybe<string>) => void;
   selectedTable: string;
   light?: boolean;
 };
diff --git a/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx b/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
index e8624b98..f160082f 100644
--- a/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
+++ b/web/components/pageComponents/ConnectionsPage/NewConnection/index.tsx
@@ -1,10 +1,10 @@
 import ButtonsWithError from "@components/ButtonsWithError";
-import FormSelect from "@components/FormSelect";
 import {
   Button,
   Checkbox,
   ExternalLink,
   FormInput,
+  FormSelect,
   Loader,
 } from "@dolthub/react-components";
 import { DatabaseType } from "@gen/graphql-types";
@@ -58,12 +58,13 @@ export default function NewConnection(props: Props) {
               outerClassName={css.typeSelect}
               label="Type"
               val={state.type}
-              onChangeValue={t =>
+              onChangeValue={t => {
+                if (!t) return;
                 setState({
                   type: t,
                   port: t === DatabaseType.Mysql ? "3306" : "5432",
-                })
-              }
+                });
+              }}
               options={[
                 { label: "MySQL/Dolt", value: DatabaseType.Mysql },
                 { label: "PostgreSQL", value: DatabaseType.Postgres },
diff --git a/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx b/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx
index 72403cce..bf2ca220 100644
--- a/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx
+++ b/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx
@@ -1,10 +1,10 @@
 import { Database404 } from "@components/Database404";
 import DeleteModal from "@components/DeleteModal";
-import FormSelect from "@components/FormSelect";
 import Link from "@components/links/Link";
 import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import QueryHandler from "@components/util/QueryHandler";
-import { Button, Loader } from "@dolthub/react-components";
+import { Button, FormSelect, Loader } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
 import {
   BranchFragment,
   SortBranchesBy,
@@ -28,8 +28,8 @@ type InnerProps = {
   branches: BranchFragment[];
   loadMore: () => Promise<void>;
   hasMore: boolean;
-  sortBranches: (sortBy?: SortBranchesBy) => Promise<void>;
-  sortBy?: SortBranchesBy;
+  sortBranches: (sortBy: Maybe<SortBranchesBy>) => Promise<void>;
+  sortBy: Maybe<SortBranchesBy>;
 } & Props;
 
 function Inner(props: InnerProps): JSX.Element {
diff --git a/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/useBranchList.ts b/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/useBranchList.ts
index c683a9fd..19c18f81 100644
--- a/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/useBranchList.ts
+++ b/web/components/pageComponents/DatabasePage/ForBranches/BranchesPage/useBranchList.ts
@@ -20,8 +20,8 @@ type ReturnType = {
   loading: boolean;
   error?: ApolloErrorType;
   refetch: () => Promise<void>;
-  sortBranches: (sortBy?: SortBranchesBy) => Promise<void>;
-  sortBy?: SortBranchesBy;
+  sortBranches: (sortBy: Maybe<SortBranchesBy>) => Promise<void>;
+  sortBy: Maybe<SortBranchesBy>;
 };
 
 export function useBranchList(params: DatabaseParams): ReturnType {
@@ -30,7 +30,7 @@ export function useBranchList(params: DatabaseParams): ReturnType {
     fetchPolicy: "cache-and-network",
   });
   const [branches, setBranches] = useState(data?.branches.list);
-  const [sortBy, setSortBy] = useState<SortBranchesBy | undefined>(undefined);
+  const [sortBy, setSortBy] = useState<Maybe<SortBranchesBy>>(null);
   const [offset, setOffset] = useState(data?.branches.nextOffset);
   const [lastOffset, setLastOffset] = useState<Maybe<number>>(undefined);
   const [err, setErr] = useApolloError(res.error);
@@ -71,7 +71,7 @@ export function useBranchList(params: DatabaseParams): ReturnType {
     }
   };
 
-  const sortBranches = async (sb?: SortBranchesBy) => {
+  const sortBranches = async (sb: Maybe<SortBranchesBy>) => {
     setSortBy(sb);
     try {
       const result = await res.client.query<
diff --git a/web/components/pageComponents/DatabasePage/ForBranches/NewBranchPage/NewBranchForm/index.tsx b/web/components/pageComponents/DatabasePage/ForBranches/NewBranchPage/NewBranchForm/index.tsx
index c953ae2f..5904059f 100644
--- a/web/components/pageComponents/DatabasePage/ForBranches/NewBranchPage/NewBranchForm/index.tsx
+++ b/web/components/pageComponents/DatabasePage/ForBranches/NewBranchPage/NewBranchForm/index.tsx
@@ -3,6 +3,7 @@ import CustomFormSelect from "@components/CustomFormSelect";
 import ErrorMsg from "@components/ErrorMsg";
 import { Button, FormInput, Loader } from "@dolthub/react-components";
 import { useReactiveWidth } from "@dolthub/react-hooks";
+import { Maybe } from "@dolthub/web-utils";
 import { useCreateBranchMutation } from "@gen/graphql-types";
 import useMutation from "@hooks/useMutation";
 import { OptionalRefParams } from "@lib/params";
@@ -19,7 +20,7 @@ type Props = {
 export default function NewBranchForm(props: Props): JSX.Element {
   const router = useRouter();
   const [newBranchName, setNewBranchName] = useState("");
-  const [fromRefName, setFromRefName] = useState("");
+  const [fromRefName, setFromRefName] = useState<Maybe<string>>(null);
   const {
     mutateFn: createBranch,
     err,
@@ -37,6 +38,7 @@ export default function NewBranchForm(props: Props): JSX.Element {
 
   const onSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
+    if (!newBranchName || !fromRefName) return;
 
     const { data } = await createBranch({
       variables: { ...props.params, newBranchName, fromRefName },
diff --git a/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/NewDocForm.tsx b/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/NewDocForm.tsx
index c1411fa3..7d667f09 100644
--- a/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/NewDocForm.tsx
+++ b/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/NewDocForm.tsx
@@ -1,7 +1,11 @@
-import FormSelect, { Option } from "@components/FormSelect";
 import TextareaWithMarkdown from "@components/TextareaWithMarkdown";
 import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
-import { Button, Loader } from "@dolthub/react-components";
+import {
+  Button,
+  FormSelect,
+  FormSelectTypes,
+  Loader,
+} from "@dolthub/react-components";
 import {
   DocForDocPageFragment,
   DocType,
@@ -84,6 +88,8 @@ export default function NewDocForm(props: Props) {
   return <Inner {...props} docRows={res.data?.docs.list} />;
 }
 
+type Option = FormSelectTypes.Option<DocType>;
+
 function getOptions(docRows?: DocForDocPageFragment[]): Option[] {
   const options: Option[] = [
     { label: "README", value: DocType.Readme },
diff --git a/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/BranchSelect.tsx b/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/BranchSelect.tsx
index 3c327710..acac29b1 100644
--- a/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/BranchSelect.tsx
+++ b/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/BranchSelect.tsx
@@ -1,11 +1,12 @@
-import FormSelect from "@components/FormSelect";
+import { FormSelect } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
 import { BranchForBranchSelectorFragment } from "@gen/graphql-types";
 import css from "./index.module.css";
 
 type Props = {
   branchList: BranchForBranchSelectorFragment[];
   currentBranchName: string;
-  onChange: (b: string) => void;
+  onChange: (b: Maybe<string>) => void;
   label: string;
 };
 
diff --git a/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/index.tsx b/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/index.tsx
index d9f3f229..8849e32a 100644
--- a/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/index.tsx
+++ b/web/components/pageComponents/DatabasePage/ForPulls/BranchSelectForm/index.tsx
@@ -32,7 +32,7 @@ function Inner(props: InnerProps) {
                 currentBranchName={props.params.refName ?? ""}
                 label="Base branch"
                 onChange={b => {
-                  const p = pulls({ ...props.params, refName: b });
+                  const p = pulls({ ...props.params, refName: b ?? undefined });
                   router.push(p.href, p.as).catch(console.error);
                 }}
               />
@@ -46,7 +46,10 @@ function Inner(props: InnerProps) {
                 currentBranchName={props.params.fromBranchName ?? ""}
                 label="From branch"
                 onChange={b => {
-                  const p = pulls({ ...props.params, fromBranchName: b });
+                  const p = pulls({
+                    ...props.params,
+                    fromBranchName: b ?? undefined,
+                  });
                   router.push(p.href, p.as).catch(console.error);
                 }}
               />
diff --git a/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts b/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts
index 6197de66..cc737196 100644
--- a/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts
+++ b/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts
@@ -1,4 +1,5 @@
 import { useSetState } from "@dolthub/react-hooks";
+import { Maybe } from "@dolthub/web-utils";
 import { useCreateTagMutation } from "@gen/graphql-types";
 import useMutation from "@hooks/useMutation";
 import { ApolloErrorType } from "@lib/errors/types";
@@ -9,7 +10,7 @@ import { Dispatch, useState } from "react";
 type FormData = {
   tagName: string;
   message: string;
-  fromRefName: string;
+  fromRefName: Maybe<string>;
   addTagAuthor: boolean;
 };
 
@@ -28,7 +29,7 @@ export default function useCreateTag(params: DatabaseParams): ReturnType {
   const [formData, setFormData] = useSetState({
     tagName: "",
     message: "",
-    fromRefName: "",
+    fromRefName: null as Maybe<string>,
     addTagAuthor: false,
   });
   const [loading, setLoading] = useState(false);
@@ -41,6 +42,7 @@ export default function useCreateTag(params: DatabaseParams): ReturnType {
   });
 
   const createTag = async (): Promise<string | undefined> => {
+    if (!formData.fromRefName) return undefined;
     setLoading(true);
     try {
       const { data } = await createTagMutation({
diff --git a/web/components/pageComponents/FileUploadPage/Steps/Table/index.tsx b/web/components/pageComponents/FileUploadPage/Steps/Table/index.tsx
index 00e5be02..fbaab5f5 100644
--- a/web/components/pageComponents/FileUploadPage/Steps/Table/index.tsx
+++ b/web/components/pageComponents/FileUploadPage/Steps/Table/index.tsx
@@ -46,7 +46,7 @@ function Inner() {
               <TableSelector
                 params={{ ...dbParams, refName: branchName }}
                 selectedTable={state.existingTable}
-                onChangeTable={t => setState({ existingTable: t })}
+                onChangeTable={t => setState({ existingTable: t ?? undefined })}
                 light
               />
               <UploadQueryInfo />
diff --git a/web/hooks/useEditDoc/index.ts b/web/hooks/useEditDoc/index.ts
index 6c1bfc6f..db9edd1c 100644
--- a/web/hooks/useEditDoc/index.ts
+++ b/web/hooks/useEditDoc/index.ts
@@ -1,4 +1,5 @@
 import { useSetState } from "@dolthub/react-hooks";
+import { Maybe } from "@dolthub/web-utils";
 import { DocType } from "@gen/graphql-types";
 import { RefParams } from "@lib/params";
 import { sqlQuery } from "@lib/urls";
@@ -7,7 +8,7 @@ import { SyntheticEvent } from "react";
 import { getDocsQuery } from "./utils";
 
 type DocState = {
-  docType?: DocType;
+  docType: Maybe<DocType>;
   markdown: string;
   loading: boolean;
 };
@@ -20,7 +21,7 @@ type ReturnType = {
 
 export default function useEditDoc(
   params: RefParams,
-  defaultDocType: DocType,
+  defaultDocType: Maybe<DocType>,
   defaultMarkdown = "",
 ): ReturnType {
   const [state, setState] = useSetState({
@@ -32,6 +33,7 @@ export default function useEditDoc(
 
   const onSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
+    if (!state.docType) return;
     setState({ loading: true });
 
     const { href, as } = sqlQuery({
diff --git a/web/lib/selectStyles.ts b/web/lib/selectStyles.ts
deleted file mode 100644
index 432d4915..00000000
--- a/web/lib/selectStyles.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { OptionTypeBase } from "@components/FormSelect/types";
-import { StylesConfig } from "react-select";
-import tailwindColors from "tailwindcss/colors";
-import { colors } from "./tailwind";
-
-export default function customStyles<
-  Q extends OptionTypeBase,
-  IsMulti extends boolean = false,
->(
-  mono?: boolean,
-  light?: boolean,
-  small?: boolean,
-  pill?: boolean,
-  transparentBorder?: boolean,
-): Partial<StylesConfig<Q, IsMulti>> {
-  const getColor = (isFocused: boolean) =>
-    isFocused ? tailwindColors.gray["400"] : tailwindColors.gray["300"];
-
-  return {
-    placeholder: styles => {
-      return {
-        ...styles,
-        color: tailwindColors.gray["400"],
-        textTransform: "lowercase",
-        fontSize: getFontSize(small, mono),
-        fontFamily: getFontFamily(mono),
-        fontWeight: 400,
-      };
-    },
-    control: (styles, { isFocused }) => {
-      return {
-        ...styles,
-        backgroundColor: isFocused || light ? "white" : colors["ld-lightblue"],
-        borderRadius: pill ? "9999px" : "4px",
-        width: transparentBorder ? "10rem" : "",
-        borderColor: transparentBorder ? "transparent" : getColor(isFocused),
-        boxShadow: "none",
-        maxHeight: small ? "30px" : styles.maxHeight,
-        minHeight: small ? "30px" : styles.minHeight,
-        fontSize: getFontSize(small, mono),
-        fontFamily: getFontFamily(mono),
-        "&:hover": {
-          borderColor: transparentBorder
-            ? "transparent"
-            : tailwindColors.gray["400"],
-        },
-      };
-    },
-    dropdownIndicator: styles => {
-      return {
-        ...styles,
-        color: colors["ld-darkblue"],
-        paddingTop: small ? "3px" : styles.paddingTop,
-      };
-    },
-    indicatorSeparator: styles => {
-      return {
-        ...styles,
-        marginBottom: small ? "4px" : styles.marginBottom,
-        marginTop: small ? "4px" : styles.marginTop,
-      };
-    },
-    indicatorsContainer: styles => {
-      return {
-        ...styles,
-        height: small ? "28px" : styles.height,
-      };
-    },
-    input: styles => {
-      return {
-        ...styles,
-        color: colors["ld-darkblue"],
-        fontSize: getFontSize(small, mono),
-        fontFamily: getFontFamily(mono),
-      };
-    },
-    option: (styles, { isFocused, isSelected, isDisabled }) => {
-      return {
-        ...styles,
-        display: "flex",
-        alignItems: "center",
-        color: isDisabled ? tailwindColors.gray["400"] : colors["ld-darkblue"],
-        backgroundColor:
-          isFocused || isSelected ? colors["ld-lightpurple"] : undefined,
-        fontFamily: getFontFamily(mono),
-        fontSize: getFontSize(small, mono),
-      };
-    },
-    singleValue: styles => {
-      return {
-        ...styles,
-        color: colors["ld-darkblue"],
-        fontFamily: getFontFamily(mono),
-        fontSize: getFontSize(small, mono),
-        top: small ? "45%" : styles.top,
-      };
-    },
-    menu: styles => {
-      return {
-        ...styles,
-        color: colors["ld-darkblue"],
-        fontFamily: getFontFamily(mono),
-        fontSize: getFontSize(small, mono),
-      };
-    },
-  };
-}
-
-function getFontSize(small?: boolean, mono?: boolean): string {
-  if (mono) return "11px";
-  return small ? "12px" : "14px";
-}
-
-function getFontFamily(mono?: boolean): string {
-  return mono
-    ? "Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace"
-    : "Source Sans Pro";
-}
diff --git a/web/package.json b/web/package.json
index fd73c899..879c602d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.0",
-    "@dolthub/react-components": "^0.1.8",
+    "@dolthub/react-components": "^0.1.9",
     "@dolthub/react-contexts": "^0.1.0",
     "@dolthub/react-hooks": "^0.1.6",
     "@dolthub/web-utils": "^0.1.2",
@@ -53,7 +53,6 @@
     "react-diff-viewer": "^3.1.1",
     "react-dom": "^18.2.0",
     "react-infinite-scroller": "^1.2.6",
-    "react-select": "^5.7.7",
     "react-timeago": "^7.2.0",
     "react-tooltip": "5.26.3",
     "reactflow": "^11.10.1",
diff --git a/web/yarn.lock b/web/yarn.lock
index 91c46430..747b4cfd 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -814,7 +814,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.9.2":
   version: 7.23.9
   resolution: "@babel/runtime@npm:7.23.9"
   dependencies:
@@ -823,6 +823,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+  version: 7.24.0
+  resolution: "@babel/runtime@npm:7.24.0"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 3495eed727bf4a4f84c35bb51ab53317ae38f4bbc3b1d0a8303751f9dfa0ce6f5fb2afced72b76c3dd0d8bb2ccb84787559a4dee9886291a36b26f02f0f759b4
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.22.15, @babel/template@npm:^7.23.9, @babel/template@npm:^7.3.3":
   version: 7.23.9
   resolution: "@babel/template@npm:7.23.9"
@@ -1344,7 +1353,7 @@ __metadata:
   resolution: "@dolt-sql-workbench/web@workspace:."
   dependencies:
     "@apollo/client": "npm:^3.7.0"
-    "@dolthub/react-components": "npm:^0.1.8"
+    "@dolthub/react-components": "npm:^0.1.9"
     "@dolthub/react-contexts": "npm:^0.1.0"
     "@dolthub/react-hooks": "npm:^0.1.6"
     "@dolthub/web-utils": "npm:^0.1.2"
@@ -1414,7 +1423,6 @@ __metadata:
     react-diff-viewer: "npm:^3.1.1"
     react-dom: "npm:^18.2.0"
     react-infinite-scroller: "npm:^1.2.6"
-    react-select: "npm:^5.7.7"
     react-select-event: "npm:^5.5.1"
     react-timeago: "npm:^7.2.0"
     react-tooltip: "npm:5.26.3"
@@ -1430,9 +1438,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@dolthub/react-components@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "@dolthub/react-components@npm:0.1.8"
+"@dolthub/react-components@npm:^0.1.9":
+  version: 0.1.9
+  resolution: "@dolthub/react-components@npm:0.1.9"
   dependencies:
     "@dolthub/react-hooks": "npm:^0.1.7"
     "@dolthub/web-utils": "npm:^0.1.3"
@@ -1443,13 +1451,14 @@ __metadata:
     react-copy-to-clipboard: "npm:^5.1.0"
     react-loader: "npm:^2.4.7"
     react-markdown: "npm:^9.0.1"
+    react-select: "npm:^5.8.0"
     reactjs-popup: "npm:^2.0.6"
     remark-gfm: "npm:^4.0.0"
     tailwindcss: "npm:^3.4.1"
   peerDependencies:
     react: ^18
     react-dom: ^18
-  checksum: 7fa2018b6c64edc4e274401535ec6bf0cf7bfbe24f6cd621f6c95a43e41074aaff878fb98f5b03262897c17a4d7fd29b36c747f419ff1e79d7dfbf1b39f83926
+  checksum: 2b734b91e689c8d84f709bbe9d2697f6360d2bbb09897ccc95cb279590f7a26ce4514e273184f46510ef58ac381dc80451bd17e17113f31396065d39efe240e4
   languageName: node
   linkType: hard
 
@@ -1584,8 +1593,8 @@ __metadata:
   linkType: hard
 
 "@emotion/react@npm:^11.8.1":
-  version: 11.11.3
-  resolution: "@emotion/react@npm:11.11.3"
+  version: 11.11.4
+  resolution: "@emotion/react@npm:11.11.4"
   dependencies:
     "@babel/runtime": "npm:^7.18.3"
     "@emotion/babel-plugin": "npm:^11.11.0"
@@ -1600,7 +1609,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: ce995395b8714343715284beb8478afdfa72b89ed83981a15a170ca0f4a2f77d7a4a198fd50c1f9c6efcd0535768d168ff88c5921dc5f90bb33134c7a75f9455
+  checksum: 6df892fd9e04b5c8c37aacfd7f461631e04e00e845edc3c5b2955ab8ad681abf5cd49584101f579427e08b82f2f88369c78d37ae2fe9360a8f68fd4e51b8e448
   languageName: node
   linkType: hard
 
@@ -12426,7 +12435,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-select@npm:^5.7.7":
+"react-select@npm:^5.8.0":
   version: 5.8.0
   resolution: "react-select@npm:5.8.0"
   dependencies: