diff --git a/README.md b/README.md
index e7a72e4..b8c852e 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,13 @@ Reviewer
 Submitter
 - 領取稿費
 
+## Frontend
+
+- For icon, use [lucide-vue-next](https://lucide.dev/icons)
+- For Component, use [shadcn-vue](https://www.shadcn-vue.com/docs/components/accordion.html)
+- Vue 3 + Vite + TypeScript + TailwindCSS
+
+
 ## Reference
 
 - https://github.com/consenlabs/ethtaipei2023-aa-workshop
diff --git a/frontend/README.md b/frontend/README.md
deleted file mode 100644
index 2068aae..0000000
--- a/frontend/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# RoyaltyAutoClaim Frontend
-
-## Tech stack
-
-- Component library is using [shadcn-vue](https://www.shadcn-vue.com/docs/components/accordion.html)
-- TailwindCSS
-- Vue 3 + Vite + TypeScript
-
diff --git a/frontend/package.json b/frontend/package.json
index 5a3ced7..76ecc18 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^12.4.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.473.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 0460ec2..cabf37b 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@vueuse/core':
+        specifier: ^12.4.0
+        version: 12.4.0(typescript@5.6.3)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -478,12 +481,21 @@ packages:
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
+  '@vueuse/core@12.4.0':
+    resolution: {integrity: sha512-XnjQYcJwCsyXyIafyA6SvyN/OBtfPnjvJmbxNxQjCcyWD198urwm5TYvIUUyAxEAN0K7HJggOgT15cOlWFyLeA==}
+
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
+  '@vueuse/metadata@12.4.0':
+    resolution: {integrity: sha512-AhPuHs/qtYrKHUlEoNO6zCXufu8OgbR8S/n2oMw1OQuBQJ3+HOLQ+EpvXs+feOlZMa0p8QVvDWNlmcJJY8rW2g==}
+
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
+  '@vueuse/shared@12.4.0':
+    resolution: {integrity: sha512-9yLgbHVIF12OSCojnjTIoZL1+UA10+O4E1aD6Hpfo/DKVm5o3SZIwz6CupqGy3+IcKI8d6Jnl26EQj/YucnW0Q==}
+
   alien-signals@0.4.14:
     resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
 
@@ -1412,8 +1424,19 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@12.4.0(typescript@5.6.3)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 12.4.0
+      '@vueuse/shared': 12.4.0(typescript@5.6.3)
+      vue: 3.5.13(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/metadata@10.11.1': {}
 
+  '@vueuse/metadata@12.4.0': {}
+
   '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
@@ -1421,6 +1444,12 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@12.4.0(typescript@5.6.3)':
+    dependencies:
+      vue: 3.5.13(typescript@5.6.3)
+    transitivePeerDependencies:
+      - typescript
+
   alien-signals@0.4.14: {}
 
   ansi-regex@5.0.1: {}
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index aabc540..fb8c7be 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,42 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { ref } from 'vue'
+import { Settings } from 'lucide-vue-next'
+const isConnected = ref(false)
+
+const handleConnect = () => {
+	// TODO: Implement connection logic
+	isConnected.value = !isConnected.value
+}
+</script>
 
 <template>
-	<div>
-		<router-view />
+	<div class="min-h-screen flex flex-col">
+		<header class="fixed top-0 left-0 right-0 z-50 bg-background border-b px-4 lg:px-6 h-14 flex items-center">
+			<div class="flex w-full max-w-6xl mx-auto justify-between items-center">
+				<div class="flex items-center gap-6">
+					<router-link to="/" class="">
+						<h1 class="font-semibold text-lg">RoyaltyAutoClaim</h1>
+					</router-link>
+				</div>
+
+				<div class="flex items-center gap-6">
+					<Button @click="handleConnect" :variant="isConnected ? 'default' : 'outline'">
+						{{ isConnected ? 'Connected' : 'Connect' }}
+					</Button>
+
+					<router-link
+						to="/config"
+						class="inline-flex items-center gap-2 text-sm font-medium transition-colors hover:text-primary"
+					>
+						<Settings />
+					</router-link>
+				</div>
+			</div>
+		</header>
+
+		<main class="flex-1 pt-14">
+			<router-view />
+		</main>
 	</div>
 </template>
diff --git a/frontend/src/components/ui/badge/Badge.vue b/frontend/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000..9ed8039
--- /dev/null
+++ b/frontend/src/components/ui/badge/Badge.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { type BadgeVariants, badgeVariants } from '.'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/badge/index.ts b/frontend/src/components/ui/badge/index.ts
new file mode 100644
index 0000000..35e7a1a
--- /dev/null
+++ b/frontend/src/components/ui/badge/index.ts
@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/frontend/src/components/ui/button/Button.vue b/frontend/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..d3e3786
--- /dev/null
+++ b/frontend/src/components/ui/button/Button.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/components/ui/button/index.ts b/frontend/src/components/ui/button/index.ts
new file mode 100644
index 0000000..18a065a
--- /dev/null
+++ b/frontend/src/components/ui/button/index.ts
@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/frontend/src/components/ui/card/Card.vue b/frontend/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..12dd5ec
--- /dev/null
+++ b/frontend/src/components/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/card/CardContent.vue b/frontend/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..785913a
--- /dev/null
+++ b/frontend/src/components/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/card/CardDescription.vue b/frontend/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..d5faedd
--- /dev/null
+++ b/frontend/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/frontend/src/components/ui/card/CardFooter.vue b/frontend/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..1ed2efe
--- /dev/null
+++ b/frontend/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/card/CardHeader.vue b/frontend/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..951d227
--- /dev/null
+++ b/frontend/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/card/CardTitle.vue b/frontend/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..842e168
--- /dev/null
+++ b/frontend/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/frontend/src/components/ui/card/index.ts b/frontend/src/components/ui/card/index.ts
new file mode 100644
index 0000000..9ff6d5e
--- /dev/null
+++ b/frontend/src/components/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
diff --git a/frontend/src/components/ui/input/Input.vue b/frontend/src/components/ui/input/Input.vue
new file mode 100644
index 0000000..81140b4
--- /dev/null
+++ b/frontend/src/components/ui/input/Input.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
diff --git a/frontend/src/components/ui/input/index.ts b/frontend/src/components/ui/input/index.ts
new file mode 100644
index 0000000..a691dd6
--- /dev/null
+++ b/frontend/src/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
diff --git a/frontend/src/components/ui/label/Label.vue b/frontend/src/components/ui/label/Label.vue
new file mode 100644
index 0000000..5ad1568
--- /dev/null
+++ b/frontend/src/components/ui/label/Label.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/frontend/src/components/ui/label/index.ts b/frontend/src/components/ui/label/index.ts
new file mode 100644
index 0000000..572c2f0
--- /dev/null
+++ b/frontend/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/frontend/src/components/ui/select/Select.vue b/frontend/src/components/ui/select/Select.vue
new file mode 100644
index 0000000..adc42fd
--- /dev/null
+++ b/frontend/src/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/frontend/src/components/ui/select/SelectContent.vue b/frontend/src/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..f597885
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/frontend/src/components/ui/select/SelectGroup.vue b/frontend/src/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..b0803e1
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/frontend/src/components/ui/select/SelectItem.vue b/frontend/src/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..9a41027
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/frontend/src/components/ui/select/SelectItemText.vue b/frontend/src/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..a0bb5c2
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/frontend/src/components/ui/select/SelectLabel.vue b/frontend/src/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..503e890
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/frontend/src/components/ui/select/SelectScrollDownButton.vue b/frontend/src/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..8854334
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/frontend/src/components/ui/select/SelectScrollUpButton.vue b/frontend/src/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..6c3711f
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/frontend/src/components/ui/select/SelectSeparator.vue b/frontend/src/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..cb06b8d
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/frontend/src/components/ui/select/SelectTrigger.vue b/frontend/src/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..6b35be4
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/frontend/src/components/ui/select/SelectValue.vue b/frontend/src/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..4bc37dd
--- /dev/null
+++ b/frontend/src/components/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/frontend/src/components/ui/select/index.ts b/frontend/src/components/ui/select/index.ts
new file mode 100644
index 0000000..31b9294
--- /dev/null
+++ b/frontend/src/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/frontend/src/views/Config.vue b/frontend/src/views/Config.vue
index a92b125..daebf84 100644
--- a/frontend/src/views/Config.vue
+++ b/frontend/src/views/Config.vue
@@ -1,7 +1,114 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Badge } from '@/components/ui/badge' /* PartiallyEnd: #3632/scriptSetup.vue */
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+</script>
 
 <template>
-	<div>Config</div>
+	<div class="container mx-auto p-8">
+		<Card class="mb-8">
+			<CardHeader>
+				<div class="flex items-center justify-between">
+					<CardTitle>Submission Management</CardTitle>
+					<Badge variant="secondary">onlyAdmin</Badge>
+				</div>
+				<CardDescription>Register, update, or revoke submissions</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div class="grid w-full items-center gap-4">
+					<div class="flex flex-col space-y-1.5">
+						<Label for="submissionTitle">Submission Title</Label>
+						<Input id="submissionTitle" placeholder="Enter submission title" />
+					</div>
+					<div class="flex flex-col space-y-1.5">
+						<Label for="royaltyRecipient">Royalty Recipient Address</Label>
+						<Input id="royaltyRecipient" placeholder="0x..." />
+					</div>
+					<div class="flex gap-4 flex-wrap">
+						<Button variant="default">Register Submission</Button>
+						<Button variant="default">Update Recipient</Button>
+						<Button variant="destructive">Revoke Submission</Button>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+
+		<Card class="mb-8">
+			<CardHeader>
+				<div class="flex items-center justify-between">
+					<CardTitle>Reviewer Management</CardTitle>
+					<Badge variant="secondary">onlyAdmin</Badge>
+				</div>
+				<CardDescription>Add or remove reviewers</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div class="grid w-full items-center gap-4">
+					<div class="flex flex-col space-y-1.5">
+						<Label for="reviewer">Reviewer Address</Label>
+						<Input id="reviewer" placeholder="0x..." />
+					</div>
+					<div class="flex gap-4">
+						<Button variant="default">Add Reviewer</Button>
+						<Button variant="destructive">Remove Reviewer</Button>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+
+		<Card class="mb-8">
+			<CardHeader>
+				<div class="flex items-center justify-between">
+					<CardTitle>Admin Management</CardTitle>
+					<Badge variant="secondary">onlyOwner</Badge>
+				</div>
+				<CardDescription>Change admin address and royalty token</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div class="grid w-full items-center gap-4">
+					<div class="flex flex-col space-y-1.5">
+						<Label for="admin">New Admin Address</Label>
+						<Input id="admin" placeholder="0x..." />
+					</div>
+					<Button>Change Admin</Button>
+
+					<div class="flex flex-col space-y-1.5">
+						<Label for="token">New Royalty Token Address</Label>
+						<Input id="token" placeholder="0x..." />
+					</div>
+					<Button>Change Token</Button>
+				</div>
+			</CardContent>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<div class="flex items-center justify-between">
+					<CardTitle>Emergency Withdraw</CardTitle>
+					<Badge variant="secondary">onlyOwner</Badge>
+				</div>
+				<CardDescription>Withdraw tokens in case of emergency</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div class="grid w-full items-center gap-4">
+					<div class="flex flex-col space-y-1.5">
+						<Label for="withdrawToken">Token Address</Label>
+						<Input id="withdrawToken" placeholder="0x..." />
+					</div>
+					<div class="flex flex-col space-y-1.5">
+						<Label for="amount">Amount</Label>
+						<Input id="amount" type="number" placeholder="0.0" />
+					</div>
+					<Button variant="destructive">Emergency Withdraw</Button>
+				</div>
+			</CardContent>
+		</Card>
+	</div>
 </template>
 
-<style lang="css"></style>
+<style scoped>
+.container {
+	max-width: 768px;
+}
+</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 8b3716e..65dc916 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,7 +1,101 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { ref } from 'vue'
+
+const title = ref('')
+const selectedRoyaltyLevel = ref('')
+const royaltyLevels = [
+	{ value: '20', label: '20' },
+	{ value: '40', label: '40' },
+	{ value: '60', label: '60' },
+	{ value: '80', label: '80' },
+]
+
+const handleReviewSubmit = () => {
+	// TODO: Implement review submission
+	console.log('Review submitted:', { title: title.value, royaltyLevel: selectedRoyaltyLevel.value })
+}
+
+const handleClaimRoyalty = () => {
+	// TODO: Implement royalty claim
+	console.log('Claiming royalty for:', title.value)
+}
+
+// Add new data for submissions
+const submissions = ref([
+	{
+		title: 'Title A',
+		recipient: '0x1234...5678',
+		reviewCount: 1,
+		totalRoyaltyLevel: 20,
+		status: 'registered',
+	},
+	{
+		title: 'Title B',
+		recipient: '0x1234...5678',
+		reviewCount: 2,
+		totalRoyaltyLevel: 60,
+		status: 'registered',
+	},
+	{
+		title: 'Title C',
+		recipient: '0x8765...4321',
+		reviewCount: 3,
+		totalRoyaltyLevel: 80,
+		status: 'claimed',
+	},
+])
+
+const getStatusColor = (status: string) => {
+	return status === 'claimed' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'
+}
+</script>
 
 <template>
-	<div>Home</div>
+	<div class="container mx-auto p-8">
+		<h1 class="text-2xl font-bold text-center mb-6">Submissions</h1>
+
+		<div class="space-y-4">
+			<Card v-for="submission in submissions" :key="submission.title">
+				<CardHeader>
+					<div class="flex items-center justify-between">
+						<CardTitle>{{ submission.title }}</CardTitle>
+					</div>
+				</CardHeader>
+
+				<CardContent>
+					<div class="space-y-1 text-sm text-muted-foreground flex justify-between">
+						<div>
+							<p>Recipient: {{ submission.recipient }}</p>
+							<p>Reviews: {{ submission.reviewCount }}</p>
+							<p>Total Royalty Level: {{ submission.totalRoyaltyLevel }}%</p>
+						</div>
+					</div>
+
+					<div v-if="submission.status === 'registered'" class="flex flex-wrap items-center gap-4 pt-4">
+						<div class="w-[200px]">
+							<Select v-model="selectedRoyaltyLevel">
+								<SelectTrigger>
+									<SelectValue placeholder="Select royalty level" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem v-for="level in royaltyLevels" :key="level.value" :value="level.value">
+										{{ level.label }}
+									</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+
+						<Button variant="secondary" @click="handleReviewSubmit">Submit Review</Button>
+						<Button v-if="submission.reviewCount >= 2" @click="handleClaimRoyalty"> Claim Royalty </Button>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	</div>
 </template>
 
 <style lang="css"></style>
diff --git a/index.html b/index.html
deleted file mode 100644
index a57fa0b..0000000
--- a/index.html
+++ /dev/null
@@ -1,243 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Royalty Auto Claim Dashboard</title>
-		<style>
-			/* Base styles */
-			body {
-				font-family: 'Inter', sans-serif;
-				margin: 0;
-				padding: 20px;
-				background: #f5f5f5;
-			}
-
-			.container {
-				max-width: 1200px;
-				margin: 0 auto;
-			}
-
-			/* Header */
-			.header {
-				background: #fff;
-				padding: 20px;
-				border-radius: 10px;
-				margin-bottom: 20px;
-				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-			}
-
-			.wallet-info {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-			}
-
-			/* Role-based sections */
-			.role-section {
-				background: #fff;
-				padding: 20px;
-				border-radius: 10px;
-				margin-bottom: 20px;
-				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-			}
-
-			.role-title {
-				color: #1a1a1a;
-				border-bottom: 2px solid #eee;
-				padding-bottom: 10px;
-				margin-bottom: 20px;
-			}
-
-			/* Forms */
-			.form-group {
-				margin-bottom: 15px;
-			}
-
-			label {
-				display: block;
-				margin-bottom: 5px;
-				color: #666;
-			}
-
-			input,
-			select {
-				width: 100%;
-				padding: 8px;
-				border: 1px solid #ddd;
-				border-radius: 4px;
-				margin-bottom: 10px;
-			}
-
-			button {
-				background: #3498db;
-				color: white;
-				border: none;
-				padding: 10px 20px;
-				border-radius: 4px;
-				cursor: pointer;
-			}
-
-			button:hover {
-				background: #2980b9;
-			}
-
-			/* Submission list */
-			.submission-list {
-				border: 1px solid #ddd;
-				border-radius: 4px;
-				padding: 10px;
-			}
-
-			.submission-item {
-				padding: 10px;
-				border-bottom: 1px solid #eee;
-			}
-
-			/* Status badges */
-			.status-badge {
-				display: inline-block;
-				padding: 4px 8px;
-				border-radius: 12px;
-				font-size: 12px;
-				font-weight: 500;
-			}
-
-			.status-registered {
-				background: #e1f5fe;
-				color: #0288d1;
-			}
-
-			.status-claimed {
-				background: #e8f5e9;
-				color: #2e7d32;
-			}
-
-			/* Review controls */
-			.review-controls {
-				display: flex;
-				gap: 10px;
-				margin: 10px 0;
-			}
-
-			.review-controls select {
-				width: auto;
-				margin-bottom: 0;
-			}
-		</style>
-	</head>
-	<body>
-		<div class="container">
-			<!-- Header with Wallet Connection -->
-			<div class="header">
-				<div class="wallet-info">
-					<h1>Royalty Auto Claim</h1>
-					<button>Connect Wallet</button>
-				</div>
-			</div>
-
-			<!-- Owner Section -->
-			<div class="role-section">
-				<h2 class="role-title">Owner Controls</h2>
-				<div class="form-group">
-					<label>Change Admin Address</label>
-					<input type="text" placeholder="New admin address" />
-					<button>Update Admin</button>
-				</div>
-				<div class="form-group">
-					<label>Change Royalty Token</label>
-					<input type="text" placeholder="New token address" />
-					<button>Update Token</button>
-				</div>
-			</div>
-
-			<!-- Admin Section -->
-			<div class="role-section">
-				<h2 class="role-title">Admin Controls</h2>
-				<div class="form-group">
-					<label>Manage Reviewers</label>
-					<input type="text" placeholder="Reviewer address" />
-					<select>
-						<option value="true">Enable</option>
-						<option value="false">Disable</option>
-					</select>
-					<button>Update Reviewer</button>
-				</div>
-				<div class="form-group">
-					<label>Register New Submission</label>
-					<input type="text" placeholder="Title" />
-					<input type="text" placeholder="Royalty recipient address" />
-					<button>Register</button>
-				</div>
-			</div>
-
-			<!-- Reviewer Section -->
-			<div class="role-section">
-				<h2 class="role-title">Reviewer</h2>
-				<div class="form-group">
-					<label>Review Submission</label>
-					<select>
-						<option value="">Select a submission</option>
-						<option value="title-a">Title A</option>
-						<option value="title-b">Title B</option>
-						<option value="title-c">Title C</option>
-					</select>
-					<select>
-						<option value="20">20% Royalty Level</option>
-						<option value="40">40% Royalty Level</option>
-						<option value="60">60% Royalty Level</option>
-						<option value="80">80% Royalty Level</option>
-					</select>
-					<button>Submit Review</button>
-				</div>
-			</div>
-
-			<!-- Submitter Section -->
-			<div class="role-section">
-				<h2 class="role-title">Submissions</h2>
-				<div class="submission-list">
-                    <div class="submission-item"></div>
-						<h3>Title A</h3>
-						<p>Recipient: 0x1234...5678</p>
-						<p>Reviews: 1</p>
-						<p>Total Royalty Level: 20</p>
-						<span class="status-badge status-registered">Registered</span>
-						<div class="review-controls">
-							<select>
-								<option value="20">20% Royalty Level</option>
-								<option value="40">40% Royalty Level</option>
-								<option value="60">60% Royalty Level</option>
-								<option value="80">80% Royalty Level</option>
-							</select>
-							<button>Submit Review</button>
-						</div>
-					</div>
-					<div class="submission-item">
-						<h3>Title B</h3>
-						<p>Recipient: 0x1234...5678</p>
-						<p>Reviews: 2</p>
-						<p>Total Royalty Level: 60</p>
-						<span class="status-badge status-registered">Registered</span>
-						<div class="review-controls">
-							<select>
-								<option value="20">20% Royalty Level</option>
-								<option value="40">40% Royalty Level</option>
-								<option value="60">60% Royalty Level</option>
-								<option value="80">80% Royalty Level</option>
-							</select>
-							<button>Submit Review</button>
-						</div>
-						<button>Claim Royalty</button>
-					</div>
-					<div class="submission-item">
-						<h3>Title C</h3>
-						<p>Recipient: 0x8765...4321</p>
-						<p>Reviews: 3</p>
-						<p>Total Royalty Level: 80</p>
-						<span class="status-badge status-claimed">Claimed</span>
-					</div>
-				</div>
-			</div>
-		</div>
-	</body>
-</html>