diff --git a/app/Http/Controllers/Forms/FormController.php b/app/Http/Controllers/Forms/FormController.php
index f541de5..6c99b7b 100644
--- a/app/Http/Controllers/Forms/FormController.php
+++ b/app/Http/Controllers/Forms/FormController.php
@@ -34,7 +34,7 @@ class FormController extends Controller
         $this->authorize('viewAny', Form::class);
 
         $workspaceIsPro = $workspace->is_pro;
-        $forms = $workspace->forms()->with(['creator','views','submissions'])->get()->map(function (Form $form) use ($workspace, $workspaceIsPro){
+        $forms = $workspace->forms()->with(['creator','views','submissions'])->paginate(10)->through(function (Form $form) use ($workspace, $workspaceIsPro){
             // Add attributes for faster loading
             $form->extra = (object) [
                 'loadedWorkspace' => $workspace,
diff --git a/app/Http/Controllers/Forms/FormSubmissionController.php b/app/Http/Controllers/Forms/FormSubmissionController.php
index 5c96bc9..ba7a8f8 100644
--- a/app/Http/Controllers/Forms/FormSubmissionController.php
+++ b/app/Http/Controllers/Forms/FormSubmissionController.php
@@ -35,7 +35,8 @@ class FormSubmissionController extends Controller
         foreach ($form->submissions->toArray() as $row) {
             $formatter = (new FormSubmissionFormatter($form, $row['data']))
                 ->outputStringsOnly()
-                ->setEmptyForNoValue();
+                ->setEmptyForNoValue()
+                ->showRemovedFields();
             $tmp = $formatter->getCleanKeyValue();
             $tmp['Create Date'] = date("Y-m-d H:i", strtotime($row['created_at']));
             $allRows[] = $tmp;
diff --git a/app/Http/Controllers/Forms/PublicFormController.php b/app/Http/Controllers/Forms/PublicFormController.php
index 1cbc092..5b4fab1 100644
--- a/app/Http/Controllers/Forms/PublicFormController.php
+++ b/app/Http/Controllers/Forms/PublicFormController.php
@@ -21,7 +21,7 @@ class PublicFormController extends Controller
 
     public function show(Request $request, string $slug)
     {
-        $form = Form::whereSlug($slug)->firstOrFail();
+        $form = Form::whereSlug($slug)->whereVisibility('public')->firstOrFail();
         if ($form->workspace == null) {
             // Workspace deleted
             return $this->error([
diff --git a/app/Http/Requests/AnswerFormRequest.php b/app/Http/Requests/AnswerFormRequest.php
index 379d28a..7cd1f3b 100644
--- a/app/Http/Requests/AnswerFormRequest.php
+++ b/app/Http/Requests/AnswerFormRequest.php
@@ -40,7 +40,7 @@ class AnswerFormRequest extends FormRequest
      */
     public function authorize()
     {
-        return !$this->form->is_closed && !$this->form->max_number_of_submissions_reached;
+        return !$this->form->is_closed && !$this->form->max_number_of_submissions_reached && $this->form->visibility === 'public';
     }
 
     /**
diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
index ecfb073..e5fd267 100644
--- a/app/Http/Requests/UserFormRequest.php
+++ b/app/Http/Requests/UserFormRequest.php
@@ -29,6 +29,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'title' => 'required|string|max:60',
             'description' => 'nullable|string|max:2000',
             'tags' => 'nullable|array',
+            'visibility' => ['required',Rule::in(Form::VISIBILITY)],
 
             // Notifications
             'notifies' => 'boolean',
@@ -83,6 +84,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'properties.*.timezone' => 'sometimes|nullable',
             'properties.*.width' => ['sometimes', Rule::in(['full','1/2','1/3','2/3','1/3','3/4','1/4'])],
             'properties.*.allowed_file_types' => 'sometimes|nullable',
+            'properties.*.use_toggle_switch' => 'boolean|nullable',
 
             // Logic
             'properties.*.logic' => ['array', 'nullable', new FormPropertyLogicRule()],
diff --git a/app/Http/Resources/FormResource.php b/app/Http/Resources/FormResource.php
index 71dee8c..bad73e6 100644
--- a/app/Http/Resources/FormResource.php
+++ b/app/Http/Resources/FormResource.php
@@ -42,8 +42,10 @@ class FormResource extends JsonResource
             'can_be_indexed' => $this->can_be_indexed,
             'password' => $this->password,
             'tags' => $this->tags,
+            'visibility' => $this->visibility,
             'notification_emails' => $this->notification_emails,
             'slack_webhook_url' => $this->slack_webhook_url,
+            'removed_properties' => $this->removed_properties 
         ] : [];
 
         $baseData = $this->getFilteredFormData(parent::toArray($request), $this->userIsFormOwner());
diff --git a/app/Models/Forms/Form.php b/app/Models/Forms/Form.php
index b12cdbe..c2f2405 100644
--- a/app/Models/Forms/Form.php
+++ b/app/Models/Forms/Form.php
@@ -20,6 +20,7 @@ class Form extends Model
     const DARK_MODE_VALUES = ['auto', 'light', 'dark'];
     const THEMES = ['default', 'simple', 'notion'];
     const WIDTHS = ['centered', 'full'];
+    const VISIBILITY = ['public', 'draft'];
 
     use HasFactory, HasSlug, SoftDeletes;
 
@@ -45,6 +46,7 @@ class Form extends Model
         'title',
         'description',
         'tags',
+        'visibility',
 
         // Customization
         'theme',
diff --git a/app/Service/Forms/FormSubmissionFormatter.php b/app/Service/Forms/FormSubmissionFormatter.php
index 8ac7c5a..e4416d4 100644
--- a/app/Service/Forms/FormSubmissionFormatter.php
+++ b/app/Service/Forms/FormSubmissionFormatter.php
@@ -27,6 +27,8 @@ class FormSubmissionFormatter
 
     private $setEmptyForNoValue = false;
 
+    private $showRemovedFields = false;
+
     public function __construct(private Form $form, private array $formData)
     {
     }
@@ -55,6 +57,12 @@ class FormSubmissionFormatter
         return $this;
     }
 
+    public function showRemovedFields()
+    {
+        $this->showRemovedFields = true;
+        return $this;
+    }
+
     /**
      * Return a nice "FieldName": "Field Response" array
      * - If createLink enabled, returns html link for emails and links
@@ -63,10 +71,15 @@ class FormSubmissionFormatter
     public function getCleanKeyValue()
     {
         $data = $this->formData;
-        $fields = $this->form->properties;
+        $fields = ($this->showRemovedFields) ? array_merge($this->form->properties, $this->form->removed_properties) : $this->form->properties;
 
         $returnArray = [];
         foreach ($fields as &$field) {
+            $isRemoved = in_array($field['id'], array_column($this->form->removed_properties, 'id')) ?? false;
+            if($isRemoved){
+                $field['name'] = $field['name']." (deleted)";
+            }
+
             // If not present skip
             if (!isset($data[$field['id']])) {
                 if ($this->setEmptyForNoValue) {
diff --git a/database/factories/FormFactory.php b/database/factories/FormFactory.php
index 40d4850..b5e5809 100644
--- a/database/factories/FormFactory.php
+++ b/database/factories/FormFactory.php
@@ -58,6 +58,7 @@ class FormFactory extends Factory
         return [
             'title' => $this->faker->text(30),
             'description' => $this->faker->randomHtml(1),
+            'visibility' => 'public',
             'notifies' => false,
             'send_submission_confirmation' => false,
             'webhook_url' => null,
diff --git a/database/migrations/2022_10_07_122038_add_visibility_to_forms.php b/database/migrations/2022_10_07_122038_add_visibility_to_forms.php
new file mode 100644
index 0000000..acea5b7
--- /dev/null
+++ b/database/migrations/2022_10_07_122038_add_visibility_to_forms.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->string('visibility')->default('public');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('visibility');
+        });
+    }
+};
diff --git a/resources/js/components/forms/CheckboxInput.vue b/resources/js/components/forms/CheckboxInput.vue
index d4ea11c..d6ba46b 100644
--- a/resources/js/components/forms/CheckboxInput.vue
+++ b/resources/js/components/forms/CheckboxInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="wrapperClass">
     <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
-      {{ label }}
+      {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
     </v-checkbox>
     <small v-if="help" :class="theme.default.help">
       <slot name="help">{{ help }}</slot>
diff --git a/resources/js/components/forms/FlatSelectInput.vue b/resources/js/components/forms/FlatSelectInput.vue
index 8361024..f5d3250 100644
--- a/resources/js/components/forms/FlatSelectInput.vue
+++ b/resources/js/components/forms/FlatSelectInput.vue
@@ -6,6 +6,9 @@
       {{ label }}
       <span v-if="required" class="text-red-500 required-dot">*</span>
     </label>
+    <small v-if="help" :class="theme.SelectInput.help" class="block mb-2">
+      <slot name="help">{{ help }}</slot>
+    </small>
 
     <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-for="(option, index) in options" v-else :key="option[optionKey]"
@@ -22,9 +25,6 @@
       </div>
     </div>
 
-    <small v-if="help" :class="theme.SelectInput.help">
-      <slot name="help">{{ help }}</slot>
-    </small>
     <has-error v-if="hasValidation" :form="form" :field="name" />
   </div>
 </template>
diff --git a/resources/js/components/forms/ToggleSwitchInput.vue b/resources/js/components/forms/ToggleSwitchInput.vue
new file mode 100644
index 0000000..21739bd
--- /dev/null
+++ b/resources/js/components/forms/ToggleSwitchInput.vue
@@ -0,0 +1,31 @@
+<template>
+    <div :class="wrapperClass">
+      <div class="flex">
+        <v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled" :name="name" @input="$emit('input',$event)" />
+        <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
+      </div>
+      <small v-if="help" :class="theme.default.help">
+        <slot name="help">{{ help }}</slot>
+      </small>
+      <has-error v-if="hasValidation" :form="form" :field="name" />
+    </div>
+  </template>
+  
+  <script>
+  import inputMixin from '~/mixins/forms/input'
+  
+  import VSwitch from './components/VSwitch'
+  export default {
+    name: 'ToggleSwitchInput',
+  
+    components: { VSwitch },
+    mixins: [inputMixin],
+    props: {},
+  
+    mounted () {
+      this.compVal = !!this.compVal
+      this.$emit('input', !!this.compVal)
+    }
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/resources/js/components/forms/components/VSwitch.vue b/resources/js/components/forms/components/VSwitch.vue
index 24da137..2be7471 100644
--- a/resources/js/components/forms/components/VSwitch.vue
+++ b/resources/js/components/forms/components/VSwitch.vue
@@ -1,42 +1,15 @@
 <template>
-  <div>
-    <Motion
-      v-model="value"
-      :options="{
-        duration: 150,
-      }"
-      :trigger="[
-        'bg-gray-200 border-gray-300 duration-100 dark:bg-gray-700 dark:border-gray-600',
-        'bg-gray-200 dark:bg-gray-700',
-        'bg-nt-blue border-nt-blue',
-        'bg-nt-blue duration-100',
-      ]"
-      class="inline-flex items-center h-6 w-12 p-1 border rounded-full cursor-pointer focus:outline-none"
-      @click="$emit('input',!internalValue)"
-    >
-      <Motion
-        v-model="internalValue"
-        tag="span"
-        :options="{
-          duration: 150,
-        }"
-        :trigger="[
-          'translate-x-0 duration-150',
-          'rounded-2xl scale-75 duration-100',
-          'translate-x-6 duration-100',
-          'scale-100 duration-150',
-        ]"
-        class="inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-500 shadow"
-      />
-    </Motion>
+  <div @click="onClick">
+    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': internalValue}">
+      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': internalValue}" />
+    </div>
   </div>
 </template>
 
 <script>
-import Motion from 'tinymotion'
 export default {
   name: 'VSwitch',
-  components: { Motion },
+  components: { },
 
   props: {
     value: { type: Boolean, default: false }
@@ -48,14 +21,7 @@ export default {
     }
   },
 
-  computed: {
-    sizeClasses () {
-      if (this.size === 'small') {
-        return 'w-3 h-3'
-      }
-      return 'w-5 h-5'
-    }
-  },
+  computed: {},
 
   watch: {
     value (val) {
@@ -68,12 +34,10 @@ export default {
   },
 
   methods: {
+    onClick () {
+      this.$emit('input', !this.internalValue)
+      this.internalValue = !this.internalValue
+    }
   }
 }
-</script>
-
-<style scoped>
-.translate-x-6 {
-  --tw-translate-x: 1.4rem !important;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/resources/js/components/forms/index.js b/resources/js/components/forms/index.js
index bbb854e..70fad78 100644
--- a/resources/js/components/forms/index.js
+++ b/resources/js/components/forms/index.js
@@ -16,6 +16,7 @@ import ImageInput from './ImageInput'
 import DateInput from './DateInput';
 import RatingInput from './RatingInput';
 import FlatSelectInput from './FlatSelectInput';
+import ToggleSwitchInput from './ToggleSwitchInput';
 
 // Components that are registered globaly.
 [
@@ -34,7 +35,8 @@ import FlatSelectInput from './FlatSelectInput';
   RichTextAreaInput,
   DateInput,
   RatingInput,
-  FlatSelectInput
+  FlatSelectInput,
+  ToggleSwitchInput
 ].forEach(Component => {
   Vue.component(Component.name, Component)
 })
diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue
index 427acb0..7cdba83 100644
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/resources/js/components/open/forms/OpenForm.vue
@@ -317,6 +317,9 @@ export default {
       if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
         return 'FlatSelectInput'
       }
+      if (field.type === 'checkbox' && field.use_toggle_switch) {
+        return 'ToggleSwitchInput'
+      }
       return this.fieldComponents[field.type]
     },
     getFieldClasses (field) {
diff --git a/resources/js/components/open/forms/components/FormSubmissions.vue b/resources/js/components/open/forms/components/FormSubmissions.vue
index 5bb97ef..1d6bff0 100644
--- a/resources/js/components/open/forms/components/FormSubmissions.vue
+++ b/resources/js/components/open/forms/components/FormSubmissions.vue
@@ -2,11 +2,41 @@
   <div
     class="my-4 w-full mx-auto">
     <h3 class="font-semibold mb-4">
-      Form Submissions <span v-if="form && !isLoading && tableData.length > 0"
-                             class="text-right text-xs uppercase mb-2">
-      - <a :href="exportUrl" target="_blank">Export as CSV</a>
-    </span>
+      Form Submissions 
+      <span v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase mb-2"> - <a :href="exportUrl" target="_blank">Export as CSV</a></span>
+      <span v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2"> <a href="javascript:void(0);" @click="showColumnsModal=true">Display columns</a></span>
     </h3>
+
+    <!--  Table columns modal  -->
+    <modal :show="showColumnsModal" @close="showColumnsModal=false">
+      <div class="-m-6">
+        <div class="px-6 py-3">
+          <h2 class="text-nt-blue text-3xl font-bold">
+            Display columns
+          </h2>
+        </div>
+        <div class="border-t py-4 px-6">
+          <template v-if="properties.length > 0">
+            <h4 class="font-bold mb-2">Form Fields</h4>
+            <div v-for="field in properties" :key="field.id" class="p-2 border">
+              {{ field.name }}
+              <v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right" />
+            </div>
+          </template>
+          <template v-if="removed_properties.length > 0">
+            <h4 class="font-bold mb-2 mt-4">Removed Fields</h4>
+            <div v-for="field in removed_properties" :key="field.id" class="p-2 border">
+              {{ field.name }}
+              <v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right" />
+            </div>
+          </template>
+        </div>
+        <div class="flex justify-end mt-4 pb-5 px-6">
+          <v-button color="gray" shade="light" @click="showColumnsModal=false">Close</v-button>
+        </div>
+      </div>
+    </modal>
+
     <loader v-if="!form || isLoading" class="h-6 w-6 text-nt-blue mx-auto"/>
     <div v-else>
       <scroll-shadow
@@ -33,10 +63,11 @@ import axios from 'axios'
 import ScrollShadow from '../../../common/ScrollShadow'
 import OpenTable from '../../tables/OpenTable'
 import clonedeep from "clone-deep";
+import VSwitch from '../../../forms/components/VSwitch'
 
 export default {
   name: 'FormSubmissions',
-  components: {ScrollShadow, OpenTable},
+  components: {ScrollShadow, OpenTable, VSwitch},
   props: {},
   data() {
     return {
@@ -45,6 +76,10 @@ export default {
       tableData: [],
       currentPage: 1,
       fullyLoaded: false,
+      showColumnsModal: false,
+      properties: [],
+      removed_properties: [],
+      displayColumns: {},
     }
   },
   mounted() {
@@ -69,18 +104,6 @@ export default {
         this.$store.commit('open/working_form/set', value)
       }
     },
-    tableStructure() {
-      if (!this.form) {
-        return []
-      }
-      let tmp = this.form.properties.filter(property => !property.hasOwnProperty('hidden') || !property.hidden)
-      tmp.push({
-        "name": "Create Date",
-        "id": "create_date",
-        "type": "date"
-      });
-      return tmp
-    },
     exportUrl() {
       if (!this.form) {
         return ''
@@ -104,6 +127,20 @@ export default {
       })
       this.$set(this.form, 'properties', columns)
       this.formInitDone = true
+
+      this.properties = clonedeep(this.form.properties)
+      this.removed_properties = clonedeep(this.form.removed_properties)
+
+      // Get display columns from local storage
+      const tmpColumns = window.localStorage.getItem('display-columns-formid-'+this.form.id)
+      if(tmpColumns !== null && tmpColumns){
+        this.displayColumns = JSON.parse(tmpColumns)
+        this.onChangeDisplayColumns()
+      }else{
+        this.form.properties.forEach((field) => { 
+          this.displayColumns[field.id] = true 
+        })
+      }
     },
     getSubmissionsData() {
       if (!this.form || this.fullyLoaded) {
@@ -131,6 +168,13 @@ export default {
       this.$refs.shadows.toggleShadow()
       this.$refs.shadows.calcDimensions()
     },
+    onChangeDisplayColumns(){
+      window.localStorage.setItem('display-columns-formid-'+this.form.id, JSON.stringify(this.displayColumns))
+      const final_properties = this.properties.concat(this.removed_properties).filter((field) => {
+        return this.displayColumns[field.id] === true
+      })
+      this.$set(this.form, 'properties', final_properties)
+    }
   },
 }
 </script>
diff --git a/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue b/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
index 51fa584..00839ae 100644
--- a/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -46,7 +46,7 @@
           >
             <img alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)"
                  :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-                 class="w-20 h-20 absolute left-5 transition-all"
+                 class="w-20 h-20 object-contain absolute left-5 transition-all"
             >
           </div>
         </div>
diff --git a/resources/js/components/open/forms/components/form-components/FormInformation.vue b/resources/js/components/open/forms/components/form-components/FormInformation.vue
index 62631d4..f94bd12 100644
--- a/resources/js/components/open/forms/components/form-components/FormInformation.vue
+++ b/resources/js/components/open/forms/components/form-components/FormInformation.vue
@@ -27,6 +27,11 @@
                 placeholder="Select Tag(s)" :multiple="true" :allowCreation="true"
                 :options="allTagsOptions"
     />
+    <select-input name="visibility" label="Visibility" :form="form" class="mt-3 mb-6"
+                help="Only public form will be accessible"
+                placeholder="Select Visibility" :required="true"
+                :options="visibilityOptions"
+    />
     <button
       v-if="copyFormOptions.length > 0"
       class="group mt-3 cursor-pointer relative w-full rounded-lg border-transparent flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
@@ -86,7 +91,17 @@ export default {
   data () {
     return {
       showCopyFormSettingsModal: false,
-      copyFormId: null
+      copyFormId: null,
+      visibilityOptions: [
+        {
+          name: "Public",
+          value: "public"
+        },
+        {
+          name: "Draft (form won't be accessible)",
+          value: "draft"
+        }
+      ]
     }
   },
 
diff --git a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
index c0cf6f0..48bf09f 100644
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
@@ -37,6 +37,24 @@
         </v-checkbox>
       </div>
 
+      <!-- Checkbox -->
+      <div v-if="field.type === 'checkbox'" class="-mx-4 sm:-mx-6 p-5 border-b">
+        <h3 class="font-semibold block text-lg">
+          Checkbox
+        </h3>
+        <p class="text-gray-400 mb-5">
+          Advanced options for checkbox.
+        </p>
+        <v-checkbox v-model="field.use_toggle_switch" class="mt-4"
+                    name="use_toggle_switch" help=""
+        >
+          Use toggle switch
+        </v-checkbox>
+        <p class="text-gray-400 mb-5">
+          If enabled, checkbox will be replaced with a toggle switch
+        </p>
+      </div>
+
       <!-- File Uploads -->
       <div v-if="field.type === 'files'" class="-mx-4 sm:-mx-6 p-5 border-b">
         <h3 class="font-semibold block text-lg">
diff --git a/resources/js/pages/forms/create.vue b/resources/js/pages/forms/create.vue
index 7ce727c..21cdd88 100644
--- a/resources/js/pages/forms/create.vue
+++ b/resources/js/pages/forms/create.vue
@@ -171,6 +171,7 @@ export default {
       this.form = new Form({
         title: 'My Form',
         description: null,
+        visibility: 'public',
         workspace_id: this.workspace?.id,
         properties: [],
 
diff --git a/resources/js/pages/forms/show-public.vue b/resources/js/pages/forms/show-public.vue
index bd7589f..cd4ade1 100644
--- a/resources/js/pages/forms/show-public.vue
+++ b/resources/js/pages/forms/show-public.vue
@@ -11,7 +11,7 @@
       >
         <img alt="Logo Picture" :src="form.logo_picture"
              :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-             class="w-20 h-20 absolute left-5 transition-all"
+             class="w-20 h-20 object-contain absolute left-5 transition-all"
         >
       </div>
     </div>
diff --git a/resources/js/pages/forms/show.vue b/resources/js/pages/forms/show.vue
index 94c1f96..7e250ea 100644
--- a/resources/js/pages/forms/show.vue
+++ b/resources/js/pages/forms/show.vue
@@ -5,6 +5,7 @@
       <div v-if="form" class="sm:px-6">
         <h2 class="text-nt-blue text-3xl font-bold z-10 mt-6 mb-3">
           {{ form.title }}
+          <span v-if="form.visibility=='draft'" class="float-right text-white p-2 text-xs inline rounded-lg font-semibold mr-2 bg-gray-400 dark:bg-gray-700">Draft (not public)</span>
         </h2>
 
         <p class="mb-3">
@@ -305,7 +306,7 @@ import FormSubmissions from '../../components/open/forms/components/FormSubmissi
 const loadForms = function () {
   store.commit('open/forms/startLoading')
   store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
   })
 }
 
diff --git a/resources/js/pages/home.vue b/resources/js/pages/home.vue
index 01ad098..5cb84af 100644
--- a/resources/js/pages/home.vue
+++ b/resources/js/pages/home.vue
@@ -10,13 +10,11 @@
             Create a new form
           </v-button>
         </div>
-        <div v-if="formsLoading" class="text-center">
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
-        </div>
-        <p v-else-if="enrichedForms.length === 0 && !isFilteringForms">
+
+        <p v-if="!formsLoading && enrichedForms.length === 0 && !isFilteringForms">
           You don't have any form yet.
         </p>
-        <div v-else class="mb-10">
+        <div v-else-if="forms.length > 0" class="mb-10">
           <text-input v-if="forms.length > 5" class="mb-6" :form="searchForm" name="search" label="Search a form"
                       placeholder="Name of form to search"
           />
@@ -31,7 +29,8 @@
           </div>
           <div v-if="enrichedForms && enrichedForms.length" class="border border border-gray-300 dark:bg-notion-dark-light rounded-md w-full">
             <div v-for="(form, index) in enrichedForms" :key="form.id"
-                 class="p-4 w-full mx-auto border-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors cursor-pointer relative" :class="{'border-t':index!==0}"
+                 class="p-4 w-full mx-auto border-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors cursor-pointer relative" 
+                 :class="{'border-t':index!==0, 'bg-gray-50 dark:bg-gray-400':form.visibility=='draft'}"
             >
               <div class="items-center space-x-4 truncate">
                 <p class="truncate float-left">
@@ -65,6 +64,9 @@
             </template>.
           </p>
         </div>
+        <div v-if="formsLoading" class="text-center">
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        </div>
       </div>
     </div>
     <open-form-footer class="mt-8 border-t" />
@@ -82,7 +84,7 @@ import OpenFormFooter from '../components/pages/OpenFormFooter'
 const loadForms = function () {
   store.commit('open/forms/startLoading')
   store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
   })
 }
 
diff --git a/resources/js/store/modules/open/forms.js b/resources/js/store/modules/open/forms.js
index f8af0c1..ae9b237 100644
--- a/resources/js/store/modules/open/forms.js
+++ b/resources/js/store/modules/open/forms.js
@@ -2,6 +2,7 @@ import axios from 'axios'
 
 export const formsEndpoint = '/api/open/workspaces/{workspaceId}/forms'
 export const namespaced = true
+export let currentPage = 1
 
 // state
 export const state = {
@@ -36,6 +37,9 @@ export const mutations = {
   set (state, items) {
     state.content = items
   },
+  append (state, items) {
+    state.content = state.content.concat(items)
+  },
   addOrUpdate (state, item) {
     state.content = state.content.filter((val) => val.id !== item.id)
     state.content.push(item)
@@ -56,12 +60,26 @@ export const actions = {
   resetState (context) {
     context.commit('set', [])
     context.commit('stopLoading')
+    currentPage = 1
   },
   load (context, workspaceId) {
     context.commit('startLoading')
-    return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)).then((response) => {
-      context.commit('set', response.data)
-      context.commit('stopLoading')
+    return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)+'?page='+currentPage).then((response) => {
+      context.commit((currentPage == 1) ? 'set' : 'append', response.data.data)
+      if (currentPage < response.data.meta.last_page) {
+        currentPage += 1
+        context.dispatch('load', workspaceId)
+      } else {
+        context.commit('stopLoading')
+        currentPage = 1
+      }
     })
+  },
+  loadIfEmpty (context, workspaceId) {
+    if (context.state.content.length === 0) {
+      return context.dispatch('load', workspaceId)
+    }
+    context.commit('stopLoading')
+    return Promise.resolve()
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 8718719..c41ecdf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,6 +37,9 @@ module.exports = {
         10: '10rem',
         8: '2rem'
       },
+      translate: {
+        5.5: '1.4rem'
+      },
       boxShadow: {
         'inner-notion': '#0f0f0f1a 0px 0px 0px 1px inset',
         'focus-notion': '#2eaadcb3 0px 0px 0px 1px inset, #2eaadc66 0px 0px 0px 2px !important'
diff --git a/tests/Feature/Forms/AnswerFormTest.php b/tests/Feature/Forms/AnswerFormTest.php
index e76de0f..b89c820 100644
--- a/tests/Feature/Forms/AnswerFormTest.php
+++ b/tests/Feature/Forms/AnswerFormTest.php
@@ -58,6 +58,29 @@ it('can submit form till max submissions count is not reached at limit', functio
     }
 
     // Now, can not submit form, Because it's reached at submission limit
+    $this->postJson(route('forms.answer', $form->slug), $formData)
+        ->assertStatus(403);
+});
+
+it('can not open draft form', function () {
+    $user = $this->actingAsUser();
+    $workspace = $this->createUserWorkspace($user);
+    $form = $this->createForm($user, $workspace, [
+        'visibility' => 'draft'
+    ]);
+
+    $this->getJson(route('forms.show', $form->slug))
+        ->assertStatus(404);
+});
+
+it('can not submit draft form', function () {
+    $user = $this->actingAsUser();
+    $workspace = $this->createUserWorkspace($user);
+    $form = $this->createForm($user, $workspace, [
+        'visibility' => 'draft'
+    ]);
+    $formData = FormSubmissionDataFactory::generateSubmissionData($form);
+
     $this->postJson(route('forms.answer', $form->slug), $formData)
         ->assertStatus(403);
 });
\ No newline at end of file
diff --git a/tests/Feature/Forms/FormTest.php b/tests/Feature/Forms/FormTest.php
index be124eb..d0c08d0 100644
--- a/tests/Feature/Forms/FormTest.php
+++ b/tests/Feature/Forms/FormTest.php
@@ -28,12 +28,10 @@ it('can fetch forms', function () {
 
     $this->getJson(route('open.workspaces.forms.index', $workspace->id))
         ->assertSuccessful()
-        ->assertJsonCount(1)
-        ->assertJson(function (AssertableJson $json) use ($form) {
-            return $json->where('0.id', $form->id)
-                ->whereType('0.title', 'string')
-                ->whereType('0.properties', 'array');
-        });
+        ->assertJsonCount(3)
+        ->assertSuccessful()
+        ->assertJsonPath('data.0.id', $form->id)
+        ->assertJsonPath('data.0.title', $form->title);
 });
 
 it('can update a form', function () {
@@ -152,4 +150,4 @@ it('can create form with dark mode', function () {
                 ->where('dark_mode', 'dark')
                 ->etc();
         });
-});
\ No newline at end of file
+});