diff --git a/src/App.js b/src/App.js
index e93e79c..0a7eac9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,7 +19,10 @@ const App = ({ handleInitializeApplication, planets }) => {
   return (
     <Box fill>
       <ViewSpeeddial />
-      <Box pad={{ left: '100px', top: '25px', right: '25px', bottom: '25px' }}>
+      <Box
+        pad={{ left: '100px', top: '25px', right: '25px', bottom: '25px' }}
+        style={{ maxHeight: '100vh', overflow: 'auto' }}
+      >
         <View />
       </Box>
     </Box>
diff --git a/src/components/ItemCard.js b/src/components/ItemCard.js
index 31a389d..4b335a8 100644
--- a/src/components/ItemCard.js
+++ b/src/components/ItemCard.js
@@ -6,7 +6,7 @@ const ItemCard = ({ item }) => {
   const currentItem = itemList.find(({ name }) => name === item)
   const Icon = currentItem.icon
   return (
-    <Card>
+    <Card style={{ position: 'sticky', top: '0', zIndex: '1' }}>
       <CardContent>
         <Box
           alignItems="center"
diff --git a/src/components/MarketTable.js b/src/components/MarketTable.js
index 1ed0125..80fe67b 100644
--- a/src/components/MarketTable.js
+++ b/src/components/MarketTable.js
@@ -46,9 +46,9 @@ const MarketTable = ({ data, item }) => {
   }
 
   return (
-    <Paper style={{ width: '100%' }}>
+    <Paper style={{ overflow: 'auto', width: '100%' }}>
       <ItemCard item={item} />
-      <Table>
+      <Table stickyHeader>
         <TableHead>
           <TableRow>
             <TableCell>Name</TableCell>
diff --git a/src/index.css b/src/index.css
index 7fe37a5..f6e36a2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,3 +16,7 @@ body {
 .node-container:hover {
   cursor: pointer;
 }
+
+.MuiTableCell-stickyHeader {
+  top: 104px !important;
+}
\ No newline at end of file