diff --git a/striker-ui/components/AnvilList.tsx b/striker-ui/components/AnvilList.tsx
new file mode 100644
index 00000000..ae0a3aaf
--- /dev/null
+++ b/striker-ui/components/AnvilList.tsx
@@ -0,0 +1,35 @@
+import { makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import Divider from '@material-ui/core/Divider';
+import { BodyText } from './Text';
+import { TEXT } from '../lib/consts/DEFAULT_THEME';
+
+const useStyles = makeStyles(() => ({
+ root: {
+ width: '100%',
+ },
+ divider: {
+ background: TEXT,
+ },
+}));
+
+const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
+ const classes = useStyles();
+
+ return (
+
+
+ {list.map((anvil) => {
+ return (
+
+
+
+
+ );
+ })}
+
+ );
+};
+
+export default AnvilList;
diff --git a/striker-ui/components/Anvils.tsx b/striker-ui/components/Anvils.tsx
index 509d24af..ec5cf039 100644
--- a/striker-ui/components/Anvils.tsx
+++ b/striker-ui/components/Anvils.tsx
@@ -1,7 +1,8 @@
import { Grid } from '@material-ui/core';
-import Anvil from './Anvil';
import Panel from './Panel';
import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import SelectedAnvil from './SelectedAnvil';
+import AnvilList from './AnvilList';
const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => {
const anvils: AnvilListItem[] = [];
@@ -21,9 +22,8 @@ const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => {
return (
- {anvils.map((anvil) => (
-
- ))}
+
+
);