diff --git a/app/Http/Controllers/CustomFormController.php b/app/Http/Controllers/CustomFormController.php
new file mode 100644
index 000000000..55cc4eb03
--- /dev/null
+++ b/app/Http/Controllers/CustomFormController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\CustomForm;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class CustomFormController extends Controller
+{
+    public function index()
+    {
+
+    }
+
+    public function show(CustomForm $customForm)
+    {
+        // Check if form can be viewed by given user/visitor.
+        $this->authorize('viewPublic', $customForm);
+
+        return Inertia::render('CustomForm/ShowCustomForm', [
+            'customForm' => $customForm->append('description_html'),
+        ]);
+    }
+
+    public function submit(Request $request)
+    {
+    }
+}
diff --git a/app/Models/CustomForm.php b/app/Models/CustomForm.php
index cba3485ac..18775339f 100644
--- a/app/Models/CustomForm.php
+++ b/app/Models/CustomForm.php
@@ -4,6 +4,7 @@
 
 use App\Enums\CustomFormStatus;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use League\CommonMark\GithubFlavoredMarkdownConverter;
 
 class CustomForm extends BaseModel
 {
@@ -15,4 +16,11 @@ class CustomForm extends BaseModel
         'require_restricted_permission_to_view_submission' => 'boolean',
         'is_notify_staff_on_submission' => 'boolean',
     ];
+
+    public function getDescriptionHtmlAttribute(): string|null
+    {
+        $converter = new GithubFlavoredMarkdownConverter();
+
+        return $this->description ? $converter->convertToHtml($this->description) : null;
+    }
 }
diff --git a/app/Policies/CustomFormPolicy.php b/app/Policies/CustomFormPolicy.php
index 30e8666ec..40056d325 100644
--- a/app/Policies/CustomFormPolicy.php
+++ b/app/Policies/CustomFormPolicy.php
@@ -2,6 +2,7 @@
 
 namespace App\Policies;
 
+use App\Enums\CustomFormStatus;
 use App\Models\CustomForm;
 use App\Models\User;
 use Illuminate\Auth\Access\HandlesAuthorization;
@@ -79,4 +80,46 @@ public function forceDelete(User $user, CustomForm $customForm): bool
             return true;
         }
     }
+
+    public function viewPublic(?User $user, CustomForm $customForm)
+    {
+        $invalidStatus = in_array($customForm->status, [CustomFormStatus::ARCHIVED, CustomFormStatus::DRAFT]);
+        if ($invalidStatus) {
+            return false;
+        }
+
+        $canCreateSubmission = $customForm->can_create_submission;
+        if ($canCreateSubmission === 'anyone' || $canCreateSubmission === 'auth') {
+            return true;
+        }
+
+        if ($canCreateSubmission === 'staff' && $user && $user->isStaffMember()) {
+            return true;
+        }
+
+        return false;
+    }
+
+    public function submit(User $user, CustomForm $customForm)
+    {
+        $isActive = $customForm->status === CustomFormStatus::ACTIVE;
+        if (! $isActive) {
+            return false;
+        }
+
+        $canCreateSubmission = $customForm->can_create_submission;
+        if ($canCreateSubmission === 'anyone') {
+            return true;
+        }
+
+        if ($canCreateSubmission === 'auth' && $user) {
+            return true;
+        }
+
+        if ($canCreateSubmission === 'staff' && $user && $user->isStaffMember()) {
+            return true;
+        }
+
+        return false;
+    }
 }
diff --git a/app/Providers/AuthServiceProvider.php b/app/Providers/AuthServiceProvider.php
index 913f70376..521f1e2be 100644
--- a/app/Providers/AuthServiceProvider.php
+++ b/app/Providers/AuthServiceProvider.php
@@ -51,9 +51,9 @@ class AuthServiceProvider extends ServiceProvider
     public function boot()
     {
         // Super Admin can do anything even if that permission is missing for him.
-        Gate::before(function ($user, $ability) {
-            return $user->hasRole(Role::SUPER_ADMIN_ROLE_NAME) ? true : null;
-        });
+        // Gate::before(function ($user, $ability) {
+        //     return $user->hasRole(Role::SUPER_ADMIN_ROLE_NAME) ? true : null;
+        // });
 
         Gate::define('viewPulse', function (User $user) {
             return $user->can('view pulse_admin_dashboard');
diff --git a/database/migrations/2023_12_23_062302_create_custom_forms_table.php b/database/migrations/2023_12_23_062302_create_custom_forms_table.php
index 4f50886f6..0aa290df8 100644
--- a/database/migrations/2023_12_23_062302_create_custom_forms_table.php
+++ b/database/migrations/2023_12_23_062302_create_custom_forms_table.php
@@ -19,6 +19,7 @@ public function up(): void
             $table->string('status')->default('active'); // draft, active, disabled, archived
 
             $table->string('can_create_submission')->default('anyone'); // anyone -> anyone, "auth" -> only authenticated users, "staff" -> only staff
+            $table->integer('max_submission_per_user')->nullable(); // null -> unlimited
             $table->boolean('require_restricted_permission_to_view_submission')->default(false); // Only staff with view restricted_custom_form_submission permission can view submission for this form.
             $table->boolean('is_notify_staff_on_submission')->default(false); // notify staff (with view access) when new submission is made.
 
diff --git a/resources/js/Pages/Admin/CustomForm/IndexCustomForm.vue b/resources/js/Pages/Admin/CustomForm/IndexCustomForm.vue
index 49412fcfe..2b048114d 100644
--- a/resources/js/Pages/Admin/CustomForm/IndexCustomForm.vue
+++ b/resources/js/Pages/Admin/CustomForm/IndexCustomForm.vue
@@ -165,7 +165,7 @@ const headerRow = [
           >
             <InertiaLink
               as="a"
-              :href="route('custom-page.show', item.id)"
+              :href="route('custom-form.show', item.slug)"
               class="inline-flex items-center justify-center text-blue-500 hover:text-blue-800"
             >
               <EyeIcon class="inline-block w-5 h-5" />
diff --git a/resources/js/Pages/CustomForm/ShowCustomForm.vue b/resources/js/Pages/CustomForm/ShowCustomForm.vue
new file mode 100644
index 000000000..34641db5c
--- /dev/null
+++ b/resources/js/Pages/CustomForm/ShowCustomForm.vue
@@ -0,0 +1,88 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <app-layout>
+    <app-head :title="customForm.title" />
+
+    <div class="py-4 px-2 md:py-12 md:px-10 max-w-7xl mx-auto">
+      <div class="flex justify-between md:mb-4">
+        <h1 class="text-center font-bold text-2xl text-gray-900 dark:text-gray-200 mb-5">
+          {{ customForm.title }}
+        </h1>
+        <div class="">
+          <inertia-link
+            :href="route('home')"
+            class="inline-flex items-center px-4 py-2 bg-gray-400 dark:bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-500 active:bg-gray-600 focus:outline-none focus:border-gray-500 focus:shadow-outline-gray transition ease-in-out duration-150"
+          >
+            <span>{{ __("Homepage") }}</span>
+          </inertia-link>
+        </div>
+      </div>
+      <div class="flex flex-col md:flex-row md:space-x-4">
+        <div
+          class="overflow-x-auto md:w-9/12"
+        >
+          <div class="min-w-full">
+            <div class="shadow max-w-none bg-white dark:bg-cool-gray-800 px-3 py-2 md:px-10 md:py-5 overflow-hidden rounded">
+              <div
+                v-if="customForm.description"
+                class="prose dark:prose-dark max-w-none mb-4"
+                v-html="customForm.description_html"
+              />
+
+              <FormKit
+                type="form"
+                @submit="submitForm"
+              >
+                <FormKitSchema :schema="formSchema" />
+              </FormKit>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="md:w-3/12 flex-1 space-y-4 mt-4 md:mt-0"
+        >
+          <server-status-box />
+          <shout-box />
+        </div>
+      </div>
+    </div>
+  </app-layout>
+</template>
+
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue';
+import ServerStatusBox from '@/Shared/ServerStatusBox.vue';
+import ShoutBox from '@/Shared/ShoutBox.vue';
+import { FormKitSchema } from '@formkit/vue';
+import {useFormKit} from '@/Composables/useFormKit';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    customForm: {
+        type: Object,
+    },
+});
+
+const formSchema = useFormKit().generateSchemaFromFieldsArray(props.customForm.fields);
+
+const submitForm = async (values) => {
+    await promisifyForm(values);
+};
+
+const promisifyForm = (values) => {
+    return new Promise((resolve, reject) => {
+        const form = useForm({
+            ...values
+        });
+        form.post(route('custom-form.submit', props.customForm.slug), {
+            onSuccess: visit => {
+                resolve(visit);
+            },
+            onError: err => {
+                reject(err);
+            }
+        });
+    });
+};
+</script>
diff --git a/routes/web.php b/routes/web.php
index 8cf240d7f..f5bd74f60 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -60,6 +60,11 @@
     Route::get('download', [\App\Http\Controllers\DownloadController::class, 'index'])->name('download.index');
     Route::get('download/{download:slug}', [\App\Http\Controllers\DownloadController::class, 'show'])->name('download.show');
     Route::get('download/{download:slug}/download', [\App\Http\Controllers\DownloadController::class, 'download'])->name('download.download');
+
+    // Custom Form
+    Route::get('form', [\App\Http\Controllers\CustomFormController::class, 'index'])->name('custom-form.index');
+    Route::get('form/{customForm:slug}', [\App\Http\Controllers\CustomFormController::class, 'show'])->name('custom-form.show');
+    Route::post('form/{customForm:slug}', [\App\Http\Controllers\CustomFormController::class, 'submit'])->name('custom-form.submit');
 });
 
 /**