diff --git a/app/Http/Controllers/API/NewsLetterAPIController.php b/app/Http/Controllers/API/NewsLetterAPIController.php
new file mode 100644
index 0000000..897fd97
--- /dev/null
+++ b/app/Http/Controllers/API/NewsLetterAPIController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\API;
+
+use Illuminate\Http\Request;
+use App\Http\Controllers\Controller;
+use App\NewsLetter;
+use Illuminate\Http\JsonResponse;
+
+class NewsLetterAPIController extends Controller
+{
+    /**
+     * Subscribe to the news
+     *
+     * @param  mixed $request
+     * @return JsonResponse
+     */
+    public function store(Request $request): JsonResponse
+    {
+        NewsLetter::create($request->validate([
+            "email" => "required|email|unique:news_letters"
+        ], ["email.unique" => "You are already subscribed to our newsletter!"]));
+
+        return response()->json([
+            "status" => "success",
+            "message" => "You have successfully subscribed to our newsletter!"
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/API/TopicsAPIController.php b/app/Http/Controllers/API/TopicsAPIController.php
index df973ac..b722d42 100644
--- a/app/Http/Controllers/API/TopicsAPIController.php
+++ b/app/Http/Controllers/API/TopicsAPIController.php
@@ -29,9 +29,9 @@ class TopicsAPIController extends Controller
      */
     public function show(Topic $topic)
     {
-        return [
+        return response()->json([
             'topic' => new TopicResource($topic),
             'articles' => $topic->articles()->with('source')->latest('published_date')->paginate(8)
-        ];
+        ]);
     }
 }
diff --git a/app/NewsLetter.php b/app/NewsLetter.php
new file mode 100644
index 0000000..487fcf5
--- /dev/null
+++ b/app/NewsLetter.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class NewsLetter extends Model
+{
+    protected $guarded = [];
+}
diff --git a/database/migrations/2020_08_22_190457_create_news_letters_table.php b/database/migrations/2020_08_22_190457_create_news_letters_table.php
new file mode 100644
index 0000000..78ed3d2
--- /dev/null
+++ b/database/migrations/2020_08_22_190457_create_news_letters_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateNewsLettersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('news_letters', function (Blueprint $table) {
+            $table->id();
+            $table->string('email');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('news_letters');
+    }
+}
diff --git a/resources/js/components/NewsLetter.vue b/resources/js/components/NewsLetter.vue
new file mode 100644
index 0000000..d7a9616
--- /dev/null
+++ b/resources/js/components/NewsLetter.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="flex flex-row w-2/3 lg:w-1/3">
+        <div class="flex-col w-full">
+            <div
+                class="w-full border border-gray-800 rounded bg-white text-gray-800 p-5 mb-4"
+                v-if="message"
+                v-text="message"
+            >
+            </div>
+            <div class="flex w-full">
+                <input
+                    class="bg-gray-100 h-10 px-2 rounded flex-1"
+                    type="email"
+                    name="email"
+                    v-model="form.email"
+                    placeholder="Subscribe for News Letters"
+                />
+                <button
+                    @click="submit()"
+                    :disabled="form.email == ''"
+                    class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
+                >
+                    Subscribe
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "news-letter",
+
+    data() {
+        return {
+            form: {
+                email: ""
+            },
+            errors: false,
+            message: ""
+        };
+    },
+
+    methods: {
+        submit() {
+            axios
+                .post("/api/newsletter/subscribe", this.form)
+
+                .then(response => {
+                    this.message = response.data.message;
+                })
+                .catch(error => {
+                    this.errors = true;
+                   this.message = error.response.data.errors.email[0];
+                });
+        }
+    }
+};
+</script>
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
index 546fceb..1d9ceab 100644
--- a/resources/views/partials/footer.blade.php
+++ b/resources/views/partials/footer.blade.php
@@ -12,18 +12,7 @@
       </li>
 
     </ul>
-    <div class="flex flex-row w-2/3 lg:w-1/3">
-      <div class="flex-col w-full">
-        <div class="flex w-full">
-          <input class="bg-gray-100 h-10 px-2 rounded flex-1" type="email" name="email"
-            placeholder="Subscribe for News Letters">
-          <button
-            class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium">
-            Subscribe
-          </button>
-        </div>
-      </div>
-    </div>
+<news-letter></news-letter>
 
     <div class="py-8 flex">
 
diff --git a/routes/api.php b/routes/api.php
index 2e311a5..beeb7ae 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -6,6 +6,7 @@ use App\Http\Controllers\API\ArticlesAPIController;
 use App\Http\Controllers\API\SourcesAPIController;
 use App\Http\Controllers\API\TopicsAPIController;
 use App\Http\Controllers\API\MyListAPIController;
+use App\Http\Controllers\API\NewsLetterAPIController;
 
 /*
 |--------------------------------------------------------------------------
@@ -29,3 +30,5 @@ Route::get('source/{source:slug}',[SourcesAPIController::class, 'show'])->name('
 
 Route::get('article/{article:id}', [ArticlesAPIController::class, 'show'])->name('api.article.show');
 
+Route::post('newsletter/subscribe', [NewsLetterAPIController::class, 'store'])->name('api.newsletter.store');
+