diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05f8b4500..a97ea0fed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#472](https://github.com/alleslabs/celatone-frontend/pull/472) Add json schema functionality to migrate contract
 - [#461](https://github.com/alleslabs/celatone-frontend/pull/461) Add json schema form
 - [#455](https://github.com/alleslabs/celatone-frontend/pull/455) Implement schema store and unit test
 - [#453](https://github.com/alleslabs/celatone-frontend/pull/453) Attach schema feature on upload complete
diff --git a/src/lib/components/MotionBox.tsx b/src/lib/components/MotionBox.tsx
new file mode 100644
index 000000000..1477da9c8
--- /dev/null
+++ b/src/lib/components/MotionBox.tsx
@@ -0,0 +1,7 @@
+import { chakra, shouldForwardProp } from "@chakra-ui/react";
+import { motion, isValidMotionProp } from "framer-motion";
+
+export const MotionBox = chakra(motion.div, {
+  shouldForwardProp: (prop) =>
+    isValidMotionProp(prop) || shouldForwardProp(prop),
+});
diff --git a/src/lib/components/dropzone/config.ts b/src/lib/components/dropzone/config.ts
index 7cada0f96..db33479f8 100644
--- a/src/lib/components/dropzone/config.ts
+++ b/src/lib/components/dropzone/config.ts
@@ -19,10 +19,10 @@ export const DROPZONE_CONFIG: { [key in DropzoneFileType]: DropzoneConfig } = {
     },
   },
   schema: {
-    accept: { "application/json": [".schema.json"] },
+    accept: { "application/json": [".json"] },
     text: {
       prettyFileType: "JSON Schema",
-      rawFileType: ".schema.json",
+      rawFileType: ".json",
     },
   },
 };
diff --git a/src/lib/components/json-schema/AttachSchemaCard.tsx b/src/lib/components/json-schema/AttachSchemaCard.tsx
new file mode 100644
index 000000000..c7f73d776
--- /dev/null
+++ b/src/lib/components/json-schema/AttachSchemaCard.tsx
@@ -0,0 +1,73 @@
+import { Button, Flex, IconButton, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+import { useSchemaStore } from "lib/providers/store";
+import type { CodeSchema } from "lib/stores/schema";
+import type { Option } from "lib/types";
+
+import { ViewSchemaButton } from "./ViewSchemaButton";
+
+interface AttachSchemaCardProps {
+  attached: boolean;
+  codeId: string;
+  codeHash: string;
+  schema: Option<CodeSchema>;
+  openDrawer: () => void;
+}
+
+export const AttachSchemaCard = ({
+  attached,
+  codeId,
+  codeHash,
+  schema,
+  openDrawer,
+}: AttachSchemaCardProps) => {
+  const { deleteSchema } = useSchemaStore();
+
+  return (
+    <Flex
+      border="1px solid var(--chakra-colors-gray-700)"
+      bg="gray.800"
+      justify="space-between"
+      align="center"
+      p={4}
+      w="full"
+      borderRadius="4px"
+    >
+      {!attached ? (
+        <>
+          <Text variant="body2">Attach JSON Schema</Text>
+          <Button size="sm" variant="outline-primary" onClick={openDrawer}>
+            Attach
+          </Button>
+        </>
+      ) : (
+        <>
+          <Flex align="center" gap={1}>
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize={6}
+            />
+            <Text variant="body2">JSON Schema attached</Text>
+          </Flex>
+          <Flex align="center">
+            <ViewSchemaButton codeId={codeId} schema={schema} mr={2} />
+            <Button variant="outline-gray" size="sm" onClick={openDrawer}>
+              Reattach
+            </Button>
+            <IconButton
+              size="sm"
+              variant="gray"
+              aria-label="delete_schema"
+              onClick={() => deleteSchema(codeHash)}
+              icon={
+                <CustomIcon name="delete" color="gray.600" boxSize={4} m={0} />
+              }
+            />
+          </Flex>
+        </>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/json-schema/JsonSchemaDrawer.tsx b/src/lib/components/json-schema/JsonSchemaDrawer.tsx
new file mode 100644
index 000000000..968ef4b75
--- /dev/null
+++ b/src/lib/components/json-schema/JsonSchemaDrawer.tsx
@@ -0,0 +1,66 @@
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  Flex,
+  Heading,
+  DrawerCloseButton,
+  DrawerBody,
+  Text,
+  Box,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+import { UploadTemplate } from "./UploadTemplate";
+
+interface JsonSchemaDrawerProps {
+  codeId: string;
+  codeHash: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const JsonSchemaDrawer = ({
+  codeId,
+  codeHash,
+  isOpen,
+  onClose,
+}: JsonSchemaDrawerProps) => (
+  <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+    <DrawerOverlay />
+    <DrawerContent h="80%">
+      <DrawerHeader>
+        <Flex direction="column" gap={2}>
+          <Flex align="center" gap={3}>
+            <CustomIcon name="upload" boxSize={5} color="gray.600" />
+            <Heading as="h5" variant="h5">
+              Attach JSON Schema for code ID “{codeId}”
+            </Heading>
+          </Flex>
+          <Text variant="body3" color="text.dark">
+            Your attached JSON schema will be stored locally on your device
+          </Text>
+        </Flex>
+      </DrawerHeader>
+      <DrawerCloseButton color="gray.600" />
+      <DrawerBody overflow="scroll" p={6}>
+        <Box
+          p="12px 16px"
+          borderRadius="8px"
+          border="1px solid var(--chakra-colors-gray-700)"
+          bg="gray.800"
+          mb={6}
+        >
+          <Text variant="body2" color="text.dark">
+            Please note that the JSON schema you upload on our website will only
+            be stored locally on your device. For public projects with verified
+            JSON schemas, they will be visible and accessible to others.
+          </Text>
+        </Box>
+        <UploadTemplate closeDrawer={onClose} codeHash={codeHash} />
+      </DrawerBody>
+    </DrawerContent>
+  </Drawer>
+);
diff --git a/src/lib/pages/upload/components/UploadTemplate.tsx b/src/lib/components/json-schema/UploadTemplate.tsx
similarity index 100%
rename from src/lib/pages/upload/components/UploadTemplate.tsx
rename to src/lib/components/json-schema/UploadTemplate.tsx
diff --git a/src/lib/components/json-schema/ViewSchemaButton.tsx b/src/lib/components/json-schema/ViewSchemaButton.tsx
new file mode 100644
index 000000000..b30118b47
--- /dev/null
+++ b/src/lib/components/json-schema/ViewSchemaButton.tsx
@@ -0,0 +1,43 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
+
+import type { CodeSchema } from "lib/stores/schema";
+import type { Option } from "lib/types";
+
+interface ViewSchemaButtonProps extends ButtonProps {
+  codeId: string;
+  schema: Option<CodeSchema>;
+}
+
+export const ViewSchemaButton = ({
+  codeId,
+  schema,
+  ...buttonProps
+}: ViewSchemaButtonProps) => (
+  <Button
+    variant="outline-gray"
+    size="sm"
+    onClick={() => {
+      const jsonString = JSON.stringify(schema, null, 2);
+      const jsonWindow = window.open();
+      if (jsonWindow) {
+        // Modify styling later
+        jsonWindow.document.write(
+          `<html><head><title>JSON Schema | Code ID ${codeId}</title>`
+        );
+
+        // Add styling
+        jsonWindow.document.write(
+          "<style>body { background-color: #f0f0f0; color: #333; }</style>"
+        );
+
+        jsonWindow.document.write(
+          `</head><body><pre>${jsonString}</pre></body></html>`
+        );
+      }
+    }}
+    {...buttonProps}
+  >
+    View JSON
+  </Button>
+);
diff --git a/src/lib/components/json-schema/contract_schema.json b/src/lib/components/json-schema/form/contract_schema.json
similarity index 100%
rename from src/lib/components/json-schema/contract_schema.json
rename to src/lib/components/json-schema/form/contract_schema.json
diff --git a/src/lib/components/json-schema/fields/MultiSchemaField.tsx b/src/lib/components/json-schema/form/fields/MultiSchemaField.tsx
similarity index 100%
rename from src/lib/components/json-schema/fields/MultiSchemaField.tsx
rename to src/lib/components/json-schema/form/fields/MultiSchemaField.tsx
diff --git a/src/lib/components/json-schema/fields/index.ts b/src/lib/components/json-schema/form/fields/index.ts
similarity index 100%
rename from src/lib/components/json-schema/fields/index.ts
rename to src/lib/components/json-schema/form/fields/index.ts
diff --git a/src/lib/components/json-schema/index.tsx b/src/lib/components/json-schema/form/index.tsx
similarity index 85%
rename from src/lib/components/json-schema/index.tsx
rename to src/lib/components/json-schema/form/index.tsx
index 2cb178e99..dc8f8c39d 100644
--- a/src/lib/components/json-schema/index.tsx
+++ b/src/lib/components/json-schema/form/index.tsx
@@ -23,7 +23,7 @@ import isEqual from "lodash/isEqual";
 import type { FC } from "react";
 import { useCallback, useMemo, useState } from "react";
 
-import JsonReadOnly from "../json/JsonReadOnly";
+import JsonReadOnly from "../../json/JsonReadOnly";
 import { jsonPrettify } from "lib/utils";
 
 import contractSchema from "./contract_schema.json";
@@ -102,7 +102,7 @@ export interface JsonSchemaFormProps
   > {
   schema: RJSFSchema;
   formId: string;
-  onSubmit: (data: Record<string, unknown>) => void;
+  onSubmit?: (data: Record<string, unknown>) => void;
   /** Onchange callback is with BROKEN data */
   onChange?: (data: Record<string, unknown>) => void;
   formContext?: Record<string, unknown>;
@@ -136,7 +136,7 @@ export const JsonSchemaForm: FC<JsonSchemaFormProps> = ({
     fixOneOfKeysCallback(values);
     console.log("onSubmit", values);
 
-    propsOnSubmit(values);
+    propsOnSubmit?.(values);
   };
 
   const onChange = useCallback(
@@ -154,44 +154,49 @@ export const JsonSchemaForm: FC<JsonSchemaFormProps> = ({
   );
 
   return (
-    <Form
-      id={formId}
-      formContext={formContext}
-      formData={formData}
-      schema={schema}
-      // we use no validate because the schemas are too complicated to be auto validated
-      // noValidate
-      uiSchema={{
-        // "ui:submitButtonOptions": {
-        //   norender: true,
-        // },
-        ...uiSchema,
-      }}
-      widgets={{
-        ...DefaultWidgets,
-        ...Widgets,
-        ...widgets,
-      }}
-      fields={{
-        ...Fields,
-        ...fields,
-      }}
-      templates={{
-        ...DefaultTemplates,
-        ...Templates,
-        ...templates,
-      }}
-      validator={v8Validator}
-      onChange={({ formData: values }) => {
-        // log.info(values)
-        onChange?.(values);
-      }}
-      onSubmit={({ formData: values }) => {
-        // log.info(values)
-        onSubmit(values);
-      }}
-      onError={() => console.error("errors")}
-    />
+    <Box w="full">
+      <Form
+        id={formId}
+        formContext={formContext}
+        formData={formData}
+        schema={schema}
+        // we use no validate because the schemas are too complicated to be auto validated
+        // noValidate
+        uiSchema={{
+          "ui:submitButtonOptions": {
+            norender: true,
+          },
+          "ui:form": {
+            width: "100%",
+          },
+          ...uiSchema,
+        }}
+        widgets={{
+          ...DefaultWidgets,
+          ...Widgets,
+          ...widgets,
+        }}
+        fields={{
+          ...Fields,
+          ...fields,
+        }}
+        templates={{
+          ...DefaultTemplates,
+          ...Templates,
+          ...templates,
+        }}
+        validator={v8Validator}
+        onChange={({ formData: values }) => {
+          // log.info(values)
+          onChange?.(values);
+        }}
+        onSubmit={({ formData: values }) => {
+          // log.info(values)
+          onSubmit(values);
+        }}
+        onError={() => console.error("errors")}
+      />
+    </Box>
   );
 };
 
diff --git a/src/lib/components/json-schema/templates/ArrayFieldItemTemplate.tsx b/src/lib/components/json-schema/form/templates/ArrayFieldItemTemplate.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/ArrayFieldItemTemplate.tsx
rename to src/lib/components/json-schema/form/templates/ArrayFieldItemTemplate.tsx
diff --git a/src/lib/components/json-schema/templates/ArrayFieldTemplate.tsx b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
similarity index 93%
rename from src/lib/components/json-schema/templates/ArrayFieldTemplate.tsx
rename to src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
index f6c7a4054..f42cfeb25 100644
--- a/src/lib/components/json-schema/templates/ArrayFieldTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
@@ -63,7 +63,14 @@ export default function ArrayFieldTemplate<T = any, F = any>(
         uiSchema={uiSchema}
         registry={registry}
       />
-      <Grid key={`array-item-list-${idSchema.$id}`} my={2} gap={4}>
+      <Grid
+        key={`array-item-list-${idSchema.$id}`}
+        my={2}
+        gap={4}
+        bgColor="gray.800"
+        borderRadius="8px"
+        p="8px 12px"
+      >
         {items.length > 0 &&
           items.map(
             ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, F>) => (
diff --git a/src/lib/components/json-schema/templates/BaseInputTemplate.tsx b/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
similarity index 95%
rename from src/lib/components/json-schema/templates/BaseInputTemplate.tsx
rename to src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
index f3e5f464e..7703748a1 100644
--- a/src/lib/components/json-schema/templates/BaseInputTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
@@ -122,7 +122,13 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
     >
       {displayLabel && (
         <Flex>
-          <FormLabel htmlFor={id} id={`${id}-label`} fontSize="12px">
+          <FormLabel
+            htmlFor={id}
+            id={`${id}-label`}
+            fontSize="12px"
+            fontWeight={700}
+            marginInlineEnd={1}
+          >
             {label}
           </FormLabel>
           <FieldTypeTag type={schema.type} />
@@ -164,7 +170,7 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
         </datalist>
       ) : null}
       {!!schema.description && (
-        <Box pl={3}>
+        <Box mt={1}>
           <DescriptionFieldTemplate
             id={`${id}-description`}
             description={schema.description}
diff --git a/src/lib/components/json-schema/templates/DescriptionFieldTemplate.tsx b/src/lib/components/json-schema/form/templates/DescriptionFieldTemplate.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/DescriptionFieldTemplate.tsx
rename to src/lib/components/json-schema/form/templates/DescriptionFieldTemplate.tsx
diff --git a/src/lib/components/json-schema/templates/FieldTemplate.tsx b/src/lib/components/json-schema/form/templates/FieldTemplate.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/FieldTemplate.tsx
rename to src/lib/components/json-schema/form/templates/FieldTemplate.tsx
diff --git a/src/lib/components/json-schema/templates/FieldTypeTag.tsx b/src/lib/components/json-schema/form/templates/FieldTypeTag.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/FieldTypeTag.tsx
rename to src/lib/components/json-schema/form/templates/FieldTypeTag.tsx
diff --git a/src/lib/components/json-schema/templates/ObjectFieldTemplate.tsx b/src/lib/components/json-schema/form/templates/ObjectFieldTemplate.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/ObjectFieldTemplate.tsx
rename to src/lib/components/json-schema/form/templates/ObjectFieldTemplate.tsx
diff --git a/src/lib/components/json-schema/templates/TitleFieldTemplate.tsx b/src/lib/components/json-schema/form/templates/TitleFieldTemplate.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/TitleFieldTemplate.tsx
rename to src/lib/components/json-schema/form/templates/TitleFieldTemplate.tsx
diff --git a/src/lib/components/json-schema/templates/button-templates/AddButton.tsx b/src/lib/components/json-schema/form/templates/button-templates/AddButton.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/button-templates/AddButton.tsx
rename to src/lib/components/json-schema/form/templates/button-templates/AddButton.tsx
diff --git a/src/lib/components/json-schema/templates/button-templates/SubmitButton.tsx b/src/lib/components/json-schema/form/templates/button-templates/SubmitButton.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/button-templates/SubmitButton.tsx
rename to src/lib/components/json-schema/form/templates/button-templates/SubmitButton.tsx
diff --git a/src/lib/components/json-schema/templates/button-templates/icon-buttons/ChakraIconButton.tsx b/src/lib/components/json-schema/form/templates/button-templates/icon-buttons/ChakraIconButton.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/button-templates/icon-buttons/ChakraIconButton.tsx
rename to src/lib/components/json-schema/form/templates/button-templates/icon-buttons/ChakraIconButton.tsx
diff --git a/src/lib/components/json-schema/templates/button-templates/icon-buttons/IconButton.tsx b/src/lib/components/json-schema/form/templates/button-templates/icon-buttons/IconButton.tsx
similarity index 100%
rename from src/lib/components/json-schema/templates/button-templates/icon-buttons/IconButton.tsx
rename to src/lib/components/json-schema/form/templates/button-templates/icon-buttons/IconButton.tsx
diff --git a/src/lib/components/json-schema/templates/button-templates/icon-buttons/index.ts b/src/lib/components/json-schema/form/templates/button-templates/icon-buttons/index.ts
similarity index 100%
rename from src/lib/components/json-schema/templates/button-templates/icon-buttons/index.ts
rename to src/lib/components/json-schema/form/templates/button-templates/icon-buttons/index.ts
diff --git a/src/lib/components/json-schema/templates/button-templates/index.ts b/src/lib/components/json-schema/form/templates/button-templates/index.ts
similarity index 100%
rename from src/lib/components/json-schema/templates/button-templates/index.ts
rename to src/lib/components/json-schema/form/templates/button-templates/index.ts
diff --git a/src/lib/components/json-schema/templates/index.ts b/src/lib/components/json-schema/form/templates/index.ts
similarity index 100%
rename from src/lib/components/json-schema/templates/index.ts
rename to src/lib/components/json-schema/form/templates/index.ts
diff --git a/src/lib/components/json-schema/utils.ts b/src/lib/components/json-schema/form/utils.ts
similarity index 100%
rename from src/lib/components/json-schema/utils.ts
rename to src/lib/components/json-schema/form/utils.ts
diff --git a/src/lib/components/json-schema/widgets/SelectWidget.tsx b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
similarity index 92%
rename from src/lib/components/json-schema/widgets/SelectWidget.tsx
rename to src/lib/components/json-schema/form/widgets/SelectWidget.tsx
index 83bfdcf23..5246b729e 100644
--- a/src/lib/components/json-schema/widgets/SelectWidget.tsx
+++ b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
@@ -123,6 +123,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
       isRequired={required}
       isReadOnly={readonly}
       isInvalid={rawErrors && rawErrors.length > 0}
+      sx={{ "& > p": { mt: 4, mb: 2 } }}
     >
       {!!schema.description && (
         <DescriptionFieldTemplate
@@ -144,7 +145,16 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
         autoFocus={autofocus}
         value={formValue}
         menuPosition="fixed"
-        selectedOptionColorScheme="gray"
+        chakraStyles={{
+          option: (provided, state) => ({
+            ...provided,
+            bg: state.isSelected ? "gray.800" : undefined,
+            color: "text.main",
+            _hover: {
+              bg: "gray.700",
+            },
+          }),
+        }}
       />
     </FormControl>
   );
diff --git a/src/lib/components/json-schema/widgets/index.ts b/src/lib/components/json-schema/form/widgets/index.ts
similarity index 100%
rename from src/lib/components/json-schema/widgets/index.ts
rename to src/lib/components/json-schema/form/widgets/index.ts
diff --git a/src/lib/components/json-schema/widgets/useDefaultChakraSelectStyle.ts b/src/lib/components/json-schema/form/widgets/useDefaultChakraSelectStyle.ts
similarity index 100%
rename from src/lib/components/json-schema/widgets/useDefaultChakraSelectStyle.ts
rename to src/lib/components/json-schema/form/widgets/useDefaultChakraSelectStyle.ts
diff --git a/src/lib/components/json-schema/index.ts b/src/lib/components/json-schema/index.ts
new file mode 100644
index 000000000..9b95a8fac
--- /dev/null
+++ b/src/lib/components/json-schema/index.ts
@@ -0,0 +1,5 @@
+export * from "./AttachSchemaCard";
+export * from "./JsonSchemaDrawer";
+export * from "./UploadTemplate";
+export * from "./ViewSchemaButton";
+export * from "./form";
diff --git a/src/lib/components/select-code/CodeSelect.tsx b/src/lib/components/select-code/CodeSelect.tsx
index d28282878..09032b397 100644
--- a/src/lib/components/select-code/CodeSelect.tsx
+++ b/src/lib/components/select-code/CodeSelect.tsx
@@ -6,26 +6,33 @@ import { PermissionChip } from "../PermissionChip";
 import type { FormStatus } from "lib/components/forms";
 import { UploadIcon } from "lib/components/icon";
 import { useCodeStore } from "lib/providers/store";
-import { useCodeDataByCodeId } from "lib/services/codeService";
+import type { LCDCodeInfoSuccessCallback } from "lib/services/codeService";
+import { useLCDCodeInfo } from "lib/services/codeService";
 import { AccessConfigPermission } from "lib/types";
+import { isCodeId } from "lib/utils";
 
 import { CodeSelectDrawerButton } from "./CodeSelectDrawerButton";
 
 interface CodeSelectProps extends Omit<FlexProps, "onSelect"> {
   onCodeSelect: (code: string) => void;
+  setCodeHash?: LCDCodeInfoSuccessCallback;
   codeId: string;
   status: FormStatus;
 }
 
 export const CodeSelect = ({
   onCodeSelect,
+  setCodeHash,
   codeId,
   status,
   ...componentProps
 }: CodeSelectProps) => {
   const { getCodeLocalInfo } = useCodeStore();
   const name = getCodeLocalInfo(Number(codeId))?.name;
-  const { data: codeInfo } = useCodeDataByCodeId(codeId);
+  const { data: codeInfo } = useLCDCodeInfo(codeId, {
+    onSuccess: setCodeHash,
+    enabled: isCodeId(codeId),
+  });
 
   const isError = status.state === "error";
   return (
@@ -59,10 +66,12 @@ export const CodeSelect = ({
               <DotSeparator />
               <PermissionChip
                 instantiatePermission={
-                  codeInfo?.instantiatePermission ??
+                  codeInfo?.code_info.instantiate_permission.permission ??
                   AccessConfigPermission.UNKNOWN
                 }
-                permissionAddresses={codeInfo?.permissionAddresses ?? []}
+                permissionAddresses={
+                  codeInfo?.code_info.instantiate_permission.addresses ?? []
+                }
               />
             </Flex>
           </Flex>
diff --git a/src/lib/components/select-code/CodeSelectSection.tsx b/src/lib/components/select-code/CodeSelectSection.tsx
index 7a34ca692..e91d63c89 100644
--- a/src/lib/components/select-code/CodeSelectSection.tsx
+++ b/src/lib/components/select-code/CodeSelectSection.tsx
@@ -5,6 +5,7 @@ import type { Control, FieldPath, FieldValues } from "react-hook-form";
 import { ControllerInput } from "lib/components/forms";
 import type { FormStatus } from "lib/components/forms";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import type { LCDCodeInfoSuccessCallback } from "lib/services/codeService";
 import type { Option } from "lib/types";
 
 import { CodeSelect } from "./CodeSelect";
@@ -15,6 +16,7 @@ interface CodeSelectSectionProps<T extends FieldValues> {
   control: Control<T>;
   error: Option<string>;
   onCodeSelect: (codeId: string) => void;
+  setCodeHash?: LCDCodeInfoSuccessCallback;
   status: FormStatus;
 }
 
@@ -24,6 +26,7 @@ export const CodeSelectSection = <T extends FieldValues>({
   control,
   error,
   onCodeSelect,
+  setCodeHash,
   status,
 }: CodeSelectSectionProps<T>) => {
   const [method, setMethod] = useState<"select-existing" | "fill-manually">(
@@ -55,6 +58,7 @@ export const CodeSelectSection = <T extends FieldValues>({
             mt={4}
             mb={8}
             onCodeSelect={onCodeSelect}
+            setCodeHash={setCodeHash}
             codeId={codeId}
             status={status}
           />
diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index 9bd8a2a60..602dda3c1 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -53,7 +53,7 @@ export const useCodeData = (codeId: string): CodeDataState => {
   const { currentChainId } = useCelatoneApp();
   const lcdEndpoint = useBaseApiRoute("rest");
 
-  const { data: codeInfo, isLoading } = useCodeDataByCodeId(codeId);
+  const { data: codeInfo, isLoading } = useCodeDataByCodeId({ codeId });
   const { data: publicCodeInfo } = usePublicProjectByCodeId(codeId);
   const { data: publicInfoBySlug } = usePublicProjectBySlug(
     publicCodeInfo?.slug
diff --git a/src/lib/pages/migrate/components/MessageInputSwitch.tsx b/src/lib/pages/migrate/components/MessageInputSwitch.tsx
new file mode 100644
index 000000000..362b10adc
--- /dev/null
+++ b/src/lib/pages/migrate/components/MessageInputSwitch.tsx
@@ -0,0 +1,72 @@
+import { Flex } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+import { useRef } from "react";
+
+import { MotionBox } from "lib/components/MotionBox";
+
+interface MessageInputSwitchProps<T> {
+  currentTab: T;
+  tabs: T[];
+  disabled?: boolean;
+  onTabChange: Dispatch<SetStateAction<T>>;
+}
+
+export const MessageInputSwitch = <T extends string>({
+  currentTab,
+  tabs,
+  disabled = false,
+  onTabChange,
+}: MessageInputSwitchProps<T>) => {
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const activeIndex = tabs.indexOf(currentTab);
+  return (
+    <Flex
+      border="1px solid var(--chakra-colors-gray-700)"
+      borderRadius="4px"
+      p={1}
+      direction="row"
+      align="center"
+      position="relative"
+      sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
+    >
+      {tabs.map((tab, idx) => (
+        <MotionBox
+          key={tab}
+          ref={(el) => {
+            tabRefs.current[idx] = el;
+          }}
+          cursor="pointer"
+          p="2px 10px"
+          fontSize="12px"
+          fontWeight={700}
+          variants={{
+            active: { color: "var(--chakra-colors-text-main)" },
+            inactive: {
+              color: "var(--chakra-colors-primary-light)",
+            },
+          }}
+          initial="inactive"
+          animate={currentTab === tab ? "active" : "inactive"}
+          onClick={() => onTabChange(tab)}
+          zIndex={1}
+          textAlign="center"
+        >
+          {tab}
+        </MotionBox>
+      ))}
+      <MotionBox
+        h={tabRefs.current[activeIndex]?.clientHeight}
+        w={tabRefs.current[activeIndex]?.clientWidth}
+        position="absolute"
+        borderRadius="2px"
+        backgroundColor="primary.dark"
+        animate={{ left: `${tabRefs.current[activeIndex]?.offsetLeft}px` }}
+        transition={{
+          type: "spring",
+          stiffness: "250",
+          damping: "30",
+        }}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 0b85aad66..f28c9ea41 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -1,7 +1,8 @@
-import { Button, Flex, Heading, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import type { BoxProps } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useQuery } from "@tanstack/react-query";
 import Long from "long";
+import { observer } from "mobx-react-lite";
 import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 
@@ -9,8 +10,6 @@ import {
   useFabricateFee,
   useSimulateFeeQuery,
   useCurrentChain,
-  useBaseApiRoute,
-  CELATONE_QUERY_KEYS,
 } from "lib/app-provider";
 import { useMigrateTx } from "lib/app-provider/tx/migrate";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -18,12 +17,17 @@ import type { FormStatus } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
 import JsonInput from "lib/components/json/JsonInput";
 import { CodeSelectSection } from "lib/components/select-code";
+import { Tooltip } from "lib/components/Tooltip";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import { getCodeIdInfo } from "lib/services/code";
+import type { CodeIdInfoResponse } from "lib/services/code";
+import { useLCDCodeInfo } from "lib/services/codeService";
 import type { ComposedMsg, ContractAddr, HumanAddr } from "lib/types";
-import { AccessConfigPermission, MsgType } from "lib/types";
-import { composeMsg, jsonValidate } from "lib/utils";
+import { MsgType } from "lib/types";
+import { composeMsg, jsonValidate, resolvePermission } from "lib/utils";
+
+import { MessageInputSwitch } from "./MessageInputSwitch";
+import { SchemaSection } from "./SchemaSection";
 
 interface MigrateContractProps {
   contractAddress: ContractAddr;
@@ -31,67 +35,84 @@ interface MigrateContractProps {
   handleBack: () => void;
 }
 
-export const MigrateContract = ({
-  contractAddress,
-  codeIdParam,
-  handleBack,
-}: MigrateContractProps) => {
-  const { address } = useCurrentChain();
-  const { broadcast } = useTxBroadcast();
-  const lcdEndpoint = useBaseApiRoute("rest");
-
-  const migrateTx = useMigrateTx();
-  const fabricateFee = useFabricateFee();
-
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm({
-    defaultValues: { codeId: codeIdParam, migrateMsg: "{}" },
-    mode: "all",
-  });
-  const { codeId, migrateMsg } = watch();
-  const [status, setStatus] = useState<FormStatus>({ state: "init" });
-  const [composedTxMsg, setComposedTxMsg] = useState<ComposedMsg[]>([]);
-  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
-  const [simulateError, setSimulateError] = useState("");
-  const [processing, setProcessing] = useState(false);
-
-  const enableMigrate =
-    !!address &&
-    codeId.length > 0 &&
-    jsonValidate(migrateMsg) === null &&
-    status.state === "success";
-
-  const { isFetching: isSimulating } = useSimulateFeeQuery({
-    enabled: composedTxMsg.length > 0,
-    messages: composedTxMsg,
-    onSuccess: (gasRes) => {
-      if (gasRes) setEstimatedFee(fabricateFee(gasRes));
-      else setEstimatedFee(undefined);
-    },
-    onError: (e) => {
-      setSimulateError(e.message);
-      setEstimatedFee(undefined);
-    },
-  });
-
-  const { refetch } = useQuery(
-    [CELATONE_QUERY_KEYS.CODE_INFO, lcdEndpoint, codeId],
-    async () => getCodeIdInfo(lcdEndpoint, codeId),
-    {
+enum MessageTabs {
+  JSON_INPUT = "JSON Input",
+  YOUR_SCHEMA = "Your Schema",
+}
+
+const resolveTabDisplay = (
+  current: MessageTabs,
+  target: MessageTabs
+): BoxProps["display"] => {
+  return current === target ? "block" : "none";
+};
+
+export const MigrateContract = observer(
+  ({ contractAddress, codeIdParam, handleBack }: MigrateContractProps) => {
+    const { address } = useCurrentChain();
+    const { broadcast } = useTxBroadcast();
+    const migrateTx = useMigrateTx();
+    const fabricateFee = useFabricateFee();
+
+    const {
+      control,
+      watch,
+      setValue,
+      formState: { errors },
+    } = useForm({
+      defaultValues: {
+        codeId: codeIdParam,
+        codeHash: "",
+        msgInput: {
+          [MessageTabs.JSON_INPUT]: "{}",
+          [MessageTabs.YOUR_SCHEMA]: "{}",
+        },
+      },
+      mode: "all",
+    });
+    const { codeId, codeHash, msgInput } = watch();
+    const [tab, setTab] = useState(MessageTabs.JSON_INPUT);
+    const [status, setStatus] = useState<FormStatus>({ state: "init" });
+    const [composedTxMsg, setComposedTxMsg] = useState<ComposedMsg[]>([]);
+    const [estimatedFee, setEstimatedFee] = useState<StdFee>();
+    const [simulateError, setSimulateError] = useState("");
+    const [processing, setProcessing] = useState(false);
+
+    const currentInput = msgInput[tab];
+
+    const enableMigrate =
+      !!address &&
+      codeId.length > 0 &&
+      jsonValidate(currentInput) === null &&
+      status.state === "success";
+
+    const { isFetching: isSimulating } = useSimulateFeeQuery({
+      enabled: composedTxMsg.length > 0,
+      messages: composedTxMsg,
+      onSuccess: (gasRes) => {
+        if (gasRes) setEstimatedFee(fabricateFee(gasRes));
+        else setEstimatedFee(undefined);
+      },
+      onError: (e) => {
+        setSimulateError(e.message);
+        setEstimatedFee(undefined);
+      },
+    });
+
+    const { refetch } = useLCDCodeInfo(codeId, {
       enabled: !!address && !!codeId.length,
       retry: false,
       cacheTime: 0,
       onSuccess(data) {
         const permission = data.code_info.instantiate_permission;
+        setValue("codeHash", data.code_info.data_hash.toLowerCase());
         if (
-          address &&
-          (permission.permission === AccessConfigPermission.EVERYBODY ||
-            permission.addresses.includes(address as HumanAddr) ||
-            permission.address === address)
+          resolvePermission(
+            address as HumanAddr,
+            permission.permission,
+            permission.addresses,
+            permission.address
+          )
         )
           setStatus({ state: "success" });
         else {
@@ -107,123 +128,181 @@ export const MigrateContract = ({
         setStatus({ state: "error", message: "This code ID does not exist" });
         setSimulateError("");
       },
-    }
-  );
+    });
 
-  const proceed = useCallback(async () => {
-    AmpTrack(AmpEvent.ACTION_MIGRATE);
-    const stream = await migrateTx({
+    const proceed = useCallback(async () => {
+      AmpTrack(AmpEvent.ACTION_MIGRATE);
+      const stream = await migrateTx({
+        contractAddress,
+        codeId: Number(codeId),
+        migrateMsg: JSON.parse(currentInput),
+        estimatedFee,
+        onTxSucceed: () => setProcessing(false),
+        onTxFailed: () => setProcessing(false),
+      });
+
+      if (stream) {
+        setProcessing(true);
+        broadcast(stream);
+      }
+    }, [
+      migrateTx,
       contractAddress,
-      codeId: Number(codeId),
-      migrateMsg: JSON.parse(migrateMsg),
+      codeId,
+      currentInput,
       estimatedFee,
-      onTxSucceed: () => setProcessing(false),
-      onTxFailed: () => setProcessing(false),
-    });
+      broadcast,
+      setProcessing,
+    ]);
 
-    if (stream) {
-      setProcessing(true);
-      broadcast(stream);
-    }
-  }, [migrateTx, contractAddress, codeId, migrateMsg, estimatedFee, broadcast]);
-
-  useEffect(() => {
-    if (codeId.length) {
-      setStatus({ state: "loading" });
-      const timer = setTimeout(() => {
-        refetch();
-      }, 500);
-      return () => clearTimeout(timer);
-    }
-    setStatus({ state: "init" });
-
-    return () => {};
-  }, [address, codeId, refetch]);
-
-  useEffect(() => {
-    if (enableMigrate) {
-      setSimulateError("");
-      const composedMsg = composeMsg(MsgType.MIGRATE, {
-        sender: address as HumanAddr,
-        contract: contractAddress as ContractAddr,
-        codeId: Long.fromString(codeId),
-        msg: Buffer.from(migrateMsg),
-      });
-      const timeoutId = setTimeout(() => {
-        setComposedTxMsg([composedMsg]);
-      }, 1000);
-      return () => clearTimeout(timeoutId);
-    }
-    return () => {};
-  }, [address, codeId, contractAddress, enableMigrate, migrateMsg]);
-
-  return (
-    <>
-      <Heading as="h6" variant="h6" mb={4}>
-        To Code ID
-      </Heading>
-      <CodeSelectSection
-        name="codeId"
-        control={control}
-        status={status}
-        error={errors.codeId?.message}
-        onCodeSelect={(code: string) => setValue("codeId", code)}
-        codeId={codeId}
-      />
-      <Heading as="h6" variant="h6" mt={12} mb={6}>
-        Migrate Message
-      </Heading>
-      <JsonInput
-        text={migrateMsg}
-        setText={(msg: string) => setValue("migrateMsg", msg)}
-        minLines={10}
-      />
-      {simulateError && (
-        <Flex gap={2} mb={4}>
-          <CustomIcon
-            name="alert-circle-solid"
-            boxSize={3}
-            color="error.main"
-          />
-          <Text variant="body3" color="error.main">
-            {simulateError}
-          </Text>
-        </Flex>
-      )}
-      <Flex
-        fontSize="14px"
-        color="text.dark"
-        alignSelf="flex-start"
-        alignItems="center"
-        display="flex"
-        gap={1}
-      >
-        <p>Transaction Fee:</p>
-        <EstimatedFeeRender
-          estimatedFee={estimatedFee}
-          loading={isSimulating}
+    useEffect(() => {
+      if (codeId.length) {
+        setStatus({ state: "loading" });
+        const timer = setTimeout(() => {
+          refetch();
+        }, 500);
+        return () => clearTimeout(timer);
+      }
+      setStatus({ state: "init" });
+
+      return () => {};
+    }, [address, codeId, refetch]);
+
+    useEffect(() => {
+      if (enableMigrate) {
+        setSimulateError("");
+        const composedMsg = composeMsg(MsgType.MIGRATE, {
+          sender: address as HumanAddr,
+          contract: contractAddress as ContractAddr,
+          codeId: Long.fromString(codeId),
+          msg: Buffer.from(currentInput),
+        });
+        const timeoutId = setTimeout(() => {
+          setComposedTxMsg([composedMsg]);
+        }, 1000);
+        return () => clearTimeout(timeoutId);
+      }
+      return () => {};
+    }, [address, codeId, contractAddress, enableMigrate, currentInput]);
+
+    return (
+      <>
+        <Heading as="h6" variant="h6" mb={4}>
+          To Code ID
+        </Heading>
+        <CodeSelectSection
+          name="codeId"
+          control={control}
+          status={status}
+          error={errors.codeId?.message}
+          onCodeSelect={(code: string) => {
+            setValue("codeId", code);
+          }}
+          setCodeHash={(data: CodeIdInfoResponse) => {
+            setValue("codeHash", data.code_info.data_hash.toLowerCase());
+          }}
+          codeId={codeId}
         />
-      </Flex>
-      <Flex justify="space-between" w="100%" mt={8}>
-        <Button
-          variant="outline-gray"
-          w="128px"
-          leftIcon={<CustomIcon name="chevron-left" />}
-          onClick={handleBack}
+        <Flex align="center" justify="space-between" mt={12} mb={6}>
+          <Heading as="h6" variant="h6">
+            Migrate Message
+          </Heading>
+          <Tooltip
+            label="Select or fill code id first"
+            isDisabled={Boolean(codeHash)}
+          >
+            <div>
+              <MessageInputSwitch
+                tabs={Object.values(MessageTabs)}
+                currentTab={tab}
+                onTabChange={setTab}
+                disabled={!codeHash}
+              />
+            </div>
+          </Tooltip>
+        </Flex>
+        <Box
+          sx={{
+            "& .json-input": {
+              display: resolveTabDisplay(tab, MessageTabs.JSON_INPUT),
+            },
+            "& .your-schema": {
+              display: resolveTabDisplay(tab, MessageTabs.YOUR_SCHEMA),
+            },
+          }}
         >
-          Previous
-        </Button>
-        <Button
-          variant="primary"
-          w="128px"
-          disabled={!enableMigrate || !estimatedFee || isSimulating}
-          onClick={proceed}
-          isLoading={processing}
-          sx={{ pointerEvents: processing && "none" }}
+          <div className="json-input">
+            <JsonInput
+              text={msgInput[MessageTabs.JSON_INPUT]}
+              setText={(msg: string) =>
+                setValue("msgInput", {
+                  ...msgInput,
+                  [MessageTabs.JSON_INPUT]: msg,
+                })
+              }
+              minLines={10}
+            />
+          </div>
+          <div className="your-schema">
+            <SchemaSection
+              codeHash={codeHash}
+              codeId={codeId}
+              setSchemaInput={(msg: string) =>
+                setValue("msgInput", {
+                  ...msgInput,
+                  [MessageTabs.YOUR_SCHEMA]: msg,
+                })
+              }
+            />
+          </div>
+        </Box>
+        {simulateError && (
+          <Flex gap={2} mb={4}>
+            <CustomIcon
+              name="alert-circle-solid"
+              boxSize={3}
+              color="error.main"
+            />
+            <Text variant="body3" color="error.main">
+              {simulateError}
+            </Text>
+          </Flex>
+        )}
+        <Flex
+          fontSize="14px"
+          color="text.dark"
+          alignSelf="flex-start"
+          alignItems="center"
+          display="flex"
+          gap={1}
         >
-          Migrate
-        </Button>
-      </Flex>
-    </>
-  );
-};
+          <p>Transaction Fee:</p>
+          <EstimatedFeeRender
+            estimatedFee={estimatedFee}
+            loading={isSimulating}
+          />
+        </Flex>
+        <Flex justify="space-between" w="100%" mt={8}>
+          <Button
+            variant="outline-gray"
+            w="128px"
+            leftIcon={<CustomIcon name="chevron-left" />}
+            onClick={handleBack}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="primary"
+            w="128px"
+            disabled={!enableMigrate || !estimatedFee || isSimulating}
+            onClick={proceed}
+            isLoading={processing}
+            sx={{ pointerEvents: processing && "none" }}
+          >
+            Migrate
+          </Button>
+        </Flex>
+      </>
+    );
+  }
+);
diff --git a/src/lib/pages/migrate/components/SchemaSection.tsx b/src/lib/pages/migrate/components/SchemaSection.tsx
new file mode 100644
index 000000000..a735a2a60
--- /dev/null
+++ b/src/lib/pages/migrate/components/SchemaSection.tsx
@@ -0,0 +1,87 @@
+import { Button, Flex, Text, useDisclosure } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+
+import {
+  ViewSchemaButton,
+  AttachSchemaCard,
+  JsonSchemaDrawer,
+} from "lib/components/json-schema/";
+import { JsonSchemaForm } from "lib/components/json-schema/form";
+import { useSchemaStore } from "lib/providers/store";
+
+interface SchemaSectionProps {
+  codeHash: string;
+  codeId: string;
+  setSchemaInput: (input: string) => void;
+}
+
+export const SchemaSection = observer(
+  ({ codeHash, codeId, setSchemaInput }: SchemaSectionProps) => {
+    const { getSchemaByCodeHash } = useSchemaStore();
+    const jsonSchema = getSchemaByCodeHash(codeHash);
+    const { isOpen, onClose, onOpen } = useDisclosure();
+    return (
+      <Flex
+        direction="column"
+        backgroundColor="gray.900"
+        borderRadius="8px"
+        p="24px 16px"
+        mb={4}
+        align={jsonSchema?.migrate ? "flex-start" : "center"}
+      >
+        {jsonSchema?.migrate ? (
+          <>
+            <Flex align="center" justify="space-between" w="full" mb={4}>
+              <Text color="text.main" fontWeight={700} variant="body2">
+                You are using a locally attached JSON Schema
+              </Text>
+              <Flex gap={3}>
+                <ViewSchemaButton schema={jsonSchema} codeId={codeId} />
+                <Button variant="outline-gray" size="sm" onClick={onOpen}>
+                  Reattach
+                </Button>
+              </Flex>
+            </Flex>
+            <JsonSchemaForm
+              schema={jsonSchema.migrate}
+              formId="migrate"
+              onChange={(data) => setSchemaInput(JSON.stringify(data))}
+            />
+          </>
+        ) : (
+          <>
+            <Text color="text.main" fontWeight={700} variant="body1">
+              {jsonSchema
+                ? "Attached JSON Schema doesn’t have MigrateMsg"
+                : `You haven't attached the JSON Schema for code ${codeId} yet`}
+            </Text>
+            <Text
+              color="text.disabled"
+              fontWeight={500}
+              variant="body2"
+              mt={2}
+              mb={4}
+            >
+              {jsonSchema
+                ? "Please fill in Migrate Message manually or change the schema"
+                : "Your attached JSON schema will be stored locally on your device"}
+            </Text>
+            <AttachSchemaCard
+              attached={Boolean(jsonSchema)}
+              schema={jsonSchema}
+              codeId={codeId}
+              codeHash={codeHash}
+              openDrawer={onOpen}
+            />
+          </>
+        )}
+        <JsonSchemaDrawer
+          isOpen={isOpen}
+          onClose={onClose}
+          codeHash={codeHash}
+          codeId={codeId}
+        />
+      </Flex>
+    );
+  }
+);
diff --git a/src/lib/pages/upload/completed.tsx b/src/lib/pages/upload/completed.tsx
index 2847303cb..2a11275da 100644
--- a/src/lib/pages/upload/completed.tsx
+++ b/src/lib/pages/upload/completed.tsx
@@ -21,6 +21,7 @@ export const UploadComplete = observer(({ txResult }: UploadCompleteProps) => {
   const { getSchemaByCodeHash } = useSchemaStore();
   const schema = getSchemaByCodeHash(txResult.codeHash);
   const attached = Boolean(schema);
+
   return (
     <WasmPageContainer>
       <Heading variant="h6" as="h6" color="text.dark" mb={3}>
@@ -93,6 +94,7 @@ export const UploadComplete = observer(({ txResult }: UploadCompleteProps) => {
           <CustomIcon name="chevron-right" boxSize={4} color="text.dark" />
         }
         w="full"
+        mt={attached ? 8 : 0}
         mb={4}
         onClick={() => {
           navigate({
diff --git a/src/lib/pages/upload/components/UploadSchema.tsx b/src/lib/pages/upload/components/UploadSchema.tsx
index 901695049..9a3e6a503 100644
--- a/src/lib/pages/upload/components/UploadSchema.tsx
+++ b/src/lib/pages/upload/components/UploadSchema.tsx
@@ -1,26 +1,9 @@
-import {
-  Box,
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
-  Flex,
-  Heading,
-  IconButton,
-  Text,
-  useDisclosure,
-} from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 
-import { CustomIcon } from "lib/components/icon";
-import { useSchemaStore } from "lib/providers/store";
+import { AttachSchemaCard, JsonSchemaDrawer } from "lib/components/json-schema";
 import type { CodeSchema } from "lib/stores/schema";
 import type { Option } from "lib/types";
 
-import { UploadTemplate } from "./UploadTemplate";
-
 interface UploadSchemaContentInterface {
   attached: boolean;
   schema: Option<CodeSchema>;
@@ -28,135 +11,28 @@ interface UploadSchemaContentInterface {
   codeHash: string;
 }
 
-const Content = ({
+export const UploadSchema = ({
   attached,
   schema,
   codeId,
   codeHash,
 }: UploadSchemaContentInterface) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { deleteSchema } = useSchemaStore();
   return (
     <>
-      {!attached ? (
-        <>
-          <Text variant="body2">Attach JSON Schema</Text>
-          <Button size="sm" variant="outline-primary" onClick={onOpen}>
-            Attach
-          </Button>
-        </>
-      ) : (
-        <>
-          <Flex align="center" gap={1}>
-            <CustomIcon
-              name="check-circle-solid"
-              color="success.main"
-              boxSize={6}
-            />
-            <Text variant="body2">JSON Schema attached</Text>
-          </Flex>
-          <Flex align="center">
-            <Button
-              variant="outline-gray"
-              size="sm"
-              mr={2}
-              onClick={() => {
-                const jsonString = JSON.stringify(schema, null, 2);
-                const jsonWindow = window.open();
-                if (jsonWindow) {
-                  // Modify styling later
-                  jsonWindow.document.write(
-                    `<html><head><title>JSON Schema | Code ID ${codeId}</title>`
-                  );
-
-                  // Add styling
-                  jsonWindow.document.write(
-                    "<style>body { background-color: #f0f0f0; color: #333; }</style>"
-                  );
-
-                  jsonWindow.document.write(
-                    `</head><body><pre>${jsonString}</pre></body></html>`
-                  );
-                }
-              }}
-            >
-              View JSON
-            </Button>
-            <IconButton
-              size="sm"
-              variant="gray"
-              aria-label="edit_schema"
-              onClick={onOpen}
-              icon={
-                <CustomIcon name="edit" color="gray.600" boxSize={4} m={0} />
-              }
-            />
-            <IconButton
-              size="sm"
-              variant="gray"
-              aria-label="delete_schema"
-              onClick={() => deleteSchema(codeHash)}
-              icon={
-                <CustomIcon name="delete" color="gray.600" boxSize={4} m={0} />
-              }
-            />
-          </Flex>
-        </>
-      )}
-      <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
-        <DrawerOverlay />
-        <DrawerContent h="80%">
-          <DrawerHeader>
-            <Flex direction="column" gap={2}>
-              <Flex align="center" gap={3}>
-                <CustomIcon name="upload" boxSize={5} color="gray.600" />
-                <Heading as="h5" variant="h5">
-                  Attach JSON Schema for code ID “{codeId}”
-                </Heading>
-              </Flex>
-              <Text variant="body3" color="text.dark">
-                Your attached JSON schema will be stored locally on your device
-              </Text>
-            </Flex>
-          </DrawerHeader>
-          <DrawerCloseButton color="gray.600" />
-          <DrawerBody overflow="scroll" p={6}>
-            <Box
-              p="12px 16px"
-              borderRadius="8px"
-              border="1px solid var(--chakra-colors-gray-700)"
-              bg="gray.800"
-              mb={6}
-            >
-              <Text variant="body2" color="text.dark">
-                Please note that the JSON schema you upload on our website will
-                only be stored locally on your device. For public projects with
-                verified JSON schemas, they will be visible and accessible to
-                others.
-              </Text>
-            </Box>
-            <UploadTemplate closeDrawer={onClose} codeHash={codeHash} />
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
+      <AttachSchemaCard
+        attached={attached}
+        codeId={codeId}
+        codeHash={codeHash}
+        schema={schema}
+        openDrawer={onOpen}
+      />
+      <JsonSchemaDrawer
+        codeId={codeId}
+        codeHash={codeHash}
+        isOpen={isOpen}
+        onClose={onClose}
+      />
     </>
   );
 };
-
-export const UploadSchema = (props: UploadSchemaContentInterface) => {
-  const { attached } = props;
-  return (
-    <Flex
-      border="1px solid var(--chakra-colors-gray-700)"
-      bg="gray.800"
-      justify="space-between"
-      align="center"
-      p={4}
-      w="full"
-      borderRadius="4px"
-      mb={attached ? 8 : 0}
-    >
-      <Content {...props} />
-    </Flex>
-  );
-};
diff --git a/src/lib/services/code.ts b/src/lib/services/code.ts
index d06302e29..ebdb2e299 100644
--- a/src/lib/services/code.ts
+++ b/src/lib/services/code.ts
@@ -2,7 +2,7 @@ import axios from "axios";
 
 import type { Addr, AccessConfigPermission } from "lib/types";
 
-interface CodeIdInfoResponse {
+export interface CodeIdInfoResponse {
   code_info: {
     code_id: string;
     creator: Addr;
diff --git a/src/lib/services/codeService.ts b/src/lib/services/codeService.ts
index 8e38c4dec..255800d4a 100644
--- a/src/lib/services/codeService.ts
+++ b/src/lib/services/codeService.ts
@@ -1,10 +1,11 @@
 /* eslint-disable sonarjs/no-identical-functions */
-import type { UseQueryResult } from "@tanstack/react-query";
+import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 import {
   CELATONE_QUERY_KEYS,
+  useBaseApiRoute,
   useCelatoneApp,
   useWasmConfig,
 } from "lib/app-provider";
@@ -28,6 +29,9 @@ import type {
 } from "lib/types";
 import { isCodeId, parseDateOpt, parseTxHashOpt } from "lib/utils";
 
+import type { CodeIdInfoResponse } from "./code";
+import { getCodeIdInfo } from "./code";
+
 export const useCodeListQuery = (): UseQueryResult<CodeInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
 
@@ -129,10 +133,18 @@ export const useCodeListByCodeIds = (
   );
 };
 
-export const useCodeDataByCodeId = (
-  codeId: string,
-  enabled = true
-): UseQueryResult<Omit<CodeData, "chainId"> | null> => {
+interface CodeDataByCodeIdParams {
+  codeId: string;
+  enabled?: boolean;
+}
+
+export const useCodeDataByCodeId = ({
+  codeId,
+  enabled = true,
+}: CodeDataByCodeIdParams): UseQueryResult<Omit<
+  CodeData,
+  "chainId"
+> | null> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(async () => {
@@ -260,3 +272,18 @@ export const useCodeListCountByWalletAddress = (
     }
   );
 };
+
+export type LCDCodeInfoSuccessCallback = (data: CodeIdInfoResponse) => void;
+
+export const useLCDCodeInfo = (
+  codeId: string,
+  options?: Omit<UseQueryOptions<CodeIdInfoResponse>, "queryKey">
+): UseQueryResult<CodeIdInfoResponse> => {
+  const lcdEndpoint = useBaseApiRoute("rest");
+  const queryFn = async () => getCodeIdInfo(lcdEndpoint, codeId);
+  return useQuery(
+    [CELATONE_QUERY_KEYS.CODE_INFO, lcdEndpoint, codeId],
+    queryFn,
+    options
+  );
+};
diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index 89bd780aa..4497e539b 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -54,10 +54,10 @@ export const useSearchHandler = (
   const getAddressType = useGetAddressType();
   const addressType = getAddressType(debouncedKeyword);
   const { data: txData, isFetching: txFetching } = useTxData(debouncedKeyword);
-  const { data: codeData, isFetching: codeFetching } = useCodeDataByCodeId(
-    debouncedKeyword,
-    isWasm && isCodeId(debouncedKeyword)
-  );
+  const { data: codeData, isFetching: codeFetching } = useCodeDataByCodeId({
+    codeId: debouncedKeyword,
+    enabled: isWasm && isCodeId(debouncedKeyword),
+  });
   const { data: contractData, isFetching: contractFetching } = useQuery(
     [CELATONE_QUERY_KEYS.CONTRACT_INFO, lcdEndpoint, debouncedKeyword],
     async () => queryContract(lcdEndpoint, debouncedKeyword as ContractAddr),
diff --git a/src/lib/utils/codePermission.ts b/src/lib/utils/codePermission.ts
index 0226ba131..f2236fd8e 100644
--- a/src/lib/utils/codePermission.ts
+++ b/src/lib/utils/codePermission.ts
@@ -6,10 +6,13 @@ import { truncate } from "./truncate";
 export const resolvePermission = (
   address: Option<Addr>,
   permission: AccessConfigPermission = AccessConfigPermission.UNKNOWN,
-  permissionAddresses: PermissionAddresses = []
+  permissionAddresses: PermissionAddresses = [],
+  permissionAddress = ""
 ): boolean =>
   permission === AccessConfigPermission.EVERYBODY ||
-  (address ? permissionAddresses.includes(address) : false);
+  (address
+    ? permissionAddresses.includes(address) || permissionAddress === address
+    : false);
 
 export const getPermissionHelper = (
   address: Option<Addr>,