diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..479ccbb
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+github: rwenzel22
+buy_me_a_coffee: rwenzel
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..f3d5c41
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..11fc491
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/README.md b/README.md
index 508baf9..be57fa1 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,20 @@
-# drop-files
\ No newline at end of file
+# Dropfiles Uploader
+
+Dropfiles Uploader é um plugin jQuery simples e altamente customizável que ajuda você a realizar o envio de arquivos em seus formulários da web.
+
+- [📚 Documentação](https://dropfiles-uploader.gitbook.io)
+
+## Diferenciais do Dropfiles Uploader ✅
+
+- Envio de arquivos via submit ou Api.
+- Validação de extensão e tamanho de arquivos.
+- Suporte a traduções.
+- Suporte a arrastar e soltar arquivos.
+- Suporte a eventos.
+- Debug mode.
+- Suporte a thumbnails de imagens.
+- Suporte a envio de parâmetros personalizados na envio da request.
+
+# Licença MIT
+
+- [Licença](https://github.com/rwenzel22/drop-files-uploader/blob/main/LICENSE)
\ No newline at end of file
diff --git a/src/css/dropfilesuploader.css b/src/css/dropfilesuploader.css
new file mode 100644
index 0000000..4a6a4cd
--- /dev/null
+++ b/src/css/dropfilesuploader.css
@@ -0,0 +1,123 @@
+.df-container, .df-container *, .df-container ::after, .df-container ::before {
+    box-sizing: border-box;
+}
+
+.df-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fafafa;
+    border: 2px solid #c5c5c5;
+    border-radius: 8px;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.df-container .df-drop-area {
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.df-files {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 8px;
+}
+
+.df-file {
+    padding: 8px;
+    border-bottom: 1px solid #e3e3e3;
+}
+
+.df-file-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+
+.df-file-thumbnail > img {
+    width: 100%;
+    min-width: 100%;
+    height: 100%;
+}
+
+.df-file-thumbnail > svg {
+    color: #343434;
+}
+
+.df-file-data {
+    width: 100%;
+    padding: 12px 8px;
+    padding-right: 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 4px;
+}
+
+.df-file-progress-container {
+    width: 100%;
+    background-color: #f1f1f1;
+    border-radius: 18px;
+    overflow: hidden;
+}
+
+.df-file-progress-bar {
+    height: 4px;
+    width: 0%;
+    background-color: #ccc;
+    transition: background-color 0.5s ease;
+}
+
+.df-file-info {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+
+.df-file-name {
+    display: flex;
+    flex-direction: column;
+    color: #343434;
+    gap: 4px;
+    min-width: 0;
+    width: 100%;
+}
+
+.df-file-name span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 16px;
+}
+
+.df-file-name small {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.df-file-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+}
+
+.df-file-status svg {
+    width: 100%;
+}
\ No newline at end of file