diff --git a/src/renderer/components/ItemWithTooltip.tsx b/src/renderer/components/CompactItem.tsx
similarity index 80%
rename from src/renderer/components/ItemWithTooltip.tsx
rename to src/renderer/components/CompactItem.tsx
index 7040208..be49a12 100644
--- a/src/renderer/components/ItemWithTooltip.tsx
+++ b/src/renderer/components/CompactItem.tsx
@@ -7,7 +7,13 @@ import { iconFromId } from '../icons/icons';
 import { useNavigate } from 'react-router-dom';
 import { useItemContext } from '../contexts/itemsContext';
 
-export const EvoItemRenderer: FC<{ id?: string, onClick?: () => void }> = ({ id, onClick }) => {
+interface Props {
+  id?: string,
+  noTooltip?: boolean,
+  onClick?: () => void,
+}
+
+export const CompactItem: FC<Props> = ({ id, noTooltip, onClick }) => {
   const { items } = useItemContext();
   const navigate = useNavigate();
   if (!id) {
@@ -31,7 +37,11 @@ export const EvoItemRenderer: FC<{ id?: string, onClick?: () => void }> = ({ id,
       sx={{
         boxShadow: 3
       }}
-      title={<ItemCard id={id} item={items[id]} />}
+      title={
+        !noTooltip 
+          ? <ItemCard id={id} item={items[id]} /> 
+          : null
+        }
       placement="right-start"
     >
       <Avatar
diff --git a/src/renderer/components/Item.tsx b/src/renderer/components/Item.tsx
deleted file mode 100644
index 02c99ed..0000000
--- a/src/renderer/components/Item.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import Box, { BoxProps } from '@mui/material/Box';
-import { iconFromId } from '../icons/icons';
-import Typography from '@mui/material/Typography';
-import { TreeView } from '@mui/x-tree-view/TreeView';
-import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { grey, lightBlue } from '@mui/material/colors';
-
-import Avatar from '@mui/material/Avatar';
-import { useItemContext } from '../contexts/itemsContext';
-import { TItem } from '../../types';
-import { EvoItemRenderer } from './ItemWithTooltip';
-
-interface EvoItemProps extends BoxProps {
-  item: TItem
-}
-
-export function EvoItem(props: EvoItemProps) {
-  const { item, sx,...rest } = props;
-  const { color } = item.rarity;
-
-  return (
-    <Box {...rest} sx={{ maxWidth: '600px'}}>
-      <Box sx={{ display: 'flex', flexDirection: 'row', paddingBottom: '10px' }}>
-        <img
-          src={iconFromId(item.icon)} width={64} height={64}
-        />
-        <Box sx={{ paddingLeft: '10px' }}>
-          <Typography variant="subtitle1" color={color}>
-            {item.id}
-          </Typography>
-          <Typography variant="subtitle2" color={lightBlue[300]}>
-            {item.restriction}
-          </Typography>
-        </Box>
-      </Box>
-      <Typography variant="body2">{item.description}</Typography>
-      <br />
-      {item.effects.map((effect, index) => (
-        <Typography key={effect + index} variant="body2">
-          {effect}
-        </Typography>
-      ))}
-      <ItemDependenciesTree item={item} />
-      <CraftsIntoItemList item={item} />
-    </Box>
-  )
-}
-
-function ItemDependenciesTree(props: {item: TItem}) {
-  const { item } = props;
-  if (item.recipe.length === 0) return null;
-  return (
-    <Box sx={{ width: '500px', paddingTop: '15px'}}>
-      <Typography variant="h6">Crafting</Typography>
-      <TreeView sx={{ paddingTop: '15px' }}>
-        {
-          item.recipe.map((craftingId: string) => (
-            <ItemDependency key={craftingId} index={item.id} id={craftingId} />
-          ))
-        }
-      </TreeView>
-    </Box>
-  )
-}
-
-function CraftsIntoItemList(props: {item: TItem}) {
-  const { item } = props;
-  if (item.partOf?.length === 0) return null;
-  return (
-    <Box sx={{ width: '500px', paddingTop: '15px'}}>
-      <Typography variant="h6">Crafts into</Typography>
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', paddingTop: '20px' }}>
-          {item.partOf?.map((id) => (
-            <EvoItemRenderer key={id} id={id} />
-          ))}
-        </Box>
-    </Box>
-  )
-}
-
-function ItemDependency(props: {id: string; index: string;}) {
-  const { items } = useItemContext();
-  const { id, index } = props;
-  const item = items[id];
-  const newIndex = index + '_' + id;
-
-  if (!item) {
-    return (
-      <TreeItem nodeId={newIndex} label={
-        <Box sx={{display:'flex', flexDirection:'row', alignContent: 'center'}}>
-          <Avatar sx={{ bgcolor: grey[500], marginRight: '10px' }} variant="rounded">
-            {id[0]}
-          </Avatar>
-          <Typography variant="body2">{id}</Typography>
-        </Box>
-      }/>
-    );
-  }
-  return (
-    <TreeItem
-      nodeId={newIndex}
-      label={
-        <Box sx={{display:'flex', flexDirection:'row', alingItems: 'center', justifyContent: 'space-between'}}>
-          <ItemIconAndTitle item={item} />
-          { item.sourceShort && <Typography variant="body2" sx={{ color: lightBlue[300] }}>{item.sourceShort}</Typography> }
-        </Box>
-      }>
-      {
-        item.recipe.map((id, index) => (
-          <ItemDependency key={newIndex + id + '_' + index} index={newIndex} id={id} />
-        ))
-      }
-    </TreeItem>
-  )
-}
-
-export function ItemIconAndTitle (props: {item: TItem}) {
-  const { item } = props;
-  return (
-    <Box sx={{display:'flex', flexDirection:'row', alingItems: 'center'}}>
-      <Avatar sx={{ bgcolor: grey[500], marginRight: '10px' }} variant="rounded" src={iconFromId(item.icon)}/>
-      <Typography variant="body2" sx={{ color: item.rarity.color }}>{item.id}</Typography>
-    </Box>
-  )
-}
\ No newline at end of file
diff --git a/src/renderer/components/Stash.tsx b/src/renderer/components/Stash.tsx
index 90a24d6..5641592 100644
--- a/src/renderer/components/Stash.tsx
+++ b/src/renderer/components/Stash.tsx
@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { BoxProps } from '@mui/material';
-import { EvoItemRenderer } from './ItemWithTooltip';
+import { CompactItem } from './CompactItem';
 
 interface EvoStashProps extends BoxProps {
   itemIds: string[];
@@ -12,7 +12,7 @@ export function EvoStash(props: EvoStashProps) {
     <Box {...rest}>
       {itemIds.map((id, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <EvoItemRenderer key={id + index} id={id} />
+        <CompactItem key={id + index} id={id} />
       ))}
     </Box>
   );
diff --git a/src/renderer/feature/item/components/CraftsInto.tsx b/src/renderer/feature/item/components/CraftsInto.tsx
new file mode 100644
index 0000000..660f75e
--- /dev/null
+++ b/src/renderer/feature/item/components/CraftsInto.tsx
@@ -0,0 +1,62 @@
+import { CompactItem } from '../../../components/CompactItem';
+import Box from '@mui/material/Box';
+import { useNavigate } from 'react-router-dom';
+import Typography from '@mui/material/Typography';
+import { TItem } from '../../../../types';
+import { useItemContext } from '../../../contexts/itemsContext';
+import { ItemIconAndTitle } from './ItemIconAndTitle';
+
+export function CraftsInto(props: { item: TItem }) {
+    const { item } = props;
+    const { items } = useItemContext();
+
+    const usedForItemsArr = item.partOf.map(id => items[id])
+
+    if (usedForItemsArr.length === 0) return null;
+
+
+    return (
+        <Box sx={{ width: '500px', paddingTop: '5px' }}>
+            <Typography variant="h6">Used for</Typography>
+            {
+                usedForItemsArr.length > 4
+                    ? <TiledItems items={usedForItemsArr} />
+                    : <ListedItems items={usedForItemsArr} />
+            }
+        </Box>
+    )
+}
+
+function TiledItems({ items }: { items: TItem[] }) {
+    if (items.length === 0) return null;
+
+    return (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', paddingTop: '5px' }}>
+            {items.map((item) => (
+                <CompactItem key={`used_for_${item.id}`} id={item.id} />
+            ))}
+        </Box>
+    )
+}
+
+function ListedItems({ items }: { items: TItem[] }) {
+    if (items.length === 0) return null;
+    const navigate = useNavigate();
+
+    return (
+        <Box sx={{ paddingTop: '5px' }}>
+            {items.map((item) => (
+                <ItemIconAndTitle 
+                    sx={{
+                        paddingLeft: '30px',
+                        cursor: 'pointer',
+                        '&:hover': {
+                            background: '#2b2b2b'
+                        }
+                    }}
+                    onClick={() => { navigate(`/item/${item.id}`) }}
+                    item={item}/>
+            ))}
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/renderer/feature/item/components/DependencyTree.tsx b/src/renderer/feature/item/components/DependencyTree.tsx
new file mode 100644
index 0000000..264ff3e
--- /dev/null
+++ b/src/renderer/feature/item/components/DependencyTree.tsx
@@ -0,0 +1,66 @@
+
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import { TreeView } from '@mui/x-tree-view/TreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { ItemIconAndTitle } from './ItemIconAndTitle';
+import { grey, lightBlue } from '@mui/material/colors';
+import { TItem } from '../../../../types';
+import { useItemContext } from '../../../contexts/itemsContext';
+
+
+export function ItemDependenciesTree(props: {item: TItem}) {
+    const { item } = props;
+    if (item.recipe.length === 0) return null;
+    return (
+      <Box sx={{ width: '500px', paddingTop: '15px'}}>
+        <Typography variant="h6">Crafting</Typography>
+        <TreeView sx={{ paddingTop: '10px' }}>
+          {
+            item.recipe.map((craftingId: string) => (
+              <ItemDependency key={craftingId} index={item.id} id={craftingId} />
+            ))
+          }
+        </TreeView>
+      </Box>
+    )
+  }
+
+  
+function ItemDependency(props: {id: string; index: string;}) {
+    const { items } = useItemContext();
+    const { id, index } = props;
+    const item = items[id];
+    const newIndex = index + '_' + id;
+  
+    if (!item) {
+      return (
+        <TreeItem nodeId={newIndex} label={
+          <Box sx={{display:'flex', flexDirection:'row', alignContent: 'center'}}>
+            <Avatar sx={{ bgcolor: grey[500], marginRight: '10px' }} variant="rounded">
+              {id[0]}
+            </Avatar>
+            <Typography variant="body2">{id}</Typography>
+          </Box>
+        }/>
+      );
+    }
+    return (
+      <TreeItem
+        nodeId={newIndex}
+        label={
+          <Box sx={{display:'flex', flexDirection:'row', alingItems: 'center', justifyContent: 'space-between'}}>
+            <ItemIconAndTitle item={item} />
+            { item.sourceShort && <Typography variant="body2" sx={{ color: lightBlue[300], lineHeight: '40px' }}>{item.sourceShort}</Typography> }
+          </Box>
+        }>
+        {
+          item.recipe.map((id, index) => (
+            <ItemDependency key={newIndex + id + '_' + index} index={newIndex} id={id} />
+          ))
+        }
+      </TreeItem>
+    )
+  }
+  
\ No newline at end of file
diff --git a/src/renderer/components/GodlyProgress.tsx b/src/renderer/feature/item/components/GodlyProgress.tsx
similarity index 93%
rename from src/renderer/components/GodlyProgress.tsx
rename to src/renderer/feature/item/components/GodlyProgress.tsx
index d994372..29ad9d0 100644
--- a/src/renderer/components/GodlyProgress.tsx
+++ b/src/renderer/feature/item/components/GodlyProgress.tsx
@@ -3,13 +3,13 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Collapse from '@mui/material/Collapse';
 import Divider from '@mui/material/Divider';
-import { ItemIconAndTitle } from './Item';
 import { lightBlue } from '@mui/material/colors';
 import { styled } from '@mui/material/styles';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import { useMemo, useState } from 'react';
-import { DependencyObj, getItemArrFlatDependenciesObject } from '../util/crafting';
-import { useItemContext } from '../contexts/itemsContext';
+import { DependencyObj, getItemArrFlatDependenciesObject } from '../../../util/crafting';
+import { useItemContext } from '../../../contexts/itemsContext';
+import { ItemIconAndTitle } from './ItemIconAndTitle';
 
 
 interface ExpandMoreProps extends IconButtonProps {
@@ -110,7 +110,7 @@ function MissingItem(props: {id: string, amount: number}) {
         <Typography sx={{ width: '30px'}}>{amount}  </Typography>
         <ItemIconAndTitle item={item} />
       </Box>
-      { item.sourceShort && <Typography variant="body2" sx={{ color: lightBlue[300] }}>{item.sourceShort}</Typography> }
+      { item.sourceShort && <Typography variant="body2" sx={{ color: lightBlue[300], lineHeight: '40px' }}>{item.sourceShort}</Typography> }
     </Box>
   )
 }
\ No newline at end of file
diff --git a/src/renderer/feature/item/components/Item.tsx b/src/renderer/feature/item/components/Item.tsx
new file mode 100644
index 0000000..df84975
--- /dev/null
+++ b/src/renderer/feature/item/components/Item.tsx
@@ -0,0 +1,46 @@
+import Box, { BoxProps } from '@mui/material/Box';
+import { iconFromId } from '../../../icons/icons';
+import Typography from '@mui/material/Typography';
+import { lightBlue } from '@mui/material/colors';
+import { TItem } from '../../../../types';
+import { CraftsInto } from './CraftsInto';
+import { ItemDependenciesTree } from './DependencyTree';
+
+interface EvoItemProps extends BoxProps {
+  item: TItem
+}
+
+export function EvoItem(props: EvoItemProps) {
+  const { item, sx,...rest } = props;
+  const { color } = item.rarity;
+
+  return (
+    <Box {...rest} sx={{ maxWidth: '600px'}}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', paddingBottom: '10px' }}>
+        <img
+          src={iconFromId(item.icon)} width={64} height={64}
+        />
+        <Box sx={{ paddingLeft: '10px' }}>
+          <Typography variant="subtitle1" color={color}>
+            {item.id}
+          </Typography>
+          <Typography variant="subtitle2" color={lightBlue[300]}>
+            {item.restriction}
+          </Typography>
+        </Box>
+      </Box>
+      <Typography variant="body2">{item.description}</Typography>
+      <br />
+      {item.effects.map((effect, index) => (
+        <Typography key={effect + index} variant="body2">
+          {effect}
+        </Typography>
+      ))}
+      <ItemDependenciesTree item={item} />
+      <CraftsInto item={item} />
+    </Box>
+  )
+}
+
+
+
diff --git a/src/renderer/feature/item/components/ItemIconAndTitle.tsx b/src/renderer/feature/item/components/ItemIconAndTitle.tsx
new file mode 100644
index 0000000..b93236d
--- /dev/null
+++ b/src/renderer/feature/item/components/ItemIconAndTitle.tsx
@@ -0,0 +1,22 @@
+import Box, { BoxProps } from '@mui/material/Box';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import { iconFromId } from '../../../icons/icons';
+import { grey } from '@mui/material/colors';
+
+import { TItem } from '../../../../types';
+import { FC } from 'react';
+
+interface Props extends BoxProps {
+    item: TItem
+}
+
+export const ItemIconAndTitle: FC<Props> = (props) => {
+    const { item, sx, ...rest } = props;
+    return (
+      <Box sx={{ display:'flex', flexDirection:'row', alingItems: 'center', ...sx }} {...rest}>
+        <Avatar sx={{ bgcolor: grey[500], marginRight: '10px', verticalAlign: 'middle' }} variant="rounded" src={iconFromId(item.icon)}/>
+        <Typography variant="body2" sx={{ color: item.rarity.color, lineHeight: '40px' }}>{item.id}</Typography>
+      </Box>
+    )
+  }
\ No newline at end of file
diff --git a/src/renderer/pages/CharacterPage.tsx b/src/renderer/pages/CharacterPage.tsx
index 6523e05..92a23e7 100644
--- a/src/renderer/pages/CharacterPage.tsx
+++ b/src/renderer/pages/CharacterPage.tsx
@@ -11,7 +11,7 @@ import { EvoStash } from '../components/Stash';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Tooltip from '@mui/material/Tooltip';
-import { GodlyProgress } from '../components/GodlyProgress';
+import { GodlyProgress } from '../feature/item/components/GodlyProgress';
 
 export const CharacterPage: FC = () => {
   const { getCharacter, onLoadClick } = useCharacterContext();
diff --git a/src/renderer/pages/ItemPage.tsx b/src/renderer/pages/ItemPage.tsx
index 27a093e..bf22069 100644
--- a/src/renderer/pages/ItemPage.tsx
+++ b/src/renderer/pages/ItemPage.tsx
@@ -1,5 +1,5 @@
 import { Link, useParams } from 'react-router-dom';
-import { EvoItem } from '../components/Item';
+import { EvoItem } from '../feature/item/components/Item';
 import { useNavigate } from 'react-router-dom';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import IconButton from '@mui/material/IconButton';
diff --git a/src/renderer/pages/ItemsPage.tsx b/src/renderer/pages/ItemsPage.tsx
index 759df18..7b98393 100644
--- a/src/renderer/pages/ItemsPage.tsx
+++ b/src/renderer/pages/ItemsPage.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, useMemo, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import { Input, InputProps } from '@mui/material';
-import { EvoItemRenderer } from '../components/ItemWithTooltip';
+import { CompactItem } from '../components/CompactItem';
 import { useItemContext } from '../contexts/itemsContext';
 
 type DebounceProps = {
@@ -45,7 +45,7 @@ export function ItemsPage() {
       />
       <Box sx={{ display: 'flex', flexWrap: 'wrap', paddingTop: '20px' }}>
         {filteredItems.map((id) => (
-          <EvoItemRenderer key={id} id={id} />
+          <CompactItem key={id} id={id} />
         ))}
       </Box>
     </Box>