diff --git a/public/js/components/layout/BaseLayout.js b/public/js/components/layout/BaseLayout.js
new file mode 100644
index 000000000..c68de1c92
--- /dev/null
+++ b/public/js/components/layout/BaseLayout.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ */
+
+export default {
+ props: {
+ title: '',
+ subtitle: '',
+ mainCols: {
+ type: Array,
+ default: []
+ },
+ asideCols: {
+ type: Array,
+ default: []
+ },
+ },
+ computed: {
+ mainGridCols() {
+ return this.mainCols.length > 0 ? `col-md-${this.mainCols[0]}` : "col-md-12";
+ },
+ asideGridCols() {
+ return this.asideCols.length > 0 ? `col-md-${this.asideCols[0]}` : "";
+ }
+ },
+ template: `
+
+
+ {{ title }}{{ subtitle }}
+
+
+
+ {{ mainGridCols }}
+
+
+
+