diff --git a/front/config/test/jest.js b/front/config/test/jest.js
index b5f4557..31b95a0 100644
--- a/front/config/test/jest.js
+++ b/front/config/test/jest.js
@@ -7,5 +7,6 @@ module.exports = {
   modulePathIgnorePatterns: ['cypress'],
   moduleNameMapper: {
     '^.+\\.png$': '<rootDir>/pngTransform.js',
+    '^.+\\.svg$': '<rootDir>/svgTransform.js',
   }
 };
diff --git a/front/src/common-app/components/download-text/download-text.component.tsx b/front/src/common-app/components/download-text/download-text.component.tsx
new file mode 100644
index 0000000..77a445b
--- /dev/null
+++ b/front/src/common-app/components/download-text/download-text.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import * as innerClasses from './download-text.styles';
+import Button from '@material-ui/core/Button';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+
+export const DownloadTxtFile: React.FC = () => {
+  const handleDownloadTxtFile = () => {
+    const element = document.createElement('a');
+    const file = new Blob(
+      [(document.getElementById('session') as HTMLInputElement).value],
+      {
+        type: 'text/json;charset=utf-8,',
+      }
+    );
+    element.href = URL.createObjectURL(file);
+    element.download = 'Codepaster.txt';
+    document.body.appendChild(element);
+    element.click();
+  };
+
+  return (
+    <Button
+      variant="contained"
+      className={innerClasses.downloadButton}
+      onClick={() => handleDownloadTxtFile()}
+    >
+      <ArrowDownwardIcon className={innerClasses.downloadIcon} />
+      Download File
+    </Button>
+  );
+};
diff --git a/front/src/common-app/components/download-text/download-text.styles.ts b/front/src/common-app/components/download-text/download-text.styles.ts
new file mode 100644
index 0000000..8844f64
--- /dev/null
+++ b/front/src/common-app/components/download-text/download-text.styles.ts
@@ -0,0 +1,46 @@
+import { css } from 'emotion';
+import { theme } from 'core/theme';
+
+const { typography, spacing, palette, breakpoints } = theme;
+const color = palette.customPalette;
+
+export const downloadButton = css`
+  grid-area: span;
+  display: flex;
+  align-items: center;
+  padding: ${spacing(1.25)} ${spacing(1.875)};
+  font-size: 1.188rem;
+  font-weight: 400;
+  text-transform: capitalize;
+  color: ${color.primary};
+  background-color: white;
+  border-radius: 0;
+  border: 2px solid ${color.primary};
+  transition: all 0.2s;
+  &:hover,
+  &:active {
+    color: white;
+    background-color: ${color.primary};
+    border: 2px solid ${color.primary};
+    outline: none;
+  }
+  @media (max-width: ${breakpoints.values.xs}px) {
+    color: white;
+    background-color: ${color.primary};
+    border: none;
+    &:hover,
+    &:active {
+      background-color: ${color.primary};
+      border: none;
+    }
+  }
+`;
+
+export const downloadIcon = css`
+  margin-right: ${spacing(1.25)};
+  font-size: 1.25rem;
+  display: none;
+  @media (min-width: ${breakpoints.values.xs}px) {
+    display: initial;
+  }
+`;
diff --git a/front/src/common-app/components/download-text/index.ts b/front/src/common-app/components/download-text/index.ts
new file mode 100644
index 0000000..b03a8e8
--- /dev/null
+++ b/front/src/common-app/components/download-text/index.ts
@@ -0,0 +1 @@
+export * from './download-text.component'
diff --git a/front/src/common-app/components/footer/footer.component.tsx b/front/src/common-app/components/footer/footer.component.tsx
index 66ef0de..b0095cf 100644
--- a/front/src/common-app/components/footer/footer.component.tsx
+++ b/front/src/common-app/components/footer/footer.component.tsx
@@ -9,38 +9,37 @@ import LanguageIcon from '@material-ui/icons/Language';
 export const FooterComponent: React.FC = () => {
   const {
     footerContainer,
-    topContainerCenter,
+    logoContainer,
     lemoncodeIcon,
     bottomContainer,
     iconContainer,
-    iconListItem,
     icon,
     githubIcon,
     copyright,
   } = classes;
   return (
     <footer className={footerContainer}>
-      <div className={topContainerCenter}>
+      <div className={logoContainer}>
         <LemoncodeLogo className={lemoncodeIcon} />
       </div>
       <div className={bottomContainer}>
         <ul className={iconContainer}>
-          <li className={iconListItem}>
+          <li>
             <a href="https://github.com/Lemoncode" target="_blank">
               <GithubIcon className={githubIcon} />
             </a>
           </li>
-          <li className={iconListItem}>
+          <li>
             <a href="https://twitter.com/lemoncoders" target="_blank">
               <TwitterIcon className={icon} />
             </a>
           </li>
-          <li className={iconListItem}>
+          <li>
             <a href="https://lemoncode.net/" target="_blank">
               <LanguageIcon className={icon} />
             </a>
           </li>
-          <li className={iconListItem}>
+          <li>
             <a href="mailto:formacion@lemoncode.net" target="_blank">
               <EmailRoundedIcon className={icon} />
             </a>
diff --git a/front/src/common-app/components/footer/footer.styles.ts b/front/src/common-app/components/footer/footer.styles.ts
index ee78f54..ba76e61 100644
--- a/front/src/common-app/components/footer/footer.styles.ts
+++ b/front/src/common-app/components/footer/footer.styles.ts
@@ -8,43 +8,19 @@ export const footerContainer = css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: ${spacing(37.5)};
-  padding: ${spacing(2.5)} ${spacing(12.5)};
   background-color: ${color.secondary};
-  @media (max-width: ${breakpoints.values.md}px) {
-    padding: ${spacing(2.5)} ${spacing(5)} ${spacing(3.75)} ${spacing(5)};
-  }
-  @media (max-width: ${breakpoints.values.xs}px) {
-    height: ${spacing(43.75)};
-  }
 `;
 
-export const topContainer = css`
-  display: flex;
-  justify-content: space-between;
-  height: ${spacing(24.375)};
-  padding: 0 ${spacing(2)};
-  align-items: center;
-  @media (max-width: ${breakpoints.values.xs}px) {
-    flex-direction: column-reverse;
-    justify-content: center;
-    align-items: center;
-    height: ${spacing(27.5)};
-  }
-`;
-
-export const topContainerCenter = css`
+export const logoContainer = css`
   display: flex;
   justify-content: center;
   align-items: center;
-  height: ${spacing(24.375)};
-  padding: 0 ${spacing(2)};
 `;
 
 export const bottomContainer = css`
   display: flex;
   justify-content: space-between;
-  padding-top: ${spacing(2)};
+  padding: ${spacing(3)};
   border-top: 1px solid ${color.primary};
   @media (max-width: ${breakpoints.values.xs}px) {
     flex-direction: column;
@@ -54,23 +30,22 @@ export const bottomContainer = css`
 `;
 
 export const lemoncodeIcon = css`
-  height: ${spacing(12.5)};
+  max-width: 100px;
+  padding: ${spacing(3)} 0;
 `;
 
 export const iconContainer = css`
   display: flex;
+  justify-content: space-between;
+  width: 50%;
   margin: 0;
-  padding: 0;
+  padding: 0 0 ${spacing(1)};
   list-style: none;
-`;
-
-export const iconListItem = css`
-  margin-right: ${spacing(1)};
-  &:first-of-type {
-    margin-right: ${spacing(1.4)};
+  @media (min-width: ${breakpoints.values.sm}px) {
+    width: 20%;
   }
-  &:last-of-type {
-    margin-right: 0;
+  @media (min-width: ${breakpoints.values.lg}px) {
+    width: 10%;
   }
 `;
 
diff --git a/front/src/common-app/index.ts b/front/src/common-app/index.ts
index ce2cae9..b66055e 100644
--- a/front/src/common-app/index.ts
+++ b/front/src/common-app/index.ts
@@ -1,2 +1,3 @@
 export * from './components/appbar';
 export * from './components/footer';
+export * from './components/download-text';
diff --git a/front/src/pods/student/student.component.tsx b/front/src/pods/student/student.component.tsx
index eaa5db1..55b7e76 100644
--- a/front/src/pods/student/student.component.tsx
+++ b/front/src/pods/student/student.component.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
 import * as innerClasses from './student.styles';
+import { DownloadTxtFile } from 'common-app';
 
 interface Props {
   room: string;
   log: string;
 }
 
-export const StudentComponent: React.FC<Props> = props => {
+export const StudentComponent: React.FC<Props> = (props) => {
   const { room, log } = props;
 
   return (
@@ -30,6 +31,7 @@ export const StudentComponent: React.FC<Props> = props => {
         className={innerClasses.textarea}
         value={log ?? ''}
       />
+      <DownloadTxtFile />
     </main>
   );
 };
diff --git a/front/src/pods/trainer/components/session.component.tsx b/front/src/pods/trainer/components/session.component.tsx
index 5216240..70c5600 100644
--- a/front/src/pods/trainer/components/session.component.tsx
+++ b/front/src/pods/trainer/components/session.component.tsx
@@ -5,6 +5,7 @@ import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
 import UndoIcon from '@material-ui/icons/Undo';
 import Button from '@material-ui/core/Button';
 import * as innerClasses from './session.styles';
+import { DownloadTxtFile } from 'common-app';
 
 interface Props {
   log: string;
@@ -66,6 +67,8 @@ export const SessionComponent: React.FC<Props> = props => {
         Send Full Content
         <ArrowForwardRoundedIcon className={innerClasses.sendIcon} />
       </Button>
+
+      <DownloadTxtFile />
     </form>
   );
 };
diff --git a/front/src/pods/trainer/components/session.styles.ts b/front/src/pods/trainer/components/session.styles.ts
index a2cfd4c..20f666e 100644
--- a/front/src/pods/trainer/components/session.styles.ts
+++ b/front/src/pods/trainer/components/session.styles.ts
@@ -118,3 +118,4 @@ export const undoIcon = css`
     display: initial;
   }
 `;
+
diff --git a/front/static/index.html b/front/static/index.html
index f1751ad..04cb73c 100644
--- a/front/static/index.html
+++ b/front/static/index.html
@@ -405,7 +405,7 @@ <h3>6. NON-WAIVER</h3>
       </div>
     </main>
     <footer class="footer">
-      <div class="footer__top-container">
+      <div class="footer-container">
         <nav>
           <ul class="footer__list">
             <li class="footer__list__item">
@@ -432,7 +432,7 @@ <h3>6. NON-WAIVER</h3>
             </li>
             <li class="footer__icon-list-item">
               <a href="https://twitter.com/lemoncoders" target="_blank">
-                <svg class="footer__icon-twitter">
+                <svg class="footer__icon">
                   <use xlink:href="assets/sprite.svg#twitter-icon"></use>
                 </svg>
               </a>
diff --git a/front/static/styles.css b/front/static/styles.css
index 2e85771..5b8793f 100644
--- a/front/static/styles.css
+++ b/front/static/styles.css
@@ -568,61 +568,32 @@ form textarea {
 .footer {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  height: 30rem;
-  padding: 2rem 10rem;
+  justify-content: space-around;
   background-color: var(--color-dark);
 }
 
-@media only screen and (max-width: 728px) {
-  .footer {
-    padding: 2rem 4rem 3rem 4rem;
-  }
-}
-
-@media only screen and (max-width: 380px) {
-  .footer {
-    height: 35rem;
-  }
-}
-
-.footer__top-container {
-  padding: 0 2rem;
+.footer-container {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
-  height: 19.5rem;
-  align-items: center;
+  padding: 0 10rem;
 }
 
-@media only screen and (max-width: 380px) {
-  .footer__top-container {
-    flex-direction: column-reverse;
-    align-items: center;
-    justify-content: center;
-    height: 22rem;
-  }
-}
-
-.footer__logo {
-  height: 10rem;
-  width: 11.2rem;
+.footer__bottom-container {
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #d9d900;
+  padding: 1.5rem 0 3.5rem 0;
 }
 
 .footer__list {
-  padding: 0;
-  margin: 0;
+  font-size: 1.5rem;
   list-style: none;
-}
-
-@media only screen and (max-width: 380px) {
-  .footer__list {
-    text-align: center;
-    margin-top: 2.4rem;
-  }
+  padding-top: 4rem;
 }
 
 .footer__list__item {
-  margin-top: 0.5rem;
+  margin-top: 1.5rem;
 }
 
 .footer__list__item a {
@@ -636,47 +607,26 @@ form textarea {
   color: var(--color-primary-main);
 }
 
-.footer__bottom-container {
+.footer__logo {
   display: flex;
-  justify-content: space-between;
+  justify-content: right;
   align-items: center;
-  border-top: 1px solid #d9d900;
-  padding-top: 1rem;
-}
-
-@media only screen and (max-width: 380px) {
-  .footer__bottom-container {
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
-.footer--logo-lemon-container:hover .footer--logo-lemon {
-  fill: var(--color-secondary-main);
-}
-
-.footer--logo-lemon {
-  position: absolute;
-  top: 0.8rem;
-  right: 1.6rem;
-  fill: var(--color-light);
-  height: 10rem;
-  width: 10rem;
+  max-width: 100px;
+  padding: 0.5rem 0;
 }
 
 .footer__icon-list {
   display: flex;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+  padding: 0 5rem;
 }
 
 .footer__icon-list-item {
-  margin-right: 1.2rem;
+  margin-right: 1.5rem;
+  fill: var(--color-grey-light);
 }
-.footer__icon-list-item:last-of-type {
-  margin-right: 0;
+
+.footer__list__item a:hover {
+  color: var(--color-primary-main);
 }
 
 .footer__icon {
@@ -687,29 +637,12 @@ form textarea {
 
 .footer__icon:hover {
   fill: var(--color-primary-main);
-}
-
-.footer__icon-twitter {
-  height: 3.5rem;
-  width: 3.5rem;
-  margin-top: 0.2rem;
-  margin-right: -0.6rem;
-  margin-left: -0.6rem;
-  fill: var(--color-grey-light);
-}
-
-.footer__icon-twitter:hover {
-  fill: var(--color-primary-main);
+  cursor: pointer;
 }
 
 .footer__copyright {
+  font-weight: 400;
+  font-size: 1.5rem;
+  padding: 0 5rem;
   color: var(--color-grey-light);
-  font-weight: 300;
-  font-size: 1.4rem;
-}
-
-@media only screen and (max-width: 578px) {
-  .footer__copyright {
-    margin-top: 0.4rem;
-  }
 }
diff --git a/front/svgTransform.js b/front/svgTransform.js
new file mode 100644
index 0000000..e69de29