diff --git a/app/Controllers/HeaderImageController.php b/app/Controllers/HeaderImageController.php
index 613edbe8f..7c87ee819 100644
--- a/app/Controllers/HeaderImageController.php
+++ b/app/Controllers/HeaderImageController.php
@@ -88,6 +88,10 @@ public function store(Request $request)
         $header_image = new HeaderImage($request->all());
         $header_image->author()->associate($request->user());
 
+        if($request->hasFile($this->form_field_name)){
+            $header_image->type = explode('/',request()->{$this->form_field_name}->getMimeType())[0];
+        }
+
         $this->uploadImage($header_image);
 
         if ($header_image->save()) {
diff --git a/app/Controllers/Trait/UploadsImage.php b/app/Controllers/Trait/UploadsImage.php
index fb42af046..8f0a9f71d 100644
--- a/app/Controllers/Trait/UploadsImage.php
+++ b/app/Controllers/Trait/UploadsImage.php
@@ -24,7 +24,7 @@ public function uploadImage($model): bool {
             File::ensureDirectoryExists($model->getImageDirectory());
             $img = request()->{$this->form_field_name}->store($this->getStrippedDirectoryPath($model));
             $model->attachImage($img);
-            if (extension_loaded('gd')) {
+            if (extension_loaded('gd') && starts_with(request()->{$this->form_field_name}->getMimeType(), 'image/')) {
 		        File::ensureDirectoryExists($model->getImageDirectory() . '/thumbs');
                 \Intervention\Image\ImageManagerStatic::make(storage_path($img))->fit(300, 200)->save($model->getThumbnailDirectory(). DIRECTORY_SEPARATOR . $model->image);
             }
diff --git a/app/Model/HeaderImage.php b/app/Model/HeaderImage.php
index 18a86ac5c..2e7fd7d5e 100644
--- a/app/Model/HeaderImage.php
+++ b/app/Model/HeaderImage.php
@@ -19,7 +19,7 @@ class HeaderImage extends Model {
      * @var array
      */
     protected $fillable = [
-        'title', 'link' ,'description', 'image', 'active',
+        'title', 'type' ,'link' ,'description', 'image', 'active',
     ];
 
 }
diff --git a/app/View/media/header_images.blade.php b/app/View/media/header_images.blade.php
index 37d8beeb4..fc3d43e46 100644
--- a/app/View/media/header_images.blade.php
+++ b/app/View/media/header_images.blade.php
@@ -37,10 +37,19 @@
                                         <span class='fa fa-pencil' aria-hidden='true'
                                             style=' font-size: 1.4em;z-index:15;top:3px;right:3px;margin-bottom:-15px;'></span>
                                     </a>
+
+                                    @if($each->type === 'video')
+                                        <video controls width='100%' height='75%;' style="object-fit:cover;">
+                                            <source src="storage/images/header_images/{{ $each->image }}" >
+                                            Your browser does not support the video tag.
+                                        </video> 
+                                    @else
                                     <img src='storage/images/header_images/{{ $each->image }}' alt=''
                                         class='card-img-top' width='100%' height='75%;' style="object-fit:cover;">
+                                    @endif
+
                                     <div class="card-body text-black">
-                                        <h5 class="card-title">{{ $each->title }}</h5>
+                                        <h5 class="card-title">{{ $each->title }}<small> | {{$each->type}}</small></h5>
                                     </div>
                                     <ul class="list-group list-group-flush mb-3">
                                         <a class='btn btn-danger btn-xs btn-block'
@@ -175,10 +184,17 @@ class='btn btn-primary'>{{ trans('actions.save') }}</button>
                                         </div>
                                     </div>
                                 </div>
+                                @if($each->type === 'video')
+                                <video controls width='100%' height='75%;' style="object-fit:cover;">
+                                    <source src="storage/images/header_images/{{ $each->image }}" >
+                                    Your browser does not support the video tag.
+                                </video> 
+                                @else
                                 <img src='storage/images/header_images/{{ $each->image }}' alt=''
                                     class='card-img-top' width='100%' height='75%;' style="object-fit:cover;">
+                                @endif
                                 <div class="card-body text-black">
-                                    <h5 class="card-title">{{ $each->title }}</h5>
+                                    <h5 class="card-title">{{ $each->title }}<small> | {{$each->type}}</small></h5>
                                 </div>
                             </div>
 
@@ -205,13 +221,21 @@ class='card-img-top' width='100%' height='75%;' style="object-fit:cover;">
                                                 </div>
                                                 <div class="mb-3">
                                                     <div class="row">
-                                                        <div class="col-11">
+                                                        <div class="col-9">
                                                             <label for="header-image-image"
-                                                                class="form-label">Image</label>
+                                                                class="form-label">Media</label>
                                                             <input type="text" class="form-control disabled"
                                                                 id="header-image-title" value="{{ $each->getImage() }}"
                                                                 disabled>
 
+                                                        </div>
+                                                        <div class="col-2">
+                                                            <label for="header-image-image"
+                                                                class="form-label">Media</label>
+                                                            <input type="text" class="form-control disabled"
+                                                                id="header-image-type" value="{{ $each->type }}"
+                                                                disabled>
+
                                                         </div>
                                                         <div class="col-1">
                                                             <label for="header-image-image"
@@ -277,7 +301,7 @@ class='btn btn-primary'>{{ trans('actions.save') }}</button>
 
             <div class='modal upload_images' id='create_file' tabindex='-1' role='dialog'
                 aria-labelledby='myModalLabel' aria-hidden='true'>
-                <div class='modal-dialog modal-xl'>
+                <div class='modal-dialog modal-xl p-5'>
                     <div class='modal-content'>
                         <div class='modal-header modal-header-primary bg-primary'>
                             <h4 class='modal-title text-white'>Upload images</h4>
@@ -288,8 +312,8 @@ class='btn btn-primary'>{{ trans('actions.save') }}</button>
                             <div class='modal-body'>
                                 @csrf
                                 <div class='form-group'>
-                                    <label for='file'>Upload file:</label>
-                                    <input name='up_file' id='input-2' type='file' class='file' accept="image/*"
+                                    <label for='file'>Upload file</label>
+                                    <input name='up_file' id='input-2' type='file' class='file' accept="image/*, video/*"
                                         multiple='true' data-show-upload='false' data-show-caption='true' required>
                                 </div>
                                 <div class="mb-3">
diff --git a/database/migrations/2016_10_20_000000_create_header_images_table.php b/database/migrations/2016_10_20_000000_create_header_images_table.php
index 606926d60..3c6985d7c 100644
--- a/database/migrations/2016_10_20_000000_create_header_images_table.php
+++ b/database/migrations/2016_10_20_000000_create_header_images_table.php
@@ -20,6 +20,7 @@ public function up()
         Schema::create($this->table_name, function (Blueprint $table) {
             $table->increments('id');
             $table->string('title')->nullable();
+            $table->string('type')->nullable();
             $table->string('link')->nullable();
             $table->text('description')->nullable();
             $table->string('image');
diff --git a/database/seeders/ContentSeeder.php b/database/seeders/ContentSeeder.php
index ac06f4072..864c82b68 100644
--- a/database/seeders/ContentSeeder.php
+++ b/database/seeders/ContentSeeder.php
@@ -76,6 +76,7 @@ public function run()
         DB::table('header_images')->insert([
             'id' => 1,
             'title' => 'default',
+            'type' => 'image',
             'image' => 'abovethecity.jpg',
             'author_id' => 1,
             'active' => 1
diff --git a/package-lock.json b/package-lock.json
index 88534920b..206785b43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@eonasdan/tempus-dominus": "^6.9.11",
                 "@popperjs/core": "^2.11.6",
                 "@vue/compiler-sfc": "^3.2.37",
                 "@vue/composition-api": "^1.7.0",
@@ -1864,6 +1865,23 @@
                 "node": ">=10.0.0"
             }
         },
+        "node_modules/@eonasdan/tempus-dominus": {
+            "version": "6.9.11",
+            "resolved": "https://registry.npmjs.org/@eonasdan/tempus-dominus/-/tempus-dominus-6.9.11.tgz",
+            "integrity": "sha512-KFOyMoCy6OCIl0dzWq4it2zu/jV4YWrSxxLmXR2XClVV9D9f/DaLjEhADJCYSjWBlTYanE18ACjVoyrfsHikgA==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://ko-fi.com/eonasdan"
+            },
+            "peerDependencies": {
+                "@popperjs/core": "^2.11.6"
+            },
+            "peerDependenciesMeta": {
+                "@popperjs/core\"": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
diff --git a/package.json b/package.json
index 68b6873fc..9192a4dbb 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
         "webpack-cli": "^5.0.2"
     },
     "dependencies": {
+        "@eonasdan/tempus-dominus": "^6.9.11",
         "@popperjs/core": "^2.11.6",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/composition-api": "^1.7.0",
diff --git a/routes/api.php b/routes/api.php
index b128697e2..9ceffba32 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -41,6 +41,10 @@
     return response()->json(['error'=>'Username or password incorrect'], 401);
 });
 
+Route::get('/blogposts/slug/{slug}', function($slug){
+  $blogpost = \App\Model\Blogpost::findBySlug($slug);
+  return response()->json($blogpost);
+});
 
 Route::apiResource('blogposts', \App\Controllers\BlogpostController::class)
             ->only(['index', 'show']);