diff --git a/src/components/common/FieldGenerator.jsx b/src/components/common/FieldGenerator.jsx
index 43ae477..e7b1c03 100644
--- a/src/components/common/FieldGenerator.jsx
+++ b/src/components/common/FieldGenerator.jsx
@@ -5,7 +5,7 @@ import {
 } from '@material-ui/core';
 import { KeyboardDateTimePicker } from '@material-ui/pickers';
 // import CheckInput from './CheckInput';
-
+import { SketchPicker } from 'react-color';
 class FieldGenerator {
 
 	// TODO Finish error texts
@@ -142,6 +142,14 @@ class FieldGenerator {
 			</Select>
 		</FormControl>
 	)
+
+	color = (key, label, props = {}) => (
+		//console.log(props)
+		<SketchPicker
+			color={this.getValue(key, props) || ''}
+			onChangeComplete={this.onChange}
+		/>
+	)
 }
 
 export default FieldGenerator;
diff --git a/src/pages/admin/SaleEditor/DetailsEditor.jsx b/src/pages/admin/SaleEditor/DetailsEditor.jsx
index c187af9..3489cd9 100644
--- a/src/pages/admin/SaleEditor/DetailsEditor.jsx
+++ b/src/pages/admin/SaleEditor/DetailsEditor.jsx
@@ -20,6 +20,12 @@ export default function DetailsEditor({ disabled, editing, isCreator, ...props }
 					{Field.text('id', 'ID', onlyCreate)}
 					{Field.select('association', 'Association', props.assos, onlyCreate)}
 					{Field.text('description', 'Description', { required: true, multiline: true, rows: 4 })}
+
+{/*
+					{Field.color('color', 'QCouleuuur')}
+*/}
+
+
 				</Grid>
 
 				<Grid item xs sm={6} className={mergeClasses(classes, 'column', 'controls')}>
diff --git a/src/pages/admin/SaleEditor/index.jsx b/src/pages/admin/SaleEditor/index.jsx
index 09fd569..b935603 100644
--- a/src/pages/admin/SaleEditor/index.jsx
+++ b/src/pages/admin/SaleEditor/index.jsx
@@ -111,6 +111,7 @@ class SaleEditor extends React.Component {
 						association,
 						begin_at: new Date(),
 						end_at: new Date(),
+						color: ""
 					},
 					items: {},
 					itemgroups: {},
diff --git a/src/pages/public/SaleDetail.jsx b/src/pages/public/SaleDetail.jsx
index aa390c2..85cffce 100644
--- a/src/pages/public/SaleDetail.jsx
+++ b/src/pages/public/SaleDetail.jsx
@@ -266,6 +266,17 @@ class SaleDetail extends React.Component {
 									</span>
                                 </Alert>
                             )}
+
+                            <Box clone my={2}>
+                                <Paper>
+                                    <ItemsTable
+                                        disabled={this.areItemsDisabled()}
+                                        items={this.props.items}
+                                        quantities={this.state.quantities}
+                                        onQuantityChange={this.handleQuantityChange}
+                                    />
+                                </Paper>
+                            </Box>
                             {saleState === 'ONGOING' && (
                                 <React.Fragment>
                                     <FormControlLabel
@@ -303,17 +314,6 @@ class SaleDetail extends React.Component {
                                 </React.Fragment>
                             )}
 
-                            <Box clone my={2}>
-                                <Paper>
-                                    <ItemsTable
-                                        disabled={this.areItemsDisabled()}
-                                        items={this.props.items}
-                                        quantities={this.state.quantities}
-                                        onQuantityChange={this.handleQuantityChange}
-                                    />
-                                </Paper>
-                            </Box>
-
                             {saleState === 'NOT_BEGUN' ? (
 
                                 <Box style={{width: '100%'}}>