diff --git a/src/atoms/Forms/Duplicate/duplicate.scss b/src/atoms/Forms/Duplicate/duplicate.scss
index 15b9ff2..e4f6fa2 100644
--- a/src/atoms/Forms/Duplicate/duplicate.scss
+++ b/src/atoms/Forms/Duplicate/duplicate.scss
@@ -11,7 +11,8 @@
 		}
 	}
 
-	.add-button {
+	.add-button, .delete-button {
 		width: auto;
+		background-color: white;
 	}
 }
diff --git a/src/atoms/Forms/Duplicate/duplicateNode.tsx b/src/atoms/Forms/Duplicate/duplicateNode.tsx
index 492eed5..7bb16ee 100644
--- a/src/atoms/Forms/Duplicate/duplicateNode.tsx
+++ b/src/atoms/Forms/Duplicate/duplicateNode.tsx
@@ -58,7 +58,7 @@ export default (props: Props) => {
 				{React.createElement(props.element as any, elementProperties)}
 			</div>
 			{props.removeDisplayed && props.isRemovable && (
-				<Button onClick={onDelete} className="buttonContainer">
+				<Button onClick={onDelete} className="buttonContainer delete-button">
 					{props.deleteButtonContent || '-'}
 				</Button>
 			)}
diff --git a/src/atoms/Forms/form.scss b/src/atoms/Forms/form.scss
index c385956..9ee8253 100644
--- a/src/atoms/Forms/form.scss
+++ b/src/atoms/Forms/form.scss
@@ -120,9 +120,7 @@
     white-space: nowrap;
   }
 
-  .input-component {
-    width: 300px;
-  }
+  
 
   .table-cell {
     .input-component {
diff --git a/src/atoms/Forms/index.tsx b/src/atoms/Forms/index.tsx
index e26adbd..fd4d985 100644
--- a/src/atoms/Forms/index.tsx
+++ b/src/atoms/Forms/index.tsx
@@ -724,6 +724,8 @@ export default class GenericForm<
 		throw new Error(
 			'GenericForm has no render method. You need to extend from GenericForm to create a form.',
 		);
+
+		return <div />;
 	}
 }
 
diff --git a/src/atoms/Input/index.tsx b/src/atoms/Input/index.tsx
index af2d0fe..e01f7e2 100644
--- a/src/atoms/Input/index.tsx
+++ b/src/atoms/Input/index.tsx
@@ -6,6 +6,8 @@ import { Event } from 'tools/types';
 
 import './input.scss';
 
+const KEY_ENTER = 13;
+
 export interface IInputProps {
 	autoComplete?: string; // HTML5 Property
 	autoCompleteList?: boolean;
@@ -137,6 +139,10 @@ export default class Input extends Component<IInputProps, State> {
 	private onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
 		const key = e.keyCode || e.charCode;
 
+		if (key === KEY_ENTER) {
+			e.preventDefault();
+		}
+
 		if (this.props.onKeyDown) {
 			this.props.onKeyDown({
 				name: this.props.name,
@@ -211,12 +217,11 @@ export default class Input extends Component<IInputProps, State> {
 
 	public componentDidUpdate(prevProps, prevState) {
 		const { value } = this.props;
-		if (
-			(value || value === 0) &&
-			prevProps.value !== value &&
-			(typeof value === 'number' || value.length > 0)
-		) {
-			this.setState({ value, isEmpty: false });
+		if (value !== undefined && value !== null && prevProps.value !== value) {
+			this.setState({
+				isEmpty: this.props.type !== 'number' && (value as string).length < 1,
+				value,
+			});
 		}
 	}
 
@@ -319,4 +324,4 @@ export default class Input extends Component<IInputProps, State> {
 			</div>
 		);
 	}
-}
+}
\ No newline at end of file
diff --git a/src/atoms/Select/index.tsx b/src/atoms/Select/index.tsx
index 253dfee..12d24b4 100644
--- a/src/atoms/Select/index.tsx
+++ b/src/atoms/Select/index.tsx
@@ -7,6 +7,7 @@ import { Event } from 'tools/types';
 import './select.scss';
 
 interface ISelectProps<T> {
+	className?: string;
 	disabled?: boolean;
 	isMandatory?: boolean;
 	label?: string;
@@ -88,7 +89,7 @@ export default class Select<T extends string | number> extends React.Component<
 
 	public render() {
 		return (
-			<div className="select">
+			<div className={`select ${this.props.className || ''}`}>
 				{this.props.label && (
 					<label>{`${this.props.label}${this.props.isMandatory ? ' *' : ''}`}</label>
 				)}
diff --git a/src/atoms/Select/select.scss b/src/atoms/Select/select.scss
index 8012228..da61a9a 100644
--- a/src/atoms/Select/select.scss
+++ b/src/atoms/Select/select.scss
@@ -1,67 +1,75 @@
 .select {
-  position: relative;
-  user-select: none;
+	position: relative;
+	user-select: none;
 
-  &-clickable-view {
-    cursor: pointer;
-    padding: 7px 12px;
-    padding-right: 40px;
-    border: 1px solid var(--input-border-color);
-    border-radius: 2px;
-    box-sizing: border-box;
-    position: relative;
+	svg {
+		.internal-path {
+			fill: white;
+		}
+	}
 
-    &.with-dropdown {
-      border-radius: 2px 2px 0 0;
-    }
+	&-clickable-view {
+		cursor: pointer;
+		padding: 7px 12px;
+		padding-right: 40px;
+		border: 2px solid #f0f0f0;
+		border-top: 0px;
+		border-left: 0px;
+		border-right: 0px;
+		box-sizing: border-box;
+		position: relative;
 
-    &:focus {
-      outline-color: var(--main-color);
-    }
+		&.with-dropdown {
+			border-radius: 2px 2px 0 0;
+		}
 
-    .svg-icon {
-      position: absolute;
-      right: 8px;
-      margin: 0;
-      width: 16px;
-      height: 16px;
-      top: 6px;
-    }
-  }
+		&:focus {
+			outline-color: var(--main-color);
+		}
 
-  @keyframes selectDropdownAppear {
-    0% {
-      opacity: 0;
-    }
+		.svg-icon {
+			position: absolute;
+			right: 8px;
+			margin: 0;
+			width: 16px;
+			height: 16px;
+			top: 6px;
+		}
+	}
 
-    100% {
-      opacity: 1;
-    }
-  }
+	@keyframes selectDropdownAppear {
+		0% {
+			opacity: 0;
+		}
 
-  .select-dropdown {
-    position: absolute;
-    width: 100%;
-    border-radius: 0 0 2px 2px;
-    z-index: 10;
-    max-height: 0;
-    animation: selectDropdownAppear 0.25s ease-in-out forwards;
+		100% {
+			opacity: 1;
+		}
+	}
 
-    .option {
-      padding: 8px;
-      width: 100%;
-      box-sizing: border-box;
-      background-color: var(--select-option-background-color);
-      cursor: pointer;
-      transition: var(--t-fastest-ease-in-out);
+	.select-dropdown {
+		position: absolute;
+		width: 100%;
+		border-radius: 0 0 2px 2px;
+		z-index: 10;
+		max-height: 0;
+		animation: selectDropdownAppear 0.25s ease-in-out forwards;
 
-      &:hover {
-        background-color: var(--select-option-hover-background-color);
-      }
+		.option {
+			padding: 8px;
+			width: 100%;
+			box-sizing: border-box;
+			background-color: #2f2429;
+			cursor: pointer;
+			transition: all 1s ease;
 
-      &:last-child {
-        border-radius: 0 0 2px 2px;
-      }
-    }
-  }
+			&:hover {
+				background-color: #2f2429;
+			}
+
+			&:last-child {
+				border-radius: 0 0 2px 2px;
+			}
+		}
+	}
 }
diff --git a/src/atoms/TextArea/index.tsx b/src/atoms/TextArea/index.tsx
index bb654b6..0367cbb 100644
--- a/src/atoms/TextArea/index.tsx
+++ b/src/atoms/TextArea/index.tsx
@@ -1,6 +1,6 @@
 'use strict';
 
-import React, { CSSProperties, Component } from 'react';
+import React, { CSSProperties, Component, useRef } from 'react';
 
 import { Event } from 'tools/types';
 
@@ -8,6 +8,8 @@ import './textarea.scss';
 
 export interface ITextAreaProps {
 	className?: string;
+	label?: string;
+	focus?: boolean;
 	name: string;
 	placeholder?: string;
 	readOnly?: boolean;
@@ -15,13 +17,31 @@ export interface ITextAreaProps {
 	style?: CSSProperties;
 	value?: string;
 
-	textAreaRef?(e: HTMLTextAreaElement): void;
 	onChange?(e: Event): void;
 	onSelect?(e: Event<{ start: number; end: number }>): void;
 }
 
 export default (props: ITextAreaProps) => {
-	const { className, value, onChange, onSelect, textAreaRef, ...attributes } = props;
+	const {className, label, value, onChange, onSelect, ...attributes } = props;
+	let nameDiv;
+
+	const textAreaRef = useRef(null);
+
+	const onLabelClick = () => {
+		const textArea: any = textAreaRef.current;
+
+		if (textArea) {
+			textArea.focus();
+		}
+	};
+
+	if (label) {
+		nameDiv = (
+			<label onClick={onLabelClick} htmlFor={props.name}>
+				{`${label}`}
+			</label>
+		);
+	}
 
 	const internalOnChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
 		if (props.onChange) {
@@ -42,13 +62,17 @@ export default (props: ITextAreaProps) => {
 	};
 
 	return (
-		<textarea
-			ref={props.textAreaRef}
-			value={value || ''}
-			className={`textarea ${className}`}
-			onChange={internalOnChange}
-			onSelect={internalOnSelect}
-			{...attributes}
-		/>
+		<div
+			className={`input-component ${className || ''}`}>
+			{label && nameDiv}
+			<textarea
+				ref={textAreaRef}
+				value={value || ''}
+				className={`textarea ${className}`}
+				onChange={internalOnChange}
+				onSelect={internalOnSelect}
+				{...attributes}
+			/>
+		</div>
 	);
-};
+};
\ No newline at end of file
diff --git a/src/atoms/TextArea/textarea.scss b/src/atoms/TextArea/textarea.scss
index 3404f26..fbeb388 100644
--- a/src/atoms/TextArea/textarea.scss
+++ b/src/atoms/TextArea/textarea.scss
@@ -1,11 +1,12 @@
 .textarea {
   border-radius: 8px;
   border: none;
-  background-color: var(--input-background-color);
-  border: 1px solid var(--input-border-color);
-  color: var(--input-font-color);
+  color: white;
   border-radius: 2px;
   font-family: 'Roboto';
   padding: 7px 12px;
   box-sizing: border-box;
+  border: solid 2px #f0f0f0;
+  background-color: rgba(0, 0, 0, 0.5);
+
 }
diff --git a/src/components/LeftBar/LeftBar.scss b/src/components/LeftBar/LeftBar.scss
index 2929f8d..e032c07 100644
--- a/src/components/LeftBar/LeftBar.scss
+++ b/src/components/LeftBar/LeftBar.scss
@@ -1,7 +1,7 @@
 .left-bar-container {
+	display:flex;
 	.left-bar {
-		width: 399px;
-		height: 1945px;
+		width: 400px;
 		border-radius: 2px;
 		background-color: rgba(0, 0, 0, 0.15);
 		z-index: 3;
@@ -176,3 +176,9 @@
 		background-color: white;
 	}
 }
+
+@media (max-width:1025px) {
+	.left-bar-container {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/src/components/SpeakerBlock/SpeakerBlock.scss b/src/components/SpeakerBlock/SpeakerBlock.scss
new file mode 100644
index 0000000..c389093
--- /dev/null
+++ b/src/components/SpeakerBlock/SpeakerBlock.scss
@@ -0,0 +1,141 @@
+.speaker-add {
+	.speaker,
+	.logo {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 5.4%;
+	}
+
+	.speaker-block {
+		width: 100%;
+	}
+
+	.input-website-speaker,
+	.input-name-user,
+	.input-identity {
+		input {
+			border-color: #f0f0f0;
+			font-size: 24px;
+			border-width: 2px;
+			border-top: 0px;
+			border-left: 0px;
+			border-right: 0px;
+			background: transparent;
+			margin-top: 0.7%;
+		}
+	}
+	.input-website-speaker,
+	.input-name-user {
+		margin-top: 1.9%;
+	}
+
+	.preview-picture-speaker-block {
+		margin-left: 2.2%;
+		flex-shrink: 0;
+	}
+
+	.preview-picture-text {
+		font-family: Roboto;
+		font-size: 12px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.15px;
+		color: #ffffff;
+	}
+
+	.zone-of-preview-picture {
+		height: 300px;
+		width: 300px;
+		padding: 16px;
+		background-color: rgba(0, 0, 0, 0.7);
+		margin-top: 0.6%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.preview-speaker {
+		width: 100%;
+		height: 100%;
+		border-radius: 100%;
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center center;
+
+		transition: all 0.25s ease-in-out;
+
+		&:hover {
+			transform: scale(1.05);
+		}
+	}
+
+	.news {
+		width: 100%;
+	}
+
+	.input-website,
+	.input-logo-speaker,
+	.input-job,
+	.input-logo-url,
+	.input-company {
+		input {
+			border-color: #f0f0f0;
+			font-size: 24px;
+			border-width: 2px;
+			border-top: 0px;
+			border-left: 0px;
+			border-right: 0px;
+			background: transparent;
+			margin-top: 0.7%;
+		}
+	}
+	.input-logo-speaker,
+	.input-website,
+	.input-job,
+	.input-logo-url {
+		margin-top: 1.9%;
+	}
+
+	.preview-logo-block {
+		margin-left: 2.2%;
+		width: 100%;
+	}
+
+	.preview-logo-text {
+		font-family: Roboto;
+		font-size: 12px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.15px;
+		color: #ffffff;
+	}
+
+	.zone-of-preview {
+		height: 100%;
+		width: 100%;
+		position: relative;
+		background-color: rgba(0, 0, 0, 0.7);
+		margin-top: 0.6%;
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+
+	.zone-of-preview img {
+		position: absolute;
+		object-fit: cover;
+	}
+
+	.preview-logo {
+		width: 70%;
+		height: 70%;
+		padding: 20px;
+		background-position: center;
+		background-size: 100%;
+		background-repeat: no-repeat;
+		transition: all 1s ease;
+	}
+}
diff --git a/src/components/SpeakerBlock/index.tsx b/src/components/SpeakerBlock/index.tsx
new file mode 100644
index 0000000..6234d01
--- /dev/null
+++ b/src/components/SpeakerBlock/index.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import Form from 'atoms/Forms';
+import Input from 'atoms/Input';
+
+import './SpeakerBlock.scss';
+
+class SpeakerBlock extends Form<any> {
+	public getInitialState() {
+		return {
+			formData: {
+				logoSpeaker: 'https://',
+				nameUser: '@',
+				urlLogoAbsolute: 'https://',
+				websiteSpeaker: 'https://',
+			},
+		};
+	}
+	public render() {
+		return this.getForm(
+			<>
+				<div className="speaker-add">
+					<div className="speaker">
+						<div className="speaker-block">
+							<div className="identity-speaker">
+								<Input
+									name="identity"
+									label="Nom et prénom du speaker·ine *"
+									className="input-identity"
+									value={this.state.formData.identity}
+									onChange={this.onValueChanged}
+									type="text"
+									required={true}
+								/>
+							</div>
+							<div className="name-user-speaker">
+								<Input
+									name="nameUser"
+									label="Nom d’utilisateur Twitter du speaker·ine"
+									className="input-name-user"
+									value={this.state.formData.nameUser}
+									onChange={this.onValueChanged}
+									type="text"
+									required={false}
+								/>
+							</div>
+							<div className="website-speaker">
+								<Input
+									name="websiteSpeaker"
+									label="Site web du speaker·ine"
+									className="input-website-speaker"
+									value={this.state.formData.websiteSpeaker}
+									onChange={this.onValueChanged}
+									type="text"
+									required={false}
+								/>
+							</div>
+							<div className="logo-speaker">
+								<Input
+									name="logoSpeaker"
+									label="URL absolue du logo du speaker·ine"
+									className="input-logo-speaker"
+									value={this.state.formData.logoSpeaker}
+									onChange={this.onValueChanged}
+									type="text"
+									required={false}
+								/>
+							</div>
+						</div>
+						<div className="preview-picture-speaker-block">
+							<div className="preview-picture-text">
+								Preview de l’image du speaker
+							</div>
+							<div className="zone-of-preview-picture">
+								<div
+									style={{
+										backgroundImage: `url(${this.state.formData.logoSpeaker})`,
+									}}
+									className="preview-speaker"
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div className="logo">
+						<div className="news">
+							<div className="company-speaker">
+								<Input
+									name="company"
+									label="Nom de l’entreprise du speaker·ine *"
+									className="input-company"
+									value={this.state.formData.company}
+									onChange={this.onValueChanged}
+									type="text"
+									required={true}
+								/>
+							</div>
+							<div className="job-speaker">
+								<Input
+									name="job"
+									label="Poste du speaker·ine dans l’entreprise"
+									className="input-job"
+									value={this.state.formData.job}
+									onChange={this.onValueChanged}
+									type="text"
+									required={false}
+								/>
+							</div>
+							<div className="website-company">
+								<Input
+									name="website"
+									label="Site de l’entreprise"
+									className="input-website"
+									value={this.state.formData.website}
+									onChange={this.onValueChanged}
+									type="text"
+									required={false}
+								/>
+							</div>
+							<div className="logo-url">
+								<Input
+									name="urlLogoAbsolute"
+									label="URL absolue du logo de l'entreprise"
+									className="input-logo-url"
+									value={this.state.formData.urlLogoAbsolute}
+									onChange={this.onValueChanged}
+									type="text"
+									required={false}
+								/>
+							</div>
+						</div>
+						<div className="preview-logo-block">
+							<div className="preview-logo-text">Preview du logo</div>
+							<div className="zone-of-preview">
+								<div
+									className="preview-logo"
+									style={{
+										backgroundImage: `url(${this.state.formData.urlLogoAbsolute})`,
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</>,
+		);
+	}
+}
+
+export default SpeakerBlock;
diff --git a/src/components/TalkForm/TalkForm.scss b/src/components/TalkForm/TalkForm.scss
new file mode 100644
index 0000000..d8aa3e3
--- /dev/null
+++ b/src/components/TalkForm/TalkForm.scss
@@ -0,0 +1,253 @@
+.input-talk-name,
+.input-event-name {
+	input {
+		font-family: Roboto;
+		font-size: 36px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.46px;
+		border-image-slice: 1;
+	}
+}
+
+.input-event-name {
+	margin-top: 1.9%;
+}
+
+.date-and-place {
+	width: 100%;
+	display: flex;
+	margin-top: 2.1%;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+
+.start,
+.end,
+.places {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: nowrap;
+	width: 33%;
+}
+
+.input-start-date,
+.input-end-date,
+.input-address {
+	input {
+		font-family: Roboto;
+		font-size: 24px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.3px;
+		color: #ffffff;
+	}
+}
+
+.from,
+.to,
+.in {
+	font-family: Roboto;
+	font-size: 24px;
+	font-weight: normal;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: normal;
+	letter-spacing: 0.3px;
+	color: #ffffff;
+	margin-right: 2%;
+}
+
+.textarea-long-description {
+	label {
+		margin-top: 2.7%;
+	}
+	textarea {
+		width: 100%;
+		font-size: 24px;
+		margin-top: 0.5%;
+		color: white;
+	}
+}
+
+.category {
+	margin-top: 3.3%;
+	display: flex;
+	justify-content: space-between;
+}
+.categories {
+	width: 50%;
+}
+
+.input-category {
+	input {
+		width: 100%;
+		border-color: #f0f0f0;
+		font-size: 24px;
+		border-width: 2px;
+		border-top: 0px;
+		border-left: 0px;
+		border-right: 0px;
+		background: transparent;
+		margin-top: 0.5%;
+	}
+}
+
+.categories-topics {
+	width: 50%;
+}
+
+.topics-add {
+	margin: 2.3%;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.topics-add-new {
+	height: 27px;
+	align-items: center;
+	border-radius: 13.5px;
+	display: flex;
+	justify-content: space-between;
+	padding-right: 2%;
+	margin: 0.5%;
+	color: #ffffff;
+}
+.delete-block {
+	margin-left: 2px;
+	width: 23px;
+	height: 23px;
+	border-radius: 13.5px;
+	background-color: rgba(0, 0, 0, 0.3);
+	transition: all 0.25s ease-in-out;
+
+	&:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+	}
+}
+.cross {
+	width: 15px;
+	height: 15px;
+	margin: 5px auto;
+	border-radius: 50% 50%;
+
+	position: relative;
+	transform: scale(1.3);
+	&::before {
+		background: #ffffff;
+		position: absolute;
+		display: block;
+		content: '';
+		width: 70%;
+		height: 6%;
+		top: 47%;
+		left: 15%;
+		transform: rotate(45deg);
+	}
+	&::after {
+		background: #ffffff;
+		position: absolute;
+		display: block;
+		content: '';
+		width: 6%;
+		height: 70%;
+		left: 47%;
+		top: 15%;
+		transform: rotate(45deg);
+	}
+}
+
+.topics-add-new-text {
+	margin-left: 8px;
+	font-family: Roboto;
+	font-size: 14px;
+	font-weight: normal;
+	font-stretch: normal;
+	font-style: normal;
+	line-height: normal;
+	letter-spacing: 0.18px;
+	color: #ffffff;
+}
+
+.language-block {
+	margin-top: 1.9%;
+	width: 100%;
+}
+.select-language {
+	color: #f0f0f0;
+	background: transparent;
+	margin-top: 0.5%;
+	.select-clickable-view {
+		margin-top: 0.8%;
+	}
+	.option {
+		border-color: #f0f0f0;
+		border-width: 2px;
+		border-top: 0px;
+		border-left: 0px;
+		border-right: 0px;
+	}
+}
+
+.button-add {
+	margin-bottom: 5.6%;
+	width: 100%;
+	flex-wrap: wrap;
+	margin-top: 1.9%;
+}
+
+.add-speaker {
+	background-image: linear-gradient(97deg, #0b6f13, #0e5aeb);
+}
+
+.button-talk {
+	display: flex;
+	margin-bottom: 5.6%;
+	width: 100%;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	margin-top: 4.2%;
+}
+
+.save-talk,
+.submit-talk,
+.add-speaker {
+	padding-top: 2px;
+	padding-bottom: 2px;
+	padding-left: 30px;
+	padding-right: 30px;
+	border-radius: 39px;
+	justify-content: center;
+	display: flex;
+	font-family: Roboto;
+	font-size: 21px;
+	font-weight: bold;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: normal;
+	letter-spacing: 0.27px;
+	color: #f9f9f9;
+	align-items: center;
+	margin: 5px;
+
+	&:hover {
+		cursor: pointer;
+	}
+}
+.save-talk {
+	background-image: linear-gradient(97deg, #092057, #db802f);
+}
+
+.submit-talk {
+	background-image: linear-gradient(97deg, #72145f, #db802f);
+}
+
+.management-container {
+	display: none;
+}
diff --git a/src/components/TalkForm/index.tsx b/src/components/TalkForm/index.tsx
new file mode 100644
index 0000000..f67da5e
--- /dev/null
+++ b/src/components/TalkForm/index.tsx
@@ -0,0 +1,230 @@
+import React from 'react';
+
+import Button from 'atoms/Button';
+import Form from 'atoms/Forms';
+import Input from 'atoms/Input';
+import Select from 'atoms/Select';
+import TextArea from 'atoms/TextArea';
+import SpeakerBlock from 'components/SpeakerBlock';
+import { randomColor } from 'tools/color';
+
+import './TalkForm.scss';
+import { prependOnceListener } from 'cluster';
+
+const ENTER_KEY = 13;
+
+const speakerBlock = (props) => {
+	let button = <div />;
+	if (props.onDelete) {
+		button = (
+			<Button onClick={props.onDelete} className="button-remove">
+				Remove
+			</Button>
+		);
+	}
+	return (
+		<div style={{ color: 'white' }}>
+			<SpeakerBlock />
+			{button}
+		</div>
+	);
+};
+
+class TalkForm extends Form<any> {
+	private duplicateRender: any;
+	private createSpeakerBlock: any;
+
+	constructor(props: any) {
+		super(props);
+
+		this.duplicateRender = this.createDuplicateRenderFunction({
+			defaultValues: {},
+			id: 'speakers',
+			view: speakerBlock,
+			withAddButtons: false,
+			withDeleteButtons: false,
+			withOnDelete: true,
+		});
+
+		this.createSpeakerBlock = this.getAddElementFunctionForDuplicate('speakers');
+	}
+
+	private onTopicsCategoryChanged = (e) => {
+		if (e.value === ENTER_KEY) {
+			const newTopicCategory = [
+				...this.state.formData.topicsCategory,
+				this.state.formData.currentTopicCategory,
+			];
+			this.onMultipleValuesChanged({
+				currentTopicCategory: '',
+				topicsCategory: newTopicCategory,
+			});
+		}
+	};
+
+	private onTopicsCategoryDelete = (e) => {
+		const array = [...this.state.formData.topicsCategory];
+		const index = parseInt(e.currentTarget.dataset.id, 2);
+		array.splice(index, 1);
+		this.onValueChanged({
+			name: 'topicsCategory',
+			value: array,
+		});
+	};
+
+	public getInitialState() {
+		return {
+			formData: {
+				currentTopicCategory: '',
+				logoSpeaker: 'https://',
+				nameUser: '@',
+				topicsCategory: [],
+				urlLogoAbsolute: 'https://',
+				websiteSpeaker: 'https://',
+			},
+		};
+	}
+	public render() {
+		return this.getForm(
+			<>
+				<Input
+					name="talkName"
+					label="Nom du talk *"
+					className="input-talk-name"
+					value={this.state.formData.talkName}
+					onChange={this.onValueChanged}
+					type="text"
+					required={true}
+				/>
+
+				<Input
+					name="eventName"
+					label="Événement du talk *"
+					className="input-event-name"
+					value={this.state.formData.eventName}
+					onChange={this.onValueChanged}
+					type="text"
+					required={true}
+				/>
+
+				<div className="date-and-place">
+					<div className="start">
+						<div className="from">Du</div>
+
+						<Input
+							name="startDate"
+							label="Debut du talk *"
+							className="input-start-date"
+							value={this.state.formData.startDate}
+							onChange={this.onValueChanged}
+							type="datetime-local"
+							required={true}
+						/>
+					</div>
+					<div className="end">
+						<div className="to">au</div>
+
+						<Input
+							name="endDate"
+							label="Fin du talk *"
+							className="input-end-date"
+							value={this.state.formData.endDate}
+							onChange={this.onValueChanged}
+							type="datetime-local"
+							required={true}
+						/>
+					</div>
+					<div className="places">
+						<div className="in">à</div>
+
+						<Input
+							name="address"
+							label="Lieu du talk *"
+							className="input-address"
+							value={this.state.formData.address}
+							onChange={this.onValueChanged}
+							type="text"
+							required={true}
+						/>
+					</div>
+				</div>
+				<div className="description">
+					<TextArea
+						name="longDescription"
+						label="Description complète *"
+						className="textarea-long-description"
+						value={this.state.formData.longDescription}
+						onChange={this.onValueChanged}
+					/>
+				</div>
+				<div className="category">
+					<div className="categories">
+						<Input
+							name="currentTopicCategory"
+							label="Catégories pour retrouver le talk"
+							className="input-category"
+							value={this.state.formData.currentTopicCategory}
+							onChange={this.onValueChanged}
+							onKeyDown={this.onTopicsCategoryChanged}
+							type="text"
+							required={false}
+						/>
+					</div>
+					<div className="categories-topics">
+						<div className="topics-add">
+							{this.state.formData.topicsCategory.map((newTopicCategory, i) => (
+								<div
+									key={i}
+									className="topics-add-new"
+									style={{
+										backgroundColor: randomColor(newTopicCategory),
+									}}>
+									<div
+										className="delete-block"
+										data-id={i}
+										onClick={this.onTopicsCategoryDelete}>
+										<div className="cross" />
+									</div>
+									<p className="topics-add-new-text">{newTopicCategory}</p>
+								</div>
+							))}
+						</div>
+					</div>
+				</div>
+				<div className="language-block">
+					<Select
+						name="language"
+						label="Langue"
+						className="select-language"
+						value={this.state.formData.language}
+						onChange={this.onValueChanged}
+						placeholder="Selectionner la langue"
+						options={[
+							{ key: 'Anglais', value: 'Anglais' },
+							{ key: 'Espagnol', value: 'Espagnol' },
+							{ key: 'Français', value: 'Français' },
+						]}
+					/>
+				</div>
+				{this.duplicateRender()}
+				<div className="button-add">
+					<div className="add-speaker-button">
+						<Button className="add-speaker" onClick={this.createSpeakerBlock}>
+							Ajouter un·e speaker·ine
+						</Button>
+					</div>
+				</div>
+				<div className="buttons-container">
+					<div className="left-button">
+						<Button className="save-talk">Sauvegarder le talk</Button>
+					</div>
+					<div className="right-button">
+						<Button className="submit-talk">Soumettre le talk</Button>
+					</div>
+				</div>
+			</>,
+		);
+	}
+}
+
+export default TalkForm;
diff --git a/src/containers/App.scss b/src/containers/App.scss
index 29e8195..cdf6715 100644
--- a/src/containers/App.scss
+++ b/src/containers/App.scss
@@ -15,5 +15,5 @@
 }
 body {
 	z-index: 2;
-	overflow: hidden;
+	overflow: auto;
 }
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index 2cc4a17..cf70359 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -5,10 +5,11 @@ import 'moment/locale/fr';
 
 import Header from 'components/Header';
 import SearchPage from 'pages/Search';
-import ManagementPage from 'pages/Management'
+import ManagementPage from 'pages/Management';
 
 import './App.scss';
 import FormOne from 'pages/FormOne';
+import TalkCreationPage from 'pages/TalkCreationPage';
 
 moment.locale('fr');
 
@@ -17,6 +18,7 @@ const App: React.FC = () => (
 		<Router>
 			<Route component={Header} />
 			<Route path="/" exact={true} component={SearchPage} />
+			<Route path="/management/talk" component={TalkCreationPage} />
 			<Route path="/management/" component={ManagementPage} />
 			<Route path="/FormOne/" component={FormOne} />
 		</Router>
diff --git a/src/pages/FormOne/FormOne.scss b/src/pages/FormOne/FormOne.scss
index 4be0529..3d360f7 100644
--- a/src/pages/FormOne/FormOne.scss
+++ b/src/pages/FormOne/FormOne.scss
@@ -45,7 +45,7 @@
 		display: flex;
 		margin-top: 2.1%;
 		justify-content: space-between;
-		flex-wrap: wrap;
+		align-items: flex-end;
 	}
 
 	.begin,
@@ -87,6 +87,9 @@
 		margin-right: 2%;
 	}
 
+	.to, .in {
+		margin-left: 2%;
+	}
 	.adress-inputs {
 		margin-right: 32px;
 		width: 100%;
@@ -170,6 +173,7 @@
 		margin-top: 3.3%;
 		display: flex;
 		justify-content: space-between;
+		align-items: flex-end;
 	}
 
 	.color-primary-secondary {
@@ -177,6 +181,7 @@
 		justify-content: space-between;
 		margin-right: 2.2%;
 		width: 100%;
+		
 	}
 
 	.color-primary {
@@ -208,7 +213,7 @@
 			border-color: #189e37;
 			font-size: 24px;
 			border-width: 2px;
-			border-top: 0px;
+			border-top: 2px;
 			border-left: 0px;
 			border-right: 0px;
 			background: transparent;
@@ -233,9 +238,9 @@
 	}
 
 	.gradient {
-		height: 35px;
+		height: 44px;
 		background-image: linear-gradient(85deg, #c7cc18, #e43232 100%);
-		margin-top: 1.4%;
+		margin-top: 1.6%;
 	}
 
 	.logo {
diff --git a/src/pages/FormOne/index.tsx b/src/pages/FormOne/index.tsx
index 399341a..399e243 100644
--- a/src/pages/FormOne/index.tsx
+++ b/src/pages/FormOne/index.tsx
@@ -23,8 +23,8 @@ class FormOne extends React.Component<any> {
 							required={true}
 						/>
 						<div className="dated-and-place">
-							<div className="begin">
 								<div className="from">Du</div>
+							<div className="begin">
 
 								<Input
 									name="begin-dated"
@@ -34,8 +34,8 @@ class FormOne extends React.Component<any> {
 									required={true}
 								/>
 							</div>
-							<div className="end">
 								<div className="to">au</div>
+							<div className="end">
 
 								<Input
 									name="end-dated"
@@ -45,8 +45,8 @@ class FormOne extends React.Component<any> {
 									required={true}
 								/>
 							</div>
-							<div className="places">
 								<div className="in">à</div>
+							<div className="places">
 
 								<Input
 									name="places-name"
diff --git a/src/pages/FormTwo/FormTwo.scss b/src/pages/FormTwo/FormTwo.scss
new file mode 100644
index 0000000..b32a83b
--- /dev/null
+++ b/src/pages/FormTwo/FormTwo.scss
@@ -0,0 +1,425 @@
+.talk-container {
+	display: flex;
+	z-index: 3;
+	height: 100%;
+	flex-wrap: nowrap;
+
+	.logo-talkien {
+		right: 1150px;
+		top: -300px;
+		width: 80%;
+		object-fit: contain;
+		opacity: 0.1;
+		position: absolute;
+		z-index: -1;
+	}
+
+	.right-block {
+		width: 100%;
+		height: 100%;
+		text-align: left;
+		overflow: auto;
+		z-index: 3;
+	}
+
+	.block-talk {
+		margin: 4.5% 4.5%;
+		height: 100%;
+	}
+
+	.input-talk-name,
+	.input-event-name {
+		input {
+			font-family: Roboto;
+			font-size: 36px;
+			font-weight: normal;
+			font-style: normal;
+			font-stretch: normal;
+			line-height: normal;
+			letter-spacing: 0.46px;
+			border-image-slice: 1;
+		}
+	}
+
+	.input-event-name {
+		margin-top: 1.9%;
+	}
+
+	.date-and-place {
+		width: 100%;
+		display: flex;
+		margin-top: 2.1%;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+
+	.start,
+	.end,
+	.places {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: nowrap;
+		width: 33%;
+	}
+
+	.input-start-date,
+	.input-end-date,
+	.input-address {
+		input {
+			font-family: Roboto;
+			font-size: 24px;
+			font-weight: normal;
+			font-style: normal;
+			font-stretch: normal;
+			line-height: normal;
+			letter-spacing: 0.3px;
+			color: #ffffff;
+		}
+	}
+
+	.from,
+	.to,
+	.in {
+		font-family: Roboto;
+		font-size: 24px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.3px;
+		color: #ffffff;
+		margin-right: 2%;
+	}
+
+	.textarea-long-description {
+		label {
+			margin-top: 2.7%;
+		}
+		textarea {
+			width: 100%;
+			font-size: 24px;
+			margin-top: 0.5%;
+			color: white;
+		}
+	}
+
+	.category {
+		margin-top: 3.3%;
+		display: flex;
+		justify-content: space-between;
+	}
+	.categories {
+		width: 50%;
+	}
+
+	.input-category {
+		input {
+			width: 100%;
+			border-color: #f0f0f0;
+			font-size: 24px;
+			border-width: 2px;
+			border-top: 0px;
+			border-left: 0px;
+			border-right: 0px;
+			background: transparent;
+			margin-top: 0.5%;
+		}
+	}
+
+	.categories-topics {
+		width: 50%;
+	}
+
+	.topics-add {
+		margin: 2.3%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.topics-add-new {
+		height: 27px;
+		align-items: center;
+		border-radius: 13.5px;
+		display: flex;
+		justify-content: space-between;
+		padding-right: 2%;
+		margin: 0.5%;
+		color: #ffffff;
+	}
+	.delete-block {
+		margin-left: 2px;
+		width: 23px;
+		height: 23px;
+		border-radius: 13.5px;
+		background-color: rgba(0, 0, 0, 0.3);
+		transition: all 0.25s ease-in-out;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.1);
+			cursor: pointer;
+		}
+	}
+	.cross {
+		width: 15px;
+		height: 15px;
+		margin: 5px auto;
+		border-radius: 50% 50%;
+
+		position: relative;
+		transform: scale(1.3);
+		&::before {
+			background: #ffffff;
+			position: absolute;
+			display: block;
+			content: '';
+			width: 70%;
+			height: 6%;
+			top: 47%;
+			left: 15%;
+			transform: rotate(45deg);
+		}
+		&::after {
+			background: #ffffff;
+			position: absolute;
+			display: block;
+			content: '';
+			width: 6%;
+			height: 70%;
+			left: 47%;
+			top: 15%;
+			transform: rotate(45deg);
+		}
+	}
+
+	.topics-add-new-text {
+		margin-left: 8px;
+		font-family: Roboto;
+		font-size: 14px;
+		font-weight: normal;
+		font-stretch: normal;
+		font-style: normal;
+		line-height: normal;
+		letter-spacing: 0.18px;
+		color: #ffffff;
+	}
+
+	.language-block {
+		margin-top: 1.9%;
+		width: 100%;
+	}
+	.select-language {
+		color: #f0f0f0;
+		background: transparent;
+		margin-top: 0.5%;
+		width: 50%;
+		.select-clickable-view {
+			margin-top: 0.8%;
+		}
+		.option {
+			border-color: #f0f0f0;
+			border-width: 2px;
+			border-top: 0px;
+			border-left: 0px;
+			border-right: 0px;
+		}
+	}
+	.speaker {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 5.4%;
+	}
+
+	.speaker-block {
+		width: 100%;
+	}
+
+	.input-website-speaker,
+	.input-name-user,
+	.input-identity {
+		input {
+			border-color: #f0f0f0;
+			font-size: 24px;
+			border-width: 2px;
+			border-top: 0px;
+			border-left: 0px;
+			border-right: 0px;
+			background: transparent;
+			margin-top: 0.7%;
+		}
+	}
+	.input-website-speaker,
+	.input-name-user {
+		margin-top: 1.9%;
+	}
+
+	.preview-picture-speaker-block {
+		margin-left: 2.2%;
+		flex-shrink: 0;
+	}
+
+	.preview-picture-text {
+		font-family: Roboto;
+		font-size: 12px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.15px;
+		color: #ffffff;
+	}
+
+	.zone-of-preview-picture {
+		height: 300px;
+		width: 300px;
+		padding: 16px;
+		background-color: rgba(0, 0, 0, 0.7);
+		margin-top: 0.6%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.preview-speaker {
+		width: 100%;
+		height: 100%;
+		border-radius: 100%;
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center center;
+
+		transition: all 0.25s ease-in-out;
+
+		&:hover {
+			transform: scale(1.05);
+		}
+	}
+
+	.logo {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 5.4%;
+	}
+
+	.news {
+		width: 100%;
+	}
+
+	.input-website,
+	.input-logo-speaker,
+	.input-job,
+	.input-logo-url,
+	.input-company {
+		input {
+			border-color: #f0f0f0;
+			font-size: 24px;
+			border-width: 2px;
+			border-top: 0px;
+			border-left: 0px;
+			border-right: 0px;
+			background: transparent;
+			margin-top: 0.7%;
+		}
+	}
+	.input-logo-speaker,
+	.input-website,
+	.input-job,
+	.input-logo-url {
+		margin-top: 1.9%;
+	}
+
+	.preview-logo-block {
+		margin-left: 2.2%;
+		width: 100%;
+	}
+
+	.preview-logo-text {
+		font-family: Roboto;
+		font-size: 12px;
+		font-weight: normal;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.15px;
+		color: #ffffff;
+	}
+
+	.zone-of-preview {
+		height: 100%;
+		width: 100%;
+		position: relative;
+		background-color: rgba(0, 0, 0, 0.7);
+		margin-top: 0.6%;
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+
+	.zone-of-preview img {
+		position: absolute;
+		object-fit: cover;
+	}
+
+	.preview-logo {
+		padding: 8px;
+		max-width: 90%;
+		max-height: 90%;
+		transition: all 1s ease;
+
+		&:hover {
+			cursor: pointer;
+			transform: scale(0.7);
+		}
+	}
+
+	.button-add {
+		margin-bottom: 5.6%;
+		width: 100%;
+		flex-wrap: wrap;
+		margin-top: 1.9%;
+	}
+
+	.add-speaker {
+		background-image: linear-gradient(97deg, #0b6f13, #0e5aeb);
+	}
+
+	.button-talk {
+		display: flex;
+		margin-bottom: 5.6%;
+		width: 100%;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		margin-top: 3.8%;
+	}
+
+	.save-talk,
+	.submit-talk,
+	.add-speaker {
+		padding-top: 2px;
+		padding-bottom: 2px;
+		padding-left: 30px;
+		padding-right: 30px;
+		border-radius: 39px;
+		justify-content: center;
+		display: flex;
+		font-family: Roboto;
+		font-size: 21px;
+		font-weight: bold;
+		font-style: normal;
+		font-stretch: normal;
+		line-height: normal;
+		letter-spacing: 0.27px;
+		color: #f9f9f9;
+		align-items: center;
+		margin: 5px;
+
+		&:hover {
+			cursor: pointer;
+		}
+	}
+	.save-talk {
+		background-image: linear-gradient(97deg, #092057, #db802f);
+	}
+	.submit-talk {
+		background-image: linear-gradient(97deg, #72145f, #db802f);
+	}
+}
diff --git a/src/pages/FormTwo/index.tsx b/src/pages/FormTwo/index.tsx
new file mode 100644
index 0000000..4583d59
--- /dev/null
+++ b/src/pages/FormTwo/index.tsx
@@ -0,0 +1,326 @@
+import React from 'react';
+
+import logo from 'assets/LogoTalkien.svg';
+import Form from 'atoms/Forms';
+import Input from 'atoms/Input';
+import Select from 'atoms/Select';
+import TextArea from 'atoms/TextArea';
+import { Event } from 'tools/types';
+import { randomColor } from 'tools/color';
+
+import './FormTwo.scss';
+import LeftBar from 'components/LeftBar';
+
+const ENTER_KEY = 13;
+
+class FormTwo extends Form<any> {
+	constructor(props: any) {
+		super(props);
+	}
+
+	private onTopicsCategoryChanged = (e) => {
+		if (e.value === ENTER_KEY) {
+			const newTopicCategory = [
+				...this.state.formData.topicsCategory,
+				this.state.formData.currentTopicCategory,
+			];
+			this.onMultipleValuesChanged({
+				topicsCategory: newTopicCategory,
+				currentTopicCategory: '',
+			});
+		}
+	};
+
+	private onTopicsCategoryDelete = (e) => {
+		const array = [...this.state.formData.topicsCategory];
+		const index = parseInt(e.currentTarget.dataset.id, 16);
+		array.splice(index, 1);
+		this.onValueChanged({
+			name: 'topicsCategory',
+			value: array,
+		});
+	};
+
+	public getInitialState() {
+		return {
+			formData: {
+				topicsCategory: [],
+				currentTopicCategory: '',
+				nameUser: '@',
+				websiteSpeaker: 'https://',
+				urllogoabsolute: 'https://',
+				logoSpeaker: 'https://',
+			},
+		};
+	}
+	public render() {
+		console.log(this.state.formData);
+		return (
+			<div className="talk-container">
+				<LeftBar />
+				<object data={logo} className="logo-talkien" />
+				<div className="right-block">
+					<div className="block-talk">
+						<Input
+							name="talkName"
+							label="Nom du talk *"
+							className="input-talk-name"
+							value={this.state.formData.talkName}
+							onChange={this.onValueChanged}
+							type="text"
+							required={true}
+						/>
+
+						<Input
+							name="eventName"
+							label="Événement du talk *"
+							className="input-event-name"
+							value={this.state.formData.eventName}
+							onChange={this.onValueChanged}
+							type="text"
+							required={true}
+						/>
+
+						<div className="date-and-place">
+							<div className="start">
+								<div className="from">Du</div>
+
+								<Input
+									name="startDate"
+									label="Debut du talk *"
+									className="input-start-date"
+									value={this.state.formData.startDate}
+									onChange={this.onValueChanged}
+									type="text"
+									required={true}
+								/>
+							</div>
+							<div className="end">
+								<div className="to">au</div>
+
+								<Input
+									name="endDate"
+									label="Fin du talk *"
+									className="input-end-date"
+									value={this.state.formData.endDate}
+									onChange={this.onValueChanged}
+									type="text"
+									required={true}
+								/>
+							</div>
+							<div className="places">
+								<div className="in">à</div>
+
+								<Input
+									name="address"
+									label="Lieu du talk *"
+									className="input-address"
+									value={this.state.formData.address}
+									onChange={this.onValueChanged}
+									type="text"
+									required={true}
+								/>
+							</div>
+						</div>
+						<div className="description">
+							<TextArea
+								name="longDescription"
+								label="Description complète *"
+								className="textarea-long-description"
+								value={this.state.formData.longDescription}
+								onChange={this.onValueChanged}
+							/>
+						</div>
+						<div className="category">
+							<div className="categories">
+								<Input
+									name="currentTopicCategory"
+									label="Catégories pour retrouver le talk"
+									className="input-category"
+									value={this.state.formData.currentTopicCategory}
+									onChange={this.onValueChanged}
+									onKeyDown={this.onTopicsCategoryChanged}
+									type="text"
+									required={false}
+								/>
+							</div>
+							<div className="categories-topics">
+								<div className="topics-add">
+									{this.state.formData.topicsCategory.map(
+										(newTopicCategory, i) => (
+											<div
+												key={i}
+												className="topics-add-new"
+												style={{
+													backgroundColor: randomColor(newTopicCategory),
+												}}>
+												<div
+													className="delete-block"
+													data-id={i}
+													onClick={this.onTopicsCategoryDelete}>
+													<div className="cross" />
+												</div>
+												<p className="topics-add-new-text">
+													{newTopicCategory}
+												</p>
+											</div>
+										),
+									)}
+								</div>
+							</div>
+						</div>
+						<div className="language-block">
+							<Select
+								name="language"
+								label="Langue"
+								className="select-language"
+								value={this.state.formData.language}
+								onChange={this.onValueChanged}
+								placeholder="Selectionner la langue"
+								options={[
+									{ key: 'Anglais', value: 'Anglais' },
+									{ key: 'Espagnol', value: 'Espagnol' },
+									{ key: 'Français', value: 'Français' },
+								]}
+							/>
+						</div>
+						<div className="speaker">
+							<div className="speaker-block">
+								<div className="identity-speaker">
+									<Input
+										name="identity"
+										label="Nom et prénom du speaker·ine *"
+										className="input-identity"
+										value={this.state.formData.identity}
+										onChange={this.onValueChanged}
+										type="text"
+										required={true}
+									/>
+								</div>
+								<div className="name-user-speaker">
+									<Input
+										name="nameUser"
+										label="Nom d’utilisateur Twitter du speaker·ine"
+										className="input-name-user"
+										value={this.state.formData.nameUser}
+										onChange={this.onValueChanged}
+										type="text"
+										required={false}
+									/>
+								</div>
+								<div className="website-speaker">
+									<Input
+										name="websiteSpeaker"
+										label="Site web du speaker·ine"
+										className="input-website-speaker"
+										value={this.state.formData.websiteSpeaker}
+										onChange={this.onValueChanged}
+										type="text"
+										required={false}
+									/>
+								</div>
+								<div className="logo-speaker">
+									<Input
+										name="logoSpeaker"
+										label="URL absolue du logo du speaker·ine"
+										className="input-logo-speaker"
+										value={this.state.formData.logoSpeaker}
+										onChange={this.onValueChanged}
+										type="text"
+										required={false}
+									/>
+								</div>
+							</div>
+							<div className="preview-picture-speaker-block">
+								<div className="preview-picture-text">
+									Preview de l’image du speaker
+								</div>
+								<div className="zone-of-preview-picture">
+									<div
+										style={{
+											backgroundImage: `url(${this.state.formData.logoSpeaker})`,
+										}}
+										className="preview-speaker"
+									/>
+								</div>
+							</div>
+						</div>
+
+						<div className="logo">
+							<div className="news">
+								<div className="company-speaker">
+									<Input
+										name="company"
+										label="Nom de l’entreprise du speaker·ine *"
+										className="input-company"
+										value={this.state.formData.company}
+										onChange={this.onValueChanged}
+										type="text"
+										required={true}
+									/>
+								</div>
+								<div className="job-speaker">
+									<Input
+										name="job"
+										label="Poste du speaker·ine dans l’entreprise"
+										className="input-job"
+										value={this.state.formData.job}
+										onChange={this.onValueChanged}
+										type="text"
+										required={false}
+									/>
+								</div>
+								<div className="website-company">
+									<Input
+										name="website"
+										label="Site de l’entreprise"
+										className="input-website"
+										value={this.state.formData.website}
+										onChange={this.onValueChanged}
+										type="text"
+										required={false}
+									/>
+								</div>
+								<div className="logo-url">
+									<Input
+										name="urllogoabsolute"
+										label="URL absolue du logo de l'entreprise"
+										className="input-logo-url"
+										value={this.state.formData.urllogoabsolute}
+										onChange={this.onValueChanged}
+										type="text"
+										required={false}
+									/>
+								</div>
+							</div>
+							<div className="preview-logo-block">
+								<div className="preview-logo-text">Preview du logo</div>
+								<div className="zone-of-preview">
+									<img
+										src={this.state.formData.urllogoabsolute}
+										className="preview-logo"
+									/>
+								</div>
+							</div>
+						</div>
+						<div className="button-add">
+							<div className="add-speaker-button">
+								<button className="add-speaker">Ajouter un·e speaker·ine</button>
+							</div>
+						</div>
+						<div className="buttons-container">
+							<div className="left-button">
+								<button className="save-talk">Sauvegarder le talk</button>
+							</div>
+							<div className="right-button">
+								<button className="submit-talk">Soumettre le talk</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default FormTwo;
diff --git a/src/pages/Management/management.scss b/src/pages/Management/management.scss
index beb4af4..5c3703f 100644
--- a/src/pages/Management/management.scss
+++ b/src/pages/Management/management.scss
@@ -5,6 +5,7 @@
 	box-sizing: border-box;
 	display: flex;
 	justify-content: center;
+	overflow: hidden;
 	padding: 32px;
 	flex-grow: 1;
 
diff --git a/src/pages/TalkCreationPage/TalkCreationPage.scss b/src/pages/TalkCreationPage/TalkCreationPage.scss
new file mode 100644
index 0000000..d3faf41
--- /dev/null
+++ b/src/pages/TalkCreationPage/TalkCreationPage.scss
@@ -0,0 +1,32 @@
+.talk-container {
+	display: flex;
+	z-index: 3;
+	height: 100%;
+	flex-wrap: nowrap;
+
+	.logo-talkien {
+		right: 1150px;
+		top: -300px;
+		width: 80%;
+		object-fit: contain;
+		opacity: 0.1;
+		position: absolute;
+		z-index: -1;
+	}
+
+	.right-block {
+		width: 100%;
+		height: 100%;
+		text-align: left;
+		overflow: auto;
+		z-index: 3;
+		display: flex;
+		justify-content: center;
+	}
+
+	.block-talk {
+		margin: 4.5% 4.5%;
+		height: 100%;
+		max-width: 1000px;
+	}
+}
\ No newline at end of file
diff --git a/src/pages/TalkCreationPage/index.tsx b/src/pages/TalkCreationPage/index.tsx
new file mode 100644
index 0000000..37f86d6
--- /dev/null
+++ b/src/pages/TalkCreationPage/index.tsx
@@ -0,0 +1,29 @@
+import React, { ReactComponentElement } from 'react';
+
+import logo from 'assets/LogoTalkien.svg';
+import TalkForm from 'components/TalkForm';
+import LeftBar from 'components/LeftBar';
+
+import './TalkCreationPage.scss';
+
+class TalkCreationPage extends React.Component<any> {
+	constructor(props: any) {
+		super(props);
+	}
+
+	public render() {
+		return (
+			<div className="talk-container">
+				<LeftBar />
+				<object data={logo} className="logo-talkien" />
+				<div className="right-block">
+					<div className="block-talk">
+						<TalkForm />
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default TalkCreationPage;
diff --git a/src/tools/color.ts b/src/tools/color.ts
index 5bb9aaa..7a74372 100644
--- a/src/tools/color.ts
+++ b/src/tools/color.ts
@@ -39,3 +39,71 @@ export const computeIntermediateColor = (color1: string, color2: string) => {
 
 	return colorObjectToStringColor(hexColor1);
 };
+
+type Color = Array<number>;
+const rainbowColors: Array<Color> = [
+	[0xf4, 0x43, 0x36],
+	[0xff, 0x98, 0x00],
+	[0xff, 0xeb, 0x3b],
+	[0x4c, 0xaf, 0x50],
+	[0x21, 0x96, 0xf3],
+	[0x3f, 0x51, 0xb5],
+	[0x9b, 0x27, 0xb0],
+];
+
+function colorValueToString(value: Color) {
+	let result = '#';
+
+	const r = value[0].toString(16);
+	const g = value[1].toString(16);
+	const b = value[2].toString(16);
+	
+	if (r.length === 1) {
+		result += '0';
+	}
+
+	result += r;
+
+	if (g.length === 1) {
+		result += '0';
+	}
+
+	result += g;
+
+	if (b.length === 1) {
+		result += '0';
+	}
+
+	result += b;
+
+	return result;
+}
+
+function getColorPositionOf(currentIndex: number, nbTotalColors: number, colors: Array<Color>) {
+	const colorsBySlice = Math.round(nbTotalColors / colors.length);
+	const baseColorIndex = Math.trunc(currentIndex / colorsBySlice);
+	let nextColorIndex = baseColorIndex + 1;
+
+	if (nextColorIndex === rainbowColors.length) {
+		nextColorIndex = 0;
+	}
+
+	const colorRatio = (currentIndex - baseColorIndex * colorsBySlice) / colorsBySlice;
+	const baseColor = colors[baseColorIndex];
+	const nextColor = colors[nextColorIndex];
+
+	const resultColor = [
+		Math.round(baseColor[0] * (1 - colorRatio) + nextColor[0] * colorRatio),
+		Math.round(baseColor[1] * (1 - colorRatio) + nextColor[1] * colorRatio),
+		Math.round(baseColor[2] * (1 - colorRatio) + nextColor[2] * colorRatio),
+	];
+
+	return colorValueToString(resultColor);
+}
+
+export function randomColor(str: string) {
+	const seed =
+		str.split('').reduce((acc, e) => acc + e.charCodeAt(0), 0) % (rainbowColors.length * 20);
+
+	return getColorPositionOf(seed, rainbowColors.length * 20, rainbowColors);
+}
\ No newline at end of file