diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 8f82631b..fd7ebbf6 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -107,6 +107,10 @@
   margin-top: 10px;
 }
 
+.mt-20 {
+  margin-top: 20px;
+}
+
 .mb-5 {
   margin-bottom: 5px;
 }
diff --git a/src/views/dashboard/components/WidgetLink.vue b/src/views/dashboard/components/WidgetLink.vue
index 35684e83..4ce17de5 100644
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
       <label class="mr-5">{{ t("setDuration") }}</label>
       <el-switch v-model="hasDuration" />
     </div>
-    <div class="time-range" v-if="hasDuration">
+    <div v-if="hasDuration">
       <label class="mr-20">{{ t("duration") }}</label>
       <TimePicker
         :value="[appStore.durationRow.start, appStore.durationRow.end]"
@@ -27,7 +27,7 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
     </div>
-    <el-button size="small" type="primary" class="mt-10" @click="getLink">{{ t("generateLink") }}</el-button>
+    <el-button size="small" type="primary" class="mt-20" @click="getLink">{{ t("generateLink") }}</el-button>
     <div v-show="widgetLink" class="link mt-10" @click="viewPage">{{ host + widgetLink }}</div>
   </div>
 </template>
@@ -43,7 +43,7 @@ limitations under the License. -->
   const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const selectorStore = useSelectorStore();
-  const hasDuration = ref<boolean>(false);
+  const hasDuration = ref<boolean>(true);
   const widgetLink = ref<string>("");
   const dates = ref<Date[]>([]);
   const host = window.location.host;
@@ -93,8 +93,4 @@ limitations under the License. -->
     height: 300px;
     font-size: 12px;
   }
-
-  .time-range {
-    margin-bottom: 20px;
-  }
 </style>