diff --git a/package-lock.json b/package-lock.json
index fd75e936..76b68fef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "design-react-kit": "^5.0.4",
         "i18next": "^23.2.2",
         "i18next-browser-languagedetector": "^7.2.0",
+        "js-yaml": "^4.1.0",
         "locale-codes": "^1.3.1",
         "lodash": "^4.17.21",
         "react": "^18.3.1",
@@ -38,6 +39,7 @@
         "@swc/jest": "^0.2.26",
         "@testing-library/jest-dom": "^5.16.5",
         "@types/golang-wasm-exec": "^1.15.0",
+        "@types/js-yaml": "^4.0.9",
         "@types/lodash": "^4.14.195",
         "@types/node": "^20.3.1",
         "@types/react": "^18.3.3",
@@ -3646,6 +3648,13 @@
         "pretty-format": "^29.0.0"
       }
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -4432,8 +4441,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-query": {
       "version": "5.3.2",
@@ -10887,7 +10895,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
diff --git a/package.json b/package.json
index dfa2e54b..21d1f05f 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "design-react-kit": "^5.0.4",
     "i18next": "^23.2.2",
     "i18next-browser-languagedetector": "^7.2.0",
+    "js-yaml": "^4.1.0",
     "locale-codes": "^1.3.1",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
@@ -67,6 +68,7 @@
     "@swc/jest": "^0.2.26",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/golang-wasm-exec": "^1.15.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.14.195",
     "@types/node": "^20.3.1",
     "@types/react": "^18.3.3",
diff --git a/src/app/components/Editor.tsx b/src/app/components/Editor.tsx
index b52946ba..24327acf 100644
--- a/src/app/components/Editor.tsx
+++ b/src/app/components/Editor.tsx
@@ -35,6 +35,34 @@ import EditorContractors from "./EditorContractors";
 import linter from "../linter";
 
 import useFormPersist from "react-hook-form-persist";
+import yaml from 'js-yaml'
+
+
+async function readStreamAsText<T extends ArrayBuffer>(readableStream: ReadableStream<T>) {
+  const reader = readableStream.getReader();
+  let result = '';
+  const decoder = new TextDecoder();
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    result += decoder.decode(value, { stream: true });
+  }
+
+  result += decoder.decode(); // Finalize decoding
+  return result;
+}
+
+const serializeYml = (yamlString: string) => {
+  if (!yamlString) {
+    throw new Error('serializeYml: yamlString is a falsy value')
+  }
+  try {
+    return yaml.load(yamlString)
+  } catch {
+    throw new Error('serializeYml: error on load')
+  }
+}
 
 const resolver: Resolver<PublicCode> = async (values) => {
   const res = await validator(JSON.stringify(values), "main");
@@ -80,6 +108,7 @@ export default function Editor() {
   });
   const { t } = useTranslation();
   const { getValues, handleSubmit, watch, setValue, reset } = methods;
+  const [, setImportedValue] = useState<PublicCode | undefined>(undefined)
 
   useFormPersist("form-values", {
     watch,
@@ -104,6 +133,26 @@ export default function Editor() {
     }
   );
 
+  const loadRemoteYamlHandler = async (url: string) => {
+    console.log('loadRemoteYaml', url)
+
+    const publicCode = await fetch(url)
+      .then(res => res.body)
+      .then(res => res ? readStreamAsText(res) : '')
+      .then(res => serializeYml(res) as PublicCode)
+      .then(res => {
+        console.log(res)
+        return res;
+      })
+
+    setImportedValue(publicCode)
+
+    Object.keys(publicCode).forEach((value) => {
+      const key = value as keyof PublicCode
+      setValue(key as keyof PublicCode, publicCode[key as keyof PublicCode])
+    });
+  }
+
   return (
     <Container>
       <Head />
@@ -265,7 +314,7 @@ export default function Editor() {
       <Footer
         reset={() => reset()}
         submit={() => undefined}
-        loadRemoteYaml={() => undefined}
+        loadRemoteYaml={(url) => loadRemoteYamlHandler(url)}
         trigger={() => submit()}
         languages={languages}
         yamlLoaded
diff --git a/src/app/components/Foot.tsx b/src/app/components/Foot.tsx
index 2fba0c4b..7128f03c 100644
--- a/src/app/components/Foot.tsx
+++ b/src/app/components/Foot.tsx
@@ -20,14 +20,16 @@ export const Footer = (props: Props): JSX.Element => {
   const [uploadOpen, setUploadOpen] = useState(false);
   const [isModalVisible, setModalVisibility] = useState(false);
   const [url, setUrl] = useState("");
-
+//https://raw.githubusercontent.com/italia/design-angular-kit/refs/heads/main/publiccode.yml
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    console.log('handleSubmit', event)
     const {
-      url: { value },
+      [0]: { value },
     } = event.target as typeof event.target & {
-      url: { value?: string };
+      [0]: { value?: string };
     };
+    console.log(value)
     if (!value || !validator.isURL(value)) {
       notify(t("editor.notvalidurl"), { state: "error" });
       return;
@@ -43,6 +45,7 @@ export const Footer = (props: Props): JSX.Element => {
   };
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    console.log(event);
     const { value } = event.target;
     setUrl(value);
   };
diff --git a/src/app/components/UploadModal.tsx b/src/app/components/UploadModal.tsx
index a60815f2..8f2031ff 100644
--- a/src/app/components/UploadModal.tsx
+++ b/src/app/components/UploadModal.tsx
@@ -40,21 +40,26 @@ export default function UploadModal({
         Upload an existing publiccode.yml
       </ModalHeader>
       <ModalBody>
-        <Row>
-          <p>{t("editor.browsefile")}</p>
-        </Row>
-        <Input
-          className="d-none"
-          innerRef={inputRef}
-          type="file"
-          accept=".yml, .yaml"
-        />
+        <Form inline onSubmit={onSubmit}>
 
-        <Button color="primary" onClick={() => inputRef.current?.click()}>
-          <Icon color="white" icon="it-upload" />
-          {t("editor.browse")}
-        </Button>
+          <Row>
+            <p>{t("editor.browsefile")}</p>
+          </Row>
+          <Input
+            className="d-none"
+            innerRef={inputRef}
+            type="file"
+            accept=".yml, .yaml"
+          />
 
+          <Button color="primary" onClick={() => inputRef.current?.click()}>
+            <Icon color="white" icon="it-upload" />
+            {t("editor.browse")}
+          </Button>
+          <Button color="primary" size="xs" type="submit">
+            <Icon color="white" icon="it-upload" size="xs" />
+          </Button>
+        </Form>
         <Row className="mt-3">
           <p>{t("editor.pastefile")}</p>
         </Row>