diff --git a/src/src/App.css b/src/src/App.css
index c74bdf08..5b1165db 100644
--- a/src/src/App.css
+++ b/src/src/App.css
@@ -909,4 +909,16 @@ svg.invalid {
   padding: 5px;
   border-radius: 5px;
   font-size: inherit!important;
+}
+
+.title_badge{
+  align-items: center;
+  color: rgb(42, 111, 184);
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: 0.95rem;
+  font-weight: 300;
+  gap: 4px;
+  line-height: 1.5;
 }
\ No newline at end of file
diff --git a/src/src/assets/App.css b/src/src/assets/App.css
index 69f594a7..b0933339 100644
--- a/src/src/assets/App.css
+++ b/src/src/assets/App.css
@@ -844,4 +844,15 @@ svg.invalid{
   padding: 5px;
   border-radius: 5px;
   font-size: inherit!important;
+}
+.title_badge{
+  align-items: center;
+  color: rgb(42, 111, 184);
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: 0.95rem;
+  font-weight: 300;
+  gap: 4px;
+  line-height: 1.5;
 }
\ No newline at end of file
diff --git a/src/src/components/collections/collections.jsx b/src/src/components/collections/collections.jsx
index fb829b3b..ca53e197 100644
--- a/src/src/components/collections/collections.jsx
+++ b/src/src/components/collections/collections.jsx
@@ -29,7 +29,7 @@ import Alert from '@mui/material/Alert';
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQuestionCircle, faSpinner, faTrash, faCheck,faExclamationTriangle, faPlus,faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle, faUpRightFromSquare, faSpinner, faTrash, faCheck,faExclamationTriangle, faPlus,faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
@@ -631,7 +631,6 @@ export function CollectionForm (props){
         </>
       )
     }
-    
     var renderAssociationTable = () => {
       var hiddenFields = [];
       var uniqueTypes = new Set(associatedEntities.map(obj => obj.entity_type.toLowerCase()));
@@ -724,6 +723,11 @@ export function CollectionForm (props){
               {!props.newForm && (
                 <h5>{props.editingCollection.title}</h5>
               )}
+              {editingCollection && editingCollection.doi_url  && (
+                <h4 className="title_badge">
+                  doi: <a href={editingCollection.doi_url} target='_blank' >{editingCollection.doi_url} </a><FontAwesomeIcon icon={faUpRightFromSquare}/>
+                </h4>
+              )}
             </div>
           </div>
 
@@ -919,18 +923,7 @@ export function CollectionForm (props){
             value={formValues.title}
           />
         </FormControl>
-        {editingCollection && editingCollection.doi_url   && (
-          <FormControl>
-            <TextField
-              label="DOI url"
-              name="DOIurl"
-              id="DOIurl"
-              disabled={true}
-              variant="standard"
-              value={editingCollection.doi_url}
-            />
-          </FormControl>
-        )}
+
         <FormControl>
           <TextField
             label="Description"
@@ -979,7 +972,7 @@ export function CollectionForm (props){
 
         <div className="row">
           <div className="buttonWrapRight">
-            {userAdmin === true && !editingCollection.doi_url && (          
+            {userAdmin === true && (editingCollection && !editingCollection.doi_url) && (          
               <LoadingButton 
                 loading={publishing}
                 onClick={() => handlePublish()}
diff --git a/src/src/components/collections/epicollections.jsx b/src/src/components/collections/epicollections.jsx
index 3f787ee5..fab099ef 100644
--- a/src/src/components/collections/epicollections.jsx
+++ b/src/src/components/collections/epicollections.jsx
@@ -31,7 +31,7 @@ import Alert from '@mui/material/Alert';
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQuestionCircle, faSpinner, faTrash, faExclamationTriangle, faCheck, faPlus,faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle, faSpinner, faUpRightFromSquare, faTrash, faExclamationTriangle, faCheck, faPlus,faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
@@ -743,6 +743,11 @@ export function EPICollectionForm (props){
             {!props.newForm && (
               <h5>{props.editingCollection.title}</h5>
             )}
+            {editingCollection && editingCollection.doi_url  && (
+              <h4 className="title_badge">
+                doi: <a href={editingCollection.doi_url} target='_blank' >{editingCollection.doi_url} </a><FontAwesomeIcon icon={faUpRightFromSquare}/>
+              </h4>
+            )}
           </div>
         </div>
 
@@ -938,18 +943,6 @@ export function EPICollectionForm (props){
           value={formValues.title}
         />
       </FormControl>
-      {editingCollection && editingCollection.doi_url  && (
-          <FormControl>
-            <TextField
-              label="DOI url"
-              name="DOIurl"
-              id="DOIurl"
-              disabled={true}
-              variant="standard"
-              value={editingCollection.doi_url}
-            />
-          </FormControl>
-        )}
       <FormControl>
         <TextField
           label="Description"
@@ -1000,7 +993,7 @@ export function EPICollectionForm (props){
 
       <div className="row">
         <div className="buttonWrapRight">
-          {userAdmin === true && !editingCollection.doi_url && (          
+          {userAdmin === true && (editingCollection && !editingCollection.doi_url) && (          
             <LoadingButton 
               loading={publishing}
               onClick={() => handlePublish()}