diff --git a/.changeset/big-numbers-rhyme.md b/.changeset/big-numbers-rhyme.md
new file mode 100644
index 000000000..761971da7
--- /dev/null
+++ b/.changeset/big-numbers-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@wizleap-inc/wiz-ui-next": minor
+---
+
+PanelSwitch のデザイン変更
diff --git a/packages/wiz-ui-next/src/components/base/index.ts b/packages/wiz-ui-next/src/components/base/index.ts
index 6072f7f9a..b2e169f58 100644
--- a/packages/wiz-ui-next/src/components/base/index.ts
+++ b/packages/wiz-ui-next/src/components/base/index.ts
@@ -35,3 +35,4 @@ export * from "./popup-button-group";
 export * from "./show-more-less";
 export * from "./information-panel";
 export * from "./loading-overlay";
+export * from "./panel-switch";
diff --git a/packages/wiz-ui-next/src/components/base/inputs/index.ts b/packages/wiz-ui-next/src/components/base/inputs/index.ts
index e1e0948f6..83272b14a 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/index.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/index.ts
@@ -7,7 +7,6 @@ export * from "./selectbox";
 export * from "./radio";
 export * from "./radio-new";
 export * from "./toggle-switch";
-export * from "./panel-switch";
 export * from "./timepicker";
 export * from "./date-picker";
 export * from "./upload";
diff --git a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.stories.ts
deleted file mode 100644
index 9a442ad81..000000000
--- a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.stories.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { StoryFn, Meta } from "@storybook/vue3";
-import { ref } from "vue";
-
-import { WizPanelSwitch } from ".";
-
-export default {
-  title: "Base/Input/PanelSwitch",
-  component: WizPanelSwitch,
-  argTypes: {
-    input: {
-      action: "input",
-    },
-  },
-} as Meta<typeof WizPanelSwitch>;
-
-const Template: StoryFn<typeof WizPanelSwitch> = (args) => ({
-  components: { WizPanelSwitch },
-  setup() {
-    const value = ref(0);
-    return { value, args };
-  },
-  template: `
-  <div>
-    <p>入力値：{{ value }}</p>
-    <WizPanelSwitch v-bind="args" v-model="value" @update:modelValue="args.input"/>
-  </div>
-`,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    { label: "test1", value: 1 },
-    { label: "test2", value: 2 },
-    { label: "test3", value: 3 },
-    { label: "test4", value: 4 },
-  ],
-};
diff --git a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/index.ts b/packages/wiz-ui-next/src/components/base/panel-switch/index.ts
similarity index 100%
rename from packages/wiz-ui-next/src/components/base/inputs/panel-switch/index.ts
rename to packages/wiz-ui-next/src/components/base/panel-switch/index.ts
diff --git a/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.stories.ts b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.stories.ts
new file mode 100644
index 000000000..59453669e
--- /dev/null
+++ b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.stories.ts
@@ -0,0 +1,67 @@
+import { StoryFn, Meta } from "@storybook/vue3";
+import { ref } from "vue";
+
+import { WizPanelSwitch } from ".";
+
+export default {
+  title: "Base/PanelSwitch",
+  component: WizPanelSwitch,
+  argTypes: {
+    modelValue: {
+      control: { type: "number" },
+    },
+    input: {
+      action: "input",
+    },
+  },
+} as Meta<typeof WizPanelSwitch>;
+
+const Template: StoryFn<typeof WizPanelSwitch> = (args) => ({
+  components: { WizPanelSwitch },
+  setup() {
+    const value = ref(0);
+    return { value, args };
+  },
+  template: `
+  <div>
+    <p>入力値：{{ value }}</p>
+    <WizPanelSwitch v-bind="args" v-model="value" @update:modelValue="args.input"/>
+  </div>
+`,
+});
+
+const items = [
+  { label: "test1", value: 1 },
+  { label: "test2", value: 2 },
+  { label: "test3", value: 3 },
+  { label: "test4", value: 4 },
+];
+
+export const Default = Template.bind({});
+Default.args = {
+  items,
+};
+
+export const Width = Template.bind({});
+Width.args = {
+  items,
+  width: "300px",
+};
+
+const ActiveTemplate: StoryFn<typeof WizPanelSwitch> = (args) => ({
+  components: { WizPanelSwitch },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div>
+    <p>入力値：{{ args.modelValue }}</p>
+    <WizPanelSwitch v-bind="args" @update:modelValue="args.input"/>
+  </div>
+`,
+});
+export const Active = ActiveTemplate.bind({});
+Active.args = {
+  items,
+  modelValue: 1,
+};
diff --git a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.vue b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.vue
similarity index 93%
rename from packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.vue
rename to packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.vue
index 36935bb81..4d4033fd1 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/panel-switch.vue
+++ b/packages/wiz-ui-next/src/components/base/panel-switch/panel-switch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="panelSwitchStyle">
+  <div :class="panelSwitchStyle" :style="{ ...(width ? { width } : {}) }">
     <label
       v-for="(item, key) in items"
       :key="key"
@@ -55,6 +55,10 @@ const props = defineProps({
     type: Array as PropType<panelItems[]>,
     required: true,
   },
+  width: {
+    type: String,
+    required: false,
+  },
 });
 
 interface Emit {
diff --git a/packages/wiz-ui-next/src/components/base/inputs/panel-switch/types.ts b/packages/wiz-ui-next/src/components/base/panel-switch/types.ts
similarity index 100%
rename from packages/wiz-ui-next/src/components/base/inputs/panel-switch/types.ts
rename to packages/wiz-ui-next/src/components/base/panel-switch/types.ts