diff --git a/src/cryptometrics/components/filters/Filter.js b/src/cryptometrics/components/filters/Filter.js
index 3e31d270523afccf8f40934803647e5c9035be14..111e1b5ab4cb26e3581e49b591c324bfc278a308 100644
--- a/src/cryptometrics/components/filters/Filter.js
+++ b/src/cryptometrics/components/filters/Filter.js
@@ -1,6 +1,7 @@
 import React from "react";
+import Button from "../button/Button";
 
-export function Filter({
+function Filter({
   subject,
   condition,
   value,
@@ -24,29 +25,14 @@ export function Filter({
       </div>
 
       {/* Button */}
-      <button
+      <Button
         onClick={onButtonClick}
-        className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg justify-center items-center h-10 w-10 inline-flex font-thin text-white"
+        className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg rounded-l-none justify-center items-center h-10 w-10 inline-flex font-thin text-white"
       >
         <span>{buttonIcon}</span>
-      </button>
+      </Button>
     </div>
   );
 }
 
-export function FilterButton({ icon, onClick }) {
-  return (
-    <button
-      className="mx-1 mt-2 font-sans font-normal bg-dark-600 rounded-lg dark:text-neutral-200 dark:hover:text-indigo-600 inline-flex h-10 w-10 justify-center items-center whitespace-nowrap"
-      onClick={onClick}
-    >
-      {icon}
-    </button>
-  );
-}
-
-export function Filters({ children }) {
-  return (
-    <div className="flex flex-wrap justify-start items-center">{children}</div>
-  );
-}
+export default Filter;
diff --git a/src/cryptometrics/components/filters/Filters.js b/src/cryptometrics/components/filters/Filters.js
new file mode 100644
index 0000000000000000000000000000000000000000..b38f870185f9f22b6da9fb026cd9ef512615824c
--- /dev/null
+++ b/src/cryptometrics/components/filters/Filters.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+function Filters({ children }) {
+  return (
+    <div className="flex flex-wrap justify-start items-center">{children}</div>
+  );
+}
+
+export default Filters;
diff --git a/src/cryptometrics/components/filters/index.js b/src/cryptometrics/components/filters/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8e3c046632485b75094754450c41f7269f4b643
--- /dev/null
+++ b/src/cryptometrics/components/filters/index.js
@@ -0,0 +1,4 @@
+import Filter from "./Filter";
+import Filters from "./Filters";
+
+export { Filter, Filters };
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 362742967585ca243a86c36a1a150843d90bd067..0a0f82d3dab1c845957394bc02ab44ed779b950b 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -18,7 +18,7 @@ import {
   XIcon,
 } from "@heroicons/react/outline";
 import { useFilters, useOnClickOutside } from "../hooks";
-import { Filter, FilterButton, Filters } from "../components/filters/Filter";
+import { Filter, Filters } from "../components/filters";
 import { FilterDropdown } from "../components/dropdown/FilterDropdown";
 import { filterOptions } from "../constants";
 import {
@@ -31,6 +31,7 @@ import Image from "next/image";
 import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
 import classNames from "classnames";
 import Link from "next/link";
+import { FilterButton } from "../components/button";
 
 export default function Home() {
   const [filters, addFilter, removeFilter] = useFilters([]);