diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
new file mode 100644
index 0000000000000000000000000000000000000000..96308a6fa1c5a940f1298f1fcd6c46fbfcd3105a
--- /dev/null
+++ b/src/Components/ExpandedMaterials.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import { Typography } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+import Chip from '@material-ui/core/Chip';
+import Grid from '@material-ui/core/Grid';
+import { Container } from "react-grid-system";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        '& > *': {
+            margin: theme.spacing(0.5),
+        },
+    },
+}));
+
+const ExpandedMaterial = (props) => {
+    const material = { ...props.material };
+    const classes = useStyles();
+
+    return (
+        <Container style={{ backgroundColor: "#444444", padding : "20px" }}>
+            <Grid container direction="row">
+                <Grid item direction="column" xs={4}>
+                    <Grid item>
+                        <Title variant="body2">
+                            {
+                                material.name
+                            }
+                        </Title>
+                    </Grid>
+                    <Grid item>
+                        <ChipsDiv className={classes.root}>
+                            {
+                                material.tags.map((tag, index) => {
+                                    return (
+                                        <Chip color="default" label={tag.name} key={index} style={{padding : "0.5px"}} />
+                                    )
+                                })
+                            }
+                        </ChipsDiv>
+                    </Grid>
+                    <div>
+                        <DevelopedTypo>
+                            Desenvolvido por: 
+                        </DevelopedTypo>
+                        <DevelopedSpan>
+                            {
+                                material.developed
+                            }
+                        </DevelopedSpan>
+                    </div>
+                </Grid>
+            </Grid>
+        </Container>
+    );
+}
+
+const Title = styled.h3`
+    color: White;
+    font-weight: 500;
+    padding : 0; 
+    margin  : 0; 
+`
+
+const ChipsDiv = styled.div`
+    margin-left : -5px;
+`
+
+const DevelopedSpan = styled.span`
+    color : white;
+    opacity : 0.9;    
+
+`
+
+const DevelopedTypo = styled(Typography)`
+    color : white;
+    font-weight: bold;
+`
+
+
+export default ExpandedMaterial;
\ No newline at end of file