diff --git a/app/Http/Controllers/BlogArticleController.php b/app/Http/Controllers/BlogArticleController.php
index 0dec676..8ede612 100644
--- a/app/Http/Controllers/BlogArticleController.php
+++ b/app/Http/Controllers/BlogArticleController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\BlogArticlePublishRequest;
 use App\Http\Requests\BlogArticleRequest;
 use App\Http\Services\AuthService;
 use App\Models\BlogArticle;
@@ -113,6 +114,21 @@ class BlogArticleController extends Controller
         return response(null, 204);
     }
 
+    /**
+     * Update the published state of the specified resource in storage.
+     *
+     * @param  \App\Http\Requests\BlogArticlePublishRequest  $request
+     * @param  \App\Models\BlogArticle  $blogArticle
+     * @return \Illuminate\Http\Response
+     */
+    public function publish(BlogArticlePublishRequest $request, BlogArticle $blogArticle)
+    {
+        $blogArticle->published = $request->get('published');
+        $blogArticle->save();
+
+        return response(null, 204);
+    }
+
     /**
      * Remove the specified resource from storage.
      *
diff --git a/app/Http/Requests/BlogArticlePublishRequest.php b/app/Http/Requests/BlogArticlePublishRequest.php
new file mode 100644
index 0000000..a261e44
--- /dev/null
+++ b/app/Http/Requests/BlogArticlePublishRequest.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Requests;
+
+use App\Http\Services\AuthService;
+use Illuminate\Foundation\Http\FormRequest;
+
+class BlogArticlePublishRequest extends FormRequest
+{
+    private $authService;
+
+    public function __construct(AuthService $authService, array $query = [], array $request = [], array $attributes = [], array $cookies = [], array $files = [], array $server = [], $content = null)
+    {
+        parent::__construct($query, $request, $attributes, $cookies, $files, $server, $content);
+
+        $this->authService = $authService;
+    }
+
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return $this->authService->isAuthenticated();
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'published' => 'required|boolean',
+        ];
+    }
+}
diff --git a/resources/js/views/BlogArticleEdit.vue b/resources/js/views/BlogArticleEdit.vue
index 2843631..6792c4c 100644
--- a/resources/js/views/BlogArticleEdit.vue
+++ b/resources/js/views/BlogArticleEdit.vue
@@ -1,7 +1,11 @@
 <template>
     <div class="blog-edit">
         <container>
-            <a href="javascript:void(0)" @click="gotoArticle" v-if="!!this.id"><i class="fas fa-eye"></i> View Article</a>
+            <div class="blog-links">
+                <a href="javascript:void(0)" @click="gotoArticle" v-if="!!this.id"><i class="fas fa-eye"></i> View Article</a>
+                <a href="javascript:void(0)" @click="publishArticle(true)" v-if="!this.published && !!this.id"><i class="fas fa-check"></i> Publish Article</a>
+                <a href="javascript:void(0)" @click="publishArticle(false)" v-else-if="!!this.id"><i class="fas fa-times"></i> Unpublish Article</a>
+            </div>
             <div class="article-form">
                 <input type="text" v-model="title">
                 <markdown-editor ref="editor" :render="false" @update:html="html = $event" @save="save" :rows="20"></markdown-editor>
@@ -27,6 +31,7 @@ export default {
         return {
             html: "",
             title: "",
+            published: null,
             errors: null,
         };
     },
@@ -38,6 +43,7 @@ export default {
             axios.get(`/api/blog/${this.id}`)
                 .then(res => {
                     this.$refs.editor.setContent(res.data.content, false);
+                    this.published = res.data.published;
                     this.title = res.data.title;
                 });
         }
@@ -72,6 +78,14 @@ export default {
         gotoArticle() {
             this.$router.push({ name: 'blog-article', params: { id: this.id }});
         },
+        publishArticle(state) {
+            axios.post(`/api/blog/${this.id}/publish`, {
+                published: state,
+            })
+                .then(() => {
+                    this.published = !this.published;
+                });
+        },
     },
     beforeRouteLeave(to, from, next) {
         if (this.$refs.editor.canRouteChange()) {
diff --git a/routes/api.php b/routes/api.php
index b25cf5c..e61ccd1 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -21,6 +21,7 @@ Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
 
 Route::get('/blog/recent', [\App\Http\Controllers\BlogArticleController::class, 'recent']);
 Route::get('/blog/popular', [\App\Http\Controllers\BlogArticleController::class, 'popular']);
+Route::post('/blog/{blogArticle}/publish', [\App\Http\Controllers\BlogArticleController::class, 'publish']);
 Route::resource('/blog', \App\Http\Controllers\BlogArticleController::class)->except(['create', 'edit'])->parameter('blog', 'blog-article');
 
 Route::get('/auth', [\App\Http\Controllers\AuthenticationController::class, 'isAuthenticated']);