diff --git a/src/assets/upload.svg b/src/assets/upload.svg
new file mode 100644
index 0000000..ee8e8a8
--- /dev/null
+++ b/src/assets/upload.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="68.965652mm"
+   height="68.948975mm"
+   viewBox="0 0 68.965652 68.948975"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"
+     transform="translate(-78.581248,-114.14203)"><path
+       d="m 101.71922,133.815 7.89657,-7.93103 v 33.06897 c 0,4.59771 6.89657,4.59771 6.89657,0 v -33.06897 l 7.89657,7.93103 c 1.34889,1.35999 3.54767,1.35999 4.89656,0 1.36001,-1.34889 1.36001,-3.5477 0,-4.89659 l -13.79313,-13.79308 c -0.32789,-0.31411 -0.71459,-0.56036 -1.1379,-0.72463 -0.83953,-0.34489 -1.78117,-0.34489 -2.6207,0 -0.42331,0.16427 -0.81001,0.41052 -1.1379,0.72463 l -13.793128,13.79308 c -3.265094,3.26437 1.631464,8.16096 4.896558,4.89659 z m 42.3794,14.7931 c -1.90447,0 -3.44833,1.5439 -3.44828,3.44837 v 20.68969 c -2e-5,1.90442 -1.54386,3.44824 -3.44828,3.44824 H 88.926098 c -1.904415,0 -3.448254,-1.54382 -3.448278,-3.44824 v -20.68969 c 0,-4.59771 -6.89657,-4.59771 -6.89657,0 v 20.68969 c -10e-7,5.7133 4.631545,10.34485 10.344848,10.34485 h 48.275962 c 5.7133,0 10.34485,-4.63155 10.34485,-10.34485 v -20.68969 c 5e-5,-1.90447 -1.54382,-3.44837 -3.44829,-3.44837 z"
+       id="path1"
+       style="opacity:1;mix-blend-mode:normal;fill:#06345f;fill-opacity:1;stroke-width:3.448;stroke-dasharray:none" /></g></svg>
diff --git a/src/file-renderer/pattern.js b/src/file-renderer/pattern.js
index ec6a3d2..7d73189 100644
--- a/src/file-renderer/pattern.js
+++ b/src/file-renderer/pattern.js
@@ -208,7 +208,7 @@ Pattern.prototype.drawShapeTo = function (canvas) {
 
 Pattern.prototype.drawColorsTo = function (colorContainer) {
   this.colors.forEach((color) => {
-    colorContainer.innerHTML += `<div style='background-color: rgb(${color.r}, ${color.g}, ${color.b}); height: 25px; width: 25px; border: 1px solid #000000;'></div>`;
+    colorContainer.innerHTML += `<div style='background-color: rgb(${color.r}, ${color.g}, ${color.b}); height: 25px; width: 25px; border: 1px solid #000000; border-radius: 16px;'></div>`;
   });
 };
 
diff --git a/src/i18n/translations.js b/src/i18n/translations.js
index 6869813..2078f46 100644
--- a/src/i18n/translations.js
+++ b/src/i18n/translations.js
@@ -37,10 +37,11 @@ export default {
       "donate.paypal.description": "Want to show support in a friendly way?",
       "donate.paypal.link": "Open Donation link",
       "main.languageSwitch": "🇧🇷",
-      "main.fileSize": "Max file size is <strong>{{fileSize}}kb</strong>.",
+      "main.fileSize": "Max file size is <strong>{{fileSize}}MB</strong>.",
       "main.supportedFormats": "Accepted formats: <strong>{{supportedFormats}}</strong>.",
       "main.render": "Render files",
-      "main.dropzone": "Drag and drop files here or click to upload.",
+      "main.dropzone": "<strong>Choose files</strong><br /><span>or drag and drop them here</span>",
+      "main.browse": "Browse",
       "main.selected": "Selected files",
       "main.rejected": "Rejected files",
       "main.stitches": "Stitches",
@@ -87,10 +88,11 @@ export default {
       "donate.paypal.link": "Abrir Link de Doação",
       "main.title": "Carregar arquivos",
       "main.languageSwitch": "🇺🇸",
-      "main.fileSize": "O tamanho máximo do arquivo é <strong>{{fileSize}}kb</strong>.",
+      "main.fileSize": "O tamanho máximo de cada arquivo é <strong>{{fileSize}}MB</strong>.",
       "main.supportedFormats": "Formatos aceitos: <strong>{{supportedFormats}}</strong>.",
       "main.render": "Renderizar arquivos",
-      "main.dropzone": "Arraste e solte os arquivos aqui ou clique para fazer upload.",
+      "main.dropzone": "<strong>Selecione arquivos</strong><br /><span>ou arraste e solte-os aqui</span>",
+      "main.browse": "Selecionar arquivos",
       "main.selected": "Arquivos selecionados",
       "main.rejected": "Arquivos recusados",
       "main.stitches": "Pontos",
diff --git a/src/lib/components/CardList.svelte b/src/lib/components/CardList.svelte
index 6ee5a06..e701132 100644
--- a/src/lib/components/CardList.svelte
+++ b/src/lib/components/CardList.svelte
@@ -84,7 +84,9 @@
     max-height: 1000px;
     margin-bottom: 15px;
     padding: 10px;
-    border: 2px solid black;
+/*    border: 2px solid black;*/
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    border-radius: 16px;
   }
 
   .canvas {
@@ -108,10 +110,13 @@
 
   div[role="button"] {
     background-color: #05345f;
-    font-weight: 500;
+    font-weight: bold;
     color: white;
     padding: 10px;
-    border-radius: 0;
+    border-radius: 10px;
+    padding: 10px;
+    width: 50%;
+    text-align: center;
   }
 
   div[role="button"]:hover {
@@ -129,5 +134,10 @@
     #container {
       width: 100%;
     }
+
+    div[role="button"] {
+      width: 100%;
+      padding: 15px;
+    }
   }
 </style>
diff --git a/src/lib/components/Dropzone.svelte b/src/lib/components/Dropzone.svelte
index ae44657..caef206 100644
--- a/src/lib/components/Dropzone.svelte
+++ b/src/lib/components/Dropzone.svelte
@@ -1,5 +1,6 @@
 <script>
   import { t } from "../../i18n"
+  import upload from "../../assets/upload.svg"
 
   export let files;
   export let supportedFormats;
@@ -15,13 +16,11 @@
   tabindex={0}
   role="region"
   on:keydown={onKeydown}
-  on:click={onClick}
   on:dragover|preventDefault|stopPropagation
   on:drop|preventDefault|stopPropagation={onDrop}
 >
-  <label id="file-label" for="file-input"
-    >{$t("main.dropzone")}</label
-  >
+  <img src={upload} width="40" height="40" alt="Upload icon" />
+  <label id="file-label" for="file-input">{@html $t("main.dropzone")}</label>
   <input
     id="file-input"
     type="file"
@@ -29,38 +28,58 @@
     accept={supportedFormats.join(",")}
     multiple
     on:change={onChange}
-    bind:files
+    bind:this={files}
   />
+  <button on:click={onClick}>{$t("main.browse")}</button>
 </div>
 
 <style>
   #dropzone {
     display: flex;
-    height: 100px;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    border: 1px solid #d3dce6;
+    border-radius: 12px;
     width: 100%;
-    border: 5px dotted black;
     padding: 15px;
     z-index: 10;
   }
 
   #file-label {
     z-index: -1;
-    font-weight: 600;
+    margin-top: 10px;
   }
 
   #file-input {
     display: none;
   }
 
-  #dropzone:hover {
+  button {
+    margin-top: 20px;
+    padding: 12px 24px;
+    background-color: #06345F;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 1rem;
     cursor: pointer;
-    border: 5px dotted #05345f;
-    color: #05345f;
+    width: 60%;
+    font-weight: bold;
+  }
+
+  button:hover {
+    color: #fff;
+    background-color: #000;
   }
 
   @media only screen and (max-device-width: 812px) {
     #dropzone {
       width: 100%;
     }
+
+    button {
+      width: 100%;
+    }
   }
 </style>
diff --git a/src/lib/components/FileList.svelte b/src/lib/components/FileList.svelte
index ad0648f..1199619 100644
--- a/src/lib/components/FileList.svelte
+++ b/src/lib/components/FileList.svelte
@@ -7,17 +7,28 @@
 {#if files.length !== 0}
   <div id="selected-files-container">
     <h2>{title}:</h2>
+    <div id="files-list">
     {#each Array.from(files) as file}
       <div id={isError ? "selected-file-card-error" : "selected-file-card"}>
-        <p>{file.name} ({file.size / 1000} kb)</p>
+        <span>{file.name}</span>
+        <span>{Math.round(file.size / 1000)} KB</span>
       </div>
     {/each}
+    </div>
   </div>
 {/if}
 
 <style>
+  #files-list{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
   #selected-file-card {
-    border: 1px solid #000;
+    display: flex;
+    justify-content: space-between;
+    color: #06345F;
+    font-weight: bolder;
     width: 500px;
     padding-left: 15px;
     margin-top: 10px;
diff --git a/src/lib/components/FileViewer.svelte b/src/lib/components/FileViewer.svelte
index 21105a1..bccd950 100644
--- a/src/lib/components/FileViewer.svelte
+++ b/src/lib/components/FileViewer.svelte
@@ -12,7 +12,7 @@
   let areAcceptedFilesRendered = false;
   const fileRequirements = {
     supportedFormats: Object.values(supportedFormats).map((f) => f.ext),
-    maxSize: 700000,
+    maxSize: 1000000,
   };
 
   const onSubmit = () => {
@@ -57,7 +57,7 @@
       <h2>{$t("main.title")}</h2>
     </div>
   <p>
-    {@html $t("main.fileSize", { fileSize: fileRequirements.maxSize / 1000 })}
+    {@html $t("main.fileSize", { fileSize: fileRequirements.maxSize / 1000000 })}
     {@html $t("main.supportedFormats", { supportedFormats: fileRequirements.supportedFormats.join(", ") })}
   </p>
 
@@ -70,7 +70,7 @@
     {onChange}
   />
 
-  <input type="submit" value={$t("main.render")} />
+  <input id="submit" type="submit" value={$t("main.render")} />
 </form>
 
 {#if areAcceptedFilesRendered}
@@ -81,13 +81,23 @@
 {/if}
 
 <style>
+  form {
+    width: fit-content;
+    margin: 0 auto;
+  }
   .title-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
-  @media only screen and (max-device-width: 812px) {
+  #submit {
+    border: none;
+    border-radius: 10px;
+    padding: 15px
+  }
+
+  @media only screen and (max-device-width: 768px) {
     #form {
       width: 100%;
     }
diff --git a/src/lib/sections/Main.svelte b/src/lib/sections/Main.svelte
index 7611604..e68ea65 100644
--- a/src/lib/sections/Main.svelte
+++ b/src/lib/sections/Main.svelte
@@ -1,9 +1,7 @@
 <script>
-    import FileViewer from "../components/FileViewer.svelte";
     import Router from "../components/Router.svelte";
 </script>
 <main>
-    <!--<FileViewer />-->
     <Router />
 </main>