diff --git a/app/Http/Controllers/SettingsController.php b/app/Http/Controllers/SettingsController.php
index 981c47784..9b2a3c230 100644
--- a/app/Http/Controllers/SettingsController.php
+++ b/app/Http/Controllers/SettingsController.php
@@ -350,4 +350,9 @@ class SettingsController extends Controller
 
         return redirect(route('settings'))->with('status', 'Media settings successfully updated!');
     }
+
+    public function filtersHome(Request $request)
+    {
+        return view('settings.filters.home');
+    }
 }
diff --git a/resources/assets/js/custom_filters.js b/resources/assets/js/custom_filters.js
new file mode 100644
index 000000000..d3ef3e976
--- /dev/null
+++ b/resources/assets/js/custom_filters.js
@@ -0,0 +1,14 @@
+Vue.component(
+    'filter-card',
+    require('./components/filters/FilterCard.vue').default
+);
+
+Vue.component(
+    'filter-modal',
+    require('./components/filters/FilterModal.vue').default
+);
+
+Vue.component(
+    'filters-list',
+    require('./components/filters/FiltersList.vue').default
+);
diff --git a/resources/views/settings/filters/home.blade.php b/resources/views/settings/filters/home.blade.php
new file mode 100644
index 000000000..e5745ee37
--- /dev/null
+++ b/resources/views/settings/filters/home.blade.php
@@ -0,0 +1,11 @@
+@extends('settings.template')
+
+@section('section')
+
+<filters-list />
+
+@endsection
+
+@push('scripts')
+<script type="text/javascript" src="{{mix('js/custom_filters.js')}}"></script>
+@endpush
diff --git a/resources/views/settings/partial/sidebar.blade.php b/resources/views/settings/partial/sidebar.blade.php
index a7e874435..01a44ca60 100644
--- a/resources/views/settings/partial/sidebar.blade.php
+++ b/resources/views/settings/partial/sidebar.blade.php
@@ -17,6 +17,9 @@
             <li class="nav-item pl-3 {{request()->is('settings/media*')?'active':''}}">
                 <a class="nav-link font-weight-light text-muted" href="{{route('settings.media')}}">{{__('settings.media')}}</a>
             </li>
+            <li class="nav-item pl-3 {{request()->is('settings/filters*')?'active':''}}">
+                <a class="nav-link font-weight-light text-muted" href="{{route('settings.filters')}}">Filters</a>
+            </li>
             {{-- <li class="nav-item pl-3 {{request()->is('settings/notifications')?'active':''}}">
                 <a class="nav-link font-weight-light text-muted" href="{{route('settings.notifications')}}">{{__('settings.notifications')}}</a>
             </li> --}}
diff --git a/routes/web.php b/routes/web.php
index bb1903f3c..0d7c368de 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -365,6 +365,10 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
             Route::get('manage', 'ProfileMigrationController@index');
             Route::post('manage', 'ProfileMigrationController@store');
         });
+
+        Route::group(['prefix' => 'filters'], function() {
+            Route::get('/', 'SettingsController@filtersHome')->name('settings.filters');
+        });
     });
 
     Route::group(['prefix' => 'site'], function () {
diff --git a/webpack.mix.js b/webpack.mix.js
index af23a60c0..f32f510d6 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -44,6 +44,7 @@ mix.js('resources/assets/js/app.js', 'public/js')
 .js('resources/assets/js/groups.js', 'public/js')
 .js('resources/assets/js/group-status.js', 'public/js')
 .js('resources/assets/js/group-topic-feed.js', 'public/js')
+.js('resources/assets/js/custom_filters.js', 'public/js')
 .vue({ version: 2 });
 
 mix.extract();