diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index a5e7f2be..1fbc8cb9 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -112,10 +112,7 @@
             "zip": "to 'zip'",
             "not_present": "to 'not present'",
             "extension_not_present": "to 'extension not present'",
-            "extension_only_present": "to 'extension only present'",
-            "info-not_present": "this name may not appear in the zip/folder in which this constraint is located",
-            "info-extension_not_present": "files with this extension may not appear in the zip/folder in which this constraint is located",
-            "info-extension_only_present": "in the zip/folder in which this constraint is located, only files with this extension are allowed"
+            "extension_only_present": "to 'extension only present'"
         },
         "warning_change_root": {
             "type_switch": "All current file-specifications will be removed. Are you sure you want to change the type of the root?"
@@ -129,13 +126,14 @@
             "global-local": "Global constraints apply to all files in the submission. Local constraints only apply in the zip/folder in which they are located.",
             "extensions": "Please begin extension names with a dot.",
             "color_codes": {
-                "title": "color codes:",
+                "title": "color codes",
                 "file": "file",
                 "directory": "directory",
                 "zip": "zip",
                 "not_present": "not present",
                 "extension_not_present": "extension not present",
-                "extension_only_present": "extension only present"
+                "extension_only_present": "extension only present",
+                "href": "more info"
             }
         }
     },
diff --git a/frontend/public/locales/nl/translation.json b/frontend/public/locales/nl/translation.json
index 8556d887..aee2a1ab 100644
--- a/frontend/public/locales/nl/translation.json
+++ b/frontend/public/locales/nl/translation.json
@@ -100,7 +100,7 @@
     },
     "constraints": {
       "global": "Globale voorwaarden:",
-      "local": "Locale voorwaarden:"
+      "local": "Lokale voorwaarden:"
     },
     "single_file": {
       "name": "naam:"
@@ -112,10 +112,7 @@
       "zip": "maak 'zip'",
       "not_present": "maak 'niet-aanwezig'",
       "extension_not_present": "maak 'extensie niet aanwezig'",
-      "extension_only_present": "maak 'extensie enkel aanwezig'",
-      "info-not_present": "deze naam mag niet voorkomen in zip/folder waarin deze voorwaarde zich bevindt",
-      "info-extension_not_present": "files met deze extensie mogen niet voorkomen in zip/folder waarin deze voorwaarde zich bevindt",
-      "info-extension_only_present": "in zip/folder waarin deze voorwaarde zich bevindt mogen enkel files met deze extensie komen"
+      "extension_only_present": "maak 'extensie enkel aanwezig'"
     },
     "warning_change_root": {
       "type_switch": "Alle huidige bestand-specificaties zullen verwijderd worden. Ben je zeker dat je het type van de root wil veranderen"
@@ -126,13 +123,14 @@
       "global-local": "Globale voorwaarden worden toegepast op alle bestanden in de indiening. Lokale voorwaarden slechts in de zip/folder waarin ze zich bevinden.",
       "extensions": "Begin extensie-namen telkens met een punt.",
       "color_codes": {
-        "title": "kleurencodes:",
+        "title": "kleurencodes",
         "file": "bestand",
         "directory": "folder",
         "zip": "zip",
         "not_present": "niet aanwezig",
         "extension_not_present": "extensie niet aanwezig",
-        "extension_only_present": "extensie enkel aanwezig"
+        "extension_only_present": "extensie enkel aanwezig",
+        "href": "meer info"
       }
     }
   },
diff --git a/frontend/src/assets/styles/SimpleTests/simple_checks.css b/frontend/src/assets/styles/SimpleTests/simple_checks.css
index 735f4bcf..a5bdb58c 100644
--- a/frontend/src/assets/styles/SimpleTests/simple_checks.css
+++ b/frontend/src/assets/styles/SimpleTests/simple_checks.css
@@ -144,6 +144,7 @@
 .info-colorcodes-row {
     display: flex;
     flex-direction: row;
+    gap: 4px;
 }
 
 .bullet-list > *::before {
diff --git a/frontend/src/components/SimpleTests/SimpleTests.tsx b/frontend/src/components/SimpleTests/SimpleTests.tsx
index ca841827..c9c95c86 100644
--- a/frontend/src/components/SimpleTests/SimpleTests.tsx
+++ b/frontend/src/components/SimpleTests/SimpleTests.tsx
@@ -603,23 +603,20 @@ export default function SimpleTests(props: {
                                         </div>
                                     }
                                     
-                                    <div>{t('submission_files.information.color_codes.title')}</div>
+                                    <div className="info-colorcodes-row">
+                                        <div>{t('submission_files.information.color_codes.title')}</div>
+                                        <a href="https://selab-2.github.io/UGent-2/simple_constraints.html" target="_blank" rel="noopener noreferrer">
+                                            ({t('submission_files.information.color_codes.href')})
+                                        </a>
+                                        <div>:</div>
+                                    </div>
                                     <div className="color-codes bullet-list">
                                         <div className="FILE">{t('submission_files.information.color_codes.file')}</div>
                                         <div className="DIRECTORY">{t('submission_files.information.color_codes.directory')}</div>
                                         <div className="ZIP">{t('submission_files.information.color_codes.zip')}</div>
-                                        <div className="info-colorcodes-row">
-                                            <div className="NOT_PRESENT">{t('submission_files.information.color_codes.not_present')}</div>
-                                            <div>({t('submission_files.menu.info-not_present')})</div>
-                                        </div>
-                                        <div className="info-colorcodes-row">
-                                            <div className="EXTENSION_NOT_PRESENT">{t('submission_files.information.color_codes.extension_not_present')}</div>
-                                            <div>({t('submission_files.menu.info-extension_not_present')})</div>
-                                        </div>
-                                        <div className="info-colorcodes-row">
-                                            <div className="EXTENSION_ONLY_PRESENT">{t('submission_files.information.color_codes.extension_only_present')}</div>
-                                            <div>({t('submission_files.menu.info-extension_only_present')})</div>
-                                        </div>
+                                        <div className="NOT_PRESENT">{t('submission_files.information.color_codes.not_present')}</div>
+                                        <div className="EXTENSION_NOT_PRESENT">{t('submission_files.information.color_codes.extension_not_present')}</div>
+                                        <div className="EXTENSION_ONLY_PRESENT">{t('submission_files.information.color_codes.extension_only_present')}</div>
                                     </div>
                                 </div>
                             }