diff --git a/README.md b/README.md
index 70b5f90..16101c9 100644
--- a/README.md
+++ b/README.md
@@ -77,6 +77,9 @@ $ pnpm ... # install/preinstall scripts trigger during project setup
 │   │   ├── i18n # manage locale/translation strings for backend
 │   │   ├── log # define loggers for backend
 │   │   └── utils # helper functions
+│   ├── service # service module, business layer
+│   │   ├── service.go # initialize provided services
+│   │   └── settings.go # functions about configure application
 │   ├── tray # tray module, presentations & services layer
 │   │   ├── icons # tray icons
 │   │   ├── menus # tray menus
@@ -91,18 +94,21 @@ $ pnpm ... # install/preinstall scripts trigger during project setup
 │       │   ├── docs # auto-generated, try script `docs:build`
 │       │   ├── swagger # auto-generated, try script `swag:docs`
 │       │   ├── static.go # manage static sources
-│       │   └── ... # other static sources
+│       │   └── ...
 │       ├── air.go # special function for air to run web service individually
 │       ├── router.go # entry point of swaggo docs generator, manage routes for API
 │       └── web.go # web service
 ├── build # sources to use during wails build process
 │   ├── bin # auto-generated, try script `wails:dev` or `wails:build`
-│   └── ... # wails related sources
+│   └── ...
 ├── diagrams # diagrams about 4+1 view model
 ├── docs # vitepress documentation
 ├── frontend # sources related to frontend code, workplace managed by PNPM
 │   ├── packages # frontend components, icons, etc.
-│   └── ... # wails frontend related sources
+│   ├── src # wails frontend sources
+│   │   ├── vite-env.d.ts # put go struct associated types into namespace app
+│   │   └── ...
+│   └── ...
 ├── main.go # wails main application, presentations & services layer
 ├── wails_life_cycle.go # wails life cycle
 ├── wails.json # wails CLI config
diff --git a/backend/model/my_option.go b/backend/model/my_option.go
index 93803ef..892c12b 100644
--- a/backend/model/my_option.go
+++ b/backend/model/my_option.go
@@ -8,6 +8,10 @@ type MyOption struct {
 	Value string ``              // Option value associated with name
 }
 
+func (mo *MyOption) Load() *gorm.DB {
+	return db.Where(mo).Find(mo)
+}
+
 func (mo *MyOption) Update(newValue string) *gorm.DB {
 	return db.Model(mo).Where(mo).Updates(MyOption{
 		Value: newValue,
diff --git a/backend/service/service.go b/backend/service/service.go
new file mode 100644
index 0000000..878bce3
--- /dev/null
+++ b/backend/service/service.go
@@ -0,0 +1,19 @@
+package service
+
+var (
+	instance *service
+)
+
+type service struct {
+	Settings *settings
+}
+
+func init() {
+	instance = &service{
+		Settings: &settings{},
+	}
+}
+
+func Settings() *settings {
+	return instance.Settings
+}
diff --git a/backend/service/settings.go b/backend/service/settings.go
new file mode 100644
index 0000000..665e5ae
--- /dev/null
+++ b/backend/service/settings.go
@@ -0,0 +1,54 @@
+package service
+
+import (
+	"my-app/backend/app"
+	"my-app/backend/model"
+)
+
+type settings struct{}
+
+func (s *settings) SaveOption(name string, value string) error {
+	option := model.MyOption{
+		Name: name,
+	}
+	result := option.Update(value)
+	if result.Error == nil {
+		switch name {
+		case app.CfgDisplayLanguage:
+			app.App().Config().DisplayLanguage = value
+		case app.CfgColorTheme:
+			app.App().Config().ColorTheme = value
+		case app.CfgLogPath:
+			app.App().Config().LogPath = value
+		case app.CfgWebPortHttp:
+			app.App().Config().Web.PortHttp = value
+		case app.CfgWebPortHttps:
+			app.App().Config().Web.PortHttps = value
+		case app.CfgWebDirCerts:
+			app.App().Config().Web.DirCerts = value
+		}
+	}
+	return result.Error
+}
+
+func (s *settings) GetOption(name string) string {
+	switch name {
+	case app.CfgDisplayLanguage:
+		return app.App().Config().DisplayLanguage
+	case app.CfgColorTheme:
+		return app.App().Config().ColorTheme
+	case app.CfgLogPath:
+		return app.App().Config().LogPath
+	case app.CfgWebPortHttp:
+		return app.App().Config().Web.PortHttp
+	case app.CfgWebPortHttps:
+		return app.App().Config().Web.PortHttps
+	case app.CfgWebDirCerts:
+		return app.App().Config().Web.DirCerts
+	}
+	return ""
+}
+
+func (s *settings) GetOptions() *app.Config {
+	return app.App().Config()
+}
diff --git a/backend/services/settings.go b/backend/services/settings.go
deleted file mode 100644
index 991faca..0000000
--- a/backend/services/settings.go
+++ /dev/null
@@ -1,22 +0,0 @@
-package services
-
-import (
-	"my-app/backend/app"
-	"my-app/backend/model"
-)
-
-func SaveColorThemeOption(theme string) error {
-	option := model.MyOption{
-		Name: app.CfgColorTheme,
-	}
-	result := option.Update(theme)
-	return result.Error
-}
-
-func SaveDisplayLanguageOption(lang string) error {
-	option := model.MyOption{
-		Name: app.CfgDisplayLanguage,
-	}
-	result := option.Update(lang)
-	return result.Error
-}
diff --git a/backend/tray/listeners.go b/backend/tray/listeners.go
index cdf0046..4a59674 100644
--- a/backend/tray/listeners.go
+++ b/backend/tray/listeners.go
@@ -4,7 +4,7 @@ import (
 	"fmt"
 	"my-app/backend/app"
 	"my-app/backend/pkg/i18n"
-	"my-app/backend/services"
+	"my-app/backend/service"
 	"my-app/backend/tray/menus"
 	"my-app/backend/web"
 
@@ -63,12 +63,11 @@ func (t *tray) displayLanguageListener() menus.DisplayLanguageListener {
 			t.colorTheme.SetLocale()
 			t.quit.SetLocale()
 
-			if err := services.SaveDisplayLanguageOption(locale.Lang.Code); err != nil {
+			if err := service.Settings().SaveOption(app.CfgDisplayLanguage, locale.Lang.Code); err != nil {
 				app.App().TrayLog().Fatalf("failed to update language option: %+v\n", err)
 			}
 
 			return true, func() {
-				app.App().Config().DisplayLanguage = lang
 				t.refreshTooltip()
 			}
 		},
@@ -88,14 +87,12 @@ func (t *tray) colorThemeListener() menus.ColorThemeListener {
 			}
 			runtime.EventsEmit(t.wailsCtx, "onColorThemeChanged", theme)
 
-			if err := services.SaveColorThemeOption(theme); err != nil {
+			if err := service.Settings().SaveOption(app.CfgColorTheme, theme); err != nil {
 				app.App().TrayLog().Fatalf("failed to update theme option: %+v\n", err)
 			}
 
 			return true, func() {
-				app.App().Config().ColorTheme = theme
 				t.refreshTooltip()
-				runtime.Show(t.wailsCtx)
 			}
 		},
 	}
diff --git a/diagrams/package.drawio b/diagrams/package.drawio
index 6580226..a175204 100644
--- a/diagrams/package.drawio
+++ b/diagrams/package.drawio
@@ -161,6 +161,16 @@
                         <mxPoint x="20" y="50" as="offset"/>
                     </mxGeometry>
                 </mxCell>
+                <mxCell id="81" value="service" style="shape=folder;fontStyle=1;tabWidth=80;tabHeight=30;tabPosition=left;html=1;boundedLbl=1;fontSize=14;" vertex="1" parent="1">
+                    <mxGeometry x="330" y="700" width="150" height="80" as="geometry"/>
+                </mxCell>
+                <mxCell id="82" value="&amp;lt;&amp;lt;import&amp;gt;&amp;gt;" style="html=1;endArrow=open;endSize=12;dashed=1;verticalAlign=bottom;jumpStyle=none;fontSize=14;" edge="1" parent="1" source="81" target="34">
+                    <mxGeometry x="-0.0909" width="160" relative="1" as="geometry">
+                        <mxPoint x="340" y="590" as="sourcePoint"/>
+                        <mxPoint x="340" y="660" as="targetPoint"/>
+                        <mxPoint x="1" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
             </root>
         </mxGraphModel>
     </diagram>
diff --git a/diagrams/package.png b/diagrams/package.png
index 8b3e452..14edd34 100644
Binary files a/diagrams/package.png and b/diagrams/package.png differ
diff --git a/frontend/packages/components/form/index.ts b/frontend/packages/components/form/index.ts
new file mode 100644
index 0000000..49e6c34
--- /dev/null
+++ b/frontend/packages/components/form/index.ts
@@ -0,0 +1,15 @@
+import type { App } from "vue";
+import Form from "./src/form.vue";
+import FormItem from "./src/form-item.vue";
+import FormGroup from "./src/form-group.vue";
+
+Form.install = (app: App) => {
+  app.component(Form.name, Form);
+  app.component(FormItem.name, FormItem);
+  app.component(FormGroup.name, FormGroup);
+};
+
+export default Form;
+export const MyForm = Form;
+export const MyFormItem = FormItem;
+export const MyFormGroup = FormGroup;
diff --git a/frontend/packages/components/form/src/form-group.vue b/frontend/packages/components/form/src/form-group.vue
new file mode 100644
index 0000000..56f4c1a
--- /dev/null
+++ b/frontend/packages/components/form/src/form-group.vue
@@ -0,0 +1,57 @@
+<template>
+  <fieldset class="my-form-group" :style="style">
+    <legend class="my-form-group__legend">{{ props.legend }}</legend>
+    <slot></slot>
+  </fieldset>
+</template>
+
+<script setup lang="ts" name="MyFormGroup">
+import { computed, inject, StyleValue, withDefaults } from "vue";
+import { Size, SizeRef } from "../../types";
+
+const props = withDefaults(
+  defineProps<{
+    legend?: string;
+    size?: Size;
+    labelWidth?: string;
+  }>(),
+  {}
+);
+const formSize = inject<SizeRef>("my-form-size");
+
+const style = computed<StyleValue>(() => {
+  const size = props.size || formSize?.value;
+  let width = "--my-border-width";
+  let radius = "--my-border-radius";
+  let space = "--my-space";
+  switch (size) {
+    case "large":
+      width += "-lg";
+      radius += "-lg";
+      space += "-lg";
+      break;
+    case "small":
+      width += "-sm";
+      radius += "-sm";
+      space += "-sm";
+  }
+  return {
+    borderWidth: `var(${width})`,
+    borderRadius: `var(${radius})`,
+    padding: `var(${space}) calc(0.4em + var(${space})) calc(0.275em + var(${space}))`,
+    margin: `0 var(${width}) var(${space})`,
+  };
+});
+</script>
+
+<style lang="scss">
+.my-form-group {
+  border-style: solid;
+  border-color: var(--my-color-border-lighter);
+
+  &__legend {
+    font-size: var(--my-font-size-xs);
+    color: var(--my-color-text-secondary);
+  }
+}
+</style>
diff --git a/frontend/packages/components/form/src/form-item.vue b/frontend/packages/components/form/src/form-item.vue
new file mode 100644
index 0000000..2f6cc62
--- /dev/null
+++ b/frontend/packages/components/form/src/form-item.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="my-form-item">
+    <label
+      class="my-form-item__label"
+      v-if="props.label"
+      :for="props.for"
+      :style="labelStyle"
+      >{{ props.label }}</label
+    >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyFormItem">
+import { computed, StyleValue, withDefaults } from "vue";
+import { LabelPosition } from "../../types";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    for?: string;
+    labelPosition?: LabelPosition;
+    labelWidth?: string;
+  }>(),
+  {}
+);
+
+const labelStyle = computed<StyleValue>(() => {
+  const width = props.labelWidth;
+  return {
+    width,
+  };
+});
+</script>
+
+<style lang="scss">
+.my-form-item {
+  &:not(:last-child) {
+    margin-bottom: 0.5em;
+  }
+
+  &__label {
+    display: inline-block;
+  }
+}
+</style>
diff --git a/frontend/packages/components/form/src/form.vue b/frontend/packages/components/form/src/form.vue
new file mode 100644
index 0000000..362e639
--- /dev/null
+++ b/frontend/packages/components/form/src/form.vue
@@ -0,0 +1,32 @@
+<template>
+  <form class="my-form">
+    <slot></slot>
+  </form>
+</template>
+
+<script setup lang="ts" name="MyForm">
+import { onUpdated, provide, ref, withDefaults } from "vue";
+import { LabelPosition, LabelPositionRef, Size, SizeRef } from "../../types";
+
+const props = withDefaults(
+  defineProps<{
+    size?: Size;
+    labelPosition?: LabelPosition;
+    labelWidth?: string;
+  }>(),
+  {
+    size: "default",
+    labelPosition: "left",
+    labelWidth: "auto",
+  }
+);
+
+const formSize = ref<Size>(props.size);
+const formLabelPosition = ref<LabelPosition>(props.labelPosition);
+provide<SizeRef>("my-form-size", formSize);
+provide<LabelPositionRef>("my-form-label-position", formLabelPosition);
+onUpdated(() => {
+  formSize.value = props.size;
+  formLabelPosition.value = props.labelPosition;
+});
+</script>
diff --git a/frontend/packages/components/index.ts b/frontend/packages/components/index.ts
index 93586bc..f955609 100644
--- a/frontend/packages/components/index.ts
+++ b/frontend/packages/components/index.ts
@@ -2,3 +2,4 @@ export * from "./icon";
 export * from "./container";
 export * from "./link";
 export * from "./menu";
+export * from "./form";
diff --git a/frontend/packages/components/link/src/link.vue b/frontend/packages/components/link/src/link.vue
index 4ceccd6..da43ecd 100644
--- a/frontend/packages/components/link/src/link.vue
+++ b/frontend/packages/components/link/src/link.vue
@@ -28,7 +28,6 @@ const props = withDefaults(
     type: "default",
     underline: true,
     disabled: false,
-    href: "",
   }
 );
 const emit = defineEmits<{
@@ -36,7 +35,9 @@ const emit = defineEmits<{
 }>();
 
 const href = computed(() => {
-  return props.disabled || !props.href ? undefined : props.href;
+  if (!props.disabled) {
+    return props.href || undefined;
+  }
 });
 
 const handleClick = (e: MouseEvent) => {
diff --git a/frontend/packages/components/menu/src/menu-group.vue b/frontend/packages/components/menu/src/menu-group.vue
index 344a320..ec7b45e 100644
--- a/frontend/packages/components/menu/src/menu-group.vue
+++ b/frontend/packages/components/menu/src/menu-group.vue
@@ -1,6 +1,6 @@
 <template>
   <li class="my-menu-group" :style="style">
-    <span class="my-menu-group__title" :style="titleStyle">{{
+    <span v-if="props.title" class="my-menu-group__title" :style="titleStyle">{{
       props.title
     }}</span>
     <ul class="my-menu-group__menu">
@@ -10,22 +10,20 @@
 </template>
 
 <script setup lang="ts" name="MyMenuGroup">
-import { computed, inject, ref, StyleValue, withDefaults } from "vue";
+import { computed, inject, StyleValue, withDefaults } from "vue";
 import { Size, SizeRef } from "../../types";
 
 const props = withDefaults(
   defineProps<{
-    title: string;
+    title?: string;
     size?: Size;
   }>(),
-  {
-    title: "[Title]",
-  }
+  {}
 );
-const menuSize = inject<SizeRef>("my-menu-size") || ref(props.size);
+const menuSize = inject<SizeRef>("my-menu-size");
 
 const style = computed<StyleValue>(() => {
-  const size = props.size || menuSize.value;
+  const size = props.size || menuSize?.value;
   let marginBottom = 1;
   switch (size) {
     case "large":
@@ -40,7 +38,7 @@ const style = computed<StyleValue>(() => {
 });
 
 const titleStyle = computed<StyleValue>(() => {
-  const size = props.size || menuSize.value;
+  const size = props.size || menuSize?.value;
   let marginBottom = 0.5;
   switch (size) {
     case "large":
diff --git a/frontend/packages/components/menu/src/menu-item.vue b/frontend/packages/components/menu/src/menu-item.vue
index fc14677..2879a95 100644
--- a/frontend/packages/components/menu/src/menu-item.vue
+++ b/frontend/packages/components/menu/src/menu-item.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts" name="MyMenuItem">
-import { StyleValue, ref, computed, inject, withDefaults } from "vue";
+import { StyleValue, computed, inject, withDefaults } from "vue";
 import { Size, SizeRef } from "../../types";
 
 const props = withDefaults(
@@ -24,10 +24,10 @@ const props = withDefaults(
     to: "#",
   }
 );
-const menuSize = inject<SizeRef>("my-menu-size") || ref(props.size);
+const menuSize = inject<SizeRef>("my-menu-size");
 
 const style = computed<StyleValue>(() => {
-  const size = props.size || menuSize.value;
+  const size = props.size || menuSize?.value;
   let lineHeight = 2.6;
   let space = "--my-space";
   let radius = "--my-border-radius";
diff --git a/frontend/packages/components/menu/src/menu.vue b/frontend/packages/components/menu/src/menu.vue
index 4ef789d..0a7ecbe 100644
--- a/frontend/packages/components/menu/src/menu.vue
+++ b/frontend/packages/components/menu/src/menu.vue
@@ -66,8 +66,8 @@ const style = computed<StyleValue>(() => ({
             color: var(--my-color-text-primary);
           }
           &.active {
-            color: var(--my-color-white);
-            background-color: var(--my-color-text-primary);
+            color: var(--my-color-primary);
+            background-color: var(--my-color-primary-3);
           }
         }
       } @else {
@@ -77,8 +77,8 @@ const style = computed<StyleValue>(() => ({
             color: var(--my-color-#{$type});
           }
           &.active {
-            color: var(--my-color-white);
-            background-color: var(--my-color-#{$type});
+            color: var(--my-color-#{$type});
+            background-color: var(--my-color-#{$type}-3);
           }
         }
       }
diff --git a/frontend/packages/components/theme-default/mixin.scss b/frontend/packages/components/theme-default/mixin.scss
index 99ad9c3..6018d93 100644
--- a/frontend/packages/components/theme-default/mixin.scss
+++ b/frontend/packages/components/theme-default/mixin.scss
@@ -19,7 +19,8 @@
     $TypeDanger: #f56c6c 8%,
     $TypeInfo: #909399 12%,
   ),
-  $numOfExtra: 3
+  $numOfExtra: 3,
+  $dark: false
 ) {
   @for $i from 0 through $numOfExtra {
     @if $i == 0 {
@@ -28,9 +29,10 @@
       }
     } @else {
       @each $name, $attrs in $colorsMap {
-        --my-color-#{$name}-#{$i}: #{lighten(
-            list.nth($attrs, 1),
-            $i * list.nth($attrs, 2)
+        --my-color-#{$name}-#{$i}: #{if(
+            $dark,
+            darken(list.nth($attrs, 1), $i * list.nth($attrs, 2)),
+            lighten(list.nth($attrs, 1), $i * list.nth($attrs, 2))
           )};
       }
     }
diff --git a/frontend/packages/components/theme-default/style.scss b/frontend/packages/components/theme-default/style.scss
index 0aa9f56..e67ea34 100644
--- a/frontend/packages/components/theme-default/style.scss
+++ b/frontend/packages/components/theme-default/style.scss
@@ -28,17 +28,19 @@
   --my-border-radius-sm: 4px;
   --my-border-radius: 6px;
   --my-border-radius-lg: 8px;
+}
 
-  /* colors */
+/* colors */
+@mixin light-colors {
   @include main-colors(
-    (
+    $colorsMap: (
       // brand color
-      $TypePrimary: #409eff 10%,
+      $TypePrimary: #409eff 11.5%,
       // functional color
-      $TypeSuccess: #67c23a 15%,
-      $TypeWarning: #e6a23c 12%,
-      $TypeDanger: #f56c6c 8%,
-      $TypeInfo: #909399 12%
+      $TypeSuccess: #67c23a 15.5%,
+      $TypeWarning: #e6a23c 12.5%,
+      $TypeDanger: #f56c6c 9.5%,
+      $TypeInfo: #909399 12.5%,
     )
   );
   // font color
@@ -56,3 +58,52 @@
   --my-color-black: #000000;
   --my-color-background-base: #ffffff;
 }
+@mixin dark-colors {
+  @include main-colors(
+    $colorsMap: (
+      // brand color
+      $TypePrimary: #409eff 18.5%,
+      // functional color
+      $TypeSuccess: #67c23a 14.5%,
+      $TypeWarning: #e6a23c 16.5%,
+      $TypeDanger: #f56c6c 20.5%,
+      $TypeInfo: #909399 16.5%,
+    ),
+    $dark: true
+  );
+  // font color
+  --my-color-text-primary: #cdced0;
+  --my-color-text-regular: #999b9f;
+  --my-color-text-secondary: #676a6f;
+  --my-color-text-placeholder: #32363e;
+  // border color
+  --my-color-border-base: #333333;
+  --my-color-border-light: #2b2b2b;
+  --my-color-border-lighter: #222222;
+  --my-color-border-extra-light: #111111;
+  // background color
+  --my-color-white: #000000;
+  --my-color-black: #ffffff;
+  --my-color-background-base: #000000;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    @include light-colors();
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark-colors();
+  }
+}
+
+:root {
+  &.my-theme-light {
+    @include light-colors();
+  }
+  &.my-theme-dark {
+    @include dark-colors();
+  }
+}
diff --git a/frontend/packages/components/types.ts b/frontend/packages/components/types.ts
index a0b13a5..1090105 100644
--- a/frontend/packages/components/types.ts
+++ b/frontend/packages/components/types.ts
@@ -14,3 +14,6 @@ export type SizeRef = Ref<Size>;
 
 export type Direction = "vertical" | "horizontal";
 export type DirectionRef = Ref<Direction>;
+
+export type LabelPosition = "left" | "top";
+export type LabelPositionRef = Ref<LabelPosition>;
diff --git a/frontend/packages/design/index.ts b/frontend/packages/design/index.ts
index c48e4ff..e46e827 100644
--- a/frontend/packages/design/index.ts
+++ b/frontend/packages/design/index.ts
@@ -5,9 +5,10 @@ import {
   MyContainer,
   MyLink,
   MyMenu,
+  MyForm,
 } from "@jinyaoma/my-app-components";
 
-const components = [MyIcon, MyContainer, MyLink, MyMenu];
+const components = [MyIcon, MyContainer, MyLink, MyMenu, MyForm];
 
 const install = (app: App) => {
   components.map((item) => {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6bc050a..a1f9309 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,10 +9,10 @@ EventsOn("onDisplayLanguageChanged", (lang: string) => {
   console.log("onDisplayLanguageChanged", lang);
   locale.value = lang;
 });
-const colorTheme = useColorTheme();
+const { changeTheme } = useColorTheme();
 EventsOn("onColorThemeChanged", (theme: string) => {
   console.log("onColorThemeChanged", theme);
-  colorTheme.theme = theme;
+  changeTheme(theme);
 });
 </script>
 
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 43e7175..d4e3c8b 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -1,5 +1,10 @@
 {
   "lang": "English",
+  "theme": {
+    "system": "System Default",
+    "light": "Light",
+    "dark": "Dark"
+  },
   "menu": {
     "main": {
       "title": "Main",
@@ -15,5 +20,19 @@
   "footer": {
     "openVitePress": "Open VitePress Docs",
     "openSwagger": "Open Swagger Docs"
+  },
+  "settings": {
+    "general": {
+      "legend": "General",
+      "displayLanguage": "Display Language",
+      "colorTheme": "Color Theme",
+      "logPath": "Log Path"
+    },
+    "webService": {
+      "legend": "Web Service",
+      "portHttp": "HTTP Port",
+      "portHttps": "HTTPS Port",
+      "dirCerts": "TLS Certificate Path"
+    }
   }
 }
diff --git a/frontend/src/i18n/locales/zh.json b/frontend/src/i18n/locales/zh.json
index fb8a0c5..7ec2a23 100644
--- a/frontend/src/i18n/locales/zh.json
+++ b/frontend/src/i18n/locales/zh.json
@@ -1,5 +1,10 @@
 {
   "lang": "简体中文",
+  "theme": {
+    "system": "跟随系统",
+    "light": "浅色",
+    "dark": "深色"
+  },
   "menu": {
     "main": {
       "title": "主菜单",
@@ -15,5 +20,19 @@
   "footer": {
     "openVitePress": "打开 VitePress 文档",
     "openSwagger": "打开 Swagger 文档"
+  },
+  "settings": {
+    "general": {
+      "legend": "通用",
+      "displayLanguage": "显示语言",
+      "colorTheme": "颜色主题",
+      "logPath": "日志保存路径"
+    },
+    "webService": {
+      "legend": "Web 服务",
+      "portHttp": "HTTP 端口",
+      "portHttps": "HTTPS 端口",
+      "dirCerts": "TLS 证书路径"
+    }
   }
 }
diff --git a/frontend/src/store/color-theme.ts b/frontend/src/store/color-theme.ts
index 62284bc..3f38881 100644
--- a/frontend/src/store/color-theme.ts
+++ b/frontend/src/store/color-theme.ts
@@ -1,7 +1,19 @@
 import { defineStore } from "pinia";
 
+const prefix = "my-theme-";
+
 export const useColorTheme = defineStore("color-theme", {
   state: () => ({
     theme: "system",
   }),
+  actions: {
+    changeTheme(theme: string) {
+      const root = document.querySelector(":root");
+      if (root) {
+        root.classList.remove(prefix + this.theme);
+        root.classList.add(prefix + theme);
+      }
+      this.theme = theme;
+    },
+  },
 });
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index a50da35..06df14d 100644
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -12,10 +12,10 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
   user-select: none;
-}
 
-body {
-  margin: 0;
+  body {
+    margin: 0;
+  }
 }
 
 @media (prefers-color-scheme: light) {
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index c2f70d6..b7a5dae 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -4,7 +4,7 @@ import { useColorTheme } from "../store/color-theme";
 import { EventsOn } from "../../wailsjs/runtime";
 
 const { t, locale } = useI18n();
-const colorTheme = useColorTheme();
+const { theme, changeTheme } = useColorTheme();
 </script>
 
 <template>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 7078763..8d942a8 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -4,7 +4,7 @@ import { useColorTheme } from "../store/color-theme";
 import { EventsOn } from "../../wailsjs/runtime";
 
 const { t, locale } = useI18n();
-const colorTheme = useColorTheme();
+const { theme, changeTheme } = useColorTheme();
 </script>
 
 <template>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index e7db14d..add9538 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -2,21 +2,70 @@
 import { useI18n } from "vue-i18n";
 import { useColorTheme } from "../store/color-theme";
 import { EventsOn } from "../../wailsjs/runtime";
+import { GetOptions } from "../../wailsjs/go/service/settings";
+import { ref } from "vue";
 
 const { t, locale } = useI18n();
 const colorTheme = useColorTheme();
+
+const options = ref<app.Config>();
+GetOptions().then((config) => {
+  options.value = config;
+});
 </script>
 
 <template>
   <my-container class="settings">
     <my-main>
       <h2>{{ t("menu.main.settings") }}</h2>
+      <my-form>
+        <my-form-group :legend="t('settings.general.legend')">
+          <my-form-item
+            :label="t('settings.general.displayLanguage')"
+            label-width="10em"
+          >
+            {{ t("lang") }}
+          </my-form-item>
+          <my-form-item
+            :label="t('settings.general.colorTheme')"
+            label-width="10em"
+          >
+            {{ t(`theme.${colorTheme.theme}`) }}
+          </my-form-item>
+          <my-form-item
+            :label="t('settings.general.logPath')"
+            label-width="10em"
+          >
+            {{ options?.LogPath }}
+          </my-form-item>
+        </my-form-group>
+        <my-form-group :legend="t('settings.webService.legend')">
+          <my-form-item
+            :label="t('settings.webService.portHttp')"
+            label-width="10em"
+          >
+            {{ options?.Web.PortHttp }}
+          </my-form-item>
+          <my-form-item
+            :label="t('settings.webService.portHttps')"
+            label-width="10em"
+          >
+            {{ options?.Web.PortHttps }}
+          </my-form-item>
+          <my-form-item
+            :label="t('settings.webService.dirCerts')"
+            label-width="10em"
+          >
+            {{ options?.Web.DirCerts }}
+          </my-form-item>
+        </my-form-group>
+      </my-form>
     </my-main>
   </my-container>
 </template>
 
 <style lang="scss" scoped>
 .settings {
-  max-width: 800px;
+  max-width: 560px;
 }
 </style>
diff --git a/frontend/src/views/Test.vue b/frontend/src/views/Test.vue
index 6282741..c85e289 100644
--- a/frontend/src/views/Test.vue
+++ b/frontend/src/views/Test.vue
@@ -1,42 +1,17 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { useColorTheme } from "../store/color-theme";
 import {
   Hide,
   WindowMinimise,
   WindowToggleMaximise,
 } from "../../wailsjs/runtime";
 
-const { t } = useI18n();
-const colorTheme = useColorTheme();
-
 const count = ref(0);
 const msg = ref("Vite + Vue");
 </script>
 
 <template>
   <div class="test">
-    <div
-      style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1em;
-      "
-    >
-      <a href="#" target="_blank">
-        <img src="/icon.svg" class="logo avatar" />
-      </a>
-      <div>
-        <my-icon fix-width></my-icon>
-      </div>
-      <button @click="Hide">Hide</button>
-      <button @click="WindowMinimise">WindowMinimise</button>
-      <button @click="WindowToggleMaximise">WindowToggleMaximise</button>
-      <div>{{ t("lang") }}</div>
-      <div>{{ colorTheme.theme }}</div>
-    </div>
     <div>
       <a href="https://vitejs.dev" target="_blank">
         <img src="/vite.svg" class="logo" alt="Vite logo" />
@@ -44,9 +19,15 @@ const msg = ref("Vite + Vue");
       <a href="https://vuejs.org/" target="_blank">
         <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
       </a>
+      <a href="#" target="_blank">
+        <img src="/icon.svg" class="logo avatar" />
+      </a>
     </div>
     <h1>{{ msg }}</h1>
     <div class="card">
+      <button @click="Hide">Hide</button>&nbsp;
+      <button @click="WindowMinimise">WindowMinimise</button>&nbsp;
+      <button @click="WindowToggleMaximise">WindowToggleMaximise</button>&nbsp;
       <button type="button" @click="count++">count is {{ count }}</button>
       <p>
         Edit
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index fc81239..b99f3b9 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -5,3 +5,16 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+namespace app {
+  declare type Config = {
+    ColorTheme: string;
+    DisplayLanguage: string;
+    LogPath: string;
+    Web: {
+      DirCerts: string;
+      PortHttp: string;
+      PortHttps: string;
+    };
+  };
+}
diff --git a/main.go b/main.go
index 2fa5af4..697125a 100644
--- a/main.go
+++ b/main.go
@@ -4,6 +4,7 @@ import (
 	"embed"
 	"my-app/backend/app"
 	"my-app/backend/pkg/utils"
+	"my-app/backend/service"
 
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/logger"
@@ -45,8 +46,10 @@ func main() {
 		OnDomReady:         wlc.domReady,
 		OnShutdown:         wlc.shutdown,
 		OnBeforeClose:      wlc.beforeClose,
-		Bind:               []interface{}{},
-		WindowStartState:   options.Normal,
+		Bind: []interface{}{
+			service.Settings(),
+		},
+		WindowStartState: options.Normal,
 		Windows: &windows.Options{
 			WebviewIsTransparent:              true,
 			WindowIsTranslucent:               false,