diff --git a/components/ActiveLink.tsx b/components/ActiveLink.tsx
new file mode 100644
index 00000000..f4da7d65
--- /dev/null
+++ b/components/ActiveLink.tsx
@@ -0,0 +1,23 @@
+import { useRouter } from 'next/router'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import React, { Children } from 'react'
+
+const ActiveLink = ({ children, activeClassName, ...props }) => {
+ const { asPath } = useRouter()
+ const child = Children.only(children)
+ const childClassName = child.props.className || ''
+
+ const className =
+ asPath === props.href || asPath === props.as
+ ? `${childClassName} ${activeClassName}`.trim()
+ : childClassName
+
+ return {React.cloneElement(child, { className })};
+}
+
+ActiveLink.defaultProps = {
+ activeClassName: 'active'
+} as Partial
+
+export default ActiveLink
\ No newline at end of file
diff --git a/components/Settings.tsx b/components/Settings.tsx
index 480e0757..382141d8 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link';
+import ActiveLink from '../components/ActiveLink';
import { useRouter } from "next/router";
-import { UserCircleIcon, KeyIcon, CodeIcon } from '@heroicons/react/outline';
+import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon } from '@heroicons/react/outline';
export default function SettingsShell(props) {
const router = useRouter();
@@ -11,15 +11,11 @@ export default function SettingsShell(props) {