diff --git a/components/elements/index.js b/components/elements/index.js
index 68e4b0e6..9312d4bf 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -11,7 +11,7 @@ import fieldLookup from "../../data/crmfieldlookuptranslations.json";
 import pickListLookup from "../../data/picklistLookups.json";
 import useTranslation from "next-translate/useTranslation";
 import FileUpload from "../newappeal/fileupload";
-import { useDropzone } from "react-dropzone";
+import Dropzone, { useDropzone } from "react-dropzone";
 
 const RenderTextfield = ({
     id,
@@ -548,13 +548,11 @@ export function FileUploadField(props) {
                 name={props.name}
                 id={props.name}
                 component={RenderFileUpload}
-                type="text"
                 className="govuk-input govuk-input--width-20"
                 //validate={[required]}
                 label={props.label}
                 errorMsg="Is required"
             />
-            helllo
         </div>
     );
 }
@@ -585,51 +583,119 @@ const rejectStyle = {
     borderColor: "#ff1744",
 };
 
-const RenderFileUpload = ({
-    id,
-    className,
-    rows,
-    datafieldname,
-    name,
-    label,
-    input,
-    errorMsg,
-    meta: { touched, error },
-    ...custom
-}) => {
-    const [files, setFiles] = useState([]);
+// const RenderFileUpload2 = ({
+//     id,
+//     className,
+//     rows,
+//     datafieldname,
+//     name,
+//     label,
+//     input,
+//     errorMsg,
+//     meta: { touched, errorStr },
+//     ...custom
+// }) => {
+//     const [files, setFiles] = useState([]);
 
-    const onDrop = useCallback((acceptedFiles) => {
-        setFiles(
-            acceptedFiles.map((file) =>
-                Object.assign(file, {
-                    preview: URL.createObjectURL(file),
-                })
-            )
-        );
-    }, []);
+//     const onDrop = useCallback((acceptedFiles, fileRejections, event) => {
+//         setFiles(
+//             acceptedFiles.map((file) =>
+//                 Object.assign(file, {
+//                     preview: URL.createObjectURL(file),
+//                 })
+//             )
+//         );
+//         console.log(acceptedFiles);
+//         event.target[acceptedFiles];
+//         console.log(event.target.files);
+//     }, []);
 
-    const {
-        getRootProps,
-        getInputProps,
-        isDragActive,
-        isDragAccept,
-        isDragReject,
-    } = useDropzone({
-        onDrop,
-    });
+//     const onChange = useCallback((acceptedFiles, fileRejections, event) => {
+//         setFiles(
+//             acceptedFiles.map((file) =>
+//                 Object.assign(file, {
+//                     preview: URL.createObjectURL(file),
+//                 })
+//             )
+//         );
+//         event.target.files[acceptedFiles];
+//         console.log(event.target.files);
+//     }, []);
 
+//     const {
+//         getRootProps,
+//         getInputProps,
+//         isDragActive,
+//         isDragAccept,
+//         isDragReject,
+//     } = useDropzone({
+//         onDrop,
+//         onChange,
+//     });
+
+//     const style = useMemo(
+//         () => ({
+//             ...baseStyle,
+//             ...(isDragActive ? activeStyle : {}),
+//             ...(isDragAccept ? acceptStyle : {}),
+//             ...(isDragReject ? rejectStyle : {}),
+//         }),
+//         [isDragActive, isDragReject, isDragAccept]
+//     );
+
+//     const thumbs = files.map((file) => (
+//         <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
+//             <img src={file.preview} alt={file.name} width="50" /> -{" "}
+//             <span className="govuk-body">
+//                 {file.name} ({file.size / 1024}kb)
+//             </span>
+//         </div>
+//     ));
+
+//     // clean up
+//     useEffect(
+//         () => () => {
+//             files.forEach((file) => URL.revokeObjectURL(file.preview));
+//         },
+//         [files]
+//     );
+
+//     const onChangeFile = (e) => {
+//         const {
+//             input: { onChange },
+//         } = props;
+//         onChange(e.target.files[0]);
+//     };
+//     return (
+//         <div className="govuk-grid-row">
+//             <div className="govuk-form-group"></div>
+//             <section className="container">
+//                 <div {...getRootProps({ style })}>
+//                     <input {...getInputProps()} />
+//                     <div>Drag and drop your images here.</div>
+//                 </div>
+//             </section>{" "}
+//             <aside>{thumbs}</aside>
+//             {touched && errorStr && <span>{errorStr}</span>}
+//         </div>
+//     );
+// };
+
+const RenderFileUpload = (field) => {
+    const files = field.input.value;
     const style = useMemo(
         () => ({
             ...baseStyle,
-            ...(isDragActive ? activeStyle : {}),
-            ...(isDragAccept ? acceptStyle : {}),
-            ...(isDragReject ? rejectStyle : {}),
+            // ...(isDragActive ? activeStyle : {}),
+            // ...(isDragAccept ? acceptStyle : {}),
+            // ...(isDragReject ? rejectStyle : {}),
         }),
-        [isDragActive, isDragReject, isDragAccept]
+        []
+        // [isDragActive, isDragReject, isDragAccept]
     );
+    const [filesList, setFilesList] = useState([]);
 
-    const thumbs = files.map((file) => (
+    const thumbs = filesList.map((file) => (
         <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
             <img src={file.preview} alt={file.name} width="50" /> -{" "}
             <span className="govuk-body">
@@ -638,24 +704,91 @@ const RenderFileUpload = ({
         </div>
     ));
 
-    // clean up
-    useEffect(
-        () => () => {
-            files.forEach((file) => URL.revokeObjectURL(file.preview));
-        },
-        [files]
-    );
+    function bytesToSize(bytes) {
+        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        if (bytes == 0) return "0 Byte";
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
+    }
+
+    const getThumbnailIcon = (fileObj, fileType) => {
+        switch (fileType) {
+            case "text/html":
+                return "/assets/images/documentTypes/html.png";
+                break;
+            case "text/plain":
+                return "/assets/images/documentTypes/txt.png";
+                break;
+            case "application/msword":
+                return "/assets/images/documentTypes/doc.png";
+                break;
+            case "application/pdf":
+                return "/assets/images/documentTypes/pdf.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+                return "/assets/images/documentTypes/docx.png";
+                break;
+            case "text/csv":
+                return "/assets/images/documentTypes/csv.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                return "/assets/images/documentTypes/xlsx.png";
+                break;
+
+            case "application/zip":
+                return "/assets/images/documentTypes/zip.png";
+                break;
+            case "image/jpeg":
+            case "image/png":
+                return URL.createObjectURL(fileObj);
+                break;
+        }
+    };
     return (
-        <div className="govuk-grid-row">
-            <div className="govuk-form-group"></div>
-            <section className="container">
-                <div {...getRootProps({ style, className: "dropzone" })}>
-                    <input {...getInputProps()} />
-                    <p>Drag and drop files here or click to select files</p>
-                </div>
-            </section>{" "}
-            <aside>{thumbs}</aside>
-            {touched && errorStr && <span>{errorStr}</span>}
+        <div>
+            <Dropzone
+                onDrop={(filesToUpload, e) =>
+                    field.input.onChange(filesToUpload)
+                }
+            >
+                {({ getRootProps, getInputProps }) => (
+                    <div className="govuk-grid-row">
+                        <div className="govuk-form-group"></div>
+                        <section className="container">
+                            <div {...getRootProps({ style })}>
+                                {" "}
+                                <input {...getInputProps()} />
+                                <div>Drag and drop your files here.</div>
+                            </div>
+                            <aside>{thumbs}</aside>
+                        </section>
+                    </div>
+                )}
+            </Dropzone>
+
+            {field.meta.touched && field.meta.error && (
+                <span className="error">{field.meta.error}</span>
+            )}
+            {files && Array.isArray(files) && (
+                <ul>
+                    {files.map((file, i) => (
+                        <div
+                            key={file.name}
+                            className="govuk-!-margin-bottom-5 fileThumb"
+                        >
+                            <img
+                                src={getThumbnailIcon(file, file.type)}
+                                alt={file.name}
+                                width="50"
+                            />{" "}
+                            {"  "}
+                            <span className="govuk-body govuk-!-padding-left-5">
+                                {file.name} ({bytesToSize(file.size)})
+                            </span>
+                        </div>
+                    ))}
+                </ul>
+            )}
         </div>
     );
 };
diff --git a/components/search/advancedsearch.js b/components/search/advancedsearch.js
index 849a5c36..432f7357 100644
--- a/components/search/advancedsearch.js
+++ b/components/search/advancedsearch.js
@@ -17,13 +17,24 @@ export const minLength = (errorMsg) => (value) =>
         ? errorMsg //`Must be ${min} characters or more`
         : undefined;
 
+export const leastOneValue = (errorMsg) => {};
+
 let AdvancedSearch = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    const { LPAData, onSubmit, handleSubmit, myportal } = props;
+    const {
+        LPAData,
+        onSubmit,
+        handleSubmit,
+        myportal,
+        error,
+        pristine,
+        reset,
+        submitting,
+    } = props;
 
     const appealOptionsObj = _.isEmpty(props)
         ? [{}]
@@ -461,6 +472,7 @@ let AdvancedSearch = (props) => {
                                     type="submit"
                                     name="search"
                                     className="govuk-button"
+                                    disabled={pristine}
                                 >
                                     {t("common:search-button")}
                                 </button>
diff --git a/public/assets/images/documenttypes/csv.png b/public/assets/images/documenttypes/csv.png
new file mode 100644
index 00000000..3ce38d48
Binary files /dev/null and b/public/assets/images/documenttypes/csv.png differ
diff --git a/public/assets/images/documenttypes/doc.png b/public/assets/images/documenttypes/doc.png
new file mode 100644
index 00000000..8914a18e
Binary files /dev/null and b/public/assets/images/documenttypes/doc.png differ
diff --git a/public/assets/images/documenttypes/docx.png b/public/assets/images/documenttypes/docx.png
new file mode 100644
index 00000000..608a68b9
Binary files /dev/null and b/public/assets/images/documenttypes/docx.png differ
diff --git a/public/assets/images/documenttypes/html.png b/public/assets/images/documenttypes/html.png
new file mode 100644
index 00000000..151fb3d7
Binary files /dev/null and b/public/assets/images/documenttypes/html.png differ
diff --git a/public/assets/images/documenttypes/pdf.png b/public/assets/images/documenttypes/pdf.png
new file mode 100644
index 00000000..5df29217
Binary files /dev/null and b/public/assets/images/documenttypes/pdf.png differ
diff --git a/public/assets/images/documenttypes/txt.png b/public/assets/images/documenttypes/txt.png
new file mode 100644
index 00000000..8bab95cb
Binary files /dev/null and b/public/assets/images/documenttypes/txt.png differ
diff --git a/public/assets/images/documenttypes/xlsx.png b/public/assets/images/documenttypes/xlsx.png
new file mode 100644
index 00000000..b4957161
Binary files /dev/null and b/public/assets/images/documenttypes/xlsx.png differ
diff --git a/public/assets/images/documenttypes/zip.png b/public/assets/images/documenttypes/zip.png
new file mode 100644
index 00000000..5783736c
Binary files /dev/null and b/public/assets/images/documenttypes/zip.png differ
diff --git a/public/assets/images/planning-casework-cy.svg b/public/assets/images/planning-casework-cy.svg
index 9a6545a2..8ee9de91 100644
--- a/public/assets/images/planning-casework-cy.svg
+++ b/public/assets/images/planning-casework-cy.svg
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="163px" height="19px" viewBox="0 0 163 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Gwaith Achos</title>
+<svg width="279px" height="24px" viewBox="0 0 279 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Gwaith achos cynllun</title>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rockwell-Bold, Rockwell" font-size="24" font-weight="bold" letter-spacing="-0.75">
-        <text id="Gwaith-Achos" fill="#000000">
-            <tspan x="-1" y="18">Gwaith Achos</tspan>
+        <text id="Gwaith-achos-cynllun" fill="#000000">
+            <tspan x="-1" y="18">Gwaith achos cynllunio</tspan>
         </text>
     </g>
 </svg>
\ No newline at end of file
diff --git a/public/assets/images/planning-casework-en.svg b/public/assets/images/planning-casework-en.svg
index e018d1de..80c762f4 100644
--- a/public/assets/images/planning-casework-en.svg
+++ b/public/assets/images/planning-casework-en.svg
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="118px" height="19px" viewBox="0 0 118 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Casework</title>
+<svg width="227px" height="24px" viewBox="0 0 227 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Planning casework</title>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rockwell-Bold, Rockwell" font-size="24" font-weight="bold" letter-spacing="-0.75">
-        <text id="Casework" fill="#000000">
-            <tspan x="-1" y="18">Casework</tspan>
+        <text id="Planning-casework" fill="#000000">
+            <tspan x="0" y="18">Planning casework</tspan>
         </text>
     </g>
 </svg>
\ No newline at end of file
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 35e0c574..85b9d41c 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -1877,3 +1877,11 @@ fade {
         background-position: 90% 15px;
     }
 }
+
+//fileupload
+
+.fileThumb {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}