diff --git a/src/assets/check_ico.svg b/src/assets/check_ico.svg
new file mode 100644
index 0000000..e29170b
--- /dev/null
+++ b/src/assets/check_ico.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
\ No newline at end of file
diff --git a/src/components/generic/CodeShell.js b/src/components/generic/CodeShell.js
index 9172ac0..65b96cc 100644
--- a/src/components/generic/CodeShell.js
+++ b/src/components/generic/CodeShell.js
@@ -3,7 +3,8 @@ import {FlexColumn, Svg} from '../../utils/containers';
 import styled from 'styled-components';
 import theme from '../../utils/theme';
 import copyIco from '../../assets/copy_ico.svg';
-import {Code} from '../../utils/fonts';
+import checkIco from '../../assets/check_ico.svg';
+import {Body, Code} from '../../utils/fonts';
 
 const CodeShellStyle = styled(FlexColumn)`
   position: relative;
@@ -14,6 +15,7 @@ const CodeShellStyle = styled(FlexColumn)`
   border-radius: 4px;
   width: 100%;
   align-items: flex-start;
+  max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};
 
   @media (min-width: ${({theme}) => theme.overMobile}) {
     gap: 12px;
@@ -21,21 +23,48 @@ const CodeShellStyle = styled(FlexColumn)`
   }
 `;
 
+const CopiedMessageStyle = styled(Body)`
+  font-size: 16px;
+  position: absolute;
+  top: -24px;
+  right: -10px;
+  background-color: ${({theme}) => theme.colors.green};
+  color: ${({theme}) => theme.colors.white};
+  border-radius: 4px;
+  padding: 6px;
+`;
+
 const CodeShell = (props) => {
+    const [ico, setIco] = React.useState(copyIco);
+
+    const clickCopyButton = () => {
+        let commands = '';
+        if (props.commands.length > 1) {
+            for (let command of props.commands)
+                commands += command + '\n';
+        }
+        navigator.clipboard.writeText(commands).then(r => console.log(r));
+        setIco(checkIco);
+        setTimeout(() => {
+            setIco(copyIco);
+        }, 3000);
+    };
+
     const formatCommand = (command) => {
         if (command[0] === '\t') {
             return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
             /* eslint-disable */
         } else if (command[0] === '\s') {
             return <>&nbsp;{formatCommand(command.slice(1))}</>;
-        } return command;
+        }
+        return command;
     };
 
     const renderCommands = () => {
         return (
             props.commands.map((command, index) => {
                 return (
-                    <Code key={`command-${props.codeBlockIndex}-${index}`} as='li' 
+                    <Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
                           before={!props.disablePrompt}>
                         {formatCommand(command)}
                     </Code>
@@ -45,9 +74,10 @@ const CodeShell = (props) => {
     };
 
     return (
-        <CodeShellStyle as='ul'>
+        <CodeShellStyle as='ul' maxWidth={props.maxWidth}>
             <Svg position='absolute' top='12px' right='12px' cursor='pointer'
-                 backgroundColor={theme.colors.white} src={copyIco}/>
+                 backgroundColor={theme.colors.white} src={ico} onClick={clickCopyButton}/>
+            {ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
             {renderCommands()}
         </CodeShellStyle>
     );
diff --git a/src/components/specific_challenge/HowTo.js b/src/components/specific_challenge/HowTo.js
index e81f75a..fc74ab8 100644
--- a/src/components/specific_challenge/HowTo.js
+++ b/src/components/specific_challenge/HowTo.js
@@ -6,12 +6,14 @@ import CodeShell from '../generic/CodeShell';
 import cubeIcon from '../../assets/cube_ico.svg';
 import theme from '../../utils/theme';
 import {IS_MOBILE} from '../../utils/globals';
+import Media from 'react-media';
 
 const HowTo = () => {
     return (
         <FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null}
-                    gap={IS_MOBILE() ? '24px' : '48px'} alignmentX='flex-start' maxWidth='668px'>
-            <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
+                    gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
+                    maxWidth={IS_MOBILE() ? '668px' : 'none'}>
+            <FlexColumn as='article' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
                 <H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
                     Get challenge repo
                 </H2>
@@ -19,7 +21,7 @@ const HowTo = () => {
                     <CircleNumber number='1'/>
                     <Body as='p' margin='auto 0'>
                         You need to create empty repo with name:
-                        <Medium>
+                        <Medium as='span'>
                             yourID/challengeName
                         </Medium>
                     </Body>
@@ -38,17 +40,18 @@ const HowTo = () => {
                     Make sure Gonito.net has access to your repo (e.g. by making it public).
                 </Body>
             </FlexColumn>
-            <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
+            <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
                 <H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
                     Work on your solution
                 </H2>
                 <Body as='p'>
-                    You need to generate your solution for the test set as <Medium>test-A/out.tsv</Medium>. It is also
+                    You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It
+                    is also
                     recommended to
-                    generate the output for the dev set <Medium>(dev-0/out.tsv)</Medium>.
+                    generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>.
                 </Body>
                 <Body as='p'>
-                    You can evaluate results for the dev set locally by <Medium>geval</Medium>.
+                    You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>.
                 </Body>
                 <FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
                     <H3 as='h3'>
@@ -58,7 +61,7 @@ const HowTo = () => {
                                commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
                 </FlexColumn>
             </FlexColumn>
-            <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
+            <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
                 <H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
                     Push your solution
                 </H2>
@@ -79,153 +82,293 @@ const HowTo = () => {
                                `git commit -m 'my brilliant solution'`,
                                'git push origin my-brilliant-branch']}/>
             </FlexColumn>
-            <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
-                <H2 as='h2' margin='0 0 8px 0'>
-                    Submit solution to Gonito
-                </H2>
-                <FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
-                    <H3 as='h3'>
-                        Manual submission
-                    </H3>
-                    <Body>
-                        In case other methods fail, you can submit your solution manually — go to the <Medium>submit
-                        form</Medium>.
-                    </Body>
+            <FlexColumn as='article'>
+                <FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}>
+                    <H2 as='h2' margin='0 0 8px 0'>
+                        Submit solution to Gonito
+                    </H2>
+                    <FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
+                        <H3 as='h3'>
+                            Manual submission
+                        </H3>
+                        <Body>
+                            In case other methods fail, you can submit your solution manually — go to the <Medium>submit
+                            form</Medium>.
+                        </Body>
+                    </FlexColumn>
+                    <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
+                        <H3 as='h3'>
+                            Integration with external repos
+                        </H3>
+                        <Body>
+                            If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
+                            configure a webhook.
+                        </Body>
+                    </FlexColumn>
                 </FlexColumn>
-                <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
-                    <H3 as='h3'>
-                        Integration with external repos
-                    </H3>
-                    <Body>
-                        If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
-                        configure a webhook.
-                    </Body>
-                </FlexColumn>
-                <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
-                    <H3 as='h3'>
-                        Submission metadata
-                    </H3>
-                    <Body>
-                        Gonito can take the metadata (description, tags, parameters) of a submission from a number of
-                        sources (in order of precedence):
-                    </Body>
-                    <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
-                        <CircleNumber number='1'/>
-                        <Body as='p' margin='auto 0'>
-                            The YAML files specified in the param-files field of the gonito.yaml file
+                <Media query='(max-width: 1224px)'>
+                    <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'
+                                maxWidth='680px' width='100%'>
+                        <H3 as='h3' margin='24px 0 0 0'>
+                            Submission metadata
+                        </H3>
+                        <Body>
+                            Gonito can take the metadata (description, tags, parameters) of a submission from a
+                            number
+                            of
+                            sources (in order of precedence):
                         </Body>
-                    </Grid>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            only applicable for parameters
-                        </Body>
-                    </FlexRow>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            <Medium>gonito.yaml</Medium> will be always skipped even if matches a mask given in the
-                            param-files field,
-                        </Body>
-                    </FlexRow>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
-                            discarded,
-                        </Body>
-                    </FlexRow>
-                    <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
-                        <CircleNumber number='2'/>
-                        <Body as='p' margin='auto 0'>
-                            <Medium>Gonito.yaml</Medium> file committed to the repository,
-                        </Body>
-                    </Grid>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            description given in the description field,
-                        </Body>
-                    </FlexRow>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            tags given in tags field,
-                        </Body>
-                    </FlexRow>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            parameters given in params field,
-                        </Body>
-                    </FlexRow>
-                    <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
-                        <CircleNumber number='3'/>
-                        <Body as='p' margin='auto 0'>
-                            Names of output files (only for parameters)
-                        </Body>
-                    </Grid>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            e.g. if the output file
-                            is <Medium>out-epochs=10</Medium>, <Medium>learning-rate=0.01</Medium>, then parameters
-                            <Medium>epochs=10</Medium> and <Medium>learning-rare=0.01</Medium> will be extracted;
-                        </Body>
-                    </FlexRow>
-                    <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
-                        <CircleNumber number='4'/>
-                        <Body as='p' margin='auto 0'>
-                            Submission form (when submitting manually)
-                        </Body>
-                    </Grid>
-                    <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
-                        <CircleNumber number='5'/>
-                        <Body as='p' margin='auto 0'>
-                            Git commit message
-                        </Body>
-                    </Grid>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            description taken from the first paragraph
-                        </Body>
-                    </FlexRow>
-                    <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
-                        <Svg src={cubeIcon} width='24px' height='22px' size='cover'
-                             backgroundColor={theme.colors.green}/>
-                        <Body as='p' width='90%'>
-                            tags taken from a line starting with <Medium>tags:</Medium>
-                        </Body>
-                    </FlexRow>
-                    <Body>
-                        Here is an example of <Medium>gonito.yaml</Medium>, in which all metadata could be given (note
-                        that you can also
-                        add links to external resources using the <Medium>`links`</Medium> section):
-                    </Body>
-                    <CodeShell codeBlockIndex={5} disablePrompt
-                               commands={['description: This my brilliant solution',
-                                   'tags:', '\t- neutral-network', '\t- left-to-right',
-                                   'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
-                                   'unwanted-params:', '\t- model-file', '\t- vocab-file',
-                                   'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
-                                   'links:', '\t- title: "Some external link"',
-                                   '\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
-                                   '\t\s\shttps://example.com/foo-bar-baz-123"',
-                                   '\t- url: "https://example.net/bare-link-without-text']}/>
-                    <Body>
-                        It might seem a little bit complicated, but you could simply use the method which is the most
-                        convenient for you.
-                    </Body>
-                </FlexColumn>
+                        <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                            <CircleNumber number='1'/>
+                            <Body as='p' margin='auto 0'>
+                                The YAML files specified in the param-files field of the gonito.yaml file
+                            </Body>
+                        </Grid>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                only applicable for parameters
+                            </Body>
+                        </FlexRow>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                <Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
+                                given in the
+                                param-files field,
+                            </Body>
+                        </FlexRow>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
+                                discarded,
+                            </Body>
+                        </FlexRow>
+                        <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                            <CircleNumber number='2'/>
+                            <Body as='p' margin='auto 0'>
+                                <Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
+                            </Body>
+                        </Grid>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                description given in the description field,
+                            </Body>
+                        </FlexRow>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                tags given in tags field,
+                            </Body>
+                        </FlexRow>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                parameters given in params field,
+                            </Body>
+                        </FlexRow>
+                        <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                            <CircleNumber number='3'/>
+                            <Body as='p' margin='auto 0'>
+                                Names of output files (only for parameters)
+                            </Body>
+                        </Grid>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                e.g. if the output file
+                                is <Medium as='span'>out-epochs=10</Medium>, <Medium
+                                as='span'>learning-rate=0.01</Medium>, then parameters
+                                <Medium as='span'>epochs=10</Medium> and <Medium
+                                as='span'>learning-rare=0.01</Medium> will be extracted;
+                            </Body>
+                        </FlexRow>
+                        <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                            <CircleNumber number='4'/>
+                            <Body as='p' margin='auto 0'>
+                                Submission form (when submitting manually)
+                            </Body>
+                        </Grid>
+                        <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                            <CircleNumber number='5'/>
+                            <Body as='p' margin='auto 0'>
+                                Git commit message
+                            </Body>
+                        </Grid>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                description taken from the first paragraph
+                            </Body>
+                        </FlexRow>
+                        <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                            <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                 backgroundColor={theme.colors.green}/>
+                            <Body as='p' width='90%'>
+                                tags taken from a line starting with <Medium as='span'>tags:</Medium>
+                            </Body>
+                        </FlexRow>
+                        <CodeShell codeBlockIndex={5} disablePrompt
+                                   commands={['description: This my brilliant solution',
+                                       'tags:', '\t- neutral-network', '\t- left-to-right',
+                                       'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
+                                       'unwanted-params:', '\t- model-file', '\t- vocab-file',
+                                       'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
+                                       'links:', '\t- title: "Some external link"',
+                                       '\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
+                                       '\t\s\shttps://example.com/foo-bar-baz-123"',
+                                       '\t- url: "https://example.net/bare-link-without-text']}/>
+                    </FlexColumn>
+                </Media>
+                <Media query='(min-width: 1225px)'>
+                    <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%'>
+                        <FlexColumn alignmentX='flex-start' maxWidth='680px' gap='32px' margin='24px 0'>
+                            <H3 as='h3'>
+                                Submission metadata
+                            </H3>
+                            <Body>
+                                Gonito can take the metadata (description, tags, parameters) of a submission from a
+                                number
+                                of
+                                sources (in order of precedence):
+                            </Body>
+                        </FlexColumn>
+                        <FlexRow gap='24px'>
+                            <FlexColumn alignmentX='flex-start' maxWidth='422px' gap='20px'>
+                                <Grid width='100%' gridTemplateColumns='auto 1fr'
+                                      gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                                    <CircleNumber number='1'/>
+                                    <Body as='p' margin='auto 0'>
+                                        The YAML files specified in the param-files field of the gonito.yaml file
+                                    </Body>
+                                </Grid>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        only applicable for parameters
+                                    </Body>
+                                </FlexRow>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        <Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a
+                                        mask given
+                                        in
+                                        the
+                                        param-files field,
+                                    </Body>
+                                </FlexRow>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        parameters blacklisted in the unwanted-params field of the gonito.yaml file will
+                                        be
+                                        discarded,
+                                    </Body>
+                                </FlexRow>
+                                <Grid width='100%' gridTemplateColumns='auto 1fr'
+                                      gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                                    <CircleNumber number='2'/>
+                                    <Body as='p' margin='auto 0'>
+                                        <Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
+                                    </Body>
+                                </Grid>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        description given in the description field,
+                                    </Body>
+                                </FlexRow>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        tags given in tags field,
+                                    </Body>
+                                </FlexRow>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        parameters given in params field,
+                                    </Body>
+                                </FlexRow>
+                                <Grid width='100%' gridTemplateColumns='auto 1fr'
+                                      gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                                    <CircleNumber number='3'/>
+                                    <Body as='p' margin='auto 0'>
+                                        Names of output files (only for parameters)
+                                    </Body>
+                                </Grid>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        e.g. if the output file
+                                        is <Medium as='span'>out-epochs=10</Medium>, <Medium
+                                        as='span'>learning-rate=0.01</Medium>, then
+                                        parameters
+                                        <Medium as='span'>epochs=10</Medium> and <Medium
+                                        as='span'>learning-rare=0.01</Medium> will be
+                                        extracted;
+                                    </Body>
+                                </FlexRow>
+                                <Grid width='100%' gridTemplateColumns='auto 1fr'
+                                      gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                                    <CircleNumber number='4'/>
+                                    <Body as='p' margin='auto 0'>
+                                        Submission form (when submitting manually)
+                                    </Body>
+                                </Grid>
+                                <Grid width='100%' gridTemplateColumns='auto 1fr'
+                                      gridGap={IS_MOBILE() ? '8px' : '16px'}>
+                                    <CircleNumber number='5'/>
+                                    <Body as='p' margin='auto 0'>
+                                        Git commit message
+                                    </Body>
+                                </Grid>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        description taken from the first paragraph
+                                    </Body>
+                                </FlexRow>
+                                <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
+                                    <Svg src={cubeIcon} width='24px' height='22px' size='cover'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' width='90%'>
+                                        tags taken from a line starting with <Medium as='span'>tags:</Medium>
+                                    </Body>
+                                </FlexRow>
+                            </FlexColumn>
+                            <CodeShell codeBlockIndex={5} disablePrompt maxWidth='446px'
+                                       commands={['description: This my brilliant solution',
+                                           'tags:', '\t- neutral-network', '\t- left-to-right',
+                                           'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
+                                           'unwanted-params:', '\t- model-file', '\t- vocab-file',
+                                           'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
+                                           'links:', '\t- title: "Some external link"',
+                                           '\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
+                                           '\t\s\shttps://example.com/foo-bar-baz-123"',
+                                           '\t- url: "https://example.net/bare-link-without-text']}/>
+                        </FlexRow>
+                    </FlexColumn>
+                </Media>
             </FlexColumn>
         </FlexColumn>
     );
diff --git a/src/components/specific_challenge/Table.js b/src/components/specific_challenge/Table.js
index 761c3c3..66f837f 100644
--- a/src/components/specific_challenge/Table.js
+++ b/src/components/specific_challenge/Table.js
@@ -67,9 +67,9 @@ const Table = (props) => {
             return (
                 <FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
                     <FlexColumn as='tbody' width='100%'>
-                        <Grid
-                            gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
-                            gridTemplateColumns={props.gridTemplateColumns}>
+                        <Grid as='tr'
+                              gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
+                              gridTemplateColumns={props.gridTemplateColumns}>
                             {props.headerElements.map((elem, i) => {
                                 return (
                                     <FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
@@ -96,7 +96,7 @@ const Table = (props) => {
                                     </FlexRow>
                                 );
                             })}
-                            <Line height='2px' top='32px' shadow={theme.shadow}/>
+                            <Line height='2px' top='32px' as='td' shadow={theme.shadow}/>
                         </Grid>
                         {elementsToMap.map((elem, index) => {
                             return (
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 13f8f5d..114f182 100644
--- a/src/pages/Challenge.js
+++ b/src/pages/Challenge.js
@@ -62,7 +62,7 @@ const Challenge = (props) => {
         return (
             <>
                 <DesktopChallengeMenu setSection={setSection} section={section}/>
-                <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
+                <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px'>
                     <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
                         <Loading visible={loading}/>
                         <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>